fix(colorpalette): update sizing related styles

telerik · Jan 8, 2025 · 955e490 · 955e490
1 parent 7e4897e
commit 955e490
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 40 deletions.
diff --git a/packages/default/scss/coloreditor/_layout.scss b/packages/default/scss/coloreditor/_layout.scss
@@ -108,24 +108,6 @@
         .k-colorpalette {
             align-self: center;
         }
-
-        .k-colorpalette-tile {
-            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
-            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
-        }
-    }
-
-    // ColorPalette sizes
-    @each $size, $size-props in $kendo-color-palette-sizes {
-        $_tile-width: map.get( $size-props, width );
-        $_tile-height: map.get( $size-props, height );
-
-        .k-coloreditor-#{$size} {
-            .k-colorpalette-tile {
-                width: $_tile-width;
-                height: $_tile-height;
-            }
-        }
     }
 
     // Footer

diff --git a/packages/default/scss/colorpalette/_layout.scss b/packages/default/scss/colorpalette/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
 
@@ -33,8 +34,6 @@
 
     // Tile
     .k-colorpalette-tile {
-        width: $kendo-color-palette-tile-width;
-        height: $kendo-color-palette-tile-height;
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
@@ -54,6 +53,19 @@
         }
     }
 
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
+
+        .k-colorpalette-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
 }
 
 

diff --git a/packages/fluent/scss/coloreditor/_layout.scss b/packages/fluent/scss/coloreditor/_layout.scss
@@ -112,24 +112,6 @@
             .k-colorpalette {
                 align-self: center;
             }
-
-            .k-colorpalette-tile {
-                width: var( --kendo-color-preview-width, $kendo-color-palette-tile-width );
-                height: var( --kendo-color-preview-height, $kendo-color-palette-tile-height );
-            }
-        }
-
-        // ColorPalette sizes
-        @each $size, $size-props in $kendo-color-palette-sizes {
-            $_tile-width: map.get( $size-props, width );
-            $_tile-height: map.get( $size-props, height );
-
-            .k-coloreditor-#{$size} {
-                .k-colorpalette-tile {
-                    width: $_tile-width;
-                    height: $_tile-height;
-                }
-            }
         }
 
         // Footer

diff --git a/packages/fluent/scss/colorpalette/_layout.scss b/packages/fluent/scss/colorpalette/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -39,8 +40,8 @@
     .k-colorpalette-tile {
         outline-width: var( --kendo-color-palette-tile-outline-width, #{$kendo-color-palette-tile-outline-width} );
         outline-style: var( --kendo-color-palette-tile-outline-style, #{$kendo-color-palette-tile-outline-style} );
-        width: var( --kendo-color-palette-tile-width, #{$kendo-color-palette-tile-width} );
-        height: var( --kendo-color-palette-tile-height, #{$kendo-color-palette-tile-height} );
+        // width: var( --kendo-color-palette-tile-width, #{$kendo-color-palette-tile-width} );
+        // height: var( --kendo-color-palette-tile-height, #{$kendo-color-palette-tile-height} );
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
@@ -60,4 +61,17 @@
         }
     }
 
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
+
+        .k-colorpalette-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
 }