summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-26 18:13:16 +0200
committerVolpeon <git@volpeon.ink>2024-10-26 18:13:16 +0200
commit1c1a00c12c1be4989e28d6c3bf19b9139396250f (patch)
treea01d622427566c09b8d17517df87aa4cd4b6c31a /src
parentAdd media-view (diff)
downloadiro-design-1c1a00c12c1be4989e28d6c3bf19b9139396250f.tar.gz
iro-design-1c1a00c12c1be4989e28d6c3bf19b9139396250f.tar.bz2
iro-design-1c1a00c12c1be4989e28d6c3bf19b9139396250f.zip
Move lightbox thumbnail to own object
Diffstat (limited to 'src')
-rw-r--r--src/_iro-design.scss3
-rw-r--r--src/layouts/_card-view.scss (renamed from src/layouts/_media-view.scss)2
-rw-r--r--src/objects/_lightbox.scss88
-rw-r--r--src/objects/_thumbnail.scss102
-rw-r--r--src/objects/_thumbnail.vars.scss51
5 files changed, 156 insertions, 90 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 7f726da..6698d76 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -32,7 +32,7 @@ $breakpoints: (
32@forward 'layouts/media' as l-media--*; 32@forward 'layouts/media' as l-media--*;
33@forward 'layouts/overflow' as l-overflow--*; 33@forward 'layouts/overflow' as l-overflow--*;
34@forward 'layouts/split-view' as l-split-view--*; 34@forward 'layouts/split-view' as l-split-view--*;
35@forward 'layouts/media-view' as l-media-view--*; 35@forward 'layouts/card-view' as l-card-view--*;
36 36
37@forward 'scopes/implicit' as s-implicit--*; 37@forward 'scopes/implicit' as s-implicit--*;
38@forward 'scopes/blockquotes' as s-blockquotes--*; 38@forward 'scopes/blockquotes' as s-blockquotes--*;
@@ -65,6 +65,7 @@ $breakpoints: (
65@forward 'objects/switch' as o-switch--*; 65@forward 'objects/switch' as o-switch--*;
66@forward 'objects/table' as o-table--*; 66@forward 'objects/table' as o-table--*;
67@forward 'objects/text-field' as o-text-field--*; 67@forward 'objects/text-field' as o-text-field--*;
68@forward 'objects/thumbnail' as o-thumbnail--*;
68 69
69@forward 'utils' as utils--*; 70@forward 'utils' as utils--*;
70 71
diff --git a/src/layouts/_media-view.scss b/src/layouts/_card-view.scss
index 2c53db6..f6e0ef1 100644
--- a/src/layouts/_media-view.scss
+++ b/src/layouts/_card-view.scss
@@ -4,7 +4,7 @@
4@use '../props' as *; 4@use '../props' as *;
5 5
6@mixin styles { 6@mixin styles {
7 @include bem.layout('media-view') { 7 @include bem.layout('card-view') {
8 display: flex; 8 display: flex;
9 flex-direction: column; 9 flex-direction: column;
10 min-block-size: 100%; 10 min-block-size: 100%;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 0ce62ff..4964b81 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -45,69 +45,6 @@
45 overflow: auto; 45 overflow: auto;
46 } 46 }
47 47
48 @include bem.elem('thumbnail') {
49 position: relative;
50 flex: 0 0 auto;
51 inline-size: props.get(vars.$thumbnail--size);
52 block-size: props.get(vars.$thumbnail--size);
53 overflow: hidden;
54 border-radius: props.get(vars.$thumbnail--rounding);
55 outline: props.get(vars.$thumbnail--border-color) solid props.get(vars.$thumbnail--border-width);
56 outline-offset: calc(-1 * props.get(vars.$thumbnail--border-width));
57 opacity: .75;
58
59 &:hover,
60 &:active,
61 &:focus-visible {
62 outline-color: props.get(vars.$thumbnail--hover--border-color);
63 opacity: 1;
64 }
65
66 @include bem.is('selected') {
67 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
68
69 margin: $focus-border-offset;
70 border: props.get(vars.$thumbnail--selected--border-width) solid props.get(vars.$thumbnail--selected--border-color);
71 border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset);
72 outline: none;
73 opacity: 1;
74 }
75
76 &:focus-visible {
77 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--key-focus--border-offset));
78
79 margin: $focus-border-offset;
80 border: props.get(vars.$thumbnail--key-focus--border-offset) solid transparent;
81 border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset);
82 outline: props.get(vars.$thumbnail--key-focus--border-color) solid props.get(vars.$thumbnail--key-focus--border-width);
83 outline-offset: 0;
84 box-shadow:
85 0
86 0
87 0
88 calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width))
89 props.get(vars.$thumbnail--key-focus--outline-color);
90 }
91 }
92
93 @include bem.elem('thumbnail-img') {
94 position: absolute;
95 inset-block-start: 0;
96 inset-inline-start: 0;
97 display: block;
98 inline-size: 100%;
99 block-size: 100%;
100 object-fit: cover;
101 object-position: center center;
102 }
103
104 @include bem.elem('thumbnail-icon') {
105 position: absolute;
106 inset-block-start: 50%;
107 inset-inline-start: 50%;
108 transform: translate(-50%, -50%);
109 }
110
111 @include bem.elem('close-btn') { 48 @include bem.elem('close-btn') {
112 display: none; 49 display: none;
113 flex: 0 0 auto; 50 flex: 0 0 auto;
@@ -187,31 +124,6 @@
187 @each $theme in map.keys(props.get(vars.$static-themes)) { 124 @each $theme in map.keys(props.get(vars.$static-themes)) {
188 @include bem.modifier(string.slice($theme, 3)) { 125 @include bem.modifier(string.slice($theme, 3)) {
189 color: props.get(vars.$static-themes, $theme, --text); 126 color: props.get(vars.$static-themes, $theme, --text);
190
191 @include bem.elem('thumbnail') {
192 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
193
194 &:hover,
195 &:active,
196 &:focus-visible {
197 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
198 }
199
200 @include bem.is('selected') {
201 border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
202 }
203
204 &:focus-visible {
205 border-color: transparent;
206 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --border);
207 box-shadow:
208 0
209 0
210 0
211 calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width))
212 props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --outline);
213 }
214 }
215 } 127 }
216 } 128 }
217 } 129 }
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
new file mode 100644
index 0000000..8702fbe
--- /dev/null
+++ b/src/objects/_thumbnail.scss
@@ -0,0 +1,102 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'thumbnail.vars';
9@use 'thumbnail.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('thumbnail') {
15 position: relative;
16 inline-size: props.get(vars.$size);
17 block-size: props.get(vars.$size);
18 overflow: hidden;
19 border-radius: props.get(vars.$rounding);
20 outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
21 outline-offset: calc(-1 * props.get(vars.$border-width));
22 opacity: .75;
23
24 &:hover,
25 &:active,
26 &:focus-visible {
27 outline-color: props.get(vars.$hover--border-color);
28 opacity: 1;
29 }
30
31 @include bem.is('selected') {
32 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
33
34 margin: $focus-border-offset;
35 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
36 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
37 outline: none;
38 opacity: 1;
39 }
40
41 @include bem.elem('image') {
42 position: absolute;
43 inset-block-start: 0;
44 inset-inline-start: 0;
45 display: block;
46 inline-size: 100%;
47 block-size: 100%;
48 object-fit: cover;
49 object-position: center center;
50 }
51
52 @include bem.elem('icon') {
53 position: absolute;
54 inset-block-start: 50%;
55 inset-inline-start: 50%;
56 transform: translate(-50%, -50%);
57 }
58
59 &:focus-visible {
60 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
61
62 margin: $focus-border-offset;
63 border: props.get(vars.$key-focus--border-offset) solid transparent;
64 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
65 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
66 outline-offset: 0;
67 box-shadow:
68 0
69 0
70 0
71 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
72 props.get(vars.$key-focus--outline-color);
73 }
74
75 @each $theme in map.keys(props.get(vars.$static-themes)) {
76 @include bem.modifier(string.slice($theme, 3)) {
77 outline-color: props.get(vars.$static-themes, $theme, --border);
78
79 &:hover,
80 &:active,
81 &:focus-visible {
82 outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
83 }
84
85 @include bem.is('selected') {
86 border-color: props.get(vars.$static-themes, $theme, --selected, --border);
87 }
88
89 &:focus-visible {
90 border-color: transparent;
91 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
92 box-shadow:
93 0
94 0
95 0
96 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
97 props.get(vars.$static-themes, $theme, --key-focus, --outline);
98 }
99 }
100 }
101 }
102}
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
new file mode 100644
index 0000000..ba8cebe
--- /dev/null
+++ b/src/objects/_thumbnail.vars.scss
@@ -0,0 +1,51 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !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;
10
11$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
12
13$key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
18
19$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
20
21$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
22
23$key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
24$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
25
26$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default;
27
28$static-themes: props.def(--o-thumbnail, (), 'color');
29
30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $thumbnail-theme: --static-#{string.slice($theme, 3)};
32
33 $static-themes: props.merge($static-themes, (
34 $thumbnail-theme: (
35 --border: props.get(core.$transparent-colors, $theme, --400),
36
37 --hover: (
38 --border: props.get(core.$transparent-colors, $theme, --500),
39 ),
40
41 --selected: (
42 --border: props.get(core.$transparent-colors, $theme, --900),
43 ),
44
45 --key-focus: (
46 --border: props.get(core.$transparent-colors, $theme, --900),
47 --outline: props.get(core.$transparent-colors, $theme, --300),
48 ),
49 )
50 ));
51}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 03:29:01 +0000