feat: add interaction states for checkboxes

telerik · Mar 18, 2021 · bef52c6 · bef52c6
1 parent e83ce1a
commit bef52c6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/packages/default/scss/checkbox/_layout.scss b/packages/default/scss/checkbox/_layout.scss
@@ -43,21 +43,24 @@
     }
 
     // Hover state
-    .k-checkbox:hover {
+    .k-checkbox:hover,
+    .k-checkbox.k-state-hover {
         cursor: pointer;
     }
 
 
     // Checked state
-    .k-checkbox:checked::before {
+    .k-checkbox:checked::before,
+    .k-checkbox.k-checked::before {
         @include border-radius( $checkbox-radius );
         transform: scale(1) translate(-50%, -50%);
     }
 
 
     // Indeterminate state
     .k-checkbox:indeterminate::before,
-    .k-checkbox.k-state-indeterminate::before {
+    .k-checkbox.k-state-indeterminate::before,
+    .k-checkbox.k-indeterminate::before {
         content: "";
         background-color: currentColor;
         transform: scale(1) translate(-50%, -50%);
@@ -74,7 +77,9 @@
 
     // Disabled state
     .k-checkbox:disabled,
-    .k-checkbox:disabled + .k-checkbox-label {
+    .k-checkbox.k-disabled,
+    .k-checkbox:disabled + .k-checkbox-label,
+    .k-checkbox.k-disabled + .k-checkbox-label {
         @include disabled( $disabled-styling );
     }
 
@@ -220,7 +225,8 @@
             transform: scale(0);
         }
 
-        .k-checkbox:disabled::after {
+        .k-checkbox:disabled::after,
+        .k-checkbox.k-disabled::after {
             display: none;
         }
     }

diff --git a/packages/default/scss/checkbox/_theme.scss b/packages/default/scss/checkbox/_theme.scss
@@ -11,7 +11,8 @@
 
 
     // Hover state
-    .k-checkbox:hover {
+    .k-checkbox:hover
+    .k-checkbox.k-state-hover {
         @include fill(
             $checkbox-hovered-text,
             $checkbox-hovered-bg,
@@ -21,15 +22,17 @@
 
 
     // Focus state
-    .k-checkbox:focus {
+    .k-checkbox:focus,
+    .k-checkbox.k-state-focus {
         @include fill( $border: $checkbox-focused-border );
         @include box-shadow( $checkbox-focused-shadow );
     }
 
 
     // Indeterminate
     .k-checkbox:indeterminate,
-    .k-checkbox.k-state-indeterminate {
+    .k-checkbox.k-state-indeterminate,
+    .k-checkbox.k-indeterminate {
         @include fill(
             $checkbox-indeterminate-text,
             $checkbox-indeterminate-bg,
@@ -39,21 +42,24 @@
 
 
     // Checked
-    .k-checkbox:checked {
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
         @include fill(
             $checkbox-checked-text,
             $checkbox-checked-bg,
             $checkbox-checked-border
         );
     }
-    .k-checkbox:checked:focus {
+    .k-checkbox:checked:focus,
+    .k-checkbox.k-checked.k-state-focus {
         @include fill( $border: $checkbox-focused-checked-border );
         @include box-shadow( $checkbox-focused-checked-shadow );
     }
 
 
     // Disabled
-    .k-checkbox:disabled {
+    .k-checkbox:disabled,
+    .k-checkbox.k-disabled {
         @include fill(
             $checkbox-disabled-text,
             $checkbox-disabled-bg,
@@ -62,7 +68,9 @@
     }
     .k-checkbox:checked:disabled,
     .k-checkbox:indeterminate:disabled,
-    .k-checkbox.k-state-indeterminate:disabled {
+    .k-checkbox.k-state-indeterminate:disabled,
+    .k-checkbox.k-checked.k-disabled,
+    .k-checkbox.k-indeterminate.k-disabled {
         @include fill(
             $checkbox-disabled-checked-text,
             $checkbox-disabled-checked-bg,