From ee84459e8d71afba530557dc3098297b2a3396b3 Mon Sep 17 00:00:00 2001 From: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Date: Tue, 16 Nov 2021 15:08:52 -0500 Subject: [PATCH] Text boxes global settings setup (#889) * Text boxes global settings setup --- assets/section-image-banner.css | 10 +++- assets/section-multicolumn.css | 10 ++++ config/settings_schema.json | 101 ++++++++++++++++++++++++++++++++ layout/password.liquid | 9 +++ layout/theme.liquid | 11 +++- templates/gift_card.liquid | 1 + 6 files changed, 138 insertions(+), 4 deletions(-) diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css index e58e35d981b..93768e2bddb 100644 --- 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 index 09fe7d44ec7..7c7c71c78a7 100644 --- 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 index 956dce6b5d6..277f0cf4ee3 100644 --- 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 index b59c25394ff..909ee8f67ae 100644 --- 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 index fa6ef2c53cc..81bbdd0dd42 100644 --- 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 index b5e4c36b7db..a48c1ddbfe5 100644 --- 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 %}