From 933a461f178f5e0735f9ec4f0ba224259e58afce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Mar 2024 01:35:57 +0100 Subject: [PATCH] Fix font-awesome icons in Internet Explorer 11 We're using `@extend` with a placeholder selector to generate the code related to the icons. That means the generated CSS code will look similar to: ``` .something, .something-else, .in-favor-against button:not(:hover, :active), .etcetera, .more-etcetera { /* Rules here */ } ``` That means that, if one selector isn't supported by the browser, none of the specified selectors will apply these rules. The `:not(:hover, :active)` selector, introduced in commit 3482e6e05, is currently supported by 96%-98% of the browsers. Browsers like Internet Explorer don't support it. Since there's a simple solution for this issue which results in a big gain for 2%-4% of the population, we're fixing the issue by avoiding the non-universally supported selector. --- app/assets/stylesheets/in_favor_against.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss index 0a0fd3123..a8b57e0db 100644 --- a/app/assets/stylesheets/in_favor_against.scss +++ b/app/assets/stylesheets/in_favor_against.scss @@ -50,15 +50,20 @@ cursor: pointer; &[aria-pressed=false]:hover, - &[aria-pressed=false]:active, - &[aria-pressed=true]:not(:hover, :active) { + &[aria-pressed=false]:active { @include has-fa-icon($icon, solid); } &[aria-pressed=true] { + @include has-fa-icon($icon, solid); background: $pressed-color; border-color: $pressed-color; color: #fff; + + &:hover, + &:active { + @include has-fa-icon($icon, regular); + } } } }