removed button max width
alexanderroese
parent
ce383e73a9
commit
dc9860c4b5
|
|
@ -64,7 +64,8 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -88,23 +89,25 @@
|
|||
min-height: 4.6rem;
|
||||
}
|
||||
|
||||
.shopify-payment-button__button [role='button'].focused,
|
||||
.no-js .shopify-payment-button__button [role='button']:focus {
|
||||
.shopify-payment-button__button [role="button"].focused,
|
||||
.no-js .shopify-payment-button__button [role="button"]:focus {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
|
||||
outline-offset: 0.3rem;
|
||||
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;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -174,10 +177,10 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Fallback */
|
||||
.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);
|
||||
.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);
|
||||
}
|
||||
|
||||
.product-form__input .select {
|
||||
|
|
@ -194,14 +197,18 @@
|
|||
--alpha-button-background: 1;
|
||||
}
|
||||
|
||||
.product-form__submit[aria-disabled='true'] + .shopify-payment-button .shopify-payment-button__button[disabled],
|
||||
.product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] {
|
||||
.product-form__submit[aria-disabled="true"]
|
||||
+ .shopify-payment-button
|
||||
.shopify-payment-button__button[disabled],
|
||||
.product-form__submit[disabled]
|
||||
+ .shopify-payment-button
|
||||
.shopify-payment-button__button[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
.product-form__submit[aria-disabled='true'] {
|
||||
.product-form__submit[aria-disabled="true"] {
|
||||
color: Window;
|
||||
}
|
||||
}
|
||||
|
|
@ -365,10 +372,10 @@ a.product__text {
|
|||
.product-form__quantity-top .form__label {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.product-form__buttons {
|
||||
max-width: 44rem;
|
||||
}
|
||||
} */
|
||||
|
||||
.product--no-media .product__info-container > modal-opener {
|
||||
display: block;
|
||||
|
|
@ -425,11 +432,15 @@ a.product__text {
|
|||
@media screen and (min-width: 750px) {
|
||||
.product--thumbnail .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 {
|
||||
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),
|
||||
|
|
@ -437,7 +448,8 @@ a.product__text {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -488,7 +500,8 @@ a.product__text {
|
|||
left: 1.2rem;
|
||||
top: 1.2rem;
|
||||
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 {
|
||||
|
|
@ -508,31 +521,44 @@ a.product__text {
|
|||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
height: 1.6rem;
|
||||
}
|
||||
|
|
@ -543,8 +569,12 @@ a.product__text {
|
|||
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__media-list .product__media-item--full {
|
||||
.product:not(.product--columns)
|
||||
.product__media-list
|
||||
.product__media-item:first-child,
|
||||
.product:not(.product--columns)
|
||||
.product__media-list
|
||||
.product__media-item--full {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -573,7 +603,7 @@ a.product__text {
|
|||
}
|
||||
|
||||
.product__media-toggle::after {
|
||||
content: '';
|
||||
content: "";
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
|
@ -605,12 +635,14 @@ a.product__text {
|
|||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
@ -668,8 +700,12 @@ a.product__text {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 749px) {
|
||||
.product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image),
|
||||
.product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image) {
|
||||
.product--thumbnail
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -801,19 +837,24 @@ a.product__text {
|
|||
border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
|
||||
border-style: solid;
|
||||
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));
|
||||
}
|
||||
|
||||
.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),
|
||||
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
|
||||
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));
|
||||
}
|
||||
|
||||
.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),
|
||||
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
|
||||
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));
|
||||
}
|
||||
|
||||
|
|
@ -1012,7 +1053,9 @@ a.product__text {
|
|||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
|
|
@ -1098,13 +1141,15 @@ a.product__text {
|
|||
}
|
||||
|
||||
.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.focused {
|
||||
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 */
|
||||
|
|
@ -1167,7 +1212,7 @@ a.product__text {
|
|||
}
|
||||
|
||||
.thumbnail-list__item::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
|
@ -1210,7 +1255,7 @@ a.product__text {
|
|||
}
|
||||
|
||||
.product__inventory.visibility-hidden:empty::after {
|
||||
content: '#';
|
||||
content: "#";
|
||||
}
|
||||
|
||||
/* Icon with text */
|
||||
|
|
@ -1285,7 +1330,7 @@ a.product__text {
|
|||
/* SKU block */
|
||||
|
||||
.product__sku.visibility-hidden::after {
|
||||
content: '#';
|
||||
content: "#";
|
||||
}
|
||||
|
||||
/* Product-thumbnail snippet */
|
||||
|
|
@ -1302,7 +1347,10 @@ a.product__text {
|
|||
/* arbitrary offset value based on average theme spacing and header height */
|
||||
--viewport-offset: 400px;
|
||||
--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-left: auto;
|
||||
}
|
||||
|
|
@ -1365,7 +1413,8 @@ a.product__text {
|
|||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1405,7 +1454,7 @@ a.product__text {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.recipient-form > input[type='checkbox'] {
|
||||
.recipient-form > input[type="checkbox"] {
|
||||
position: absolute;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
|
|
@ -1442,7 +1491,7 @@ a.product__text {
|
|||
top: 0.4rem;
|
||||
}
|
||||
|
||||
.recipient-form > input[type='checkbox']:checked + label .icon-checkmark {
|
||||
.recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1454,11 +1503,13 @@ a.product__text {
|
|||
margin: 1.6rem auto;
|
||||
}
|
||||
|
||||
.recipient-form > input[type='checkbox']:checked ~ .recipient-fields {
|
||||
.recipient-form > input[type="checkbox"]:checked ~ .recipient-fields {
|
||||
display: block;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1492,7 +1543,7 @@ a.product__text {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue