@progress/kendo-theme-core 12.0.0-dev.0 → 12.0.0-dev.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "12.0.0-dev.0",
+  "version": "12.0.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,5 +45,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "e1ba80301b9bb9353203603cb431d8ce1891e0c6"
+  "gitHead": "3d3c1e57932a00e6c1a0e1fbbd14d7ba1e2fe4a9"
 }

package/scss/color-system/_functions.import.scss

@@ -84,19 +84,6 @@
     @return $result;
 }
 
-
-@function k-get-theme-palette( $name ) {
-    @return map.get( $kendo-palettes, $name );
-}
-
-@function k-get-theme-color( $palette, $hue ) {
-    @if ( meta.type-of( $palette ) == "map" ) {
-        @return map.get( $palette, $hue );
-    }
-
-    @return map.get( k-get-theme-palette( $palette ), $hue );
-}
-
 @function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
     @return var( --#{$prefix}#{$name}, #{$fallback} );
 }

package/scss/components/action-buttons/_layout.scss

@@ -29,7 +29,7 @@
 
     // Actions in popup
     .k-popup .k-actions {
-        margin-top: $kendo-actions-margin-top;
+        margin-block-start: $kendo-actions-margin-top;
     }
 
     // Actions align

package/scss/components/action-sheet/_layout.scss

@@ -10,8 +10,8 @@
         max-width: clamp(100vw, 100%, 100%);
         max-height: clamp(100vh, 100%, 100%);
         position: fixed;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         z-index: 9999;
         overflow: hidden;
         transform: translateZ(0);
@@ -30,8 +30,8 @@
             overflow: hidden;
             position: absolute;
             z-index: 2;
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
             pointer-events: none;
 
             > .k-child-animation-container {
@@ -55,7 +55,7 @@
     // Actionsheet
     .k-actionsheet {
         padding-block: $kendo-actionsheet-padding-y;
-        padding-inline: $kendo-actionsheet-padding-y;
+        padding-inline: $kendo-actionsheet-padding-x;
         width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
         height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
         max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
@@ -98,8 +98,8 @@
     .k-actionsheet-titlebar {
         padding-block: $kendo-actionsheet-titlebar-padding-y;
         padding-inline: $kendo-actionsheet-titlebar-padding-x;
-        border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
-        border-bottom-style: solid;
+        border-block-end-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
+        border-block-end-style: solid;
         font-size: $kendo-actionsheet-titlebar-font-size;
         font-family: $kendo-actionsheet-titlebar-font-family;
         line-height: $kendo-actionsheet-titlebar-line-height;
@@ -138,8 +138,8 @@
     // Actionsheet footer
     .k-actionsheet-footer {
         flex: none;
-        border-top-width: $kendo-actionsheet-footer-border-width;
-        border-top-style: solid;
+        border-block-start-width: $kendo-actionsheet-footer-border-width;
+        border-block-start-style: solid;
     }
 
 
@@ -199,33 +199,33 @@
     .k-actionsheet-top {
         @include border-bottom-radius( $kendo-actionsheet-border-radius );
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-top-width: if( $kendo-actionsheet-border-width, 0, null );
-        top: 0;
+        border-block-start-width: if( $kendo-actionsheet-border-width, 0, null );
+        inset-block-start: 0;
         inset-inline-start: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-bottom {
         @include border-top-radius( $kendo-actionsheet-border-radius );
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
-        bottom: 0;
+        border-block-end-width: if( $kendo-actionsheet-border-width, 0, null );
+        inset-block-end: 0;
         inset-inline-start: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-left {
         @include border-right-radius( $kendo-actionsheet-border-radius );
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-left-width: if( $kendo-actionsheet-border-width, 0, null );
-        left: 0;
-        top: 50%;
+        border-inline-start-width: if( $kendo-actionsheet-border-width, 0, null );
+        inset-inline-start: 0;
+        inset-block-start: 50%;
         transform: translateY( -50% );
     }
     .k-actionsheet-right {
         @include border-left-radius( $kendo-actionsheet-border-radius );
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
-        border-right-width: if( $kendo-actionsheet-border-width, 0, null );
-        right: 0;
-        top: 50%;
+        border-inline-end-width: if( $kendo-actionsheet-border-width, 0, null );
+        inset-inline-end: 0;
+        inset-block-start: 50%;
         transform: translateY( -50% );
     }
     .k-actionsheet-fullscreen {
@@ -238,10 +238,10 @@
 
     // Action sheet in popup
     .k-animation-container > .k-actionsheet {
-        top: auto;
-        right: auto;
-        bottom: auto;
-        left: auto;
+        inset-block-start: auto;
+        inset-inline-end: auto;
+        inset-block-end: auto;
+        inset-inline-start: auto;
         transform: none;
     }
 
@@ -325,18 +325,18 @@
         .k-datetime-calendar-wrap {
             width: 100%;
             position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-block-end: 0;
             flex: 0 0 100%;
         }
 
         .k-datetime-time-wrap {
             width: 100%;
             position: absolute;
-            top: 0;
-            left: 100%;
-            bottom: 0;
+            inset-block-start: 0;
+            inset-inline-start: 100%;
+            inset-block-end: 0;
             flex: 0 0 100%;
         }
 

package/scss/components/adaptive/_layout.scss

@@ -29,8 +29,8 @@
         }
 
         .k-view {
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
             position: relative;
             border: 0;
             box-sizing: border-box;
@@ -109,8 +109,8 @@
             font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line
             // The Calc is needed due to the the negative margin
             // that removes the double bottom border of the header
-            top: calc(50% - 1px);
-            left: 50%;
+            inset-block-start: calc(50% - 1px);
+            inset-inline-start: 50%;
             transform: translate(-50%, -50%);
             padding: .2em;
         }
@@ -343,7 +343,7 @@
         }
 
         .k-scrollbar-h tr + tr .k-scheduler-times {
-            border-bottom-width: 0;
+            border-block-end-width: 0;
         }
     }
 
@@ -378,7 +378,7 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: k-spacing(4);
+            margin-block-start: k-spacing(4);
         }
 
         // Column menu
@@ -461,22 +461,6 @@
 
         }
     }
-
-    // RTL
-    :is(.k-rtl .k-pane-wrapper, [dir="rtl"] .k-pane-wrapper, .k-pane-wrapper[dir="rtl"]) {
-        .k-scheduler-mobile {
-            .k-scheduler-toolbar {
-                > ul > li {
-                    border: 0;
-                }
-            }
-
-            .k-task .k-i-reload {
-                margin-left: .5em;
-                margin-right: 0;
-            }
-        }
-    }
 }
 
 

package/scss/components/adaptive/_theme.scss

@@ -23,7 +23,7 @@
         .k-grid-mobile {
 
             .k-column-active + th.k-header {
-                border-left-color: k-color(on-app-surface);
+                border-inline-start-color: k-color(on-app-surface);
             }
 
             .k-resize-handle-inner::before {

package/scss/components/appbar/_layout.scss

@@ -85,7 +85,7 @@
     .k-appbar-sticky {
         width: 100%;
         position: sticky;
-        top: 0;
+        inset-block-start: 0;
         z-index: $kendo-appbar-zindex;
     }
 
@@ -100,15 +100,15 @@
 
     // Appbar position
     .k-appbar-top {
-        top: 0;
-        bottom: auto;
+        inset-block-start: 0;
+        inset-block-end: auto;
     }
     .k-appbar-bottom {
-        top: auto;
-        bottom: 0;
+        inset-block-start: auto;
+        inset-block-end: 0;
 
         &.k-appbar-fixed {
-            bottom: 0;
+            inset-block-end: 0;
         }
     }
 

package/scss/components/badge/_layout.scss

@@ -114,6 +114,7 @@
             }
         }
 
+        .k-rtl.k-badge-#{$placement},
         .k-rtl .k-badge-#{$placement},
         [dir="rtl"].k-badge-#{$placement},
         [dir="rtl"] .k-badge-#{$placement} {

package/scss/components/bottom-navigation/_layout.scss

@@ -110,7 +110,7 @@
 
     // Positioning
     .k-bottom-nav.k-pos-fixed {
-        bottom: 0;
+        inset-block-end: 0;
         z-index: 1;
     }
 

package/scss/components/bubble/_layout.scss

@@ -47,9 +47,9 @@
         .k-bubble-expandable-indicator {
             padding-inline: $kendo-bubble-expandable-icon-padding-x;
             padding-block: $kendo-bubble-expandable-icon-padding-y;
-            margin-top: calc( #{$kendo-bubble-padding-y} * -1);
-            margin-right: calc( #{$kendo-bubble-padding-x} * -1);
-            margin-bottom: calc( ( #{$kendo-bubble-padding-x} / 2 ) * -1);
+            margin-block-start: calc( #{$kendo-bubble-padding-y} * -1);
+            margin-inline-end: calc( #{$kendo-bubble-padding-x} * -1);
+            margin-block-end: calc( ( #{$kendo-bubble-padding-x} / 2 ) * -1);
             display: flex;
             flex-shrink: 0;
             cursor: pointer;

package/scss/components/button/_layout.scss

@@ -268,10 +268,10 @@
         display: none;
         pointer-events: none;
         position: absolute;
-        left: calc( -1 * $kendo-button-border-width );
-        right: calc( -1 * $kendo-button-border-width );
-        top: calc( -1 * $kendo-button-border-width );
-        bottom: calc( -1 * $kendo-button-border-width );
+        inset-inline-start: calc( -1 * $kendo-button-border-width );
+        inset-inline-end: calc( -1 * $kendo-button-border-width );
+        inset-block-start: calc( -1 * $kendo-button-border-width );
+        inset-block-end: calc( -1 * $kendo-button-border-width );
         z-index: 0;
         transition: opacity .2s ease-in-out;
     }
@@ -333,10 +333,10 @@
             display: none;
             pointer-events: none;
             position: absolute;
-            left: calc( -1 * $kendo-button-border-width );
-            right: calc( -1 * $kendo-button-border-width );
-            top: calc( -1 * $kendo-button-border-width );
-            bottom: calc( -1 * $kendo-button-border-width );
+            inset-inline-start: calc( -1 * $kendo-button-border-width );
+            inset-inline-end: calc( -1 * $kendo-button-border-width );
+            inset-block-start: calc( -1 * $kendo-button-border-width );
+            inset-block-end: calc( -1 * $kendo-button-border-width );
             z-index: 0;
             transition: opacity .2s ease-in-out;
         }

package/scss/components/calendar/_layout.scss

@@ -121,8 +121,8 @@
     .k-calendar .k-header {
         padding-block: $kendo-calendar-header-padding-y;
         padding-inline: $kendo-calendar-header-padding-x;
-        border-bottom-width: $kendo-calendar-header-border-width;
-        border-bottom-style: solid;
+        border-block-end-width: $kendo-calendar-header-border-width;
+        border-block-end-style: solid;
         display: flex;
         flex-flow: row nowrap;
         gap: $kendo-calendar-nav-gap;
@@ -266,7 +266,7 @@
         overflow-y: auto;
         display: block;
 
-        @include hide-scrollbar("right");
+        @include hide-scrollbar();
     }
 
     // scoped in calendar until it is used elsewhere
@@ -274,8 +274,8 @@
         position: absolute;
         z-index: -1;
         width: 1px;
-        top: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -354,20 +354,20 @@
             &::after {
                 display: block;
                 position: absolute;
-                bottom: 0;
+                inset-block-end: 0;
                 content: "\200b";
                 height: 0;
                 line-height: 0;
                 z-index: 1;
                 width: 150%;
-                left: -25%;
+                inset-inline-start: -25%;
                 box-shadow: 0 0 $kendo-calendar-cell-size calc( #{$kendo-calendar-cell-size} / 2 ) $kendo-calendar-bg;
             }
         }
 
         .k-calendar-header {
-            margin-left: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
-            margin-right: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
+            margin-inline-start: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
+            margin-inline-end: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
             padding-block: $kendo-infinite-calendar-header-padding-y;
             padding-inline: $kendo-infinite-calendar-header-padding-x;
             width: auto;
@@ -399,23 +399,23 @@
             line-height: 0;
             z-index: 1;
             width: 200%;
-            left: -50%;
+            inset-inline-start: -50%;
             $shadow-size: calc( 3 * #{$kendo-calendar-navigation-item-height} );
             box-shadow: 0 0 $shadow-size calc( #{$shadow-size} / 2 ) $kendo-calendar-navigation-bg;
         }
 
-        &::before { top: 0; }
-        &::after { bottom: 0; }
+        &::before { inset-block-start: 0; }
+        &::after { inset-block-end: 0; }
 
         .k-content,
         .k-calendar-content {
             background: transparent;
             height: auto;
             position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
 
             ul {
                 width: $kendo-calendar-navigation-width;
@@ -444,8 +444,8 @@
             height: $kendo-calendar-navigation-item-height;
             box-sizing: border-box;
             position: absolute;
-            top: 50%;
-            right: 0;
+            inset-block-start: 50%;
+            inset-inline-end: 0;
             transform: translateY(-50%);
         }
 
@@ -477,7 +477,9 @@
 
     // Range Selection
     .k-range-start {
-        border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
+        border-radius: 0;
+        border-start-start-radius: $kendo-calendar-range-cell-border-radius;
+        border-end-start-radius: $kendo-calendar-range-cell-border-radius;
 
         .k-calendar-cell-inner,
         .k-link {
@@ -486,7 +488,9 @@
         }
     }
     .k-range-end {
-        border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+        border-radius: 0;
+        border-start-end-radius: $kendo-calendar-range-cell-border-radius;
+        border-end-end-radius: $kendo-calendar-range-cell-border-radius;
 
         .k-calendar-cell-inner,
         .k-link {
@@ -502,27 +506,6 @@
         border-radius: $kendo-calendar-range-cell-border-radius;
     }
 
-    // RTL
-    .k-rtl .k-calendar,
-    [dir="rtl"] .k-calendar,
-    .k-calendar.k-rtl,
-    .k-calendar[dir="rtl"] {
-
-        .k-content.k-scrollable,
-        .k-calendar-content.k-scrollable {
-            @include hide-scrollbar("left");
-        }
-
-        // Range Selection RTL
-        .k-range-start {
-            border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
-        }
-        .k-range-end {
-            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
-        }
-
-    }
-
 }
 
 

package/scss/components/calendar/_theme.scss

@@ -142,6 +142,8 @@
     }
 
     .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
     .k-calendar[dir="rtl"] {
         .k-calendar-navigation {
             box-shadow: inset 1px 0 $kendo-calendar-navigation-border;
@@ -193,21 +195,21 @@
                 content: "";
                 display: block;
                 position: absolute;
-                top: 0;
-                bottom: 0;
+                inset-block-start: 0;
+                inset-block-end: 0;
                 width: $kendo-calendar-range-split-size;
             }
         }
 
         .k-range-split-start::after {
-            left: -$kendo-calendar-range-split-size;
-            right: auto;
+            inset-inline-start: -$kendo-calendar-range-split-size;
+            inset-inline-end: auto;
             background-image: linear-gradient(to left, $kendo-calendar-range-bg, transparent 100%);
         }
 
         .k-range-split-end::after {
-            right: -$kendo-calendar-range-split-size;
-            left: auto;
+            inset-inline-end: -$kendo-calendar-range-split-size;
+            inset-inline-start: auto;
             background-image: linear-gradient(to right, $kendo-calendar-range-bg, transparent 100%);
         }
     }

package/scss/components/captcha/_layout.scss

@@ -56,7 +56,7 @@
 
     // Verification Success
     .k-captcha-validation-message {
-        margin-top: $kendo-captcha-validation-message-margin-top;
+        margin-block-start: $kendo-captcha-validation-message-margin-top;
         font-size: $kendo-captcha-validation-message-font-size;
         font-style: $kendo-captcha-validation-message-font-style;
     }

package/scss/components/card/_layout.scss

@@ -43,7 +43,7 @@
         // Card avatar
         .k-card-avatar,
         .k-avatar {
-            margin-right: $kendo-card-avatar-spacing;
+            margin-inline-end: $kendo-card-avatar-spacing;
             width: $kendo-card-avatar-size;
             height: $kendo-card-avatar-size;
             flex-basis: $kendo-card-avatar-size;
@@ -75,11 +75,11 @@
 
         .k-card-title,
         .k-card-subtitle {
-            margin-bottom: 0;
+            margin-block-end: 0;
         }
         .k-card-title + .k-card-subtitle,
         .k-card-subtitle + .k-card-subtitle {
-            margin-top: $kendo-card-title-margin-bottom;
+            margin-block-start: $kendo-card-title-margin-bottom;
         }
     }
 
@@ -108,7 +108,7 @@
 
         > .k-last,
         > :last-child {
-            margin-bottom: 0;
+            margin-block-end: 0;
         }
 
         > .k-card-actions {
@@ -169,12 +169,12 @@
 
     .k-card-separator.k-separator-horizontal,
     .k-card-vertical > .k-card-separator {
-        border-top-width: 1px;
+        border-block-start-width: 1px;
     }
 
     .k-card-separator.k-separator-vertical,
     .k-card-horizontal > .k-card-separator {
-        border-left-width: 1px;
+        border-inline-start-width: 1px;
     }
 
     .k-card > .k-hr {
@@ -229,7 +229,7 @@
     }
 
     .k-card-deck-scrollwrap {
-        padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar)
+        padding-block-end: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar)
         width: 100%;
         box-sizing: content-box;
         display: flex;
@@ -245,11 +245,11 @@
             z-index: 1;
 
             &:first-child {
-                left: $kendo-card-deck-scroll-button-offset;
+                inset-inline-start: $kendo-card-deck-scroll-button-offset;
             }
 
             &:last-child {
-                right: $kendo-card-deck-scroll-button-offset;
+                inset-inline-end: $kendo-card-deck-scroll-button-offset;
             }
         }
 
@@ -257,8 +257,8 @@
             // hide scrollbar
             $scrollbar-size: 20px;
 
-            margin-bottom: -$scrollbar-size;
-            padding-bottom: $scrollbar-size;
+            margin-block-end: -$scrollbar-size;
+            padding-block-end: $scrollbar-size;
             flex: 1 1 auto;
         }
     }
@@ -310,23 +310,23 @@
     }
 
     .k-card-callout.k-callout-n {
-        top: 0;
-        left: 50%;
+        inset-block-start: 0;
+        inset-inline-start: 50%;
         transform: translate(-50%, -50%) rotate(45deg);
     }
     .k-card-callout.k-callout-e {
-        top: 50%;
-        right: 0;
+        inset-block-start: 50%;
+        inset-inline-end: 0;
         transform: translate(50%, -50%) rotate(-45deg);
     }
     .k-card-callout.k-callout-s {
-        bottom: 0;
-        left: 50%;
+        inset-block-end: 0;
+        inset-inline-start: 50%;
         transform: translate(-50%, 50%) rotate(45deg);
     }
     .k-card-callout.k-callout-w {
-        top: 50%;
-        left: 0;
+        inset-block-start: 50%;
+        inset-inline-start: 0;
         transform: translate(-50%, -50%) rotate(45deg);
     }