From 4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 19:37:18 +0200 Subject: Remove old code --- src_old/objects/_button.scss | 301 ------------------------------------------- 1 file changed, 301 deletions(-) delete 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 deleted file mode 100644 index d195e05..0000000 --- a/src_old/objects/_button.scss +++ /dev/null @@ -1,301 +0,0 @@ -@use 'sass:list'; -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -$sizes: 'sm' 'lg' 'xl' !default; -$themes: 'accent' 'negative' !default; -$static-themes: 'black' 'white' !default; - -@mixin theme($theme: ()) { - &:link, - &:visited, - &:enabled { - border-color: transparent; - background-color: fn.color(list.join($theme, --bg)); - color: fn.color(list.join($theme, --label)); - } - - @include iro.bem-modifier('outline') { - &:link, - &:visited, - &:enabled { - border-color: fn.color(list.join($theme, --outline-border)); - background-color: transparent; - color: fn.color(list.join($theme, --outline-label)); - } - } - - &:link, - &:visited, - &:enabled { - &:hover, - &:focus-visible { - border-color: transparent; - background-color: fn.color(list.join($theme, --hover --bg)); - color: fn.color(list.join($theme, --hover --label)); - } - - &:active { - border-color: transparent; - background-color: fn.color(list.join($theme, --active --bg)); - color: fn.color(list.join($theme, --active --label)); - } - } -} - -@mixin static-theme($theme: ()) { - border-color: transparent; - background-color: fn.color(list.join($theme, --disabled --bg)); - color: fn.color(list.join($theme, --disabled --label)); - - &::after { - outline: fn.color(list.join($theme, --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(list.join($theme, --key-focus --outline)); - } - - @include iro.bem-modifier('outline') { - border-color: fn.color(list.join($theme, --disabled --outline-border)); - background-color: transparent; - } - - @include theme($theme); - - @include iro.bem-modifier('primary') { - @include theme(list.join($theme, --primary)); - } -} - -@include iro.props-namespace('button') { - @include iro.props-store(( - --dims: ( - --line-height: 1.4, - --pad-i: fn.global-dim(--size --200), - --pad-i-label: fn.global-dim(--size --75), - --pad-b: fn.global-dim(--size --65), - --border: fn.global-dim(--border --medium), - --rounding: 10em, - --font-size: fn.global-dim(--font-size --100), - - --sm: ( - --pad-i: fn.global-dim(--size --150), - --pad-i-label: fn.global-dim(--size --50), - --pad-b: fn.global-dim(--size --25), - --font-size: fn.global-dim(--font-size --75), - ), - --lg: ( - --pad-i: fn.global-dim(--size --250), - --pad-i-label: fn.global-dim(--size --100), - --pad-b: fn.global-dim(--size --100), - --font-size: fn.global-dim(--font-size --150), - ), - --xl: ( - --pad-i: fn.global-dim(--size --300), - --pad-i-label: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --150), - --font-size: fn.global-dim(--font-size --200), - ), - - --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: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--text), - --outline-border: fn.global-color(--border), - --outline-label: fn.global-color(--text), - - --hover: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--heading), - ), - --active: ( - --bg: fn.global-color(--border-strong), - --label: fn.global-color(--heading), - ), - --disabled: ( - --bg: fn.global-color(--border-mute), - --outline-border: fn.global-color(--border), - --label: fn.global-color(--text-disabled), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - - --primary: ( - --bg: fn.global-color(--base --800), - --label: fn.global-color(--base --800-text), - --outline-border: fn.global-color(--base --800), - --outline-label: fn.global-color(--text), - - --hover: ( - --bg: fn.global-color(--base --900), - --label: fn.global-color(--base --900-text), - ), - --active: ( - --bg: fn.global-color(--base --900), - --label: fn.global-color(--base --900-text), - ), - ), - ), - )); - - @each $theme in $themes { - @include iro.props-store(( - --colors: ( - --#{$theme}: ( - --bg: fn.global-color(--static-#{$theme} --900), - --label: fn.global-color(--static-#{$theme} --900-text), - --outline-border: fn.global-color(--#{$theme} --900), - --outline-label: fn.global-color(--#{$theme} --1000), - - --hover: ( - --bg: fn.global-color(--static-#{$theme} --1000), - --label: fn.global-color(--static-#{$theme} --1000-text), - ), - --active: ( - --bg: fn.global-color(--static-#{$theme} --1100), - --label: fn.global-color(--static-#{$theme} --1100-text), - ), - ), - ), - )); - } - - @each $theme in $static-themes { - @include iro.props-store(( - --colors: ( - --static-#{$theme}: ( - --bg: fn.global-color(--#{$theme}-transparent --200), - --label: fn.global-color(--#{$theme}-transparent --900), - --outline-border: fn.global-color(--#{$theme}-transparent --300), - --outline-label: fn.global-color(--#{$theme}-transparent --900), - - --hover: ( - --bg: fn.global-color(--#{$theme}-transparent --300), - --label: fn.global-color(--#{$theme}-transparent --900), - ), - --active: ( - --bg: fn.global-color(--#{$theme}-transparent --400), - --label: fn.global-color(--#{$theme}-transparent --900), - ), - --disabled: ( - --bg: fn.global-color(--#{$theme}-transparent --200), - --outline-border: fn.global-color(--#{$theme}-transparent --300), - --label: fn.global-color(--#{$theme}-transparent --500), - ), - --key-focus: ( - --bg: fn.global-color(--#{$theme}-transparent --100), - --label: fn.global-color(--#{$theme}-transparent --900), - --border: fn.global-color(--#{$theme}-transparent --900), - --outline: fn.global-color(--#{$theme}-transparent --300), - ), - - --primary: ( - --bg: fn.global-color(--#{$theme}-transparent --800), - --label: fn.global-color(--#{$theme}-transparent --text), - --outline-border: fn.global-color(--#{$theme}-transparent --800), - --outline-label: fn.global-color(--#{$theme}-transparent --900), - - --hover: ( - --bg: fn.global-color(--#{$theme}-transparent --900), - --label: fn.global-color(--#{$theme}-transparent --text), - ), - --active: ( - --bg: fn.global-color(--#{$theme}-transparent --900), - --label: fn.global-color(--#{$theme}-transparent --text), - ), - ), - ), - ), - )); - } - - @include iro.bem-object(iro.props-namespace()) { - display: inline-block; - position: relative; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - border: fn.dim(--border) solid transparent; - border-radius: fn.dim(--rounding); - border-color: fn.color(--disabled --bg); - background-color: fn.color(--disabled --bg); - color: fn.color(--disabled --label); - font-size: fn.dim(--font-size); - font-weight: 500; - line-height: fn.dim(--line-height); - text-align: center; - text-decoration: none; - - &::after { - content: ''; - display: none; - position: absolute; - z-index: 1; - inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); - border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); - 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); - pointer-events: none; - } - - &:link, - &:visited, - &:enabled { - &:focus-visible { - &::after { - display: block; - } - } - } - - @include iro.bem-elem('label') { - margin-inline: fn.dim(--pad-i-label); - } - - @include iro.bem-modifier('block') { - display: block; - } - - @include iro.bem-modifier('outline') { - border-color: fn.color(--disabled --outline-border); - background-color: transparent; - } - - @each $size in $sizes { - @include iro.bem-modifier($size) { - padding-block: fn.dim(--#{$size} --pad-b); - padding-inline: fn.dim(--#{$size} --pad-i); - font-size: fn.dim(--#{$size} --font-size); - - @include iro.bem-elem('label') { - margin-inline: fn.dim(--#{$size} --pad-i-label); - } - } - } - - @include static-theme; - - @each $theme in $themes { - @include iro.bem-modifier($theme) { - @include theme(--#{$theme}); - } - } - - @each $theme in $static-themes { - @include iro.bem-modifier(static-#{$theme}) { - @include static-theme(--static-#{$theme}); - } - } - - @include iro.bem-modifier('round') { - inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); - padding-inline: 0; - border-radius: 100em; - } - } -} -- cgit v1.2.3-70-g09d2