summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-29 10:01:02 +0200
committerVolpeon <git@volpeon.ink>2024-06-29 10:01:02 +0200
commit6376f1a5225b2fa45f6c861d4a265bf13b56d038 (patch)
tree7c2ec8bea63df05b6a533fdfa6dab4b2f17f7a1f
parentUpdate (diff)
downloadiro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.gz
iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.bz2
iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.zip
Update
Diffstat
-rw-r--r--src/.old/layouts/_message-group.scss (renamed from src/layouts/_message-group.scss)0
-rw-r--r--src/.old/objects/_lightbox.scss206
-rw-r--r--src/.old/objects/_list-group.scss (renamed from src/objects/_list-group.scss)0
-rw-r--r--src/_config.scss16
-rw-r--r--src/_layouts.scss2
-rw-r--r--src/_objects.scss4
-rw-r--r--src/_themes.scss8
-rw-r--r--src/layouts/_card-list.scss40
-rw-r--r--src/layouts/_container.scss25
-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/_status-indicator.scss4
-rw-r--r--src/scopes/_links.scss75
-rw-r--r--tpl/index.pug14
-rw-r--r--tpl/objects/card.pug12
-rw-r--r--tpl/objects/lightbox.pug27
-rw-r--r--tpl/views/card.pug31
-rw-r--r--tpl/views/lightbox.pug20
19 files changed, 449 insertions, 297 deletions
diff --git a/src/layouts/_message-group.scss b/src/.old/layouts/_message-group.scss
index 235e242..235e242 100644
--- a/src/layouts/_message-group.scss
+++ b/src/.old/layouts/_message-group.scss
diff --git a/src/.old/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss
deleted file mode 100644
index 31d3398..0000000
--- a/src/.old/objects/_lightbox.scss
+++ /dev/null
@@ -1,206 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use 'action-button';
5
6@include iro.props-namespace('lightbox') {
7 @include iro.props-store((
8 --dims: (
9 --pad: fn.global-dim(--size --150),
10 --thumbnail: (
11 --size: fn.global-dim(--size --700),
12 --spacing: fn.global-dim(--size --100),
13 --idle: 1px,
14 --selected: 2px,
15 ),
16 --close-button: (
17 --font-size: fn.global-dim(--font-size --200),
18 ),
19 --nav-button: (
20 --width: fn.global-dim(--size --3800),
21 --height: fn.global-dim(--size --3800),
22 --font-size: fn.global-dim(--font-size --200),
23 ),
24 ),
25 ), 'dims');
26
27 @include iro.props-store((
28 --dims: (
29 --thumbnail: (
30 --size: fn.global-dim(--size --600),
31 ),
32 --nav-button: (
33 --width: fn.global-dim(--size --2500),
34 --height: fn.global-dim(--size --2500),
35 ),
36 ),
37 ), 'md');
38
39 @include iro.props-store((
40 --colors: (
41 --thumbnail: (
42 --idle: fn.global-color(--fg-hi2),
43 --selected: fn.global-color(--fg-lo),
44 ),
45 ),
46 ), 'colors');
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: grid;
50 grid-template-rows: auto minmax(0, 1fr) auto auto;
51 grid-template-columns: auto minmax(0, 1fr) auto;
52 grid-template-areas:
53 'header header header'
54 'prev content next'
55 'thumbnails thumbnails thumbnails'
56 'footer footer footer';
57 box-sizing: border-box;
58 height: 100%;
59 overflow: hidden;
60
61 @include iro.bem-elem('header') {
62 grid-area: header;
63 display: flex;
64 align-items: flex-start;
65 padding: fn.dim(--pad) fn.dim(--pad) 0;
66 }
67
68 @include iro.bem-elem('img') {
69 display: none;
70 box-sizing: border-box;
71 grid-area: content;
72 width: 100%;
73 height: 100%;
74 padding: fn.dim(--pad);
75 object-fit: scale-down;
76
77 @include iro.bem-sibling-elem('img') {
78 @include iro.bem-modifier('default') {
79 display: block;
80
81 @include iro.bem-next-elem('nav-btn') {
82 display: block;
83
84 @include iro.bem-next-elem('nav-btn') {
85 display: block;
86 }
87 }
88 }
89 }
90
91 @include iro.bem-multi('&:target', 'is' 'visible') {
92 display: block;
93
94 @include iro.bem-next-elem('nav-btn') {
95 display: block;
96
97 @include iro.bem-next-elem('nav-btn') {
98 display: block;
99 }
100 }
101
102 @include iro.bem-sibling-elem('img') {
103 @include iro.bem-modifier('default') {
104 display: none;
105
106 @include iro.bem-next-elem('nav-btn') {
107 display: none;
108
109 @include iro.bem-next-elem('nav-btn') {
110 display: none;
111 }
112 }
113 }
114 }
115 }
116 }
117
118 @include iro.bem-elem('thumbnails') {
119 grid-area: thumbnails;
120 display: flex;
121 gap: fn.dim(--thumbnail --spacing);
122 padding: fn.dim(--thumbnail --selected) fn.dim(--pad) fn.dim(--pad);
123 overflow: auto;
124 }
125
126 @include iro.bem-elem('footer') {
127 grid-area: footer;
128 display: flex;
129 align-items: flex-start;
130 padding: 0 fn.dim(--pad) fn.dim(--pad);
131 }
132
133 @include iro.bem-elem('thumbnail') {
134 position: relative;
135 flex: 0 0 auto;
136 width: fn.dim(--thumbnail --size);
137 height: fn.dim(--thumbnail --size);
138 opacity: .75;
139 box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
140
141 &:hover {
142 opacity: 1;
143 }
144
145 @include iro.bem-is('selected') {
146 opacity: 1;
147 box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
148 }
149 }
150
151 @include iro.bem-elem('thumbnail-img') {
152 display: block;
153 position: absolute;
154 top: 0;
155 left: 0;
156 width: 100%;
157 height: 100%;
158 object-fit: cover;
159 object-position: center center;
160 }
161
162 @include iro.bem-elem('thumbnail-icon') {
163 position: absolute;
164 top: 50%;
165 left: 50%;
166 transform: translate(-50%, -50%);
167 }
168
169 @include iro.bem-elem('close-btn') {
170 flex: 0 0 auto;
171 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
172 font-size: fn.dim(--close-button --font-size);
173 }
174
175 @include iro.bem-elem('nav-btn') {
176 display: none;
177 position: relative;
178 align-self: center;
179 overflow: visible;
180 font-size: fn.dim(--nav-button --font-size);
181
182 &::after {
183 content: '';
184 display: block;
185 position: absolute;
186 top: 50%;
187 left: 50%;
188 width: fn.dim(--nav-button --width);
189 height: fn.dim(--nav-button --height);
190 transform: translate(-50%, -50%);
191 }
192
193 @include iro.bem-modifier('prev') {
194 grid-area: prev;
195 margin-right: calc(-1 * fn.dim(--pad));
196 margin-left: calc(.5 * fn.dim(--pad));
197 }
198
199 @include iro.bem-modifier('next') {
200 grid-area: next;
201 margin-right: calc(.5 * fn.dim(--pad));
202 margin-left: calc(-1 * fn.dim(--pad));
203 }
204 }
205 }
206}
diff --git a/src/objects/_list-group.scss b/src/.old/objects/_list-group.scss
index a346828..a346828 100644
--- a/src/objects/_list-group.scss
+++ b/src/.old/objects/_list-group.scss
diff --git a/src/_config.scss b/src/_config.scss
index ffba8c9..73e0725 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -109,15 +109,15 @@ $theme-light: (
109 --75: -4, 109 --75: -4,
110 --100: 0, 110 --100: 0,
111 111
112 --200: easing.cubic-bezier(.2, .1, .7, .95, math.div(1, 8)) * 106, 112 --200: easing.cubic-bezier(.2, .1, .8, 1, math.div(1, 8)) * 106,
113 --300: easing.cubic-bezier(.2, .1, .7, .95, math.div(2, 8)) * 106, 113 --300: easing.cubic-bezier(.2, .1, .8, 1, math.div(2, 8)) * 106,
114 --400: easing.cubic-bezier(.2, .1, .7, .95, math.div(3, 8)) * 106, 114 --400: easing.cubic-bezier(.2, .1, .8, 1, math.div(3, 8)) * 106,
115 115
116 --500: easing.cubic-bezier(.2, .1, .7, .95, math.div(4, 8)) * 106, 116 --500: easing.cubic-bezier(.2, .1, .8, 1, math.div(4, 8)) * 106,
117 --600: easing.cubic-bezier(.2, .1, .7, .95, math.div(5, 8)) * 106, 117 --600: easing.cubic-bezier(.2, .1, .8, 1, math.div(5, 8)) * 106,
118 --700: easing.cubic-bezier(.2, .1, .7, .95, math.div(6, 8)) * 106, 118 --700: easing.cubic-bezier(.2, .1, .8, 1, math.div(6, 8)) * 106,
119 --800: easing.cubic-bezier(.2, .1, .7, .95, math.div(7, 8)) * 106, 119 --800: easing.cubic-bezier(.2, .1, .8, 1, math.div(7, 8)) * 106,
120 --900: easing.cubic-bezier(.2, .1, .7, .95, math.div(8, 8)) * 106, 120 --900: easing.cubic-bezier(.2, .1, .8, 1, math.div(8, 8)) * 106,
121 ), 121 ),
122 122
123 --colors: ( 123 --colors: (
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 779fd64..572308d 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -5,4 +5,4 @@
5@use 'layouts/flex'; 5@use 'layouts/flex';
6@use 'layouts/overflow'; 6@use 'layouts/overflow';
7@use 'layouts/card-list'; 7@use 'layouts/card-list';
8@use 'layouts/message-group'; 8//@use 'layouts/message-group';
diff --git a/src/_objects.scss b/src/_objects.scss
index fc6e556..c5049cd 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -21,8 +21,8 @@
21// @use 'objects/icon-nav'; 21// @use 'objects/icon-nav';
22@use 'objects/backdrop'; 22@use 'objects/backdrop';
23// @use 'objects/dialog'; 23// @use 'objects/dialog';
24// @use 'objects/lightbox'; 24@use 'objects/lightbox';
25@use 'objects/list-group'; 25// @use 'objects/list-group';
26@use 'objects/table'; 26@use 'objects/table';
27@use 'objects/alert'; 27@use 'objects/alert';
28@use 'objects/palette'; 28@use 'objects/palette';
diff --git a/src/_themes.scss b/src/_themes.scss
index 72562c0..6fcf83b 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,6 +1,8 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn; 2@use 'functions' as fn;
3 3
4$static-themes: 'black' 'white' !default;
5
4@include iro.bem-theme('base') { 6@include iro.bem-theme('base') {
5 background-color: fn.global-color(--bg-base); 7 background-color: fn.global-color(--bg-base);
6} 8}
@@ -12,3 +14,9 @@
12@include iro.bem-theme('l2') { 14@include iro.bem-theme('l2') {
13 background-color: fn.global-color(--bg-l2); 15 background-color: fn.global-color(--bg-l2);
14} 16}
17
18@each $theme in $static-themes {
19 @include iro.bem-theme($theme) {
20 color: fn.global-color(--#{$theme}-transparent --800),
21 }
22}
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c27b297..362325a 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -37,7 +37,11 @@
37 @include iro.bem-modifier('grid') { 37 @include iro.bem-modifier('grid') {
38 display: grid; 38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); 39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap); 40 gap: fn.dim(--grid --col-gap);
41
42 @include iro.bem-modifier('quiet') {
43 row-gap: fn.dim(--grid --row-gap);
44 }
41 } 45 }
42 46
43 @include iro.bem-modifier('masonry') { 47 @include iro.bem-modifier('masonry') {
@@ -46,31 +50,45 @@
46 column-gap: fn.dim(--masonry --col-gap); 50 column-gap: fn.dim(--masonry --col-gap);
47 51
48 @include iro.bem-elem('card') { 52 @include iro.bem-elem('card') {
49 margin-bottom: fn.dim(--masonry --row-gap); 53 margin-bottom: fn.dim(--masonry --col-gap);
54 break-inside: avoid;
55 }
56
57 @include iro.bem-modifier('quiet') {
58 @include iro.bem-elem('card') {
59 margin-bottom: fn.dim(--masonry --row-gap);
60 }
50 } 61 }
51 } 62 }
52 63
53 @include iro.bem-modifier('masonry-h') { 64 @include iro.bem-modifier('masonry-h') {
54 flex-flow: row wrap; 65 flex-flow: row wrap;
55 gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap); 66 gap: fn.dim(--masonry-h --col-gap);
67
68 &::after {
69 content: '';
70 display: block;
71 flex: 1 0 auto;
72 inline-size: fn.dim(--masonry-h --row-height);
73 block-size: 0;
74 }
56 75
57 @include iro.bem-elem('card') { 76 @include iro.bem-elem('card') {
58 flex: 1 0 auto; 77 flex: 1 0 auto;
59 max-width: 100%; 78 max-inline-size: 100%;
60 } 79 }
61 80
62 @include iro.bem-elem('card-content') { 81 @include iro.bem-elem('card-image') {
63 height: fn.dim(--masonry-h --row-height); 82 block-size: fn.dim(--masonry-h --row-height);
64 } 83 }
65 84
66 @include iro.bem-elem('dummy') { 85 @include iro.bem-modifier('quiet') {
67 flex: 1 0 auto; 86 row-gap: fn.dim(--masonry-h --row-gap);
68 width: fn.dim(--masonry-h --row-height);
69 } 87 }
70 } 88 }
71 89
72 @include iro.bem-modifier('aspect-5\\/4') { 90 @include iro.bem-modifier('aspect-5\\/4') {
73 @include iro.bem-elem('card') { 91 @include iro.bem-elem('card-image') {
74 aspect-ratio: 5 / 4; 92 aspect-ratio: 5 / 4;
75 } 93 }
76 } 94 }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index fcc4837..06607a1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
7 --narrow-125: iro.fn-px-to-rem(720px), 7 --narrow-125: iro.fn-px-to-rem(720px),
8 --narrow: iro.fn-px-to-rem(610px), 8 --narrow: iro.fn-px-to-rem(610px),
9 --narrow-75: iro.fn-px-to-rem(500px), 9 --narrow-75: iro.fn-px-to-rem(500px),
10 --pad-x: fn.global-dim(--size --400), 10 --pad-i: fn.global-dim(--size --400),
11 --pad-y: fn.global-dim(--size --800), 11 --pad-b: fn.global-dim(--size --800),
12 ) 12 )
13 )); 13 ));
14 14
15 @include iro.props-store(( 15 @include iro.props-store((
16 --dims: ( 16 --dims: (
17 --pad-x: fn.global-dim(--size --200), 17 --pad-i: fn.global-dim(--size --200),
18 --pad-y: fn.global-dim(--size --600), 18 --pad-b: fn.global-dim(--size --600),
19 ) 19 )
20 ), 'sm'); 20 ), 'sm');
21 21
22 @include iro.props-store(( 22 @include iro.props-store((
23 --dims: ( 23 --dims: (
24 --pad-x: fn.global-dim(--size --150), 24 --pad-i: fn.global-dim(--size --150),
25 --pad-y: fn.global-dim(--size --450), 25 --pad-b: fn.global-dim(--size --450),
26 ) 26 )
27 ), 'xs'); 27 ), 'xs');
28 28
@@ -30,19 +30,16 @@
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' { 30 @each $size in 'narrow-125' 'narrow' 'narrow-75' {
31 @include iro.bem-modifier($size) { 31 @include iro.bem-modifier($size) {
32 max-inline-size: fn.dim(--#{$size}); 32 max-inline-size: fn.dim(--#{$size});
33 margin-right: auto; 33 margin-inline: auto;
34 margin-left: auto;
35 } 34 }
36 } 35 }
37 36
38 @include iro.bem-modifier('pad-x') { 37 @include iro.bem-modifier('pad-i') {
39 padding-right: fn.dim(--pad-x); 38 margin-inline: fn.dim(--pad-i);
40 padding-left: fn.dim(--pad-x);
41 } 39 }
42 40
43 @include iro.bem-modifier('pad-y') { 41 @include iro.bem-modifier('pad-b') {
44 padding-top: fn.dim(--pad-y); 42 padding-block: fn.dim(--pad-b);
45 padding-bottom: fn.dim(--pad-y);
46 } 43 }
47 } 44 }
48} 45}
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/_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;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 552b02a..790d5c6 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,6 +1,8 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4$static-themes: 'black' 'white' !default;
5
4@include iro.props-namespace('links') { 6@include iro.props-namespace('links') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
@@ -18,23 +20,23 @@
18 ), 20 ),
19 ), 21 ),
20 --colors: ( 22 --colors: (
21 --underline: fn.global-color(--text-mute-more), 23 --underline: fn.global-color(--text-mute-more),
22 24
23 --idle: ( 25 --colored: (
24 --text: fn.global-color(--accent --1100), 26 --text: fn.global-color(--accent --1100),
25 --underline: fn.global-color(--accent --600), 27 --underline: fn.global-color(--accent --600),
26 28
27 --hover: ( 29 --hover: (
28 --text: fn.global-color(--accent --1300), 30 --text: fn.global-color(--accent --1300),
29 ), 31 ),
30 ), 32
31 33 --visited: (
32 --visited: ( 34 --text: fn.global-color(--purple --1100),
33 --text: fn.global-color(--purple --1100), 35 --underline: fn.global-color(--purple --600),
34 --underline: fn.global-color(--purple --600), 36
35 37 --hover: (
36 --hover: ( 38 --text: fn.global-color(--purple --1300),
37 --text: fn.global-color(--purple --1300), 39 ),
38 ), 40 ),
39 ), 41 ),
40 42
@@ -46,6 +48,27 @@
46 ), 48 ),
47 )); 49 ));
48 50
51 @each $theme in $static-themes {
52 @include iro.props-store((
53 --colors: (
54 --static-#{$theme}: (
55 --text: fn.global-color(--#{$theme}-transparent --800),
56 --underline: fn.global-color(--#{$theme}-transparent --500),
57
58 --hover: (
59 --text: fn.global-color(--#{$theme}-transparent --900),
60 ),
61
62 --key-focus: (
63 --text: fn.global-color(--#{$theme}-transparent --900),
64 --border: fn.global-color(--#{$theme}-transparent --900),
65 --outline: fn.global-color(--#{$theme}-transparent --300),
66 ),
67 )
68 )
69 ));
70 }
71
49 @include iro.bem-scope(iro.props-namespace()) { 72 @include iro.bem-scope(iro.props-namespace()) {
50 :link, 73 :link,
51 :visited { 74 :visited {
@@ -81,20 +104,40 @@
81 104
82 @include iro.bem-modifier('colored') { 105 @include iro.bem-modifier('colored') {
83 :link { 106 :link {
84 color: fn.color(--idle --text); 107 color: fn.color(--colored --text);
85 text-decoration-color: fn.color(--idle --underline); 108 text-decoration-color: fn.color(--colored --underline);
86 109
87 &:hover { 110 &:hover {
88 color: fn.color(--idle --hover --text); 111 color: fn.color(--colored --hover --text);
89 } 112 }
90 } 113 }
91 114
92 :visited { 115 :visited {
93 color: fn.color(--visited --text); 116 color: fn.color(--colored --visited --text);
94 text-decoration-color: fn.color(--visited --underline); 117 text-decoration-color: fn.color(--colored --visited --underline);
95 118
96 &:hover { 119 &:hover {
97 color: fn.color(--visited --hover --text); 120 color: fn.color(--colored --visited --hover --text);
121 }
122 }
123 }
124
125 @each $theme in $static-themes {
126 @include iro.bem-modifier(static-#{$theme}) {
127 :link,
128 :visited {
129 color: fn.color(--static-#{$theme} --text);
130 text-decoration-color: fn.color(--static-#{$theme} --underline);
131
132 &:hover {
133 color: fn.color(--static-#{$theme} --hover --text);
134 }
135
136 &:focus-visible {
137 outline-color: fn.color(--static-#{$theme} --key-focus --border);
138 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
139 color: fn.color(--static-#{$theme} --key-focus --text);
140 }
98 } 141 }
99 } 142 }
100 } 143 }
diff --git a/tpl/index.pug b/tpl/index.pug
index a6e99dd..c4baa64 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -40,7 +40,7 @@ mixin view(id, title)
40 - 40 -
41 views.push({ id, title }); 41 views.push({ id, title });
42 42
43 +container(narrow=true class='u-p-700 c-view' id=id) 43 +container(narrow=!attributes.wide class='u-p-700 c-view' id=id)
44 +h1-heading('xl')(class='u-mt-0')= title 44 +h1-heading('xl')(class='u-mt-0')= title
45 +divider('medium') 45 +divider('medium')
46 block 46 block
@@ -117,22 +117,22 @@ html
117 +view-switch 117 +view-switch
118 +view-form 118 +view-form
119 +view-action-button 119 +view-action-button
120 +view-overflow-button 120 //+view-overflow-button
121 +view-status-indicator 121 +view-status-indicator
122 +view-avatar 122 +view-avatar
123 +view-card 123 +view-card
124 +view-side-nav 124 +view-side-nav
125 +view-popover 125 +view-popover
126 +view-menu 126 +view-menu
127 +view-icon-nav 127 //+view-icon-nav
128 +view-backdrop 128 +view-backdrop
129 +view-dialog 129 //+view-dialog
130 +view-lightbox 130 +view-lightbox
131 +view-list-group 131 //+view-list-group
132 +view-table 132 +view-table
133 +view-alert 133 +view-alert
134 +view-message 134 //+view-message
135 +view-message-group 135 //+view-message-group
136 136
137 .c-sidebar.l-overflow.u-bie-1.u-p-100 137 .c-sidebar.l-overflow.u-bie-1.u-p-100
138 +side-nav 138 +side-nav
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d7595d1..d622d3b 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -17,7 +17,16 @@ mixin card
17 block 17 block
18 18
19mixin card-image 19mixin card-image
20 .o-card__image 20 -
21 let classes = {
22 'o-card__image': true,
23 }
24
25 if (attributes.class) {
26 classes[attributes.class] = true;
27 }
28
29 div(class=classes)
21 img.o-card__image-img(src=attributes.src style=attributes.style) 30 img.o-card__image-img(src=attributes.src style=attributes.style)
22 31
23mixin card-body 32mixin card-body
@@ -34,6 +43,7 @@ mixin card-avatar
34mixin card-content 43mixin card-content
35 .o-card__content 44 .o-card__content
36 block 45 block
46
37mixin card-footer 47mixin card-footer
38 footer.o-card__footer 48 footer.o-card__footer
39 block 49 block
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 58abdae..02a3200 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,20 +1,33 @@
1include icon.pug 1include icon.pug
2 2
3mixin lightbox(images) 3mixin lightbox(images)
4 .o-lightbox 4 -
5 let classes = {
6 'o-lightbox': true,
7 }
8 let linksClasses = {
9 's-links': true,
10 }
11
12 if (attributes.theme) {
13 classes[`o-lightbox--${attributes.theme}`] = true;
14 linksClasses[`s-links--${attributes.theme}`] = true;
15 }
16
17 div(class=classes)
5 header.o-lightbox__header 18 header.o-lightbox__header
6 .s-links.s-links--colored 19 div(class=linksClasses)
7 block 20 block
8 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 21 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
9 each img, i in images 22 each img, i in images
10 img.o-lightbox__img(src=images[i] id='image-' + i) 23 img.o-lightbox__img(src=images[i] id='image-' + i)
11 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 24 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
12 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 25 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
13 26
14 img.o-lightbox__img.o-lightbox__img--default(src=images[0]) 27 img.o-lightbox__img.o-lightbox__img--default(src=images[0])
15 if images.length > 1 28 if images.length > 1
16 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 29 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
17 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 30 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
18 .o-lightbox__thumbnails 31 .o-lightbox__thumbnails
19 each img, i in images 32 each img, i in images
20 - classes = i === 0 ? 'is-selected' : '' 33 - classes = i === 0 ? 'is-selected' : ''
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index e466cdc..4871d30 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,5 +1,5 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card') 2 +view('card', 'Card')(wide=true)
3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) 3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
4 +card(href='#') 4 +card(href='#')
5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
@@ -44,11 +44,26 @@ mixin view-card
44 p= loremIpsum 44 p= loremIpsum
45 p= loremIpsum 45 p= loremIpsum
46 46
47 +divider('faint') 47 each layout in ['grid', 'masonry', 'masonry-h']
48 -
49 let quiet = true
48 50
49 .l-card-list.l-card-list--masonry 51 let classes = {
50 each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] 52 'l-card-list': true,
51 +card(href='#' class='l-card-list__card') 53 'l-card-list--aspect-5/4': layout === 'grid',
52 +card-image(src=img) 54 'l-card-list--quiet': quiet,
53 +card-body 55 }
54 +card-title= 'XS Heading' 56 classes[`l-card-list--${layout}`] = true;
57
58
59 +divider('faint')(class='u-mb-700')
60
61 div(class=classes)
62 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
63 +card(quiet=quiet href='#' class='l-card-list__card')
64 +card-image(src=img class='l-card-list__card-image')
65 +card-body
66 .l-media
67 .l-media__block.l-media__block--main
68 h1.u-mbs-0= 'XS Heading'
69 small.u-c-mute-more= `Episode ${i + 1}`
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 8169a35..4eb234a 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,8 +1,20 @@
1mixin view-lightbox 1mixin view-lightbox
2 +view('lightbox', 'Lightbox') 2 +view('lightbox', 'Lightbox')
3 .c-box 3 .c-box
4 +backdrop(class='t-media') 4 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
5 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) 5 = "Let's try multiple links! "
6 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
7 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
8 = ' '
9 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
10 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
11 = ' '
12 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
13 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
14
15 .c-box
16 +backdrop
17 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
6 = "Let's try multiple links! " 18 = "Let's try multiple links! "
7 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") 19 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
8 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" 20 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -14,8 +26,8 @@ mixin view-lightbox
14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 26 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
15 27
16 .c-box 28 .c-box
17 +backdrop(class='t-media') 29 +backdrop
18 +lightbox(['avatar.png']) 30 +lightbox(['avatar.png'])(theme='static-white')
19 = "Let's try multiple links! " 31 = "Let's try multiple links! "
20 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") 32 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
21 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" 33 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 01:41:03 +0000