Skip to content

Commit

Permalink
Merge remote-tracking branch 'shopify/main'
Browse files Browse the repository at this point in the history
* shopify/main: (86 commits)
  Remove setting for variant styling (Shopify#2025)
  Update 1 translation file (Shopify#2023)
  Move product media gallery and modal into snippets [Refactor] (Shopify#1934)
  Add variant picker sold out UI [temporary solution] (Shopify#1407)
  Add shopify attributes to description block on product page (Shopify#2005)
  [Product page] "Icon with text" block (Shopify#1933)
  Fetch the header (LCP) image at high priority (Shopify#1918)
  Enable language/country selector by default (Shopify#1988)
  Add version bump and release notes (Shopify#1997)
  [Complementary block] update url from the info text to the latest (Shopify#1974)
  Ensure complementary block loads card css (Shopify#1991)
  Variant media modal fix (Shopify#1985)
  fix closing element (Shopify#1981)
  fix slider controls showing in certain scenarios on mobile (Shopify#1973)
  Update 1 translation file (Shopify#1967)
  fix margin-top on middle center header option (Shopify#1970)
  Update version and release notes (Shopify#1966)
  [Complementary product] Keep text alignment to the left for horizontal cards (Shopify#1965)
  Remove Product Subtitle block from Featured Product section (Shopify#1964)
  Fix shadow being cut on featured collection slider, featured blog slider and collection list slider (Shopify#1961)
  ...
  • Loading branch information
Thomas Timmers committed Oct 17, 2022
2 parents c3d35c0 + 4616713 commit e2066e6
Show file tree
Hide file tree
Showing 95 changed files with 6,067 additions and 1,307 deletions.
15 changes: 10 additions & 5 deletions assets/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,9 @@
.color-icon-outline-button {
--color-icon: rgb(var(--color-base-outline-button-labels));
}

.product-card-wrapper .card {

.product-card-wrapper .card,
.contains-card--product {
--border-radius: var(--product-card-corner-radius);
--border-width: var(--product-card-border-width);
--border-opacity: var(--product-card-border-opacity);
Expand All @@ -168,7 +169,8 @@
--text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card {
.collection-card-wrapper .card,
.contains-card--collection {
--border-radius: var(--collection-card-corner-radius);
--border-width: var(--collection-card-border-width);
--border-opacity: var(--collection-card-border-opacity);
Expand All @@ -181,7 +183,8 @@
--text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card {
.article-card-wrapper .card,
.contains-card--article {
--border-radius: var(--blog-card-corner-radius);
--border-width: var(--blog-card-border-width);
--border-opacity: var(--blog-card-border-opacity);
Expand Down Expand Up @@ -2238,6 +2241,7 @@ input[type='checkbox'] {
display: block;
position: relative;
background-color: rgb(var(--color-background));
z-index: 1;
}

.header-wrapper--border-bottom {
Expand Down Expand Up @@ -2278,7 +2282,7 @@ input[type='checkbox'] {
'navigation navigation navigation';
}

.header:not(.header--middle-left) .header__inline-menu {
.header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
margin-top: 1.05rem;
}
}
Expand Down Expand Up @@ -2849,6 +2853,7 @@ details-disclosure > details {
border-radius: var(--media-radius);
box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity));
z-index: -1;
pointer-events: none;
}

.global-media-settings--no-shadow {
Expand Down
1 change: 0 additions & 1 deletion assets/cart-notification.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ class CartNotification extends HTMLElement {

close() {
this.notification.classList.remove('active');

document.body.removeEventListener('click', this.onBodyClick);

removeTrapFocus(this.activeElement);
Expand Down
31 changes: 28 additions & 3 deletions assets/component-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,26 @@
height: 100%;
}

.card.card--horizontal {
--text-alignment: left;
--image-padding: 0rem;
flex-direction: row;
align-items: flex-start;
gap: 1.5rem;
}

.card--horizontal.ratio:before {
padding-bottom: 0;
}

.card--card.card--horizontal {
padding: 1.2rem;
}

.card--card.card--horizontal.card--text {
column-gap: 0;
}

.card--card {
height: 100%;
}
Expand Down Expand Up @@ -133,7 +153,7 @@
justify-self: flex-end;
}

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

Expand Down Expand Up @@ -233,8 +253,8 @@
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text > .card__content .card__heading,
.card--standard > .card__content .card__badge,
.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading,
.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;
Expand All @@ -255,6 +275,11 @@
display: none;
}

.card--horizontal .card__badge,
.card--horizontal.card--text .card__inner {
display: none;
}

.card--extend-height {
height: 100%;
}
Expand Down
18 changes: 11 additions & 7 deletions assets/component-cart-notification.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,17 @@
transform: translateY(-100%);
visibility: hidden;
width: 100%;
z-index: -1;
filter: drop-shadow(
var(--popup-shadow-horizontal-offset)
var(--popup-shadow-vertical-offset)
var(--popup-shadow-blur-radius)
rgba(var(--color-shadow), var(--popup-shadow-opacity))
);
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));
}

.cart-notification.focused {
box-shadow: 0 0 .2rem 0 rgba(var(--color-foreground), .3),
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.cart-notification:focus-visible {
box-shadow: 0 0 .2rem 0 rgba(var(--color-foreground), .3),
var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

@media screen and (min-width: 750px) {
Expand Down
136 changes: 136 additions & 0 deletions assets/component-complementary-products.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
.complementary-products__container {
display: flex;
flex-direction: column;
gap: 1.3rem;
}

product-recommendations:not(.is-accordion) .complementary-products__container {
margin-top: 1.5rem;
}

.complementary-products__container > details[open] {
padding-bottom: 1.5rem;
}

.complementary-slider {
margin-top: 0;
gap: 0;
}

.complementary-slide {
--shadow-padding-sides: calc((var(--shadow-horizontal-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
--shadow-padding-sides-negative: calc((var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
}

.complementary-slide > ul {
display: flex;
flex-direction: column;
gap: var(--grid-mobile-vertical-spacing);
}

.complementary-slide.complementary-slide--standard > ul {
gap: calc(var(--grid-mobile-vertical-spacing) + 8px);
}

@media screen and (min-width: 750px) {
.complementary-slide > ul {
gap: var(--grid-desktop-vertical-spacing);
}

.complementary-slide.complementary-slide--standard > ul {
gap: calc(var(--grid-desktop-vertical-spacing) + 8px);
}
}

.complementary-slide.grid__item {
width: 100%;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
padding-right: max(var(--focus-outline-padding), var(--shadow-padding-sides));
padding-left: max(var(--focus-outline-padding), var(--shadow-padding-sides-negative));
}

.complementary-slide .card-wrapper {
height: auto;
}

.complementary-products > .summary__title {
display: flex;
line-height: 1;
padding: 1.5rem 0;
}

.accordion + product-recommendations .accordion,
product-recommendations.is-accordion + .accordion {
margin-top: 0;
border-top: none;
}

.complementary-products > .summary__title .icon-accordion {
fill: rgb(var(--color-foreground));
height: calc(var(--font-heading-scale) * 2rem);
margin-right: calc(var(--font-heading-scale) * 1rem);
width: calc(var(--font-heading-scale) * 2rem);
}

.complementary-products__container .card--card .card__content,
.complementary-products__container .card--horizontal .card__information {
padding: 0;
}

.complementary-products__container .card__heading {
font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
.complementary-products__container .card__heading {
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
}

.complementary-products__container .card--horizontal .card__inner {
max-width: 20%;
}

@media screen and (min-width: 750px) and (max-width: 1200px){
.complementary-products__container .card--horizontal .card__inner {
max-width: 25%
}
}

.complementary-slide .card--text .card__content {
grid-template-rows: minmax(0,1fr) max-content auto;
}


.complementary-products__container .card--card.card--media > .card__content {
margin-top: 0;
}

.complementary-products__container .card--card .card__inner .card__media {
border-radius: calc(var(--corner-radius) - var(--border-width) - var(--image-padding));
}

.complementary-products__container .card--horizontal .quick-add {
margin: 1rem 0 0;
max-width: 20rem;
}

.complementary-products__container .quick-add__submit {
padding: 0.8rem 2rem;
}

.complementary-products__container .card--horizontal .quick-add,
.complementary-products__container .card__badge {
justify-self: var(--text-alignment);
}

.product--no-media .complementary-products__container .price {
text-align: var(--text-alignment);
}

@media screen and (min-width: 750px) {
.complementary-products__container .price--on-sale .price-item--regular {
font-size: 1.3rem;
}
}
1 change: 1 addition & 0 deletions assets/component-price.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
}

.price .price-item {
display: inline-block;
margin: 0 1rem 0 0;
}

Expand Down
Loading

0 comments on commit e2066e6

Please sign in to comment.