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 +++++++++++ 3 files changed, 200 insertions(+), 206 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 (limited to 'src/.old') 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); + } + } + } + } +} -- cgit v1.2.3-70-g09d2