feat(button-group): update active states and z-indexes

Author: didimmova

projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss

@@ -85,26 +85,25 @@
             }
         }
 
-        &:hover {
-            z-index: 1;
+        &:hover,
+        &:active {
             color: var-get($theme, 'item-hover-text-color');
-            background: var-get($theme, 'item-hover-background');
-            border-color: var-get($theme, 'item-hover-border-color');
 
             igx-icon {
                 color: var-get($theme, 'item-hover-icon-color');
             }
         }
 
+        &:hover {
+            z-index: 1;
+            background: var-get($theme, 'item-hover-background');
+            border-color: var-get($theme, 'item-hover-border-color');
+        }
+
         &:active {
             z-index: 2;
-            color: var-get($theme, 'item-hover-text-color');
             background: var-get($theme, 'item-active-background');
             border-color: var-get($theme, 'item-active-border-color');
-
-            igx-icon {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
         }
 
         @if $variant == 'fluent' {
@@ -162,9 +161,8 @@
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
             }
 
-            &:hover {
-                background: var-get($theme, 'item-focused-hover-background');
-                border-color: var-get($theme, 'item-focused-hover-border-color');
+            &:hover,
+            &:active {
                 color: var-get($theme, 'item-focused-hover-text-color');
 
                 igx-icon {
@@ -178,6 +176,11 @@
                 }
             }
 
+            &:hover {
+                background: var-get($theme, 'item-focused-hover-background');
+                border-color: var-get($theme, 'item-focused-hover-border-color');
+            }
+
             &:active {
                 background: var-get($theme, 'item-active-background');
                 border-color: var-get($theme, 'item-active-border-color');
@@ -207,6 +210,7 @@
     }
 
     %igx-group-item-selected {
+        z-index: 2;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
@@ -220,24 +224,23 @@
             color: var-get($theme, 'item-selected-icon-color');
         }
 
-        &:hover {
-            border-color: var-get($theme, 'item-selected-hover-border-color');
+        &:hover,
+        &:active {
             color: var-get($theme, 'item-selected-hover-text-color');
-            background: var-get($theme, 'item-selected-hover-background');
 
             igx-icon {
                 color: var-get($theme, 'item-selected-hover-icon-color');
             }
         }
 
+        &:hover {
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+            background: var-get($theme, 'item-selected-hover-background');
+        }
+
         &:active {
             border-color: var-get($theme, 'item-selected-active-border-color');
-            color: var-get($theme, 'item-selected-hover-text-color');
             background: var-get($theme, 'item-selected-active-background');
-
-            igx-icon {
-                color: var-get($theme, 'item-selected-hover-icon-color');
-            }
         }
 
         &[igxButton].igx-button--focused {
@@ -266,10 +269,9 @@
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
             }
 
-            &:hover {
-                background: var-get($theme, 'item-selected-focus-hover-background');
+            &:hover,
+            &:active {
                 color: var-get($theme, 'item-selected-hover-text-color');
-                border-color: var-get($theme, 'item-selected-border-color');
 
                 igx-icon {
                     color: var-get($theme, 'item-selected-hover-icon-color');
@@ -280,9 +282,14 @@
                 }
             }
 
+            &:hover {
+                background: var-get($theme, 'item-selected-focus-hover-background');
+                border-color: var-get($theme, 'item-selected-border-color');
+            }
+
             &:active {
-                background: var-get($theme, 'item-selected-active-background');
                 border-color: var-get($theme, 'item-selected-active-border-color');
+                background: var-get($theme, 'item-selected-active-background');
             }
         }