@progress/kendo-theme-default 5.5.0 → 5.5.1-dev.2

package/scss/slider/_theme.scss

@@ -47,20 +47,20 @@
             }
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             .k-draghandle {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-disabled ,
+        &.k-state-disabled,
         &.k-disabled {
             opacity: $slider-disabled-opacity;
         }

package/scss/splitter/_theme.scss

@@ -24,7 +24,7 @@
     .k-splitbar:focus,
     .k-splitbar.k-state-focus,
     .k-splitbar.k-focus,
-    .k-splitbar.k-state-focused ,
+    .k-splitbar.k-state-focused,
     .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;

package/scss/spreadsheet/_layout.scss

@@ -257,7 +257,7 @@
         overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
-        .k-state-disabled ,
+        .k-state-disabled,
         .k-disabled {
             pointer-events: auto;
         }
@@ -819,7 +819,7 @@
             background-position: 50% 50%;
 
             &:hover div,
-            &.k-state-hovered div ,
+            &.k-state-hovered div,
             &.k-hover div {
                 margin: 0;
                 align-self: center;
@@ -885,7 +885,7 @@
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered ,
+                &.k-state-hovered,
                 &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }

package/scss/spreadsheet/_theme.scss

@@ -142,7 +142,7 @@
             );
         }
 
-        &.k-state-active ,
+        &.k-state-active,
         &.k-active {
             @include fill(
                 $kendo-button-active-text,
@@ -160,7 +160,7 @@
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
 
-            .k-item.k-state-hover ,
+            .k-item.k-state-hover,
             .k-item.k-hover {
                 @include fill(
                     $kendo-list-item-hover-text,
@@ -191,7 +191,7 @@
         .k-button {}
 
         .k-button:hover,
-        .k-button.k-state-hover ,
+        .k-button.k-state-hover,
         .k-button.k-hover {
             @include fill(
                 $kendo-list-item-hover-text,
@@ -201,7 +201,7 @@
         .k-button:active,
         .k-button.k-state-active,
         .k-button.k-active,
-        .k-button.k-state-selected ,
+        .k-button.k-state-selected,
         .k-button.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -223,13 +223,13 @@
 
         .k-spreadsheet-has-image {
             &:hover,
-            &.k-state-hovered ,
+            &.k-state-hovered,
             &.k-hover {
                 box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
 
             &:hover div,
-            &.k-state-hovered div ,
+            &.k-state-hovered div,
             &.k-hover div {
                 color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
             }

package/scss/stepper/_layout.scss

@@ -136,7 +136,7 @@
             opacity: $stepper-optional-label-opacity;
         }
         .k-step-disabled .k-step-label-optional,
-        &.k-state-disabled .k-step-label-optional ,
+        &.k-state-disabled .k-step-label-optional,
         &.k-disabled .k-step-label-optional {
             color: inherit;
         }

package/scss/stepper/_theme.scss

@@ -182,7 +182,7 @@
                 $bg: $stepper-progressbar-bg
             );
 
-            .k-state-selected ,
+            .k-state-selected,
             .k-selected {
                 @include fill(
                     $color: $stepper-progressbar-fill-text,

package/scss/tabstrip/_layout.scss

@@ -97,13 +97,13 @@
         position: relative;
         z-index: 1;
 
-        &.k-state-active ,
+        &.k-state-active,
         &.k-active {
             display: block;
         }
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             outline-width: 1px;
             outline-style: dotted;
@@ -192,7 +192,7 @@
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-bottom-color: transparent;
             }
@@ -222,7 +222,7 @@
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-top-color: transparent;
             }
@@ -256,7 +256,7 @@
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-right-color: transparent;
             }
@@ -292,7 +292,7 @@
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-left-color: transparent;
             }
@@ -338,7 +338,7 @@
                     border-left-width: $tabstrip-indicator-size;
                 }
             }
-            .k-item.k-state-active::after ,
+            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 display: block;
             }

package/scss/tabstrip/_theme.scss

@@ -27,7 +27,7 @@
             );
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -40,7 +40,7 @@
             &:active,
             &.k-state-active,
             &.k-active,
-            &.k-state-selected ,
+            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $tabstrip-item-selected-text,
@@ -51,7 +51,7 @@
             }
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -74,7 +74,7 @@
         );
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -85,7 +85,7 @@
     @if ($tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
-            .k-item.k-state-active::after ,
+            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 border-color: $tabstrip-indicator-color;
             }

package/scss/taskboard/_theme.scss

@@ -28,7 +28,7 @@
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus ,
+    .k-taskboard-column.k-state-focus,
     .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,

package/scss/tilelayout/_theme.scss

@@ -9,7 +9,7 @@
     .k-tilelayout-item:focus,
     .k-tilelayout-item.k-focus,
     .k-tilelayout-item.k-state-focus,
-    .k-tilelayout-item.k-state-focused ,
+    .k-tilelayout-item.k-state-focused,
     .k-tilelayout-item.k-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }

package/scss/timeline/_theme.scss

@@ -41,7 +41,7 @@
             color: $body-text;
         }
 
-        .k-timeline-arrow.k-state-disabled ,
+        .k-timeline-arrow.k-state-disabled,
         .k-timeline-arrow.k-disabled {
             opacity: 1; // The arrow button in disabled mode should have a solid background
             color: $timeline-track-arrow-disabled-text;
@@ -62,7 +62,7 @@
         background-color: $timeline-flag-bg;
     }
 
-    .k-timeline-track-item.k-state-focus .k-timeline-circle ,
+    .k-timeline-track-item.k-state-focus .k-timeline-circle,
     .k-timeline-track-item.k-focus .k-timeline-circle {
         @include box-shadow( $timeline-track-item-focus-shadow );
     }

package/scss/timeselector/_layout.scss

@@ -100,7 +100,7 @@
             display: block;
         }
 
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {
@@ -206,4 +206,34 @@
         top: calc( #{$time-list-title-height / 2} );
     }
 
+
+    // Time selector sizes
+    @each $size, $size-props in $kendo-time-selector-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_list-item-padding-x: map-get( $size-props, list-item-padding-x );
+        $_list-item-padding-y: map-get( $size-props, list-item-padding-y );
+        $_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );
+
+
+        .k-timeselector-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            .k-time-highlight,
+            .k-time-list-highlight {
+                height: $_highlight-height;
+            }
+
+            .k-time-separator {
+                height:  $_highlight-height;
+            }
+
+            .k-time-list-item,
+            .k-time-list .k-item {
+                padding: $_list-item-padding-y $_list-item-padding-x;
+            }
+        }
+    }
+
 }

package/scss/timeselector/_theme.scss

@@ -30,7 +30,7 @@
             color: $time-list-title-text;
         }
 
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;

package/scss/timeselector/_variables.scss

@@ -30,3 +30,41 @@ $time-list-highlight-bg: $component-bg !default;
 $time-list-highlight-border: $component-border !default;
 
 $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+
+
+// Time selector sizes
+$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
+$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
+$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
+$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
+
+$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
+$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
+$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
+$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
+$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
+$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
+
+$kendo-time-selector-sizes: (
+    sm: (
+        font-size: $kendo-time-selector-sm-font-size,
+        line-height: $kendo-time-selector-sm-line-height,
+        list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-time-selector-md-font-size,
+        line-height: $kendo-time-selector-md-line-height,
+        list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-time-selector-lg-font-size,
+        line-height: $kendo-time-selector-lg-line-height,
+        list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
+    )
+) !default;

package/scss/treelist/_layout.scss

@@ -25,7 +25,7 @@
         }
 
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover ,
+        .k-treelist-dragging .k-state-hover,
         .k-treelist-dragging .k-hover {
             cursor: default;
         }

package/scss/treeview/_variables.scss

@@ -8,13 +8,13 @@ $kendo-treeview-font-family: $font-family !default;
 $kendo-treeview-font-size: $font-size-md !default;
 $kendo-treeview-font-size-sm: $font-size-md !default;
 $kendo-treeview-font-size-md: $font-size-md !default;
-$kendo-treeview-font-size-lg: $font-size-md !default;
+$kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: $line-height-md !default;
 $kendo-treeview-line-height-sm: $line-height-md !default;
 $kendo-treeview-line-height-md: $line-height-md !default;
-$kendo-treeview-line-height-lg: $line-height-md !default;
+$kendo-treeview-line-height-lg: $line-height-lg !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
@@ -24,13 +24,13 @@ $kendo-treeview-indent: 16px !default;
 $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;

package/scss/upload/_layout.scss

@@ -422,7 +422,7 @@
             z-index: 1;
         }
         input[disabled],
-        input.k-state-disabled ,
+        input.k-state-disabled,
         input.k-disabled {
             visibility: hidden;
         }

package/scss/upload/_theme.scss

@@ -33,12 +33,12 @@
 
         .k-file {
 
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 box-shadow: inset $upload-focused-shadow;
             }
 
-            .k-upload-action.k-state-focused ,
+            .k-upload-action.k-state-focused,
             .k-upload-action.k-focus {
                 box-shadow: $upload-focused-shadow;
             }

package/scss/window/_theme.scss

@@ -12,7 +12,7 @@
 
     .k-window {
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }

package/scss/wizard/_layout.scss

@@ -31,7 +31,7 @@
             justify-content: space-between;
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 outline-width: 1px;
                 outline-style: dotted;

package/scss/wizard/_theme.scss

@@ -1,13 +1,13 @@
 @include exports("wizard/theme") {
     .k-wizard-step {
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             outline-color: $wizard-step-border-focused;
         }
 
         .k-ie &:focus,
-        .k-ie &.k-state-focused ,
+        .k-ie &.k-state-focused,
         .k-ie &.k-focus {
             @include box-shadow($wizard-focused-shadow);
             outline: none;