From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/.old/objects/_list-group.scss | 60 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/.old/objects/_list-group.scss (limited to 'src/.old/objects/_list-group.scss') diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss new file mode 100644 index 0000000..d46722e --- /dev/null +++ b/src/.old/objects/_list-group.scss @@ -0,0 +1,60 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('list-group') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --175), + --pad-y: fn.global-dim(--size --125), + --rounding: 3px, + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg-hi2), + --border: fn.global-color(--obj), + --hover: fn.global-color(--bg), + --press: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + border: 1px solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + + @include iro.bem-elem('item') { + padding: fn.dim(--pad-y) fn.dim(--pad-x); + + @include iro.bem-next-twin-elem { + border-width: 1px 0 0; + border-style: solid; + border-color: fn.color(--border); + } + + @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover { + background-color: fn.color(--hover); + } + + &:active { + background-color: fn.color(--press); + } + } + } + + @include iro.bem-modifier('horizontal') { + display: flex; + + @include iro.bem-elem('item') { + flex: 1 0 auto; + + @include iro.bem-next-twin-elem { + border-top-width: 0; + border-left-width: 1px; + } + } + } + } +} -- cgit v1.2.3-54-g00ecf