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_old/layouts/_media.scss | 47 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src_old/layouts/_media.scss (limited to 'src_old/layouts/_media.scss') diff --git a/src_old/layouts/_media.scss b/src_old/layouts/_media.scss new file mode 100644 index 0000000..c42aa3e --- /dev/null +++ b/src_old/layouts/_media.scss @@ -0,0 +1,47 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +$sizes: 'gapless' 'sm' 'lg' 'xl' !default; + +@include iro.props-namespace('media') { + @include iro.props-store(( + --dims: ( + --gap: fn.global-dim(--size --150), + + --gapless: 0, + --sm: fn.global-dim(--size --100), + --lg: fn.global-dim(--size --300), + --xl: fn.global-dim(--size --450), + ) + )); + + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + align-items: center; + gap: fn.dim(--gap); + line-height: 1.4; + + @each $size in $sizes { + @include iro.bem-modifier($size) { + gap: fn.dim(--#{$size}); + } + } + + @include iro.bem-modifier('wrap') { + flex-wrap: wrap; + } + + @include iro.bem-elem('block') { + flex: 0 0 auto; + + @include iro.bem-modifier('shrink', 'main') { + flex-shrink: 1; + min-inline-size: 0; + } + + @include iro.bem-modifier('main') { + inline-size: 100%; + } + } + } +} -- cgit v1.2.3-70-g09d2