fix(checkbox): address latest issues

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -22,6 +22,10 @@
                 @extend %cbx-ripple--hover !optional;
             }
 
+            @include e(composite) {
+                @extend %cbx-composite--hover !optional;
+            }
+
             @include e(composite-mark) {
                 @extend %cbx-composite-mark--fluent !optional;
             }
@@ -64,21 +68,7 @@
             @extend %cbx-ripple !optional;
         }
 
-        @include m(bootstrap) {
-            @include e(composite) {
-                &:hover {
-                    @extend %cbx-composite--hover !optional;
-                }
-            }
-        }
-
         @include m(indigo) {
-            @include e(composite) {
-                &:hover {
-                    @extend %cbx-composite--hover !optional;
-                }
-            }
-
             @include e(composite-mark) {
                 @extend %cbx-composite-mark-indigo !optional;
             }
@@ -247,11 +237,19 @@
                 @include e(composite) {
                     @extend %cbx-composite--x--hover !optional;
                 }
+
+                @include e(composite-mark) {
+                    @extend %cbx-composite-mark--in--fluent !optional;
+                }
             }
         }
 
         @include mx(material, disabled, indeterminate) {
-            @extend %igx-checkbox--disabled-indeterminate-material !optional;
+            @extend %igx-checkbox--disabled-indeterminate !optional;
+        }
+
+        @include mx(bootstrap, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate !optional;
         }
 
         @include mx(fluent, disabled, indeterminate) {

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -122,7 +122,9 @@
     }
 
     %cbx-composite--hover {
-        border-color: var-get($theme, 'empty-color-hover');
+        @if $variant == 'bootstrap' or $variant == 'indigo' {
+            border-color: var-get($theme, 'empty-color-hover');
+        }
     }
 
     %cbx-composite--x {
@@ -175,6 +177,7 @@
     %cbx-composite--x--disabled {
         @if $variant == 'material' or $variant == 'fluent' {
             background: var-get($theme, 'disabled-color');
+            border-color: var-get($theme, 'disabled-color');
         }
 
         @if $variant == 'indigo' or $variant == 'bootstrap' {
@@ -262,7 +265,7 @@
     }
 
     %igx-checkbox--disabled-indeterminate-indigo {
-        @extend %igx-checkbox--indeterminate-indigo;
+        @extend %igx-checkbox--disabled-indeterminate;
 
         %cbx-composite-mark {
             rect {
@@ -307,15 +310,15 @@
         }
 
         %cbx-composite--x--disabled {
-            background: transparent;
+            border-color: var-get($theme, 'disabled-color');
 
             &::before {
                 background: var-get($theme, 'disabled-color');
             }
         }
     }
 
-    %igx-checkbox--disabled-indeterminate-material {
+    %igx-checkbox--disabled-indeterminate {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');