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/_action-button.scss | 343 ------------------------------------ 1 file changed, 343 deletions(-) delete mode 100644 src_old/objects/_action-button.scss (limited to 'src_old/objects/_action-button.scss') diff --git a/src_old/objects/_action-button.scss b/src_old/objects/_action-button.scss deleted file mode 100644 index 7fe9d44..0000000 --- a/src_old/objects/_action-button.scss +++ /dev/null @@ -1,343 +0,0 @@ -@use 'sass:list'; -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -$sizes: 'sm' 'lg' 'xl' !default; -$static-themes: 'black' 'white' !default; - -@mixin static-theme($theme: ()) { - border-color: fn.color(list.join($theme, --disabled --border)); - background-color: fn.color(list.join($theme, --disabled --bg)); - color: fn.color(list.join($theme, --disabled --label)); - - &::after { - outline-color: fn.color(list.join($theme, --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)); - } - - &:link, - &:visited, - &:enabled { - border-color: fn.color(list.join($theme, --border)); - background-color: fn.color(list.join($theme, --bg)); - color: fn.color(list.join($theme, --label)); - - &:hover, - &:focus-visible { - border-color: fn.color(list.join($theme, --hover --border)); - background-color: fn.color(list.join($theme, --hover --bg)); - color: fn.color(list.join($theme, --hover --label)); - } - - &:active { - border-color: fn.color(list.join($theme, --active --border)); - background-color: fn.color(list.join($theme, --active --bg)); - color: fn.color(list.join($theme, --active --label)); - } - } - - @include iro.bem-modifier('quiet') { - border-color: transparent; - background-color: transparent; - color: fn.color(list.join($theme, --quiet --disabled --label)); - - &:link, - &:visited, - &:enabled { - border-color: transparent; - background-color: transparent; - color: fn.color(list.join($theme, --quiet --label)); - - &:hover, - &:focus-visible { - border-color: transparent; - background-color: fn.color(list.join($theme, --quiet --hover --bg)); - color: fn.color(list.join($theme, --quiet --hover --label)); - } - - &:active { - border-color: transparent; - background-color: fn.color(list.join($theme, --quiet --active --bg)); - color: fn.color(list.join($theme, --quiet --active --label)); - } - } - } - - @include iro.bem-is('selected') { - border-color: fn.color(list.join($theme, --selected --disabled --border)); - background-color: fn.color(list.join($theme, --selected --disabled --bg)); - color: fn.color(list.join($theme, --selected --disabled --label)); - - &:link, - &:visited, - &:enabled { - border-color: fn.color(list.join($theme, --selected --border)); - background-color: fn.color(list.join($theme, --selected --bg)); - color: fn.color(list.join($theme, --selected --label)); - - &:hover, - &:focus-visible { - border-color: fn.color(list.join($theme, --selected --hover --border)); - background-color: fn.color(list.join($theme, --selected --hover --bg)); - color: fn.color(list.join($theme, --selected --hover --label)); - } - - &:active { - border-color: fn.color(list.join($theme, --selected --active --border)); - background-color: fn.color(list.join($theme, --selected --active --bg)); - color: fn.color(list.join($theme, --selected --active --label)); - } - } - } -} - -@include iro.props-namespace('action-button') { - @include iro.props-store(( - --dims: ( - --line-height: 1.4, - --pad-i: fn.global-dim(--size --150), - --pad-i-pill: fn.global-dim(--size --200), - --pad-b: fn.global-dim(--size --85), - --border: fn.global-dim(--border --thin), - --rounding: fn.global-dim(--rounding), - --font-size: fn.global-dim(--font-size --100), - - --sm: ( - --pad-i: fn.global-dim(--size --100), - --pad-i-pill: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --40), - --font-size: fn.global-dim(--font-size --75), - ), - --lg: ( - --pad-i: fn.global-dim(--size --175), - --pad-i-pill: fn.global-dim(--size --225), - --pad-b: fn.global-dim(--size --115), - --font-size: fn.global-dim(--font-size --150), - ), - --xl: ( - --pad-i: fn.global-dim(--size --225), - --pad-i-pill: fn.global-dim(--size --300), - --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(--base --75), - --label: fn.global-color(--text), - --border: fn.global-color(--border-strong), - - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - --border: fn.global-color(--text-mute-more), - ), - --active: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--heading), - --border: fn.global-color(--text-mute), - ), - --disabled: ( - --bg: fn.global-color(--bg-l1), - --label: fn.global-color(--border-strong), - --border: fn.global-color(--border), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - - --selected: ( - --bg: fn.global-color(--text-mute), - --label: fn.global-color(--base --50), - --border: fn.global-color(--text-mute), - - --hover: ( - --bg: fn.global-color(--text), - --label: fn.global-color(--base --50), - --border: fn.global-color(--text), - ), - --active: ( - --bg: fn.global-color(--heading), - --label: fn.global-color(--base --50), - --border: fn.global-color(--heading), - ), - --disabled: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--border-strong), - --border: fn.global-color(--border-mute), - ), - ), - - --quiet: ( - --label: fn.global-color(--text), - - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - ), - --active: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--heading), - ), - --disabled: ( - --label: fn.global-color(--border-strong), - ), - ), - ), - )); - - @each $theme in $static-themes { - @include iro.props-store(( - --colors: ( - --static-#{$theme}: ( - --bg: fn.global-color(--#{$theme}-transparent --100), - --label: fn.global-color(--#{$theme}-transparent --900), - --border: fn.global-color(--#{$theme}-transparent --400), - - --hover: ( - --bg: fn.global-color(--#{$theme}-transparent --300), - --label: fn.global-color(--#{$theme}-transparent --900), - --border: fn.global-color(--#{$theme}-transparent --500), - ), - --active: ( - --bg: fn.global-color(--#{$theme}-transparent --400), - --label: fn.global-color(--#{$theme}-transparent --900), - --border: fn.global-color(--#{$theme}-transparent --600), - ), - --disabled: ( - --bg: fn.global-color(--#{$theme}-transparent --100), - --label: fn.global-color(--#{$theme}-transparent --500), - --border: fn.global-color(--#{$theme}-transparent --300), - ), - --key-focus: ( - --border: fn.global-color(--#{$theme}-transparent --900), - --outline: fn.global-color(--#{$theme}-transparent --300), - ), - - --selected: ( - --bg: fn.global-color(--#{$theme}-transparent --800), - --label: fn.global-color(--#{$theme}-transparent --text), - --border: fn.global-color(--#{$theme}-transparent --100), - - --hover: ( - --bg: fn.global-color(--#{$theme}-transparent --900), - --label: fn.global-color(--#{$theme}-transparent --text), - --border: fn.global-color(--#{$theme}-transparent --100), - ), - --active: ( - --bg: fn.global-color(--#{$theme}-transparent --900), - --label: fn.global-color(--#{$theme}-transparent --text), - --border: fn.global-color(--#{$theme}-transparent --100), - ), - --disabled: ( - --bg: fn.global-color(--#{$theme}-transparent --200), - --label: fn.global-color(--#{$theme}-transparent --500), - --border: fn.global-color(--#{$theme}-transparent --100), - ), - ), - - --quiet: ( - --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: ( - --label: fn.global-color(--#{$theme}-transparent --500), - ), - ), - ), - ) - )); - } - - @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 fn.color(--disabled --border); - border-radius: fn.dim(--rounding); - background-color: fn.color(--disabled --bg); - color: fn.color(--disabled --label); - line-height: fn.dim(--line-height); - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - - &::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 static-theme; - - @each $theme in $static-themes { - @include iro.bem-modifier(static-#{$theme}) { - @include static-theme(--static-#{$theme}); - } - } - - @include iro.bem-modifier('pill') { - padding-inline: fn.dim(--pad-i-pill); - border-radius: 100em; - - &::after { - border-radius: 100em; - } - } - - @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-modifier('pill') { - padding-inline: fn.dim(--#{$size} --pad-i-pill); - } - } - } - - @include iro.bem-modifier('icon') { - inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); - padding-inline: 0; - - @each $size in $sizes { - @include iro.bem-modifier($size) { - inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b)); - padding-inline: 0; - } - } - } - } -} -- cgit v1.2.3-70-g09d2