diff options
author | Volpeon <git@volpeon.ink> | 2024-10-27 07:14:52 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-27 07:14:52 +0100 |
commit | 1fef8d9675156925ffb54ab6d9192375dec17da4 (patch) | |
tree | 14503b7972334a30e4abc1dec1693fa45eef63e0 /src/objects | |
parent | Undo (diff) | |
download | iro-design-1fef8d9675156925ffb54ab6d9192375dec17da4.tar.gz iro-design-1fef8d9675156925ffb54ab6d9192375dec17da4.tar.bz2 iro-design-1fef8d9675156925ffb54ab6d9192375dec17da4.zip |
Update
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_lightbox.scss | 4 | ||||
-rw-r--r-- | src/objects/_lightbox.vars.scss | 39 | ||||
-rw-r--r-- | src/objects/_thumbnail.scss | 1 |
3 files changed, 7 insertions, 37 deletions
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 @@ | |||
98 | grid-template-rows: auto minmax(0, 1fr) auto auto; | 98 | grid-template-rows: auto minmax(0, 1fr) auto auto; |
99 | grid-template-columns: auto minmax(0, 1fr) auto; | 99 | grid-template-columns: auto minmax(0, 1fr) auto; |
100 | 100 | ||
101 | @include bem.modifier('fullscreen') { | ||
102 | block-size: props.get(vars.$fullscreen--height); | ||
103 | } | ||
104 | |||
101 | @include bem.elem('img') { | 105 | @include bem.elem('img') { |
102 | display: none; | 106 | display: none; |
103 | max-block-size: 100%; | 107 | 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 @@ | |||
5 | 5 | ||
6 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; | 6 | $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; |
7 | 7 | ||
8 | $image--max-height: 80vh; | 8 | $fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default; |
9 | 9 | ||
10 | $thumbnail--size: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default; | 10 | $image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default; |
11 | $thumbnail--rounding: props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default; | ||
12 | $thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; | ||
13 | $thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default; | ||
14 | |||
15 | $thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; | ||
16 | |||
17 | $thumbnail--key-focus--border-width: props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
18 | $thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
19 | $thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
20 | 11 | ||
21 | $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; | 12 | $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; |
22 | 13 | ||
@@ -24,16 +15,6 @@ $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props | |||
24 | $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; | 15 | $nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; |
25 | $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; | 16 | $nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; |
26 | 17 | ||
27 | $thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; | ||
28 | |||
29 | $thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
30 | |||
31 | $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; | ||
32 | |||
33 | $thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
34 | $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
35 | |||
36 | $thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default; | ||
37 | $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; | 18 | $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; |
38 | $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; | 19 | $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; |
39 | 20 | ||
@@ -45,22 +26,6 @@ $static-themes: props.def(--o-lightbox, (), 'color'); | |||
45 | $static-themes: props.merge($static-themes, ( | 26 | $static-themes: props.merge($static-themes, ( |
46 | $lightbox-theme: ( | 27 | $lightbox-theme: ( |
47 | --text: props.get(core.$transparent-colors, $theme, --800), | 28 | --text: props.get(core.$transparent-colors, $theme, --800), |
48 | --thumbnail: ( | ||
49 | --border: props.get(core.$transparent-colors, $theme, --400), | ||
50 | |||
51 | --hover: ( | ||
52 | --border: props.get(core.$transparent-colors, $theme, --500), | ||
53 | ), | ||
54 | |||
55 | --selected: ( | ||
56 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
57 | ), | ||
58 | |||
59 | --key-focus: ( | ||
60 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
61 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
62 | ), | ||
63 | ), | ||
64 | ) | 29 | ) |
65 | )); | 30 | )); |
66 | } | 31 | } |
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 @@ | |||
14 | @include bem.object('thumbnail') { | 14 | @include bem.object('thumbnail') { |
15 | position: relative; | 15 | position: relative; |
16 | display: block; | 16 | display: block; |
17 | flex: 0 0 auto; | ||
17 | inline-size: props.get(vars.$size); | 18 | inline-size: props.get(vars.$size); |
18 | block-size: props.get(vars.$size); | 19 | block-size: props.get(vars.$size); |
19 | overflow: hidden; | 20 | overflow: hidden; |