feat(colorpicker): add styles for sizingand adaptive rendering

telerik · Dec 20, 2024 · dc280f0 · dc280f0
1 parent d9fe0f7
commit dc280f0
Show file tree

Hide file tree

Showing 6 changed files with 363 additions and 21 deletions.
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
@@ -338,6 +338,26 @@
             display: flex;
             flex-flow: column nowrap;
         }
+
+        .k-coloreditor {
+            width: 100%;
+            border: 0;
+
+            .k-coloreditor-header {
+                padding: 0;
+            }
+
+            .k-coloreditor-views {
+                padding-inline: 0;
+            }
+        }
+
+        .k-colorgradient-canvas {
+            .k-hsv-gradient {
+                aspect-ratio: 1;
+                height: 100%;
+            }
+        }
     }
 
 

diff --git a/packages/default/scss/coloreditor/_layout.scss b/packages/default/scss/coloreditor/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
@@ -7,7 +8,6 @@
     // ColorEditor/FlatColorPicker
     .k-coloreditor {
         @include border-radius( $kendo-color-editor-border-radius );
-        min-width: $kendo-color-editor-min-width;
         border-width: $kendo-color-editor-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -40,13 +40,42 @@
         flex-flow: column nowrap;
         align-items: stretch;
         justify-content: center;
-        gap: $kendo-color-editor-preview-gap;
         position: relative;
         z-index: 1;
     }
-    .k-coloreditor-preview .k-color-preview {
-        width: $kendo-color-editor-color-preview-width;
-        height: $kendo-color-editor-color-preview-height;
+
+    // ColorPreview sizes
+    @each $size, $size-props in $kendo-color-editor-sizes {
+        $_min-width: map.get( $size-props, min-width );
+        $_width: map.get( $size-props, width );
+        $_height: map.get( $size-props, height );
+        $_header-padding-x: map.get( $size-props, header-padding-x );
+        $_header-padding-y: map.get( $size-props, header-padding-y );
+        $_views-padding-x: map.get( $size-props, views-padding-x );
+        $_views-padding-y: map.get( $size-props, views-padding-y );
+        $_preview-gap: map.get( $size-props, preview-gap );
+
+        .k-coloreditor-#{$size} {
+            .k-coloreditor-preview {
+                gap: $_preview-gap;
+            }
+        }
+
+        .k-coloreditor-preview .k-color-preview-#{$size} {
+            width: $_width;
+            height: $_height;
+        }
+
+        .k-coloreditor-#{$size} {
+            .k-coloreditor-header {
+                padding: $_header-padding-y $_header-padding-x 0;
+            }
+
+            .k-coloreditor-views {
+                padding-block: $_views-padding-y;
+                padding-inline: $_views-padding-x;
+            }
+        }
     }
 
     // Views
@@ -71,10 +100,18 @@
         .k-colorpalette {
             align-self: center;
         }
+    }
+
+     // ColorPreview 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-tile {
-            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
-            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
+        .k-coloreditor-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
         }
     }
 
@@ -83,6 +120,12 @@
         margin: 0;
     }
 
+    .k-actionsheet-content {
+        .k-coloreditor {
+            // min-width: calc($kendo-color-editor-lg-min-width - calc( 2 * #{$kendo-color-editor-lg-views-padding-x} ));
+
+        }
+    }
 }
 
 

diff --git a/packages/default/scss/coloreditor/_variables.scss b/packages/default/scss/coloreditor/_variables.scss
@@ -9,6 +9,15 @@ $kendo-color-editor-spacer: k-spacing(3) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 272px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 252px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 362px !default;
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -50,7 +59,34 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
-$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 1.5 ) !default;
+$kendo-color-editor-header-actions-gap: k-spacing(2) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The spacing between the small ColorEditor header actions.
+/// @group color-editor
+// $kendo-color-editor-sm-header-actions-gap: $kendo-color-editor-header-actions-gap !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The spacing between the medium ColorEditor header actions.
+/// @group color-editor
+// $kendo-color-editor-md-header-actions-gap: $kendo-color-editor-header-actions-gap !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
+/// The spacing between the large ColorEditor header actions.
+/// @group color-editor
+// $kendo-color-editor-lg-header-actions-gap: k-spacing(4.5) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -61,6 +97,35 @@ $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(0.5) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-gap: k-spacing(1) !default;
+
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-width: 44px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-height: 16px !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
@@ -71,6 +136,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
@@ -81,3 +173,39 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
+
+/// The size map of the ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        width: $kendo-color-editor-color-preview-sm-width,
+        height: $kendo-color-editor-color-preview-sm-height,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        width: $kendo-color-editor-color-preview-md-width,
+        height: $kendo-color-editor-color-preview-md-height,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        width: $kendo-color-editor-color-preview-lg-width,
+        height: $kendo-color-editor-color-preview-lg-height,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap
+    )
+) !default;
diff --git a/packages/default/scss/colorgradient/_layout.scss b/packages/default/scss/colorgradient/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
@@ -7,7 +8,6 @@
     // ColorGradient
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
-        width: $kendo-color-gradient-width;
         padding-block: $kendo-color-gradient-padding-y;
         padding-inline: $kendo-color-gradient-padding-x;
         border-style: solid;
@@ -20,7 +20,6 @@
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: $kendo-color-gradient-gap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -44,7 +43,6 @@
 
         .k-hsv-gradient {
             @include border-radius( $kendo-color-gradient-canvas-border-radius );
-            height: $kendo-color-gradient-canvas-rectangle-height;
         }
 
         .k-hsv-draghandle {
@@ -60,7 +58,6 @@
         .k-hsv-controls {
             position: relative;
             flex-shrink: 0;
-            gap: $kendo-color-gradient-canvas-gap;
         }
     }
 
@@ -78,10 +75,8 @@
 
     // Sliders
     .k-colorgradient-slider {
-
         &.k-slider-vertical {
             width: $kendo-color-gradient-slider-track-size;
-            height: $kendo-color-gradient-slider-vertical-size;
             flex: 0 0 $kendo-color-gradient-slider-track-size;
         }
         &.k-slider-vertical .k-slider-track {
@@ -124,6 +119,44 @@
         }
     }
 
+    // ColorGradient sizes
+    @each $size, $size-props in $kendo-color-gradient-sizes {
+        $_width: map.get( $size-props, width );
+        $_gap: map.get( $size-props, gap );
+        $_vertical-slider-height: map.get( $size-props, height );
+        $_rectangle-height: map.get( $size-props, rectangle-height );
+        $_input-width: map.get( $size-props, input-width );
+        $_canvas-gap: map.get( $size-props, canvas-gap );
+
+        .k-colorgradient-#{$size} {
+            width: $_width;
+            gap: $_gap;
+
+            .k-colorgradient-inputs {
+                .k-numerictextbox {
+                    width: $_input-width;
+                }
+            }
+
+            .k-colorgradient-canvas {
+                gap: $_canvas-gap;
+
+                .k-hsv-gradient {
+                    height: $_rectangle-height;
+                }
+
+                .k-slider-vertical {
+                    height: $_vertical-slider-height;
+                }
+
+                .k-hsv-controls {
+                    gap: $_canvas-gap;
+                }
+            }
+        }
+    }
+
+
     // Inputs
     .k-colorgradient-inputs {
         gap: $kendo-color-gradient-input-gap;
@@ -136,10 +169,6 @@
             gap: $kendo-color-gradient-input-label-gap;
         }
 
-        .k-numerictextbox {
-            width: $kendo-color-gradient-input-width;
-        }
-
         .k-input-inner {
             padding-inline-start: 2px;
             padding-inline-end: 2px;
@@ -188,7 +217,6 @@
         overflow: visible;
         pointer-events: none;
     }
-
 }