@progress/kendo-theme-default 5.4.2-dev.3 → 5.4.2-dev.6

package/scss/core/mixins/_index.scss

@@ -13,5 +13,3 @@
 @import "_typography.scss";
 @import "_hide-scrollbar.scss";
 
-// Other
-@import "_input-ripple.scss";

package/scss/drawer/_layout.scss

@@ -11,6 +11,7 @@
     }
     .k-drawer {
         height: 100%;
+        max-width: 100%;
         border-width: 0;
         border-style: solid;
         box-sizing: border-box;
@@ -163,6 +164,20 @@
             padding: 0 $drawer-item-padding-x;
             display: inline-block;
             white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-drawer-toggle {
+            margin-inline-start: auto;
+            cursor: pointer;
+        }
+
+        // Hierarchy items
+        @for $i from 1 through $drawer-item-level-count {
+            &.k-level-#{$i} {
+                padding-inline-start: ( $drawer-item-level-padding-x * $i );
+            }
         }
     }
     .k-drawer-separator {

package/scss/drawer/_variables.scss

@@ -8,6 +8,9 @@ $drawer-font-size: $font-size !default;
 $drawer-line-height: $line-height !default;
 $drawer-content-padding-x: $padding-x !default;
 $drawer-content-padding-y: $padding-y !default;
+$drawer-item-level-padding-x: map-get( $spacing, 4 ) !default;
+
+$drawer-item-level-count: 5 !default;
 
 $drawer-scrollbar-width: 7px !default;
 $drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;

package/scss/input/_layout.scss

@@ -338,28 +338,16 @@
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
-        @include border-radius( 0 !important ); // sass-lint:disable-line no-important
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $kendo-input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
         background-image: none !important; // sass-lint:disable-line no-important
-
-        &:focus,
-        &.k-focus {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
-        &:focus-within {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
     }
 
     .k-input-outline {
         background: none !important; // sass-lint:disable-line no-important
     }
 
-    .k-picker.k-picker-flat {
-        @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-    }
-
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {

package/scss/input/_theme.scss

@@ -1,7 +1,7 @@
 @include exports( "input/theme" ) {
 
     // Solid input
-    .k-input {
+    .k-input-solid {
         @include fill(
             $kendo-input-text,
             $kendo-input-bg,
@@ -38,7 +38,7 @@
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -55,7 +55,7 @@
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -63,10 +63,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
@@ -74,7 +74,7 @@
 
 
     // Solid picker
-    .k-picker {
+    .k-picker-solid {
         @include fill(
             $kendo-picker-text,
             $kendo-picker-bg,
@@ -115,7 +115,7 @@
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -148,7 +148,8 @@
         }
     }
 
-    // Outline
+
+    // Outline input
     .k-input-outline {
         @include fill (
             $kendo-input-outline-text,
@@ -169,6 +170,7 @@
            }
         }
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -178,6 +180,7 @@
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -187,12 +190,33 @@
              );
             @include box-shadow ( $kendo-input-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-focus-shadow );
+        }
+
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
+        }
 
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -200,15 +224,17 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
     }
 
+
+    // Outline picker
     .k-picker-outline {
         @include fill (
             $kendo-picker-outline-text,
@@ -216,6 +242,7 @@
             $kendo-picker-outline-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -225,6 +252,7 @@
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -234,6 +262,14 @@
             );
             @include box-shadow ( $kendo-picker-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -246,11 +282,24 @@
             );
         }
 
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -258,15 +307,16 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
     }
 
-    // Flat
+
+    // Flat input
     .k-input-flat {
         @include fill (
             $kendo-input-flat-text,
@@ -274,6 +324,17 @@
             $kendo-input-flat-border
         );
 
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-flat-hover-text,
+                $kendo-input-flat-hover-bg,
+                $kendo-input-flat-hover-border
+            );
+        }
+
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -281,6 +342,28 @@
                 $kendo-input-flat-focus-bg,
                 $kendo-input-flat-focus-border
             );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+        &:focus-within {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
         }
 
         // Invalid
@@ -303,6 +386,8 @@
         }
     }
 
+
+    // Flat picker
     .k-picker-flat {
         @include fill (
             $kendo-picker-flat-text,
@@ -310,6 +395,7 @@
             $kendo-picker-flat-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -319,6 +405,7 @@
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -328,6 +415,14 @@
             );
             @include box-shadow( $kendo-picker-flat-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -340,6 +435,19 @@
             );
         }
 
+        // Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,

package/scss/input/_variables.scss

@@ -78,7 +78,7 @@ $kendo-input-disabled-gradient: null !default;
 $kendo-input-disabled-shadow: null !default;
 
 $kendo-input-outline-bg: null !default;
-$kendo-input-outline-text: null !default;
+$kendo-input-outline-text: $kendo-input-text !default;
 $kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
 
 $kendo-input-outline-hover-bg: null !default;
@@ -87,18 +87,21 @@ $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 
 $kendo-input-outline-focus-bg: null !default;
 $kendo-input-outline-focus-text: null !default;
-$kendo-input-outline-focus-border: $kendo-input-outline-border !default;
+$kendo-input-outline-focus-border: null !default;
 $kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-flat-bg: transparent !default;
+$kendo-input-flat-bg: null !default;
 $kendo-input-flat-text: $kendo-input-text !default;
 $kendo-input-flat-border: $kendo-input-border !default;
 
+$kendo-input-flat-hover-bg: null !default;
+$kendo-input-flat-hover-text: null !default;
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
+
 $kendo-input-flat-focus-bg: null !default;
 $kendo-input-flat-focus-text: null !default;
 $kendo-input-flat-focus-border: null !default;
-
-$kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
@@ -124,24 +127,24 @@ $kendo-picker-disabled-border: null !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
-$kendo-picker-outline-bg: transparent !default;
-$kendo-picker-outline-text: null !default;
-$kendo-picker-outline-border: $kendo-button-text !default;
+$kendo-picker-outline-bg: null !default;
+$kendo-picker-outline-text: $kendo-button-text !default;
+$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
-$kendo-picker-outline-hover-bg: $kendo-button-text !default;
-$kendo-picker-outline-hover-text: $body-bg !default;
-$kendo-picker-outline-hover-border: null !default;
+$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
-$kendo-picker-outline-focus-bg: transparent !default;
-$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
-$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-bg: null !default;
+$kendo-picker-outline-focus-text: null !default;
+$kendo-picker-outline-focus-border: null !default;
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
-$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
-$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
-$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+$kendo-picker-outline-hover-focus-bg: null !default;
+$kendo-picker-outline-hover-focus-text: null !default;
+$kendo-picker-outline-hover-focus-border: null !default;
 
-$kendo-picker-flat-bg: transparent !default;
+$kendo-picker-flat-bg: null !default;
 $kendo-picker-flat-text: $kendo-button-text !default;
 $kendo-picker-flat-border: $kendo-button-border !default;
 
@@ -152,7 +155,7 @@ $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
 $kendo-picker-flat-focus-bg: null !default;
 $kendo-picker-flat-focus-text: null !default;
 $kendo-picker-flat-focus-border: null !default;
-$kendo-picker-flat-focus-shadow: null !default;
+$kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
 $kendo-picker-flat-hover-focus-bg: null !default;
 $kendo-picker-flat-hover-focus-text: null !default;

package/scss/panelbar/_layout.scss

@@ -5,7 +5,7 @@
         margin: 0;
         padding: 0;
         border-width: $panelbar-border-width;
-        border-style: solid;
+        border-style: $panelbar-border-style;
         box-sizing: border-box;
         outline: 0;
         font-family: $panelbar-font-family;

package/scss/panelbar/_variables.scss

@@ -5,6 +5,7 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;
 

package/scss/slider/_layout.scss

@@ -110,6 +110,16 @@
                 flex: 0 0 1px;
             }
 
+            .k-tick-horizontal {
+                width: 1px;
+                min-height: 100%;
+            }
+
+            .k-tick-vertical {
+                width: 100%;
+                min-height: 1px;
+            }
+
             .k-draghandle {
                 position: absolute;
             }

package/scss/core/mixins/_input-ripple.scss

@@ -1,32 +0,0 @@
-@mixin input-ripple() {
-    $height: 2 * $kendo-input-border-width;
-
-    &::after {
-        display: block;
-        z-index: 2;
-        content: "";
-        position: absolute;
-        bottom: calc( 1px - #{$height} );
-        left: 0;
-        right: 0;
-        height: $height;
-        margin: auto;
-        opacity: 0;
-        transform: scaleX(.5);
-        transition: transform .3s;
-        background-color: $primary;
-    }
-
-    &.k-state-focused::after ,
-    &.k-focus::after {
-        opacity: 1;
-        transform: scaleX(1);
-    }
-
-
-    &.k-state-invalid::after ,
-    &.k-invalid::after {
-        background-color: $error;
-        transition: none;
-    }
-}