From 544d7d122c66133d03621c8997f6bfc9dd1dbd40 Mon Sep 17 00:00:00 2001 From: Kikuo Emoto Date: Fri, 8 Dec 2023 17:23:57 +0900 Subject: [PATCH] feat: add vars for tag :hover/:focus/:active background - Introduces the following variables for tag: - `$tag-delete-background-color-focus`: background color for `tag`s with `is-delete` modifier when :hover or :focus - `$tag-delete-background-color-active`: background color for `tag`s with `is-delete` modifier when :active Introduction of the above variables will break nothing because their default bindings are the exact copies of those previously specified to `background-color` for :hover/:focus and :active respectively. This change will allow people to bind `$background` to CSS variables; e.g., jgthms/bulma#3694 --- sass/elements/tag.sass | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass index 392daee6f7..c659beef58 100644 --- a/sass/elements/tag.sass +++ b/sass/elements/tag.sass @@ -4,6 +4,8 @@ $tag-background-color: $background !default $tag-color: $text !default $tag-radius: $radius !default $tag-delete-margin: 1px !default +$tag-delete-background-color-focus: darken($tag-background-color, 5%) !default +$tag-delete-background-color-active: darken($tag-background-color, 10%) !default $tag-colors: $colors !default @@ -129,9 +131,9 @@ $tag-colors: $colors !default width: 1px &:hover, &:focus - background-color: darken($tag-background-color, 5%) + background-color: $tag-delete-background-color-focus &:active - background-color: darken($tag-background-color, 10%) + background-color: $tag-delete-background-color-active &.is-rounded border-radius: $radius-rounded