From 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:17:33 +0100 Subject: Improved variable structure --- src/objects/_switch.scss | 114 ++++++++++++++++++++++++----------------------- 1 file changed, 59 insertions(+), 55 deletions(-) (limited to 'src/objects/_switch.scss') diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 7d5d16d..0fb95f1 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,4 +1,5 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('switch') { @include iro.props-store(( @@ -6,61 +7,64 @@ --width: iro.fn-px-to-rem(26px), --height: iro.fn-px-to-rem(15px), --label-gap: .6rem, - --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), + --margin-right: fn.dim(--spacing --x --md, $global: true), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --track-bg: iro.props-get(--colors --obj, $global: true), - --handle-border: iro.props-get(--colors --fg-hi, $global: true), - --handle-bg: iro.props-get(--colors --bg-hi, $global: true), + --track-bg: fn.color(--obj, $global: true), + --handle-border: fn.color(--fg-hi, $global: true), + --handle-bg: fn.color(--bg-hi, $global: true), --hover: ( - --label: iro.props-get(--colors --fg-lo, $global: true), - --handle-border: iro.props-get(--colors --fg, $global: true), + --label: fn.color(--fg-lo, $global: true), + --handle-border: fn.color(--fg, $global: true), ), --accent: ( - --handle-border: iro.props-get(--colors --accent --primary, $global: true), + --handle-border: fn.color(--accent --primary, $global: true), --hover: ( - --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true), + --handle-border: fn.color(--accent --primary-lo, $global: true), ), ), --key-focus: ( - --label: iro.props-get(--colors --focus --text, $global: true), - --track-bg: iro.props-get(--colors --focus --fill, $global: true), - --handle-border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --label: fn.color(--focus --text, $global: true), + --track-bg: fn.color(--focus --fill, $global: true), + --handle-border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --disabled: ( - --label: iro.props-get(--colors --fg-hi3, $global: true), - --track-bg: iro.props-get(--colors --obj, $global: true), - --handle-border: iro.props-get(--colors --obj-lo, $global: true), - --handle-bg: iro.props-get(--colors --bg-hi, $global: true), + --label: fn.color(--fg-hi3, $global: true), + --track-bg: fn.color(--obj, $global: true), + --handle-border: fn.color(--obj-lo, $global: true), + --handle-bg: fn.color(--bg-hi, $global: true), ) ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); - margin-left: calc(-1 * iro.props-get(--dims --padding-x)); - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values + margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--padding-x)); + padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values @include iro.bem-elem('indicator') { display: block; position: relative; box-sizing: border-box; flex: 0 0 auto; - width: iro.props-get(--dims --width); - height: iro.props-get(--dims --height); - margin-top: calc(.5 * ($line-height * 1em - iro.props-get(--dims --height))); + width: fn.dim(--width); + height: fn.dim(--height); + margin-top: calc(.5 * ($line-height * 1em - fn.dim(--height))); transition: background-color .2s ease; border-radius: 2em; - background-color: iro.props-get(--colors --track-bg); + background-color: fn.color(--track-bg); &::after { content: ''; @@ -69,19 +73,19 @@ z-index: 10; top: 50%; left: 0; - width: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); - height: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); + width: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); + height: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); transform: translateY(-50%); transition: left .2s ease; - border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border); - border-radius: iro.props-get(--dims --width); - background-color: iro.props-get(--colors --handle-bg); + border: fn.dim(--border-width) 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: iro.props-get(--dims --label-gap); + margin-left: fn.dim(--label-gap); } @include iro.bem-elem('native') { @@ -97,32 +101,32 @@ &:hover { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --hover --label); + color: fn.color(--hover --label); } @include iro.bem-sibling-elem('indicator') { &::after { - border-color: iro.props-get(--colors --hover --handle-border); + border-color: fn.color(--hover --handle-border); } } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --handle-border); + background-color: fn.color(--handle-border); &::after { - left: calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px); - border-color: iro.props-get(--colors --handle-border); + left: calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px); + border-color: fn.color(--handle-border); } } &:hover { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --hover --handle-border); + background-color: fn.color(--hover --handle-border); &::after { - border-color: iro.props-get(--colors --hover --handle-border); + border-color: fn.color(--hover --handle-border); } } } @@ -130,24 +134,24 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --disabled --label); + color: fn.color(--disabled --label); } @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --disabled --track-bg); + background-color: fn.color(--disabled --track-bg); &::after { - border-color: iro.props-get(--colors --disabled --handle-border); - background-color: iro.props-get(--colors --disabled --handle-bg); + border-color: fn.color(--disabled --handle-border); + background-color: fn.color(--disabled --handle-bg); } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --disabled --handle-border); + background-color: fn.color(--disabled --handle-border); &::after { - border-color: iro.props-get(--colors --disabled --handle-border); + border-color: fn.color(--disabled --handle-border); } } } @@ -156,19 +160,19 @@ @include iro.bem-at-theme('keyboard') { &:focus { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --key-focus --label); + color: fn.color(--key-focus --label); } @include iro.bem-sibling-elem('indicator') { &::after { - border-color: iro.props-get(--colors --key-focus --handle-border); - box-shadow: iro.props-get(--colors --key-focus --shadow); + border-color: fn.color(--key-focus --handle-border); + box-shadow: fn.color(--key-focus --shadow); } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --key-focus --track-bg); + background-color: fn.color(--key-focus --track-bg); } } } @@ -179,19 +183,19 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --accent --handle-border); + background-color: fn.color(--accent --handle-border); &::after { - border-color: iro.props-get(--colors --accent --handle-border); + border-color: fn.color(--accent --handle-border); } } &:hover { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --accent --hover --handle-border); + background-color: fn.color(--accent --hover --handle-border); &::after { - border-color: iro.props-get(--colors --accent --hover --handle-border); + border-color: fn.color(--accent --hover --handle-border); } } } @@ -199,15 +203,15 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --disabled --label); + color: fn.color(--disabled --label); } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --disabled --handle-border); + background-color: fn.color(--disabled --handle-border); &::after { - border-color: iro.props-get(--colors --disabled --handle-border); + border-color: fn.color(--disabled --handle-border); } } } -- cgit v1.2.3-70-g09d2