From f647405320d107e6ec71999edb0b8bee2b99520b Mon Sep 17 00:00:00 2001 From: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Date: Thu, 9 Jun 2022 11:25:09 -0400 Subject: [PATCH] Fix box shadow being cut off on sliders (#1772) --- assets/base.css | 3 +++ layout/password.liquid | 4 ++++ layout/theme.liquid | 3 +++ 3 files changed, 10 insertions(+) diff --git a/assets/base.css b/assets/base.css index 4cf252661d8..80bfd964aee 100644 --- a/assets/base.css +++ b/assets/base.css @@ -164,6 +164,7 @@ --shadow-vertical-offset: var(--card-shadow-vertical-offset); --shadow-blur-radius: var(--card-shadow-blur-radius); --shadow-opacity: var(--card-shadow-opacity); + --shadow-visible: var(--card-shadow-visible); } .contains-content-container, @@ -175,6 +176,7 @@ --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset); --shadow-blur-radius: var(--text-boxes-shadow-blur-radius); --shadow-opacity: var(--text-boxes-shadow-opacity); + --shadow-visible: var(--text-boxes-shadow-visible); } .contains-media, @@ -1273,6 +1275,7 @@ button.shopify-payment-button__button--unbranded, --shadow-vertical-offset: var(--buttons-shadow-vertical-offset); --shadow-blur-radius: var(--buttons-shadow-blur-radius); --shadow-opacity: var(--buttons-shadow-opacity); + --shadow-visible: var(--buttons-shadow-visible); --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */ --border-opacity: calc(1 - var(--buttons-border-opacity)); border-radius: var(--buttons-radius-outset); diff --git a/layout/password.liquid b/layout/password.liquid index 54d3ddf68d5..fd31bdef274 100644 --- a/layout/password.liquid +++ b/layout/password.liquid @@ -72,6 +72,7 @@ --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px; --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px; --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px; + --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %}; --page-width: {{ settings.page_width | divided_by: 10 }}rem; --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem; @@ -82,6 +83,7 @@ --card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem; --card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }}; --card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }}; + --card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %}; --card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem; --card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem; --card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem; @@ -100,6 +102,7 @@ --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}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-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %}; --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 }}px; @@ -109,6 +112,7 @@ --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px; --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }}; --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }}; + --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %}; --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px; --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px; --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px; diff --git a/layout/theme.liquid b/layout/theme.liquid index 49521cba180..f2ab717709a 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -92,6 +92,7 @@ --card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem; --card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }}; --card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }}; + --card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %}; --card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem; --card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem; --card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem; @@ -125,6 +126,7 @@ --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}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-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %}; --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 }}px; @@ -134,6 +136,7 @@ --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px; --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }}; --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }}; + --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %}; --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px; --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px; --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;