PAYMENTS-4944 fix missing add method styles

bigcommerce · Jan 15, 2020 · caa4b22 · caa4b22
1 parent e65bee0
commit caa4b22
Showing 1 changed file with 98 additions and 0 deletions.
diff --git a/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss b/assets/scss/components/stencil/paymentMethods/_paymentMethods.scss
@@ -79,6 +79,15 @@
         }
     }
 
+    &-brand {
+        font-size: fontSize("smallest");
+        font-weight: fontWeight("semibold");
+
+        @include breakpoint("large") {
+            font-size: fontSize("base");
+        }
+    }
+
     &-meta {
         padding-left: spacing("half");
         margin-left: auto;
@@ -139,3 +148,92 @@
         text-align: center;
     }
 }
+
+// Payment Method Form - Add
+// -----------------------------------------------------------------------------
+
+.paymentMethodForm {
+    @include breakpoint("small") {
+        max-width: 60%;
+    }
+
+    &-column {
+        @include breakpoint("small") {
+            display: flex;
+
+            &:first-child .form-field {
+                margin-bottom: spacing("half");
+            }
+        }
+    }
+
+    &-heading {
+        color: color("greys", "darker");
+        font-family: fontFamily("sans");
+        margin-top: spacing("single");
+        text-transform: capitalize;
+    }
+
+    &-subheading {
+        display: flex;
+        font-weight: fontWeight("semibold");
+    }
+
+    &-cards {
+        @include breakpoint("small") {
+            margin-left: auto;
+        }
+    }
+
+    &-cards-icon {
+        margin-right: spacing("eighth");
+        width: remCalc(34px);
+    }
+
+    &-inputs {
+        position: relative;
+
+        @include breakpoint("small") {
+            &:last-child {
+                padding-left: spacing("single");
+                width: 30%;
+            }
+
+            &:first-child {
+                width: 70%;
+            }
+        }
+    }
+
+    &-inputs-icon {
+        position: absolute;
+        right: remCalc(9px);
+        top: remCalc(39px);
+
+        &.icon {
+            fill: color("greys", "light");
+            height: remCalc(21px);
+            width: remCalc(21px);
+        }
+    }
+
+    &-details {
+        margin-bottom: 0;
+
+        @include breakpoint("small") {
+            display: inline-block;
+            margin: 0 spacing("double") 0 0;
+        }
+    }
+
+    &-details-term {
+        font-weight: fontWeight("normal");
+        margin-bottom: spacing("half");
+    }
+
+    &-details-description {
+        font-size: fontSize("smaller");
+        font-weight: fontWeight("semibold");
+        letter-spacing: letterSpacing("large");
+    }
+}