diff --git a/themes/aura/assets/desktop-slider.css b/themes/aura/assets/desktop-slider.css index 25f3c802..ed483b28 100644 --- a/themes/aura/assets/desktop-slider.css +++ b/themes/aura/assets/desktop-slider.css @@ -33,15 +33,10 @@ .yc-slider__desktop .content{ height:100%; display:flex; - align-items:center; - text-align:center; justify-content:center; - margin:auto; -} -.yc-slider__desktop .content > div{ - max-width:30rem; - position:relative; - z-index:3; + flex-direction:column; + padding:0 250px; + text-align:var(--alignment); } .yc-slider__desktop .content .headers, .yc-slider__desktop .content h3, .yc-slider__desktop .content h2, .yc-slider__desktop .content h1{ font-weight:700; @@ -60,12 +55,10 @@ .yc-slider__desktop .content p{ margin-top:1rem; } -.yc-slider__desktop .content .btn-holder{ - margin-top:2rem; - display:flex; - text-align:center; - justify-content:center; +.yc-slider__desktop .content .btn-holder { + margin-top:1em; + text-align:var(--alignment); } -.yc-slider__desktop .content .container > div{ - max-width:600px; +.yc-slider__desktop .content .btn-holder a { + display:inline-flex; } diff --git a/themes/aura/assets/mobile-slider.css b/themes/aura/assets/mobile-slider.css index aeecb166..5654be88 100644 --- a/themes/aura/assets/mobile-slider.css +++ b/themes/aura/assets/mobile-slider.css @@ -6,14 +6,10 @@ .yc-slider__mobile .content{ height:100%; display:flex; - text-align:center; justify-content:center; - align-items:center; -} -.yc-slider__mobile .content > div{ - max-width:30rem; - position:relative; - z-index:3; + flex-direction: column; + padding:0 20px; + text-align:var(--alignment); } .yc-slider__mobile .content .headers, .yc-slider__mobile .content h3, .yc-slider__mobile .content h2, .yc-slider__mobile .content h1{ font-weight:700; @@ -32,7 +28,10 @@ .yc-slider__mobile .content p{ margin-top:1rem; } -.yc-slider__mobile .content .btn-holder{ - margin-top:2rem; - text-align:center; +.yc-slider__desktop .content .btn-holder { + margin-top:1em; + text-align:var(--alignment); +} +.yc-slider__desktop .content .btn-holder a { + display:inline-flex; } diff --git a/themes/aura/sections/desktop-slider.liquid b/themes/aura/sections/desktop-slider.liquid index be4e15a3..346f932b 100644 --- a/themes/aura/sections/desktop-slider.liquid +++ b/themes/aura/sections/desktop-slider.liquid @@ -285,6 +285,26 @@ "id": "caption", "label": "Slider content" }, + { + "type": "select", + "id": "content_alignment", + "label": "Content alignment", + "options": [ + { + "value": "center", + "label": "Center" + }, + { + "value": "left", + "label": "Left" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center" + }, { "type": "text", "id": "button_text", diff --git a/themes/aura/snippets/slider.liquid b/themes/aura/snippets/slider.liquid index 56f5c7d8..d1c8da74 100644 --- a/themes/aura/snippets/slider.liquid +++ b/themes/aura/snippets/slider.liquid @@ -61,22 +61,21 @@ {{ block.youcan_attributes }} > {%- if block.settings.caption %} -
-
-
-
{{ block.settings.caption }}
- {% if block.settings.product %} - - {% endif %} +
+
{{ block.settings.caption }}
+ {% if block.settings.product %} + -
+ {% endif %}
{%- endif %} diff --git a/themes/aura/styles/desktop-slider.scss b/themes/aura/styles/desktop-slider.scss index eb26181c..4be74f6e 100644 --- a/themes/aura/styles/desktop-slider.scss +++ b/themes/aura/styles/desktop-slider.scss @@ -33,16 +33,10 @@ .content { height: 100%; display: flex; - align-items: center; - text-align: center; justify-content: center; - margin: auto; - - & > div { - max-width: 30rem; - position: relative; - z-index: 3; - } + flex-direction:column; + padding:0 250px; + text-align:var(--alignment); .headers { font-weight: 700; @@ -62,10 +56,11 @@ } .btn-holder { - margin-top: 2rem; - display: flex; - text-align: center; - justify-content: center; + margin-top: 1em; + text-align: var(--alignment); + a { + display: inline-flex; + } } .container { diff --git a/themes/aura/styles/mobile-slider.scss b/themes/aura/styles/mobile-slider.scss index 1451d39c..b5f4c919 100644 --- a/themes/aura/styles/mobile-slider.scss +++ b/themes/aura/styles/mobile-slider.scss @@ -8,15 +8,10 @@ .content { height: 100%; display: flex; - text-align: center; justify-content: center; - align-items: center; - - & > div { - max-width: 30rem; - position: relative; - z-index: 3; - } + flex-direction: column; + padding:0 20px; + text-align:var(--alignment); .headers { font-weight: 700; @@ -36,8 +31,11 @@ } .btn-holder { - margin-top: 2rem; - text-align: center; + margin-top: 1em; + text-align: var(--alignment); + a { + display: inline-flex; + } } } } diff --git a/themes/harmony/assets/desktop-slider.css b/themes/harmony/assets/desktop-slider.css index 0893d582..e6227bc5 100644 --- a/themes/harmony/assets/desktop-slider.css +++ b/themes/harmony/assets/desktop-slider.css @@ -35,20 +35,14 @@ .yc-slider__desktop .content{ height:100%; display:flex; - align-items:center; - text-align:center; justify-content:center; - margin:auto; -} -.yc-slider__desktop .content > div{ - max-width:30rem; - position:relative; - z-index:3; + flex-direction:column; + padding:0 250px; + text-align:var(--alignment); } .yc-slider__desktop .content .headers, .yc-slider__desktop .content h3, .yc-slider__desktop .content h2, .yc-slider__desktop .content h1{ font-weight:700; line-height:1.2; - margin-bottom:2rem; } .yc-slider__desktop .content h1{ font-size:3rem; @@ -62,12 +56,10 @@ .yc-slider__desktop .content p{ margin-top:1rem; } -.yc-slider__desktop .content .btn-holder{ - margin-top:2rem; - display:flex; - text-align:center; - justify-content:center; +.yc-slider__desktop .content .btn-holder { + margin-top:1em; + text-align:var(--alignment); } -.yc-slider__desktop .content .container > div{ - max-width:600px; +.yc-slider__desktop .content .btn-holder a { + display:inline-flex; } diff --git a/themes/harmony/assets/mobile-slider.css b/themes/harmony/assets/mobile-slider.css index aeecb166..ac9d9714 100644 --- a/themes/harmony/assets/mobile-slider.css +++ b/themes/harmony/assets/mobile-slider.css @@ -6,19 +6,14 @@ .yc-slider__mobile .content{ height:100%; display:flex; - text-align:center; justify-content:center; - align-items:center; -} -.yc-slider__mobile .content > div{ - max-width:30rem; - position:relative; - z-index:3; + flex-direction: column; + padding:0 20px; + text-align:var(--alignment); } .yc-slider__mobile .content .headers, .yc-slider__mobile .content h3, .yc-slider__mobile .content h2, .yc-slider__mobile .content h1{ font-weight:700; line-height:1.2; - margin-bottom:2rem; } .yc-slider__mobile .content h1{ font-size:3rem; @@ -32,7 +27,10 @@ .yc-slider__mobile .content p{ margin-top:1rem; } -.yc-slider__mobile .content .btn-holder{ - margin-top:2rem; - text-align:center; +.yc-slider__desktop .content .btn-holder { + margin-top:1em; + text-align:var(--alignment); +} +.yc-slider__desktop .content .btn-holder a { + display:inline-flex; } diff --git a/themes/harmony/sections/desktop-slider.liquid b/themes/harmony/sections/desktop-slider.liquid index 681af38c..d2085a3f 100644 --- a/themes/harmony/sections/desktop-slider.liquid +++ b/themes/harmony/sections/desktop-slider.liquid @@ -275,6 +275,26 @@ "id": "caption", "label": "Slider content" }, + { + "type": "select", + "id": "content_alignment", + "label": "Content alignment", + "options": [ + { + "value": "center", + "label": "Center" + }, + { + "value": "left", + "label": "Left" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center" + }, { "type": "text", "id": "button_text", diff --git a/themes/harmony/snippets/slider.liquid b/themes/harmony/snippets/slider.liquid index a700969a..e900adc1 100644 --- a/themes/harmony/snippets/slider.liquid +++ b/themes/harmony/snippets/slider.liquid @@ -64,22 +64,21 @@ {{ block.youcan_attributes }} > {%- if block.settings.caption %} -
-
-
-
{{ block.settings.caption }}
- {% if block.settings.product %} - - {% endif %} +
+
{{ block.settings.caption }}
+ {% if block.settings.product %} + -
+ {% endif %}
{%- endif %} diff --git a/themes/harmony/styles/desktop-slider.scss b/themes/harmony/styles/desktop-slider.scss index 392afc8a..9b269b32 100644 --- a/themes/harmony/styles/desktop-slider.scss +++ b/themes/harmony/styles/desktop-slider.scss @@ -39,16 +39,10 @@ .content { height: 100%; display: flex; - align-items: center; - text-align: center; justify-content: center; - margin: auto; - - & > div { - max-width: 30rem; - position: relative; - z-index: 3; - } + flex-direction: column; + padding: 0 250px; + text-align: var(--alignment); .headers { font-weight: 700; @@ -68,10 +62,11 @@ } .btn-holder { - margin-top: 2rem; - display: flex; - text-align: center; - justify-content: center; + margin-top: 1em; + text-align: var(--alignment); + a { + display: inline-flex; + } } .container { diff --git a/themes/harmony/styles/mobile-slider.scss b/themes/harmony/styles/mobile-slider.scss index 1451d39c..c805f83b 100644 --- a/themes/harmony/styles/mobile-slider.scss +++ b/themes/harmony/styles/mobile-slider.scss @@ -8,15 +8,10 @@ .content { height: 100%; display: flex; - text-align: center; justify-content: center; - align-items: center; - - & > div { - max-width: 30rem; - position: relative; - z-index: 3; - } + flex-direction: column; + padding:0 20px; + text-align: var(--alignment); .headers { font-weight: 700; @@ -36,8 +31,11 @@ } .btn-holder { - margin-top: 2rem; - text-align: center; + margin-top:1em; + text-align:var(--alignment); + a { + display: inline-flex; + } } } } diff --git a/themes/meraki/assets/desktop-slider.css b/themes/meraki/assets/desktop-slider.css index b0669269..8d684d26 100644 --- a/themes/meraki/assets/desktop-slider.css +++ b/themes/meraki/assets/desktop-slider.css @@ -54,18 +54,14 @@ .yc-slider__desktop .content{ height:100%; display:flex; - align-items:center; - text-align:center; justify-content:center; - margin:auto; + flex-direction:column; + padding:0 250px; + text-align:var(--alignment); } .yc-slider__desktop .content .caption{ line-height:55px; } -.yc-slider__desktop .content > div{ - position:relative; - z-index:3; -} .yc-slider__desktop .content h1{ font-size:38px; font-weight:800; @@ -79,14 +75,8 @@ font-weight:600; } .yc-slider__desktop .content .btn-holder{ - display:flex; - text-align:center; - justify-content:center; + text-align:var(--alignment); } -.yc-slider__desktop .content .btn-holder .yc-btn-slider{ - font-size:14px; - background-color:var(--yc-primary-color) !important; - color:#ffffff; - margin-top:38px; - padding:12px 18px; +.yc-slider__desktop .content .btn-holder a{ + display:inline-flex; } diff --git a/themes/meraki/assets/mobile-slider.css b/themes/meraki/assets/mobile-slider.css index 447e3583..b58bf4a6 100644 --- a/themes/meraki/assets/mobile-slider.css +++ b/themes/meraki/assets/mobile-slider.css @@ -6,13 +6,10 @@ .yc-slider__mobile .content{ height:100%; display:flex; - text-align:center; justify-content:center; - align-items:center; -} -.yc-slider__mobile .content > div{ - position:relative; - z-index:3; + flex-direction:column; + padding:0 20px; + text-align:var(--alignment); } .yc-slider__mobile .content h1{ font-size:28px; @@ -27,7 +24,9 @@ font-weight:600; } .yc-slider__mobile .content .btn-holder{ - display:flex; - text-align:center; - justify-content:center; + text-align:var(--alignment); +} + +.yc-slider__mobile .content .btn-holder a{ + display:inline-flex; } diff --git a/themes/meraki/sections/desktop-slider.liquid b/themes/meraki/sections/desktop-slider.liquid index 109d46f3..4449a9b5 100644 --- a/themes/meraki/sections/desktop-slider.liquid +++ b/themes/meraki/sections/desktop-slider.liquid @@ -301,6 +301,26 @@ "id": "caption", "label": "Slider content" }, + { + "type": "select", + "id": "content_alignment", + "label": "Content alignment", + "options": [ + { + "value": "center", + "label": "Center" + }, + { + "value": "left", + "label": "Left" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center" + }, { "type": "text", "id": "button_text", diff --git a/themes/meraki/snippets/slider.liquid b/themes/meraki/snippets/slider.liquid index ddace505..1d890e80 100644 --- a/themes/meraki/snippets/slider.liquid +++ b/themes/meraki/snippets/slider.liquid @@ -14,7 +14,7 @@ .slide-content-box-button { margin-top: calc(var(--slider-height) / 5); width: max-content; - padding: 12px 42px; + padding: 12px 42px !important; } {% for block in blocks %} @@ -62,22 +62,21 @@ {{ block.youcan_attributes }} > {%- if block.settings.caption %} -
-
-
-
{{ block.settings.caption }}
- {% if block.settings.product %} - - {% endif %} +
+
{{ block.settings.caption }}
+ {% if block.settings.product %} + -
+ {% endif %}
{%- endif %} diff --git a/themes/meraki/styles/desktop-slider.scss b/themes/meraki/styles/desktop-slider.scss index 7fffbe18..212c8832 100644 --- a/themes/meraki/styles/desktop-slider.scss +++ b/themes/meraki/styles/desktop-slider.scss @@ -50,20 +50,15 @@ .content { height: 100%; display: flex; - align-items: center; - text-align: center; justify-content: center; - margin: auto; + flex-direction: column; + padding:0 250px; + text-align:var(--alignment); .caption { line-height: 55px; } - & > div { - position: relative; - z-index: 3; - } - h1 { font-size: 38px; font-weight: 800; @@ -80,9 +75,7 @@ } .btn-holder { - display: flex; - text-align: center; - justify-content: center; + text-align:var(--alignment); .yc-btn-slider { font-size: 14px; @@ -90,6 +83,7 @@ color: #ffffff; margin-top: 38px; padding: 12px 18px; + display:inline-flex; } } } diff --git a/themes/meraki/styles/mobile-slider.scss b/themes/meraki/styles/mobile-slider.scss index 447fb8c4..e3614fb6 100644 --- a/themes/meraki/styles/mobile-slider.scss +++ b/themes/meraki/styles/mobile-slider.scss @@ -8,14 +8,10 @@ .content { height: 100%; display: flex; - text-align: center; justify-content: center; - align-items: center; - - & > div { - position: relative; - z-index: 3; - } + flex-direction: column; + padding: 0 20px; + text-align: var(--alignment); h1 { font-size: 28px; @@ -33,9 +29,10 @@ } .btn-holder { - display: flex; - text-align: center; - justify-content: center; + text-align: var(--alignment); + .yc-btn-slider { + display: inline-flex; + } } } }