diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/.old/layouts/_message-group.scss (renamed from src/layouts/_message-group.scss) | 0 | ||||
-rw-r--r-- | src/.old/objects/_lightbox.scss | 206 | ||||
-rw-r--r-- | src/.old/objects/_list-group.scss (renamed from src/objects/_list-group.scss) | 0 | ||||
-rw-r--r-- | src/_config.scss | 16 | ||||
-rw-r--r-- | src/_layouts.scss | 2 | ||||
-rw-r--r-- | src/_objects.scss | 4 | ||||
-rw-r--r-- | src/_themes.scss | 8 | ||||
-rw-r--r-- | src/layouts/_card-list.scss | 40 | ||||
-rw-r--r-- | src/layouts/_container.scss | 25 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 4 | ||||
-rw-r--r-- | src/objects/_card.scss | 15 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 243 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 4 | ||||
-rw-r--r-- | src/scopes/_links.scss | 75 |
14 files changed, 372 insertions, 270 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 | } |