From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src/objects/_lightbox.scss | 313 --------------------------------------------- 1 file changed, 313 deletions(-) delete mode 100644 src/objects/_lightbox.scss (limited to 'src/objects/_lightbox.scss') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss deleted file mode 100644 index 8ad8584..0000000 --- a/src/objects/_lightbox.scss +++ /dev/null @@ -1,313 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@use 'action-button'; - -$static-themes: 'black' 'white' !default; - -@include iro.props-namespace('lightbox') { - @include iro.props-store(( - --dims: ( - --pad: fn.global-dim(--size --150), - - --thumbnail: ( - --size: fn.global-dim(--size --700), - --rounding: fn.global-dim(--rounding), - --spacing: fn.global-dim(--size --100), - --border: fn.global-dim(--border --thin), - - --selected: ( - --border: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - - --close-button: ( - --font-size: fn.global-dim(--font-size --200), - ), - - --nav-button: ( - --width: fn.global-dim(--size --2000), - --height: fn.global-dim(--size --3800), - --font-size: fn.global-dim(--font-size --200), - ), - ), - --colors: ( - --thumbnail: ( - --border: fn.global-color(--border-strong), - - --hover: ( - --border: fn.global-color(--text-mute-more), - ), - - --selected: ( - --border: fn.global-color(--heading), - ), - - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); - - @each $theme in $static-themes { - @include iro.props-store(( - --colors: ( - --static-#{$theme}: ( - --text: fn.global-color(--white-transparent --800), - --thumbnail: ( - --border: fn.global-color(--white-transparent --400), - - --hover: ( - --border: fn.global-color(--white-transparent --500), - ), - - --selected: ( - --border: fn.global-color(--white-transparent --900), - ), - - --key-focus: ( - --border: fn.global-color(--#{$theme}-transparent --900), - --outline: fn.global-color(--#{$theme}-transparent --300), - ), - ), - ) - ) - )); - } - - @include iro.props-store(( - --dims: ( - --thumbnail: ( - --size: fn.global-dim(--size --600), - ), - --nav-button: ( - --width: fn.global-dim(--size --2500), - --height: fn.global-dim(--size --2500), - ), - ), - ), 'md'); - - @include iro.bem-object(iro.props-namespace()) { - display: grid; - grid-template-rows: auto minmax(0, 1fr) auto auto; - grid-template-columns: auto minmax(0, 1fr) auto; - grid-template-areas: - 'header header header' - 'prev content next' - 'thumbnails thumbnails thumbnails' - 'footer footer footer'; - box-sizing: border-box; - min-block-size: 0; - flex: 1 1 auto; - - @include iro.bem-elem('header') { - grid-area: header; - display: flex; - align-items: flex-start; - padding-block-start: fn.dim(--pad); - padding-inline: fn.dim(--pad); - } - - @include iro.bem-elem('img') { - display: none; - box-sizing: border-box; - grid-area: content; - max-inline-size: 100%; - max-block-size: 100%; - place-self: center; - padding: fn.dim(--pad); - - @include iro.bem-sibling-elem('img') { - @include iro.bem-modifier('default') { - display: block; - - @include iro.bem-next-elem('nav-btn') { - display: block; - - @include iro.bem-next-elem('nav-btn') { - display: block; - } - } - } - } - - @include iro.bem-multi('&:target', 'is' 'visible') { - display: block; - - @include iro.bem-next-elem('nav-btn') { - display: block; - - @include iro.bem-next-elem('nav-btn') { - display: block; - } - } - - @include iro.bem-sibling-elem('img') { - @include iro.bem-modifier('default') { - display: none; - - @include iro.bem-next-elem('nav-btn') { - display: none; - - @include iro.bem-next-elem('nav-btn') { - display: none; - } - } - } - } - } - } - - @include iro.bem-elem('thumbnails') { - grid-area: thumbnails; - display: flex; - gap: fn.dim(--thumbnail --spacing); - padding: fn.dim(--pad); - margin-block-start: calc(-1 * fn.dim(--pad)); - overflow: auto; - } - - @include iro.bem-elem('footer') { - grid-area: footer; - display: flex; - align-items: flex-start; - padding-block: 0 fn.dim(--pad); - padding-inline: fn.dim(--pad); - } - - @include iro.bem-elem('thumbnail') { - position: relative; - flex: 0 0 auto; - inline-size: fn.dim(--thumbnail --size); - block-size: fn.dim(--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)); - opacity: .75; - - &:hover, - &:active, - &:focus-visible { - outline-color: fn.color(--thumbnail --hover --border); - opacity: 1; - } - - @include iro.bem-is('selected') { - $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); - - 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); - outline: none; - opacity: 1; - } - - &:focus-visible { - $focus-border-offset: calc(-1 * fn.dim(--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); - 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); - } - } - - @include iro.bem-elem('thumbnail-img') { - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; - object-fit: cover; - object-position: center center; - } - - @include iro.bem-elem('thumbnail-icon') { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - } - - @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); - } - - @include iro.bem-elem('nav-btn') { - display: none; - position: relative; - align-self: center; - overflow: visible; - font-size: fn.dim(--nav-button --font-size); - - &::before { - content: ''; - display: block; - position: absolute; - inset-block-start: 50%; - inline-size: fn.dim(--nav-button --width); - block-size: fn.dim(--nav-button --height); - transform: translateY(-50%); - } - - @include iro.bem-modifier('prev') { - grid-area: prev; - margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); - - &::before { - inset-inline-start: 0; - } - } - - @include iro.bem-modifier('next') { - grid-area: next; - margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); - - &::before { - inset-inline-end: 0; - } - } - } - - @each $theme in $static-themes { - @include iro.bem-modifier(static-#{$theme}) { - color: fn.color(--static-#{$theme} --text); - - @include iro.bem-elem('thumbnail') { - outline-color: fn.color(--static-#{$theme} --thumbnail --border); - - &:hover, - &:active, - &:focus-visible { - outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border); - } - - @include iro.bem-is('selected') { - border-color: fn.color(--static-#{$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); - } - } - } - } - } -} -- cgit v1.3.1