From cac07ec50d360f3916e84bc3af6164ef07ac2f83 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Mar 2022 11:23:45 +0200 Subject: Update --- package.json | 2 +- 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 ++++--- tpl/index.pug | 8 ++++++- tpl/objects/avatar.pug | 2 +- tpl/objects/bubble-group.pug | 22 +++++++++++++++++++ tpl/objects/bubble.pug | 21 ++++++++++++++++++ tpl/objects/header.pug | 2 +- tpl/objects/text-field.pug | 6 +++--- tpl/views/bubble-group.pug | 9 ++++++++ tpl/views/bubble.pug | 7 ++++++ 18 files changed, 206 insertions(+), 28 deletions(-) create mode 100644 src/layouts/_bubble-group.scss create mode 100644 src/objects/_bubble.scss create mode 100644 tpl/objects/bubble-group.pug create mode 100644 tpl/objects/bubble.pug create mode 100644 tpl/views/bubble-group.pug create mode 100644 tpl/views/bubble.pug diff --git a/package.json b/package.json index 122839c..5f463b1 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", - "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags lock user chevron-left chevron-right hash x send smile public/icons.svg", "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", 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') { diff --git a/tpl/index.pug b/tpl/index.pug index 14bfa10..6ff502c 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -29,6 +29,8 @@ include objects/table.pug include objects/alert.pug include objects/header.pug include objects/sidebar.pug +include objects/bubble.pug +include objects/bubble-group.pug mixin view(id, title) - @@ -70,6 +72,8 @@ include views/lightbox.pug include views/list-group.pug include views/table.pug include views/alert.pug +include views/bubble.pug +include views/bubble-group.pug doctype html @@ -104,7 +108,9 @@ html +view-lightbox +view-list-group +view-table - +view-alert + +view-alert + +view-bubble + +view-bubble-group +sidebar(class='c-sidebar') +menu diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug index 9e08a16..a2ff941 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug @@ -5,7 +5,7 @@ mixin avatar let classes = { 'o-avatar': true, 'o-avatar--circle': attributes.circle, - 'u-d-block': attributes.block + 'u-d-block': attributes.block } if (attributes.class) { classes[attributes.class] = true; diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug new file mode 100644 index 0000000..c2e502a --- /dev/null +++ b/tpl/objects/bubble-group.pug @@ -0,0 +1,22 @@ +mixin bubble-group(user) + - + let first = true + + mixin bubble-group-bubble(time) + +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble') + block + - + first = false + + - + let classes = { + 'l-bubble-group': true + } + if (attributes.class) { + classes[attributes.class] = true + } + + section(class=classes) + .l-bubble-group__avatar + +avatar= user.slice(0, 2) + block diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug new file mode 100644 index 0000000..a79f119 --- /dev/null +++ b/tpl/objects/bubble.pug @@ -0,0 +1,21 @@ +mixin bubble(time, user) + - + let classes = { + 'o-bubble': true, + 't-raised': true + } + if (attributes.class) { + classes[attributes.class] = true + } + + article(class=classes) + if user + header.o-bubble__user + strong= user + span.s-colored-links + block + small.o-bubble__time + = time + if attributes.scope + = ' ' + +icon(attributes.scope) diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug index 4518afc..0d9d7ee 100644 --- a/tpl/objects/header.pug +++ b/tpl/objects/header.pug @@ -8,5 +8,5 @@ mixin header } header(class=classes) - .o-header__content.t-lowered + .o-header__content.t-lo block diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 673aa27..53d1362 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -16,7 +16,7 @@ mixin text-field 'is-disabled': attributes.disabled, 'l-card': !!block, 'l-card--flush': !!block, - 'l-card--gapless': !!block + 'l-card--gapless': !!block, } if (attributes.class) { classes[attributes.class] = true; @@ -30,11 +30,11 @@ mixin text-field div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) if !!block if slots.pre - .u-d-contents.t-raised + .u-d-contents.t-hi - slots.pre() input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) if slots.post - .u-d-contents.t-raised + .u-d-contents.t-hi - slots.post() .o-text-field__bg else diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug new file mode 100644 index 0000000..6f057c0 --- /dev/null +++ b/tpl/views/bubble-group.pug @@ -0,0 +1,9 @@ +mixin view-bubble-group + +view('bubble-group', 'Bubble group') + .c-box.l-overflow(style='max-height: 13em') + +bubble-group('Volpeon') + +bubble-group-bubble('12:34')= loremIpsum + +bubble-group-bubble('12:35')= loremIpsum + +bubble-group-bubble('12:36')= loremIpsum + +bubble-group-bubble('12:38')= loremIpsum + +bubble-group-bubble('12:39')= loremIpsum diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug new file mode 100644 index 0000000..037398f --- /dev/null +++ b/tpl/views/bubble.pug @@ -0,0 +1,7 @@ +mixin view-bubble + +view('bubble', 'Bubble') + .c-box + +bubble('12:34', 'Volpeon')= loremIpsum + + .c-box + +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum -- cgit v1.2.3-70-g09d2