From 6448b40f6224b271acb6010cac0672dec4755341 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 08:51:30 +0200 Subject: Update --- src/objects/_card.scss | 129 +++++++++++++++++++++---------------------------- 1 file changed, 54 insertions(+), 75 deletions(-) (limited to 'src/objects/_card.scss') diff --git a/src/objects/_card.scss b/src/objects/_card.scss index cc9afc9..25e68d2 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -1,70 +1,44 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('card') { - @include iro.props-store(( - --dims: ( - --divider: fn.global-dim(--border --thin), - --pad-i: fn.global-dim(--size --300), - --pad-b: fn.global-dim(--size --250), - --spacing: fn.global-dim(--size --200), - --rounding: fn.global-dim(--rounding), - - --hover: ( - --offset-b: calc(-1 * fn.global-dim(--size --65)), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - --colors: ( - --bg: fn.global-color(--bg-l2), - --divider: fn.global-color(--border-mute), - - --key-focus: ( - --label: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - - --quiet: ( - --image: fn.global-color(--bg-base), - - --hover: ( - --image: fn.global-color(--border), - ), - ) - ), - )); - - @include iro.bem-object(iro.props-namespace()) { +@use '../props'; +@use 'avatar.vars' as avatar; + +@forward 'card.vars'; +@use 'card.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('card') { display: block; - margin: calc(-1 * fn.dim(--key-focus --border)); - background-color: fn.color(--bg); + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + background-color: props.get(vars.$bg-color); background-clip: content-box; - border: fn.dim(--key-focus --border-offset) solid transparent; - border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); transition: transform .2s; @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, &:active, &:focus-visible { - transform: translateY(fn.dim(--hover --offset-b)); + transform: translateY(props.get(vars.$hover--offset-b)); } &:focus-visible { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + 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-elem('avatar') { - margin-block-start: fn.dim(--pad-b); - margin-inline-start: fn.dim(--pad-i); + margin-block-start: props.get(vars.$pad-b); + margin-inline-start: props.get(vars.$pad-i); } @include iro.bem-elem('image') { @@ -74,23 +48,23 @@ transition: transform .2s, opacity .2s; &:first-child { - border-start-start-radius: fn.dim(--rounding); - border-start-end-radius: fn.dim(--rounding); + border-start-start-radius: props.get(vars.$rounding); + border-start-end-radius: props.get(vars.$rounding); } &:last-child { - border-end-start-radius: fn.dim(--rounding); - border-end-end-radius: fn.dim(--rounding); + border-end-start-radius: props.get(vars.$rounding); + border-end-end-radius: props.get(vars.$rounding); } @include iro.bem-next-elem('avatar') { - margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); + margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); } } @include iro.bem-elem('body') { - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); &::before { display: block; @@ -100,20 +74,20 @@ } @include iro.bem-elem('content') { - margin-block-start: fn.dim(--spacing); + margin-block-start: props.get(vars.$spacing); } @include iro.bem-elem('footer') { - padding-block: 0 fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - margin-block-start: calc(-1 * fn.dim(--pad-b)); + padding-block: 0 props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin-block-start: calc(-1 * props.get(vars.$pad-b)); &::before { display: block; - block-size: fn.dim(--divider); - margin-block: fn.dim(--spacing); + block-size: props.get(vars.$divider-width); + margin-block: props.get(vars.$spacing); content: ''; - background-color: fn.color(--divider); + background-color: props.get(vars.$divider-width); } } @@ -129,9 +103,9 @@ transform: none; @include iro.bem-elem('image') { - background-color: fn.color(--quiet --hover --image); + background-color: props.get(vars.$quiet--hover--image-color); opacity: .75; - transform: translateY(fn.dim(--hover --offset-b)); + transform: translateY(props.get(vars.$hover--offset-b)); } } @@ -140,9 +114,14 @@ box-shadow: none; @include iro.bem-elem('image') { - background-color: fn.color(--quiet --hover --image); - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + background-color: props.get(vars.$quiet--hover--image-color); + 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-width); opacity: 1; } } @@ -150,16 +129,16 @@ @include iro.bem-elem('image') { position: relative; - margin: calc(-1 * fn.dim(--key-focus --border)); - background-color: fn.color(--quiet --image); + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + background-color: props.get(vars.$quiet--image-color); background-clip: padding-box; - border: fn.dim(--key-focus --border-offset) solid transparent; - border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); } @include iro.bem-elem('body') { padding: 0; - padding-block-start: fn.dim(--spacing); + padding-block-start: props.get(vars.$spacing); } @include iro.bem-elem('footer') { -- cgit v1.3.1