From 3a83ec7376e012f5249a72ee104e9ae433c275ef Mon Sep 17 00:00:00 2001 From: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Date: Wed, 12 Jan 2022 12:10:20 -0500 Subject: [PATCH] Additional padding and margin settings (#1110) * Additional padding and margin settings Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> --- assets/base.css | 4 + assets/collapsible-content.css | 11 +- assets/component-slideshow.css | 18 --- assets/newsletter-section.css | 12 -- assets/section-blog-post.css | 2 + assets/section-collection-list.css | 4 + assets/section-footer.css | 2 - assets/template-collection.css | 4 + locales/cs.schema.json | 9 +- locales/da.schema.json | 9 +- locales/de.schema.json | 9 +- locales/en.default.schema.json | 9 +- locales/es.schema.json | 9 +- locales/fi.schema.json | 9 +- locales/fr.schema.json | 9 +- locales/it.schema.json | 9 +- locales/ja.schema.json | 9 +- locales/ko.schema.json | 9 +- locales/nb.schema.json | 9 +- locales/nl.schema.json | 9 +- locales/pl.schema.json | 9 +- locales/pt-BR.schema.json | 9 +- locales/pt-PT.schema.json | 9 +- locales/sv.schema.json | 9 +- locales/th.schema.json | 9 +- locales/tr.schema.json | 9 +- locales/vi.schema.json | 9 +- locales/zh-CN.schema.json | 9 +- locales/zh-TW.schema.json | 9 +- sections/collage.liquid | 4 +- sections/collapsible-content.liquid | 74 ++++++++--- sections/collection-list.liquid | 6 +- sections/contact-form.liquid | 4 +- sections/featured-blog.liquid | 4 +- sections/featured-collection.liquid | 6 +- sections/featured-product.liquid | 4 +- sections/footer.liquid | 62 ++++++++- sections/header.liquid | 26 ++++ sections/image-with-text.liquid | 4 +- sections/main-blog.liquid | 41 +++++- sections/main-cart-items.liquid | 4 +- sections/main-collection-product-grid.liquid | 132 ++++++++++++------- sections/main-product.liquid | 4 +- sections/main-search.liquid | 40 +++++- sections/multicolumn.liquid | 6 +- sections/newsletter.liquid | 4 +- sections/page.liquid | 4 +- sections/product-recommendations.liquid | 4 +- sections/rich-text.liquid | 4 +- sections/slideshow.liquid | 2 +- sections/video.liquid | 4 +- 51 files changed, 524 insertions(+), 165 deletions(-) diff --git a/assets/base.css b/assets/base.css index 7bf1bb4e1f6..a512840623f 100644 --- a/assets/base.css +++ b/assets/base.css @@ -982,6 +982,10 @@ summary::-webkit-details-marker { } } +.grid:last-child { + margin-bottom: 0; +} + .grid__item { padding-left: var(--grid-mobile-horizontal-spacing); padding-bottom: var(--grid-mobile-vertical-spacing); diff --git a/assets/collapsible-content.css b/assets/collapsible-content.css index d091161295b..6ab221683d3 100644 --- a/assets/collapsible-content.css +++ b/assets/collapsible-content.css @@ -28,20 +28,10 @@ } } -.collapsible-content__wrapper { - padding-top: 5rem; - padding-bottom: 3rem; -} - @media screen and (min-width: 750px) { .collapsible-content__grid--reverse { flex-direction: row-reverse; } - - .collapsible-content__wrapper { - padding-top: 7rem; - padding-bottom: 4rem; - } } .collapsible-content-wrapper-narrow { @@ -57,6 +47,7 @@ .collapsible-content__heading { margin-bottom: 2rem; + margin-top: 0; } @media screen and (min-width: 750px) { diff --git a/assets/component-slideshow.css b/assets/component-slideshow.css index ad8cc7c68e5..f666399fda9 100644 --- a/assets/component-slideshow.css +++ b/assets/component-slideshow.css @@ -3,24 +3,6 @@ slideshow-component { display: block; } -.spaced-section--full-width:first-child slideshow-component.page-width { - margin-top: 5rem; -} - -.spaced-section--full-width:last-child slideshow-component.page-width { - margin-bottom: 5rem; -} - -@media screen and (min-width: 750px) { - .spaced-section--full-width:first-child slideshow-component.page-width { - margin-top: calc(5rem + var(--page-width-margin)); - } - - .spaced-section--full-width:last-child slideshow-component.page-width { - margin-bottom: calc(5rem + var(--page-width-margin)); - } -} - @media screen and (max-width: 989px) { .no-js slideshow-component .slider { padding-bottom: 3rem; diff --git a/assets/newsletter-section.css b/assets/newsletter-section.css index ffa66ee37f3..c84eb9fcb05 100644 --- a/assets/newsletter-section.css +++ b/assets/newsletter-section.css @@ -1,15 +1,3 @@ -.newsletter:not(.newsletter--narrow) .newsletter__wrapper.color-background-1 { - margin-top: 5rem; - margin-bottom: 5rem; -} - -@media screen and (min-width: 750px) { - .newsletter:not(.newsletter--narrow) .newsletter__wrapper.color-background-1 { - margin-top: calc(5rem + var(--page-width-margin)); - margin-bottom: calc(5rem + var(--page-width-margin)); - } -} - .newsletter__wrapper { padding-right: calc(4rem / var(--font-body-scale)); padding-left: calc(4rem / var(--font-body-scale)); diff --git a/assets/section-blog-post.css b/assets/section-blog-post.css index b3d97faf7fe..6450603851f 100644 --- a/assets/section-blog-post.css +++ b/assets/section-blog-post.css @@ -109,11 +109,13 @@ .article-template__comment-wrapper { margin-top: 5rem; + padding: 2.7rem 0; } @media screen and (min-width: 750px) { .article-template__comment-wrapper { margin-top: 6rem; + padding: 3.6rem 0; } } diff --git a/assets/section-collection-list.css b/assets/section-collection-list.css index 73ab1884ab1..f2992a706fd 100644 --- a/assets/section-collection-list.css +++ b/assets/section-collection-list.css @@ -76,3 +76,7 @@ max-width: 100%; } } + +.collection-list-view-all { + margin-top: 2rem; +} diff --git a/assets/section-footer.css b/assets/section-footer.css index 2f86f4377a5..5890903aae5 100644 --- a/assets/section-footer.css +++ b/assets/section-footer.css @@ -8,7 +8,6 @@ .footer__content-top { padding-bottom: 5rem; - padding-top: 5rem; display: block; } @@ -50,7 +49,6 @@ .footer__content-bottom { border-top: solid 0.1rem rgba(var(--color-foreground), 0.08); padding-top: 3rem; - padding-bottom: 3rem; } .footer__content-bottom:only-child { diff --git a/assets/template-collection.css b/assets/template-collection.css index 68964b7ed71..f402a6d2d42 100644 --- a/assets/template-collection.css +++ b/assets/template-collection.css @@ -53,3 +53,7 @@ margin-top: 10rem; margin-bottom: 15rem; } + +.collection__view-all { + margin-top: 2rem; +} diff --git a/locales/cs.schema.json b/locales/cs.schema.json index e7bcfddd13d..2930b62796d 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Vnitřní okraj sekce", "padding_top": "Horní vnitřní okraj", "padding_bottom": "Dolní vnitřní okraj" - } + }, + "spacing": "Rozestupy" }, "announcement-bar": { "name": "Panel oznámení", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Zobrazit ikony plateb" + }, + "margin_top": { + "label": "Horní okraj" } } }, @@ -738,6 +742,9 @@ "label": "Inverze" }, "label": "Barevné schéma" + }, + "margin_bottom": { + "label": "Dolní okraj" } } }, diff --git a/locales/da.schema.json b/locales/da.schema.json index 9ccb26fd83f..1b7fc81fc1d 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Indre margen, afsnit", "padding_top": "Indre margen, top", "padding_bottom": "Indre margen, bund" - } + }, + "spacing": "Mellemrum" }, "announcement-bar": { "name": "Meddelelseslinje", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Vis betalingsikoner" + }, + "margin_top": { + "label": "Øverste margen" } } }, @@ -738,6 +742,9 @@ "label": "Omvendt" }, "label": "Farveskema" + }, + "margin_bottom": { + "label": "Nederste margen" } } }, diff --git a/locales/de.schema.json b/locales/de.schema.json index 7e593472d4d..6b6fe3c17f5 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Abschnitts-Padding", "padding_top": "Oberes Padding", "padding_bottom": "Unteres Padding" - } + }, + "spacing": "Abstand" }, "announcement-bar": { "name": "Ankündigungsleiste", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Zahlungssymbole anzeigen" + }, + "margin_top": { + "label": "Oberer Rand" } } }, @@ -738,6 +742,9 @@ "label": "Invertiert" }, "label": "Farbschema" + }, + "margin_bottom": { + "label": "Unterer Rand" } } }, diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 0f73f5ef35e..abef5921456 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Section padding", "padding_top": "Top padding", "padding_bottom": "Bottom padding" - } + }, + "spacing": "Spacing" }, "announcement-bar": { "name": "Announcement bar", @@ -807,6 +808,9 @@ }, "payment_enable": { "label": "Show payment icons" + }, + "margin_top": { + "label": "Top margin" } } }, @@ -860,6 +864,9 @@ "enable_sticky_header": { "label": "Enable sticky header", "info": "Header shows on the screen as customers scroll up." + }, + "margin_bottom": { + "label": "Bottom margin" } } }, diff --git a/locales/es.schema.json b/locales/es.schema.json index a04a9cd7eaa..bb31b82c318 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Relleno de sección", "padding_top": "Relleno superior", "padding_bottom": "Relleno inferior" - } + }, + "spacing": "Espaciado" }, "announcement-bar": { "name": "Barra de anuncios", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Mostrar íconos de pago" + }, + "margin_top": { + "label": "Margen superior" } } }, @@ -677,6 +681,9 @@ "label": "Invertir" }, "label": "Esquema de colores" + }, + "margin_bottom": { + "label": "Margen inferior" } } }, diff --git a/locales/fi.schema.json b/locales/fi.schema.json index 65e97ae3158..488ced9ea2e 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Osion täyttö", "padding_top": "Yläosan täyttö", "padding_bottom": "Alaosan täyttö" - } + }, + "spacing": "Väli" }, "announcement-bar": { "name": "Ilmoituspalkki", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Näytä maksukuvakkeet" + }, + "margin_top": { + "label": "Yläreunus" } } }, @@ -677,6 +681,9 @@ "label": "Käänteinen" }, "label": "Värimalli" + }, + "margin_bottom": { + "label": "Alareunus" } } }, diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 2add3f43b5a..c01db51580f 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Marge de la section", "padding_top": "Marge supérieure", "padding_bottom": "Marge inférieure" - } + }, + "spacing": "Espacement" }, "announcement-bar": { "name": "Barre d'annonces", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Afficher les icônes de paiement" + }, + "margin_top": { + "label": "Marge supérieure" } } }, @@ -738,6 +742,9 @@ "label": "Inverser" }, "label": "Combinaison de couleurs" + }, + "margin_bottom": { + "label": "Marge inférieure" } } }, diff --git a/locales/it.schema.json b/locales/it.schema.json index 68dbd615c7a..e6c85634a4a 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Spaziatura sezione", "padding_top": "Spaziatura superiore", "padding_bottom": "Spaziatura inferiore" - } + }, + "spacing": "Spaziatura" }, "announcement-bar": { "name": "Barra degli annunci", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Mostra le icone di pagamento" + }, + "margin_top": { + "label": "Margine superiore" } } }, @@ -677,6 +681,9 @@ "label": "Inverso" }, "label": "Schema di colori" + }, + "margin_bottom": { + "label": "Margine inferiore" } } }, diff --git a/locales/ja.schema.json b/locales/ja.schema.json index 049100587ed..9c6c5664e3a 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "セクションの余白", "padding_top": "上部の余白", "padding_bottom": "下部の余白" - } + }, + "spacing": "間隔" }, "announcement-bar": { "name": "告知バー", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "決済アイコンを表示する" + }, + "margin_top": { + "label": "上マージン" } } }, @@ -738,6 +742,9 @@ "label": "反転" }, "label": "配色" + }, + "margin_bottom": { + "label": "下マージン" } } }, diff --git a/locales/ko.schema.json b/locales/ko.schema.json index 7b39717c224..cac06fa8554 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "섹션 패딩", "padding_top": "상단 패딩", "padding_bottom": "하단 패딩" - } + }, + "spacing": "간격" }, "announcement-bar": { "name": "공지 표시줄", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "결제 아이콘 표시" + }, + "margin_top": { + "label": "상단 마진" } } }, @@ -738,6 +742,9 @@ "label": "서로 바꾸기" }, "label": "색상 배합" + }, + "margin_bottom": { + "label": "하단 마진" } } }, diff --git a/locales/nb.schema.json b/locales/nb.schema.json index 5cffe15f3d6..675882abe9d 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Seksjonsmarg", "padding_top": "Toppmarg", "padding_bottom": "Bunnmarg" - } + }, + "spacing": "Mellomrom" }, "announcement-bar": { "name": "Kunngjøringslinje", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Vis betalingsikoner" + }, + "margin_top": { + "label": "Toppmarg" } } }, @@ -677,6 +681,9 @@ "label": "Omvendt" }, "label": "Fargepalett" + }, + "margin_bottom": { + "label": "Bunnmarg" } } }, diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 9eaecaf4a59..ba23901f776 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Opvulling voor sectie", "padding_top": "Opvulling boven", "padding_bottom": "Opvulling onder" - } + }, + "spacing": "Afstand" }, "announcement-bar": { "name": "Aankondigingsbalk", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Betalingspictogrammen weergeven" + }, + "margin_top": { + "label": "Bovenmarge" } } }, @@ -677,6 +681,9 @@ "label": "Omkeren" }, "label": "Kleurschema" + }, + "margin_bottom": { + "label": "Ondermarge" } } }, diff --git a/locales/pl.schema.json b/locales/pl.schema.json index e63a0bda6a0..08e6c52a2e4 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Dopełnienie sekcji", "padding_top": "Dopełnienie na górze", "padding_bottom": "Dopełnienie na dole" - } + }, + "spacing": "Odstępy" }, "announcement-bar": { "name": "Pasek ogłoszeń", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Pokaż ikony płatności" + }, + "margin_top": { + "label": "Górna granica" } } }, @@ -677,6 +681,9 @@ "label": "Odwrócone" }, "label": "Kolorystyka" + }, + "margin_bottom": { + "label": "Dolna granica" } } }, diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index cbfdb30f8f8..4d31aae3948 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Preenchimento da seção", "padding_top": "Preenchimento superior", "padding_bottom": "Preenchimento inferior" - } + }, + "spacing": "Espaçamento" }, "announcement-bar": { "name": "Barra de avisos", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Mostrar ícones de pagamento" + }, + "margin_top": { + "label": "Margem superior" } } }, @@ -738,6 +742,9 @@ "label": "Inverso" }, "label": "Esquema de cores" + }, + "margin_bottom": { + "label": "Margem inferior" } } }, diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index a91e8a249d2..b3beed0f20f 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Secção preenchimento", "padding_top": "Preenchimento superior", "padding_bottom": "Preenchimento inferior" - } + }, + "spacing": "Espaçamento" }, "announcement-bar": { "name": "Barra de comunicado", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Mostrar ícones de pagamento" + }, + "margin_top": { + "label": "Margem superior" } } }, @@ -738,6 +742,9 @@ "label": "Inverter" }, "label": "Esquema de cores" + }, + "margin_bottom": { + "label": "Margem inferior" } } }, diff --git a/locales/sv.schema.json b/locales/sv.schema.json index d21584db002..94fd74697c9 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -223,7 +223,8 @@ "section_padding_heading": "Padding för avsnitt", "padding_top": "Övre padding", "padding_bottom": "Nedre padding" - } + }, + "spacing": "Radavstånd" }, "announcement-bar": { "name": "Meddelandefält", @@ -624,6 +625,9 @@ }, "payment_enable": { "label": "Visa betalningsikoner" + }, + "margin_top": { + "label": "Övre marginal" } } }, @@ -677,6 +681,9 @@ "label": "Omvänd" }, "label": "Färgschema" + }, + "margin_bottom": { + "label": "Nedre marginal" } } }, diff --git a/locales/th.schema.json b/locales/th.schema.json index f131e800cc2..b2b249e44aa 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "พื้นที่ว่างของส่วน", "padding_top": "พื้นที่ว่างด้านบน", "padding_bottom": "พื้นที่ว่างด้านล่าง" - } + }, + "spacing": "การเว้นระยะห่าง" }, "announcement-bar": { "name": "แถบประกาศ", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "แสดงไอคอนการชำระเงิน" + }, + "margin_top": { + "label": "ย่อหน้าบน" } } }, @@ -738,6 +742,9 @@ "label": "ตรงกันข้าม" }, "label": "รูปแบบสี" + }, + "margin_bottom": { + "label": "ย่อหน้าล่าง" } } }, diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 253b5e86a92..8cea6b76add 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Bölüm dolgusu", "padding_top": "Üst dolgu", "padding_bottom": "Alt dolgu" - } + }, + "spacing": "Boşluk" }, "announcement-bar": { "name": "Duyuru çubuğu", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Ödeme simgelerini göster" + }, + "margin_top": { + "label": "Üst kenar boşluğu" } } }, @@ -738,6 +742,9 @@ "label": "Ters" }, "label": "Renk şeması" + }, + "margin_bottom": { + "label": "Alt kenar boşluğu" } } }, diff --git a/locales/vi.schema.json b/locales/vi.schema.json index 1a3c1509c55..441201d55a5 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "Vùng đệm mục", "padding_top": "Vùng đệm trên cùng", "padding_bottom": "Vùng đệm dưới cùng" - } + }, + "spacing": "Khoảng cách" }, "announcement-bar": { "name": "Thanh thông báo", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "Hiển thị biểu tượng thanh toán" + }, + "margin_top": { + "label": "Lề trên" } } }, @@ -738,6 +742,9 @@ "label": "Nghịch đảo" }, "label": "Bảng màu" + }, + "margin_bottom": { + "label": "Lề dưới" } } }, diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index 7f356566c7f..d708295516e 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "分区填充", "padding_top": "顶部填充", "padding_bottom": "底部填充" - } + }, + "spacing": "间距" }, "announcement-bar": { "name": "公告栏", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "显示付款图标" + }, + "margin_top": { + "label": "上边距" } } }, @@ -738,6 +742,9 @@ "label": "反转" }, "label": "配色方案" + }, + "margin_bottom": { + "label": "下边距" } } }, diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index 8d0887c7395..752f729d295 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -337,7 +337,8 @@ "section_padding_heading": "區段邊框間距", "padding_top": "頂端邊框間距", "padding_bottom": "底部邊框間距" - } + }, + "spacing": "間距" }, "announcement-bar": { "name": "公告列", @@ -685,6 +686,9 @@ }, "payment_enable": { "label": "顯示付款圖示" + }, + "margin_top": { + "label": "上方邊界" } } }, @@ -738,6 +742,9 @@ "label": "反轉" }, "label": "顏色配置" + }, + "margin_bottom": { + "label": "下方邊界" } } }, diff --git a/sections/collage.liquid b/sections/collage.liquid index 2d6b526832b..292dea79d32 100644 --- a/sections/collage.liquid +++ b/sections/collage.liquid @@ -5,8 +5,8 @@ {%- style -%} .section-{{ section.id }}-padding { - padding-top: calc({{ section.settings.padding_top }}px * 0.75); - padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75); + 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) { diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid index 690edca99cd..62432627bd5 100644 --- a/sections/collapsible-content.liquid +++ b/sections/collapsible-content.liquid @@ -1,8 +1,22 @@ {{ 'component-accordion.css' | asset_url | stylesheet_tag }} {{ 'collapsible-content.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; + } + } +{%- endstyle -%} +
-
+
{%- if section.settings.caption != blank -%} @@ -67,7 +81,7 @@ { "name": "t:sections.collapsible_content.name", "tag": "section", - "class": "spaced-section spaced-section--full-width", + "class": "section", "settings": [ { "type": "text", @@ -124,6 +138,14 @@ "type": "select", "id": "color_scheme", "options": [ + { + "value": "accent-1", + "label": "t:sections.collapsible_content.settings.color_scheme.options__4.label" + }, + { + "value": "accent-2", + "label": "t:sections.collapsible_content.settings.color_scheme.options__5.label" + }, { "value": "background-1", "label": "t:sections.collapsible_content.settings.color_scheme.options__1.label" @@ -135,14 +157,6 @@ { "value": "inverse", "label": "t:sections.collapsible_content.settings.color_scheme.options__3.label" - }, - { - "value": "accent-1", - "label": "t:sections.collapsible_content.settings.color_scheme.options__4.label" - }, - { - "value": "accent-2", - "label": "t:sections.collapsible_content.settings.color_scheme.options__5.label" } ], "default": "background-1", @@ -152,6 +166,14 @@ "type": "select", "id": "container_color_scheme", "options": [ + { + "value": "accent-1", + "label": "t:sections.collapsible_content.settings.container_color_scheme.options__4.label" + }, + { + "value": "accent-2", + "label": "t:sections.collapsible_content.settings.container_color_scheme.options__5.label" + }, { "value": "background-1", "label": "t:sections.collapsible_content.settings.container_color_scheme.options__1.label" @@ -163,14 +185,6 @@ { "value": "inverse", "label": "t:sections.collapsible_content.settings.container_color_scheme.options__3.label" - }, - { - "value": "accent-1", - "label": "t:sections.collapsible_content.settings.container_color_scheme.options__4.label" - }, - { - "value": "accent-2", - "label": "t:sections.collapsible_content.settings.container_color_scheme.options__5.label" } ], "default": "background-2", @@ -228,6 +242,30 @@ "default": "image_second", "label": "t:sections.collapsible_content.settings.desktop_layout.label", "info": "t:sections.collapsible_content.settings.desktop_layout.info" + }, + { + "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": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 } ], "blocks": [ diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid index fdd070a0006..32b3531ad5d 100644 --- a/sections/collection-list.liquid +++ b/sections/collection-list.liquid @@ -6,8 +6,8 @@ {%- style -%} .section-{{ section.id }}-padding { - padding-top: calc({{ section.settings.padding_top }}px * 0.75); - padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75); + 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) { @@ -62,7 +62,7 @@ {%- if section.settings.show_view_all and section.blocks.size < collections.size -%} -
+
{{ 'sections.collection_list.view_all' | t }}
{%- endif -%} diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid index 64baeeb226b..930db8b1298 100644 --- a/sections/contact-form.liquid +++ b/sections/contact-form.liquid @@ -2,8 +2,8 @@ {%- style -%} .section-{{ section.id }}-padding { - padding-top: calc({{ section.settings.padding_top }}px * 0.75); - padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75); + 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) { diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid index bcfb3fc3eae..b84e0e19eed 100644 --- a/sections/featured-blog.liquid +++ b/sections/featured-blog.liquid @@ -11,8 +11,8 @@ {%- style -%} .section-{{ section.id }}-padding { - padding-top: calc({{ section.settings.padding_top }}px * 0.75); - padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75); + 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) { diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid index 94b7fe096fd..ffe38038efe 100644 --- a/sections/featured-collection.liquid +++ b/sections/featured-collection.liquid @@ -10,8 +10,8 @@ {%- style -%} .section-{{ section.id }}-padding { - padding-top: calc({{ section.settings.padding_top }}px * 0.75); - padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75); + 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) { @@ -76,7 +76,7 @@ {%- if section.settings.show_view_all and more_in_collection -%} -
+
{{ 'component-rte.css' | asset_url | stylesheet_tag }} -