Feature: add form design base styles

package.json

@@ -18,6 +18,7 @@
         "@fortawesome/fontawesome-free": "^6.2.1",
         "@hookform/error-message": "^2.0.1",
         "@hookform/resolvers": "^2.9.10",
+        "@picocss/pico": "^1.5.7",
         "@stripe/react-stripe-js": "^1.16.4",
         "@stripe/stripe-js": "^1.46.0",
         "@svgr/webpack": "^6.5.1",

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_gateways.scss

@@ -1,153 +1,26 @@
-.givewp-fields-gateways {
-    ul {
-        display: flex;
-        flex-direction: column;
-        gap: 0.9375rem;
-        list-style: none;
-    }
-
-    li {
-        --tab-radio-diameter: 1.25rem;
-        --tab-radio-border-size: 0.0625rem;
-        --tab-block-padding: 1.375rem;
-        --tab-block-size: calc(var(--tab-block-padding) * 2 + var(--tab-radio-diameter));
-        --tab-inline-padding: 1.375rem;
-        --tab-transition: 0.2s ease-in-out;
-        position: relative;
-        -webkit-padding-before: var(--tab-block-size);
-        padding-block-start: var(--tab-block-size);
-        background-color: #fafafa;
-        transition: background-color var(--tab-transition);
-        border-radius: 0.25rem;
-    }
-
-    label {
-        color: #444;
-        list-style: none;
-        --tab-radio-diameter: 1.25rem;
-        --tab-radio-border-size: 0.0625rem;
-        --tab-block-padding: 1.375rem;
-        --tab-block-size: calc(var(--tab-block-padding) * 2 + var(--tab-radio-diameter));
-        --tab-inline-padding: 1.375rem;
-        --tab-transition: 0.2s ease-in-out;
-        box-sizing: inherit;
-        cursor: pointer;
-        --font-size: 1em;
-        --line-height: 1.25;
-        --block-size: calc(var(--font-size) * var(--line-height));
-        position: absolute;
-        inset-inline-start: calc(var(--tab-inline-padding) + var(--tab-radio-diameter) + 0.5rem);
-        inset-inline-end: var(--tab-inline-padding);
-        inset-block-start: calc((var(--tab-radio-diameter) - var(--block-size)) / 2 + var(--tab-block-padding));
-        font-weight: bold;
-        font-size: var(--font-size)/var(--line-height);
-        font-family: var(--givewp-primary-color);
-        line-height: var(--line-height);
-    }
-
-    input[type="radio"] {
-        list-style: none;
-        --tab-radio-diameter: 1.25rem;
-        --tab-radio-border-size: 0.0625rem;
-        --tab-block-padding: 1.375rem;
-        --tab-block-size: calc(var(--tab-block-padding) * 2 + var(--tab-radio-diameter));
-        --tab-inline-padding: 1.375rem;
-        --tab-transition: 0.2s ease-in-out;
-        box-sizing: inherit;
-        cursor: pointer;
-        border-start-start-radius: inherit;
-        border-start-end-radius: inherit;
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-        position: absolute;
-        inset-block-start: 0;
-        inset-inline: 0;
-        block-size: var(--tab-block-size);
-        inline-size: 100%;
-        margin: 0;
-        border-width: 0.0625rem;
-        border-style: solid;
-        appearance: none;
-        font-size: 1rem;
-        transition: border-color var(--tab-transition);
-        border-color: #000;
-        z-index: 10;
-
-        &:hover,
-        &:focus {
-            border-color: var(--givewp-primary-color);
-        }
-
-        &:not(:checked) {
-            ~ .givewp-fields-payment-gateway {
-                display: none;
-            }
-        }
-
-        &:checked {
-            border-end-start-radius: 0;
-            border-end-end-radius: 0;
-
-            ~ .givewp-fields-payment-gateway {
-                display: block;
-            }
-        }
-
-        &:before, &:after {
-            content: "";
-            position: absolute;
-            inset-block: 0;
-            inset-inline-start: 0;
-            margin-block: auto;
-            block-size: var(--diameter);
-            inline-size: var(--diameter);
-            border-radius: 9999px;
-        }
-
-        &:checked::after {
-            opacity: 1;
-        }
-
-        &:before {
-            --diameter: var(--tab-radio-diameter);
-            -webkit-margin-start: var(--tab-block-padding);
-            margin-inline-start: var(--tab-block-padding);
-            border: var(--tab-radio-border-size) solid #b4b9be;
-            box-shadow: inset 0 0.0625em 0.125em rgb(0 0 0 / 25%);
-        }
-
-        &:after {
-            --diameter: calc(var(--tab-radio-diameter) * 0.4);
-            -webkit-margin-start: calc((var(--tab-radio-diameter) - var(--diameter)) / 2 + var(--tab-block-padding));
-            margin-inline-start: calc((var(--tab-radio-diameter) - var(--diameter)) / 2 + var(--tab-block-padding));
-            background-color: var(--givewp-primary-color);
-            opacity: 0;
-            transition: opacity var(--tab-transition);
-        }
-    }
-
-    .givewp-fields-payment-gateway {
-        font-family: var(--givewp-primary-font, inherit), sans-serif;
-        color: rgb(68, 68, 68);
-        list-style: none;
-        --tab-radio-diameter: 1.25rem;
-        --tab-radio-border-size: 0.0625rem;
-        --tab-block-padding: 1.375rem;
-        --tab-block-size: calc(var(--tab-block-padding) * 2 + var(--tab-radio-diameter));
-        --tab-inline-padding: 1.375rem;
-        --tab-transition: 0.2s ease-in-out;
-        box-sizing: inherit;
-        inline-size: 100%;
-        border-block-width: 0px 0.0625rem;
-        border-inline: 0.0625rem solid rgb(221, 221, 221);
-        border-block-end-style: solid;
-        border-block-end-color: rgb(221, 221, 221);
-        padding-block: 2rem;
-        padding-inline: 1.375rem;
-        font-size: 0.9375rem;
-        line-height: 1.5;
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-        border-color: rgb(0, 0, 0);
-    }
-}
+input[name=gatewayId] {
+  + label::after {
+    font-family: "Font Awesome 6 Free";
+    position: absolute;
+    inset-inline-end: 0;
+    content: "\f4be";
+    color: #c1c1c1;
+    font-size: 1.5em;
+    block-size: 1em;
+    font-weight: 900;
+    transform: translateY(-0.15em);
+  }
+
+  &[value=paypal] + label::after {
+    font-family: "Font Awesome 6 Brands";
+    content: "\f1ed";
+  }
+
+  &[value^=test] + label::after {
+    content: "\f7d9";
+  }
+
+  &[value*="card"], &[value*="stripe"] + label::after {
+    content: "\f09d";
+  }
+}

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_goal.scss

@@ -19,7 +19,6 @@
 
 
 .givewp-form-goal-progress {
-    inline-size: 100%;
     padding: 1.25rem;
     border-block-start: 1px solid #ddd;
     border-end-start-radius: 0.5rem;
@@ -35,29 +34,9 @@
      * Safari, we’d have to break the accessibility for VoiceOver.
      */
     &-meter {
-        inline-size: 100%;
         block-size: 1.375em;
-        border-radius: 9999px;
+        border-radius: 100px;
         background-color: #f1f1f1;
-        box-shadow: inset 0 0.0625em 0.25rem rgba(0, 0, 0, 0.1);
-        overflow: hidden; /* Fallback for Safari */
-        overflow: clip;
-
-        &::after {
-            content: '';
-            display: block;
-            block-size: 100%;
-            --zero-percent: 0%; /* cssnano will strip this out otherwise */
-            inline-size: clamp(var(--zero-percent), var(--progress), 100%);
-            background: linear-gradient(
-                    180deg,
-                    var(--givewp-secondary-color) 0%,
-                    var(--givewp-secondary-color) 100%
-            ),
-            linear-gradient(180deg, #fff 0%, #ccc 100%);
-            background-blend-mode: multiply;
-            border-start-end-radius: inherit;
-            border-end-end-radius: inherit;
-        }
+        margin-bottom: 0;
     }
 }

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_header.scss

@@ -2,6 +2,7 @@
 
 .givewp-layouts {
     &-header {
+        width: 100%;
         border-top-left-radius: 0.5rem;
         border-top-right-radius: 0.5rem;
         box-shadow: rgb(0 0 0 / 30%) 0 0.125rem 0.3125rem;
@@ -32,6 +33,7 @@
         font-weight: 600;
         line-height: 1.2;
         text-shadow: 0 0.07em 0.14em rgba(0, 0, 0, 0.15);
+        color: currentColor;
 
         &::after {
             position: absolute;
@@ -52,6 +54,7 @@
         line-height: 1.45;
         margin: 0 auto;
         max-inline-size: 42ch;
+        color: currentColor;
     }
 }
 

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_layouts.scss

@@ -1,6 +1,7 @@
 .givewp-donation-form {
     width: 100%;
     max-width: 100%;
+    padding: 0;
 }
 
 .givewp-layouts-form {

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_receipt.scss

@@ -23,6 +23,7 @@
         font-weight: 600;
         line-height: 1.2;
         text-shadow: 0 0.07em 0.14em rgba(0, 0, 0, 0.15);
+        color: currentColor;
     }
 
     .social-sharing {
@@ -306,6 +307,7 @@
         line-height: 1.45;
         margin: 0 auto;
         max-inline-size: 42ch;
+        color: currentColor;
     }
 }
 

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_sections.scss

@@ -1,6 +1,7 @@
 .givewp-layouts-section {
     padding-block: clamp(1.75rem, -0.916667rem + 8.33333vw, 3.375rem);
     padding-inline: clamp(1rem, -4.53846rem + 17.3077vw, 4.375rem);
+    margin-bottom: 0;
 
     &:nth-of-type(2n+1) {
         background-color: rgb(255, 255, 255);

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/_stats.scss

@@ -31,6 +31,7 @@
         inline-size: calc(100% / 3);
         font-weight: 600;
         color: #767676;
+        margin-bottom: 0;
 
         &:first-child,
         &:nth-child(2) {

src/NextGen/DonationForm/FormDesigns/ClassicFormDesign/css/main.scss

@@ -1,16 +1,11 @@
-@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "@fortawesome/fontawesome-free/css/solid.min.css";
 @import 'variables';
 @import 'utilities';
-@import 'reset';
 @import 'header';
 @import 'stats';
 @import 'goal';
 @import 'inputs';
 @import 'sections';
 @import 'layouts';
-@import 'amount-field';
-@import 'donation-summary';
 @import 'gateways';
 @import 'receipt';
 

src/NextGen/DonationForm/FormDesigns/DeveloperFormDesign/DeveloperFormDesign.php

@@ -24,12 +24,4 @@ public static function name(): string
     {
         return __('Developer', 'give');
     }
-
-    /**
-     * @since 0.1.0
-     */
-    public function css(): string
-    {
-        return GIVE_NEXT_GEN_URL . 'build/developerFormDesignCss.css';
-    }
 }