From 1fef8d9675156925ffb54ab6d9192375dec17da4 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Oct 2024 07:14:52 +0100 Subject: Update --- src/objects/_lightbox.scss | 4 ++++ src/objects/_lightbox.vars.scss | 39 ++------------------------------------- src/objects/_thumbnail.scss | 1 + 3 files changed, 7 insertions(+), 37 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 4964b81..a581749 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -98,6 +98,10 @@ grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: auto minmax(0, 1fr) auto; + @include bem.modifier('fullscreen') { + block-size: props.get(vars.$fullscreen--height); + } + @include bem.elem('img') { display: none; max-block-size: 100%; diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 7ea49b0..999776e 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -5,18 +5,9 @@ $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; -$image--max-height: 80vh; +$fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default; -$thumbnail--size: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default; -$thumbnail--rounding: props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default; -$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; -$thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default; - -$thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; - -$thumbnail--key-focus--border-width: props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default; $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; @@ -24,16 +15,6 @@ $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; -$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; - -$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; - -$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; - -$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; - -$thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default; $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; @@ -45,22 +26,6 @@ $static-themes: props.def(--o-lightbox, (), 'color'); $static-themes: props.merge($static-themes, ( $lightbox-theme: ( --text: props.get(core.$transparent-colors, $theme, --800), - --thumbnail: ( - --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), - ), - ), ) )); } diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index d6e80ce..73a8cb0 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -14,6 +14,7 @@ @include bem.object('thumbnail') { position: relative; display: block; + flex: 0 0 auto; inline-size: props.get(vars.$size); block-size: props.get(vars.$size); overflow: hidden; -- cgit v1.2.3-70-g09d2