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/objects/_heading.scss | 118 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 src_old/objects/_heading.scss (limited to 'src_old/objects/_heading.scss') diff --git a/src_old/objects/_heading.scss b/src_old/objects/_heading.scss new file mode 100644 index 0000000..7990a6b --- /dev/null +++ b/src_old/objects/_heading.scss @@ -0,0 +1,118 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; +@use '../config'; +@use 'include-media/dist/include-media' as media; + +$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; + +@include iro.props-namespace('heading') { + @include iro.props-store(( + --dims: ( + --offset: -.02em, + ), + --colors: ( + --bg: fn.global-color(--base --50), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + @include mx.set-font(--headline); + + display: block; + margin-block-start: fn.global-dim(--heading --margin-bs); + transform: translateX(fn.dim(--offset)); + letter-spacing: normal; + text-transform: none; + + & + & { + margin-block-start: fn.global-dim(--heading --margin-bs-sibling); + } + + @include iro.bem-elem('highlight') { + background-image: linear-gradient( + to top, + transparent .05em, + fn.color(--bg) .05em, + fn.color(--bg) .5em, + transparent .5em + ); + } + + @include iro.bem-modifier('xxl') { + @include mx.heading-strong(--xxl); + } + + @include iro.bem-modifier('xl') { + @include mx.heading-strong(--xl); + } + + @include iro.bem-modifier('lg') { + @include mx.heading-medium(--lg); + } + + @include iro.bem-modifier('md') { + @include mx.heading-medium(--md); + } + + @include iro.bem-modifier('sm') { + @include mx.heading-faint(--sm); + } + + @include iro.bem-modifier('xs') { + @include mx.heading-faint(--xs); + } + + @include iro.bem-modifier('display') { + @include mx.set-font(--headline); + + @include iro.bem-modifier('xxl') { + @include mx.heading-strong(--display --xxl); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --xxl); + } + } + + @include iro.bem-modifier('xl') { + @include mx.heading-strong(--display --xl); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --xl); + } + } + + @include iro.bem-modifier('lg') { + @include mx.heading-strong(--display --lg); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --lg); + } + } + + @include iro.bem-modifier('md') { + @include mx.heading-strong(--display --md); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --md); + } + } + + @include iro.bem-modifier('sm') { + @include mx.heading-medium(--display --sm); + + @include media.media('<=md') { + @include mx.heading-medium(--display-sm --sm); + } + } + + @include iro.bem-modifier('xs') { + @include mx.heading-faint(--display --xs); + + @include media.media('<=md') { + @include mx.heading-faint(--display-sm --xs); + } + } + } + } +} -- cgit v1.3.1