From ef117e73dec37973b366722a56b2b5a17b9f0a2b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Oct 2024 16:15:34 +0200 Subject: Color adjustments, borderless cards --- src/objects/_card.scss | 41 +++++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 18 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_card.scss b/src/objects/_card.scss index f56a96c..650ec3f 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -4,13 +4,16 @@ @include iro.props-namespace('card') { @include iro.props-store(( --dims: ( - --border: fn.global-dim(--border --thin), --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), @@ -19,13 +22,8 @@ ), --colors: ( --bg: fn.global-color(--bg-l2), - --border: fn.global-color(--border-mute), --divider: fn.global-color(--border-mute), - --hover: ( - --border: fn.global-color(--border), - ), - --key-focus: ( --label: fn.global-color(--focus --text), --border: fn.global-color(--focus --border), @@ -44,20 +42,22 @@ @include iro.bem-object(iro.props-namespace()) { display: block; - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); + margin: calc(-1 * fn.dim(--key-focus --border)); + transition: transform .2s; + border: fn.dim(--key-focus --border-offset) solid transparent; + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); background-color: fn.color(--bg); + background-clip: content-box; @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, - &:focus-visible, - &:active { - border-color: fn.color(--hover --border); + &:active, + &:focus-visible { + transform: translateY(fn.dim(--hover --offset-b)); } &:focus-visible { - border-color: fn.color(--key-focus --border); - outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); + 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); } } @@ -71,15 +71,16 @@ display: block; inline-size: 100%; object-fit: cover; + transition: transform .2s, opacity .2s; &:first-child { - border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); - border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + border-start-start-radius: fn.dim(--rounding); + border-start-end-radius: fn.dim(--rounding); } &:last-child { - border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); - border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + border-end-start-radius: fn.dim(--rounding); + border-end-end-radius: fn.dim(--rounding); } @include iro.bem-next-elem('avatar') { @@ -123,8 +124,12 @@ @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, - &:active { + &:active, + &:focus-visible { + transform: none; + @include iro.bem-elem('image') { + transform: translateY(fn.dim(--hover --offset-b)); opacity: .75; background-color: fn.color(--quiet --hover --image); } -- cgit v1.2.3-70-g09d2