fix(btn-group): disabled state in safari (#1047)

IgniteUI · Feb 1, 2024 · ddf4dde · ddf4dde
1 parent 83ab281
commit ddf4dde
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/components/button-group/themes/button.base.scss b/src/components/button-group/themes/button.base.scss
@@ -46,14 +46,18 @@ $transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
     }
 }
 
-:host-context(:disabled),
-:host-context([disabled]),
 :host(:disabled),
 :host([disabled]) {
     cursor: default;
     pointer-events: none;
 }
 
+:host-context(:disabled),
+:host-context([disabled]) {
+    cursor: default;
+    pointer-events: none;
+}
+
 :host([selected]:disabled),
 :host([selected][disabled]) {
     [part~='toggle'] {

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
@@ -3,6 +3,14 @@
 
 $theme: $material;
 
+@mixin disabled {
+    [part~='toggle'] {
+        color: var-get($theme, 'disabled-text-color');
+        background: var-get($theme, 'disabled-background-color');
+        border-color: var-get($theme, 'item-disabled-border');
+    }
+}
+
 :host {
     [part~='toggle'] {
         $icon-size: rem(18px);
@@ -44,12 +52,11 @@ $theme: $material;
 }
 
 :host([disabled]),
-:host(:disabled),
+:host(:disabled) {
+    @include disabled();
+}
+
 :host-context([disabled]),
 :host-context(:disabled) {
-    [part~='toggle'] {
-        color: var-get($theme, 'disabled-text-color');
-        background: var-get($theme, 'disabled-background-color');
-        border-color: var-get($theme, 'item-disabled-border');
-    }
+    @include disabled();
 }