@progress/kendo-theme-classic 4.43.1-dev.1 → 4.43.1-dev.5

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

@@ -1,14 +1,6 @@
-@include exports("chip/theme") {
+@include exports( "chip/theme" ) {
 
-    .k-selection-multiple .k-chip-has-icon.k-state-selected .k-selected-icon-wrapper,
-    .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
-        );
-    }
-
-    // Solid
+    // Chip solid
     .k-chip-solid {
         @include fill(
             $chip-solid-text,
@@ -17,179 +9,182 @@
         );
 
         &:hover,
-        &.k-state-hover,
-        &.k-hover {
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $bg: $chip-solid-hover-bg,
-                $border: $chip-solid-hover-border
+                $chip-solid-hover-text,
+                $chip-solid-hover-bg,
+                $chip-solid-hover-border
             );
         }
 
         &:focus,
-        &.k-state-focus,
-        &.k-focus {
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-focus-text,
+                $chip-solid-focus-bg,
+                $chip-solid-focus-border
+            );
             @include box-shadow( $chip-solid-focus-shadow );
-            @include fill( $bg: $chip-solid-focus-bg );
         }
 
-        &.k-state-selected,
-        &.k-selected {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
-                $bg: $chip-solid-selected-bg,
-                $border: $chip-solid-selected-border
+                $chip-solid-selected-text,
+                $chip-solid-selected-bg,
+                $chip-solid-selected-border
             );
         }
+    }
+    .k-chip-solid.k-chip-success {
+        @include fill(
+            $chip-solid-success-text,
+            $chip-solid-success-bg,
+            $chip-solid-success-border
+        );
 
-        &.k-chip-success {
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $chip-solid-success-text,
-                $chip-solid-success-bg,
-                $chip-solid-success-border
+                $chip-solid-success-hover-text,
+                $chip-solid-success-hover-bg,
+                $chip-solid-success-hover-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 {
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
-                $chip-solid-warning-text,
-                $chip-solid-warning-bg,
-                $chip-solid-warning-border
+                $chip-solid-success-focus-text,
+                $chip-solid-success-focus-bg,
+                $chip-solid-success-focus-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 {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
-                $chip-solid-error-text,
-                $chip-solid-error-bg,
-                $chip-solid-error-border
+                $chip-solid-success-selected-text,
+                $chip-solid-success-selected-bg,
+                $chip-solid-success-selected-border
             );
+        }
+    }
+    .k-chip-solid.k-chip-warning {
+        @include fill(
+            $chip-solid-warning-text,
+            $chip-solid-warning-bg,
+            $chip-solid-warning-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 {
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $chip-solid-info-text,
-                $chip-solid-info-bg,
-                $chip-solid-info-border
+                $chip-solid-warning-hover-text,
+                $chip-solid-warning-hover-bg,
+                $chip-solid-warning-hover-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
-                );
-            }
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-warning-focus-text,
+                $chip-solid-warning-focus-bg,
+                $chip-solid-warning-focus-border
+            );
+        }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-solid-warning-selected-text,
+                $chip-solid-warning-selected-bg,
+                $chip-solid-warning-selected-border
+            );
         }
     }
+    .k-chip-solid.k-chip-error {
+        @include fill(
+            $chip-solid-error-text,
+            $chip-solid-error-bg,
+            $chip-solid-error-border
+        );
 
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-solid-error-hover-text,
+                $chip-solid-error-hover-bg,
+                $chip-solid-error-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-error-focus-text,
+                $chip-solid-error-focus-bg,
+                $chip-solid-error-focus-border
+            );
+        }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-solid-error-selected-text,
+                $chip-solid-error-selected-bg,
+                $chip-solid-error-selected-border
+            );
+        }
+    }
+    .k-chip-solid.k-chip-info {
+        @include fill(
+            $chip-solid-info-text,
+            $chip-solid-info-bg,
+            $chip-solid-info-border
+        );
+
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-solid-info-hover-text,
+                $chip-solid-info-hover-bg,
+                $chip-solid-info-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-solid-info-focus-text,
+                $chip-solid-info-focus-bg,
+                $chip-solid-info-focus-border
+            );
+        }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-solid-info-selected-text,
+                $chip-solid-info-selected-bg,
+                $chip-solid-info-selected-border
+            );
+        }
+    }
+
+
+    // Outline chip
     .k-chip-outline {
         @include fill(
             $chip-outline-text,
@@ -198,8 +193,8 @@
         );
 
         &:hover,
-        &.k-state-hover,
-        &.k-hover {
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
                 $chip-outline-hover-text,
                 $chip-outline-hover-bg,
@@ -208,177 +203,171 @@
         }
 
         &:focus,
-        &.k-state-focus,
-        &.k-focus {
-            @include box-shadow( $chip-outline-focus-shadow );
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
                 $chip-outline-focus-text,
                 $chip-outline-focus-bg,
                 $chip-outline-focus-border
             );
+            @include box-shadow( $chip-outline-focus-shadow );
         }
 
-        &.k-state-selected,
-        &.k-selected {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
                 $color: $chip-outline-selected-text,
                 $bg: $chip-outline-selected-bg
             );
         }
+    }
+    .k-chip-outline.k-chip-success {
+        @include fill(
+            $chip-outline-success-text,
+            $chip-outline-success-bg,
+            $chip-outline-success-border
+        );
+
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-outline-success-hover-text,
+                $chip-outline-success-hover-bg,
+                $chip-outline-success-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-outline-success-focus-text,
+                $chip-outline-success-focus-bg,
+                $chip-outline-success-focus-border
+            );
+        }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-outline-success-selected-text,
+                $chip-outline-success-selected-bg,
+                $chip-outline-success-selected-border
+            );
+        }
+    }
+    .k-chip-outline.k-chip-warning {
+        @include fill(
+            $chip-outline-warning-text,
+            $chip-outline-warning-bg,
+            $chip-outline-warning-border
+        );
+
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-outline-warning-hover-text,
+                $chip-outline-warning-hover-bg,
+                $chip-outline-warning-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
+            @include fill(
+                $chip-outline-warning-focus-text,
+                $chip-outline-warning-focus-bg,
+                $chip-outline-warning-focus-border
+            );
+        }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-outline-warning-selected-text,
+                $chip-outline-warning-selected-bg,
+                $chip-outline-warning-selected-border
+            );
+        }
+    }
+    .k-chip-outline.k-chip-error {
+        @include fill(
+            $chip-outline-error-text,
+            $chip-outline-error-bg,
+            $chip-outline-error-border
+        );
+
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
+            @include fill(
+                $chip-outline-error-hover-text,
+                $chip-outline-error-hover-bg,
+                $chip-outline-error-hover-border
+            );
+        }
 
-        &.k-chip-success {
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
-                $chip-outline-success-text,
-                $chip-outline-success-bg,
-                $chip-outline-success-border
+                $chip-outline-error-focus-text,
+                $chip-outline-error-focus-bg,
+                $chip-outline-error-focus-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 {
+        &.k-selected,
+        &.k-state-selected {
             @include fill(
-                $chip-outline-warning-text,
-                $chip-outline-warning-bg,
-                $chip-outline-warning-border
+                $chip-outline-error-selected-text,
+                $chip-outline-error-selected-bg,
+                $chip-outline-error-selected-border
             );
+        }
+    }
+    .k-chip-outline.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-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 {
+        &:hover,
+        &.k-hover,
+        &.k-state-hover {
             @include fill(
-                $chip-outline-error-text,
-                $chip-outline-error-bg,
-                $chip-outline-error-border
+                $chip-outline-info-hover-text,
+                $chip-outline-info-hover-bg,
+                $chip-outline-info-hover-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 {
+        &:focus,
+        &.k-focus,
+        &.k-state-focus {
             @include fill(
-                $chip-outline-info-text,
-                $chip-outline-info-bg,
-                $chip-outline-info-border
+                $chip-outline-info-focus-text,
+                $chip-outline-info-focus-bg,
+                $chip-outline-info-focus-border
             );
+        }
 
-            &:hover,
-            &.k-state-hover,
-            &.k-hover {
-                @include fill(
-                    $chip-outline-info-hover-text,
-                    $chip-outline-info-hover-bg,
-                    $chip-outline-info-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-state-focus,
-            &.k-focus {
-                @include fill(
-                    $chip-outline-info-focus-text,
-                    $chip-outline-info-focus-bg,
-                    $chip-outline-info-focus-border
-                );
-            }
-
-            &.k-state-selected,
-            &.k-selected {
-                @include fill(
-                    $chip-outline-info-selected-text,
-                    $chip-outline-info-selected-bg,
-                    $chip-outline-info-selected-border
-                );
-            }
+        &.k-selected,
+        &.k-state-selected {
+            @include fill(
+                $chip-outline-info-selected-text,
+                $chip-outline-info-selected-bg,
+                $chip-outline-info-selected-border
+            );
         }
     }
 
 
-    // Chip colors
+    // Focus state
     .k-chip-info {
         &:focus,
         &.k-state-focus,