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

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ff6358",
         "#ffd246",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#000000",
         "#151515",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#50686e",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.1",
+    "version": "5.5.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.5.1-dev.1",
+  "version": "5.5.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,5 +44,5 @@
   "devDependencies": {
     "sass-build": "^0.0.1"
   },
-  "gitHead": "af60c06ba819159a7b64019ea1abd23116c3bcd7"
+  "gitHead": "e5846f8654884b442bfb81cac2682716edf60433"
 }

package/scss/action-sheet/_layout.scss

@@ -34,6 +34,10 @@
             box-sizing: border-box;
         }
     }
+    .k-actionsheet-fullscreen {
+        max-height: 100%;
+        height: 100%;
+    }
 
 
     // Actionsheet header
@@ -47,6 +51,35 @@
         font-size: $actionsheet-header-font-size;
         font-family: $actionsheet-header-font-family;
         line-height: $actionsheet-header-line-height;
+        flex: none;
+    }
+
+
+    // Actionsheet titlebar
+    .k-actionsheet-titlebar {
+        @extend .k-actionsheet-header !optional;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+    .k-actionsheet-title {
+        flex: 1;
+    }
+    .k-actionsheet-actions {
+        flex: none;
+    }
+
+
+    // Actionsheet content
+    .k-actionsheet-content {
+        flex: 1;
+        overflow: auto;
+    }
+
+
+    // Actionsheet footer
+    .k-actionsheet-footer {
+        flex: none;
     }
 
 
@@ -143,4 +176,35 @@
         transform: none;
     }
 
+
+    // Adaptive action sheet
+    .k-adaptive-actionsheet {
+        max-width: 100%;
+        width: 100%;
+
+        // TMP: this should be moved to action sheet
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-calendar {
+            margin-inline: auto;
+            border-width: 0;
+            display: flex;
+        }
+
+        .k-timeselector {
+            height: 100%;
+            border-width: 0;
+            overflow: hidden;
+
+            .k-time-part {
+                display: contents;
+            }
+
+            .k-time-list-wrapper {
+                height: 100%;
+            }
+        }
+    }
+
 }

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;
+    }
 }
 
 

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