diff options
| author | Volpeon <git@volpeon.ink> | 2024-10-22 08:23:33 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-10-22 08:23:33 +0200 |
| commit | 5855a6821cf5585378a70f9bee13563bdbfe2d86 (patch) | |
| tree | 0ee25906c9e73912137a56b7d6214c89bf43e8a6 /src/objects/_lightbox.scss | |
| parent | Update (diff) | |
| download | iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.gz iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.bz2 iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.zip | |
Less broad imports
Diffstat (limited to 'src/objects/_lightbox.scss')
| -rw-r--r-- | src/objects/_lightbox.scss | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 0ced4c6..341ed3d 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
| @@ -1,7 +1,7 @@ | |||
| 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 'iro-sass/src/iro-sass' as iro; | 4 | @use 'iro-sass/src/bem' as bem; |
| 5 | @use 'iro-sass/src/props'; | 5 | @use 'iro-sass/src/props'; |
| 6 | @use '../props' as *; | 6 | @use '../props' as *; |
| 7 | 7 | ||
| @@ -11,7 +11,7 @@ | |||
| 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 iro.bem-object('lightbox') { | 14 | @include bem.object('lightbox') { |
| 15 | box-sizing: border-box; | 15 | box-sizing: border-box; |
| 16 | display: grid; | 16 | display: grid; |
| 17 | flex: 1 1 auto; | 17 | flex: 1 1 auto; |
| @@ -24,7 +24,7 @@ | |||
| 24 | grid-template-columns: auto minmax(0, 1fr) auto; | 24 | grid-template-columns: auto minmax(0, 1fr) auto; |
| 25 | min-block-size: 0; | 25 | min-block-size: 0; |
| 26 | 26 | ||
| 27 | @include iro.bem-elem('header') { | 27 | @include bem.elem('header') { |
| 28 | display: flex; | 28 | display: flex; |
| 29 | grid-area: header; | 29 | grid-area: header; |
| 30 | align-items: flex-start; | 30 | align-items: flex-start; |
| @@ -32,7 +32,7 @@ | |||
| 32 | padding-inline: props.get(vars.$pad); | 32 | padding-inline: props.get(vars.$pad); |
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | @include iro.bem-elem('img') { | 35 | @include bem.elem('img') { |
| 36 | box-sizing: border-box; | 36 | box-sizing: border-box; |
| 37 | display: none; | 37 | display: none; |
| 38 | grid-area: content; | 38 | grid-area: content; |
| @@ -41,39 +41,39 @@ | |||
| 41 | max-block-size: 100%; | 41 | max-block-size: 100%; |
| 42 | padding: props.get(vars.$pad); | 42 | padding: props.get(vars.$pad); |
| 43 | 43 | ||
| 44 | @include iro.bem-sibling-elem('img') { | 44 | @include bem.sibling-elem('img') { |
| 45 | @include iro.bem-modifier('default') { | 45 | @include bem.modifier('default') { |
| 46 | display: block; | 46 | display: block; |
| 47 | 47 | ||
| 48 | @include iro.bem-next-elem('nav-btn') { | 48 | @include bem.next-elem('nav-btn') { |
| 49 | display: block; | 49 | display: block; |
| 50 | 50 | ||
| 51 | @include iro.bem-next-elem('nav-btn') { | 51 | @include bem.next-elem('nav-btn') { |
| 52 | display: block; | 52 | display: block; |
| 53 | } | 53 | } |
| 54 | } | 54 | } |
| 55 | } | 55 | } |
| 56 | } | 56 | } |
| 57 | 57 | ||
| 58 | @include iro.bem-multi('&:target', 'is' 'visible') { | 58 | @include bem.multi('&:target', 'is' 'visible') { |
| 59 | display: block; | 59 | display: block; |
| 60 | 60 | ||
| 61 | @include iro.bem-next-elem('nav-btn') { | 61 | @include bem.next-elem('nav-btn') { |
| 62 | display: block; | 62 | display: block; |
| 63 | 63 | ||
| 64 | @include iro.bem-next-elem('nav-btn') { | 64 | @include bem.next-elem('nav-btn') { |
| 65 | display: block; | 65 | display: block; |
| 66 | } | 66 | } |
| 67 | } | 67 | } |
| 68 | 68 | ||
| 69 | @include iro.bem-sibling-elem('img') { | 69 | @include bem.sibling-elem('img') { |
| 70 | @include iro.bem-modifier('default') { | 70 | @include bem.modifier('default') { |
| 71 | display: none; | 71 | display: none; |
| 72 | 72 | ||
| 73 | @include iro.bem-next-elem('nav-btn') { | 73 | @include bem.next-elem('nav-btn') { |
| 74 | display: none; | 74 | display: none; |
| 75 | 75 | ||
| 76 | @include iro.bem-next-elem('nav-btn') { | 76 | @include bem.next-elem('nav-btn') { |
| 77 | display: none; | 77 | display: none; |
| 78 | } | 78 | } |
| 79 | } | 79 | } |
| @@ -82,7 +82,7 @@ | |||
| 82 | } | 82 | } |
| 83 | } | 83 | } |
| 84 | 84 | ||
| 85 | @include iro.bem-elem('thumbnails') { | 85 | @include bem.elem('thumbnails') { |
| 86 | display: flex; | 86 | display: flex; |
| 87 | grid-area: thumbnails; | 87 | grid-area: thumbnails; |
| 88 | gap: props.get(vars.$thumbnail--spacing); | 88 | gap: props.get(vars.$thumbnail--spacing); |
| @@ -91,7 +91,7 @@ | |||
| 91 | overflow: auto; | 91 | overflow: auto; |
| 92 | } | 92 | } |
| 93 | 93 | ||
| 94 | @include iro.bem-elem('footer') { | 94 | @include bem.elem('footer') { |
| 95 | display: flex; | 95 | display: flex; |
| 96 | grid-area: footer; | 96 | grid-area: footer; |
| 97 | align-items: flex-start; | 97 | align-items: flex-start; |
| @@ -99,7 +99,7 @@ | |||
| 99 | padding-inline: props.get(vars.$pad); | 99 | padding-inline: props.get(vars.$pad); |
| 100 | } | 100 | } |
| 101 | 101 | ||
| 102 | @include iro.bem-elem('thumbnail') { | 102 | @include bem.elem('thumbnail') { |
| 103 | position: relative; | 103 | position: relative; |
| 104 | flex: 0 0 auto; | 104 | flex: 0 0 auto; |
| 105 | inline-size: props.get(vars.$thumbnail--size); | 105 | inline-size: props.get(vars.$thumbnail--size); |
| @@ -117,7 +117,7 @@ | |||
| 117 | opacity: 1; | 117 | opacity: 1; |
| 118 | } | 118 | } |
| 119 | 119 | ||
| 120 | @include iro.bem-is('selected') { | 120 | @include bem.is('selected') { |
| 121 | $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); | 121 | $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); |
| 122 | 122 | ||
| 123 | margin: $focus-border-offset; | 123 | margin: $focus-border-offset; |
| @@ -144,7 +144,7 @@ | |||
| 144 | } | 144 | } |
| 145 | } | 145 | } |
| 146 | 146 | ||
| 147 | @include iro.bem-elem('thumbnail-img') { | 147 | @include bem.elem('thumbnail-img') { |
| 148 | position: absolute; | 148 | position: absolute; |
| 149 | inset-block-start: 0; | 149 | inset-block-start: 0; |
| 150 | inset-inline-start: 0; | 150 | inset-inline-start: 0; |
| @@ -155,21 +155,21 @@ | |||
| 155 | object-position: center center; | 155 | object-position: center center; |
| 156 | } | 156 | } |
| 157 | 157 | ||
| 158 | @include iro.bem-elem('thumbnail-icon') { | 158 | @include bem.elem('thumbnail-icon') { |
| 159 | position: absolute; | 159 | position: absolute; |
| 160 | inset-block-start: 50%; | 160 | inset-block-start: 50%; |
| 161 | inset-inline-start: 50%; | 161 | inset-inline-start: 50%; |
| 162 | transform: translate(-50%, -50%); | 162 | transform: translate(-50%, -50%); |
| 163 | } | 163 | } |
| 164 | 164 | ||
| 165 | @include iro.bem-elem('close-btn') { | 165 | @include bem.elem('close-btn') { |
| 166 | flex: 0 0 auto; | 166 | flex: 0 0 auto; |
| 167 | margin-block-start: calc(-.5 * props.get(vars.$pad)); | 167 | margin-block-start: calc(-.5 * props.get(vars.$pad)); |
| 168 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); | 168 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); |
| 169 | font-size: props.get(vars.$close-button--font-size); | 169 | font-size: props.get(vars.$close-button--font-size); |
| 170 | } | 170 | } |
| 171 | 171 | ||
| 172 | @include iro.bem-elem('nav-btn') { | 172 | @include bem.elem('nav-btn') { |
| 173 | position: relative; | 173 | position: relative; |
| 174 | display: none; | 174 | display: none; |
| 175 | align-self: center; | 175 | align-self: center; |
| @@ -186,7 +186,7 @@ | |||
| 186 | transform: translateY(-50%); | 186 | transform: translateY(-50%); |
| 187 | } | 187 | } |
| 188 | 188 | ||
| 189 | @include iro.bem-modifier('prev') { | 189 | @include bem.modifier('prev') { |
| 190 | grid-area: prev; | 190 | grid-area: prev; |
| 191 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); | 191 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); |
| 192 | 192 | ||
| @@ -195,7 +195,7 @@ | |||
| 195 | } | 195 | } |
| 196 | } | 196 | } |
| 197 | 197 | ||
| 198 | @include iro.bem-modifier('next') { | 198 | @include bem.modifier('next') { |
| 199 | grid-area: next; | 199 | grid-area: next; |
| 200 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); | 200 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); |
| 201 | 201 | ||
| @@ -206,10 +206,10 @@ | |||
| 206 | } | 206 | } |
| 207 | 207 | ||
| 208 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 208 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
| 209 | @include iro.bem-modifier(string.slice($theme, 3)) { | 209 | @include bem.modifier(string.slice($theme, 3)) { |
| 210 | color: props.get(vars.$static-themes, $theme, --text); | 210 | color: props.get(vars.$static-themes, $theme, --text); |
| 211 | 211 | ||
| 212 | @include iro.bem-elem('thumbnail') { | 212 | @include bem.elem('thumbnail') { |
| 213 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); | 213 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); |
| 214 | 214 | ||
| 215 | &:hover, | 215 | &:hover, |
| @@ -218,7 +218,7 @@ | |||
| 218 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); | 218 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); |
| 219 | } | 219 | } |
| 220 | 220 | ||
| 221 | @include iro.bem-is('selected') { | 221 | @include bem.is('selected') { |
| 222 | border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); | 222 | border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); |
| 223 | } | 223 | } |
| 224 | 224 | ||
