From 894aee1a5ca3f01292f6db7da9a903fdb2235065 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 12 Feb 2023 20:48:13 +0100 Subject: Update --- src/objects/_overflow-button.scss | 98 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) (limited to 'src/objects/_overflow-button.scss') diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss index 3920a37..d768492 100644 --- a/src/objects/_overflow-button.scss +++ b/src/objects/_overflow-button.scss @@ -37,6 +37,63 @@ --border: fn.global-color(--focus --fill), --shadow: fn.global-color(--focus --shadow), ), + + --red: ( + --hover: ( + --bg: fn.global-color(--red --quiet --bg), + --label: fn.global-color(--red --quiet --fg), + ), + --active: ( + --bg: fn.global-color(--red --quiet --obj), + --label: fn.global-color(--red --quiet --fg-lo), + ), + --selected: ( + --bg: fn.global-color(--red --quiet --bg), + --label: fn.global-color(--red --quiet --fg), + + --hover: ( + --label: fn.global-color(--red --quiet --fg-lo), + ), + ), + ), + + --blue: ( + --hover: ( + --bg: fn.global-color(--blue --quiet --bg), + --label: fn.global-color(--blue --quiet --fg), + ), + --active: ( + --bg: fn.global-color(--blue --quiet --obj), + --label: fn.global-color(--blue --quiet --fg-lo), + ), + --selected: ( + --bg: fn.global-color(--blue --quiet --bg), + --label: fn.global-color(--blue --quiet --fg), + + --hover: ( + --label: fn.global-color(--blue --quiet --fg-lo), + ), + ), + ), + + --green: ( + --hover: ( + --bg: fn.global-color(--green --quiet --bg), + --label: fn.global-color(--green --quiet --fg), + ), + --active: ( + --bg: fn.global-color(--green --quiet --obj), + --label: fn.global-color(--green --quiet --fg-lo), + ), + --selected: ( + --bg: fn.global-color(--green --quiet --bg), + --label: fn.global-color(--green --quiet --fg), + + --hover: ( + --label: fn.global-color(--green --quiet --fg-lo), + ), + ), + ) ), ), 'colors'); @@ -122,6 +179,47 @@ } } } + + @each $color in 'red' 'blue' 'green' { + @include iro.bem-modifier($color) { + &:link, + &:visited, + &:enabled { + &:hover { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --hover --bg); + color: fn.color(--#{$color} --hover --label); + } + } + + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --active --bg); + color: fn.color(--#{$color} --active --label); + } + } + } + + @include iro.bem-is('selected') { + &:link, + &:visited, + &:enabled { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --selected --bg); + color: fn.color(--#{$color} --selected --label); + } + + &:hover, + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --selected --bg); + color: fn.color(--#{$color} --selected --hover --label); + } + } + } + } + } + } @include iro.bem-at-theme('keyboard') { &:focus { -- cgit v1.2.3-54-g00ecf