From 68927409b6f53718539c6bead26482fefd660852 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 29 Jun 2023 14:20:19 +0200 Subject: [PATCH] Fix text selection in budget heading The `inverted-selection` rules defined in the `%brand-background` selector weren't being applied because we were using this selector in `::before` and `::after` pseudoelements. Not sure about the reason, but it looks like the saturation of `::after::selection` pseudoelements resulted in invalid selectors and so the inverted selection rules were ignored for every selection using `%brand-background`, like `%budget-header`. Using `@include brand-background` instead of `@extend %brand-background` in pseudoelements solves the issue. The inverted selection might not work in these pseudoelements, but we don't need it there since these pseudoelements don't have content. --- .../stylesheets/admin/budgets_wizard/creation_timeline.scss | 2 +- app/assets/stylesheets/budgets/single_heading.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss index f45760e10..840f302b3 100644 --- a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss +++ b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss @@ -13,7 +13,7 @@ text-transform: uppercase; &::before { - @extend %brand-background; + @include brand-background; border-radius: 50%; content: ""; height: 20px; diff --git a/app/assets/stylesheets/budgets/single_heading.scss b/app/assets/stylesheets/budgets/single_heading.scss index 37edec0d7..2c6afd73a 100644 --- a/app/assets/stylesheets/budgets/single_heading.scss +++ b/app/assets/stylesheets/budgets/single_heading.scss @@ -4,7 +4,7 @@ position: relative; &::after { - @extend %brand-background; + @include brand-background; bottom: 0; content: ""; height: rem-calc(6);