summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_avatar.scss4
-rw-r--r--src/objects/_card.scss15
-rw-r--r--src/objects/_lightbox.scss243
-rw-r--r--src/objects/_list-group.scss61
-rw-r--r--src/objects/_status-indicator.scss4
5 files changed, 254 insertions, 73 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 5a34d19..19bff10 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -6,8 +6,8 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
6 6
7@mixin status($size: ()) { 7@mixin status($size: ()) {
8 @include iro.bem-elem('status') { 8 @include iro.bem-elem('status') {
9 width: fn.dim(list.join($size, --indicator-size)); 9 inline-size: fn.dim(list.join($size, --indicator-size));
10 height: fn.dim(list.join($size, --indicator-size)); 10 block-size: fn.dim(list.join($size, --indicator-size));
11 11
12 @include iro.bem-next-elem('content') { 12 @include iro.bem-next-elem('content') {
13 mask-image: radial-gradient( 13 mask-image: radial-gradient(
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 9f84d7a..c6c47d7 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -68,7 +68,7 @@
68 68
69 @include iro.bem-elem('image') { 69 @include iro.bem-elem('image') {
70 position: relative; 70 position: relative;
71 width: 100%; 71 inline-size: 100%;
72 overflow: hidden; 72 overflow: hidden;
73 background-color: fn.color(--image-bg); 73 background-color: fn.color(--image-bg);
74 74
@@ -88,10 +88,10 @@
88 } 88 }
89 89
90 @include iro.bem-elem('image-img') { 90 @include iro.bem-elem('image-img') {
91 display: block; 91 display: block;
92 object-fit: cover; 92 object-fit: cover;
93 width: 100%; 93 inline-size: 100%;
94 height: 100%; 94 block-size: 100%;
95 } 95 }
96 96
97 @include iro.bem-elem('body') { 97 @include iro.bem-elem('body') {
@@ -117,7 +117,7 @@
117 &::before { 117 &::before {
118 content: ''; 118 content: '';
119 display: block; 119 display: block;
120 height: fn.dim(--divider); 120 block-size: fn.dim(--divider);
121 margin-block: fn.dim(--spacing); 121 margin-block: fn.dim(--spacing);
122 background-color: fn.color(--divider); 122 background-color: fn.color(--divider);
123 } 123 }
@@ -132,8 +132,7 @@
132 &:hover, 132 &:hover,
133 &:active { 133 &:active {
134 @include iro.bem-elem('image') { 134 @include iro.bem-elem('image') {
135 outline: fn.dim(--border) solid fn.color(--quiet --hover --border); 135 outline: fn.dim(--border) solid fn.color(--quiet --hover --border);
136 outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border));
137 } 136 }
138 } 137 }
139 138
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
new file mode 100644
index 0000000..7844eae
--- /dev/null
+++ b/src/objects/_lightbox.scss
@@ -0,0 +1,243 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use 'action-button';
5
6$static-themes: 'black' 'white' !default;
7
8@include iro.props-namespace('lightbox') {
9 @include iro.props-store((
10 --dims: (
11 --pad: fn.global-dim(--size --150),
12 --thumbnail: (
13 --size: fn.global-dim(--size --700),
14 --spacing: fn.global-dim(--size --100),
15 --idle: fn.global-dim(--border --thin),
16 --selected: fn.global-dim(--border --medium),
17 ),
18 --close-button: (
19 --font-size: fn.global-dim(--font-size --200),
20 ),
21 --nav-button: (
22 --width: fn.global-dim(--size --2000),
23 --height: fn.global-dim(--size --3800),
24 --font-size: fn.global-dim(--font-size --200),
25 ),
26 ),
27 --colors: (
28 --thumbnail: (
29 --idle: fn.global-color(--border-strong),
30 --selected: fn.global-color(--heading),
31 ),
32 ),
33 ));
34
35 @each $theme in $static-themes {
36 @include iro.props-store((
37 --colors: (
38 --static-#{$theme}: (
39 --text: fn.global-color(--white-transparent --800),
40 --thumbnail: (
41 --idle: fn.global-color(--white-transparent --400),
42 --selected: fn.global-color(--white-transparent --900),
43 ),
44 )
45 )
46 ));
47 }
48
49 @include iro.props-store((
50 --dims: (
51 --thumbnail: (
52 --size: fn.global-dim(--size --600),
53 ),
54 --nav-button: (
55 --width: fn.global-dim(--size --2500),
56 --height: fn.global-dim(--size --2500),
57 ),
58 ),
59 ), 'md');
60
61 @include iro.bem-object(iro.props-namespace()) {
62 display: grid;
63 grid-template-rows: auto minmax(0, 1fr) auto auto;
64 grid-template-columns: auto minmax(0, 1fr) auto;
65 grid-template-areas:
66 'header header header'
67 'prev content next'
68 'thumbnails thumbnails thumbnails'
69 'footer footer footer';
70 box-sizing: border-box;
71 block-size: 100%;
72 min-block-size: 0;
73
74 @include iro.bem-elem('header') {
75 grid-area: header;
76 display: flex;
77 align-items: flex-start;
78 padding-block-start: fn.dim(--pad);
79 padding-inline: fn.dim(--pad);
80 }
81
82 @include iro.bem-elem('img') {
83 display: none;
84 box-sizing: border-box;
85 grid-area: content;
86 inline-size: 100%;
87 block-size: 100%;
88 padding: fn.dim(--pad);
89 object-fit: scale-down;
90
91 @include iro.bem-sibling-elem('img') {
92 @include iro.bem-modifier('default') {
93 display: block;
94
95 @include iro.bem-next-elem('nav-btn') {
96 display: block;
97
98 @include iro.bem-next-elem('nav-btn') {
99 display: block;
100 }
101 }
102 }
103 }
104
105 @include iro.bem-multi('&:target', 'is' 'visible') {
106 display: block;
107
108 @include iro.bem-next-elem('nav-btn') {
109 display: block;
110
111 @include iro.bem-next-elem('nav-btn') {
112 display: block;
113 }
114 }
115
116 @include iro.bem-sibling-elem('img') {
117 @include iro.bem-modifier('default') {
118 display: none;
119
120 @include iro.bem-next-elem('nav-btn') {
121 display: none;
122
123 @include iro.bem-next-elem('nav-btn') {
124 display: none;
125 }
126 }
127 }
128 }
129 }
130 }
131
132 @include iro.bem-elem('thumbnails') {
133 grid-area: thumbnails;
134 display: flex;
135 gap: fn.dim(--thumbnail --spacing);
136 padding-block: fn.dim(--thumbnail --selected) fn.dim(--pad);
137 padding-inline: fn.dim(--pad);
138 overflow: auto;
139 }
140
141 @include iro.bem-elem('footer') {
142 grid-area: footer;
143 display: flex;
144 align-items: flex-start;
145 padding-block: 0 fn.dim(--pad);
146 padding-inline: fn.dim(--pad);
147 }
148
149 @include iro.bem-elem('thumbnail') {
150 position: relative;
151 flex: 0 0 auto;
152 inline-size: fn.dim(--thumbnail --size);
153 block-size: fn.dim(--thumbnail --size);
154 outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
155 opacity: .75;
156
157 &:hover,
158 &:focus-visible {
159 opacity: 1;
160 }
161
162 @include iro.bem-is('selected') {
163 outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected);
164 opacity: 1;
165 }
166 }
167
168 @include iro.bem-elem('thumbnail-img') {
169 display: block;
170 position: absolute;
171 inset-block-start: 0;
172 inset-inline-start: 0;
173 inline-size: 100%;
174 block-size: 100%;
175 object-fit: cover;
176 object-position: center center;
177 }
178
179 @include iro.bem-elem('thumbnail-icon') {
180 position: absolute;
181 inset-block-start: 50%;
182 inset-inline-start: 50%;
183 transform: translate(-50%, -50%);
184 }
185
186 @include iro.bem-elem('close-btn') {
187 flex: 0 0 auto;
188 margin-block-start: calc(-.5 * fn.dim(--pad));
189 margin-inline: auto calc(-.5 * fn.dim(--pad));
190 font-size: fn.dim(--close-button --font-size);
191 }
192
193 @include iro.bem-elem('nav-btn') {
194 display: none;
195 position: relative;
196 align-self: center;
197 overflow: visible;
198 font-size: fn.dim(--nav-button --font-size);
199
200 &::before {
201 content: '';
202 display: block;
203 position: absolute;
204 inset-block-start: 50%;
205 inline-size: fn.dim(--nav-button --width);
206 block-size: fn.dim(--nav-button --height);
207 transform: translateY(-50%);
208 }
209
210 @include iro.bem-modifier('prev') {
211 grid-area: prev;
212 margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
213
214 &::before {
215 inset-inline-start: 0;
216 }
217 }
218
219 @include iro.bem-modifier('next') {
220 grid-area: next;
221 margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
222
223 &::before {
224 inset-inline-end: 0;
225 }
226 }
227 }
228
229 @each $theme in $static-themes {
230 @include iro.bem-modifier(static-#{$theme}) {
231 color: fn.color(--static-#{$theme} --text);
232
233 @include iro.bem-elem('thumbnail') {
234 outline-color: fn.color(--static-#{$theme} --thumbnail --idle);
235
236 @include iro.bem-is('selected') {
237 outline-color: fn.color(--static-#{$theme} --thumbnail --selected);
238 }
239 }
240 }
241 }
242 }
243}
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
deleted file mode 100644
index a346828..0000000
--- a/src/objects/_list-group.scss
+++ /dev/null
@@ -1,61 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('list-group') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: fn.global-dim(--size --175),
8 --pad-b: fn.global-dim(--size --125),
9 --rounding: fn.global-dim(--rounding),
10 --border: fn.global-dim(--border --thin),
11 ),
12 --colors: (
13 --bg: fn.global-color(--base --75),
14 --border: fn.global-color(--border),
15 --hover: fn.global-color(--border-mute),
16 --active: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 border: fn.dim(--border) solid fn.color(--border);
22 border-radius: fn.dim(--rounding);
23 background-color: fn.color(--bg);
24
25 @include iro.bem-elem('item') {
26 padding-block: fn.dim(--pad-b);
27 padding-inline: fn.dim(--pad-i);
28
29 @include iro.bem-next-twin-elem {
30 border-width: 0;
31 border-block-start-width: fn.dim(--border);
32 border-style: solid;
33 border-color: fn.color(--border);
34 }
35
36 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
37 &:hover,
38 &:focus-visible {
39 background-color: fn.color(--hover);
40 }
41
42 &:active {
43 background-color: fn.color(--active);
44 }
45 }
46 }
47
48 @include iro.bem-modifier('horizontal') {
49 display: flex;
50
51 @include iro.bem-elem('item') {
52 flex: 1 0 auto;
53
54 @include iro.bem-next-twin-elem {
55 border-block-start-width: 0;
56 border-inline-start-width: fn.dim(--border);
57 }
58 }
59 }
60 }
61}
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index cadd395..416e65e 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -24,8 +24,8 @@ $themes: 'accent' 'positive' 'negative' 'warning' !default;
24 24
25 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
26 display: inline-block; 26 display: inline-block;
27 width: fn.dim(--size); 27 inline-size: fn.dim(--size);
28 height: fn.dim(--size); 28 block-size: fn.dim(--size);
29 border-radius: 10em; 29 border-radius: 10em;
30 background-color: fn.color(--default); 30 background-color: fn.color(--default);
31 vertical-align: middle; 31 vertical-align: middle;