@progress/kendo-theme-default 4.41.3-dev.0 → 4.42.0-dev.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "4.41.3-dev.0",
+  "version": "4.42.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "dart:flat": "gulp dart:flat",
     "prepublishOnly": "echo 'no prebublish for default theme'"
   },
-  "gitHead": "4c5f70ca87b87ff582d9b0968b78fd01eddbc07a"
+  "gitHead": "cb64d8c6520246fd2807ec4cd455555d5fac8d82"
 }

package/scss/_variables.scss

@@ -201,9 +201,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: () !default;
-// sass-lint:disable indentation
-$theme-colors: map-merge((
+$theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -214,8 +212,7 @@ $theme-colors: map-merge((
     "dark": $dark,
     "light": $light,
     "inverse": $inverse
-), $theme-colors);
-// sass-lint:enable indentation
+) !default;
 
 // Cursor utility classes
 $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text,
@@ -404,10 +401,7 @@ $grid-gap: 10px !default;
 
 
 // Disabled Styling maps
-$disabled-styling: () !default;
-// sass-lint:disable indentation
-$disabled-styling: map-merge((
+$disabled-styling: (
     opacity: $disabled-opacity,
     filter: $disabled-filter
-), $disabled-styling);
-// sass-lint:enable indentation
+) !default;

package/scss/action-buttons/_layout.scss

@@ -43,7 +43,7 @@
         }
     }
 
-    // Legacy align
+    // Actions align
     .k-actions-start {
         justify-content: flex-start;
     }
@@ -57,4 +57,12 @@
         flex: 1 0 0%;
     }
 
+    // Actions orientation
+    .k-actions-horizontal {
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+
 }

package/scss/action-sheet/_layout.scss

@@ -117,7 +117,7 @@
         border-left-width: if( $actionsheet-border-width, 0, null );
         left: 0;
         top: 50%;
-        transform: translatey( -50% );
+        transform: translateY( -50% );
     }
     .k-actionsheet-right {
         @include border-left-radius( $actionsheet-border-radius );
@@ -125,7 +125,7 @@
         border-right-width: if( $actionsheet-border-width, 0, null );
         right: 0;
         top: 50%;
-        transform: translatey( -50% );
+        transform: translateY( -50% );
     }
 
 

package/scss/adaptive/_layout.scss

@@ -113,7 +113,7 @@
         .k-resize-handle-inner::before {
             content: "\e01e";
             position: absolute;
-            font: 16px/1 "WebComponentsIcons";
+            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);

package/scss/all.scss

@@ -49,6 +49,10 @@
 
 // Inputs
 @import "autocomplete/_index.scss";
+@import "color-preview/_index.scss";
+@import "colorpalette/_index.scss";
+@import "colorgradient/_index.scss";
+@import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
 @import "datetime/_index.scss";

package/scss/appbar/_layout.scss

@@ -14,8 +14,7 @@
         list-style: none;
         display: flex;
         gap: $appbar-gap;
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         align-items: center;
         overflow: hidden;
         -webkit-touch-callout: none;

package/scss/appbar/_variables.scss

@@ -18,5 +18,5 @@ $appbar-light-text: contrast-wcag( $light ) !default;
 $appbar-dark-bg: $dark !default;
 $appbar-dark-text: contrast-wcag( $dark ) !default;
 
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
-$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
+$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
+$appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;

package/scss/avatar/_variables.scss

@@ -7,15 +7,11 @@ $avatar-font-size: $font-size !default;
 $avatar-line-height: $line-height !default;
 
 
-$avatar-sizes: () !default;
-// sass-lint:disable indentation
-$avatar-sizes: map-merge((
+$avatar-sizes: (
     sm: map-get( $spacing, 4 ),
     md: map-get( $spacing, 8 ),
     lg: map-get( $spacing, 16 )
-), $avatar-sizes);
-// sass-lint:enable indentation
+) !default;
 
 
-$avatar-theme-colors: () !default;
-$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );
+$avatar-theme-colors: $theme-colors !default;

package/scss/badge/_variables.scss

@@ -22,15 +22,15 @@ $badge-line-height-lg: 1 !default;
 
 $badge-fixed-size: 20px !default;
 $badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
-$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size );
-$badge-dot-size: 10px;
+$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size ) !default;
+$badge-dot-size: 10px !default;
 
 $badge-fixed-size-sm: 16px !default;
 $badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
-$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm );
-$badge-dot-size-sm: 6px;
+$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm ) !default;
+$badge-dot-size-sm: 6px !default;
 
 $badge-fixed-size-lg: 26px !default;
 $badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
-$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg );
-$badge-dot-size-lg: 12px;
+$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg ) !default;
+$badge-dot-size-lg: 12px !default;

package/scss/bottom-navigation/_layout.scss

@@ -13,8 +13,7 @@
         font-family: $bottom-nav-font-family;
         letter-spacing: $bottom-nav-letter-spacing;
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         white-space: nowrap;
         gap: $bottom-nav-gap;
         overflow: hidden;
@@ -68,8 +67,7 @@
             width: 100%;
             color: inherit;
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
+            flex-flow: row nowrap;
             flex: 1 0 auto;
             align-items: center;
             justify-content: center;
@@ -92,8 +90,7 @@
 
     // Horizontal Item Layout
     .k-bottom-nav-item-flow-horizontal .k-bottom-nav-item {
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
     }
 
     // Vertical Item Layout

package/scss/button/_index.scss

@@ -2,9 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
+@import "../typography/_variables.scss";
 
 
 // Component

package/scss/button/_variables.scss

@@ -120,7 +120,7 @@ $primary-button-selected-shadow: null !default;
 
 $primary-button-focused-shadow: 0 0 0 2px rgba( $primary-button-border, .3 ) !default;
 
-$button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 );
+$button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 ) !default;
 
 $flat-button-hover-opacity: .04 !default;
 $flat-button-focus-opacity: null !default;

package/scss/calendar/_theme.scss

@@ -113,7 +113,7 @@
             );
         }
         .k-calendar-td.k-state-focused .k-link,
-        .k-calendar-td.k-state-focus .k-link  {
+        .k-calendar-td.k-state-focus .k-link {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-state-selected.k-state-focused .k-link,
@@ -187,12 +187,13 @@
         .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})
-            );
+            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 &,
             .k-edge & {
@@ -254,7 +255,7 @@
 
 @include exports( "daterangepicker/theme" ) {
 
-    //jQuery DateRangePicker
+    // jQuery DateRangePicker
     .k-daterangepicker {
         // Invalid
         &.k-state-invalid {

package/scss/captcha/_index.scss

@@ -6,7 +6,9 @@
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../input/_index.scss";
+@import "../button/_index.scss";
 @import "../textbox/_index.scss";
+@import "../slider/_index.scss";
 
 
 // Component

package/scss/captcha/_layout.scss

@@ -8,8 +8,7 @@
         font-family: $captcha-font-family;
         line-height: $captcha-line-height;
         display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
+        flex-flow: column nowrap;
         gap: $captcha-gap;
     }
 

package/scss/captcha/_variables.scss

@@ -8,7 +8,7 @@ $captcha-line-height: $line-height !default;
 $captcha-gap: $captcha-spacer !default;
 $captcha-bg: $component-bg !default;
 $captcha-text: $component-bg !default;
-$captcha-border: $component-bg  !default;
+$captcha-border: $component-bg !default;
 
 $captcha-image-wrap-gap: $captcha-spacer !default;
 

package/scss/card/_layout.scss

@@ -37,8 +37,8 @@
 
 
     // Card orientation
-    .k-card-horizontal  { flex-flow: row nowrap; }
-    .k-card-vertical    { flex-flow: column nowrap; }
+    .k-card-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
 
     // Header
@@ -198,14 +198,14 @@
 
 
     // Actions align
-    .k-card-actions-start       { justify-content: flex-start; }
-    .k-card-actions-end         { justify-content: flex-end; }
-    .k-card-actions-center      { justify-content: center; }
+    .k-card-actions-start       { justify-content: flex-start; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-end         { justify-content: flex-end; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-center      { justify-content: center; } // stylelint-disable-line block-opening-brace-space-before
 
 
     // Actions orientation
-    .k-card-actions-horizontal  { flex-flow: row nowrap; }
-    .k-card-actions-vertical    { flex-flow: column nowrap; }
+    .k-card-actions-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
 
     // Streched actions
@@ -324,8 +324,7 @@
     // Group
     .k-card-group {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         align-items: stretch;
         flex: 0 0 auto;
 

package/scss/card/_variables.scss

@@ -54,7 +54,7 @@ $card-subtitle-text: $subtle-text !default;
 
 $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
-$card-avatar-spacing:  $card-header-padding-x !default;
+$card-avatar-spacing: $card-header-padding-x !default;
 
 $card-actions-padding-x: map-get( $spacing, 2 ) !default;
 $card-actions-padding-y: map-get( $spacing, 2 ) !default;

package/scss/chat/_layout.scss

@@ -246,8 +246,7 @@
         padding-left: $chat-message-list-padding-y;
         padding-right: $chat-message-list-padding-y;
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         flex: 0 0 auto;
         overflow-x: auto;
         overflow-y: hidden;
@@ -347,8 +346,7 @@
     // Deck
     .k-chat .k-card-deck .k-card-wrap {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         align-items: stretch;
         flex: 0 0 auto;
         padding-bottom: 5px; // accommodate for focused box shadow on OSX
@@ -377,8 +375,7 @@
         padding: 0;
         border-radius: 50px;
         display: inline-flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
 
         span {
             width: $chat-typing-indicator-dot-size;
@@ -425,8 +422,7 @@
             // margin-bottom: -20px;
             // padding-bottom: 20px;
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
+            flex-flow: row nowrap;
             overflow: hidden;
             // overflow-x: auto;
             scroll-behavior: smooth;

package/scss/chat/_theme.scss

@@ -14,7 +14,7 @@
             @include fill(
                 $chat-timestamp-text,
                 $chat-timestamp-bg
-            )
+            );
         }
         .k-author {
             font-weight: bold;

package/scss/chip/_layout.scss

@@ -35,11 +35,9 @@
             font-size: $chip-selected-icon-font-size;
         }
 
-        .k-chip-selected {
-            .k-selected-icon-wrapper {
-                width: $chip-selected-icon-size;
-                visibility: visible;
-            }
+        .k-chip.k-selected .k-selected-icon-wrapper {
+            width: $chip-selected-icon-size;
+            visibility: visible;
         }
 
         > .k-chip-has-icon {
@@ -56,10 +54,8 @@
                 transition: width .2s, opacity .2s;
             }
 
-            &.k-chip-selected {
-                .k-selected-icon-wrapper {
-                    opacity: 1;
-                }
+            &.k-selected .k-selected-icon-wrapper {
+                opacity: 1;
             }
         }
     }
@@ -84,10 +80,6 @@
         &.k-chip-focus {
             outline: 0;
         }
-
-        &.k-chip-disabled {
-            @include disabled( $disabled-styling );
-        }
     }
 
     .k-chip-content {
@@ -133,7 +125,8 @@
 
     .k-chip-list {
         &[dir="rtl"],
-        .k-rtl & {
+        .k-rtl &,
+        &.k-rtl {
             > * {
                 margin-right: 0;
                 margin-left: $chips-margin;
@@ -147,7 +140,8 @@
 
     .k-chip {
         &[dir="rtl"],
-        .k-rtl & {
+        .k-rtl &,
+        &.k-rtl {
             .k-chip-icon {
                 margin-left: 0;
                 margin-right: $chip-icon-margin;