From 1fef8d9675156925ffb54ab6d9192375dec17da4 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 27 Oct 2024 07:14:52 +0100
Subject: Update
---
src/_utils.scss | 4 ++++
src/objects/_lightbox.scss | 4 ++++
src/objects/_lightbox.vars.scss | 39 ++-------------------------------------
src/objects/_thumbnail.scss | 1 +
4 files changed, 11 insertions(+), 37 deletions(-)
diff --git a/src/_utils.scss b/src/_utils.scss
index 62b5bfe..0ac49cc 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -206,6 +206,10 @@ $-sizes: (
inset-block-end: 0;
}
+ @include bem.utility('br-round') {
+ border-radius: props.get(vars.$rounding);
+ }
+
@each $dir, $suffix in $-dirs {
@include bem.utility('m#{$dir}-auto') {
margin#{$suffix}: auto;
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