From d8e9dcb92db717050629ec9e31cf23d90b6fa3e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 2 Jul 2021 15:49:15 +0200 Subject: [PATCH 1/2] Fix content property in SVG font icons In commit 4d49ec8ef we replaced an `@extend .fa-` clause with a `content: fa-content()` clause. With the `@extend` clause, the `content:` property appeared wherever the `.fa-` selector was defined, so we later overwrote it in our `%svg-icon` selector, which was defined later in the generated CSS. Defining the property with `content: fa-content()`, on the other hand, caused the `content:` property to appear wherever we used the mixin with `@include has-fa-icon`. That meant our `%svg-icon` selector would appear before it, and would not overwrite it. We could modify a few things and make the code more complicate in order to avoid that. In this case, however, it's easier to add an `!important` flag; after all, it is indeed important that SVG icons have no content so screen readers don't try to announce illegible characters. --- app/assets/stylesheets/mixins/icons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss index f1e5b6a7c..4c2d2bd83 100644 --- a/app/assets/stylesheets/mixins/icons.scss +++ b/app/assets/stylesheets/mixins/icons.scss @@ -7,7 +7,7 @@ %svg-icon { @supports (mask-image: url()) { background: currentcolor; - content: ""; + content: "" !important; height: 1em; mask-repeat: no-repeat; mask-size: 100% 100%; From 53d49c223ea04b634404760601bf83ff26d91c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 2 Jul 2021 18:33:15 +0200 Subject: [PATCH 2/2] Fix font icon line-height We forgot to include this property when replacing our use of `%fa-icon`, and it was causing the admin menu to have a blank space at the bottom. So we're including it again to make sure nothing else breaks because of this omition. --- app/assets/stylesheets/application.scss | 2 ++ app/assets/stylesheets/mixins/icons.scss | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 569d50b07..fe57dab83 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -5,6 +5,8 @@ @import "font-awesome-sprockets"; @import "font-awesome/variables"; @import "font-awesome/path"; +@import "font-awesome/mixins"; +@import "font-awesome/core"; @import "jquery-ui/autocomplete"; @import "jquery-ui/datepicker"; @import "jquery-ui/sortable"; diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss index 4c2d2bd83..4eb1b09e0 100644 --- a/app/assets/stylesheets/mixins/icons.scss +++ b/app/assets/stylesheets/mixins/icons.scss @@ -1,5 +1,5 @@ %font-icon { - display: inline-block; + @extend %fa-icon; font-family: "Font Awesome 5 Free"; vertical-align: middle; }