@@ -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;
}