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/_switch.scss | 221 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 src/.old/objects/_switch.scss (limited to 'src/.old/objects/_switch.scss') diff --git a/src/.old/objects/_switch.scss b/src/.old/objects/_switch.scss new file mode 100644 index 0000000..cbbb9b7 --- /dev/null +++ b/src/.old/objects/_switch.scss @@ -0,0 +1,221 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('switch') { + @include iro.props-store(( + --dims: ( + --width: fn.global-dim(--size --325), + --height: calc(fn.global-dim(--size --175) + 1px), + --label-gap: fn.global-dim(--size --125), + --border: fn.global-dim(--border --medium), + --pad-x: fn.global-dim(--size --65), + --pad-y: fn.global-dim(--size --65), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --track-bg: fn.global-color(--obj), + --handle-border: fn.global-color(--fg-hi), + --handle-bg: fn.global-color(--bg-hi), + + --hover: ( + --label: fn.global-color(--fg-lo), + --handle-border: fn.global-color(--fg), + ), + --accent: ( + --handle-border: fn.global-color(--accent --primary --solid --bg), + + --hover: ( + --handle-border: fn.global-color(--accent --primary --solid --obj), + ), + ), + --key-focus: ( + --label: fn.global-color(--focus --text), + --track-bg: fn.global-color(--focus --fill), + --handle-border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), + ), + --disabled: ( + --label: fn.global-color(--fg-hi3), + --track-bg: fn.global-color(--obj), + --handle-border: fn.global-color(--obj-lo), + --handle-bg: fn.global-color(--bg-hi), + ) + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-flex; + position: relative; + align-items: flex-start; + margin-right: calc(-1 * fn.dim(--pad-x)); + margin-left: calc(-1 * fn.dim(--pad-x)); + padding: fn.dim(--pad-y) fn.dim(--pad-x); + + @include iro.bem-elem('indicator') { + display: block; + box-sizing: border-box; + flex: 0 0 auto; + width: fn.dim(--width); + height: fn.dim(--height); + margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height))); + transition: background-color .2s ease; + border-radius: 2em; + background-color: fn.color(--track-bg); + + &::after { + content: ''; + display: block; + width: calc(fn.dim(--height) - 2 * fn.dim(--border)); + height: calc(fn.dim(--height) - 2 * fn.dim(--border)); + transition: transform .2s ease; + border: fn.dim(--border) solid fn.color(--handle-border); + border-radius: fn.dim(--width); + background-color: fn.color(--handle-bg); + } + } + + @include iro.bem-elem('label') { + align-self: baseline; + margin-left: fn.dim(--label-gap); + } + + @include iro.bem-elem('native') { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + opacity: .0001; + + &:hover { + @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 { + transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); + border-color: fn.color(--handle-border); + } + } + + &:hover { + @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 { + border-color: fn.color(--disabled --handle-border); + background-color: fn.color(--disabled --handle-bg); + } + } + + &:checked { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--disabled --handle-border); + + &::after { + border-color: fn.color(--disabled --handle-border); + } + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-sibling-elem('label') { + color: fn.color(--key-focus --label); + } + + @include iro.bem-sibling-elem('indicator') { + &::after { + border-color: fn.color(--key-focus --handle-border); + box-shadow: fn.color(--key-focus --shadow); + } + } + + &:checked { + @include iro.bem-sibling-elem('indicator') { + background-color: fn.color(--key-focus --track-bg); + } + } + } + } + } + + @include iro.bem-modifier('standalone') { + @include iro.bem-elem('indicator') { + margin-top: 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 { + @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.2.3-70-g09d2