@progress/kendo-theme-default 4.41.3-dev.0 → 4.42.0-dev.0

package/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/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/scss/combobox/_theme.scss

@@ -88,7 +88,7 @@
         }
     }
 
-    //Universal rendering
+    // Universal rendering
     .k-combobox {
         &.k-state-hover {
             .k-dropdown-wrap {

package/scss/common/_loading.scss

@@ -124,7 +124,7 @@
         }
     }
 
-    @keyframes k-loading-animation  {
+    @keyframes k-loading-animation {
         0% {
             transform: rotate(0deg);
         }

package/scss/core/_color-system.scss

@@ -1,15 +1,15 @@
 // Color constants
-$black: #000000;
-$white: #ffffff;
+$black: #000000; // stylelint-disable-line scss/dollar-variable-default
+$white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
 
-$rgba-transparent: rgba( 0, 0, 0, 0 );
+$rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
-$gradient-transparent-to-black: rgba( black, 0), black;
-$gradient-transparent-to-white: rgba( white, 0), white;
-$gradient-black-to-transparent: black, rgba( black, 0);
-$gradient-white-to-transparent: white, rgba( white, 0);
+$gradient-transparent-to-black: rgba( black, 0), black; // stylelint-disable-line scss/dollar-variable-default
+$gradient-transparent-to-white: rgba( white, 0), white; // stylelint-disable-line scss/dollar-variable-default
+$gradient-black-to-transparent: black, rgba( black, 0); // stylelint-disable-line scss/dollar-variable-default
+$gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-line scss/dollar-variable-default
 
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
+$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
 
 
 $palettes: (

package/scss/core/functions/_colors.scss

@@ -10,6 +10,7 @@
 //  }
 //
 //  This lookup table is needed since there is no `pow` in SASS.
+// stylelint-disable-next-line scss/dollar-variable-default
 $linear-channel-values: (
     0
     .0003035269835488375

package/scss/core/functions/_math.scss

@@ -9,11 +9,11 @@
 
     @if $n >= 0 {
         @for $i from 1 through $n {
-        $ret: $ret * $x;
+            $ret: $ret * $x;
         }
     } @else {
         @for $i from $n to 0 {
-        $ret: $ret / $x;
+            $ret: $ret / $x;
         }
     }
 

package/scss/core/functions/_misc.scss

@@ -25,7 +25,7 @@ $svg-escaped-characters: (
             @if str-index($string, "url(") == 1 {
                 $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
             } @else {
-                    $string: str-replace($string, $char, $encoded);
+                $string: str-replace($string, $char, $encoded);
             }
         }
     }

package/scss/core/mixins/_gradients.scss

@@ -1,7 +1,7 @@
 @mixin linear-gradient( $gradient: null ) {
     @if $gradient and $enable-gradients {
         @if $gradient == none {
-            background-image: none
+            background-image: none;
         }
         @else {
             background-image: linear-gradient( $gradient );
@@ -13,11 +13,12 @@
     background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }
 
-@mixin checkerboard-gradient ( $primary-color: white, $secondary-color: rgba(0, 0, 0, 0.09), $size: 10px ) {
+@mixin checkerboard-gradient( $primary-color: white, $secondary-color: rgba(0, 0, 0, .09), $size: 10px ) {
     $position: calc(#{$size} / 2);
-    background: linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
-                linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
-                $primary-color;
+    background:
+        linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
+        linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
+        $primary-color;
     background-repeat: repeat, repeat;
     background-position: 0px 0px, $position $position;
     transform-origin: 0 0 0;

package/scss/core/mixins/_hide-scrollbar.scss

@@ -1,5 +1,5 @@
 // Infinite calendar and timepicker
-@mixin hide-scrollbar($dir: 'right', $max-scrollbar: 100px) {
+@mixin hide-scrollbar($dir: "right", $max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
     $scrollbar-size: 17px;
     $margin: -$max-scrollbar - $scrollbar-size;
@@ -7,7 +7,7 @@
     padding-right: $max-scrollbar;
     padding-left: $max-scrollbar;
 
-    @if ($dir == 'right') {
+    @if ($dir == "right") {
         margin-left: -$max-scrollbar;
         margin-right: $margin;
     } @else {

package/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/scss/core/mixins/_typography.scss

@@ -14,4 +14,4 @@
     @if $letter-spacing {
         letter-spacing: $letter-spacing;
     }
-}
+}

package/scss/datetime/_layout.scss

@@ -454,7 +454,7 @@
         .k-rtl &,
         &.k-rtl,
         [dir="rtl"] &,
-        &[dir="rtl"]  {
+        &[dir="rtl"] {
             @include hide-scrollbar("left");
         }
     }
@@ -487,7 +487,7 @@
         }
 
         &::before { top: 0; }
-        &::after { bottom: 0;}
+        &::after { bottom: 0; }
     }
 
     .k-time-list .k-item {

package/scss/datetime/_theme.scss

@@ -222,7 +222,7 @@
         }
     }
 
-    //Universal rendering
+    // Universal rendering
     .k-datepicker {
         &.k-state-hover {
             .k-picker-wrap {

package/scss/datetime/_variables.scss

@@ -1,5 +1,5 @@
 // DateTime
-$time-highlight-size: 1px;
+$time-highlight-size: 1px !default;
 
 $time-list-title-text: $subtle-text !default;
 $time-list-title-focus-text: $component-text !default;
@@ -10,7 +10,7 @@ $time-list-highlight-border: $component-border !default;
 $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
 
 $time-header-padding: null !default;
-$timepicker-header-height: 2em;
+$timepicker-header-height: 2em !default;
 
 $time-list-padding: $padding-y * 5 !default;
 $time-list-focus-size: 2px !default;

package/scss/drawer/_layout.scss

@@ -2,8 +2,7 @@
 
     .k-drawer-container {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         align-items: flex-start;
     }
     kendo-drawer.k-drawer,
@@ -130,8 +129,7 @@
         font-size: $drawer-item-font-size;
         line-height: $drawer-item-line-height;
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         cursor: pointer;
 
         > .k-drawer-link {
@@ -139,8 +137,7 @@
             padding: $drawer-item-padding-y $drawer-item-padding-x;
             color: inherit;
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
+            flex-flow: row nowrap;
             flex: 1 0 auto;
         }
 

package/scss/dropdowngrid/_layout.scss

@@ -26,7 +26,7 @@
 
     // Header
     .k-dropdowngrid-popup .k-grid-header {
-        border-width: 0 0 1px 0;
+        border-width: 0 0 1px;
         border-style: solid;
         border-color: inherit;
         font-size: $grid-header-font-size;
@@ -157,7 +157,7 @@
     // Footer
     .k-dropdowngrid-popup .k-footer {
         padding: $grid-footer-padding-y $grid-footer-padding-x;
-        border-width: 1px 0 0 0;
+        border-width: 1px 0 0;
         border-style: solid;
         text-align: left;
         white-space: nowrap;

package/scss/editor/_layout.scss

@@ -62,6 +62,11 @@
         padding: 0;
     }
 
+    // Resizable editor
+    .k-editor-resizable {
+        resize: both;
+        overflow: auto;
+    }
 
     // Toolbar
     .k-editor > .k-toolbar {
@@ -265,7 +270,7 @@
         .k-search-options {
             display: flex;
             flex-direction: column;
-            padding: 10px 0 40px 0;
+            padding: 10px 0 40px;
 
             > span {
                 padding-bottom: $padding-y;
@@ -308,7 +313,7 @@
         .k-edit-buttons {}
     }
 
-    //View HTML dialog using flex to fit child textarea
+    // View HTML dialog using flex to fit child textarea
     .k-editor-dialog.k-viewhtml-dialog {
         display: flex;
         flex-direction: column;
@@ -402,8 +407,7 @@
         // Tiles
         .k-tiles {
             display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
+            flex-flow: row wrap;
             height: 390px;
             max-height: 50vh;
             margin: 0 0 $spacer-y 0;

package/scss/editor/_variables.scss

@@ -12,4 +12,4 @@ $editor-selected-bg: $primary !default;
 
 $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
-$editor-export-tool-icon-margin-x: .25em;
+$editor-export-tool-icon-margin-x: .25em !default;

package/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/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/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,41 +28,38 @@ $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: () !default;
-// sass-lint:disable indentation
-$fab-sizes: map-merge((
+$fab-sizes: (
     sm: map-get( $spacing, 4 ),
     md: map-get( $spacing, 8 ),
     lg: map-get( $spacing, 16 )
-), $fab-sizes);
-// sass-lint:enable indentation
+) !default;
 
-$fab-theme-colors: () !default;
-$fab-theme-colors: map-merge( $fab-theme-colors, $theme-colors );
+$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/scss/filemanager/_layout.scss

@@ -201,8 +201,7 @@
             margin: $filemanager-preview-spacing 0 0;
             width: 100%;
             flex: 1 1 100%;
-            flex-direction: row;
-            flex-wrap: nowrap;
+            flex-flow: row nowrap;
         }
     }