From f98a5c58c830a283d07d8efad4502281a5e0369e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 28 Jun 2024 14:22:27 +0200 Subject: Update --- src/objects/_action-button.scss | 4 +-- src/objects/_avatar.scss | 33 ++++++++++++++----- src/objects/_badge.scss | 36 ++++++++++++++------- src/objects/_card.scss | 72 ++++++++++++++++++++++++++++++++++++++--- src/objects/_divider.scss | 1 + src/objects/_popover.scss | 9 ++++-- 6 files changed, 126 insertions(+), 29 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 7a7ff46..7fe9d44 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default; color: fn.color(list.join($theme, --disabled --label)); &::after { - outline: fn.color(list.join($theme, --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(list.join($theme, --key-focus --outline)); + outline-color: fn.color(list.join($theme, --key-focus --border)); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); } &:link, diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index e6fa74e..5a34d19 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @include iro.props-namespace('avatar') { @include iro.props-store(( --dims: ( - --size: fn.global-dim(--size --500), - --font-size: fn.global-dim(--font-size --100), - --indicator-size: fn.global-dim(--size --150), + --size: fn.global-dim(--size --500), + --font-size: fn.global-dim(--font-size --100), + --indicator-size: fn.global-dim(--size --150), + --indicator-spacing: fn.global-dim(--size --40), + --rounding: 25%, --xxxl: ( --size: fn.global-dim(--size --1600), @@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; --font-size: fn.global-dim(--font-size --50), --indicator-size: fn.global-dim(--size --100), ), - --indicator-spacing: fn.global-dim(--size --40), - --rounding: 25%, --key-focus: ( --border: fn.global-dim(--key-focus --border), @@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @include iro.bem-object(iro.props-namespace()) { display: inline-block; position: relative; - border: fn.dim(--key-focus --border) solid transparent; border-radius: fn.dim(--rounding); font-size: fn.dim(--font-size); font-style: normal; vertical-align: .05em; + &::after { + content: ''; + display: none; + position: absolute; + z-index: 1; + inset: calc(-1 * fn.dim(--key-focus --border-offset)); + border: fn.dim(--key-focus --border-offset) solid transparent; + border-radius: fn.dim(--rounding); + 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); + pointer-events: none; + } + @include iro.bem-elem('status') { position: absolute; inset-inline-end: 0; @@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @include iro.bem-modifier('circle') { border-radius: 100%; + &::after { + border-radius: 100%; + } + @include iro.bem-elem('content') { border-radius: 100%; } @@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; } &: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); + &::after { + display: block; + } } } } diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index cc7e500..06261b8 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default; } @if string.slice($theme, 1, 7) == 'static-' { - &:link, - &:visited, - &:enabled { - &:focus-visible { - outline: fn.color(--#{$theme} --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(--#{$theme} --key-focus --outline); - } + &::after { + outline: fn.color(--#{$theme} --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(--#{$theme} --key-focus --outline); } } } @@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default; @include iro.bem-object(iro.props-namespace()) { display: inline-block; - margin: calc(-1 * fn.dim(--key-focus --border)); + position: relative; padding-block: fn.dim(--pad-b); padding-inline: fn.dim(--pad-i); - border: fn.dim(--key-focus --border) solid transparent; - border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); + border-radius: fn.dim(--rounding); background-color: fn.color(--bg); background-clip: padding-box; color: fn.color(--label); @@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default; text-align: center; text-decoration: none; + &::after { + content: ''; + display: none; + position: absolute; + z-index: 1; + inset: calc(-1 * fn.dim(--key-focus --border-offset)); + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); + 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); + pointer-events: none; + } + &:link, &:visited, &:enabled { @@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default; &:visited, &:enabled { &: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); + &::after { + display: block; + } } } @@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default; @include iro.bem-modifier('pill') { padding-inline: fn.dim(--pad-i-pill); border-radius: 10em; + + &::after { + border-radius: 10em; + } } @each $size in sm lg xl { diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 5783ac1..9f84d7a 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -18,18 +18,26 @@ ), ), --colors: ( - --bg: fn.global-color(--bg-l2), - --border: fn.global-color(--border-mute), - --divider: fn.global-color(--border-mute), + --bg: fn.global-color(--bg-l2), + --image-bg: fn.global-color(--border-mute), + --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), --outline: fn.global-color(--focus --outline), ), + + --quiet: ( + --hover: ( + --border: fn.global-color(--text-disabled), + ), + ), ), )); @@ -59,8 +67,20 @@ } @include iro.bem-elem('image') { - position: relative; - width: 100%; + position: relative; + width: 100%; + overflow: hidden; + background-color: fn.color(--image-bg); + + &:first-child { + border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + } + + &:last-child { + border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + } @include iro.bem-next-elem('avatar') { margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); @@ -102,5 +122,47 @@ background-color: fn.color(--divider); } } + + @include iro.bem-modifier('quiet') { + position: relative; + border: 0; + background-color: transparent; + + @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active { + @include iro.bem-elem('image') { + outline: fn.dim(--border) solid fn.color(--quiet --hover --border); + outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border)); + } + } + + &:focus-visible { + outline: none; + box-shadow: none; + + @include iro.bem-elem('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); + } + } + } + + @include iro.bem-elem('image') { + margin: calc(-1 * fn.dim(--key-focus --border)); + border: fn.dim(--key-focus --border) solid transparent; + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); + background-clip: padding-box; + } + + @include iro.bem-elem('body') { + padding: 0; + padding-block-start: fn.dim(--spacing); + } + + @include iro.bem-elem('footer') { + padding-inline: 0; + } + } } } diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 84ddf12..d1e2897 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default; @include iro.bem-object(iro.props-namespace()) { display: flex; + flex: 0 0 auto; flex-direction: row; align-items: center; block-size: 1em; diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 9d4b1c7..5ad58ec 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -14,7 +14,12 @@ --colors: ( --bg: fn.global-color(--bg-l2), --border: fn.global-color(--border), - --shadow: 0 .2em .5em rgba(#000, .1), + --filter: drop-shadow( + fn.global-dim(--shadow --x) + fn.global-dim(--shadow --y) + fn.global-dim(--shadow --blur) + fn.global-color(--shadow) + ), ), )); @@ -29,7 +34,7 @@ border: fn.dim(--border) solid fn.color(--border); border-radius: fn.dim(--rounding); background-color: fn.color(--bg); - box-shadow: fn.color(--shadow); + filter: fn.color(--filter); @include iro.bem-modifier('up-left') { transform: translate(var(--x), calc(var(--y) - 100%)); -- cgit v1.2.3-70-g09d2