summaryrefslogtreecommitdiffstats
path: root/src/objects/_thumbnail.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_thumbnail.scss')
-rw-r--r--src/objects/_thumbnail.scss160
1 files changed, 80 insertions, 80 deletions
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 73a8cb0..60a98af 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -9,96 +9,96 @@
9@use 'thumbnail.vars' as vars; 9@use 'thumbnail.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('thumbnail') { 14 @include bem.object('thumbnail') {
15 position: relative; 15 position: relative;
16 display: block; 16 display: block;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 inline-size: props.get(vars.$size); 18 inline-size: props.get(vars.$size);
19 block-size: props.get(vars.$size); 19 block-size: props.get(vars.$size);
20 overflow: hidden; 20 overflow: hidden;
21 border-radius: props.get(vars.$rounding); 21 outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
22 outline: props.get(vars.$border-color) solid props.get(vars.$border-width); 22 outline-offset: calc(-1 * props.get(vars.$border-width));
23 outline-offset: calc(-1 * props.get(vars.$border-width)); 23 border-radius: props.get(vars.$rounding);
24 opacity: .75; 24 opacity: .75;
25 25
26 &:hover, 26 &:hover,
27 &:active, 27 &:active,
28 &:focus-visible { 28 &:focus-visible {
29 outline-color: props.get(vars.$hover--border-color); 29 outline-color: props.get(vars.$hover--border-color);
30 opacity: 1; 30 opacity: 1;
31 } 31 }
32 32
33 @include bem.is('selected') { 33 @include bem.is('selected') {
34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); 34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
35 35
36 margin: $focus-border-offset; 36 margin: $focus-border-offset;
37 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); 37 outline: none;
38 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 38 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
39 outline: none; 39 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
40 opacity: 1; 40 opacity: 1;
41 } 41 }
42 42
43 @include bem.elem('image') { 43 @include bem.elem('image') {
44 position: absolute; 44 position: absolute;
45 inset-block-start: 0; 45 inset-block-start: 0;
46 inset-inline-start: 0; 46 inset-inline-start: 0;
47 display: block; 47 display: block;
48 inline-size: 100%; 48 inline-size: 100%;
49 block-size: 100%; 49 block-size: 100%;
50 object-fit: cover; 50 object-fit: cover;
51 object-position: center center; 51 object-position: center center;
52 } 52 }
53 53
54 @include bem.elem('icon') { 54 @include bem.elem('icon') {
55 position: absolute; 55 position: absolute;
56 inset-block-start: 50%; 56 inset-block-start: 50%;
57 inset-inline-start: 50%; 57 inset-inline-start: 50%;
58 transform: translate(-50%, -50%); 58 transform: translate(-50%, -50%);
59 } 59 }
60 60
61 &:focus-visible { 61 &:focus-visible {
62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); 62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
63 63
64 margin: $focus-border-offset; 64 margin: $focus-border-offset;
65 border: props.get(vars.$key-focus--border-offset) solid transparent; 65 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
66 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 66 outline-offset: 0;
67 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 67 border: props.get(vars.$key-focus--border-offset) solid transparent;
68 outline-offset: 0; 68 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
69 box-shadow: 69 box-shadow:
70 0 70 0
71 0 71 0
72 0 72 0
73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) 73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
74 props.get(vars.$key-focus--outline-color); 74 props.get(vars.$key-focus--outline-color);
75 } 75 }
76 76
77 @each $theme in map.keys(props.get(vars.$static-themes)) { 77 @each $theme in map.keys(props.get(vars.$static-themes)) {
78 @include bem.modifier(string.slice($theme, 3)) { 78 @include bem.modifier(string.slice($theme, 3)) {
79 outline-color: props.get(vars.$static-themes, $theme, --border); 79 outline-color: props.get(vars.$static-themes, $theme, --border);
80 80
81 &:hover, 81 &:hover,
82 &:active, 82 &:active,
83 &:focus-visible { 83 &:focus-visible {
84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border); 84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
85 } 85 }
86 86
87 @include bem.is('selected') { 87 @include bem.is('selected') {
88 border-color: props.get(vars.$static-themes, $theme, --selected, --border); 88 border-color: props.get(vars.$static-themes, $theme, --selected, --border);
89 } 89 }
90 90
91 &:focus-visible { 91 &:focus-visible {
92 border-color: transparent; 92 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
93 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); 93 border-color: transparent;
94 box-shadow: 94 box-shadow:
95 0 95 0
96 0 96 0
97 0 97 0
98 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) 98 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
99 props.get(vars.$static-themes, $theme, --key-focus, --outline); 99 props.get(vars.$static-themes, $theme, --key-focus, --outline);
100 } 100 }
101 } 101 }
102 } 102 }
103 } 103 }
104} 104}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 08:27:01 +0000