Text boxes global settings setup (#889)

* Text boxes global settings setup
Shopify · Jan 5, 2022 · ee84459 · ee84459
1 parent 640f1dd
commit ee84459
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 4 deletions.
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
@@ -303,8 +303,13 @@
 }
 
 .banner__box {
-  border: 0;
-  padding: 4rem 3.5rem;
+  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+  padding: var(--text-boxes-padding);
+  border-radius: var(--text-boxes-radius);
+  box-shadow: var(--text-boxes-shadow-horizontal-offset)
+    var(--text-boxes-shadow-vertical-offset)
+    var(--text-boxes-shadow-blur-radius)
+    rgba(var(--color-foreground), var(--text-boxes-shadow-opacity));
   position: relative;
   height: fit-content;
   align-items: center;
@@ -375,7 +380,6 @@
 
 @media screen and (min-width: 750px) {
   .banner__box {
-    padding: 5rem;
     width: auto;
     max-width: 71rem;
     min-width: 45rem;

diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
@@ -260,6 +260,16 @@
   }
 }
 
+.multicolumn-card {
+  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+  padding: var(--text-boxes-padding);
+  border-radius: var(--text-boxes-radius);
+  box-shadow: var(--text-boxes-shadow-horizontal-offset)
+    var(--text-boxes-shadow-vertical-offset)
+    var(--text-boxes-shadow-blur-radius)
+    rgba(var(--color-foreground), var(--text-boxes-shadow-opacity));
+}
+
 .multicolumn-card__info .link {
   text-decoration: none;
   font-size: inherit;

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -86,6 +86,107 @@
       }
     ]
   },
+  {
+    "name": "Text boxes",
+    "settings": [
+      {
+        "type": "header",
+        "content": "Typography"
+      },
+      {
+        "type": "header",
+        "content": "Spacing"
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_padding",
+        "min": 0,
+        "max": 20,
+        "step": 1,
+        "unit": "px",
+        "label": "Padding",
+        "default": 10
+      },
+      {
+        "type": "header",
+        "content": "Borders"
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_border_opacity",
+        "min": 0,
+        "max": 100,
+        "step": 5,
+        "unit": "%",
+        "label": "Opacity",
+        "default": 50
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_border_width",
+        "min": 0,
+        "max": 10,
+        "step": 1,
+        "unit": "px",
+        "label": "Thickness",
+        "default": 1
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_radius",
+        "min": 0,
+        "max": 30,
+        "step": 3,
+        "unit": "px",
+        "label": "Corner radius",
+        "default": 0
+      },
+      {
+        "type": "header",
+        "content": "Shadow"
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_shadow_opacity",
+        "min": 0,
+        "max": 100,
+        "step": 5,
+        "unit": "%",
+        "label": "Opacity",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_shadow_horizontal_offset",
+        "min": -20,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "Horizontal offset",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_shadow_vertical_offset",
+        "min": -20,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "Vertical offset",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "text_boxes_shadow_blur_radius",
+        "min": 0,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "Blur radius",
+        "default": 0
+      }
+    ]
+  },
   {
     "name": "t:settings_schema.typography.name",
     "settings": [

diff --git a/layout/password.liquid b/layout/password.liquid
@@ -65,6 +65,15 @@
 
         --page-width: {{ settings.page_width | divided_by: 10 }}rem;
         --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
+
+        --text-boxes-padding: {{ settings.text_boxes_padding }}px;
+        --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
+        --text-boxes-border-width: {{ settings.text_boxes_border_width }}px;
+        --text-boxes-radius: {{ settings.text_boxes_radius }}px;
+        --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
+        --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
+        --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
+        --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur_radius }}px;
       }
     {% endstyle %}
 

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -90,12 +90,21 @@
         --popup-drawer-shadow-horizontal-offset: {{ settings.popup_drawer_shadow_horizontal_offset }}px;
         --popup-drawer-shadow-vertical-offset: {{ settings.popup_drawer_shadow_vertical_offset }}px;
         --popup-drawer-shadow-blur-radius: {{ settings.popup_drawer_blur_radius }}px;
-        
+
         {% comment %} Grid styles {% endcomment %}
         --grid-desktop-vertical-spacing: {{ settings.grid_desktop_vertical_spacing | divided_by: 10.0 }}rem;
         --grid-desktop-horizontal-spacing: {{ settings.grid_desktop_horizontal_spacing | divided_by: 10.0 }}rem;
         --grid-mobile-vertical-spacing: {{ settings.grid_mobile_vertical_spacing | divided_by: 10.0 }}rem;
         --grid-mobile-horizontal-spacing: {{ settings.grid_mobile_horizontal_spacing | divided_by: 10.0 }}rem;
+
+        --text-boxes-padding: {{ settings.text_boxes_padding }}px;
+        --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
+        --text-boxes-border-width: {{ settings.text_boxes_border_width }}px;
+        --text-boxes-radius: {{ settings.text_boxes_radius }}px;
+        --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
+        --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
+        --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
+        --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur_radius }}px;
       }
 
       *,

diff --git a/templates/gift_card.liquid b/templates/gift_card.liquid
@@ -63,6 +63,7 @@
         --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
 
         --page-width: {{ settings.page_width | divided_by: 10 }}rem;
+        --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
       }
     {% endstyle %}