Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Release/14.0.0 duplicate #3436

Merged
merged 7 commits into from
Apr 24, 2024
Merged

Release/14.0.0 duplicate #3436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c51b4be
Fix selector for Quick Add Bulk (#3421)
sofiamatulis Apr 15, 2024
b2b5883
run linter in updates files for the latest release (#3422)
ludoboludo Apr 17, 2024
591d291
[Fix] quick add bulk disabled state (#3423)
sofiamatulis Apr 18, 2024
6a40bba
Add optional chaining to prevent JS error (#3428)
lhoffbeck Apr 18, 2024
9bd88c3
[Prod page] Add check to prevent errors if no feat. image exists (#3429)
ludoboludo Apr 19, 2024
fb081e0
Restore standard quick add to complementary products (#3430)
dan-menard Apr 19, 2024
87da4ff
Modal colour scheme fix (#3432)
tyleralsbury Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2263,13 +2263,25 @@ product-info .loading__spinner:not(.hidden) ~ *,
}

@keyframes translateAnnouncementSlideIn {
0% {opacity: 0; transform: translateX(var(--announcement-translate-from))}
100% {opacity: 1; transform: translateX(0)}
0% {
opacity: 0;
transform: translateX(var(--announcement-translate-from));
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes translateAnnouncementSlideOut {
0% {opacity: 1; transform: translateX(0)}
100% {opacity: 0; transform: translateX(var(--announcement-translate-to))}
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(var(--announcement-translate-to));
}
}

/* section-header */
Expand Down
7 changes: 6 additions & 1 deletion assets/cart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,12 @@ class CartItems extends HTMLElement {
}

onChange(event) {
this.updateQuantity(event.target.dataset.index, event.target.value, document.activeElement.getAttribute('name'), event.target.dataset.quantityVariantId);
this.updateQuantity(
event.target.dataset.index,
event.target.value,
document.activeElement.getAttribute('name'),
event.target.dataset.quantityVariantId
);
}

onCartUpdate() {
Expand Down
99 changes: 62 additions & 37 deletions assets/component-card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@
top: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1);
border-radius: var(--border-radius);
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
rgba(var(--color-shadow), var(--shadow-opacity));
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
Expand Down Expand Up @@ -138,17 +139,18 @@
padding: 1.3rem 1rem;
}

.card:not(.ratio)>.card__content {
.card:not(.ratio) > .card__content {
grid-template-rows: max-content minmax(0, 1fr) max-content auto;
}

.card-information .card__information-volume-pricing-note {
margin-top: 0.6rem;
line-height: calc(0.5 + .4 / var(--font-body-scale));
line-height: calc(0.5 + 0.4 / var(--font-body-scale));
color: rgba(var(--color-foreground), 0.75);
}

.card__information-volume-pricing-note--button, .card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
.card__information-volume-pricing-note--button,
.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
position: relative;
z-index: 1;
cursor: pointer;
Expand Down Expand Up @@ -203,7 +205,10 @@
width: calc(100% + var(--border-width) + 3.5rem);
}

.grid--6-col-desktop .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
.grid--6-col-desktop
.card--standard
.card__information-volume-pricing-note--button
+ .global-settings-popup.quantity-popover__info {
width: calc(100% + var(--border-width) + 1rem);
}
}
Expand All @@ -213,16 +218,29 @@
width: calc(3.5rem / var(--font-body-scale));
}

.grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info, .grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
.grid--2-col-tablet-down
.card--card
.card__information-volume-pricing-note--button
+ .global-settings-popup.quantity-popover__info,
.grid--2-col-tablet-down
.card--standard
.card__information-volume-pricing-note--button
+ .global-settings-popup.quantity-popover__info {
left: 50%;
transform: translate(-50%);
}

.grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
.grid--2-col-tablet-down
.card--standard
.card__information-volume-pricing-note--button
+ .global-settings-popup.quantity-popover__info {
width: 100%;
}

.grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
.grid--2-col-tablet-down
.card--card
.card__information-volume-pricing-note--button
+ .global-settings-popup.quantity-popover__info {
width: calc(100% + var(--border-width) + 4rem);
}

Expand All @@ -237,10 +255,10 @@

@media screen and (max-width: 989px) {
.card-information quantity-popover .quantity__rules ~ volume-pricing {
margin-top: 0;
margin-top: 0;
}

.card-information quantity-popover volume-pricing {
.card-information quantity-popover volume-pricing {
margin-top: 4.2rem;
}
}
Expand All @@ -267,7 +285,7 @@
justify-self: flex-end;
}

.card:not(.card--horizontal)>.card__content>.card__badge {
.card:not(.card--horizontal) > .card__content > .card__badge {
margin: 1.3rem;
}

Expand All @@ -278,7 +296,7 @@
width: 100%;
}

.card__inner:not(.ratio)>.card__content {
.card__inner:not(.ratio) > .card__content {
height: 100%;
}

Expand All @@ -297,7 +315,10 @@
font-size: calc(var(--font-heading-scale) * 1.2rem);
}

.card--horizontal .card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
.card--horizontal
.card-information
> *:not(.visually-hidden:first-child)
+ *:not(.rating):not(.card__information-volume-pricing-note) {
margin-top: 0;
}

Expand All @@ -306,15 +327,14 @@
}

@media only screen and (min-width: 750px) {

.card--horizontal .card__heading,
.card--horizontal .price__container .price-item,
.card--horizontal__quick-add {
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
}

.card--card.card--media>.card__content {
.card--card.card--media > .card__content {
margin-top: calc(0rem - var(--image-padding));
}

Expand Down Expand Up @@ -361,22 +381,21 @@
}

@media screen and (min-width: 990px) {

.card .media.media--hover-effect>img:only-child,
.card-wrapper .media.media--hover-effect>img:only-child {
.card .media.media--hover-effect > img:only-child,
.card-wrapper .media.media--hover-effect > img:only-child {
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 {
.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) {
.card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
opacity: 0;
}

.card-wrapper:hover .media.media--hover-effect>img+img {
.card-wrapper:hover .media.media--hover-effect > img + img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
Expand All @@ -389,29 +408,29 @@
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text:not(.card--horizontal)>.card__content .card__heading:not(.card__heading--placeholder),
.card--standard:not(.card--horizontal)>.card__content .card__badge,
.card--standard.card--text.article-card>.card__content .card__information,
.card--standard>.card__content .card__caption {
.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
.card--standard:not(.card--horizontal) > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
display: none;
}

.card--standard:not(.card--horizontal) .placeholder-svg {
width: 100%;
}

.card--standard>.card__content {
.card--standard > .card__content {
padding: 0;
}

.card--standard>.card__content .card__information {
.card--standard > .card__content .card__information {
padding-left: 0;
padding-right: 0;
}

.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media>.card__content .card__badge {
.card--card.card--media > .card__content .card__badge {
display: none;
}

Expand Down Expand Up @@ -442,37 +461,40 @@
overflow: hidden;
}

.card-information>*+* {
.card-information > * + * {
margin-top: 0.5rem;
}

.card-information {
width: 100%;
}

.card-information>* {
.card-information > * {
line-height: calc(1 + 0.4 / var(--font-body-scale));
color: rgb(var(--color-foreground));
}

.card-information>.price {
.card-information > .price {
color: rgb(var(--color-foreground));
}

.card--horizontal .card-information>.price {
.card--horizontal .card-information > .price {
color: rgba(var(--color-foreground), 0.75);
}

.card-information>.rating {
.card-information > .rating {
margin-top: 0.4rem;
}

/* Specificity needed due to the changes below */
.card-information > *:not(.visually-hidden:first-child) + quantity-popover:not(.rating):not(.card__information-volume-pricing-note), .card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
.card-information
> *:not(.visually-hidden:first-child)
+ quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
margin-top: 0;
}

.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
margin-top: 0.7rem;
}

Expand All @@ -494,7 +516,10 @@
border: 0;
/* Border is not currently compatible with image shapes for standard cards. */
background-color: transparent;
filter: drop-shadow(var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)));
filter: drop-shadow(
var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
rgba(var(--color-shadow), var(--shadow-opacity))
);
}

.card--shape.card--standard:not(.card--text) .card__inner:after {
Expand Down
2 changes: 1 addition & 1 deletion assets/component-menu-drawer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ details[open].menu-opening > .menu-drawer__submenu {

.menu-drawer .list-social {
justify-content: flex-start;
margin-left: -1.25rem
margin-left: -1.25rem;
}

.menu-drawer .list-social:empty {
Expand Down
Loading
Loading