summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_lightbox.scss165
-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, 83 insertions, 120 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..5ff6d93 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,104 @@
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 box-sizing: border-box;
16 min-block-size: 0; 19 display: none;
20 flex: 1 1 auto;
21 flex-direction: column;
22 justify-content: flex-end;
23 inline-size: 100%;
24 max-inline-size: none;
25 block-size: 100%;
26 min-block-size: 0;
27 max-block-size: none;
28 padding: 0;
29 margin: 0;
30 background-color: transparent;
31 border: 0;
32
33 &::backdrop {
34 background-color: props.get(backdrop.$bg-color);
35 backdrop-filter: blur(props.get(backdrop.$blur));
36 }
37
38 &[open] {
39 display: flex;
40 }
17 41
18 @include bem.elem('header') { 42 @include bem.elem('controls') {
19 display: flex; 43 position: absolute;
20 grid-area: header; 44 inset-block-start: props.get(vars.$pad);
21 align-items: flex-start; 45 inset-inline-end: props.get(vars.$pad);
22 padding-block-start: props.get(vars.$pad); 46 z-index: 20;
23 padding-inline: props.get(vars.$pad); 47 padding: props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
48 border-radius: 10em;
24 } 49 }
25 50
26 @include bem.elem('img') { 51 @include bem.elem('img') {
27 box-sizing: border-box; 52 position: relative;
53 z-index: 10;
28 display: block; 54 display: block;
29 grid-area: content; 55 flex: 1 1 auto;
30 place-self: center;
31 inline-size: auto; 56 inline-size: auto;
57 min-inline-size: 0;
32 max-inline-size: 100%; 58 max-inline-size: 100%;
33 block-size: auto; 59 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height); 60 min-block-size: 0;
35 padding: props.get(vars.$pad); 61 max-block-size: 100%;
36 margin-inline: auto; 62 margin: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); 63 object-fit: contain;
38 }
39 64
40 @include bem.elem('thumbnails') { 65 @include bem.is('hidden') {
41 display: none; 66 display: none;
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 }
48 67
49 @include bem.elem('close-btn') { 68 @include bem.next-elem('placeholder') {
50 display: none; 69 display: block;
51 flex: 0 0 auto;
52 margin-block-start: calc(-.5 * props.get(vars.$pad));
53 margin-inline: auto calc(-.5 * props.get(vars.$pad));
54 font-size: props.get(vars.$close-button--font-size);
55 }
56
57 @include bem.elem('nav-btn') {
58 position: relative;
59 display: none;
60 align-self: center;
61 overflow: visible;
62 font-size: props.get(vars.$nav-button--font-size);
63
64 &::before {
65 position: absolute;
66 inset-block-start: 50%;
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
87 &::before {
88 inset-inline-end: 0;
89 } 70 }
90 } 71 }
91 } 72 }
92 73
93 @include bem.modifier('interactive') { 74 @include bem.elem('placeholder') {
94 display: grid; 75 position: absolute;
95 grid-template-areas: 76 inset-block-start: 50%;
96 'header header header' 77 inset-inline-start: 50%;
97 'prev content next' 78 z-index: 5;
98 'thumbnails thumbnails thumbnails'; 79 display: none;
99 grid-template-rows: auto minmax(0, 1fr) auto auto; 80 transform: translate(-50, -50);
100 grid-template-columns: auto minmax(0, 1fr) auto; 81 }
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 82
116 @include bem.elem('thumbnails') { 83 @include bem.elem('thumbnails') {
117 display: flex; 84 display: flex;
118 } 85 flex: 0 0 auto;
86 gap: props.get(vars.$thumbnail--spacing);
87 justify-content: center;
88 padding: props.get(vars.$pad);
89 overflow: auto;
90 }
119 91
120 @include bem.elem('close-btn') { 92 @include bem.elem('thumbnail') {
121 display: block; 93 inline-size: props.get(vars.$thumbnail--width);
122 } 94 transition: inline-size .1s ease, margin-inline .1s ease;
123 95
124 @include bem.elem('nav-btn') { 96 @include bem.is('selected') {
125 display: block; 97 inline-size: props.get(vars.$thumbnail--active--width);
98 margin-inline: props.get(vars.$thumbnail--active--spacing);
126 } 99 }
127 } 100 }
128 101
129 @each $theme in map.keys(props.get(vars.$static-themes)) { 102 @each $theme in map.keys(props.get(vars.$static-themes)) {
130 @include bem.modifier(string.slice($theme, 3)) { 103 @include bem.modifier(string.slice($theme, 3)) {
131 color: props.get(vars.$static-themes, $theme, --text); 104 color: props.get(vars.$static-themes, $theme, --text);
105
106 @include bem.elem('controls') {
107 background-color: props.get(vars.$static-themes, $theme, --controls-bg);
108 }
132 } 109 }
133 } 110 }
134 } 111 }
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-07 21:32:43 +0000