swap :not(list) with :not():not() (#311)

Lists inside of :not() selectors are not supported in Samsung Browser, but chaining :not():not() is support in all major browsers
Shopify · Sep 2, 2021 · 5fcf79f · 5fcf79f
1 parent 4a7cad3
commit 5fcf79f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1065,7 +1065,7 @@ summary::-webkit-details-marker {
   background-color: transparent;
 }
 
-.media > *:not(.zoom, .deferred-media__poster-button),
+.media > *:not(.zoom):not(.deferred-media__poster-button),
 .media model-viewer {
   display: block;
   max-width: 100%;

diff --git a/assets/collage.css b/assets/collage.css
@@ -82,7 +82,7 @@
     max-width: 100%;
   }
 
-  .collage-card:not(.collage-card--left, .collage-card--right) > * {
+  .collage-card:not(.collage-card--left):not(.collage-card--right) > * {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -191,12 +191,12 @@
     font-size: 3rem;
   }
 
-  .collage-card:not(.collage-card--left, .collage-card--right)
+  .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card__description {
     display: none;
   }
 
-  .collage-card:not(.collage-card--left, .collage-card--right)
+  .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card__arrow {
     display: inline-block;
   }
@@ -237,7 +237,7 @@
 
 @media screen and (max-width: 749px) {
   .collage--mobile
-    .collage-card:not(.collage-card--left, .collage-card--right)
+    .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card__image-wrapper {
     padding-bottom: 100%;
   }
@@ -255,10 +255,10 @@
     position: absolute;
   }
 
-  .collage-card:not(.collage-card--left, .collage-card--right)
+  .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card-spacing
     .collage-card__image-wrapper,
-  .collage-card:not(.collage-card--left, .collage-card--right)
+  .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card-spacing.collage-card__image-wrapper {
     padding-bottom: 0;
     flex: 0 auto;
@@ -289,7 +289,7 @@
     height: 100%;
   }
 
-  .collage-card:not(.collage-card--left, .collage-card--right)
+  .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card-spacing
     .collage-card__image {
     position: inherit;
@@ -348,7 +348,7 @@
     margin: 1.8rem 0 0;
   }
 
-  .collage-card:not(.collage-card--left, .collage-card--right)
+  .collage-card:not(.collage-card--left):not(.collage-card--right)
     .collage-card-spacing
     img {
     object-fit: contain;

diff --git a/assets/customer.css b/assets/customer.css
@@ -1,12 +1,12 @@
-.customer:not(.account, .order) {
+.customer:not(.account):not(.order) {
   margin: 6rem auto 9rem;
   max-width: 33.4rem;
   padding: 0 1.5rem;
   text-align: center;
 }
 
 @media screen and (min-width: 750px) {
-  .customer:not(.account, .order) {
+  .customer:not(.account):not(.order) {
     max-width: 47.8rem;
   }
 }