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 | } |
