summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-02-07 21:00:48 +0100
committerVolpeon <git@volpeon.ink>2026-02-07 21:00:48 +0100
commit62d0e619de3b4b65812382dc7fb82d4e79158929 (patch)
tree889013a484f15a07047bd0c09072a3d6e2006f57 /src
parentUpdate (diff)
downloadiro-design-62d0e619de3b4b65812382dc7fb82d4e79158929.tar.gz
iro-design-62d0e619de3b4b65812382dc7fb82d4e79158929.tar.bz2
iro-design-62d0e619de3b4b65812382dc7fb82d4e79158929.zip
New lightbox
Diffstat (limited to 'src')
-rw-r--r--src/objects/_lightbox.scss158
-rw-r--r--src/objects/_lightbox.vars.scss25
-rw-r--r--src/objects/_thumbnail.scss11
-rw-r--r--src/objects/_thumbnail.vars.scss2
4 files changed, 72 insertions, 124 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..0d5e111 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,89 @@
8@forward 'lightbox.vars'; 8@forward 'lightbox.vars';
9@use 'lightbox.vars' as vars; 9@use 'lightbox.vars' as vars;
10 10
11@use 'backdrop.vars' as backdrop;
12@use 'thumbnail.vars' as thumbnail;
13
11@mixin styles { 14@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 15 @include materialize-at-root(meta.module-variables('vars'));
13 16
14 @include bem.object('lightbox') { 17 @include bem.object('lightbox') {
15 flex: 1 1 auto; 18 position: relative;
16 min-block-size: 0; 19 box-sizing: border-box;
17 20 display: flex;
18 @include bem.elem('header') { 21 flex: 1 1 auto;
19 display: flex; 22 flex-direction: column;
20 grid-area: header; 23 align-items: center;
21 align-items: flex-start; 24 justify-content: center;
22 padding-block-start: props.get(vars.$pad); 25 inline-size: 100%;
23 padding-inline: props.get(vars.$pad); 26 max-inline-size: none;
24 } 27 block-size: 100%;
28 min-block-size: 0;
29 max-block-size: none;
30 margin: 0;
31 background-color: transparent;
32 border: 0;
25 33
26 @include bem.elem('img') { 34 &::backdrop {
27 box-sizing: border-box; 35 background-color: props.get(backdrop.$bg-color);
28 display: block; 36 backdrop-filter: blur(props.get(backdrop.$blur));
29 grid-area: content;
30 place-self: center;
31 inline-size: auto;
32 max-inline-size: 100%;
33 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height);
35 padding: props.get(vars.$pad);
36 margin-inline: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
38 } 37 }
39 38
40 @include bem.elem('thumbnails') { 39 &[open] {
41 display: none; 40 display: flex;
42 grid-area: thumbnails;
43 gap: props.get(vars.$thumbnails--spacing);
44 padding: props.get(vars.$pad);
45 margin-block-start: calc(-1 * props.get(vars.$pad));
46 overflow: auto;
47 } 41 }
48 42
49 @include bem.elem('close-btn') { 43 @include bem.elem('controls') {
50 display: none; 44 position: absolute;
51 flex: 0 0 auto; 45 inset-block-start: props.get(vars.$pad);
52 margin-block-start: calc(-.5 * props.get(vars.$pad)); 46 inset-inline-end: props.get(vars.$pad);
53 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 47 z-index: 20;
54 font-size: props.get(vars.$close-button--font-size); 48 padding: props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
49 border-radius: 10em;
55 } 50 }
56 51
57 @include bem.elem('nav-btn') { 52 @include bem.elem('img') {
58 position: relative; 53 position: relative;
59 display: none; 54 z-index: 10;
60 align-self: center; 55 display: none;
61 overflow: visible; 56 flex: 1 1 auto;
62 font-size: props.get(vars.$nav-button--font-size); 57 inline-size: auto;
63 58 max-inline-size: 100%;
64 &::before { 59 block-size: auto;
65 position: absolute; 60 max-block-size: 100%;
66 inset-block-start: 50%; 61 margin: auto;
67 display: block;
68 inline-size: props.get(vars.$nav-button--inline-size);
69 block-size: props.get(vars.$nav-button--block-size);
70 content: '';
71 transform: translateY(-50%);
72 }
73
74 @include bem.modifier('prev') {
75 grid-area: prev;
76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
77
78 &::before {
79 inset-inline-start: 0;
80 }
81 }
82
83 @include bem.modifier('next') {
84 grid-area: next;
85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
86 62
87 &::before { 63 @include bem.multi('&:target', 'is' 'visible') {
88 inset-inline-end: 0; 64 display: block;
89 }
90 } 65 }
91 } 66 }
92 67
93 @include bem.modifier('interactive') { 68 @include bem.elem('thumbnails') {
94 display: grid; 69 display: flex;
95 grid-template-areas: 70 flex: 0 0 auto;
96 'header header header' 71 gap: props.get(vars.$thumbnail--spacing);
97 'prev content next' 72 justify-content: center;
98 'thumbnails thumbnails thumbnails'; 73 padding: props.get(vars.$pad);
99 grid-template-rows: auto minmax(0, 1fr) auto auto; 74 overflow: auto;
100 grid-template-columns: auto minmax(0, 1fr) auto; 75 }
101
102 @include bem.modifier('fullscreen') {
103 block-size: props.get(vars.$fullscreen--height);
104 }
105
106 @include bem.elem('img') {
107 display: none;
108 max-block-size: 100%;
109 margin-inline: 0;
110
111 @include bem.multi('&:target', 'is' 'visible') {
112 display: block;
113 }
114 }
115
116 @include bem.elem('thumbnails') {
117 display: flex;
118 }
119 76
120 @include bem.elem('close-btn') { 77 @include bem.elem('thumbnail') {
121 display: block; 78 inline-size: props.get(vars.$thumbnail--width);
122 } 79 transition: inline-size .1s ease, margin-inline .1s ease;
123 80
124 @include bem.elem('nav-btn') { 81 @include bem.is('selected') {
125 display: block; 82 inline-size: props.get(vars.$thumbnail--active--width);
83 margin-inline: props.get(vars.$thumbnail--active--spacing);
126 } 84 }
127 } 85 }
128 86
129 @each $theme in map.keys(props.get(vars.$static-themes)) { 87 @each $theme in map.keys(props.get(vars.$static-themes)) {
130 @include bem.modifier(string.slice($theme, 3)) { 88 @include bem.modifier(string.slice($theme, 3)) {
131 color: props.get(vars.$static-themes, $theme, --text); 89 color: props.get(vars.$static-themes, $theme, --text);
90
91 @include bem.elem('controls') {
92 background-color: props.get(vars.$static-themes, $theme, --controls-bg);
93 }
132 } 94 }
133 } 95 }
134 } 96 }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 6d22aa8..9f200b0 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -4,30 +4,27 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
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$fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default;
8 7
9$image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default; 8$controls--pad-x: props.def(--o-lightbox--controls--pad-x, props.get(core.$size--150)) !default;
10$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default; 9$controls--pad-y: props.def(--o-lightbox--controls--pad-y, props.get(core.$size--50)) !default;
11 10
12$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; 11$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
13 12$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
14$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default; 13$thumbnail--active--width: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default;
15$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; 14$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default;
16$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
17
18$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-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;
20
21$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default;
22 15
23$static-themes: props.def(--o-lightbox, (), 'color'); 16$static-themes: props.def(--o-lightbox, (), 'color');
24 17
18$thumbnail--width--md: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default;
19$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default;
20
25@each $theme in map.keys(props.get(core.$transparent-colors)) { 21@each $theme in map.keys(props.get(core.$transparent-colors)) {
26 $lightbox-theme: --static-#{string.slice($theme, 3)}; 22 $lightbox-theme: --static-#{string.slice($theme, 3)};
27 23
28 $static-themes: props.merge($static-themes, ( 24 $static-themes: props.merge($static-themes, (
29 $lightbox-theme: ( 25 $lightbox-theme: (
30 --text: props.get(core.$transparent-colors, $theme, --800), 26 --text: props.get(core.$transparent-colors, $theme, --text),
27 --controls-bg: props.get(core.$transparent-colors, $theme, --700),
31 ) 28 )
32 )); 29 ));
33} 30}
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 60a98af..2ccb50b 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -21,7 +21,6 @@
21 outline: props.get(vars.$border-color) solid props.get(vars.$border-width); 21 outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
22 outline-offset: calc(-1 * props.get(vars.$border-width)); 22 outline-offset: calc(-1 * props.get(vars.$border-width));
23 border-radius: props.get(vars.$rounding); 23 border-radius: props.get(vars.$rounding);
24 opacity: .75;
25 24
26 &:hover, 25 &:hover,
27 &:active, 26 &:active,
@@ -30,16 +29,6 @@
30 opacity: 1; 29 opacity: 1;
31 } 30 }
32 31
33 @include bem.is('selected') {
34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
35
36 margin: $focus-border-offset;
37 outline: none;
38 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
39 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
40 opacity: 1;
41 }
42
43 @include bem.elem('image') { 32 @include bem.elem('image') {
44 position: absolute; 33 position: absolute;
45 inset-block-start: 0; 34 inset-block-start: 0;
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index e49e52e..d2a38c0 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -3,7 +3,7 @@
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; 6$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; 7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; 8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; 9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-02-08 04:03:53 +0000