From 6376f1a5225b2fa45f6c861d4a265bf13b56d038 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 10:01:02 +0200 Subject: Update --- src/.old/layouts/_message-group.scss | 139 ++++++++++++++++++++ src/.old/objects/_lightbox.scss | 206 ----------------------------- src/.old/objects/_list-group.scss | 61 +++++++++ src/_config.scss | 16 +-- src/_layouts.scss | 2 +- src/_objects.scss | 4 +- src/_themes.scss | 8 ++ src/layouts/_card-list.scss | 40 ++++-- src/layouts/_container.scss | 25 ++-- src/layouts/_message-group.scss | 139 -------------------- src/objects/_avatar.scss | 4 +- src/objects/_card.scss | 15 +-- src/objects/_lightbox.scss | 243 +++++++++++++++++++++++++++++++++++ src/objects/_list-group.scss | 61 --------- src/objects/_status-indicator.scss | 4 +- src/scopes/_links.scss | 75 ++++++++--- tpl/index.pug | 14 +- tpl/objects/card.pug | 12 +- tpl/objects/lightbox.pug | 27 +++- tpl/views/card.pug | 31 +++-- tpl/views/lightbox.pug | 20 ++- 21 files changed, 649 insertions(+), 497 deletions(-) create mode 100644 src/.old/layouts/_message-group.scss delete mode 100644 src/.old/objects/_lightbox.scss create mode 100644 src/.old/objects/_list-group.scss delete mode 100644 src/layouts/_message-group.scss create mode 100644 src/objects/_lightbox.scss delete mode 100644 src/objects/_list-group.scss diff --git a/src/.old/layouts/_message-group.scss b/src/.old/layouts/_message-group.scss new file mode 100644 index 0000000..235e242 --- /dev/null +++ b/src/.old/layouts/_message-group.scss @@ -0,0 +1,139 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +// @use '../objects/message'; + +@include iro.props-namespace('message-group') { + @include iro.props-store(( + --dims: ( + --spacing-x: fn.global-dim(--size --225), + --spacing-y: fn.global-dim(--size --150), + --arrow-size: fn.global-dim(--size --100), + + --compact: ( + --spacing-x: fn.global-dim(--size --225), + --spacing-y: fn.global-dim(--size --50), + ) + ) + )); + + @include iro.bem-layout(iro.props-namespace()) { + display: grid; + grid-template-columns: auto 1fr; + grid-auto-rows: auto; + grid-template-areas: 'avatar message' 'avatar .'; + align-items: flex-start; + gap: 0 fn.dim(--spacing-x); + + @include iro.bem-elem('avatar') { + grid-area: avatar; + block-size: 0; + } + + @include iro.bem-elem('message') { + grid-column: message; + position: relative; + box-sizing: border-box; + min-inline-size: 0; + max-inline-size: 100%; + + &::before { + content: ''; + display: none; + position: absolute; + top: 0; + left: calc(-1 * fn.dim(--arrow-size)); + border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2); + border-bottom-color: transparent; + border-left-color: transparent; + } + + @include iro.bem-next-twin-elem { + margin-top: fn.dim(--spacing-y); + } + } + + @include iro.bem-modifier('right') { + @include iro.bem-elem('message') { + &::before { + right: calc(-1 * fn.dim(--arrow-size)); + left: auto; + border-right-color: transparent; + border-left-color: fn.global-color(--bg-l2); + } + } + } + + @include iro.bem-modifier('compact') { + gap: 0 fn.dim(--compact --spacing-x); + + @include iro.bem-modifier('left') { + justify-items: start; + } + + @include iro.bem-modifier('right') { + justify-items: end; + } + + @include iro.bem-elem('message') { + @include iro.bem-next-twin-elem { + margin-top: fn.dim(--compact --spacing-y); + } + } + } + + @include iro.bem-modifier('right') { + grid-template-columns: 1fr auto; + grid-template-areas: 'message avatar' '. avatar'; + } + + @include iro.bem-modifier('no-avatar') { + grid-template-columns: 1fr; + grid-template-areas: 'message'; + + @include iro.bem-elem('avatar') { + display: none; + } + } + + @include iro.bem-modifier('arrow') { + @include iro.bem-elem('message') { + &::before { + display: block; + } + + @include iro.bem-next-twin-elem { + &::before { + display: none; + } + } + } + } + + & + & { + @include iro.bem-modifier('merge') { + margin-top: fn.dim(--spacing-y); + + @include iro.bem-elem('avatar') { + visibility: hidden; + } + + @include iro.bem-modifier('compact') { + margin-top: fn.dim(--compact --spacing-y); + } + + @include iro.bem-elem('merge-hide') { + display: none; + } + + @include iro.bem-modifier('arrow') { + @include iro.bem-elem('message') { + &::before { + display: none; + } + } + } + } + } + } +} diff --git a/src/.old/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss deleted file mode 100644 index 31d3398..0000000 --- a/src/.old/objects/_lightbox.scss +++ /dev/null @@ -1,206 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@use 'action-button'; - -@include iro.props-namespace('lightbox') { - @include iro.props-store(( - --dims: ( - --pad: fn.global-dim(--size --150), - --thumbnail: ( - --size: fn.global-dim(--size --700), - --spacing: fn.global-dim(--size --100), - --idle: 1px, - --selected: 2px, - ), - --close-button: ( - --font-size: fn.global-dim(--font-size --200), - ), - --nav-button: ( - --width: fn.global-dim(--size --3800), - --height: fn.global-dim(--size --3800), - --font-size: fn.global-dim(--font-size --200), - ), - ), - ), 'dims'); - - @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.props-store(( - --colors: ( - --thumbnail: ( - --idle: fn.global-color(--fg-hi2), - --selected: fn.global-color(--fg-lo), - ), - ), - ), 'colors'); - - @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; - height: 100%; - overflow: hidden; - - @include iro.bem-elem('header') { - grid-area: header; - display: flex; - align-items: flex-start; - padding: fn.dim(--pad) fn.dim(--pad) 0; - } - - @include iro.bem-elem('img') { - display: none; - box-sizing: border-box; - grid-area: content; - width: 100%; - height: 100%; - padding: fn.dim(--pad); - object-fit: scale-down; - - @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(--thumbnail --selected) fn.dim(--pad) fn.dim(--pad); - overflow: auto; - } - - @include iro.bem-elem('footer') { - grid-area: footer; - display: flex; - align-items: flex-start; - padding: 0 fn.dim(--pad) fn.dim(--pad); - } - - @include iro.bem-elem('thumbnail') { - position: relative; - flex: 0 0 auto; - width: fn.dim(--thumbnail --size); - height: fn.dim(--thumbnail --size); - opacity: .75; - box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset; - - &:hover { - opacity: 1; - } - - @include iro.bem-is('selected') { - opacity: 1; - box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected); - } - } - - @include iro.bem-elem('thumbnail-img') { - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center center; - } - - @include iro.bem-elem('thumbnail-icon') { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - @include iro.bem-elem('close-btn') { - flex: 0 0 auto; - margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto; - 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); - - &::after { - content: ''; - display: block; - position: absolute; - top: 50%; - left: 50%; - width: fn.dim(--nav-button --width); - height: fn.dim(--nav-button --height); - transform: translate(-50%, -50%); - } - - @include iro.bem-modifier('prev') { - grid-area: prev; - margin-right: calc(-1 * fn.dim(--pad)); - margin-left: calc(.5 * fn.dim(--pad)); - } - - @include iro.bem-modifier('next') { - grid-area: next; - margin-right: calc(.5 * fn.dim(--pad)); - margin-left: calc(-1 * fn.dim(--pad)); - } - } - } -} diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss new file mode 100644 index 0000000..a346828 --- /dev/null +++ b/src/.old/objects/_list-group.scss @@ -0,0 +1,61 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('list-group') { + @include iro.props-store(( + --dims: ( + --pad-i: fn.global-dim(--size --175), + --pad-b: fn.global-dim(--size --125), + --rounding: fn.global-dim(--rounding), + --border: fn.global-dim(--border --thin), + ), + --colors: ( + --bg: fn.global-color(--base --75), + --border: fn.global-color(--border), + --hover: fn.global-color(--border-mute), + --active: fn.global-color(--border), + ) + )); + + @include iro.bem-object(iro.props-namespace()) { + border: fn.dim(--border) solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + + @include iro.bem-elem('item') { + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + + @include iro.bem-next-twin-elem { + border-width: 0; + border-block-start-width: fn.dim(--border); + border-style: solid; + border-color: fn.color(--border); + } + + @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:focus-visible { + background-color: fn.color(--hover); + } + + &:active { + background-color: fn.color(--active); + } + } + } + + @include iro.bem-modifier('horizontal') { + display: flex; + + @include iro.bem-elem('item') { + flex: 1 0 auto; + + @include iro.bem-next-twin-elem { + border-block-start-width: 0; + border-inline-start-width: fn.dim(--border); + } + } + } + } +} diff --git a/src/_config.scss b/src/_config.scss index ffba8c9..73e0725 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -109,15 +109,15 @@ $theme-light: ( --75: -4, --100: 0, - --200: easing.cubic-bezier(.2, .1, .7, .95, math.div(1, 8)) * 106, - --300: easing.cubic-bezier(.2, .1, .7, .95, math.div(2, 8)) * 106, - --400: easing.cubic-bezier(.2, .1, .7, .95, math.div(3, 8)) * 106, + --200: easing.cubic-bezier(.2, .1, .8, 1, math.div(1, 8)) * 106, + --300: easing.cubic-bezier(.2, .1, .8, 1, math.div(2, 8)) * 106, + --400: easing.cubic-bezier(.2, .1, .8, 1, math.div(3, 8)) * 106, - --500: easing.cubic-bezier(.2, .1, .7, .95, math.div(4, 8)) * 106, - --600: easing.cubic-bezier(.2, .1, .7, .95, math.div(5, 8)) * 106, - --700: easing.cubic-bezier(.2, .1, .7, .95, math.div(6, 8)) * 106, - --800: easing.cubic-bezier(.2, .1, .7, .95, math.div(7, 8)) * 106, - --900: easing.cubic-bezier(.2, .1, .7, .95, math.div(8, 8)) * 106, + --500: easing.cubic-bezier(.2, .1, .8, 1, math.div(4, 8)) * 106, + --600: easing.cubic-bezier(.2, .1, .8, 1, math.div(5, 8)) * 106, + --700: easing.cubic-bezier(.2, .1, .8, 1, math.div(6, 8)) * 106, + --800: easing.cubic-bezier(.2, .1, .8, 1, math.div(7, 8)) * 106, + --900: easing.cubic-bezier(.2, .1, .8, 1, math.div(8, 8)) * 106, ), --colors: ( diff --git a/src/_layouts.scss b/src/_layouts.scss index 779fd64..572308d 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -5,4 +5,4 @@ @use 'layouts/flex'; @use 'layouts/overflow'; @use 'layouts/card-list'; -@use 'layouts/message-group'; +//@use 'layouts/message-group'; diff --git a/src/_objects.scss b/src/_objects.scss index fc6e556..c5049cd 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -21,8 +21,8 @@ // @use 'objects/icon-nav'; @use 'objects/backdrop'; // @use 'objects/dialog'; -// @use 'objects/lightbox'; -@use 'objects/list-group'; +@use 'objects/lightbox'; +// @use 'objects/list-group'; @use 'objects/table'; @use 'objects/alert'; @use 'objects/palette'; diff --git a/src/_themes.scss b/src/_themes.scss index 72562c0..6fcf83b 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -1,6 +1,8 @@ @use 'iro-sass/src/index' as iro; @use 'functions' as fn; +$static-themes: 'black' 'white' !default; + @include iro.bem-theme('base') { background-color: fn.global-color(--bg-base); } @@ -12,3 +14,9 @@ @include iro.bem-theme('l2') { background-color: fn.global-color(--bg-l2); } + +@each $theme in $static-themes { + @include iro.bem-theme($theme) { + color: fn.global-color(--#{$theme}-transparent --800), + } +} diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index c27b297..362325a 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -37,7 +37,11 @@ @include iro.bem-modifier('grid') { display: grid; grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); - gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap); + gap: fn.dim(--grid --col-gap); + + @include iro.bem-modifier('quiet') { + row-gap: fn.dim(--grid --row-gap); + } } @include iro.bem-modifier('masonry') { @@ -46,31 +50,45 @@ column-gap: fn.dim(--masonry --col-gap); @include iro.bem-elem('card') { - margin-bottom: fn.dim(--masonry --row-gap); + margin-bottom: fn.dim(--masonry --col-gap); + break-inside: avoid; + } + + @include iro.bem-modifier('quiet') { + @include iro.bem-elem('card') { + margin-bottom: fn.dim(--masonry --row-gap); + } } } @include iro.bem-modifier('masonry-h') { flex-flow: row wrap; - gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap); + gap: fn.dim(--masonry-h --col-gap); + + &::after { + content: ''; + display: block; + flex: 1 0 auto; + inline-size: fn.dim(--masonry-h --row-height); + block-size: 0; + } @include iro.bem-elem('card') { - flex: 1 0 auto; - max-width: 100%; + flex: 1 0 auto; + max-inline-size: 100%; } - @include iro.bem-elem('card-content') { - height: fn.dim(--masonry-h --row-height); + @include iro.bem-elem('card-image') { + block-size: fn.dim(--masonry-h --row-height); } - @include iro.bem-elem('dummy') { - flex: 1 0 auto; - width: fn.dim(--masonry-h --row-height); + @include iro.bem-modifier('quiet') { + row-gap: fn.dim(--masonry-h --row-gap); } } @include iro.bem-modifier('aspect-5\\/4') { - @include iro.bem-elem('card') { + @include iro.bem-elem('card-image') { aspect-ratio: 5 / 4; } } diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index fcc4837..06607a1 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -7,22 +7,22 @@ --narrow-125: iro.fn-px-to-rem(720px), --narrow: iro.fn-px-to-rem(610px), --narrow-75: iro.fn-px-to-rem(500px), - --pad-x: fn.global-dim(--size --400), - --pad-y: fn.global-dim(--size --800), + --pad-i: fn.global-dim(--size --400), + --pad-b: fn.global-dim(--size --800), ) )); @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --200), - --pad-y: fn.global-dim(--size --600), + --pad-i: fn.global-dim(--size --200), + --pad-b: fn.global-dim(--size --600), ) ), 'sm'); @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --450), + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --450), ) ), 'xs'); @@ -30,19 +30,16 @@ @each $size in 'narrow-125' 'narrow' 'narrow-75' { @include iro.bem-modifier($size) { max-inline-size: fn.dim(--#{$size}); - margin-right: auto; - margin-left: auto; + margin-inline: auto; } } - @include iro.bem-modifier('pad-x') { - padding-right: fn.dim(--pad-x); - padding-left: fn.dim(--pad-x); + @include iro.bem-modifier('pad-i') { + margin-inline: fn.dim(--pad-i); } - @include iro.bem-modifier('pad-y') { - padding-top: fn.dim(--pad-y); - padding-bottom: fn.dim(--pad-y); + @include iro.bem-modifier('pad-b') { + padding-block: fn.dim(--pad-b); } } } diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss deleted file mode 100644 index 235e242..0000000 --- a/src/layouts/_message-group.scss +++ /dev/null @@ -1,139 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -// @use '../objects/message'; - -@include iro.props-namespace('message-group') { - @include iro.props-store(( - --dims: ( - --spacing-x: fn.global-dim(--size --225), - --spacing-y: fn.global-dim(--size --150), - --arrow-size: fn.global-dim(--size --100), - - --compact: ( - --spacing-x: fn.global-dim(--size --225), - --spacing-y: fn.global-dim(--size --50), - ) - ) - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: grid; - grid-template-columns: auto 1fr; - grid-auto-rows: auto; - grid-template-areas: 'avatar message' 'avatar .'; - align-items: flex-start; - gap: 0 fn.dim(--spacing-x); - - @include iro.bem-elem('avatar') { - grid-area: avatar; - block-size: 0; - } - - @include iro.bem-elem('message') { - grid-column: message; - position: relative; - box-sizing: border-box; - min-inline-size: 0; - max-inline-size: 100%; - - &::before { - content: ''; - display: none; - position: absolute; - top: 0; - left: calc(-1 * fn.dim(--arrow-size)); - border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2); - border-bottom-color: transparent; - border-left-color: transparent; - } - - @include iro.bem-next-twin-elem { - margin-top: fn.dim(--spacing-y); - } - } - - @include iro.bem-modifier('right') { - @include iro.bem-elem('message') { - &::before { - right: calc(-1 * fn.dim(--arrow-size)); - left: auto; - border-right-color: transparent; - border-left-color: fn.global-color(--bg-l2); - } - } - } - - @include iro.bem-modifier('compact') { - gap: 0 fn.dim(--compact --spacing-x); - - @include iro.bem-modifier('left') { - justify-items: start; - } - - @include iro.bem-modifier('right') { - justify-items: end; - } - - @include iro.bem-elem('message') { - @include iro.bem-next-twin-elem { - margin-top: fn.dim(--compact --spacing-y); - } - } - } - - @include iro.bem-modifier('right') { - grid-template-columns: 1fr auto; - grid-template-areas: 'message avatar' '. avatar'; - } - - @include iro.bem-modifier('no-avatar') { - grid-template-columns: 1fr; - grid-template-areas: 'message'; - - @include iro.bem-elem('avatar') { - display: none; - } - } - - @include iro.bem-modifier('arrow') { - @include iro.bem-elem('message') { - &::before { - display: block; - } - - @include iro.bem-next-twin-elem { - &::before { - display: none; - } - } - } - } - - & + & { - @include iro.bem-modifier('merge') { - margin-top: fn.dim(--spacing-y); - - @include iro.bem-elem('avatar') { - visibility: hidden; - } - - @include iro.bem-modifier('compact') { - margin-top: fn.dim(--compact --spacing-y); - } - - @include iro.bem-elem('merge-hide') { - display: none; - } - - @include iro.bem-modifier('arrow') { - @include iro.bem-elem('message') { - &::before { - display: none; - } - } - } - } - } - } -} diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 5a34d19..19bff10 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -6,8 +6,8 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @mixin status($size: ()) { @include iro.bem-elem('status') { - width: fn.dim(list.join($size, --indicator-size)); - height: fn.dim(list.join($size, --indicator-size)); + inline-size: fn.dim(list.join($size, --indicator-size)); + block-size: fn.dim(list.join($size, --indicator-size)); @include iro.bem-next-elem('content') { mask-image: radial-gradient( diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 9f84d7a..c6c47d7 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -68,7 +68,7 @@ @include iro.bem-elem('image') { position: relative; - width: 100%; + inline-size: 100%; overflow: hidden; background-color: fn.color(--image-bg); @@ -88,10 +88,10 @@ } @include iro.bem-elem('image-img') { - display: block; - object-fit: cover; - width: 100%; - height: 100%; + display: block; + object-fit: cover; + inline-size: 100%; + block-size: 100%; } @include iro.bem-elem('body') { @@ -117,7 +117,7 @@ &::before { content: ''; display: block; - height: fn.dim(--divider); + block-size: fn.dim(--divider); margin-block: fn.dim(--spacing); background-color: fn.color(--divider); } @@ -132,8 +132,7 @@ &:hover, &:active { @include iro.bem-elem('image') { - outline: fn.dim(--border) solid fn.color(--quiet --hover --border); - outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border)); + outline: fn.dim(--border) solid fn.color(--quiet --hover --border); } } diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss new file mode 100644 index 0000000..7844eae --- /dev/null +++ b/src/objects/_lightbox.scss @@ -0,0 +1,243 @@ +@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), + --spacing: fn.global-dim(--size --100), + --idle: fn.global-dim(--border --thin), + --selected: fn.global-dim(--border --medium), + ), + --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: ( + --idle: fn.global-color(--border-strong), + --selected: fn.global-color(--heading), + ), + ), + )); + + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --text: fn.global-color(--white-transparent --800), + --thumbnail: ( + --idle: fn.global-color(--white-transparent --400), + --selected: fn.global-color(--white-transparent --900), + ), + ) + ) + )); + } + + @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; + block-size: 100%; + min-block-size: 0; + + @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; + inline-size: 100%; + block-size: 100%; + padding: fn.dim(--pad); + object-fit: scale-down; + + @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-block: fn.dim(--thumbnail --selected) fn.dim(--pad); + padding-inline: 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); + outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); + opacity: .75; + + &:hover, + &:focus-visible { + opacity: 1; + } + + @include iro.bem-is('selected') { + outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected); + opacity: 1; + } + } + + @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 --idle); + + @include iro.bem-is('selected') { + outline-color: fn.color(--static-#{$theme} --thumbnail --selected); + } + } + } + } + } +} diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss deleted file mode 100644 index a346828..0000000 --- a/src/objects/_list-group.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('list-group') { - @include iro.props-store(( - --dims: ( - --pad-i: fn.global-dim(--size --175), - --pad-b: fn.global-dim(--size --125), - --rounding: fn.global-dim(--rounding), - --border: fn.global-dim(--border --thin), - ), - --colors: ( - --bg: fn.global-color(--base --75), - --border: fn.global-color(--border), - --hover: fn.global-color(--border-mute), - --active: fn.global-color(--border), - ) - )); - - @include iro.bem-object(iro.props-namespace()) { - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); - background-color: fn.color(--bg); - - @include iro.bem-elem('item') { - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - - @include iro.bem-next-twin-elem { - border-width: 0; - border-block-start-width: fn.dim(--border); - border-style: solid; - border-color: fn.color(--border); - } - - @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { - &:hover, - &:focus-visible { - background-color: fn.color(--hover); - } - - &:active { - background-color: fn.color(--active); - } - } - } - - @include iro.bem-modifier('horizontal') { - display: flex; - - @include iro.bem-elem('item') { - flex: 1 0 auto; - - @include iro.bem-next-twin-elem { - border-block-start-width: 0; - border-inline-start-width: fn.dim(--border); - } - } - } - } -} diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index cadd395..416e65e 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -24,8 +24,8 @@ $themes: 'accent' 'positive' 'negative' 'warning' !default; @include iro.bem-object(iro.props-namespace()) { display: inline-block; - width: fn.dim(--size); - height: fn.dim(--size); + inline-size: fn.dim(--size); + block-size: fn.dim(--size); border-radius: 10em; background-color: fn.color(--default); vertical-align: middle; diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 552b02a..790d5c6 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -1,6 +1,8 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +$static-themes: 'black' 'white' !default; + @include iro.props-namespace('links') { @include iro.props-store(( --dims: ( @@ -18,23 +20,23 @@ ), ), --colors: ( - --underline: fn.global-color(--text-mute-more), + --underline: fn.global-color(--text-mute-more), - --idle: ( + --colored: ( --text: fn.global-color(--accent --1100), --underline: fn.global-color(--accent --600), --hover: ( --text: fn.global-color(--accent --1300), ), - ), - - --visited: ( - --text: fn.global-color(--purple --1100), - --underline: fn.global-color(--purple --600), - - --hover: ( - --text: fn.global-color(--purple --1300), + + --visited: ( + --text: fn.global-color(--purple --1100), + --underline: fn.global-color(--purple --600), + + --hover: ( + --text: fn.global-color(--purple --1300), + ), ), ), @@ -46,6 +48,27 @@ ), )); + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --text: fn.global-color(--#{$theme}-transparent --800), + --underline: fn.global-color(--#{$theme}-transparent --500), + + --hover: ( + --text: fn.global-color(--#{$theme}-transparent --900), + ), + + --key-focus: ( + --text: fn.global-color(--#{$theme}-transparent --900), + --border: fn.global-color(--#{$theme}-transparent --900), + --outline: fn.global-color(--#{$theme}-transparent --300), + ), + ) + ) + )); + } + @include iro.bem-scope(iro.props-namespace()) { :link, :visited { @@ -81,20 +104,40 @@ @include iro.bem-modifier('colored') { :link { - color: fn.color(--idle --text); - text-decoration-color: fn.color(--idle --underline); + color: fn.color(--colored --text); + text-decoration-color: fn.color(--colored --underline); &:hover { - color: fn.color(--idle --hover --text); + color: fn.color(--colored --hover --text); } } :visited { - color: fn.color(--visited --text); - text-decoration-color: fn.color(--visited --underline); + color: fn.color(--colored --visited --text); + text-decoration-color: fn.color(--colored --visited --underline); &:hover { - color: fn.color(--visited --hover --text); + color: fn.color(--colored --visited --hover --text); + } + } + } + + @each $theme in $static-themes { + @include iro.bem-modifier(static-#{$theme}) { + :link, + :visited { + color: fn.color(--static-#{$theme} --text); + text-decoration-color: fn.color(--static-#{$theme} --underline); + + &:hover { + color: fn.color(--static-#{$theme} --hover --text); + } + + &:focus-visible { + outline-color: fn.color(--static-#{$theme} --key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline); + color: fn.color(--static-#{$theme} --key-focus --text); + } } } } diff --git a/tpl/index.pug b/tpl/index.pug index a6e99dd..c4baa64 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -40,7 +40,7 @@ mixin view(id, title) - views.push({ id, title }); - +container(narrow=true class='u-p-700 c-view' id=id) + +container(narrow=!attributes.wide class='u-p-700 c-view' id=id) +h1-heading('xl')(class='u-mt-0')= title +divider('medium') block @@ -117,22 +117,22 @@ html +view-switch +view-form +view-action-button - +view-overflow-button + //+view-overflow-button +view-status-indicator +view-avatar +view-card +view-side-nav +view-popover +view-menu - +view-icon-nav + //+view-icon-nav +view-backdrop - +view-dialog + //+view-dialog +view-lightbox - +view-list-group + //+view-list-group +view-table +view-alert - +view-message - +view-message-group + //+view-message + //+view-message-group .c-sidebar.l-overflow.u-bie-1.u-p-100 +side-nav diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index d7595d1..d622d3b 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug @@ -17,7 +17,16 @@ mixin card block mixin card-image - .o-card__image + - + let classes = { + 'o-card__image': true, + } + + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes) img.o-card__image-img(src=attributes.src style=attributes.style) mixin card-body @@ -34,6 +43,7 @@ mixin card-avatar mixin card-content .o-card__content block + mixin card-footer footer.o-card__footer block diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 58abdae..02a3200 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -1,20 +1,33 @@ include icon.pug mixin lightbox(images) - .o-lightbox + - + let classes = { + 'o-lightbox': true, + } + let linksClasses = { + 's-links': true, + } + + if (attributes.theme) { + classes[`o-lightbox--${attributes.theme}`] = true; + linksClasses[`s-links--${attributes.theme}`] = true; + } + + div(class=classes) header.o-lightbox__header - .s-links.s-links--colored + div(class=linksClasses) block - +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') + +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') each img, i in images img.o-lightbox__img(src=images[i] id='image-' + i) - +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') img.o-lightbox__img.o-lightbox__img--default(src=images[0]) if images.length > 1 - +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') .o-lightbox__thumbnails each img, i in images - classes = i === 0 ? 'is-selected' : '' diff --git a/tpl/views/card.pug b/tpl/views/card.pug index e466cdc..4871d30 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -1,5 +1,5 @@ mixin view-card - +view('card', 'Card') + +view('card', 'Card')(wide=true) .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) +card(href='#') +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) @@ -44,11 +44,26 @@ mixin view-card p= loremIpsum p= loremIpsum - +divider('faint') + each layout in ['grid', 'masonry', 'masonry-h'] + - + let quiet = true - .l-card-list.l-card-list--masonry - each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] - +card(href='#' class='l-card-list__card') - +card-image(src=img) - +card-body - +card-title= 'XS Heading' + let classes = { + 'l-card-list': true, + 'l-card-list--aspect-5/4': layout === 'grid', + 'l-card-list--quiet': quiet, + } + classes[`l-card-list--${layout}`] = true; + + + +divider('faint')(class='u-mb-700') + + div(class=classes) + each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] + +card(quiet=quiet href='#' class='l-card-list__card') + +card-image(src=img class='l-card-list__card-image') + +card-body + .l-media + .l-media__block.l-media__block--main + h1.u-mbs-0= 'XS Heading' + small.u-c-mute-more= `Episode ${i + 1}` diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 8169a35..4eb234a 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -1,8 +1,20 @@ mixin view-lightbox +view('lightbox', 'Lightbox') .c-box - +backdrop(class='t-media') - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + = "Let's try multiple links! " + a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") + = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" + = ' ' + a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") + = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" + = ' ' + a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") + = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" + + .c-box + +backdrop + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -14,8 +26,8 @@ mixin view-lightbox = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" .c-box - +backdrop(class='t-media') - +lightbox(['avatar.png']) + +backdrop + +lightbox(['avatar.png'])(theme='static-white') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" -- cgit v1.2.3-70-g09d2