feat(discountBanner): CHECKOUT-1459 add customizing colors of a disco…

…unt banner
bigcommerce · Feb 15, 2017 · b4ac682 · b4ac682
1 parent c959917
commit b4ac682
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss
@@ -181,3 +181,18 @@ a {
     background-color: stencilString("optimizedCheckout-formField-backgroundColor");
     border-color: stencilColor("optimizedCheckout-formField-borderColor");
 }
+
+//
+// Discount Banners
+// Background & Text & Icon Color
+// Styles discount banners.
+// -----------------------------------------------------------------------------
+
+.optimizedCheckout-discountBanner {
+    background-color: stencilColor("optimizedCheckout-discountBanner-backgroundColor");
+    color: stencilColor("optimizedCheckout-discountBanner-textColor");
+
+    svg {
+        fill: stencilColor("optimizedCheckout-discountBanner-textColor");
+    }
+}
diff --git a/config.json b/config.json
@@ -438,6 +438,8 @@
         "optimizedCheckout-buttonSecondary-borderColor": "#dfdfdf",
         "optimizedCheckout-link-color": "#ffffff",
         "optimizedCheckout-link-font": "Google_Source+Sans+Pro_400",
+        "optimizedCheckout-discountBanner-backgroundColor": "#f5f5f5",
+        "optimizedCheckout-discountBanner-textColor": "#333333",
         "optimizedCheckout-orderSummary-backgroundColor": "#696969",
         "optimizedCheckout-step-backgroundColor": "#f08383",
         "optimizedCheckout-step-text": "#ffffff",

diff --git a/schema.json b/schema.json
@@ -1718,6 +1718,20 @@
           }
         ]
       },
+      {
+        "type": "heading",
+        "content": "Discount Banner"
+      },
+      {
+        "type": "color",
+        "label": "Background color",
+        "id": "optimizedCheckout-discountBanner-backgroundColor"
+      },
+      {
+        "type": "color",
+        "label": "Text & Icon color",
+        "id": "optimizedCheckout-discountBanner-textColor"
+      },
       {
         "type": "heading",
         "content": "Order summary"