From cac07ec50d360f3916e84bc3af6164ef07ac2f83 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Mar 2022 11:23:45 +0200 Subject: Update --- src/_apply-vars.scss | 28 ++++++++++++++++++++---- src/_declare-vars.scss | 22 +++++++++---------- src/_layouts.scss | 1 + src/_objects.scss | 1 + src/_utils.scss | 8 ++++--- src/layouts/_bubble-group.scss | 38 +++++++++++++++++++++++++++++++++ src/objects/_action-menu.scss | 1 + src/objects/_bubble.scss | 48 ++++++++++++++++++++++++++++++++++++++++++ src/objects/_dialog.scss | 8 ++++--- 9 files changed, 134 insertions(+), 21 deletions(-) create mode 100644 src/layouts/_bubble-group.scss create mode 100644 src/objects/_bubble.scss (limited to 'src') diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 9639a97..0bdc3a8 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss @@ -25,22 +25,42 @@ @include iro.props-assign('palette-dark'); } +@include iro.bem-theme('hi') { + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light-hi'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('colors-dark'); + @include iro.props-assign('palette-dark-hi'); + } +} + +@include iro.bem-theme('lo') { + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light-lo'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('colors-dark'); + @include iro.props-assign('palette-dark-lo'); + } +} + @include iro.bem-theme('raised') { @include iro.props-assign('colors'); - @include iro.props-assign('palette-light-raised'); + @include iro.props-assign('palette-light-hi'); @media (prefers-color-scheme: dark) { @include iro.props-assign('colors-dark'); - @include iro.props-assign('palette-dark-raised'); + @include iro.props-assign('palette-dark-lo'); } } @include iro.bem-theme('lowered') { @include iro.props-assign('colors'); - @include iro.props-assign('palette-light-lowered'); + @include iro.props-assign('palette-light-lo'); @media (prefers-color-scheme: dark) { @include iro.props-assign('colors-dark'); - @include iro.props-assign('palette-dark-lowered'); + @include iro.props-assign('palette-dark-hi'); } } diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 0bcf101..883b753 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -148,21 +148,21 @@ @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(96%), + --gray: fn.gray-palette(100%), ), -), 'palette-light'); +), 'palette-light-hi'); @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(100%), + --gray: fn.gray-palette(96%), ), -), 'palette-light-raised'); +), 'palette-light'); @include iro.props-store(( --colors: ( --gray: fn.gray-palette(91%), ), -), 'palette-light-lowered'); +), 'palette-light-lo'); // @@ -187,21 +187,21 @@ @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(9%), + --gray: fn.gray-palette(6%), ), -), 'palette-dark'); +), 'palette-dark-hi'); @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(13%), + --gray: fn.gray-palette(9%), ), -), 'palette-dark-raised'); +), 'palette-dark'); @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(5%), + --gray: fn.gray-palette(13%), ), -), 'palette-dark-lowered'); +), 'palette-dark-lo'); // diff --git a/src/_layouts.scss b/src/_layouts.scss index 3a4c32b..331eb7e 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -4,3 +4,4 @@ @use 'layouts/form'; @use 'layouts/flex'; @use 'layouts/overflow'; +@use 'layouts/bubble-group'; diff --git a/src/_objects.scss b/src/_objects.scss index d01ed54..9a516ee 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -11,6 +11,7 @@ @use 'objects/action-button'; @use 'objects/status-indicator'; @use 'objects/avatar'; +@use 'objects/bubble'; @use 'objects/header'; @use 'objects/sidebar'; @use 'objects/action-menu'; diff --git a/src/_utils.scss b/src/_utils.scss index aeb0812..860fe3e 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -104,9 +104,7 @@ $dirs: ( margin#{$suffix}: fn.global-dim(--size --#{$size}); } } -} - -@each $dir, $suffix in $dirs { + @include iro.bem-utility('p#{$dir}-auto') { padding#{$suffix}: auto; } @@ -116,4 +114,8 @@ $dirs: ( padding#{$suffix}: fn.global-dim(--size --#{$size}); } } + + @include iro.bem-utility('b#{$dir}-0') { + border#{$suffix}: 0; + } } diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss new file mode 100644 index 0000000..4db70d0 --- /dev/null +++ b/src/layouts/_bubble-group.scss @@ -0,0 +1,38 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('bubble-group') { + @include iro.props-store(( + --dims: ( + --spacing-x: fn.global-dim(--size --225), + --spacing-y: fn.global-dim(--size --50), + ) + ), 'dims'); + + @include iro.bem-layout(iro.props-namespace()) { + display: grid; + grid-template-columns: auto 1fr; + grid-auto-rows: auto; + grid-template-areas: 'avatar bubble'; + justify-items: start; + align-items: flex-start; + gap: fn.dim(--spacing-y) fn.dim(--spacing-x); + + @include iro.bem-elem('avatar') { + grid-area: avatar; + position: sticky; + top: 0; + justify-self: end; + + @include iro.bem-next-elem('bubble') { + &::before { + display: block; + } + } + } + + @include iro.bem-elem('bubble') { + grid-column: bubble; + } + } +} diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 88e84d6..a3e1ca1 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -56,6 +56,7 @@ transform: translate(var(--x), var(--y)); border: fn.dim(--border) solid fn.color(--border); border-radius: fn.dim(--rounding); + background-clip: padding-box; background-color: fn.global-color(--bg); box-shadow: fn.color(--shadow); color: fn.global-color(--fg); diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss new file mode 100644 index 0000000..26746fe --- /dev/null +++ b/src/objects/_bubble.scss @@ -0,0 +1,48 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('bubble') { + @include iro.props-store(( + --colors: ( + --image-bg: fn.global-color(--obj), + ), + ), 'colors'); + + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + --rounding: 3px, + --arrow-size: fn.global-dim(--size --100), + ) + ), 'dims'); + + @include iro.bem-object(iro.props-namespace()) { + position: relative; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border-radius: fn.dim(--rounding); + background-color: fn.global-color(--bg); + color: fn.global-color(--fg); + + &::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); + border-bottom-color: transparent; + border-left-color: transparent; + } + + @include iro.bem-elem('user') { + display: block; + } + + @include iro.bem-elem('time') { + margin-left: 1em; + float: right; + transform: translate(.2em, .2em); + } + } +} diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index f6e8e63..094e09b 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -9,7 +9,7 @@ --width-sm: iro.fn-px-to-rem(500px), --width-md: iro.fn-px-to-rem(800px), --width-lg: iro.fn-px-to-rem(1100px), - --rounding: 3px, + --rounding: 8px, --border: 1px, --body: ( @@ -28,7 +28,7 @@ @include iro.props-store(( --colors: ( - --border: rgba(#000, .05), + --border: rgba(#000, .2), --shadow: 0 .2em .5em rgba(#000, .2), --sidebar: ( @@ -57,9 +57,11 @@ max-width: fn.dim(--width-md); margin: 0 auto; overflow: hidden; + border: fn.dim(--border) solid fn.color(--border); border-radius: fn.dim(--rounding); + background-clip: padding-box; background-color: fn.global-color(--bg); - box-shadow: 0 0 0 1px fn.color(--border), fn.color(--shadow); + box-shadow: fn.color(--shadow); color: fn.global-color(--fg); @include iro.bem-modifier('sm') { -- cgit v1.2.3-54-g00ecf