From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/objects/_switch.scss | 222 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 src/objects/_switch.scss (limited to 'src/objects/_switch.scss') diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss new file mode 100644 index 0000000..fa903b1 --- /dev/null +++ b/src/objects/_switch.scss @@ -0,0 +1,222 @@ +@use 'iro-sass/src/iro-sass' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('switch') { + @include iro.props-store(( + --dims: ( + --width: fn.global-dim(--size --350), + --height: fn.global-dim(--size --200), + --label-gap: fn.global-dim(--size --125), + --border: fn.global-dim(--border --medium), + --pad-i: fn.global-dim(--size --65), + --pad-b: fn.global-dim(--size --65), + --rounding: fn.global-dim(--rounding), + --spacing-sibling: fn.global-dim(--size --300), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --outline), + ), + ), + --colors: ( + --track-bg: fn.global-color(--border), + --handle-border: fn.global-color(--text-mute-more), + --handle-bg: fn.global-color(--base --50), + + --hover: ( + --label: fn.global-color(--heading), + --handle-border: fn.global-color(--text-mute), + ), + --accent: ( + --handle-border: fn.global-color(--accent --900), + + --hover: ( + --handle-border: fn.global-color(--accent --1000), + ), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + --track-bg: fn.global-color(--border), + --handle-border: fn.global-color(--border-strong), + --handle-bg: fn.global-color(--base --50), + ), + --key-focus: ( + --label: fn.global-color(--focus --text), + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + position: relative; + display: inline-block; + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + margin-inline: + calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) + calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); + + @include iro.bem-elem('indicator') { + display: inline-block; + flex: 0 0 auto; + inline-size: fn.dim(--width); + block-size: fn.dim(--height); + margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); + vertical-align: top; + background-color: fn.color(--track-bg); + background-clip: padding-box; + border: fn.dim(--key-focus --border-offset) solid transparent; + border-radius: 2em; + transition: background-color .2s ease; + + &::after { + display: block; + inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); + block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); + content: ''; + background-color: fn.color(--handle-bg); + border: fn.dim(--border) solid fn.color(--handle-border); + border-radius: fn.dim(--width); + transition: transform .2s ease; + } + } + + @include iro.bem-elem('label') { + margin-inline-start: fn.dim(--label-gap); + } + + @include iro.bem-elem('native') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: fn.dim(--rounding); + + &:hover, + &:focus-visible { + @include iro.bem-sibling-elem('label') { + color: fn.color(--hover --label); + } + + @include iro.bem-sibling-elem('indicator') { + &::after { + border-color: fn.color(--hover --handle-border); + } + } + } + + &:checked { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--handle-border); + + &::after { + border-color: fn.color(--handle-border); + transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); + } + } + + &:hover, + &:focus-visible { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--hover --handle-border); + + &::after { + border-color: fn.color(--hover --handle-border); + } + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('label') { + color: fn.color(--disabled --label); + } + + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--disabled --track-bg); + + &::after { + background-color: fn.color(--disabled --handle-bg); + border-color: fn.color(--disabled --handle-border); + } + } + + &:checked { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--disabled --handle-border); + + &::after { + border-color: fn.color(--disabled --handle-border); + } + } + } + } + + &:focus-visible { + @include iro.bem-sibling-elem('label') { + color: fn.color(--key-focus --label); + } + + @include iro.bem-sibling-elem('indicator') { + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + } + } + } + + @include iro.bem-modifier('standalone') { + @include iro.bem-elem('indicator') { + margin-block-start: 0; + } + } + + @include iro.bem-modifier('accent') { + @include iro.bem-elem('native') { + &:checked { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--accent --handle-border); + + &::after { + border-color: fn.color(--accent --handle-border); + } + } + + &:hover, + &:focus-visible { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--accent --hover --handle-border); + + &::after { + border-color: fn.color(--accent --hover --handle-border); + } + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('label') { + color: fn.color(--disabled --label); + } + + &:checked { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--disabled --handle-border); + + &::after { + border-color: fn.color(--disabled --handle-border); + } + } + } + } + } + } + } +} -- cgit v1.3.1