From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src/objects/_checkbox.scss | 261 --------------------------------------------- 1 file changed, 261 deletions(-) delete mode 100644 src/objects/_checkbox.scss (limited to 'src/objects/_checkbox.scss') diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss deleted file mode 100644 index 8527948..0000000 --- a/src/objects/_checkbox.scss +++ /dev/null @@ -1,261 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('checkbox') { - @include iro.props-store(( - --dims: ( - --size: fn.global-dim(--size --175), - --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: ( - --box-border: fn.global-color(--text-mute-more), - --box-bg: fn.global-color(--base --75), - - --hover: ( - --label: fn.global-color(--heading), - --box-border: fn.global-color(--text-mute), - ), - --accent: ( - --box-border: fn.global-color(--accent --900), - - --hover: ( - --box-border: fn.global-color(--accent --1000), - ), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - --box-border: fn.global-color(--border-strong), - --box-bg: fn.global-color(--base --75), - ), - --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()) { - display: inline-block; - position: relative; - margin-inline: - calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) - calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - - @include iro.bem-elem('box') { - display: inline-block; - position: relative; - flex: 0 0 auto; - inline-size: fn.dim(--size); - block-size: fn.dim(--size); - margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); - border: fn.dim(--key-focus --border-offset) solid transparent; - border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); - background-color: fn.color(--box-border); - background-clip: padding-box; - vertical-align: top; - - &::before, - &::after { - content: ''; - display: block; - position: absolute; - } - - &::before { - z-index: 2; - inset-block-start: fn.dim(--border); - inset-inline-start: fn.dim(--border); - inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); - block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); - transition: transform .2s ease; - background-color: fn.color(--box-bg); - } - - &::after { - z-index: 3; - inset-block-start: calc(.5 * fn.dim(--size) - 1px); - inset-inline-start: calc(1.5 * fn.dim(--border)); - box-sizing: border-box; - inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); - block-size: 0; - transform: scale(0); - transition: transform .2s ease; - border-block-width: 0 2px; - border-inline-width: 0 2px; - border-style: solid; - border-radius: 2px; - border-color: fn.color(--box-bg); - } - } - - @include iro.bem-elem('check-icon') { - display: block; - position: absolute; - z-index: 2; - inset-block-start: calc(1 * fn.dim(--border)); - inset-inline-start: calc(1 * fn.dim(--border)); - inline-size: calc(100% - 2 * fn.dim(--border)); - block-size: calc(100% - 2 * fn.dim(--border)); - margin: 0; - transform: scale(0); - transform-origin: 40% 90%; - transition: transform .2s ease; - stroke-width: iro.fn-px-to-rem(3px); - color: fn.color(--box-bg); - } - - @include iro.bem-elem('label') { - margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); - } - - @include iro.bem-elem('native') { - appearance: none; - position: absolute; - z-index: -1; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; - margin: 0; - padding: 0; - overflow: hidden; - border-radius: fn.dim(--rounding); - - &:hover, - &:focus-visible { - @include iro.bem-sibling-elem('label') { - color: fn.color(--hover --label); - } - - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--hover --box-border); - } - } - - &:checked { - @include iro.bem-sibling-elem('box') { - &::before { - transform: scale(0); - } - - @include iro.bem-elem('check-icon') { - transform: scale(1); - } - } - } - - &:indeterminate { - @include iro.bem-sibling-elem('box') { - &::before { - transform: scale(0); - } - - &::after { - transform: scale(1); - } - - @include iro.bem-elem('check-icon') { - transform: scale(0); - } - } - } - - &:disabled { - @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); - } - - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - - &::before { - background-color: fn.color(--disabled --box-bg); - } - } - } - - &:focus-visible { - @include iro.bem-sibling-elem('label') { - color: fn.color(--key-focus --label); - } - - @include iro.bem-sibling-elem('box') { - 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('box') { - margin-block-start: 0; - } - } - - @include iro.bem-modifier('accent') { - @include iro.bem-elem('native') { - &:checked { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --box-border); - } - - &:hover, - &:focus-visible { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --hover --box-border); - } - } - } - - &:indeterminate { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --box-border); - } - - &:hover, - &:focus-visible { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --hover --box-border); - } - } - } - - &:disabled { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - - &::before { - background-color: fn.color(--disabled --box-bg); - } - } - - &:checked { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - } - } - - &:indeterminate { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - } - } - } - } - } - } -} -- cgit v1.2.3-70-g09d2