fix: styling improvement for swatch (image) filters

intershop · Feb 14, 2025 · fd63a8b · fd63a8b
1 parent 7f7299b
commit fd63a8b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss
@@ -308,7 +308,7 @@ input {
   padding: 0 !important;
   margin: 1px;
   border: 1px solid transparent;
-  border-radius: 50%;
+  border-radius: $swatch-image-border-radius;
 }
 
 .filter-swatch {
@@ -319,7 +319,9 @@ input {
     display: inline-block;
     width: $swatch-image-diameter;
     height: $swatch-image-diameter;
-    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border-radius: $swatch-image-border-radius;
 
     &.filter-color-bright {
       border: 1px solid $border-color-light;

diff --git a/src/styles/themes/b2b/variables.scss b/src/styles/themes/b2b/variables.scss
@@ -125,6 +125,7 @@ $font-size-sub-menu-item-mobile: $font-size-corporate; // ~14px
 
 // filter
 $swatch-image-diameter: 28px;
+$swatch-image-border-radius: 50%;
 $swatch-image-padding-to-border: 2px;
 
 // toasts

diff --git a/src/styles/themes/b2c/variables.scss b/src/styles/themes/b2c/variables.scss
@@ -125,6 +125,7 @@ $font-size-sub-menu-item-mobile: $font-size-corporate; // ~14px
 
 // filter
 $swatch-image-diameter: 28px;
+$swatch-image-border-radius: 50%;
 $swatch-image-padding-to-border: 2px;
 
 // toasts