@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/taskboard/_variables.scss

@@ -1,5 +1,5 @@
 // TaskBoard
-$taskboard-spacer: map-get( $spacing, 4 ) !default;
+$taskboard-spacer: k-map-get( $kendo-spacing, 4 ) !default;
 $taskboard-padding-y: null !default;
 $taskboard-padding-x: null !default;
 $taskboard-font-family: $font-family !default;
@@ -19,9 +19,9 @@ $taskboard-toolbar-gradient: null !default;
 $taskboard-content-padding-y: $taskboard-spacer !default;
 $taskboard-content-padding-x: $taskboard-content-padding-y !default;
 
-$taskboard-column-container-spacing-y: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-container-spacing-y: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-container-padding-y: 0px !default;
-$taskboard-column-container-padding-x: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-container-padding-x: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-columns-container-gap: $taskboard-spacer !default;
 
 $taskboard-column-width: 320px !default;
@@ -33,31 +33,31 @@ $taskboard-column-border: transparent !default;
 
 $taskboard-column-focus-bg: null !default;
 $taskboard-column-focus-text: null !default;
-$taskboard-column-focus-border: try-shade( $base-border, 2.5 ) !default;
+$taskboard-column-focus-border: k-try-shade( $base-border, 2.5 ) !default;
 
-$taskboard-column-header-padding-y: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-header-padding-y: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-header-padding-x: $taskboard-column-header-padding-y !default;
-$taskboard-column-header-gap: ( $taskboard-spacer / 4 ) !default;
-$taskboard-column-header-actions-gap: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-header-gap: k-math-div( $taskboard-spacer, 4 ) !default;
+$taskboard-column-header-actions-gap: k-math-div( $taskboard-spacer, 2 ) !default;
 $taskboard-column-header-font-weight: 500 !default;
-$taskboard-column-header-text: $header-text !default;
+$taskboard-column-header-text: $kendo-component-header-text !default;
 
 $taskboard-column-cards-padding-y: null !default;
 $taskboard-column-cards-padding-x: null !default;
-$taskboard-column-cards-gap: ( $taskboard-spacer / 2 ) !default;
+$taskboard-column-cards-gap: k-math-div( $taskboard-spacer, 2 ) !default;
 
 $taskboard-pane-width: $taskboard-column-width !default;
 $taskboard-pane-padding-y: null !default;
 $taskboard-pane-padding-x: null !default;
 $taskboard-pane-border-width: 1px !default;
-$taskboard-pane-bg: $component-bg !default;
-$taskboard-pane-text: $component-text !default;
-$taskboard-pane-border: $component-border !default;
+$taskboard-pane-bg: $kendo-component-bg !default;
+$taskboard-pane-text: $kendo-component-text !default;
+$taskboard-pane-border: $kendo-component-border !default;
 
 $taskboard-pane-header-padding-y: ( $taskboard-spacer * .75 ) !default;
 $taskboard-pane-header-padding-x: $taskboard-spacer !default;
 $taskboard-pane-header-font-weight: 500 !default;
-$taskboard-pane-header-text: $header-text !default;
+$taskboard-pane-header-text: $kendo-component-header-text !default;
 
 $taskboard-pane-content-padding-y: 0px !default;
 $taskboard-pane-content-padding-x: $taskboard-spacer !default;
@@ -76,19 +76,19 @@ $taskboard-card-border: $card-border !default;
 
 $taskboard-card-category-border-width: 4px !default;
 
-$taskboard-card-focus-border: try-shade( $taskboard-card-border, 18% ) !default;
+$taskboard-card-focus-border: k-try-shade( $taskboard-card-border, 18% ) !default;
 $taskboard-card-focus-shadow: none !default;
 
-$taskboard-card-hover-border: try-shade( $taskboard-card-border, 10% ) !default;
+$taskboard-card-hover-border: k-try-shade( $taskboard-card-border, 10% ) !default;
 
-$taskboard-card-selected-border: tint( $primary-lighter, 5 ) !default;
+$taskboard-card-selected-border: k-color-tint( $kendo-color-primary-lighter, 5 ) !default;
 $taskboard-card-selected-shadow: none !default;
 
-$taskboard-card-header-text: $primary !default;
-$taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: $primary-darker !default;
+$taskboard-card-header-text: $kendo-color-primary !default;
+$taskboard-card-header-focus-text: $kendo-color-primary-darker !default;
+$taskboard-card-header-hover-text: $kendo-color-primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;
 $taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default;
-$taskboard-drag-placeholder-border: $component-border !default;
+$taskboard-drag-placeholder-border: $kendo-component-border !default;

package/scss/textarea/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/textbox/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/tilelayout/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/tilelayout/_layout.scss

@@ -7,7 +7,7 @@
         outline: 0;
         display: grid;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-card {
             @include box-shadow( none );

package/scss/tilelayout/_variables.scss

@@ -9,4 +9,4 @@ $tilelayout-hint-border-radius: $kendo-border-radius-lg !default;
 $tilelayout-bg: $base-bg !default;
 
 $tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
-$tilelayout-hint-border: $component-border !default;
+$tilelayout-hint-border: $kendo-component-border !default;

package/scss/timedurationpicker/_index.scss

@@ -11,6 +11,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/timeline/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/timeline/_layout.scss

@@ -9,7 +9,7 @@
         display: block;
         background-color: transparent;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -218,7 +218,7 @@
         .k-timeline-circle {
             margin-top: $timeline-track-event-offset;
             transform: translate(-50%, -50%);
-            margin-right: - $timeline-circle-width / 2;
+            margin-right: - k-math-div( $timeline-circle-width, 2 );
         }
 
         &.k-timeline-alternating {
@@ -330,7 +330,7 @@
 
         .k-timeline-track-wrap {
             position: relative;
-            padding: ($timeline-track-arrow-height / 2) 0;
+            padding: k-math-div( $timeline-track-arrow-height, 2 ) 0;
 
             &::after {
                 top: auto;

package/scss/timeline/_theme.scss

@@ -31,14 +31,14 @@
                 }
 
                 &::-webkit-scrollbar-thumb:hover {
-                    background: $hovered-border;
+                    background: $kendo-hover-border;
                 }
             }
         }
 
         // TODO: remove
         .k-timeline-date {
-            color: $body-text;
+            color: $kendo-body-text;
         }
 
         .k-timeline-arrow.k-disabled {

package/scss/timeline/_variables.scss

@@ -13,21 +13,21 @@ $timeline-mobile-spacing-y: 16px !default;
 $timeline-track-arrow-width: 30px !default;
 $timeline-track-arrow-height: 30px !default;
 
-$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-border: true-mix(#000000, $body-bg, 4.8%) !default;
+$timeline-track-arrow-disabled-bg: k-true-mix($kendo-button-bg, $kendo-body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $kendo-body-bg, 65%) !default;
+$timeline-track-arrow-disabled-border: k-true-mix(#000000, $kendo-body-bg, 4.8%) !default;
 
 $timeline-track-size: 6px !default;
-$timeline-track-wrap-padding-bottom: ($timeline-track-size / 2) !default;
+$timeline-track-wrap-padding-bottom: k-math-div( $timeline-track-size, 2 ) !default;
 $timeline-track-border-width: 1px !default;
 $timeline-track-margin-bottom: 16px !default;
-$timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
+$timeline-track-bottom-calc: calc(#{k-math-div( $timeline-track-arrow-height, 2 )} + #{$timeline-track-wrap-padding-bottom}) !default;
 $timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
 $timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
 $timeline-track-bg: $kendo-button-bg !default;
 $timeline-track-border-color: $kendo-button-border !default;
 
-$timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($primary, .4) !default;
+$timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($kendo-color-primary, .4) !default;
 
 $timeline-track-event-offset: 36px !default;
 
@@ -38,8 +38,8 @@ $timeline-flag-min-width: 80px !default;
 $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
 $timeline-horizontal-flag-min-width: 60px !default;
-$timeline-flag-bg: $primary !default;
-$timeline-flag-text: contrast-wcag( $timeline-flag-bg ) !default;
+$timeline-flag-bg: $kendo-color-primary !default;
+$timeline-flag-text: k-contrast-legacy( $timeline-flag-bg ) !default;
 
 $timeline-flag-callout-width: 10px !default;
 $timeline-flag-callout-height: 10px !default;
@@ -57,9 +57,9 @@ $timeline-mobile-vertical-padding-with-dates-calc: calc(#{$timeline-mobile-verti
 
 $timeline-circle-width: 16px !default;
 $timeline-circle-height: 16px !default;
-$timeline-circle-bg: $primary !default;
+$timeline-circle-bg: $kendo-color-primary !default;
 
-$timeline-collapse-arrow-padding-x: $padding-x !default;
+$timeline-collapse-arrow-padding-x: $kendo-padding-md-x !default;
 
 $timeline-event-width: 400px !default;
 $timeline-event-height: 600px !default;

package/scss/timepicker/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/timeselector/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/timeselector/_layout.scss

@@ -15,7 +15,7 @@
         flex-flow: column nowrap;
         user-select: none;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-popup > & {
             border-width: 0;
@@ -76,7 +76,7 @@
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + #{$time-list-title-height / 2});
+        top: calc( 50% + #{k-math-div( $time-list-title-height, 2 )});
         left: 0;
         right: 0;
         transform: translateY(-50%);
@@ -115,7 +115,7 @@
                 width: 100%;
                 left: 0;
                 pointer-events: none;
-                height: calc( 50% - #{$time-list-highlight-height / 2} );
+                height: calc( 50% - #{k-math-div( $time-list-highlight-height, 2 )} );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
@@ -203,16 +203,16 @@
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( #{$time-list-title-height / 2} );
+        top: calc( #{k-math-div( $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 );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+        $_list-item-padding-x: k-map-get( $size-props, list-item-padding-x );
+        $_list-item-padding-y: k-map-get( $size-props, list-item-padding-y );
         $_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );
 
 

package/scss/timeselector/_theme.scss

@@ -37,7 +37,7 @@
 
             &::before,
             &::after {
-                background-color: $time-list-focused-bg;
+                background-color: $time-list-focus-bg;
             }
         }
     }
@@ -48,11 +48,11 @@
         &::before,
         &::after {
             $shadow-size: 3em;
-            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $time-selector-bg;
+            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $time-selector-bg;
         }
 
         .k-item:hover {
-            color: $primary;
+            color: $kendo-color-primary;
         }
     }
 

package/scss/timeselector/_variables.scss

@@ -4,9 +4,9 @@ $time-selector-font-family: $font-family !default;
 $time-selector-font-size: $font-size !default;
 $time-selector-line-height: $line-height !default;
 
-$time-selector-bg: $component-bg !default;
-$time-selector-text: $component-text !default;
-$time-selector-border: $component-border !default;
+$time-selector-bg: $kendo-component-bg !default;
+$time-selector-text: $kendo-component-text !default;
+$time-selector-border: $kendo-component-border !default;
 
 $time-selector-header-padding-x: $actions-padding-x !default;
 $time-selector-header-padding-y: $actions-padding-y !default;
@@ -18,18 +18,18 @@ $time-list-height: 240px !default;
 $time-list-title-font-size: $font-size-sm !default;
 $time-list-title-line-height: 1.5 !default;
 $time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
-$time-list-title-text: $subtle-text !default;
-$time-list-title-focus-text: $component-text !default;
+$time-list-title-text: $kendo-subtle-text !default;
+$time-list-title-focus-text: $kendo-component-text !default;
 
 $time-list-item-padding-x: $kendo-list-item-padding-x-md !default;
 $time-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $time-list-highlight-border-width: 1px 0px !default;
 $time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
-$time-list-highlight-bg: $component-bg !default;
-$time-list-highlight-border: $component-border !default;
+$time-list-highlight-bg: $kendo-component-bg !default;
+$time-list-highlight-border: $kendo-component-border !default;
 
-$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+$time-list-focus-bg: rgba(0, 0, 0, .04) !default;
 
 
 // Time selector sizes

package/scss/toolbar/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/toolbar/_layout.scss

@@ -3,30 +3,29 @@
     // Base
     .k-toolbar {
         margin: 0;
-        padding: $toolbar-padding-y $toolbar-padding-x;
-        border-width: $toolbar-border-width;
+        padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+        border-width: $kendo-toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $toolbar-font-family;
-        font-size: $toolbar-font-size;
-        line-height: $toolbar-line-height;
+        font-family: $kendo-toolbar-font-family;
+        font-size: $kendo-toolbar-font-size;
+        line-height: $kendo-toolbar-line-height;
         list-style: none;
         display: flex;
         flex-flow: row wrap;
-        gap: $toolbar-spacing;
+        gap: $kendo-toolbar-spacing;
         align-items: center;
         justify-content: flex-start;
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Remove once we decide to not size empty containers
         &::before {
             content: "";
             height: $kendo-button-calc-size;
-            margin-inline-start: -$toolbar-spacing;
         }
 
         &.k-toolbar-resizable {
@@ -40,7 +39,7 @@
             vertical-align: middle;
 
             > label {
-                margin-inline-end: $toolbar-spacing;
+                margin-inline-end: $kendo-toolbar-spacing;
                 align-self: center;
             }
         }
@@ -65,31 +64,15 @@
         // Input
         .k-input,
         .k-picker {
-            width: $toolbar-input-width;
+            width: $kendo-toolbar-input-width;
         }
         .k-color-picker {
             width: min-content;
         }
 
         // Overflow anchor
-        .k-overflow-anchor {
-            @include border-radius( 0 );
-            margin: 0;
-            padding: $toolbar-padding-y;
-            width: auto;
-            height: 100%;
-            aspect-ratio: 1;
-            border-width: 0;
-            border-color: inherit;
-            box-sizing: border-box;
-            justify-content: center;
-            position: absolute;
-            top: 0;
-            right: 0;
-
-            &::before {
-                display: block;
-            }
+        .k-toolbar-overflow-button {
+            margin-inline-start: auto;
         }
 
 
@@ -111,12 +94,6 @@
         }
 
 
-        // Template
-        .k-toolbar-template {
-            align-self: center;
-            align-items: center;
-        }
-
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
@@ -137,11 +114,85 @@
 
 
     // Angular specific
-    kendo-toolbar-renderer {
+    .k-toolbar-renderer {
         display: inline-block;
         border-color: inherit;
     }
 
+    // Toolbar sizes
+    @each $size, $size-props in $kendo-toolbar-sizes {
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+        $_spacing: k-map-get( $size-props, spacing );
+
+        .k-toolbar-#{$size} {
+            padding: $_padding-y $_padding-x;
+            gap: $_spacing;
+
+            // Remove once we decide to not size empty containers
+            &::before {
+                margin-inline-start: -$_spacing;
+            }
+
+            > * > label {
+                margin-inline-end: $_spacing;
+            }
+        }
+    }
+    // Remove once we decide to not size empty containers
+    .k-toolbar-sm::before {
+        height: $kendo-button-calc-size-sm;
+    }
+    .k-toolbar-md::before {
+        height: $kendo-button-calc-size-md;
+    }
+    .k-toolbar-lg::before {
+        height: $kendo-button-calc-size-lg;
+    }
+
+}
+
+
+
+
+@include exports( "floating-toolbar/layout" ) {
+
+    // sass-lint:disable class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md !important; // sass-lint:disable-line no-important
+        border-width: $kendo-toolbar-border-width;
+        border-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: $kendo-toolbar-spacing-md;
+        align-items: center;
+
+        .k-toolbar {
+            padding: 0;
+            border-width: 0;
+            flex-shrink: 1;
+            color: inherit;
+            background: none;
+        }
+    }
+    .k-editortoolbar-dragHandle {
+        cursor: move;
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+    // sass-lint:enable class-name-format
+
+}
+
+
+
+
+// Remove once the Overflow Popup uses
+// the proper Menu rendering in all suites.
+@include exports("toolbar/layout/legacy") {
 
     // Overflow container
     .k-overflow-container {
@@ -153,7 +204,7 @@
         }
 
         .k-separator {
-            margin: map-get( $spacing, 1 ) 0;
+            margin: k-map-get( $kendo-spacing, 1 ) 0;
         }
 
         // Group
@@ -206,60 +257,4 @@
         }
     }
 
-
-
-
-    // RTL
-    .k-toolbar {
-
-        &.k-rtl,
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            .k-overflow-anchor {
-                margin: 0;
-                right: auto;
-                left: 0;
-            }
-        }
-
-    }
-
-}
-
-
-
-
-@include exports( "floating-toolbar/layout" ) {
-
-
-    // sass-lint:disable class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        padding: $toolbar-padding-y $toolbar-padding-x !important; // sass-lint:disable-line no-important
-        border-width: $toolbar-border-width;
-        border-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $toolbar-spacing;
-        align-items: center;
-
-        .k-toolbar {
-            padding: 0;
-            border-width: 0;
-            flex-shrink: 1;
-            color: inherit;
-            background: none;
-        }
-    }
-    .k-editortoolbar-dragHandle {
-        cursor: move;
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        flex-shrink: 0;
-    }
-    // sass-lint:enable class-name-format
-
-
 }