@progress/kendo-theme-classic 4.41.3-dev.1 → 4.42.0

package/modules/@progress/kendo-theme-default/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.1",
+  "version": "4.42.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": "17e8e18bbe2c47b1f86efebea9b2b2d3f4cd55ce"
+  "gitHead": "9ec24b9a743862f1443d2f4acffb203dbbe90215"
 }

package/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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;

package/modules/@progress/kendo-theme-default/scss/chip/_theme.scss

@@ -1,90 +1,191 @@
 @include exports("chip/theme") {
 
-    .k-selection-single {
-        .k-chip-selected {
-            &.k-chip-filled {
-                @include fill(
-                    $chip-filled-single-selected-text,
-                    $chip-filled-single-selected-bg,
-                    $chip-filled-single-selected-border
-                );
-            }
-
-            &.k-chip-outline {
-                @include fill(
-                    $chip-outline-single-selected-text,
-                    $chip-outline-single-selected-bg,
-                    $chip-outline-single-selected-border
-                );
-            }
-        }
-    }
-
-    .k-selection-multiple {
-        > .k-chip-has-icon {
-            &.k-chip-selected {
-                .k-selected-icon-wrapper {
-                    color: $chip-multiple-selected-icon-text;
-                    background-color: $chip-multiple-selected-icon-bg;
-                }
-            }
-        }
+    .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
+        @include fill(
+            $color: $chip-multiple-selected-icon-text,
+            $bg: $chip-multiple-selected-icon-bg
+        );
     }
 
-    .k-chip-filled {
+    // Solid
+    .k-chip-solid {
         @include fill(
-            $chip-filled-text,
-            $chip-filled-bg,
-            $chip-filled-border
+            $chip-solid-text,
+            $chip-solid-bg,
+            $chip-solid-border
         );
 
         &:hover,
-        &.k-chip-hover {
-            background-color: $chip-filled-hovered-bg;
-            border-color: $chip-filled-hovered-border;
+        &.k-state-hover,
+        &.k-hover {
+            @include fill(
+                $bg: $chip-solid-hover-bg,
+                $border: $chip-solid-hover-border
+            );
         }
 
         &:focus,
-        &.k-chip-focused {
-            background-color: $chip-filled-focused-bg;
-            box-shadow: $chip-filled-focused-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-solid-focus-shadow );
+            @include fill( $bg: $chip-solid-focus-bg );
         }
 
-        &.k-chip-selected {
-            background-color: $chip-filled-selected-bg;
-            border-color: $chip-filled-selected-border;
+        &.k-state-selected,
+        &.k-selected {
+            @include fill(
+                $bg: $chip-solid-selected-bg,
+                $border: $chip-solid-selected-border
+            );
         }
 
         &.k-chip-success {
             @include fill(
-                $chip-filled-success-text,
-                $chip-filled-success-bg,
-                $chip-filled-success-border
+                $chip-solid-success-text,
+                $chip-solid-success-bg,
+                $chip-solid-success-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-success-hover-text,
+                    $chip-solid-success-hover-bg,
+                    $chip-solid-success-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-success-focus-text,
+                    $chip-solid-success-focus-bg,
+                    $chip-solid-success-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-success-selected-text,
+                    $chip-solid-success-selected-bg,
+                    $chip-solid-success-selected-border
+                );
+            }
         }
 
+
         &.k-chip-warning {
             @include fill(
-                $chip-filled-warning-text,
-                $chip-filled-warning-bg,
-                $chip-filled-warning-border
+                $chip-solid-warning-text,
+                $chip-solid-warning-bg,
+                $chip-solid-warning-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-warning-hover-text,
+                    $chip-solid-warning-hover-bg,
+                    $chip-solid-warning-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-warning-focus-text,
+                    $chip-solid-warning-focus-bg,
+                    $chip-solid-warning-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-warning-selected-text,
+                    $chip-solid-warning-selected-bg,
+                    $chip-solid-warning-selected-border
+                );
+            }
         }
 
         &.k-chip-error {
             @include fill(
-                $chip-filled-error-text,
-                $chip-filled-error-bg,
-                $chip-filled-error-border
+                $chip-solid-error-text,
+                $chip-solid-error-bg,
+                $chip-solid-error-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-error-hover-text,
+                    $chip-solid-error-hover-bg,
+                    $chip-solid-error-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-error-focus-text,
+                    $chip-solid-error-focus-bg,
+                    $chip-solid-error-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-error-selected-text,
+                    $chip-solid-error-selected-bg,
+                    $chip-solid-error-selected-border
+                );
+            }
         }
 
         &.k-chip-info {
             @include fill(
-                $chip-filled-info-text,
-                $chip-filled-info-bg,
-                $chip-filled-info-border
+                $chip-solid-info-text,
+                $chip-solid-info-bg,
+                $chip-solid-info-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-solid-info-hover-text,
+                    $chip-solid-info-hover-bg,
+                    $chip-solid-info-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-solid-info-focus-text,
+                    $chip-solid-info-focus-bg,
+                    $chip-solid-info-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-solid-info-selected-text,
+                    $chip-solid-info-selected-bg,
+                    $chip-solid-info-selected-border
+                );
+            }
         }
     }
 
@@ -96,27 +197,32 @@
         );
 
         &:hover,
-        &.k-chip-hover {
+        &.k-state-hover,
+        &.k-hover {
             @include fill(
-                $chip-outline-hovered-text,
-                $chip-outline-hovered-bg,
-                $chip-outline-hovered-border
+                $chip-outline-hover-text,
+                $chip-outline-hover-bg,
+                $chip-outline-hover-border
             );
         }
 
         &:focus,
-        &.k-chip-focused {
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-outline-focus-shadow );
             @include fill(
-                $chip-outline-focused-text,
-                $chip-outline-focused-bg,
-                $chip-outline-focused-border
+                $chip-outline-focus-text,
+                $chip-outline-focus-bg,
+                $chip-outline-focus-border
             );
-            box-shadow: $chip-outline-focused-shadow;
         }
 
-        &.k-chip-selected {
-            color: $chip-outline-selected-text;
-            background-color: $chip-outline-selected-bg;
+        &.k-state-selected,
+        &.k-selected {
+            @include fill(
+                $color: $chip-outline-selected-text,
+                $bg: $chip-outline-selected-bg
+            );
         }
 
         &.k-chip-success {
@@ -125,6 +231,35 @@
                 $chip-outline-success-bg,
                 $chip-outline-success-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-success-hover-text,
+                    $chip-outline-success-hover-bg,
+                    $chip-outline-success-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-success-focus-text,
+                    $chip-outline-success-focus-bg,
+                    $chip-outline-success-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-success-selected-text,
+                    $chip-outline-success-selected-bg,
+                    $chip-outline-success-selected-border
+                );
+            }
         }
 
         &.k-chip-warning {
@@ -133,60 +268,142 @@
                 $chip-outline-warning-bg,
                 $chip-outline-warning-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-warning-hover-text,
+                    $chip-outline-warning-hover-bg,
+                    $chip-outline-warning-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-warning-focus-text,
+                    $chip-outline-warning-focus-bg,
+                    $chip-outline-warning-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-warning-selected-text,
+                    $chip-outline-warning-selected-bg,
+                    $chip-outline-warning-selected-border
+                );
+            }
         }
 
+
         &.k-chip-error {
             @include fill(
                 $chip-outline-error-text,
                 $chip-outline-error-bg,
                 $chip-outline-error-border
             );
+
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-error-hover-text,
+                    $chip-outline-error-hover-bg,
+                    $chip-outline-error-hover-border
+                );
+            }
+
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-error-focus-text,
+                    $chip-outline-error-focus-bg,
+                    $chip-outline-error-focus-border
+                );
+            }
+
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-error-selected-text,
+                    $chip-outline-error-selected-bg,
+                    $chip-outline-error-selected-border
+                );
+            }
         }
 
+
         &.k-chip-info {
             @include fill(
                 $chip-outline-info-text,
                 $chip-outline-info-bg,
                 $chip-outline-info-border
             );
-        }
-    }
 
+            &:hover,
+            &.k-state-hover,
+            &.k-hover {
+                @include fill(
+                    $chip-outline-info-hover-text,
+                    $chip-outline-info-hover-bg,
+                    $chip-outline-info-hover-border
+                );
+            }
 
-    // Chip colors
-    .k-chip-primary {
+            &:focus,
+            &.k-state-focus,
+            &.k-focus {
+                @include fill(
+                    $chip-outline-info-focus-text,
+                    $chip-outline-info-focus-bg,
+                    $chip-outline-info-focus-border
+                );
+            }
 
-        &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-primary-focus-shadow;
+            &.k-state-selected,
+            &.k-selected {
+                @include fill(
+                    $chip-outline-info-selected-text,
+                    $chip-outline-info-selected-bg,
+                    $chip-outline-info-selected-border
+                );
+            }
         }
     }
-    .k-chip-info {
 
+
+    // Chip colors
+    .k-chip-info {
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-info-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-info-focus-shadow );
         }
     }
     .k-chip-success {
-
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-success-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-success-focus-shadow );
         }
     }
     .k-chip-warning {
-
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-warning-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-warning-focus-shadow );
         }
     }
     .k-chip-error {
-
         &:focus,
-        &.k-chip-focus {
-            box-shadow: $chip-error-focus-shadow;
+        &.k-state-focus,
+        &.k-focus {
+            @include box-shadow( $chip-error-focus-shadow );
         }
     }