From bef52c6b1b28a5e01f0995278548e515cffc0f94 Mon Sep 17 00:00:00 2001
From: inikolova <Iliana.Nikolova@telerik.com>
Date: Wed, 17 Mar 2021 16:21:49 +0200
Subject: [PATCH] feat: add interaction states for checkboxes

---
 packages/default/scss/checkbox/_layout.scss | 16 ++++++++++-----
 packages/default/scss/checkbox/_theme.scss  | 22 ++++++++++++++-------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/default/scss/checkbox/_layout.scss b/packages/default/scss/checkbox/_layout.scss
index 9fcdbaddbc3..85a42ab8f40 100644
--- a/packages/default/scss/checkbox/_layout.scss
+++ b/packages/default/scss/checkbox/_layout.scss
@@ -43,13 +43,15 @@
     }
 
     // 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%);
     }
@@ -57,7 +59,8 @@
 
     // 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
index 1ecadf4b609..aade148b85f 100644
--- 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,7 +22,8 @@
 
 
     // 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 );
     }
@@ -29,7 +31,8 @@
 
     // 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,