From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/scopes/_links.scss | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 src/scopes/_links.scss (limited to 'src/scopes/_links.scss') diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss new file mode 100644 index 0000000..69793b2 --- /dev/null +++ b/src/scopes/_links.scss @@ -0,0 +1,93 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; + +@forward 'links.vars'; +@use 'links.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-scope('links') { + :link, + :visited { + color: currentColor; + text-decoration: underline; + text-decoration-thickness: props.get(vars.$underline-width); + text-decoration-color: props.get(vars.$underline-color); + border-radius: props.get(vars.$rounding); + box-decoration-break: clone; + + &:hover { + text-decoration: underline; + text-decoration-skip-ink: none; + text-decoration-thickness: props.get(vars.$hover--underline-width); + } + + &:focus-visible { + color: props.get(vars.$key-focus--text-color); + text-decoration: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + + @include iro.bem-modifier('invisible') { + :link, + :visited { + text-decoration: none; + } + } + + @include iro.bem-modifier('colored') { + :link { + color: props.get(vars.$colored--text-color); + text-decoration-color: props.get(vars.$colored--underline-color); + + &:hover { + color: props.get(vars.$colored--hover--text-color); + } + } + + :visited { + color: props.get(vars.$colored--visited--text-color); + text-decoration-color: props.get(vars.$colored--visited--underline-color); + + &:hover { + color: props.get(vars.$colored--visited--hover--text-color); + } + } + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include iro.bem-modifier($theme) { + :link, + :visited { + color: props.get(vars.$static-themes, $theme, --text-color); + text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); + + &:hover { + color: props.get(vars.$static-themes, $theme, --hover, --text-color); + } + + &:focus-visible { + color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); + outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$static-themes, $theme, --key-focus, --outline-color); + } + } + } + } + } +} -- cgit v1.3.1