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/_button.scss | 179 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 src/.old/objects/_button.scss (limited to 'src/.old/objects/_button.scss') diff --git a/src/.old/objects/_button.scss b/src/.old/objects/_button.scss new file mode 100644 index 0000000..7cc24fa --- /dev/null +++ b/src/.old/objects/_button.scss @@ -0,0 +1,179 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@mixin button-variant($variant) { + &:link, + &:visited, + &:enabled { + border-color: fn.color(--#{$variant} --bg); + background-color: fn.color(--#{$variant} --bg); + box-shadow: fn.color(--#{$variant} --shadow); + color: fn.color(--#{$variant} --label); + } + + @include iro.bem-modifier('outline') { + &:link, + &:visited, + &:enabled { + background-color: transparent; + box-shadow: none; + color: fn.color(--#{$variant} --outline-label); + } + } + + &:link, + &:visited, + &:enabled { + &:hover { + border-color: fn.color(--#{$variant} --hover --bg); + background-color: fn.color(--#{$variant} --hover --bg); + box-shadow: fn.color(--#{$variant} --hover --shadow); + color: fn.color(--#{$variant} --hover --label); + } + + &:active { + border-color: fn.color(--#{$variant} --active --bg); + background-color: fn.color(--#{$variant} --active --bg); + box-shadow: fn.color(--#{$variant} --active --shadow); + color: fn.color(--#{$variant} --active --label); + } + } +} + +@include iro.props-namespace('button') { + @include iro.props-store(( + --dims: ( + --line-height: 1.4, + --pad-x: fn.global-dim(--size --225), + --pad-y: fn.global-dim(--size --65), + --rounding: 10em, + + --lg: ( + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --100), + ), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --any: ( + --disabled: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-hi3), + --shadow: 0 0 0 0 transparent, + ), + --key-focus: ( + --bg: transparent, + --label: fn.global-color(--focus --text), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), + ), + ), + --accent: ( + --bg: fn.global-color(--accent --primary --solid --bg), + --label: fn.global-color(--accent --primary --solid --fg), + --outline-label: fn.global-color(--accent --primary --solid --obj), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: fn.global-color(--accent --primary --solid --obj), + --label: fn.global-color(--accent --primary --solid --fg), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: fn.global-color(--accent --primary --solid --obj-lo), + --label: fn.global-color(--accent --primary --solid --fg), + --shadow: 0 0 0 0 transparent, + ), + ), + --primary: ( + --bg: fn.global-color(--fg), + --label: fn.global-color(--bg-hi2), + --outline-label: fn.global-color(--fg), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: fn.global-color(--fg-lo), + --label: fn.global-color(--bg-hi2), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: fn.global-color(--fg-lo), + --label: fn.global-color(--bg-hi2), + --shadow: 0 0 0 0 transparent, + ), + ), + --secondary: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg), + --outline-label: fn.global-color(--fg), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-lo), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: fn.global-color(--obj-lo), + --label: fn.global-color(--fg-lo), + --shadow: 0 0 0 0 transparent, + ), + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border: 2px solid transparent; + border-radius: fn.dim(--rounding); + border-color: fn.color(--any --disabled --bg); + background-color: fn.color(--any --disabled --bg); + box-shadow: fn.color(--any --disabled --shadow); + color: fn.color(--any --disabled --label); + font-weight: 500; + line-height: fn.dim(--line-height); + text-align: center; + text-decoration: none; + vertical-align: top; + + @include iro.bem-modifier('block') { + display: block; + } + + @include iro.bem-modifier('outline') { + background-color: transparent; + box-shadow: none; + } + + @include iro.bem-modifier('lg') { + padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x); + } + + @include button-variant('secondary'); + + @each $mod in 'accent' 'primary' { + @include iro.bem-modifier($mod) { + @include button-variant($mod); + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-color: fn.color(--any --key-focus --border); + background-color: fn.color(--any --key-focus --bg); + box-shadow: fn.color(--any --key-focus --shadow); + color: fn.color(--any --key-focus --label); + } + } + + @include iro.bem-modifier('round') { + width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y)); + padding-right: 0; + padding-left: 0; + border-radius: 100em; + } + } +} -- cgit v1.2.3-54-g00ecf