@progress/kendo-theme-default 5.5.1-dev.0 → 5.6.0

package/scss/calendar/_theme.scss

@@ -32,8 +32,8 @@
             &.k-hover,
             &.k-state-hover,
             &:focus,
-            &.k-state-focus,
-            &.k-focus {
+            &.k-focus,
+            &.k-state-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -51,11 +51,11 @@
         // Special days
         .k-calendar-view .k-today {
             @if $calendar-today-style == box {
-                .k-link {
+                .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-state-focused .k-link,
-                &.k-focus .k-link {
+                &.k-focus .k-calendar-cell-inner,
+                &.k-state-focused .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -89,9 +89,9 @@
 
 
         // Interactive states
-        .k-calendar-td:hover .k-link,
-        .k-calendar-td.k-state-hover .k-link,
-        .k-calendar-td.k-hover .k-link {
+        .k-calendar-td:hover .k-calendar-cell-inner,
+        .k-calendar-td.k-hover .k-calendar-cell-inner,
+        .k-calendar-td.k-state-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -99,8 +99,8 @@
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-state-selected .k-link,
-        .k-calendar-td.k-selected .k-link {
+        .k-calendar-td.k-selected .k-calendar-cell-inner,
+        .k-calendar-td.k-state-selected .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -108,12 +108,9 @@
                 $calendar-cell-selected-gradient
             );
         }
-        .k-calendar-td.k-state-selected:hover .k-link,
-        .k-calendar-td.k-selected:hover .k-link,
-        .k-calendar-td.k-state-selected.k-state-hover .k-link,
-        .k-calendar-td.k-selected.k-hover .k-link,
-        .k-calendar-td.k-selected:hover .k-link,
-        .k-calendar-td.k-selected.k-hover .k-link {
+        .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
+        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
+        .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -121,18 +118,15 @@
                 $calendar-cell-selected-hover-gradient
             );
         }
-        .k-calendar-td.k-state-focused .k-link,
-        .k-calendar-td.k-focus .k-link,
-        .k-calendar-td.k-state-focus .k-link,
-        .k-calendar-td.k-focus .k-link {
+        .k-calendar-td:focus .k-calendar-cell-inner,
+        .k-calendar-td.k-focus .k-calendar-cell-inner,
+        .k-calendar-td.k-state-focus .k-calendar-cell-inner,
+        .k-calendar-td.k-state-focused .k-calendar-cell-inner {
             box-shadow: $calendar-cell-focused-shadow;
         }
-        .k-calendar-td.k-state-selected.k-state-focused .k-link,
-        .k-calendar-td.k-selected.k-focused .k-link,
-        .k-calendar-td.k-state-selected.k-state-focus .k-link,
-        .k-calendar-td.k-selected.k-focus .k-link,
-        .k-calendar-td.k-selected:focus .k-link,
-        .k-calendar-td.k-selected.k-focus .k-link {
+        .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
+        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
+        .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -146,8 +140,8 @@
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
             li:hover,
-            li.k-state-hover,
-            li.k-hover {
+            li.k-hover,
+            li.k-state-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -202,19 +196,7 @@
         .k-range-start,
         .k-range-end,
         .k-range-mid {
-            // sass-lint:disable-block indentation
-            background-image:
-                linear-gradient(
-                    transparent $calendar-range-gap,
-                    $calendar-range-bg $calendar-range-gap,
-                    $calendar-range-bg calc(100% - #{$calendar-range-gap}),
-                    transparent calc(100% - #{$calendar-range-gap})
-                );
-
-            .k-ie & {
-                background-image: none;
-                background-color: $calendar-range-bg;
-            }
+            background-color: $calendar-range-bg;
         }
 
         .k-range-start.k-range-end {
@@ -224,16 +206,16 @@
 
         .k-range-start,
         .k-range-end {
-            .k-link {
+            .k-calendar-cell-inner {
                 background-color: $calendar-cell-selected-bg;
             }
         }
 
-        .k-range-start.k-state-active,
         .k-range-start.k-active,
-        .k-range-end.k-state-active,
-        .k-range-end.k-active {
-            .k-link {
+        .k-range-start.k-state-active,
+        .k-range-end.k-active,
+        .k-range-end.k-state-active {
+            .k-calendar-cell-inner {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }
         }
@@ -246,8 +228,8 @@
                 content: "";
                 display: block;
                 position: absolute;
-                top: $calendar-range-gap;
-                bottom: $calendar-range-gap;
+                top: 0;
+                bottom: 0;
                 width: $calendar-range-split-size;
             }
         }

package/scss/calendar/_variables.scss

@@ -13,7 +13,6 @@ $calendar-border: $component-border !default;
 $calendar-header-padding-x: map-get( $spacing, 1 ) !default;
 $calendar-header-padding-y: map-get( $spacing, 1 ) !default;
 $calendar-header-border-width: 1px !default;
-$calendar-header-min-width: ($calendar-cell-size * 8) !default;
 
 $calendar-header-bg: $header-bg !default;
 $calendar-header-text: $header-text !default;
@@ -110,3 +109,47 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 
 // Multiview calendar
+
+
+// Calendar sizes
+$kendo-calendar-sm-font-size: $font-size-md !default;
+$kendo-calendar-sm-line-height: $line-height-md !default;
+$kendo-calendar-sm-cell-size: 28px !default;
+$kendo-calendar-sm-cell-padding-x: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
+$kendo-calendar-sm-cell-padding-y: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
+
+$kendo-calendar-md-font-size: $font-size-md !default;
+$kendo-calendar-md-line-height: $line-height-md !default;
+$kendo-calendar-md-cell-size: 32px !default;
+$kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
+
+$kendo-calendar-lg-font-size: $font-size-lg !default;
+$kendo-calendar-lg-line-height: $line-height-lg !default;
+$kendo-calendar-lg-cell-size: 40px !default;
+$kendo-calendar-lg-cell-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-y: map-get( $spacing, 2 ) !default;
+
+$kendo-calendar-sizes: (
+    sm: (
+        font-size: $kendo-calendar-sm-font-size,
+        line-height: $kendo-calendar-sm-line-height,
+        cell-size: $kendo-calendar-sm-cell-size,
+        cell-padding-x: $kendo-calendar-sm-cell-padding-y,
+        cell-padding-y: $kendo-calendar-sm-cell-padding-x
+    ),
+    md: (
+        font-size: $kendo-calendar-md-font-size,
+        line-height: $kendo-calendar-md-line-height,
+        cell-size: $kendo-calendar-md-cell-size,
+        cell-padding-x: $kendo-calendar-md-cell-padding-y,
+        cell-padding-y: $kendo-calendar-md-cell-padding-x
+    ),
+    lg: (
+        font-size: $kendo-calendar-lg-font-size,
+        line-height: $kendo-calendar-lg-line-height,
+        cell-size: $kendo-calendar-lg-cell-size,
+        cell-padding-x: $kendo-calendar-lg-cell-padding-y,
+        cell-padding-y: $kendo-calendar-lg-cell-padding-x
+    )
+) !default;

package/scss/dataviz/_theme.scss

@@ -115,8 +115,6 @@
 }
 
 
-
-
 @include exports("dataviz/treemap/theme") {
 
     // Treemap

package/scss/input/_variables.scss

@@ -1,14 +1,31 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-md !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $line-height-md !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -21,10 +38,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-input-font-size-lg: $font-size-md !default;
-$kendo-input-line-height-lg: $line-height-md !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-font-size-lg: $font-size-lg !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
 $kendo-input-sizes: (
     sm: (

package/scss/list/_variables.scss

@@ -5,14 +5,14 @@
 $kendo-list-font-size: null !default;
 $kendo-list-font-size-sm: $font-size-md !default;
 $kendo-list-font-size-md: $font-size-md !default;
-$kendo-list-font-size-lg: $font-size-md !default;
+$kendo-list-font-size-lg: $font-size-lg !default;
 
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-line-height-sm: null !default;
-$kendo-list-line-height-md: null !default;
-$kendo-list-line-height-lg: null !default;
+$kendo-list-line-height-sm: $line-height-md !default;
+$kendo-list-line-height-md: $line-height-md !default;
+$kendo-list-line-height-lg: $line-height-lg !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
@@ -58,7 +58,7 @@ $kendo-list-item-padding-x: null !default;
 $kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
@@ -66,7 +66,7 @@ $kendo-list-item-padding-y: null !default;
 $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
 $kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list

package/scss/progressbar/_layout.scss

@@ -264,3 +264,46 @@
     }
 
 }
+
+@include exports("circular-progressbar/layout") {
+
+    .k-circular-progressbar {
+        display: inline-block;
+        text-align: left;
+        position: relative;
+    }
+
+    .k-circular-progressbar-surface {
+        height: 100%;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .k-circular-progressbar-scale {
+        fill: none;
+    }
+
+    .k-circular-progressbar-arc {
+        transform-box: fill-box;
+        transform-origin: center center;
+        transform: rotate(-90deg);
+        stroke-linecap: round;
+        fill: none;
+    }
+
+    .k-circular-progressbar-label {
+        position: absolute;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+
+}

package/scss/progressbar/_theme.scss

@@ -26,3 +26,16 @@
     }
 
 }
+
+@include exports("circular-progressbar/theme") {
+
+    .k-circular-progressbar-scale {
+        stroke: $kendo-circular-progressbar-scale-stroke;
+    }
+
+    .k-circular-progressbar-arc {
+        stroke: $kendo-circular-progressbar-arc-stroke;
+        transition: stroke .5s ease;
+    }
+
+}

package/scss/progressbar/_variables.scss

@@ -23,3 +23,7 @@ $progressbar-indeterminate-border: $progressbar-border !default;
 $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $body-bg !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;

package/scss/timeselector/_layout.scss

@@ -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/_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/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;