A few small css changes

Shopify · Oct 16, 2023 · fbd31e2 · fbd31e2
1 parent df6efbe
commit fbd31e2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -306,6 +306,19 @@
   align-items: flex-start;
 }
 
+.facets-layout-grid .visual-display-parent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0;
+  height: 100%;
+  font-size: 1.3rem;
+}
+
+.facets-layout-grid .visual-display-parent--thumbnail {
+  padding-bottom: 0.8rem;
+}
+
 .facets-layout-grid .visual-display--style-thumbnail {
   --visual-display__size: 100%;
 }
@@ -325,7 +338,7 @@
 }
 
 /* Hover, active, and focus states */
-:where(.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible)) {
+:is(.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible)) {
   color: rgba(var(--color-foreground), 1);
 }
 
@@ -398,12 +411,6 @@
   }
 }
 
-.visual-display-parent.facets__label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-}
-
 .facet-checkbox--disabled,
 .mobile-facets__label--disabled {
   opacity: 0.4;
@@ -981,11 +988,6 @@ input.mobile-facets__checkbox {
   padding-right: 1.5rem;
 }
 
-.visual-display-parent {
-  padding: 0;
-  height: 100%;
-}
-
 .product-count {
   align-self: center;
   position: relative;

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
@@ -2,6 +2,7 @@
   --visual-display__size: min(2.4rem, 100%);
   position: relative;
   width: var(--visual-display__size);
+  max-width: 100%;
   border: 0.1rem solid rgba(var(--color-foreground), 0.2);
   aspect-ratio: 1/1;
 }
@@ -19,9 +20,6 @@
 
 .visual-display--style-thumbnail {
   --visual-display__size: min(9rem, 100%);
-
-  border-radius: var(--buttons-radius);
-  overflow: hidden;
 }
 
 .visual-display-parent .visual-display--style-swatch,
@@ -34,15 +32,16 @@
 }
 
 /* Hover, active, and focus states */
-:where(
+:is(
     .visual-display-parent:hover .visual-display--style-swatch,
     .visual-display-parent.active .visual-display--style-swatch,
     .visual-display-parent:has(:focus-visible) .visual-display--style-swatch,
     .visual-display-parent--thumbnail:hover,
     .visual-display-parent--thumbnail.active,
     .visual-display-parent--thumbnail:has(:focus-visible)
   ) {
-  outline: 0 solid rgb(var(--color-foreground));
+  outline-style: solid;
+  outline-color: rgb(var(--color-foreground));
 }
 
 /* Active state */