refactor(btn-group): enhance ective styles

IgniteUI · May 8, 2024 · 0ce9d2c · 0ce9d2c
1 parent 5e35c28
commit 0ce9d2c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 70 deletions.
diff --git a/src/components/button-group/themes/shared/button/button.bootstrap.scss b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -10,7 +10,6 @@ $group-item-border-thickness: rem(1px);
     [part~='toggle'] {
         min-height: $bootstrap-flat-btn-size;
         border-width: $group-item-border-thickness;
-        padding-inline: pad-inline(rem(8px), rem(10px), rem(12px));
         padding-block: pad-block(rem(2px), rem(4px), rem(7px));
 
         &::before {
@@ -28,25 +27,23 @@ $group-item-border-thickness: rem(1px);
     }
 }
 
-:host(:active) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-hover-background');
-        color: var-get($theme, 'item-hover-text-color');
-        border-color: var-get($theme, 'item-hover-border-color');
+[part~='toggle']:active {
+    background: var-get($theme, 'item-hover-background');
+    color: var-get($theme, 'item-hover-text-color');
+    border-color: var-get($theme, 'item-hover-border-color');
 
-        &::before {
-            content: '';
-            background: var-get($theme, 'item-focused-background');
-        }
+    &::before {
+        content: '';
+        background: var-get($theme, 'item-focused-background');
     }
 
     ::slotted(igc-icon) {
         color: var-get($theme, 'item-hover-icon-color');
     }
 }
 
-:host([selected]:active) {
-    [part~='toggle'] {
+:host([selected]) {
+    [part~='toggle']:active {
         background: var-get($theme, 'item-selected-hover-background');
         color: var-get($theme, 'item-selected-hover-text-color');
         border-color: var-get($theme, 'item-selected-hover-border-color');

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
@@ -26,7 +26,7 @@ $theme: $material;
         min-width: var(--button-min-width);
         color: var-get($theme, 'item-text-color');
         background: var-get($theme, 'item-background');
-        padding-inline: rem(16px);
+        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
         padding-block: pad-block(rem(1px), rem(4px), rem(6px));
         border-color: var-get($theme, 'item-border-color');
     }

diff --git a/src/components/button-group/themes/shared/button/button.fluent.scss b/src/components/button-group/themes/shared/button/button.fluent.scss
@@ -33,12 +33,12 @@ $outline-btn-indent: rem(2px);
     }
 }
 
-:host(:active) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-focused-background');
-    }
+[part~='toggle']:active {
+    background: var-get($theme, 'item-focused-background');
+}
 
-    [part='toggle focused'] {
+[part='toggle focused'] {
+    &:active {
         background: var-get($theme, 'item-focused-background');
     }
 }
@@ -60,13 +60,15 @@ $outline-btn-indent: rem(2px);
 }
 
 :host([selected]) {
+    [part~='toggle']:active {
+        background: var-get($theme, 'item-selected-focus-background');
+    }
+
     [part='toggle focused'] {
         background: var-get($theme, 'item-selected-background');
-    }
-}
 
-:host([selected]:active) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-selected-focus-background');
+        &:active {
+            background: var-get($theme, 'item-selected-focus-background');
+        }
     }
 }
diff --git a/src/components/button-group/themes/shared/button/button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -38,16 +38,14 @@ $group-item-border-thickness: rem(1px);
     }
 }
 
-:host(:active) {
-    [part~='toggle'] {
-        color: var-get($theme, 'item-hover-text-color');
-        background: var-get($theme, 'item-hover-background');
-        border-color: var-get($theme, 'item-hover-border-color');
-        z-index: 2;
+[part~='toggle']: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');
+    z-index: 2;
 
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-hover-icon-color');
-        }
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-hover-icon-color');
     }
 }
 
@@ -63,17 +61,15 @@ $group-item-border-thickness: rem(1px);
         border-color: var-get($theme, 'item-selected-border-color');
         color: var-get($theme, 'item-selected-hover-text-color');
     }
-}
 
-:host([selected]:active) {
-    [part~='toggle'] {
+    [part~='toggle']:active {
         color: var-get($theme, 'item-selected-hover-text-color');
         background: var-get($theme, 'item-selected-hover-background');
         border-color: var-get($theme, 'item-selected-hover-border-color');
-    }
 
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-selected-hover-icon-color');
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-selected-hover-icon-color');
+        }
     }
 }
 

diff --git a/src/components/button-group/themes/shared/button/button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss
@@ -44,46 +44,35 @@ $theme: $material;
     }
 }
 
-:host(:active) {
-    [part~='toggle'] {
-        color: var-get($theme, 'item-hover-text-color');
-        border-color: var-get($theme, 'item-hover-border-color');
+[part~='toggle']:active {
+    color: var-get($theme, 'item-hover-text-color');
+    border-color: var-get($theme, 'item-hover-border-color');
 
-        &::before {
-            content: '';
-            background: var-get($theme, 'item-focused-background');
-        }
+    &::before {
+        content: '';
+        background: var-get($theme, 'item-focused-background');
     }
 
     ::slotted(igc-icon) {
         color: var-get($theme, 'item-hover-icon-color');
     }
 }
 
-:host([selected]:hover),
-:host([selected]:active) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-selected-background');
-    }
-}
-
-:host([selected]:hover) {
-    [part~='toggle'] {
+:host([selected]) {
+    [part~='toggle']:active {
         background: var-get($theme, 'item-selected-background');
+        color: var-get($theme, 'item-selected-text-color');
+        border-color: var-get($theme, 'item-selected-border-color');
 
-        &::before {
-            background: var-get($theme, 'item-selected-hover-background');
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-selected-icon-color');
         }
-    }
-
-    [part='toggle focused'] {
+
         &::before {
-            background: var-get($theme, 'item-selected-focus-hover-background');
+            background: var-get($theme, 'item-selected-focus-background');
         }
     }
-}
 
-:host([selected]) {
     [part='toggle focused'] {
         color: var-get($theme, 'item-selected-hover-text-color');
         border-color: var-get($theme, 'item-selected-hover-border-color');
@@ -98,18 +87,18 @@ $theme: $material;
     }
 }
 
-:host([selected]:active) {
+:host([selected]:hover) {
     [part~='toggle'] {
         background: var-get($theme, 'item-selected-background');
-        color: var-get($theme, 'item-selected-text-color');
-        border-color: var-get($theme, 'item-selected-border-color');
 
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-icon-color');
+        &::before {
+            background: var-get($theme, 'item-selected-hover-background');
         }
-
+    }
+
+    [part='toggle focused'] {
         &::before {
-            background: var-get($theme, 'item-selected-focus-background');
+            background: var-get($theme, 'item-selected-focus-hover-background');
         }
     }
 }