@progress/kendo-theme-bootstrap 5.8.2-dev.5 → 5.8.2-dev.6

package/dist/all.scss

@@ -7578,6 +7578,27 @@ $utils-border-radius: (
         }
     }
 
+    // Icon wrap
+    .k-icon-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: flex-start;
+        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "\200b";
+            width: 0;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
     .k-icon {
         width: 1em;
         height: 1em;
@@ -9576,6 +9597,17 @@ $kendo-checkbox-ripple-opacity: .25 !default;
 // #region @import "~@progress/kendo-theme-default/scss/list/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/list/_layout.scss
 @include exports( "list/layout" ) {
 
+    // List container
+    .k-list-container {
+        display: flex;
+        flex-flow: column nowrap;
+
+        > .k-list {
+            flex: 1;
+            height: 100%;
+        }
+    }
+
     // List
     .k-list {
         margin: 0;
@@ -9756,7 +9788,7 @@ $kendo-checkbox-ripple-opacity: .25 !default;
         position: relative;
         padding: $padding-x;
         box-sizing: border-box;
-        flex: 0 0 auto;
+        flex: none;
     }
 
 
@@ -20568,6 +20600,7 @@ $kendo-time-selector-sizes: (
         display: flex;
         position: relative;
         flex: 1 1 auto;
+        overflow: hidden;
     }
 
 
@@ -25241,7 +25274,8 @@ $actionsheet-padding-x: null !default;
 $actionsheet-padding-y: null !default;
 $actionsheet-width: 360px !default;
 $actionsheet-max-width: 100% !default;
-$actionsheet-max-height: 50vh !default;
+$actionsheet-height: 60vh !default;
+$actionsheet-max-height: 60vh !default;
 
 $actionsheet-border-width: 0px !default;
 $actionsheet-border-radius: 0px !default;
@@ -25257,18 +25291,23 @@ $actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( bl
 
 
 // Actionsheet header
-$actionsheet-header-padding-x: k-map-get( $spacing, 4 ) !default;
-$actionsheet-header-padding-y: k-map-get( $spacing, 2 ) !default;
-$actionsheet-header-border-width: null !default;
-$actionsheet-header-font-size: null !default;
-$actionsheet-header-font-family: null !default;
-$actionsheet-header-line-height: null !default;
+$actionsheet-titlebar-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-border-width: null !default;
+$actionsheet-titlebar-font-size: null !default;
+$actionsheet-titlebar-font-family: null !default;
+$actionsheet-titlebar-line-height: null !default;
+$actionsheet-titlebar-gap: k-map-get( $spacing, 4 ) !default;
+
+$actionsheet-titlebar-bg: null !default;
+$actionsheet-titlebar-text: null !default;
+$actionsheet-titlebar-border: null !default;
+$actionsheet-titlebar-gradient: null !default;
+$actionsheet-titlebar-shadow: null !default;
 
-$actionsheet-header-bg: null !default;
-$actionsheet-header-text: null !default;
-$actionsheet-header-border: null !default;
-$actionsheet-header-gradient: null !default;
-$actionsheet-header-shadow: null !default;
+$actionsheet-subtitle-font-size: $font-size-sm !default;
+$actionsheet-subtitle-line-height: $line-height-sm !default;
+$actionsheet-subtitle-text: $subtle-text !default;
 
 
 // Actionsheet item
@@ -25304,27 +25343,86 @@ $actionsheet-item-disabled-border: null !default;
 $actionsheet-item-disabled-gradient: null !default;
 $actionsheet-item-disabled-shadow: null !default;
 
+
+// Adaptive Actionsheet
+$adaptive-actionsheet-titlebar-border-width: 1px !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
+$adaptive-actionsheet-titlebar-border: $component-border !default;
+
+$adaptive-actionsheet-content-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $spacing, 4 ) !default;
+
+$adaptive-actionsheet-footer-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $spacing, 4 ) !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/action-sheet/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/action-sheet/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/action-sheet/_layout.scss
 @include exports("action-sheet/layout") {
 
+    // Action sheet container
     .k-actionsheet-container {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
+        max-width: unquote("max(100%, 100vw)");
+        max-height: unquote("max(100%, 100vh)");
         position: fixed;
         top: 0;
         left: 0;
         z-index: 9999;
         overflow: hidden;
+        transform: translateZ(0);
     }
 
+
+    // Animation container
+    .k-actionsheet-container {
+
+        // Overlay
+        > .k-overlay {
+            position: absolute;
+            z-index: 1;
+        }
+
+        // Nested animation container
+        > .k-animation-container {
+            width: 100%;
+            height: 100%;
+            border-radius: 0;
+            overflow: hidden;
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+
+            > .k-child-animation-container {
+                position: absolute;
+            }
+        }
+
+        // No animation container
+        > .k-actionsheet {
+            position: absolute;
+            z-index: 2;
+        }
+
+        // Enable mouse events for action sheet
+        .k-actionsheet {
+            pointer-events: all;
+        }
+    }
+
+
     // Actionsheet
     .k-actionsheet {
-        padding: $actionsheet-padding-y $actionsheet-padding-y;
-        width: $actionsheet-width;
-        max-width: $actionsheet-max-width;
-        max-height: $actionsheet-max-height;
+        padding-block: $actionsheet-padding-y;
+        padding-inline: $actionsheet-padding-y;
+        width: var( --kendo-actionsheet-width, #{$actionsheet-width} );
+        height: var( --kendo-actionsheet-height, #{$actionsheet-height} );
+        max-width: var( --kendo-actionsheet-max-width, #{$actionsheet-max-width} );
+        max-height: var( --kendo-actionsheet-max-height, #{$actionsheet-max-height} );
         border-width: 0;
         border-style: solid;
         border-color: transparent;
@@ -25332,10 +25430,8 @@ $actionsheet-item-disabled-shadow: null !default;
         font-size: $actionsheet-font-size;
         font-family: $actionsheet-font-family;
         line-height: $actionsheet-line-height;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: fixed;
-        z-index: 10002;
+        overflow: hidden;
+        position: relative;
 
         *,
         *::before,
@@ -25343,37 +25439,37 @@ $actionsheet-item-disabled-shadow: null !default;
             box-sizing: border-box;
         }
     }
-    .k-actionsheet-fullscreen {
-        max-height: 100%;
-        height: 100%;
-    }
 
 
-    // Actionsheet header
-    .k-actionsheet-header {
-        padding: $actionsheet-header-padding-y $actionsheet-header-padding-x;
+    // Actionsheet titlebar
+    .k-actionsheet-titlebar {
+        padding: $actionsheet-titlebar-padding-y $actionsheet-titlebar-padding-x;
         border-width: 0;
-        border-bottom-width: if( $actionsheet-header-border-width, $actionsheet-header-border-width, null );
+        border-bottom-width: if( $actionsheet-titlebar-border-width, $actionsheet-titlebar-border-width, null );
         border-style: solid;
         border-color: transparent;
-        box-sizing: border-box;
-        font-size: $actionsheet-header-font-size;
-        font-family: $actionsheet-header-font-family;
-        line-height: $actionsheet-header-line-height;
+        font-size: $actionsheet-titlebar-font-size;
+        font-family: $actionsheet-titlebar-font-family;
+        line-height: $actionsheet-titlebar-line-height;
         flex: none;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        gap: $actionsheet-titlebar-gap;
     }
-
-
-    // Actionsheet titlebar
-    .k-actionsheet-titlebar {
-        @extend .k-actionsheet-header !optional;
+    .k-actionsheet-titlebar-group {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
+        width: 100%;
     }
     .k-actionsheet-title {
         flex: 1;
     }
+    .k-actionsheet-subtitle {
+        font-size: $actionsheet-subtitle-font-size;
+        line-height: $actionsheet-subtitle-line-height;
+    }
     .k-actionsheet-actions {
         flex: none;
     }
@@ -25383,6 +25479,7 @@ $actionsheet-item-disabled-shadow: null !default;
     .k-actionsheet-content {
         flex: 1;
         overflow: auto;
+        position: relative;
     }
 
 
@@ -25397,6 +25494,7 @@ $actionsheet-item-disabled-shadow: null !default;
         margin: 0;
         padding: 0;
         list-style: none;
+        flex: none;
     }
 
 
@@ -25415,7 +25513,7 @@ $actionsheet-item-disabled-shadow: null !default;
         outline: 0;
         display: flex;
         flex-flow: row nowrap;
-        align-items: center;
+        align-items: flex-start;
         gap: $actionsheet-item-spacing;
     }
     .k-actionsheet-item-icon {
@@ -25438,6 +25536,7 @@ $actionsheet-item-disabled-shadow: null !default;
     .k-actionsheet > .k-hr {
         margin: 0;
         border-color: inherit;
+        flex: none;
     }
 
 
@@ -25474,6 +25573,12 @@ $actionsheet-item-disabled-shadow: null !default;
         top: 50%;
         transform: translateY( -50% );
     }
+    .k-actionsheet-fullscreen {
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+    }
 
 
     // Action sheet in popup
@@ -25495,6 +25600,28 @@ $actionsheet-item-disabled-shadow: null !default;
         display: flex;
         flex-flow: column nowrap;
 
+        .k-actionsheet-titlebar {
+            padding: $adaptive-actionsheet-titlebar-padding-y $adaptive-actionsheet-titlebar-padding-x;
+            border-bottom-width: $adaptive-actionsheet-titlebar-border-width;
+        }
+
+        .k-actionsheet-content {
+            padding: $adaptive-actionsheet-content-padding-y $adaptive-actionsheet-content-padding-x;
+        }
+
+        .k-actionsheet-footer {
+            padding: $adaptive-actionsheet-footer-padding-y $adaptive-actionsheet-footer-padding-x;
+        }
+
+        .k-list-container,
+        .k-treeview {
+            height: 100%;
+        }
+        .k-list-filter {
+            width: 100%;
+            padding-inline: 0;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;
@@ -25514,6 +25641,58 @@ $actionsheet-item-disabled-shadow: null !default;
                 height: 100%;
             }
         }
+
+        .k-datetime-wrap {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-flow: column nowrap;
+        }
+        .k-datetime-selector {
+            flex: 1 1 auto;
+        }
+
+        .k-datetime-calendar-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-datetime-time-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 100%;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-scrollable-wrap {
+            height: 100%;
+            overflow-y: auto;
+        }
+    }
+
+}
+
+@include exports("action-sheet/layout/legacy") {
+
+    .k-actionsheet-jq {
+        &.k-actionsheet {
+            height: auto;
+        }
+
+        .k-actionsheet-header {
+            @extend .k-actionsheet-titlebar !optional;
+            align-items: flex-start;
+        }
+
+        .k-actionsheet-action {
+            align-items: center;
+        }
     }
 
 }
@@ -25537,14 +25716,17 @@ $actionsheet-item-disabled-shadow: null !default;
 
 
     // Actionsheet header
-    .k-actionsheet-header {
+    .k-actionsheet-titlebar {
         @include fill(
-            $actionsheet-header-text,
-            $actionsheet-header-bg,
-            $actionsheet-header-border,
-            $actionsheet-header-gradient
+            $actionsheet-titlebar-text,
+            $actionsheet-titlebar-bg,
+            $actionsheet-titlebar-border,
+            $actionsheet-titlebar-gradient
         );
-        @include box-shadow( $actionsheet-header-shadow );
+        @include box-shadow( $actionsheet-titlebar-shadow );
+    }
+    .k-actionsheet-subtitle {
+        @include fill( $color: $actionsheet-subtitle-text );
     }
 
 
@@ -25553,17 +25735,7 @@ $actionsheet-item-disabled-shadow: null !default;
 
 
     // Actionsheet item
-    .k-actionsheet-item {}
-
-
-    // Actionsheet item description
-    .k-actionsheet-item-description {
-        @include fill( $color: $actionsheet-item-description-text );
-    }
-
-
-    // Actionsheet action
-    .k-actionsheet-action {
+    .k-actionsheet-item {
 
 
         // Hover state
@@ -25592,7 +25764,7 @@ $actionsheet-item-disabled-shadow: null !default;
         }
 
 
-        // Disabed state
+        // Disabled state
         &:disabled,
         &.k-disabled {
             @include fill(
@@ -25605,6 +25777,22 @@ $actionsheet-item-disabled-shadow: null !default;
         }
     }
 
+
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
+    // Actionsheet action
+    .k-actionsheet-action {}
+
+
+    // Adaptive Actionsheet
+    .k-adaptive-actionsheet .k-actionsheet-titlebar {
+        @include fill( $border: $adaptive-actionsheet-titlebar-border );
+    }
+
 }
 
 // #endregion
@@ -45751,6 +45939,7 @@ $kendo-signature-maximized-line-width: k-map-get( $spacing, 1 ) - k-map-get( $sp
         height: 100%;
         display: block;
         z-index: 1;
+        outline: none;
     }
 
     .k-signature-line {

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.5",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.8.2-dev.5",
+  "version": "5.8.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,12 +43,12 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "^5.8.2-dev.5",
-    "@progress/kendo-theme-default": "^5.8.2-dev.5",
+    "@progress/kendo-theme-core": "^5.8.2-dev.6",
+    "@progress/kendo-theme-default": "^5.8.2-dev.6",
     "bootstrap": "^5.2.1"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "071af936605691a801eaa4de3b8714e6223670f4"
+  "gitHead": "b1b2e33a3ce1b92bcefae87e8c46cbd797d814d1"
 }

package/scss/action-sheet/_variables.scss

@@ -3,7 +3,8 @@ $actionsheet-padding-x: null !default;
 $actionsheet-padding-y: null !default;
 $actionsheet-width: 360px !default;
 $actionsheet-max-width: 100% !default;
-$actionsheet-max-height: 50vh !default;
+$actionsheet-height: 60vh !default;
+$actionsheet-max-height: 60vh !default;
 
 $actionsheet-border-width: 0px !default;
 $actionsheet-border-radius: 0px !default;
@@ -19,18 +20,23 @@ $actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( bl
 
 
 // Actionsheet header
-$actionsheet-header-padding-x: k-map-get( $spacing, 4 ) !default;
-$actionsheet-header-padding-y: k-map-get( $spacing, 2 ) !default;
-$actionsheet-header-border-width: null !default;
-$actionsheet-header-font-size: null !default;
-$actionsheet-header-font-family: null !default;
-$actionsheet-header-line-height: null !default;
+$actionsheet-titlebar-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-border-width: null !default;
+$actionsheet-titlebar-font-size: null !default;
+$actionsheet-titlebar-font-family: null !default;
+$actionsheet-titlebar-line-height: null !default;
+$actionsheet-titlebar-gap: k-map-get( $spacing, 4 ) !default;
 
-$actionsheet-header-bg: null !default;
-$actionsheet-header-text: null !default;
-$actionsheet-header-border: null !default;
-$actionsheet-header-gradient: null !default;
-$actionsheet-header-shadow: null !default;
+$actionsheet-titlebar-bg: null !default;
+$actionsheet-titlebar-text: null !default;
+$actionsheet-titlebar-border: null !default;
+$actionsheet-titlebar-gradient: null !default;
+$actionsheet-titlebar-shadow: null !default;
+
+$actionsheet-subtitle-font-size: $font-size-sm !default;
+$actionsheet-subtitle-line-height: $line-height-sm !default;
+$actionsheet-subtitle-text: $subtle-text !default;
 
 
 // Actionsheet item
@@ -65,3 +71,16 @@ $actionsheet-item-disabled-text: null !default;
 $actionsheet-item-disabled-border: null !default;
 $actionsheet-item-disabled-gradient: null !default;
 $actionsheet-item-disabled-shadow: null !default;
+
+
+// Adaptive Actionsheet
+$adaptive-actionsheet-titlebar-border-width: 1px !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
+$adaptive-actionsheet-titlebar-border: $component-border !default;
+
+$adaptive-actionsheet-content-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $spacing, 4 ) !default;
+
+$adaptive-actionsheet-footer-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $spacing, 4 ) !default;