From 212b901b21e2c7d1e27daa295ed70a072fa17bcc Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Date: Tue, 14 Jun 2022 09:26:14 -0400 Subject: [PATCH 1/6] Add padding control to collection banner --- sections/main-collection-banner.liquid | 37 +++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid index 004c89a69d6..dfe060eaa49 100644 --- a/sections/main-collection-banner.liquid +++ b/sections/main-collection-banner.liquid @@ -2,6 +2,17 @@ {{ 'component-collection-hero.css' | asset_url | stylesheet_tag }} {%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } @media screen and (max-width: 749px) { .collection-hero--with-image .collection-hero__inner { padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem); @@ -9,7 +20,7 @@ } {%- endstyle -%} -
+

@@ -92,6 +103,30 @@ ], "default": "background-1", "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 0 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 0 } ] } From 85ea51c15d99a4017e438db6424c7189890cd636 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Date: Fri, 17 Jun 2022 07:43:06 -0400 Subject: [PATCH 2/6] Apply more specificity, conditionally apply styles. --- sections/main-collection-banner.liquid | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid index dfe060eaa49..9bce7c11af4 100644 --- a/sections/main-collection-banner.liquid +++ b/sections/main-collection-banner.liquid @@ -7,12 +7,16 @@ padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } + {%- if section.settings.padding_top != 0 or section.settings.padding_bottom != 0 -%} @media screen and (min-width: 750px) { - .section-{{ section.id }}-padding { - padding-top: {{ section.settings.padding_top }}px; - padding-bottom: {{ section.settings.padding_bottom }}px; + .section-{{ section.id }}-padding, + .collection-hero--with-image.section-{{ section.id }}-padding { + {%- if section.settings.padding_top != 0 -%}padding-top: {{ section.settings.padding_top }}px;{%- endif -%} + {%- if section.settings.padding_bottom != 0 -%}padding-bottom: {{ section.settings.padding_bottom }}px;{%- endif -%} } } + {%- endif -%} + @media screen and (max-width: 749px) { .collection-hero--with-image .collection-hero__inner { padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem); From d6beaa581fd0eb3746390a91692867103a24f7c5 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Date: Fri, 17 Jun 2022 07:51:59 -0400 Subject: [PATCH 3/6] Revert "Apply more specificity, conditionally apply styles." This reverts commit 85ea51c15d99a4017e438db6424c7189890cd636. --- sections/main-collection-banner.liquid | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid index 9bce7c11af4..dfe060eaa49 100644 --- a/sections/main-collection-banner.liquid +++ b/sections/main-collection-banner.liquid @@ -7,16 +7,12 @@ padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } - {%- if section.settings.padding_top != 0 or section.settings.padding_bottom != 0 -%} @media screen and (min-width: 750px) { - .section-{{ section.id }}-padding, - .collection-hero--with-image.section-{{ section.id }}-padding { - {%- if section.settings.padding_top != 0 -%}padding-top: {{ section.settings.padding_top }}px;{%- endif -%} - {%- if section.settings.padding_bottom != 0 -%}padding-bottom: {{ section.settings.padding_bottom }}px;{%- endif -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; } } - {%- endif -%} - @media screen and (max-width: 749px) { .collection-hero--with-image .collection-hero__inner { padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem); From 7fc5ceb28db8c9267c20feab21dd7fe06b33fee3 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Date: Fri, 17 Jun 2022 15:13:56 -0400 Subject: [PATCH 4/6] Remove margin, even out padding. --- assets/component-collection-hero.css | 14 ++++++++------ sections/main-collection-banner.liquid | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/assets/component-collection-hero.css b/assets/component-collection-hero.css index 3f7699d0229..fe17dd13d98 100644 --- a/assets/component-collection-hero.css +++ b/assets/component-collection-hero.css @@ -9,12 +9,6 @@ } @media screen and (min-width: 750px) { - .collection-hero.collection-hero--with-image { - padding: calc(4rem + var(--page-width-margin)) 0 - calc(4rem + var(--page-width-margin)); - overflow: hidden; - } - .collection-hero--with-image .collection-hero__inner { padding-bottom: 0; } @@ -24,6 +18,14 @@ flex-basis: 100%; } +.collection-hero__text-wrapper > *:first-child { + margin-top: 0; +} + +.collection-hero__text-wrapper > *:last-child { + margin-bottom: 0; +} + @media screen and (min-width: 750px) { .collection-hero { padding: 0; diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid index dfe060eaa49..1e44da303af 100644 --- a/sections/main-collection-banner.liquid +++ b/sections/main-collection-banner.liquid @@ -116,7 +116,7 @@ "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", - "default": 0 + "default": 24 }, { "type": "range", @@ -126,7 +126,7 @@ "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", - "default": 0 + "default": 24 } ] } From 101e4b3610b48338c9cd24bddc4cb6007bfe29de Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Date: Fri, 1 Jul 2022 13:58:47 -0400 Subject: [PATCH 5/6] More opinionated padding rules. --- assets/component-collection-hero.css | 14 ++------------ sections/main-collection-banner.liquid | 4 ++-- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/assets/component-collection-hero.css b/assets/component-collection-hero.css index fe17dd13d98..1cb466ec6ee 100644 --- a/assets/component-collection-hero.css +++ b/assets/component-collection-hero.css @@ -18,14 +18,6 @@ flex-basis: 100%; } -.collection-hero__text-wrapper > *:first-child { - margin-top: 0; -} - -.collection-hero__text-wrapper > *:last-child { - margin-bottom: 0; -} - @media screen and (min-width: 750px) { .collection-hero { padding: 0; @@ -39,12 +31,11 @@ } .collection-hero__title { - margin: 2.5rem 0; + margin: 0; } .collection-hero__title + .collection-hero__description { margin-top: 1.5rem; - margin-bottom: 1.5rem; font-size: 1.6rem; line-height: calc(1 + 0.5 / var(--font-body-scale)); } @@ -53,7 +44,6 @@ .collection-hero__title + .collection-hero__description { font-size: 1.8rem; margin-top: 2rem; - margin-bottom: 2rem; } .collection-hero__description { @@ -70,7 +60,7 @@ } .collection-hero--with-image .collection-hero__text-wrapper { - padding: 5rem 0 4rem; + padding-bottom: 4rem; } .collection-hero__image-container { diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid index 1e44da303af..2b3b46038d3 100644 --- a/sections/main-collection-banner.liquid +++ b/sections/main-collection-banner.liquid @@ -116,7 +116,7 @@ "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", - "default": 24 + "default": 36 }, { "type": "range", @@ -126,7 +126,7 @@ "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", - "default": 24 + "default": 0 } ] } From be33dfe0ff788e3f41c9bbe7aa8709366358e79f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Date: Tue, 5 Jul 2022 08:50:13 -0400 Subject: [PATCH 6/6] Remove duplicate CSS rule. --- assets/component-collection-hero.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/assets/component-collection-hero.css b/assets/component-collection-hero.css index 1cb466ec6ee..facd7ffc793 100644 --- a/assets/component-collection-hero.css +++ b/assets/component-collection-hero.css @@ -55,10 +55,6 @@ } } -.collection-hero--with-image .collection-hero__title { - margin: 0; -} - .collection-hero--with-image .collection-hero__text-wrapper { padding-bottom: 4rem; }