From df1c8e24bf97690fde881318cfb3b6285e5eda2f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 09:19:47 +0200 Subject: Added interactive badge, larger indent for blockquotes --- src/objects/_badge.scss | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) (limited to 'src/objects') diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 86d5ad2..f12ec1c 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -22,10 +22,23 @@ --colors: ( --bg: fn.global-color(--obj-hi), --label: fn.global-color(--fg-lo), + --hover: ( + --bg: fn.global-color(--obj), + ), + --active: ( + --bg: fn.global-color(--obj-lo), + ), + --accent: ( --bg: fn.global-color(--accent --primary --bg), --label: fn.global-color(--accent --primary --fg), - ) + --hover: ( + --bg: fn.global-color(--accent --primary --obj), + ), + --active: ( + --bg: fn.global-color(--accent --primary --obj-lo), + ), + ), ), ), 'colors'); @@ -37,10 +50,34 @@ color: fn.color(--label); font-size: fn.dim(--font-size); text-align: center; + + &:link, + &:visited, + &:enabled { + &:hover { + background-color: fn.color(--hover --bg); + } + + &:active { + background-color: fn.color(--active --bg); + } + } @include iro.bem-modifier('accent') { background-color: fn.color(--accent --bg); color: fn.color(--accent --label); + + &:link, + &:visited, + &:enabled { + &:hover { + background-color: fn.color(--accent --hover --bg); + } + + &:active { + background-color: fn.color(--accent --active --bg); + } + } } @include iro.bem-modifier('fixed-100') { -- cgit v1.2.3-54-g00ecf