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/_iro-design.scss | 3 +- src/layouts/_card-view.scss | 18 +++++++ src/layouts/_media-view.scss | 18 ------- src/objects/_lightbox.scss | 88 --------------------------------- src/objects/_thumbnail.scss | 102 +++++++++++++++++++++++++++++++++++++++ src/objects/_thumbnail.vars.scss | 51 ++++++++++++++++++++ 6 files changed, 173 insertions(+), 107 deletions(-) create mode 100644 src/layouts/_card-view.scss delete mode 100644 src/layouts/_media-view.scss create mode 100644 src/objects/_thumbnail.scss create mode 100644 src/objects/_thumbnail.vars.scss (limited to 'src') diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 7f726da..6698d76 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss @@ -32,7 +32,7 @@ $breakpoints: ( @forward 'layouts/media' as l-media--*; @forward 'layouts/overflow' as l-overflow--*; @forward 'layouts/split-view' as l-split-view--*; -@forward 'layouts/media-view' as l-media-view--*; +@forward 'layouts/card-view' as l-card-view--*; @forward 'scopes/implicit' as s-implicit--*; @forward 'scopes/blockquotes' as s-blockquotes--*; @@ -65,6 +65,7 @@ $breakpoints: ( @forward 'objects/switch' as o-switch--*; @forward 'objects/table' as o-table--*; @forward 'objects/text-field' as o-text-field--*; +@forward 'objects/thumbnail' as o-thumbnail--*; @forward 'utils' as utils--*; diff --git a/src/layouts/_card-view.scss b/src/layouts/_card-view.scss new file mode 100644 index 0000000..f6e0ef1 --- /dev/null +++ b/src/layouts/_card-view.scss @@ -0,0 +1,18 @@ +@use 'sass:meta'; +@use 'iro-sass/src/bem'; +@use 'iro-sass/src/props'; +@use '../props' as *; + +@mixin styles { + @include bem.layout('card-view') { + display: flex; + flex-direction: column; + min-block-size: 100%; + + @include bem.elem('footer') { + position: sticky; + inset-block-end: 0; + margin-block-start: auto; + } + } +} diff --git a/src/layouts/_media-view.scss b/src/layouts/_media-view.scss deleted file mode 100644 index 2c53db6..0000000 --- a/src/layouts/_media-view.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use 'sass:meta'; -@use 'iro-sass/src/bem'; -@use 'iro-sass/src/props'; -@use '../props' as *; - -@mixin styles { - @include bem.layout('media-view') { - display: flex; - flex-direction: column; - min-block-size: 100%; - - @include bem.elem('footer') { - position: sticky; - inset-block-end: 0; - margin-block-start: auto; - } - } -} 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); - } - } } } } diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss new file mode 100644 index 0000000..8702fbe --- /dev/null +++ b/src/objects/_thumbnail.scss @@ -0,0 +1,102 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'iro-sass/src/bem'; +@use 'iro-sass/src/props'; +@use '../props' as *; + +@forward 'thumbnail.vars'; +@use 'thumbnail.vars' as vars; + +@mixin styles { + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('thumbnail') { + position: relative; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + overflow: hidden; + border-radius: props.get(vars.$rounding); + outline: props.get(vars.$border-color) solid props.get(vars.$border-width); + outline-offset: calc(-1 * props.get(vars.$border-width)); + opacity: .75; + + &:hover, + &:active, + &:focus-visible { + outline-color: props.get(vars.$hover--border-color); + opacity: 1; + } + + @include bem.is('selected') { + $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); + + margin: $focus-border-offset; + border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + outline: none; + opacity: 1; + } + + @include bem.elem('image') { + 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('icon') { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); + } + + &:focus-visible { + $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); + + margin: $focus-border-offset; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + outline-offset: 0; + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + props.get(vars.$key-focus--outline-color); + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + outline-color: props.get(vars.$static-themes, $theme, --border); + + &:hover, + &:active, + &:focus-visible { + outline-color: props.get(vars.$static-themes, $theme, --hover, --border); + } + + @include bem.is('selected') { + border-color: props.get(vars.$static-themes, $theme, --selected, --border); + } + + &:focus-visible { + border-color: transparent; + outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + props.get(vars.$static-themes, $theme, --key-focus, --outline); + } + } + } + } +} diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss new file mode 100644 index 0000000..ba8cebe --- /dev/null +++ b/src/objects/_thumbnail.vars.scss @@ -0,0 +1,51 @@ +@use 'sass:map'; +@use 'sass:string'; +@use 'iro-sass/src/props'; +@use '../core.vars' as core; + +$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; +$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; +$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; +$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; + +$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; + +$key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; + +$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; + +$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; + +$key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; + +$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default; + +$static-themes: props.def(--o-thumbnail, (), 'color'); + +@each $theme in map.keys(props.get(core.$transparent-colors)) { + $thumbnail-theme: --static-#{string.slice($theme, 3)}; + + $static-themes: props.merge($static-themes, ( + $thumbnail-theme: ( + --border: props.get(core.$transparent-colors, $theme, --400), + + --hover: ( + --border: props.get(core.$transparent-colors, $theme, --500), + ), + + --selected: ( + --border: props.get(core.$transparent-colors, $theme, --900), + ), + + --key-focus: ( + --border: props.get(core.$transparent-colors, $theme, --900), + --outline: props.get(core.$transparent-colors, $theme, --300), + ), + ) + )); +} -- cgit v1.2.3-70-g09d2