diff options
Diffstat (limited to 'src/objects/_thumbnail.scss')
| -rw-r--r-- | src/objects/_thumbnail.scss | 95 |
1 files changed, 48 insertions, 47 deletions
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 9925dd0..c7a9791 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss | |||
| @@ -1,65 +1,66 @@ | |||
| 1 | @use 'sass:map'; | 1 | @use "sass:map"; |
| 2 | @use 'sass:meta'; | 2 | @use "sass:meta"; |
| 3 | @use 'sass:string'; | 3 | @use "sass:string"; |
| 4 | @use 'pkg:iro-sass/src/bem'; | 4 | @use "pkg:iro-sass/bem"; |
| 5 | @use 'pkg:iro-sass/src/props'; | 5 | @use "pkg:iro-sass/props"; |
| 6 | @use '../props' as *; | 6 | @use "../props" as *; |
| 7 | 7 | ||
| 8 | @forward 'thumbnail.vars'; | 8 | @forward "thumbnail.vars"; |
| 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 | outline: props.get(vars.$border-color) solid props.get(vars.$border-width); | 21 | outline: props.get(vars.$border-color) solid props.get(vars.$border-width); |
| 22 | outline-offset: calc(-1 * props.get(vars.$border-width)); | 22 | outline-offset: calc(-1 * props.get(vars.$border-width)); |
| 23 | border-radius: props.get(vars.$rounding); | 23 | border-radius: props.get(vars.$rounding); |
| 24 | 24 | ||
| 25 | &:hover, | 25 | &:hover, |
| 26 | &:active, | 26 | &:active, |
| 27 | &:focus-visible { | 27 | &:focus-visible { |
| 28 | outline-color: props.get(vars.$hover--border-color); | 28 | outline-color: props.get(vars.$hover--border-color); |
| 29 | opacity: 1; | 29 | opacity: 1; |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | @include bem.elem('image') { | 32 | @include bem.elem("image") { |
| 33 | position: absolute; | 33 | position: absolute; |
| 34 | inset-block-start: 0; | 34 | inset-block-start: 0; |
| 35 | inset-inline-start: 0; | 35 | inset-inline-start: 0; |
| 36 | display: block; | 36 | display: block; |
| 37 | inline-size: 100%; | 37 | inline-size: 100%; |
| 38 | block-size: 100%; | 38 | block-size: 100%; |
| 39 | object-fit: cover; | 39 | object-fit: cover; |
| 40 | object-position: center center; | 40 | object-position: center center; |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | @include bem.elem('icon') { | 43 | @include bem.elem("icon") { |
| 44 | position: absolute; | 44 | position: absolute; |
| 45 | inset-block-start: 50%; | 45 | inset-block-start: 50%; |
| 46 | inset-inline-start: 50%; | 46 | inset-inline-start: 50%; |
| 47 | transform: translate(-50%, -50%); | 47 | transform: translate(-50%, -50%); |
| 48 | } | 48 | } |
| 49 | 49 | ||
| 50 | &:focus-visible { | 50 | &:focus-visible { |
| 51 | $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); | 51 | $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); |
| 52 | 52 | ||
| 53 | margin: $focus-border-offset; | 53 | margin: $focus-border-offset; |
| 54 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 54 | outline: props.get(vars.$key-focus--border-color) solid |
| 55 | props.get(vars.$key-focus--border-width); | ||
| 55 | outline-offset: 0; | 56 | outline-offset: 0; |
| 56 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 57 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
| 57 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | 58 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
| 58 | box-shadow: | 59 | box-shadow: 0 0 0 |
| 59 | 0 | 60 | calc( |
| 60 | 0 | 61 | props.get(vars.$key-focus--outline-width) + |
| 61 | 0 | 62 | props.get(vars.$key-focus--border-width) |
| 62 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | 63 | ) |
| 63 | props.get(vars.$key-focus--outline-color); | 64 | props.get(vars.$key-focus--outline-color); |
| 64 | } | 65 | } |
| 65 | 66 | ||
| @@ -73,18 +74,18 @@ | |||
| 73 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); | 74 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); |
| 74 | } | 75 | } |
| 75 | 76 | ||
| 76 | @include bem.is('selected') { | 77 | @include bem.is("selected") { |
| 77 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); | 78 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); |
| 78 | } | 79 | } |
| 79 | 80 | ||
| 80 | &:focus-visible { | 81 | &:focus-visible { |
| 81 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); | 82 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); |
| 82 | border-color: transparent; | 83 | border-color: transparent; |
| 83 | box-shadow: | 84 | box-shadow: 0 0 0 |
| 84 | 0 | 85 | calc( |
| 85 | 0 | 86 | props.get(vars.$key-focus--outline-width) + |
| 86 | 0 | 87 | props.get(vars.$key-focus--border-width) |
| 87 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | 88 | ) |
| 88 | props.get(vars.$static-themes, $theme, --key-focus, --outline); | 89 | props.get(vars.$static-themes, $theme, --key-focus, --outline); |
| 89 | } | 90 | } |
| 90 | } | 91 | } |