From 0f2ff105bbd911ba04c717af92fd116472d2b2d9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 14:50:39 +0200 Subject: Update --- src/objects/_card.scss | 27 ++++++++------------------- src/objects/_lightbox.scss | 23 +++++++++++++---------- 2 files changed, 21 insertions(+), 29 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_card.scss b/src/objects/_card.scss index c6c47d7..b7829ff 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -32,12 +32,6 @@ --border: fn.global-color(--focus --border), --outline: fn.global-color(--focus --outline), ), - - --quiet: ( - --hover: ( - --border: fn.global-color(--text-disabled), - ), - ), ), )); @@ -67,9 +61,9 @@ } @include iro.bem-elem('image') { - position: relative; + display: block; inline-size: 100%; - overflow: hidden; + object-fit: cover; background-color: fn.color(--image-bg); &:first-child { @@ -87,13 +81,6 @@ } } - @include iro.bem-elem('image-img') { - display: block; - object-fit: cover; - inline-size: 100%; - block-size: 100%; - } - @include iro.bem-elem('body') { padding-block: fn.dim(--pad-b); padding-inline: fn.dim(--pad-i); @@ -130,12 +117,13 @@ @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, + &:focus-visible, &:active { @include iro.bem-elem('image') { - outline: fn.dim(--border) solid fn.color(--quiet --hover --border); + opacity: 0.75; } } - + &:focus-visible { outline: none; box-shadow: none; @@ -148,9 +136,10 @@ } @include iro.bem-elem('image') { + position: relative; 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)); + border: fn.dim(--key-focus --border-offset) solid transparent; + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); background-clip: padding-box; } diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 7844eae..4902958 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -10,10 +10,11 @@ $static-themes: 'black' 'white' !default; --dims: ( --pad: fn.global-dim(--size --150), --thumbnail: ( - --size: fn.global-dim(--size --700), - --spacing: fn.global-dim(--size --100), - --idle: fn.global-dim(--border --thin), - --selected: fn.global-dim(--border --medium), + --size: fn.global-dim(--size --700), + --rounding: fn.global-dim(--rounding), + --spacing: fn.global-dim(--size --100), + --idle: fn.global-dim(--border --thin), + --selected: fn.global-dim(--border --medium), ), --close-button: ( --font-size: fn.global-dim(--font-size --200), @@ -147,12 +148,14 @@ $static-themes: 'black' 'white' !default; } @include iro.bem-elem('thumbnail') { - position: relative; - flex: 0 0 auto; - inline-size: fn.dim(--thumbnail --size); - block-size: fn.dim(--thumbnail --size); - outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); - opacity: .75; + position: relative; + flex: 0 0 auto; + inline-size: fn.dim(--thumbnail --size); + block-size: fn.dim(--thumbnail --size); + overflow: hidden; + border-radius: fn.dim(--thumbnail --rounding); + outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); + opacity: .75; &:hover, &:focus-visible { -- cgit v1.2.3-70-g09d2