From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/.old/objects/_overflow-button.scss | 243 +++++++++++++++++++++++++++++++++ 1 file changed, 243 insertions(+) create mode 100644 src/.old/objects/_overflow-button.scss (limited to 'src/.old/objects/_overflow-button.scss') diff --git a/src/.old/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss new file mode 100644 index 0000000..b15ea1f --- /dev/null +++ b/src/.old/objects/_overflow-button.scss @@ -0,0 +1,243 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('overflow-button') { + @include iro.props-store(( + --dims: ( + --pad-x: calc(fn.global-dim(--size --125) - 1px), + --pad-y: calc(fn.global-dim(--size --125) - 1px), + --spacing: fn.global-dim(--size --50) + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --label: fn.global-color(--fg), + + --hover: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --active: ( + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-lo), + ), + --selected: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg), + + --hover: ( + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-lo), + ), + ), + --disabled: ( + --label: fn.global-color(--fg-hi3), + ), + --key-focus: ( + --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: ( + --bg: fn.global-color(--red --quiet --obj), + --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: ( + --bg: fn.global-color(--blue --quiet --obj), + --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: ( + --bg: fn.global-color(--green --quiet --obj), + --label: fn.global-color(--green --quiet --fg-lo), + ), + ), + ) + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + color: fn.color(--disabled --label); + + @include iro.bem-elem('outside') { + display: inline-block; + margin-right: fn.dim(--spacing); + } + + @include iro.bem-elem('inside') { + display: inline-block; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border: 2px solid transparent; + border-radius: 100em; + line-height: 1; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + + @include iro.bem-next-elem('outside') { + margin-right: 0; + margin-left: fn.dim(--spacing); + } + } + + &:link, + &:visited, + &:enabled { + color: fn.color(--label); + + &:hover { + @include iro.bem-elem('inside') { + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + } + + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--active --bg); + color: fn.color(--active --label); + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-elem('inside') { + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + } + } + } + + @include iro.bem-is('selected') { + @include iro.bem-elem('inside') { + background-color: fn.color(--selected --bg); + } + + &:link, + &:visited, + &:enabled { + @include iro.bem-elem('inside') { + color: fn.color(--selected --label); + } + + &:hover, + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--selected --hover --bg); + color: fn.color(--selected --hover --label); + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-elem('inside') { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + } + } + } + } + + @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 --hover --bg); + color: fn.color(--#{$color} --selected --hover --label); + } + } + } + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-elem('inside') { + border-color: fn.color(--key-focus --border); + box-shadow: fn.color(--key-focus --shadow); + } + } + } + } +} -- cgit v1.2.3-70-g09d2