Created
June 6, 2022 15:52
-
-
Save HDDzenana/8ac9553bee158420f28d2862fc4142a5 to your computer and use it in GitHub Desktop.
Slider For Dawn
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }} | |
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'"> | |
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript> | |
{{ 'component-card.css' | asset_url | stylesheet_tag }} | |
<div class="collection-list-wrapper page-width{% if section.settings.swipe_on_mobile == true %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}"> | |
<div class="title-wrapper-with-link{% if section.settings.swipe_on_mobile == true %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %}{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}"> | |
<h2 class="collection-list-title">{{ section.settings.title | escape }}</h2> | |
{%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%} | |
<a href="{{ routes.collections_url }}" class="link underlined-link large-up-hide">{{ 'sections.collection_list.view_all' | t }}</a> | |
{%- endif -%} | |
</div> | |
<slider-component class="slider-mobile-gutter"> | |
<ul class="collection-list grid grid--1-col{% if section.blocks.size < 5 %} grid--{{ section.blocks.size }}-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} negative-margin--small{% endif %}" | |
id="Slider-{{ section.id }}" | |
role="list" | |
> | |
{%- liquid | |
assign columns = section.blocks.size | |
if columns > 3 | |
assign columns = 3 | |
endif | |
-%} | |
{%- for block in section.blocks -%} | |
<li class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}> | |
<a{% if block.settings.collection != blank and block.settings.collection.all_products_count > 0 %} href="{{ block.settings.collection.url }}"{% endif %} | |
class="card animate-arrow link{% if block.settings.collection.featured_image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}" | |
> | |
<div class="card--stretch card-colored color-{{ section.settings.color_scheme }}"> | |
{%- if block.settings.collection.featured_image != blank -%} | |
<div{% if section.settings.image_padding %} class="card__media-spacer"{% endif %}> | |
{% if section.settings.image_padding %}<div class="overlay-card"></div>{% endif %} | |
<div class="media{% if section.blocks.size > 1 %} media--{{ section.settings.image_ratio }}{% endif %} media--hover-effect overflow-hidden" | |
{% if section.settings.image_ratio == 'adapt' and section.blocks.size > 1 %}style="padding-bottom: {{ 1 | divided_by: block.settings.collection.featured_image.aspect_ratio | times: 100 }}%;"{% endif %}> | |
<img | |
srcset="{%- if block.settings.collection.featured_image.width >= 165 -%}{{ block.settings.collection.featured_image | img_url: '165x' }} 165w,{%- endif -%} | |
{%- if block.settings.collection.featured_image.width >= 330 -%}{{ block.settings.collection.featured_image | img_url: '330x' }} 330w,{%- endif -%} | |
{%- if block.settings.collection.featured_image.width >= 535 -%}{{ block.settings.collection.featured_image | img_url: '535x' }} 535w,{%- endif -%} | |
{%- if block.settings.collection.featured_image.width >= 750 -%}{{ block.settings.collection.featured_image | img_url: '750x' }} 750w,{%- endif -%} | |
{%- if block.settings.collection.featured_image.width >= 1000 -%}{{ block.settings.collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%} | |
{%- if block.settings.collection.featured_image.width >= 1500 -%}{{ block.settings.collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%} | |
{%- if block.settings.collection.featured_image.width >= 3000 -%}{{ block.settings.collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%} | |
{{ block.settings.collection.featured_image | img_url: 'master' }} {{ block.settings.collection.featured_image.width }}w" | |
src="{{ block.settings.collection.featured_image | img_url: '1500x' }}" | |
sizes=" | |
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px, | |
(min-width: 750px) {% if section.blocks.size > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %}, | |
calc(100vw - 3rem)" | |
alt="{{ block.settings.collection.title | escape }}" | |
height="{{ block.settings.collection.featured_image.height }}" | |
width="{{ block.settings.collection.featured_image.width }}" | |
loading="lazy" | |
class="motion-reduce" | |
> | |
</div> | |
</div> | |
<div class="card__text card__text-spacing card-colored card__text-hover{% if section.settings.image_padding == false %} color-{{ section.settings.color_scheme }}{% endif %}"> | |
{% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %} | |
<h3> | |
{%- if block.settings.collection.title != blank -%} | |
{{- block.settings.collection.title | escape -}}<span class="icon-wrap"> </span> | |
{%- else -%} | |
{{ 'onboarding.collection_title' | t }} | |
{%- endif -%} | |
</h3> | |
</div> | |
{%- else -%} | |
<div class="overlay-card"></div> | |
<div class="card__text-spacing card__text-hover"> | |
<h3 class="h1"> | |
{%- if block.settings.collection.title != blank -%} | |
{{- block.settings.collection.title | escape -}}{%- if block.settings.collection.description == blank -%}<span class="icon-wrap"> {% render 'icon-arrow' %}</span>{% endif %} | |
{%- else -%} | |
{{ 'onboarding.collection_title' | t }} | |
{%- endif -%} | |
</h3> | |
{%- if block.settings.collection.description != blank -%} | |
<p class="card__caption"> | |
{{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap"> {% render 'icon-arrow' %}</span> | |
</p> | |
{%- endif -%} | |
</div> | |
{%- endif -%} | |
</div> | |
</a> | |
</li> | |
{%- endfor -%} | |
</ul> | |
{%- if section.settings.swipe_on_mobile -%} | |
<div class="slider-buttons no-js-hidden{% if section.blocks.size < 5 %} medium-hide{% endif %}{% if section.blocks.size < 2 %} small-hide{% endif %}"> | |
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button> | |
<div class="slider-counter caption"> | |
<span class="slider-counter--current">1</span> | |
<span aria-hidden="true"> / </span> | |
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span> | |
<span class="slider-counter--total">{{ section.blocks.size }}</span> | |
</div> | |
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button> | |
</div> | |
{%- endif -%} | |
</slider-component> | |
{%- if section.settings.show_view_all and section.blocks.size < collections.size -%} | |
<div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}"> | |
<a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a> | |
</div> | |
{%- endif -%} | |
</div> | |
{% schema %} | |
{ | |
"name": "t:sections.collection-list.name", | |
"tag": "section", | |
"class": "spaced-section collection-list-section", | |
"max_blocks": 15, | |
"settings": [ | |
{ | |
"type": "text", | |
"id": "title", | |
"default": "Collections", | |
"label": "t:sections.collection-list.settings.title.label" | |
}, | |
{ | |
"type": "select", | |
"id": "image_ratio", | |
"options": [ | |
{ | |
"value": "adapt", | |
"label": "t:sections.collection-list.settings.image_ratio.options__1.label" | |
}, | |
{ | |
"value": "portrait", | |
"label": "t:sections.collection-list.settings.image_ratio.options__2.label" | |
}, | |
{ | |
"value": "square", | |
"label": "t:sections.collection-list.settings.image_ratio.options__3.label" | |
} | |
], | |
"default": "square", | |
"label": "t:sections.collection-list.settings.image_ratio.label", | |
"info": "t:sections.collection-list.settings.image_ratio.info" | |
}, | |
{ | |
"type": "select", | |
"id": "color_scheme", | |
"options": [ | |
{ | |
"value": "accent-1", | |
"label": "t:sections.collection-list.settings.color_scheme.options__1.label" | |
}, | |
{ | |
"value": "accent-2", | |
"label": "t:sections.collection-list.settings.color_scheme.options__2.label" | |
}, | |
{ | |
"value": "background-1", | |
"label": "t:sections.collection-list.settings.color_scheme.options__3.label" | |
}, | |
{ | |
"value": "background-2", | |
"label": "t:sections.collection-list.settings.color_scheme.options__4.label" | |
}, | |
{ | |
"value": "inverse", | |
"label": "t:sections.collection-list.settings.color_scheme.options__5.label" | |
} | |
], | |
"default": "background-1", | |
"label": "t:sections.collection-list.settings.color_scheme.label" | |
}, | |
{ | |
"type": "checkbox", | |
"id": "swipe_on_mobile", | |
"default": false, | |
"label": "t:sections.collection-list.settings.swipe_on_mobile.label" | |
}, | |
{ | |
"type": "checkbox", | |
"id": "image_padding", | |
"default": false, | |
"label": "t:sections.collection-list.settings.image_padding.label" | |
}, | |
{ | |
"type": "checkbox", | |
"id": "show_view_all", | |
"default": false, | |
"label": "t:sections.collection-list.settings.show_view_all.label" | |
} | |
], | |
"blocks": [ | |
{ | |
"type": "featured_collection", | |
"name": "t:sections.collection-list.blocks.featured_collection.name", | |
"settings": [ | |
{ | |
"type": "collection", | |
"id": "collection", | |
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label" | |
} | |
] | |
} | |
], | |
"presets": [ | |
{ | |
"name": "t:sections.collection-list.presets.name", | |
"blocks": [ | |
{ | |
"type": "featured_collection" | |
}, | |
{ | |
"type": "featured_collection" | |
}, | |
{ | |
"type": "featured_collection" | |
} | |
] | |
} | |
] | |
} | |
{% endschema %} | |
<style> | |
.slider-component { | |
position: relative; | |
display: block; | |
} | |
@media screen and (max-width: 989px) { | |
.no-js slider-component .slider { | |
padding-bottom: 3rem; | |
} | |
} | |
.slider__slide { | |
scroll-snap-align: start; | |
flex-shrink: 0; | |
} | |
@media screen and (max-width: 749px) { | |
.slider.slider--mobile { | |
position: relative; | |
flex-wrap: inherit; | |
overflow-x: auto; | |
scroll-snap-type: x mandatory; | |
scroll-behavior: smooth; | |
scroll-padding-left: 1rem; | |
-webkit-overflow-scrolling: touch; | |
margin-bottom: 1rem; | |
} | |
.slider.slider--mobile .slider__slide { | |
margin-bottom: 0; | |
padding-bottom: 0; | |
} | |
} | |
@media screen and (max-width: 989px) { | |
.slider.slider--tablet { | |
position: relative; | |
flex-wrap: inherit; | |
overflow-x: auto; | |
scroll-snap-type: x mandatory; | |
scroll-behavior: smooth; | |
scroll-padding-left: 1rem; | |
-webkit-overflow-scrolling: touch; | |
margin-bottom: 1rem; | |
} | |
.slider.slider--tablet .slider__slide { | |
margin-bottom: 0; | |
padding-bottom: 0; | |
} | |
} | |
/* Scrollbar */ | |
.slider { | |
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04); | |
-ms-overflow-style: none; | |
scrollbar-width: none; | |
} | |
.slider::-webkit-scrollbar { | |
height: 0.4rem; | |
width: 0.4rem; | |
display: none; | |
} | |
.no-js .slider { | |
-ms-overflow-style: auto; | |
scrollbar-width: auto; | |
} | |
.no-js .slider::-webkit-scrollbar { | |
display: initial; | |
} | |
.slider::-webkit-scrollbar-thumb { | |
background-color: rgb(var(--color-foreground)); | |
border-radius: 0.4rem; | |
border: 0; | |
} | |
.slider::-webkit-scrollbar-track { | |
background: rgba(var(--color-foreground), 0.04); | |
border-radius: 0.4rem; | |
} | |
.slider-counter { | |
margin: 0 1.2rem; | |
} | |
.slider-buttons { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
@media screen and (min-width: 990px) { | |
.slider-buttons { | |
display: none; | |
} | |
} | |
@media screen and (min-width: 750px) { | |
.slider--mobile + .slider-buttons { | |
display: none; | |
} | |
} | |
.slider-button { | |
color: rgba(var(--color-foreground), 0.75); | |
background: transparent; | |
border: none; | |
cursor: pointer; | |
width: 44px; | |
height: 44px; | |
} | |
.slider-button:not([disabled]):hover { | |
color: rgb(var(--color-foreground)); | |
} | |
.slider-button .icon { | |
height: 0.6rem; | |
} | |
.slider-button[disabled] .icon { | |
color: rgba(var(--color-foreground), 0.3); | |
} | |
.slider-button--next .icon { | |
margin-right: -0.2rem; | |
transform: rotate(-90deg) translateX(0.15rem); | |
} | |
.slider-button--prev .icon { | |
margin-left: -0.2rem; | |
transform: rotate(90deg) translateX(-0.15rem); | |
} | |
.slider-button--next:not([disabled]):hover .icon { | |
transform: rotate(-90deg) translateX(0.15rem) scale(1.07); | |
} | |
.slider-button--prev:not([disabled]):hover .icon { | |
transform: rotate(90deg) translateX(-0.15rem) scale(1.07); | |
} | |
.card { | |
display: block; | |
overflow: hidden; | |
text-decoration: none; | |
} | |
.card-information + .card { | |
margin-bottom: 1.3rem; | |
} | |
@media screen and (min-width: 750px) { | |
.card-information + .card { | |
margin-bottom: 1.7rem; | |
} | |
} | |
.card.card--soft { | |
background-color: rgba(var(--color-foreground), 0.04); | |
color: rgb(var(--color-foreground)); | |
} | |
.card .icon-wrap { | |
margin-left: 0.8rem; | |
white-space: nowrap; | |
transition: transform var(--duration-short) ease; | |
overflow: hidden; | |
} | |
.card--media { | |
display: block; | |
text-decoration: none; | |
} | |
.card--text-only { | |
display: flex; | |
justify-content: center; | |
} | |
.card--text-only.card--product { | |
position: static; | |
} | |
.card--text-only::before { | |
content: ''; | |
display: block; | |
padding-bottom: 100%; | |
} | |
.card--product { | |
position: relative; | |
} | |
.card--stretch { | |
height: 100%; | |
} | |
.card--outline:not(.card--soft) { | |
border: calc(0.1rem / var(--font-body-scale)) solid rgba(var(--color-foreground), 0.04); | |
} | |
.card--light-border { | |
border: 0.1rem solid rgba(var(--color-foreground), 0.04); | |
} | |
.card--light-border:hover { | |
border: 0.1rem solid rgba(var(--color-foreground), 0.3); | |
box-shadow: none; | |
} | |
.card__text-spacing { | |
padding: 3rem; | |
} | |
.card-colored.color-background-1 { | |
background-color: rgba(var(--color-foreground), 0.04); | |
} | |
.card--media .card__text-spacing { | |
padding: 2rem; | |
} | |
@media screen and (min-width: 750px) { | |
.card--media .card__text-spacing { | |
padding-left: 3rem; | |
padding-right: 3rem; | |
} | |
} | |
.card-information > * + * { | |
margin-top: 0.5rem; | |
} | |
.card--text-only .card__inner { | |
display: grid; | |
grid-template-rows: 1fr auto 1fr; | |
width: 100%; | |
} | |
.card__content { | |
margin-left: 2.5rem; | |
margin-right: 2.5rem; | |
} | |
.card__content > * { | |
margin: 0; | |
} | |
.card--text-only .card__content { | |
grid-row: 2; | |
justify-self: flex-start; | |
margin-bottom: 6rem; | |
margin-top: 5rem; | |
} | |
.card--text-only .card__badge { | |
align-self: flex-end; | |
grid-row: 3; | |
} | |
.card--search .card__badge > *, | |
.card--text-only .card__badge > * { | |
margin: 0 1.2rem 1.2rem; | |
} | |
.card--search .card__badge, | |
.card--text-only .card__badge { | |
position: initial; | |
} | |
.card--text-only .card__content + .card__badge { | |
margin-top: -5rem; | |
} | |
.media + .card__content { | |
margin-top: 2rem; | |
margin-bottom: 1.5rem; | |
} | |
@media screen and (min-width: 750px) { | |
.card--text-only .card__content { | |
margin-top: 7rem; | |
margin-bottom: 7rem; | |
} | |
.card--text-only .card__content + .card__badge { | |
margin-top: -7rem; | |
} | |
} | |
.card__text-spacing > * { | |
margin: 0; | |
} | |
.card__text-spacing > *:not(.overlay-card) + * { | |
margin-top: 1.5rem; | |
} | |
.card__text { | |
margin: 0; | |
word-break: break-word; | |
} | |
.card-information__text { | |
display: block; | |
margin: 0; | |
padding-right: 1.2rem; | |
} | |
.card-information__wrapper { | |
width: 100%; | |
} | |
.card-information__wrapper > * { | |
line-height: calc(1 + 0.4 / var(--font-body-scale)); | |
color: rgb(var(--color-foreground)); | |
} | |
.card-information__wrapper > .price { | |
color: rgb(var(--color-foreground)); | |
} | |
.card-information__wrapper > .rating { | |
margin-top: 0.4rem; | |
} | |
.card-information__wrapper | |
> *:not(.visually-hidden:first-child) | |
+ *:not(.rating) { | |
margin-top: 0.7rem; | |
} | |
.card-information__wrapper .caption { | |
letter-spacing: 0.07rem; | |
} | |
.card-wrapper { | |
color: inherit; | |
display: flex; | |
flex-direction: column; | |
position: relative; | |
text-decoration: none; | |
} | |
.card-wrapper .card-information { | |
order: 1; | |
} | |
.card-wrapper .full-unstyled-link::after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 1; | |
} | |
.card-wrapper .full-unstyled-link:focus-visible { | |
outline: 0; | |
box-shadow: none; | |
} | |
.card-wrapper .full-unstyled-link:focus-visible::after { | |
outline: .2rem solid rgba(var(--color-foreground),.5); | |
outline-offset: 0.3rem; | |
box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3); | |
} | |
.card-wrapper:focus-within .card { | |
box-shadow: none; | |
} | |
.card__media-spacer { | |
padding: 2rem 2rem 0; | |
} | |
@media screen and (min-width: 750px) { | |
.card__media-spacer { | |
padding: 3rem 3rem 0; | |
} | |
} | |
.card__media-full-spacer { | |
padding: 2rem; | |
} | |
.card-article-info { | |
margin-top: 1rem; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.card__badge { | |
bottom: 1rem; | |
display: flex; | |
flex-wrap: wrap; | |
left: 1rem; | |
position: absolute; | |
} | |
.card__badge > * { | |
margin-right: 1rem; | |
margin-top: 0.5rem; | |
} | |
.overlay-card { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
display: flex; | |
background: transparent; | |
transition: background-color var(--duration-long) ease; | |
} | |
.card:hover .card-colored .overlay-card { | |
background-color: rgba(var(--color-card-hover), 0.06); | |
} | |
@media screen and (min-width: 990px) { | |
.card .media.media--hover-effect > img:only-child, | |
.card-wrapper .media.media--hover-effect > img:only-child, | |
.card--search img { | |
transition: transform var(--duration-long) ease; | |
} | |
.card:hover .media.media--hover-effect > img:first-child:only-child, | |
.card-wrapper:hover .media.media--hover-effect > img:first-child:only-child { | |
transform: scale(1.03); | |
} | |
.card-wrapper:hover | |
.media.media--hover-effect | |
> img:first-child:not(:only-child) { | |
opacity: 0; | |
} | |
.card-wrapper:hover .media.media--hover-effect > img + img { | |
opacity: 1; | |
transition: transform var(--duration-long) ease; | |
transform: scale(1.03); | |
} | |
.card-wrapper:hover .card-information__text { | |
text-decoration: underline; | |
text-underline-offset: 0.3rem; | |
} | |
.card-wrapper:hover .card--search img { | |
transform: scale(1.05); | |
} | |
.card-wrapper:hover .card__text { | |
text-decoration: underline; | |
text-underline-offset: 0.3rem; | |
} | |
.card-wrapper:hover .card--soft { | |
background-color: rgba(var(--color-card-hover), 0.06); | |
transition: background-color var(--duration-long) ease; | |
} | |
} | |
@media screen and (max-width: 749px) { | |
.collage-section + .collection-list-section .no-heading.no-mobile-link { | |
margin-top: -7rem; | |
} | |
.collage-section + .collection-list-section .no-heading:not(.no-mobile-link) { | |
margin-top: -1rem; | |
} | |
} | |
@media screen and (min-width: 750px) { | |
.collage-section + .collection-list-section .no-heading { | |
margin-top: calc(-4rem - var(--page-width-margin)); | |
} | |
} | |
.collection-list-title { | |
margin: 0; | |
} | |
@media screen and (max-width: 749px) { | |
.collection-list-wrapper.page-width { | |
padding: 0; | |
} | |
.collection-list:not(.slider) { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.collection-list-section .collection-list:not(.slider) { | |
padding-left: 1.5rem; | |
padding-right: 1.5rem; | |
} | |
} | |
@media screen and (max-width: 749px) { | |
.collection-list-wrapper:not(.no-heading) .title-wrapper-with-link { | |
margin-top: -1rem; | |
} | |
} | |
@media screen and (min-width: 750px) { | |
.collection-list-wrapper.no-heading { | |
margin-top: calc(6rem + var(--page-width-margin)); | |
} | |
} | |
.collection-list__item:only-child { | |
max-width: 100%; | |
width: 100%; | |
} | |
.collection-list__item .card--light-border:hover { | |
border: 0.1rem solid rgba(var(--color-foreground), 0.04); | |
} | |
.collection-list__item:only-child .media { | |
height: 35rem; | |
} | |
@media screen and (max-width: 749px) { | |
.collection-list .collection-list__item { | |
width: calc(100% - 3rem); | |
} | |
.collection-list__item.grid__item { | |
padding-bottom: 1rem; | |
} | |
.slider.collection-list--1-items { | |
padding-bottom: 0; | |
} | |
} | |
.collection-list.negative-margin--small { | |
margin-bottom: -1rem; | |
} | |
@media screen and (min-width: 750px) and (max-width: 989px) { | |
.slider.collection-list--1-items, | |
.slider.collection-list--2-items, | |
.slider.collection-list--3-items, | |
.slider.collection-list--4-items { | |
padding-bottom: 0; | |
} | |
} | |
@media screen and (min-width: 750px) { | |
.collection-list__item:only-child > *:not(.card--media) { | |
height: 320px; | |
} | |
.collection-list__item:only-child .media { | |
height: 47rem; | |
} | |
.collection-list__item a:hover { | |
box-shadow: none; | |
} | |
.collection-list.grid--3-col-tablet .grid__item { | |
max-width: 33.33%; | |
} | |
.collection-list--4-items .grid__item, | |
.collection-list--7-items .grid__item:nth-child(n + 4), | |
.collection-list--10-items .grid__item:nth-child(n + 7) { | |
width: 50%; | |
} | |
} | |
@media screen and (max-width: 989px) { | |
.collection-list.slider .collection-list__item { | |
max-width: 100%; | |
} | |
} | |
.collection-list__item .card__text, | |
.collection-list__item .card-colored { | |
position: relative; | |
} | |
/* component-title */ | |
.title, | |
.title-wrapper-with-link { | |
margin: 3rem 0 2rem; | |
} | |
.title-wrapper-with-link .title { | |
margin: 0; | |
} | |
.title .link { | |
font-size: inherit; | |
} | |
.title-wrapper { | |
margin-bottom: 3rem; | |
} | |
.title-wrapper-with-link { | |
display: flex; | |
justify-content: space-between; | |
align-items: flex-end; | |
gap: 1rem; | |
margin: 4rem 0 3rem; | |
flex-wrap: wrap; | |
} | |
.title--primary { | |
margin: 4rem 0; | |
} | |
.title-wrapper--self-padded-tablet-down, | |
.title-wrapper--self-padded-mobile { | |
padding-left: 1.5rem; | |
padding-right: 1.5rem; | |
} | |
@media screen and (min-width: 750px) { | |
.title-wrapper--self-padded-mobile { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
} | |
@media screen and (min-width: 990px) { | |
.title, | |
.title-wrapper-with-link { | |
margin: 5rem 0 3rem; | |
} | |
.title--primary { | |
margin: 2rem 0; | |
} | |
.title-wrapper-with-link { | |
align-items: center; | |
} | |
.title-wrapper-with-link .title { | |
margin-bottom: 0; | |
} | |
.title-wrapper--self-padded-tablet-down { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
} | |
.title-wrapper-with-link .link-with-icon { | |
margin: 0; | |
flex-shrink: 0; | |
display: flex; | |
align-items: center; | |
} | |
.title-wrapper-with-link .link-with-icon svg { | |
width: 1.5rem; | |
} | |
.title-wrapper-with-link a { | |
color: rgb(var(--color-link)); | |
margin-top: 0; | |
flex-shrink: 0; | |
} | |
@media screen and (min-width: 990px) { | |
.title-wrapper-with-link.title-wrapper-with-link--no-heading { | |
display: none; | |
} | |
} | |
.subtitle { | |
font-size: 1.8rem; | |
line-height: calc(1 + 0.8 / var(--font-body-scale)); | |
letter-spacing: 0.05rem; | |
color: rgba(var(--color-foreground), 0.7); | |
} | |
/* component-grid */ | |
.grid { | |
display: flex; | |
flex-wrap: wrap; | |
margin-bottom: 2rem; | |
margin-left: -0.5rem; | |
padding: 0; | |
list-style: none; | |
} | |
@media screen and (min-width: 750px) { | |
.grid { | |
margin-left: -1rem; | |
} | |
} | |
.grid__item { | |
padding-left: 0.5rem; | |
padding-bottom: 0.5rem; | |
width: calc(25% - 0.5rem * 3 / 4); | |
max-width: 50%; | |
flex-grow: 1; | |
flex-shrink: 0; | |
} | |
@media screen and (min-width: 750px) { | |
.grid__item { | |
padding-left: 1rem; | |
padding-bottom: 1rem; | |
width: calc(25% - 1rem * 3 / 4); | |
max-width: 50%; | |
} | |
} | |
.grid--gapless .grid__item { | |
padding-left: 0; | |
padding-bottom: 0; | |
} | |
@media screen and (max-width: 749px) { | |
.grid__item.slider__slide--full-width { | |
width: 100%; | |
max-width: none; | |
} | |
} | |
@media screen and (min-width: 750px) and (max-width: 989px) { | |
.grid--one-third-max.grid--3-col-tablet .grid__item { | |
max-width: 33.33%; | |
} | |
} | |
@media screen and (min-width: 990px) { | |
.grid--quarter-max.grid--4-col-desktop .grid__item { | |
max-width: 25%; | |
} | |
} | |
.grid--1-col .grid__item { | |
max-width: 100%; | |
width: 100%; | |
} | |
.grid--3-col .grid__item { | |
width: calc(33.33% - 0.5rem * 2 / 3); | |
} | |
@media screen and (min-width: 750px) { | |
.grid--3-col .grid__item { | |
width: calc(33.33% - 1rem * 2 / 3); | |
} | |
} | |
.grid--2-col .grid__item { | |
width: calc(50% - 0.5rem / 2); | |
} | |
@media screen and (min-width: 750px) { | |
.grid--2-col .grid__item { | |
width: calc(50% - 1rem / 2); | |
} | |
.grid--4-col-tablet .grid__item { | |
width: calc(25% - 1rem * 3 / 4); | |
} | |
.grid--3-col-tablet .grid__item { | |
width: calc(33.33% - 1rem * 2 / 3); | |
} | |
.grid--2-col-tablet .grid__item { | |
width: calc(50% - 1rem / 2); | |
} | |
} | |
@media screen and (min-width: 990px) { | |
.grid--4-col-desktop .grid__item { | |
width: calc(25% - 1rem * 3 / 4); | |
} | |
.grid--3-col-desktop .grid__item { | |
width: calc(33.33% - 1rem * 2 / 3); | |
} | |
.grid--2-col-desktop .grid__item { | |
width: calc(50% - 1rem / 2); | |
} | |
} | |
.grid__item--vertical-align { | |
align-self: center; | |
} | |
.grid__item--full-width { | |
flex: 0 0 100%; | |
max-width: 100%; | |
} | |
@media screen and (max-width: 749px) { | |
.grid--peek.slider--mobile { | |
margin: 0; | |
width: 100%; | |
} | |
.grid--peek.slider--mobile .grid__item { | |
box-sizing: content-box; | |
margin: 0; | |
} | |
.grid--peek .grid__item { | |
width: calc(50% - 3.75rem / 2); | |
} | |
.grid--peek .grid__item:first-of-type { | |
padding-left: 1.5rem; | |
} | |
.grid--peek .grid__item:last-of-type { | |
padding-right: 1.5rem; | |
} | |
} | |
@media screen and (min-width: 750px) and (max-width: 989px) { | |
.slider--tablet.grid--peek .grid__item { | |
width: calc(25% - 4rem * 3 / 4); | |
} | |
.slider--tablet.grid--peek.grid--3-col-tablet .grid__item { | |
width: calc(33.33% - 4rem * 2 / 3); | |
} | |
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item { | |
width: calc(50% - 4rem / 2); | |
} | |
.slider--tablet.grid--peek .grid__item:first-of-type { | |
padding-left: 1.5rem; | |
} | |
.slider--tablet.grid--peek .grid__item:last-of-type { | |
padding-right: 1.5rem; | |
} | |
} | |
@media screen and (max-width: 989px) { | |
.slider--tablet.grid--peek { | |
margin: 0; | |
width: 100%; | |
} | |
.slider--tablet.grid--peek .grid__item { | |
box-sizing: content-box; | |
margin: 0; | |
} | |
} | |
/* component-media */ | |
.media { | |
display: block; | |
background-color: rgba(var(--color-foreground), 0.1); | |
position: relative; | |
overflow: hidden; | |
} | |
.media--transparent { | |
background-color: transparent; | |
} | |
.media > *:not(.zoom):not(.deferred-media__poster-button), | |
.media model-viewer { | |
display: block; | |
max-width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
} | |
.media > img { | |
object-fit: cover; | |
object-position: center center; | |
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
} | |
.media--square { | |
padding-bottom: 100%; | |
} | |
.media--portrait { | |
padding-bottom: 125%; | |
} | |
.media--landscape { | |
padding-bottom: 66.6%; | |
} | |
.media--cropped { | |
padding-bottom: 56%; | |
} | |
.media--16-9 { | |
padding-bottom: 56.25%; | |
} | |
.media--circle { | |
padding-bottom: 100%; | |
border-radius: 50%; | |
} | |
.media.media--hover-effect > img + img { | |
opacity: 0; | |
} | |
@media screen and (min-width: 990px) { | |
.media--cropped { | |
padding-bottom: 63%; | |
} | |
} | |
deferred-media { | |
display: block; | |
} | |
/* component-button */ | |
/* Button - default */ | |
.button, | |
.shopify-challenge__button, | |
.customer button { | |
cursor: pointer; | |
display: inline-flex; | |
justify-content: center; | |
align-items: center; | |
box-sizing: border-box; | |
font: inherit; | |
padding: 0.9rem 3rem 1.1rem; | |
text-decoration: none; | |
border: 0.1rem solid transparent; | |
border-radius: 0; | |
background-color: rgba(var(--color-button), var(--alpha-button-background)); | |
box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)); | |
color: rgb(var(--color-button-text)); | |
min-width: 12rem; | |
min-height: 4.5rem; | |
transition: box-shadow var(--duration-short) ease; | |
-webkit-appearance: none; | |
appearance: none; | |
} | |
.button:focus-visible { | |
box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), | |
0 0 0 0.3rem rgb(var(--color-background)), | |
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); | |
} | |
.button:focus { | |
box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), | |
0 0 0 0.3rem rgb(var(--color-background)), | |
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); | |
} | |
.button:focus:not(:focus-visible) { | |
box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)); | |
} | |
.button::selection, | |
.shopify-challenge__button::selection, | |
.customer button::selection { | |
background-color: rgba(var(--color-button-text), 0.3); | |
} | |
.button, | |
.button-label, | |
.shopify-challenge__button, | |
.customer button { | |
font-size: 1.5rem; | |
letter-spacing: 0.1rem; | |
line-height: calc(1 + 0.2 / var(--font-body-scale)); | |
} | |
.button--tertiary { | |
font-size: 1.2rem; | |
padding: 1rem 1.5rem; | |
min-width: 9rem; | |
min-height: 3.5rem; | |
} | |
.button--small { | |
padding: 1.2rem 2.6rem; | |
} | |
/* Button - hover */ | |
.button:not([disabled]):hover, | |
.shopify-challenge__button:hover, | |
.customer button:hover { | |
box-shadow: 0 0 0 0.2rem rgba(var(--color-button), var(--alpha-button-border)); | |
} | |
/* Button - other */ | |
.button:disabled, | |
.button[aria-disabled='true'], | |
.button.disabled, | |
.customer button:disabled, | |
.customer button[aria-disabled='true'], | |
.customer button.disabled { | |
cursor: not-allowed; | |
opacity: 0.5; | |
} | |
.button--full-width { | |
display: flex; | |
width: 100%; | |
} | |
.button.loading { | |
color: transparent; | |
position: relative; | |
} | |
@media screen and (forced-colors: active) { | |
.button.loading { | |
color: rgb(var(--color-foreground)); | |
} | |
} | |
.button.loading > .loading-overlay__spinner { | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
position: absolute; | |
height: 100%; | |
display: flex; | |
} | |
/* Button - social share */ | |
.share-button { | |
display: block; | |
position: relative; | |
} | |
.share-button details { | |
width: fit-content; | |
} | |
.share-button__button { | |
font-size: 1.4rem; | |
display: flex; | |
min-height: 2.4rem; | |
align-items: center; | |
color: rgb(var(--color-link)); | |
margin-left: 0; | |
padding-left: 0; | |
} | |
details[open] > .share-button__fallback { | |
animation: animateMenuOpen var(--duration-default) ease; | |
} | |
.share-button__button:hover { | |
text-decoration: underline; | |
text-underline-offset: 0.3rem; | |
} | |
.share-button__button, | |
.share-button__fallback button { | |
cursor: pointer; | |
background-color: transparent; | |
border: none; | |
} | |
.share-button__button .icon-share { | |
height: 1.2rem; | |
margin-right: 1rem; | |
width: 1.3rem; | |
} | |
.share-button__fallback { | |
background: rgb(var(--color-background)); | |
display: flex; | |
align-items: center; | |
position: absolute; | |
top: 3rem; | |
left: 0.1rem; | |
z-index: 3; | |
width: 100%; | |
min-width: max-content; | |
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55); | |
} | |
.share-button__fallback button { | |
width: 4.4rem; | |
height: 4.4rem; | |
padding: 0; | |
flex-shrink: 0; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.share-button__fallback button:hover { | |
color: rgba(var(--color-foreground), 0.75); | |
} | |
.share-button__fallback button:hover svg { | |
transform: scale(1.07); | |
} | |
.share-button__close:not(.hidden) + .share-button__copy { | |
display: none; | |
} | |
.share-button__close, | |
.share-button__copy { | |
background-color: transparent; | |
color: rgb(var(--color-foreground)); | |
} | |
.share-button__fallback .field__input { | |
box-shadow: none; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
overflow: hidden; | |
} | |
.share-button__fallback .icon { | |
width: 1.5rem; | |
height: 1.5rem; | |
} | |
.share-button__message:not(:empty) { | |
display: flex; | |
align-items: center; | |
width: 100%; | |
height: 100%; | |
margin-top: 0; | |
padding: 0.8rem 0 0.8rem 1.5rem; | |
} | |
.share-button__message:not(:empty):not(.hidden) ~ * { | |
display: none; | |
} | |
/* component-form */ | |
.field__input, | |
.select__select, | |
.customer .field input, | |
.customer select { | |
-webkit-appearance: none; | |
appearance: none; | |
background-color: transparent; | |
border: 0.1rem solid transparent; | |
border-radius: 0; | |
color: rgb(var(--color-foreground)); | |
font-size: 1.6rem; | |
width: 100%; | |
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55); | |
height: 4.5rem; | |
box-sizing: border-box; | |
transition: box-shadow var(--duration-short) ease; | |
} | |
.select__select { | |
font-family: var(--font-body-family); | |
font-style: var(--font-body-style); | |
font-weight: var(--font-body-weight); | |
font-size: 1.2rem; | |
color: rgba(var(--color-foreground), 0.75); | |
} | |
.field__input:hover, | |
.select__select:hover, | |
.customer .field input:hover, | |
.customer select:hover, | |
.localization-form__select:hover { | |
box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55); | |
} | |
.field__input:focus, | |
.select__select:focus, | |
.customer .field input:focus, | |
.customer select:focus, | |
.localization-form__select:focus { | |
box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75); | |
outline: transparent; | |
} | |
.text-area, | |
.select { | |
display: inline-block; | |
position: relative; | |
width: 100%; | |
} | |
/* Select */ | |
.select .icon-caret, | |
.customer select + svg { | |
height: 0.6rem; | |
pointer-events: none; | |
position: absolute; | |
top: calc(50% - 0.2rem); | |
right: 1.5rem; | |
} | |
.select__select, | |
.customer select { | |
cursor: pointer; | |
line-height: calc(1 + 0.6 / var(--font-body-scale)); | |
padding: 0 4rem 0 1.5rem; | |
} | |
/* Field */ | |
.field { | |
position: relative; | |
width: 100%; | |
display: flex; | |
} | |
.customer .field { | |
display: block; | |
} | |
.field--with-error { | |
flex-wrap: wrap; | |
} | |
.field__input, | |
.customer .field input { | |
flex-grow: 1; | |
text-align: left; | |
padding: 1.5rem; | |
} | |
.field__label, | |
.customer .field label { | |
font-size: 1.6rem; | |
left: 1.5rem; | |
top: 1rem; | |
margin-bottom: 0; | |
pointer-events: none; | |
position: absolute; | |
transition: top var(--duration-short) ease, | |
font-size var(--duration-short) ease; | |
color: rgba(var(--color-foreground), 0.75); | |
letter-spacing: 0.1rem; | |
line-height: 1.5; | |
} | |
.field__input:focus ~ .field__label, | |
.field__input:not(:placeholder-shown) ~ .field__label, | |
.field__input:-webkit-autofill ~ .field__label, | |
.customer .field input:focus ~ label, | |
.customer .field input:not(:placeholder-shown) ~ label, | |
.customer .field input:-webkit-autofill ~ label { | |
font-size: 1rem; | |
top: 0.3em; | |
letter-spacing: 0.04rem; | |
} | |
.field__input:focus, | |
.field__input:not(:placeholder-shown), | |
.field__input:-webkit-autofill, | |
.customer .field input:focus, | |
.customer .field input:not(:placeholder-shown), | |
.customer .field input:-webkit-autofill { | |
padding: 2.2rem 1.5rem 0.8rem; | |
} | |
.field__input::-webkit-search-cancel-button, | |
.customer .field input::-webkit-search-cancel-button { | |
display: none; | |
} | |
.field__input::placeholder, | |
.customer .field input::placeholder { | |
opacity: 0; | |
} | |
.field__button { | |
align-items: center; | |
background-color: transparent; | |
border: 0; | |
color: currentColor; | |
cursor: pointer; | |
display: flex; | |
height: 4.4rem; | |
justify-content: center; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
width: 4.4rem; | |
} | |
.field__button > svg { | |
height: 2.5rem; | |
width: 2.5rem; | |
} | |
.field__input:-webkit-autofill ~ .field__button, | |
.field__input:-webkit-autofill ~ .field__label, | |
.customer .field input:-webkit-autofill ~ label { | |
color: rgb(0, 0, 0); | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment