From 3799950b0a869aee0e2725a8aafbb53c26723942 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 14:46:06 +0200 Subject: Update --- src/objects/_lightbox.scss | 104 +++++++++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 46 deletions(-) (limited to 'src/objects/_lightbox.scss') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 740f4e5..66faab5 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -1,14 +1,16 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -@use 'action-button'; +@forward 'lightbox.vars'; +@use 'lightbox.vars' as vars; -$static-themes: 'black' 'white' !default; +@mixin styles { + @include props.materialize(meta.module-variables('vars')); -@include iro.props-namespace('lightbox') { - - - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('lightbox') { box-sizing: border-box; display: grid; flex: 1 1 auto; @@ -25,8 +27,8 @@ $static-themes: 'black' 'white' !default; display: flex; grid-area: header; align-items: flex-start; - padding-block-start: fn.dim(--pad); - padding-inline: fn.dim(--pad); + padding-block-start: props.get(vars.$pad); + padding-inline: props.get(vars.$pad); } @include iro.bem-elem('img') { @@ -36,7 +38,7 @@ $static-themes: 'black' 'white' !default; place-self: center; max-inline-size: 100%; max-block-size: 100%; - padding: fn.dim(--pad); + padding: props.get(vars.$pad); @include iro.bem-sibling-elem('img') { @include iro.bem-modifier('default') { @@ -82,9 +84,9 @@ $static-themes: 'black' 'white' !default; @include iro.bem-elem('thumbnails') { display: flex; grid-area: thumbnails; - gap: fn.dim(--thumbnail --spacing); - padding: fn.dim(--pad); - margin-block-start: calc(-1 * fn.dim(--pad)); + gap: props.get(vars.$thumbnail--spacing); + padding: props.get(vars.$pad); + margin-block-start: calc(-1 * props.get(vars.$pad)); overflow: auto; } @@ -92,47 +94,52 @@ $static-themes: 'black' 'white' !default; display: flex; grid-area: footer; align-items: flex-start; - padding-block: 0 fn.dim(--pad); - padding-inline: fn.dim(--pad); + padding-block: 0 props.get(vars.$pad); + padding-inline: props.get(vars.$pad); } @include iro.bem-elem('thumbnail') { position: relative; flex: 0 0 auto; - inline-size: fn.dim(--thumbnail --size); - block-size: fn.dim(--thumbnail --size); + inline-size: props.get(vars.$thumbnail--size); + block-size: props.get(vars.$thumbnail--size); overflow: hidden; - border-radius: fn.dim(--thumbnail --rounding); - outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border); - outline-offset: calc(-1 * fn.dim(--thumbnail --border)); + border-radius: props.get(vars.$thumbnail--rounding); + outline: props.get(vars.$thumbnail--border-color) solid props.get(vars.$thumbnail--border-width); + outline-offset: calc(-1 * props.get(vars.$thumbnail--border-width)); opacity: .75; &:hover, &:active, &:focus-visible { - outline-color: fn.color(--thumbnail --hover --border); + outline-color: props.get(vars.$thumbnail--hover--border-color); opacity: 1; } @include iro.bem-is('selected') { - $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); + $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); margin: $focus-border-offset; - border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border); - border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); + border: props.get(vars.$thumbnail--selected--border-width) solid props.get(vars.$thumbnail--selected--border-color); + border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset); outline: none; opacity: 1; } &:focus-visible { - $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset)); + $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--key-focus--border-offset)); margin: $focus-border-offset; - border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent; - border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); - outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border); + border: props.get(vars.$thumbnail--key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset); + outline: props.get(vars.$thumbnail--key-focus--border-color) solid props.get(vars.$thumbnail--key-focus--border-width); outline-offset: 0; - box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width)) + props.get(vars.$thumbnail--key-focus--outline-color); } } @@ -156,9 +163,9 @@ $static-themes: 'black' 'white' !default; @include iro.bem-elem('close-btn') { flex: 0 0 auto; - margin-block-start: calc(-.5 * fn.dim(--pad)); - margin-inline: auto calc(-.5 * fn.dim(--pad)); - font-size: fn.dim(--close-button --font-size); + margin-block-start: calc(-.5 * props.get(vars.$pad)); + margin-inline: auto calc(-.5 * props.get(vars.$pad)); + font-size: props.get(vars.$close-button--font-size); } @include iro.bem-elem('nav-btn') { @@ -166,21 +173,21 @@ $static-themes: 'black' 'white' !default; display: none; align-self: center; overflow: visible; - font-size: fn.dim(--nav-button --font-size); + font-size: props.get(vars.$nav-button--font-size); &::before { position: absolute; inset-block-start: 50%; display: block; - inline-size: fn.dim(--nav-button --width); - block-size: fn.dim(--nav-button --height); + inline-size: props.get(vars.$nav-button--inline-size); + block-size: props.get(vars.$nav-button--block-size); content: ''; transform: translateY(-50%); } @include iro.bem-modifier('prev') { grid-area: prev; - margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); + margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); &::before { inset-inline-start: 0; @@ -189,35 +196,40 @@ $static-themes: 'black' 'white' !default; @include iro.bem-modifier('next') { grid-area: next; - margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); + margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); &::before { inset-inline-end: 0; } } } - - @each $theme in $static-themes { - @include iro.bem-modifier(static-#{$theme}) { - color: fn.color(--static-#{$theme} --text); + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include iro.bem-modifier(string.slice($theme, 3)) { + color: props.get(vars.$static-themes, $theme, --text); @include iro.bem-elem('thumbnail') { - outline-color: fn.color(--static-#{$theme} --thumbnail --border); + outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); &:hover, &:active, &:focus-visible { - outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border); + outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); } @include iro.bem-is('selected') { - border-color: fn.color(--static-#{$theme} --thumbnail --selected --border); + border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); } &:focus-visible { border-color: transparent; - outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline); + outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --border); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width)) + props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --outline); } } } -- cgit v1.3.1