diff options
Diffstat (limited to 'src/objects/_thumbnail.scss')
| -rw-r--r-- | src/objects/_thumbnail.scss | 95 |
1 files changed, 47 insertions, 48 deletions
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index c7a9791..9925dd0 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss | |||
| @@ -1,66 +1,65 @@ | |||
| 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/bem"; | 4 | @use 'pkg:iro-sass/src/bem'; |
| 5 | @use "pkg:iro-sass/props"; | 5 | @use 'pkg:iro-sass/src/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 | 54 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
| 55 | props.get(vars.$key-focus--border-width); | ||
| 56 | outline-offset: 0; | 55 | outline-offset: 0; |
| 57 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 56 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
| 58 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | 57 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
| 59 | box-shadow: 0 0 0 | 58 | box-shadow: |
| 60 | calc( | 59 | 0 |
| 61 | props.get(vars.$key-focus--outline-width) + | 60 | 0 |
| 62 | props.get(vars.$key-focus--border-width) | 61 | 0 |
| 63 | ) | 62 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) |
| 64 | props.get(vars.$key-focus--outline-color); | 63 | props.get(vars.$key-focus--outline-color); |
| 65 | } | 64 | } |
| 66 | 65 | ||
| @@ -74,18 +73,18 @@ | |||
| 74 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); | 73 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); |
| 75 | } | 74 | } |
| 76 | 75 | ||
| 77 | @include bem.is("selected") { | 76 | @include bem.is('selected') { |
| 78 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); | 77 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); |
| 79 | } | 78 | } |
| 80 | 79 | ||
| 81 | &:focus-visible { | 80 | &:focus-visible { |
| 82 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); | 81 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); |
| 83 | border-color: transparent; | 82 | border-color: transparent; |
| 84 | box-shadow: 0 0 0 | 83 | box-shadow: |
| 85 | calc( | 84 | 0 |
| 86 | props.get(vars.$key-focus--outline-width) + | 85 | 0 |
| 87 | props.get(vars.$key-focus--border-width) | 86 | 0 |
| 88 | ) | 87 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) |
| 89 | props.get(vars.$static-themes, $theme, --key-focus, --outline); | 88 | props.get(vars.$static-themes, $theme, --key-focus, --outline); |
| 90 | } | 89 | } |
| 91 | } | 90 | } |