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

…unt banner
bigcommerce · Feb 17, 2017 · e3612e5 · e3612e5
1 parent c959917
commit e3612e5
Show file tree

Hide file tree

Showing 3 changed files with 37 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-iconColor");
+    }
+}
diff --git a/config.json b/config.json
@@ -231,6 +231,9 @@
     "optimizedCheckout-buttonSecondary-borderColor": "#dfdfdf",
     "optimizedCheckout-link-color": "#4496f6",
     "optimizedCheckout-link-font": "Google_Karla_400",
+    "optimizedCheckout-discountBanner-backgroundColor": "#f5f5f5",
+    "optimizedCheckout-discountBanner-textColor": "#333333",
+    "optimizedCheckout-discountBanner-iconColor": "#333333",
     "optimizedCheckout-orderSummary-backgroundColor": "#ffffff",
     "optimizedCheckout-step-backgroundColor": "#4f4f4f",
     "optimizedCheckout-step-text": "#ffffff",

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