From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/objects/_heading.scss | 114 ++++++++++++++++++++++++++-------------------- 1 file changed, 64 insertions(+), 50 deletions(-) (limited to 'src/objects/_heading.scss') diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 0e8392e..87a6269 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,64 +1,70 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'heading.vars'; -@use 'heading.vars' as vars; +@forward "heading.vars"; +@use "heading.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('heading') { - display: block; - margin-block-start: props.get(vars.$margin-bs); - font-family: props.get(vars.$font-family); - font-weight: props.get(vars.$font-weight); + @include bem.object("heading") { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); font-feature-settings: props.get(vars.$feature-settings); - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - text-transform: props.get(vars.$text-transform); - letter-spacing: normal; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + text-transform: props.get(vars.$text-transform); + letter-spacing: normal; & + & { margin-block-start: props.get(vars.$margin-bs-sibling); } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent props.get(vars.$bg-start), - props.get(vars.$bg-color) props.get(vars.$bg-start), - props.get(vars.$bg-color) props.get(vars.$bg-end), - transparent props.get(vars.$bg-end)); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent props.get(vars.$bg-start), + props.get(vars.$bg-color) props.get(vars.$bg-start), + props.get(vars.$bg-color) props.get(vars.$bg-end), + transparent props.get(vars.$bg-end) + ); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in vars.$sizes + { @include bem.modifier($mod) { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes { + @include bem.modifier("display") { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in vars.$display--sizes + { @include bem.modifier($mod) { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); - transform: translateX(props.get(vars.$offset)); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); + transform: translateX(props.get(vars.$offset)); } } } @@ -73,18 +79,26 @@ } } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent props.get(vars.$bg-start), - props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), - props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), - transparent props.get(vars.$bg-end)); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent props.get(vars.$bg-start), + props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), + props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), + transparent props.get(vars.$bg-end) + ); } - @include bem.modifier('display') { + @include bem.modifier("display") { @each $mod, $value in vars.$sizes { @include bem.modifier($mod) { - color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color); + color: props.get( + vars.$static-themes, + $theme, + --display, + --#{$mod}, + --text-color + ); } } } -- cgit v1.3.1