diff options
Diffstat (limited to 'src/objects/_lightbox.scss')
-rw-r--r-- | src/objects/_lightbox.scss | 88 |
1 files changed, 0 insertions, 88 deletions
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 | } |