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

package/scss/calendar/_layout.scss

@@ -2,6 +2,8 @@
 
     // Base
     .k-calendar {
+        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
+        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
         border-width: $calendar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -22,19 +24,12 @@
         > .k-calendar {
             border: 0;
         }
-
-        // Common
-        .k-link {
-            white-space: normal;
-            position: relative;
-            overflow: hidden;
-        }
     }
 
 
     // Calendar table
     .k-calendar-table {
-        margin: 0;
+        margin: 0 auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -42,8 +37,7 @@
         table-layout: fixed;
         text-align: center;
         outline: 0;
-        display: inline-table;
-        vertical-align: top;
+        display: table;
         position: relative;
         z-index: 1;
     }
@@ -61,6 +55,9 @@
         font-weight: $calendar-caption-font-weight;
         cursor: default;
     }
+
+
+    // Calendar cell
     .k-calendar-th,
     .k-calendar-td {
         border-width: 0;
@@ -82,10 +79,32 @@
     }
     .k-calendar-td {
         @include border-radius( $calendar-cell-border-radius );
+        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
+        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
         border-color: transparent;
     }
 
 
+    // Calendar cell inner
+    // Remove .k-calendar once we remove k-link
+    .k-calendar .k-calendar-cell-inner {
+        @include border-radius( $calendar-cell-border-radius );
+        padding: $calendar-cell-padding-y $calendar-cell-padding-x;
+        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$calendar-cell-padding-x} );
+        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$calendar-cell-padding-y} );
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        white-space: normal;
+        position: relative;
+        overflow: hidden;
+    }
+
+
     // Calendar header
     .k-calendar .k-header {
         padding: $calendar-header-padding-y $calendar-header-padding-x;
@@ -103,7 +122,7 @@
     // Calendar header
     .k-calendar-header {
         padding: $calendar-header-padding-y $calendar-header-padding-x;
-        min-width: $calendar-header-min-width;
+        min-width: ($calendar-cell-size * 8);
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -145,22 +164,13 @@
         padding: 0 $calendar-header-padding-x;
         // setting width / height prevents layout changes in meta views
         width: $calendar-view-width;
+        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$calendar-view-width});
         min-height: $calendar-view-height;
         box-sizing: content-box;
         gap: $calendar-view-gap;
         position: relative;
         z-index: 1;
         overflow: hidden;
-
-        .k-link {
-            @include border-radius( $calendar-cell-border-radius );
-            padding: $calendar-cell-padding-y $calendar-cell-padding-x;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-        }
     }
     .k-week-number .k-calendar-view {
         width: (8 * $calendar-cell-size);
@@ -168,61 +178,59 @@
 
 
     // Month view
+    .k-month-calendar,
     .k-calendar-monthview {
         $_month-cell-size: $calendar-cell-size;
 
         .k-calendar-td {
             width: $_month-cell-size;
             height: $_month-cell-size;
-        }
-        .k-link {
-            width: $_month-cell-size;
-            height: $_month-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
         }
     }
 
 
     // Year view
+    .k-year-calendar,
     .k-calendar-yearview {
-        $_year-cell-size: ( (7 / 4) * $calendar-cell-size);
+        $_year-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_year-cell-size;
             height: $_year-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
         }
     }
 
 
     // Decade view
+    .k-decade-calendar,
     .k-calendar-decadeview {
-        $_decade-cell-size: ( (7 / 4) * $calendar-cell-size);
+        $_decade-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_decade-cell-size;
             height: $_decade-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
         }
     }
 
 
     // Century view
+    .k-century-calendar,
     .k-calendar-centuryview {
-        $_century-cell-size: ( (7 / 4) * $calendar-cell-size);
+        $_century-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_century-cell-size;
             height: $_century-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+        }
+        .k-calendar-cell-inner {
             text-align: left;
         }
     }
@@ -262,6 +270,56 @@
         top: 0;
         right: 0;
     }
+
+
+
+
+    // Calendar sizes
+    @each $size, $size-props in $kendo-calendar-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_cell-size: map-get( $size-props, cell-size );
+        $_cell-padding-x: map-get( $size-props, cell-padding-x );
+        $_cell-padding-y: map-get( $size-props, cell-padding-y );
+
+        $_month-cell-size: $_cell-size;
+        $_year-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
+        $_decade-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
+        $_century-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
+
+        .k-calendar-#{$size} {
+            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
+            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
+            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            &.k-month-calendar,
+            .k-calendar-monthview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
+            }
+            &.k-year-calendar,
+            .k-calendar-yearview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
+            }
+            &.k-decade-calendar,
+            .k-calendar-decadeview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
+            }
+            &.k-century-calendar,
+            .k-calendar-centuryview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
+            }
+        }
+    }
+
+
+
+
+    // Alias
+    .k-link {
+        @extend .k-calendar-cell-inner;
+    }
 }
 
 
@@ -386,7 +444,7 @@
         }
 
         // // styles are applied to the k-link element inside
-        // .k-state-selected ,
+        // .k-state-selected,
         // .k-selected {
         //     color: inherit;
         //     background: transparent;
@@ -412,6 +470,10 @@
             &::after {
                 display: none;
             }
+
+            &:focus {
+                outline: 0;
+            }
         }
 
         .k-range-start {

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/chat/_layout.scss

@@ -152,7 +152,7 @@
 
 
         // Message states
-        .k-message.k-state-selected ,
+        .k-message.k-state-selected,
         .k-message.k-selected {
             margin-bottom: $chat-item-spacing-y;
             border: 0;
@@ -362,7 +362,7 @@
             flex: 0 0 auto;
         }
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             background: none;
         }

package/scss/chat/_theme.scss

@@ -38,7 +38,7 @@
         .k-bubble:hover {
             @include box-shadow( $chat-bubble-hover-shadow );
         }
-        .k-state-selected .k-bubble ,
+        .k-state-selected .k-bubble,
         .k-selected .k-bubble {
             @include box-shadow( $chat-bubble-selected-shadow );
         }
@@ -54,7 +54,7 @@
         .k-alt .k-bubble:hover {
             @include box-shadow( $chat-alt-bubble-hover-shadow );
         }
-        .k-alt .k-state-selected .k-bubble ,
+        .k-alt .k-state-selected .k-bubble,
         .k-alt .k-selected .k-bubble {
             @include box-shadow( $chat-alt-bubble-selected-shadow );
         }

package/scss/chip/_variables.scss

@@ -5,7 +5,7 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: map-get( $spacing, 1 );
+$kendo-chip-spacing: map-get( $spacing, 1 ) !default;
 
 /// Horizontal padding of the chip.
 /// @group chip

package/scss/colorpalette/_layout.scss

@@ -49,7 +49,7 @@
         &.k-focus,
         &.k-state-selected,
         &.k-selected,
-        &.k-state-selected:hover ,
+        &.k-state-selected:hover,
         &.k-selected:hover {
             position: relative;
             z-index: 100;

package/scss/dataviz/_theme.scss

@@ -115,8 +115,6 @@
 }
 
 
-
-
 @include exports("dataviz/treemap/theme") {
 
     // Treemap
@@ -144,7 +142,7 @@
         .k-leaf.k-inverse {
             color: $component-text;
         }
-        .k-leaf.k-state-hover ,
+        .k-leaf.k-state-hover,
         .k-leaf.k-hover {
             box-shadow: inset 0 0 0 3px $component-border;
         }

package/scss/drawer/_theme.scss

@@ -25,33 +25,33 @@
     .k-drawer-item {
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             color: $drawer-hovered-text;
             background-color: $drawer-hovered-bg;
         }
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             background-color: $drawer-focused-bg;
             box-shadow: $drawer-focused-shadow;
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 color: $drawer-hovered-text;
                 background-color: $drawer-hovered-bg;
             }
         }
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             color: $drawer-selected-text;
             background-color: $drawer-selected-bg;
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 color: $drawer-selected-hover-text;
                 background-color: $drawer-selected-hover-bg;

package/scss/editor/_layout.scss

@@ -42,7 +42,7 @@
                 pointer-events: auto;
             }
 
-            .k-editor-content.k-state-focused ,
+            .k-editor-content.k-state-focused,
             .k-editor-content.k-focus {
                 outline-width: 1px;
                 outline-style: dashed;
@@ -496,7 +496,7 @@
             display: block;
             margin: auto;
 
-            &.k-state-selected ,
+            &.k-state-selected,
             &.k-selected {
                 color: inherit;
                 border-width: 0;

package/scss/editor/_theme.scss

@@ -10,7 +10,7 @@
 
     kendo-editor {
         &.k-readonly {
-            .k-editor-content.k-state-focused ,
+            .k-editor-content.k-state-focused,
             .k-editor-content.k-focus {
                 outline-color: $body-text;
             }
@@ -48,7 +48,7 @@
 
         // Hover & Actve state
         &:hover,
-        &.k-state-active ,
+        &.k-state-active,
         &.k-active {
             border-color: $panel-border;
         }
@@ -66,7 +66,7 @@
 
     // Insert table
     .k-ct-popup {
-        .k-state-selected ,
+        .k-state-selected,
         .k-selected {
             @include fill( $selected-text, $selected-bg, $selected-border, none );
         }

package/scss/expansion-panel/_theme.scss

@@ -7,7 +7,7 @@
             $expander-border
         );
 
-        &.k-state-focus ,
+        &.k-state-focus,
         &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
@@ -22,13 +22,13 @@
         outline: none;
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             background-color: $expander-header-hover-bg;
         }
 
         // Should be removed
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             background-color: $expander-header-focused-bg;
             box-shadow: $expander-header-focused-shadow;

package/scss/filemanager/_theme.scss

@@ -64,7 +64,7 @@
                 );
             }
 
-            &.k-state-selected .k-file-icon ,
+            &.k-state-selected .k-file-icon,
             &.k-selected .k-file-icon {
                 @include fill(
                     inherit,

package/scss/forms/_layout.scss

@@ -142,7 +142,8 @@
 
         .k-multiselect,
         .k-floating-label-container,
-        .k-daterangepicker .k-dateinput {
+        .k-daterangepicker .k-dateinput,
+        .k-signature {
             display: inline-flex;
             width: 100%;
         }