From e18669958b229235798e31e5ad8608d9fd30c8e8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 16:52:52 +0100 Subject: Added button --- src/objects/_button.scss | 173 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 src/objects/_button.scss (limited to 'src/objects') diff --git a/src/objects/_button.scss b/src/objects/_button.scss new file mode 100644 index 0000000..5da1fbd --- /dev/null +++ b/src/objects/_button.scss @@ -0,0 +1,173 @@ +@use 'iro-sass/src/index' as iro; +@use '../vars'; +@use '../mixins/typography'; + +@mixin button-variant($variant) { + border-color: iro.props-get((--colors, --#{$variant}, --bg)); + background-color: iro.props-get((--colors, --#{$variant}, --bg)); + box-shadow: iro.props-get((--colors, --#{$variant}, --shadow)); + color: iro.props-get((--colors, --#{$variant}, --label)); + + @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:hover { + border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); + background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); + box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow)); + color: iro.props-get((--colors, --#{$variant}, --hover, --label)); + } + + &:active { + border-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); + background-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); + box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow)); + color: iro.props-get((--colors, --#{$variant}, --active, --label)); + } + } + + @include iro.bem-modifier('outline') { + background-color: transparent; + box-shadow: none; + color: iro.props-get((--colors, --#{$variant}, --outline-label)); + } +} + +@include iro.props-namespace('button') { + @include iro.props-store(( + --dims: ( + --padding-x: 1.2rem, + --padding-y: .5rem, + --rounding: 10em, + ), + --colors: ( + --any: ( + --disabled: ( + --bg: iro.props-get(--colors --obj-hi, $global: true), + --label: iro.props-get(--colors --fg-hi3, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --key-focus: ( + --bg: transparent, + --label: iro.props-get(--colors --accent --primary-lo2, $global: true), + --border: iro.props-get(--colors --focus --fill, $global: true), + --shadow: iro.props-get(--colors --focus --shadow, $global: true), + ), + ), + --accent: ( + --bg: iro.props-get(--colors --accent --primary, $global: true), + --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: iro.props-get(--colors --accent --primary-lo, $global: true), + --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: iro.props-get(--colors --accent --primary-lo2, $global: true), + --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + --primary: ( + --bg: iro.props-get(--colors --fg, $global: true), + --label: iro.props-get(--colors --bg-hi2, $global: true), + --outline-label: iro.props-get(--colors --fg, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: iro.props-get(--colors --fg-lo, $global: true), + --label: iro.props-get(--colors --bg-hi2, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: iro.props-get(--colors --fg-lo, $global: true), + --label: iro.props-get(--colors --bg-hi2, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + --secondary: ( + --bg: iro.props-get(--colors --obj-hi, $global: true), + --label: iro.props-get(--colors --fg, $global: true), + --outline-label: iro.props-get(--colors --fg, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: iro.props-get(--colors --obj, $global: true), + --label: iro.props-get(--colors --fg-lo, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: iro.props-get(--colors --obj-lo, $global: true), + --label: iro.props-get(--colors --fg-lo, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + @include typography.set-font(vars.$font--main, (weight: 500)); + + display: inline-block; + padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + border: 2px solid transparent; + border-radius: iro.props-get(--dims --rounding); + line-height: 1; + text-align: center; + text-decoration: none; + + @include iro.bem-modifier('block') { + display: block; + } + + @include iro.bem-modifier('native') { + @include iro.bem-modifier('block') { + box-sizing: border-box; + width: 100%; + } + } + + @include button-variant('secondary'); + + @each $mod in ('accent' 'primary' 'secondary') { + @if $mod != 'secondary' { + @include iro.bem-modifier($mod) { + // sass-lint:disable-block function-name-format + @include button-variant($mod); + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-color: iro.props-get(--colors --any --key-focus --border); + background-color: iro.props-get(--colors --any --key-focus --bg); + box-shadow: iro.props-get(--colors --any --key-focus --shadow); + color: iro.props-get(--colors --any --key-focus --label); + } + } + + @include iro.bem-is('disabled') { + border-color: iro.props-get(--colors --any --disabled --bg); + background-color: iro.props-get(--colors --any --disabled --bg); + box-shadow: iro.props-get(--colors --any --disabled --shadow); + color: iro.props-get(--colors --any --disabled --label); + + @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:hover, + &:active { + border-color: iro.props-get(--colors --any --disabled --bg); + background-color: iro.props-get(--colors --any --disabled --bg); + box-shadow: iro.props-get(--colors --any --disabled --shadow); + color: iro.props-get(--colors --any --disabled --label); + } + } + + @include iro.bem-modifier('outline') { + background-color: transparent; + box-shadow: none; + } + } + } +} -- cgit v1.2.3-54-g00ecf