From 8c4acea85943a34e62299f419e93a8f3ce142bb9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 12 Mar 2022 09:53:20 +0100 Subject: Added list group --- src/_config.scss | 10 +++++----- src/_objects.scss | 1 + src/_utils.scss | 4 ++-- src/objects/_list-group.scss | 45 ++++++++++++++++++++++++++++++++++++++++++++ tpl/index.pug | 23 ++++++++++++++++++++-- tpl/objects/list-group.pug | 13 +++++++++++++ tpl/objects/text-field.pug | 3 +-- 7 files changed, 88 insertions(+), 11 deletions(-) create mode 100644 src/objects/_list-group.scss create mode 100644 tpl/objects/list-group.pug diff --git a/src/_config.scss b/src/_config.scss index cdbd02c..8520b9e 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -20,12 +20,12 @@ $wanted-grays: ( --2: -1.1, --3: 1, - --4: 1.15, - --5: 1.3, - --6: 1.7, + --4: 1.1, + --5: 1.25, + --6: 1.5, - --7: 2.4, - --8: 3.3, + --7: 2.2, + --8: 3.1, --9: 6, --10: 11, --11: 19, diff --git a/src/_objects.scss b/src/_objects.scss index 4049101..ce91f5b 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -16,3 +16,4 @@ @use 'objects/backdrop'; @use 'objects/dialog'; @use 'objects/lightbox'; +@use 'objects/list-group'; diff --git a/src/_utils.scss b/src/_utils.scss index ce0220a..1969a82 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -63,7 +63,7 @@ $dirs: ( margin#{$suffix}: auto; } - @each $size in (0 10 50 100 200) { + @each $size in (0 10 50 100 200 400) { @include iro.bem-utility('m#{$dir}-#{$size}') { margin#{$suffix}: fn.global-dim(--size --#{$size}); } @@ -75,7 +75,7 @@ $dirs: ( padding#{$suffix}: auto; } - @each $size in (0 10 50 100 200) { + @each $size in (0 10 50 100 200 400) { @include iro.bem-utility('p#{$dir}-#{$size}') { padding#{$suffix}: fn.global-dim(--size --#{$size}); } diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss new file mode 100644 index 0000000..521bc19 --- /dev/null +++ b/src/objects/_list-group.scss @@ -0,0 +1,45 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('list-group') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --175), + --pad-y: fn.global-dim(--size --125), + --rounding: 3px, + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg-hi2), + --border: fn.global-color(--obj), + --hover: fn.global-color(--bg), + --press: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + border: 1px solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + + @include iro.bem-elem('item') { + padding: fn.dim(--pad-y) fn.dim(--pad-x); + + @include iro.bem-next-twin-elem { + border-top: 1px solid fn.color(--border); + } + + @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'action') { + &:hover { + background-color: fn.color(--hover); + } + + &:active { + background-color: fn.color(--press); + } + } + } + } +} diff --git a/tpl/index.pug b/tpl/index.pug index f682c26..e1a6445 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -21,9 +21,10 @@ include objects/menu.pug include objects/backdrop.pug include objects/dialog.pug include objects/lightbox.pug +include objects/list-group.pug mixin box - +container(padX=true padY=true inPage=true theme="raised") + +container(padX=true padY=true inPage=true) block mixin user-card(name, hue) @@ -558,7 +559,6 @@ html +slot('body') p.u-mt-0= loremIpsum - //----------------------------------------- +h1-heading('xl')= 'Lightbox' @@ -577,4 +577,23 @@ html a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" + //----------------------------------------- + + +h1-heading('xl')= 'List group' + +rule('medium') + + +box + +list-group + +list-group-item= 'First item' + +list-group-item= 'Second item' + +list-group-item= 'Third item' + +list-group-item= 'Fourth item' + + +box + +list-group + +list-group-item(action=true)= 'First item' + +list-group-item(action=true)= 'Second item' + +list-group-item(action=true)= 'Third item' + +list-group-item(action=true)= 'Fourth item' + diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug new file mode 100644 index 0000000..36be264 --- /dev/null +++ b/tpl/objects/list-group.pug @@ -0,0 +1,13 @@ +mixin list-group + .o-list-group + block + +mixin list-group-item + - + let classes = { + 'o-list-group__item': true, + 'o-list-group__item--action': attributes.action, + } + + div(class=classes) + block diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 2e9827b..cbdb8c4 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -16,8 +16,7 @@ mixin text-field 'is-disabled': attributes.disabled, 'l-card': !!block, 'l-card--flush': !!block, - 'l-card--gapless': !!block, - 'u-p-xs': !!block + 'l-card--gapless': !!block } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) -- cgit v1.2.3-70-g09d2