removed button max width

pull/1/head
alexanderroese 2024-05-31 11:45:58 +02:00
parent ce383e73a9
commit dc9860c4b5
1 changed files with 101 additions and 50 deletions

View File

@ -64,7 +64,8 @@
width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2); width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
} }
.product--large:not(.product--no-media).product--right .product__info-wrapper { .product--large:not(.product--no-media).product--right
.product__info-wrapper {
padding: 0 4rem 0 0; padding: 0 4rem 0 0;
} }
@ -88,23 +89,25 @@
min-height: 4.6rem; min-height: 4.6rem;
} }
.shopify-payment-button__button [role='button'].focused, .shopify-payment-button__button [role="button"].focused,
.no-js .shopify-payment-button__button [role='button']:focus { .no-js .shopify-payment-button__button [role="button"]:focus {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
outline-offset: 0.3rem; outline-offset: 0.3rem;
box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), 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) !important; 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
} }
.shopify-payment-button__button [role='button']:focus:not(:focus-visible) { .shopify-payment-button__button [role="button"]:focus:not(:focus-visible) {
outline: 0; outline: 0;
box-shadow: none !important; box-shadow: none !important;
} }
.shopify-payment-button__button [role='button']:focus-visible { .shopify-payment-button__button [role="button"]:focus-visible {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), 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) !important; 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
} }
.shopify-payment-button__button--unbranded { .shopify-payment-button__button--unbranded {
@ -174,10 +177,10 @@
padding-left: 0; padding-left: 0;
} }
/* Fallback */ /* Fallback */
.no-js .shopify-payment-button__button [role='button']:focus + label { .no-js .shopify-payment-button__button [role="button"]:focus + label {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55); box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
} }
.product-form__input .select { .product-form__input .select {
@ -194,14 +197,18 @@
--alpha-button-background: 1; --alpha-button-background: 1;
} }
.product-form__submit[aria-disabled='true'] + .shopify-payment-button .shopify-payment-button__button[disabled], .product-form__submit[aria-disabled="true"]
.product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] { + .shopify-payment-button
.shopify-payment-button__button[disabled],
.product-form__submit[disabled]
+ .shopify-payment-button
.shopify-payment-button__button[disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
} }
@media screen and (forced-colors: active) { @media screen and (forced-colors: active) {
.product-form__submit[aria-disabled='true'] { .product-form__submit[aria-disabled="true"] {
color: Window; color: Window;
} }
} }
@ -365,10 +372,10 @@ a.product__text {
.product-form__quantity-top .form__label { .product-form__quantity-top .form__label {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }
/*
.product-form__buttons { .product-form__buttons {
max-width: 44rem; max-width: 44rem;
} } */
.product--no-media .product__info-container > modal-opener { .product--no-media .product__info-container > modal-opener {
display: block; display: block;
@ -425,11 +432,15 @@ a.product__text {
@media screen and (min-width: 750px) { @media screen and (min-width: 750px) {
.product--thumbnail .product__media-list, .product--thumbnail .product__media-list,
.product--thumbnail_slider .product__media-list { .product--thumbnail_slider .product__media-list {
padding-bottom: calc(var(--media-shadow-vertical-offset) * var(--media-shadow-visible)); padding-bottom: calc(
var(--media-shadow-vertical-offset) * var(--media-shadow-visible)
);
} }
.product__media-list { .product__media-list {
padding-right: calc(var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)); padding-right: calc(
var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)
);
} }
.product--thumbnail .product__media-item:not(.is-active), .product--thumbnail .product__media-item:not(.is-active),
@ -437,7 +448,8 @@ a.product__text {
display: none; display: none;
} }
.product-media-modal__content > .product__media-item--variant.product__media-item--variant { .product-media-modal__content
> .product__media-item--variant.product__media-item--variant {
display: none; display: none;
} }
@ -488,7 +500,8 @@ a.product__text {
left: 1.2rem; left: 1.2rem;
top: 1.2rem; top: 1.2rem;
z-index: 1; z-index: 1;
transition: color var(--duration-short) ease, opacity var(--duration-short) ease; transition: color var(--duration-short) ease,
opacity var(--duration-short) ease;
} }
.product__media-video .product__media-icon { .product__media-video .product__media-icon {
@ -508,31 +521,44 @@ a.product__text {
width: 100%; width: 100%;
} }
.product--columns .product__media-item:not(.product__media-item--single):not(:only-child) { .product--columns
.product__media-item:not(.product__media-item--single):not(:only-child) {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
} }
.product--large.product--columns .product__media-item--full .deferred-media__poster-button { .product--large.product--columns
.product__media-item--full
.deferred-media__poster-button {
height: 5rem; height: 5rem;
width: 5rem; width: 5rem;
} }
.product--medium.product--columns .product__media-item--full .deferred-media__poster-button { .product--medium.product--columns
.product__media-item--full
.deferred-media__poster-button {
height: 4.2rem; height: 4.2rem;
width: 4.2rem; width: 4.2rem;
} }
.product--medium.product--columns .product__media-item--full .deferred-media__poster-button .icon { .product--medium.product--columns
.product__media-item--full
.deferred-media__poster-button
.icon {
width: 1.8rem; width: 1.8rem;
height: 1.8rem; height: 1.8rem;
} }
.product--small.product--columns .product__media-item--full .deferred-media__poster-button { .product--small.product--columns
.product__media-item--full
.deferred-media__poster-button {
height: 3.6rem; height: 3.6rem;
width: 3.6rem; width: 3.6rem;
} }
.product--small.product--columns .product__media-item--full .deferred-media__poster-button .icon { .product--small.product--columns
.product__media-item--full
.deferred-media__poster-button
.icon {
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;
} }
@ -543,8 +569,12 @@ a.product__text {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
} }
.product:not(.product--columns) .product__media-list .product__media-item:first-child, .product:not(.product--columns)
.product:not(.product--columns) .product__media-list .product__media-item--full { .product__media-list
.product__media-item:first-child,
.product:not(.product--columns)
.product__media-list
.product__media-item--full {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
@ -573,7 +603,7 @@ a.product__text {
} }
.product__media-toggle::after { .product__media-toggle::after {
content: ''; content: "";
cursor: pointer; cursor: pointer;
display: block; display: block;
margin: 0; margin: 0;
@ -605,12 +635,14 @@ a.product__text {
} }
.product__media-toggle:focus-visible:after { .product__media-toggle:focus-visible:after {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
border-radius: var(--media-radius); border-radius: var(--media-radius);
} }
.product__media-toggle.focused:after { .product__media-toggle.focused:after {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
border-radius: var(--media-radius); border-radius: var(--media-radius);
} }
@ -668,8 +700,12 @@ a.product__text {
} }
@media screen and (max-width: 749px) { @media screen and (max-width: 749px) {
.product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image), .product--thumbnail
.product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image) { .is-active
.product__modal-opener:not(.product__modal-opener--image),
.product--thumbnail_slider
.is-active
.product__modal-opener:not(.product__modal-opener--image) {
display: none; display: none;
} }
@ -801,19 +837,24 @@ a.product__text {
border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
border-style: solid; border-style: solid;
border-width: var(--popup-border-width); border-width: var(--popup-border-width);
box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) box-shadow: var(--popup-shadow-horizontal-offset)
var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
rgba(var(--color-shadow), var(--popup-shadow-opacity)); rgba(var(--color-shadow), var(--popup-shadow-opacity));
} }
.product-popup-modal__content.focused { .product-popup-modal__content.focused {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3),
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset)
var(--popup-shadow-blur-radius)
rgba(var(--color-shadow), var(--popup-shadow-opacity)); rgba(var(--color-shadow), var(--popup-shadow-opacity));
} }
.product-popup-modal__content:focus-visible { .product-popup-modal__content:focus-visible {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3),
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset)
var(--popup-shadow-blur-radius)
rgba(var(--color-shadow), var(--popup-shadow-opacity)); rgba(var(--color-shadow), var(--popup-shadow-opacity));
} }
@ -1012,7 +1053,9 @@ a.product__text {
} }
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
.product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { .product--small
.thumbnail-list.slider--tablet-up
.thumbnail-list__item.slider__slide {
width: calc(25% - 0.8rem); width: calc(25% - 0.8rem);
} }
@ -1098,13 +1141,15 @@ a.product__text {
} }
.thumbnail[aria-current]:focus-visible { .thumbnail[aria-current]:focus-visible {
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
} }
.thumbnail[aria-current]:focus, .thumbnail[aria-current]:focus,
.thumbnail.focused { .thumbnail.focused {
outline: 0; outline: 0;
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
} }
/* outline styling for Windows High Contrast Mode */ /* outline styling for Windows High Contrast Mode */
@ -1167,7 +1212,7 @@ a.product__text {
} }
.thumbnail-list__item::before { .thumbnail-list__item::before {
content: ''; content: "";
display: block; display: block;
padding-bottom: 100%; padding-bottom: 100%;
} }
@ -1210,7 +1255,7 @@ a.product__text {
} }
.product__inventory.visibility-hidden:empty::after { .product__inventory.visibility-hidden:empty::after {
content: '#'; content: "#";
} }
/* Icon with text */ /* Icon with text */
@ -1285,7 +1330,7 @@ a.product__text {
/* SKU block */ /* SKU block */
.product__sku.visibility-hidden::after { .product__sku.visibility-hidden::after {
content: '#'; content: "#";
} }
/* Product-thumbnail snippet */ /* Product-thumbnail snippet */
@ -1302,7 +1347,10 @@ a.product__text {
/* arbitrary offset value based on average theme spacing and header height */ /* arbitrary offset value based on average theme spacing and header height */
--viewport-offset: 400px; --viewport-offset: 400px;
--constrained-min-height: 300px; --constrained-min-height: 300px;
--constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset))); --constrained-height: max(
var(--constrained-min-height),
calc(100vh - var(--viewport-offset))
);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -1365,7 +1413,8 @@ a.product__text {
} }
@media screen and (min-width: 750px) { @media screen and (min-width: 750px) {
.product-media-container .product__modal-opener:not(.product__modal-opener--image) { .product-media-container
.product__modal-opener:not(.product__modal-opener--image) {
display: none; display: none;
} }
} }
@ -1405,7 +1454,7 @@ a.product__text {
display: none; display: none;
} }
.recipient-form > input[type='checkbox'] { .recipient-form > input[type="checkbox"] {
position: absolute; position: absolute;
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;
@ -1442,7 +1491,7 @@ a.product__text {
top: 0.4rem; top: 0.4rem;
} }
.recipient-form > input[type='checkbox']:checked + label .icon-checkmark { .recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
visibility: visible; visibility: visible;
} }
@ -1454,11 +1503,13 @@ a.product__text {
margin: 1.6rem auto; margin: 1.6rem auto;
} }
.recipient-form > input[type='checkbox']:checked ~ .recipient-fields { .recipient-form > input[type="checkbox"]:checked ~ .recipient-fields {
display: block; display: block;
animation: animateMenuOpen var(--duration-default) ease; animation: animateMenuOpen var(--duration-default) ease;
} }
.recipient-form > input[type='checkbox']:not(:checked, :disabled) ~ .recipient-fields, .recipient-form
> input[type="checkbox"]:not(:checked, :disabled)
~ .recipient-fields,
.recipient-email-label { .recipient-email-label {
display: none; display: none;
} }
@ -1492,7 +1543,7 @@ a.product__text {
border: 0.1rem solid rgb(var(--color-background)); border: 0.1rem solid rgb(var(--color-background));
} }
.recipient-form > input[type='checkbox']:checked + label .icon-checkmark { .recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
border: none; border: none;
} }
} }