@progress/kendo-theme-classic 4.41.3-dev.1 → 4.42.0

package/modules/@progress/kendo-theme-default/scss/colorpicker/_theme.scss

@@ -26,7 +26,7 @@
 
         // Hover state
         > :hover,
-        .k-state-hover {
+        > .k-state-hover {
             @include fill(
                 $colorpicker-hovered-text,
                 $colorpicker-hovered-bg,
@@ -38,7 +38,9 @@
         &.k-state-active {}
 
         // Focus state
-        .k-state-focused {
+        .k-state-focused,
+        .k-state-focus,
+        .k-focus {
             @include fill(
                 $colorpicker-focused-text,
                 $colorpicker-focused-bg,
@@ -64,128 +66,3 @@
     }
 
 }
-
-
-
-
-@include exports( "flatcolorpicker/theme" ) {
-
-    .k-flatcolorpicker {
-        @include fill(
-            $component-text,
-            $component-bg,
-            $component-border
-        );
-
-        .k-color-value {
-            @include fill(
-                $input-text,
-                $input-bg,
-                $input-border
-            );
-        }
-
-        .k-hsv-gradient {
-            background: linear-gradient( to bottom, $gradient-transparent-to-black ), linear-gradient( to right, $gradient-white-to-transparent );
-        }
-
-
-        // Sliders
-        .k-slider {
-
-            // Draghandle
-            .k-draghandle {
-                box-shadow: $colorpicker-draghandle-shadow;
-                // sass-lint:enable no-color-literals no-color-keywords
-                background-color: transparent;
-            }
-            .k-draghandle:hover,
-            .k-draghandle:focus {
-                // sass-lint:disable no-color-literals no-color-keywords
-                border-color: white;
-                box-shadow: $colorpicker-draghandle-focused-shadow;
-                // sass-lint:enable no-color-literals no-color-keywords
-                background-color: transparent;
-            }
-
-            &.k-state-focused {
-                .k-draghandle {
-                    box-shadow: $colorpicker-draghandle-focused-shadow;
-                }
-            }
-        }
-
-
-        // Slider type
-        .k-hue-slider {
-            &.k-slider-horizontal {
-                .k-slider-track {
-                    background: linear-gradient( to right, $gradient-rainbow );
-                }
-            }
-            &.k-slider-vertical {
-                .k-slider-track {
-                    background: linear-gradient( to top, $gradient-rainbow );
-                }
-            }
-        }
-        .k-alpha-slider {
-            .k-slider-track {
-                background: url(map-get($data-uris, "alpha-slider-bgr.png")) center;
-            }
-        }
-
-
-        .k-draghandle {
-            border-color: rgba(255, 255, 255, .8);
-            box-shadow: $colorpicker-draghandle-shadow;
-
-            &.k-state-focus {
-                box-shadow: $colorpicker-draghandle-focused-shadow;
-            }
-        }
-
-        // Color contrast
-        .k-color-contrast .k-separator {
-            border-color: $colorpicker-border;
-        }
-
-    }
-
-
-    .k-rtl,
-    [dir="rtl"] {
-        .k-flatcolorpicker {
-
-            .k-hue-slider.k-slider-horizontal .k-slider-track {
-                background: linear-gradient( to left, $gradient-rainbow );
-            }
-
-            .k-alpha-slider .k-slider-track {
-                background: url(map-get($data-uris, "alpha-slider-bgr-reversed.png")) center;
-            }
-
-        }
-    }
-
-}
-
-
-
-
-@include exports( "colorpalette/theme" ) {
-
-    .k-colorpalette {
-        .k-item:hover,
-        .k-item.k-state-hover {
-            box-shadow: $colorpalette-hovered-shadow;
-        }
-        .k-item.k-state-selected,
-        .k-item.k-state-selected:hover,
-        .k-item.k-state-focused,
-        .k-item:focus {
-            box-shadow: $colorpalette-focused-shadow;
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/colorpicker/_variables.scss

@@ -1,19 +1,7 @@
 // Colorpicker
-$colorpicker-rect-padding: $padding-x !default;
-$colorpicker-margin: 8px !default;
-$colorpicker-width: 310px !default;
-$colorpicker-border-width: 1px !default;
 $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
-$colorpicker-draghandle-width: 14px !default;
-$colorpicker-draghandle-height: 14px !default;
-$colorpicker-slider-track-size: 10px !default;
-$colorpicker-slider-border-radius: 10px !default;
-$colorpicker-hex-input-width: 65px !default;
-$colorpicker-input-width: 48px !default;
-$colorpicker-input-padding-x: $input-padding-y !default;
-$colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 1px !default;
 
@@ -32,9 +20,3 @@ $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: null !default;
 $colorpicker-focused-gradient: null !default;
 $colorpicker-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
-$colorpicker-draghandle-focused-shadow: 0 1px 4px black !default;
-
-$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
-$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

package/modules/@progress/kendo-theme-default/scss/core/mixins/_index.scss

@@ -6,8 +6,8 @@
 // Utils
 @import "_border-radius.scss";
 @import "_box-shadow.scss";
-@import "_decoration.scss";
 @import "_disabled.scss";
+@import "_decoration.scss";
 @import "_gradients.scss";
 @import "_typography.scss";
 @import "_hide-scrollbar.scss";

package/modules/@progress/kendo-theme-default/scss/editor/_layout.scss

@@ -62,6 +62,11 @@
         padding: 0;
     }
 
+    // Resizable editor
+    .k-editor-resizable {
+        resize: both;
+        overflow: auto;
+    }
 
     // Toolbar
     .k-editor > .k-toolbar {

package/modules/@progress/kendo-theme-default/scss/fab/_layout.scss

@@ -149,6 +149,8 @@
     }
 
     .k-fab-item-icon {
+        width: $fab-item-icon-width;
+        height: $fab-item-icon-height;
         padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
         border-width: $fab-item-icon-border-width;
         border-radius: $fab-item-icon-border-radius;

package/modules/@progress/kendo-theme-default/scss/fab/_theme.scss

@@ -1,12 +1,11 @@
 @include exports( "fab/theme" ) {
-    // FAB
-    .k-fab {
-        @include box-shadow($fab-shadow);
-    }
 
     // Normal state
     @each $name, $color in $fab-theme-colors {
         .k-fab-#{$name} {
+            @include box-shadow($fab-shadow);
+            outline: $fab-border-width solid $color;
+            outline-offset: -$fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -24,10 +23,14 @@
     }
 
     // Focus state
-    .k-fab.k-state-focus,
-    .k-fab.k-state-focused,
-    .k-fab:focus {
-        @include box-shadow($fab-focus-shadow);
+    @each $name, $color in $fab-theme-colors {
+        .k-fab-#{$name}.k-state-focus,
+        .k-fab-#{$name}.k-state-focused,
+        .k-fab-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 2px;
+            outline-color: rgba( $color, .3 );
+        }
     }
 
     // Active state
@@ -35,23 +38,20 @@
         .k-state-active.k-fab-#{$name},
         .k-state-selected.k-fab-#{$name},
         .k-fab-#{$name}:active {
-            border-color: try-shade( $color, 1);
-            background-color: try-shade( $color, 1);
-            box-shadow: $fab-shadow, 0px 3px 4px rgba($color, .4);
+            @include box-shadow($fab-active-shadow);
+            border-color: try-shade( $color, 1.5);
+            background-color: try-shade( $color, 1.5);
         }
     }
 
     // Disabled state
-    .k-fab.k-state-disabled,
-    .k-fab:disabled {
-        @include box-shadow($fab-disabled-shadow);
-        opacity: 1;
-    }
-
     @each $name, $color in $fab-theme-colors {
         .k-state-disabled.k-fab-#{$name},
         .k-fab-#{$name}:disabled {
-            background-color: tint( $color, 5 );
+            @include box-shadow($fab-disabled-shadow);
+            background-color: try-tint( $color, 5 );
+            color: try-tint( contrast-wcag( $color ), 5 );
+            opacity: 1;
         }
     }
 
@@ -63,6 +63,7 @@
             $fab-item-border
         );
         @include box-shadow($fab-item-shadow);
+
     }
     .k-fab-item-icon {
         @include fill(
@@ -71,6 +72,8 @@
             $fab-item-icon-border
         );
         @include box-shadow($fab-item-shadow);
+        outline: $fab-border-width solid rgba(0, 0, 0, .08);
+        outline-offset: -$fab-border-width;
     }
 
     // Hover state
@@ -88,15 +91,17 @@
     .k-fab-item.k-state-focus .k-fab-item-icon,
     .k-fab-item.k-state-focused .k-fab-item-text,
     .k-fab-item.k-state-focused .k-fab-item-icon {
-        @include box-shadow($fab-item-focus-shadow);
+        outline-style: solid;
+        outline-width: 2px;
+        outline-color: rgba(0, 0, 0, .08);
     }
 
     // Active state
     .k-fab-item.k-state-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
+        @include box-shadow($fab-item-active-shadow);
         border-color: try-shade( $fab-item-icon-border, 1);
         background-color: try-shade( $fab-item-icon-bg, 1);
-        box-shadow: $fab-shadow, 0px 3px 4px rgba($fab-item-icon-bg, .4);
     }
 
     // Disabled state
@@ -106,21 +111,9 @@
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            color: tint( $fab-item-text, 6 );
             @include box-shadow($fab-item-disabled-shadow);
-        }
-    }
-
-    // Disabled + Focus state
-    .k-fab-item:focus,
-    .k-fab-item.k-state-focus,
-    .k-fab-item.k-state-focused {
-        &:disabled,
-        &.k-state-disabled {
-            .k-fab-item-text,
-            .k-fab-item-icon {
-                @include box-shadow($fab-item-disabled-focus-shadow);
-            }
+            background-color: try-tint( $fab-item-bg, 5 );
+            color: try-tint( $fab-item-text, 5 );
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/fab/_variables.scss

@@ -1,8 +1,8 @@
 // Floating Action Button
 $fab-padding-x: map-get( $spacing, 4 ) !default;
 $fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 0px !default;
-$fab-border-radius: $border-radius * 2 !default;
+$fab-border-width: 1px !default;
+$fab-border-radius: $border-radius !default;
 $fab-font-family: $font-family !default;
 $fab-font-size: $font-size !default;
 $fab-line-height: $line-height !default;
@@ -18,7 +18,7 @@ $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
 
 $fab-icon-width: 20px !default;
 $fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) !default;
+$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
 
 $fab-items-padding-x: 0px !default;
 $fab-items-padding-y: map-get( $spacing, 4 ) !default;
@@ -28,12 +28,14 @@ $fab-item-text-padding-y: $fab-item-text-padding-x !default;
 $fab-item-text-border-width: 1px !default;
 $fab-item-text-border-radius: 2px !default;
 $fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 1 !default;
+$fab-item-text-line-height: 1.2 !default;
 
 $fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
 $fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
 $fab-item-icon-border-width: 0 !default;
 $fab-item-icon-border-radius: 50% !default;
+$fab-item-icon-width: 20px !default;
+$fab-item-icon-height: $fab-item-icon-width !default;
 
 $fab-sizes: (
     sm: map-get( $spacing, 4 ),
@@ -44,21 +46,20 @@ $fab-sizes: (
 $fab-theme-colors: $theme-colors !default;
 
 $fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
-$fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
+$fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$fab-active-shadow: null !default;
 
 $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: contrast-wcag( $light ) !default;
-$fab-item-icon-bg: $light !default;
-$fab-item-icon-border: $light !default;
+$fab-item-icon-text: $button-text !default;
+$fab-item-icon-bg: $button-bg !default;
+$fab-item-icon-border: $button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
-$fab-item-focus-shadow: $fab-focus-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
+$fab-item-active-shadow: $fab-active-shadow !default;
 
 $fab-border-width-sm: $fab-border-width !default;
 $fab-line-height-sm: $fab-line-height !default;

package/modules/@progress/kendo-theme-default/scss/icons/_layout.scss

@@ -642,6 +642,7 @@
     .k-i-justify-between-vertical::before { content: "\e552"; }
     .k-i-justify-content-around-alt::before { content: "\e553"; }
     .k-i-justify-around-vertical::before { content: "\e553"; }
+    .k-i-color-canvas::before { content: "\e554"; }
     .k-i-file-wrench::before { content: "\e600"; }
     .k-i-page-properties::before { content: "\e600"; }
     .k-i-bold::before { content: "\e601"; }