From 1c1a00c12c1be4989e28d6c3bf19b9139396250f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Oct 2024 18:13:16 +0200 Subject: Move lightbox thumbnail to own object --- src/objects/_lightbox.scss | 88 ---------------------------------------------- 1 file changed, 88 deletions(-) (limited to 'src/objects/_lightbox.scss') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 0ce62ff..4964b81 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -45,69 +45,6 @@ overflow: auto; } - @include bem.elem('thumbnail') { - position: relative; - flex: 0 0 auto; - inline-size: props.get(vars.$thumbnail--size); - block-size: props.get(vars.$thumbnail--size); - overflow: hidden; - border-radius: props.get(vars.$thumbnail--rounding); - outline: props.get(vars.$thumbnail--border-color) solid props.get(vars.$thumbnail--border-width); - outline-offset: calc(-1 * props.get(vars.$thumbnail--border-width)); - opacity: .75; - - &:hover, - &:active, - &:focus-visible { - outline-color: props.get(vars.$thumbnail--hover--border-color); - opacity: 1; - } - - @include bem.is('selected') { - $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); - - margin: $focus-border-offset; - border: props.get(vars.$thumbnail--selected--border-width) solid props.get(vars.$thumbnail--selected--border-color); - border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset); - outline: none; - opacity: 1; - } - - &:focus-visible { - $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--key-focus--border-offset)); - - margin: $focus-border-offset; - border: props.get(vars.$thumbnail--key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset); - outline: props.get(vars.$thumbnail--key-focus--border-color) solid props.get(vars.$thumbnail--key-focus--border-width); - outline-offset: 0; - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width)) - props.get(vars.$thumbnail--key-focus--outline-color); - } - } - - @include bem.elem('thumbnail-img') { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - display: block; - inline-size: 100%; - block-size: 100%; - object-fit: cover; - object-position: center center; - } - - @include bem.elem('thumbnail-icon') { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - } - @include bem.elem('close-btn') { display: none; flex: 0 0 auto; @@ -187,31 +124,6 @@ @each $theme in map.keys(props.get(vars.$static-themes)) { @include bem.modifier(string.slice($theme, 3)) { color: props.get(vars.$static-themes, $theme, --text); - - @include bem.elem('thumbnail') { - outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); - - &:hover, - &:active, - &:focus-visible { - outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); - } - - @include bem.is('selected') { - border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); - } - - &:focus-visible { - border-color: transparent; - outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --border); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width)) - props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --outline); - } - } } } } -- cgit v1.3.1