From 84e24e1df83806a139f4b402336cf1c8ada58d67 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Jul 2025 18:28:08 +0200 Subject: Various fixes --- src/_config.defaults.scss | 12 +++++++----- src/_core.vars.scss | 6 +++--- src/_utils.scss | 4 ++++ src/layouts/_card-list.scss | 11 +++++------ src/layouts/_card-list.vars.scss | 7 ++++++- src/objects/_action-button.vars.scss | 2 +- src/objects/_card.scss | 31 +++++++++++++++++++------------ src/objects/_card.vars.scss | 6 ++++++ src/objects/_checkbox.vars.scss | 2 +- src/objects/_emoji.vars.scss | 2 +- src/objects/_popover.vars.scss | 9 +++------ src/objects/_radio.vars.scss | 2 +- src/objects/_side-nav.vars.scss | 2 +- src/objects/_switch.vars.scss | 2 +- src/objects/_tabbar.vars.scss | 2 +- src/objects/_table.vars.scss | 2 +- src/objects/_thumbnail.vars.scss | 2 +- src/scopes/_code.vars.scss | 4 ++-- tpl/objects/card.pug | 7 ++++--- tpl/views/card.pug | 8 ++++---- 20 files changed, 72 insertions(+), 51 deletions(-) diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index 3f02ecc..b392cfc 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss @@ -126,7 +126,8 @@ $theme-light: ( --bg-base: --base --200, --box: ( - --border: --base --200, + --border: --base --200, + --border-strong: --base --300, ), )), @@ -183,13 +184,14 @@ $theme-dark: ( --bg-base: --base --50, --bg-l1: --base --75, --bg-l2: --base --100, + + --box: ( + --border: --base --100, + --border-strong: --base --100, + ), )), --constants: ( --shadow: rgba(#000, .1), - - --box: ( - --border: rgba(#000, .1), - ), ), ); diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 7c546d7..19ebce2 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -95,9 +95,9 @@ $shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default; $shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default; $shadow--l2--x: props.def(--shadow--l2--x, 0) !default; -$shadow--l2--y: props.def(--shadow--l2--y, 4px) !default; -$shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default; -$shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default; +$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default; +$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default; +$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default; $rounding: props.def(--rounding, 8px) !default; $rounding--sm: props.def(--rounding--sm, 4px) !default; diff --git a/src/_utils.scss b/src/_utils.scss index 445e5c6..1311d32 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -271,6 +271,10 @@ $-sizes: ( border-radius: props.get(vars.$rounding); } + @include bem.utility('br-round-sm') { + border-radius: props.get(vars.$rounding--sm); + } + @each $dir, $suffix in $-dirs { @include bem.utility('m#{$dir}-auto') { margin#{$suffix}: auto; diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index b828e44..abb0277 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -6,7 +6,6 @@ @forward 'card-list.vars'; @use 'card-list.vars' as vars; -@use '../objects/card.vars' as card; @mixin styles { @include materialize-at-root(meta.module-variables('vars')); @@ -17,14 +16,14 @@ gap: props.get(vars.$row-gap); @include bem.modifier('merge') { - position: relative; - gap: 0; + position: relative; + gap: props.get(vars.$border-width); + background-color: props.get(vars.$border-color); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); @include bem.elem('card') { - transition: none; - &:not(:last-child) { - margin-bottom: calc(-1 * props.get(card.$border-width)); border-end-start-radius: 0; border-end-end-radius: 0; } diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss index 1c49c0f..0c8d702 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss @@ -1,5 +1,9 @@ @use 'iro-sass/src/props'; @use '../core.vars' as core; +@use '../objects/card' as card; + +$border-width: props.def(--l-card-list--border-width, props.get(card.$border-width)) !default; +$rounding: props.def(--l-card-list--rounding, props.get(card.$rounding)) !default; $row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--100)) !default; $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; @@ -24,4 +28,5 @@ $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.g $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; -$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default; +$card-bg-color: props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default; +$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default; diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 84bb415..10d345b 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -52,7 +52,7 @@ $default-theme-override: () !default; $default-theme: map.deep-merge(( --bg-color: props.get(core.$theme, --bg-l2), --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), --shadow-color: props.get(core.$theme, --shadow), --hover: ( diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 6b80e2f..966bcd0 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -14,7 +14,6 @@ position: relative; display: flex; flex-direction: column; - background-clip: content-box; background-color: props.get(vars.$bg-color); border: props.get(vars.$border-width) solid transparent; border-color: props.get(vars.$border-color); @@ -42,19 +41,31 @@ } } + @include bem.modifier('borderless') { + border-color: props.get(vars.$bg-color); + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active { + border-color: props.get(vars.$hover--bg-color); + } + } + } + @include bem.elem('avatar') { margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); } @include bem.elem('image') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: 100%; - overflow: hidden; - object-fit: cover; - transition: background-color .2s, transform .2s, opacity .2s; + position: relative; + display: block; + flex: 0 0 auto; + inline-size: calc(100% + 2 * props.get(vars.$border-width)); + margin: calc(-1 * props.get(vars.$border-width)); + overflow: hidden; + object-fit: cover; + transition: background-color .2s, transform .2s, opacity .2s; &:first-child { border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); @@ -121,7 +132,6 @@ margin-inline: 0; background-color: transparent; border: 0; - box-shadow: none; @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, @@ -141,7 +151,6 @@ margin: 0; outline: none; border: 0; - box-shadow: none; @include bem.elem('image') { margin: calc(-1 * props.get(vars.$key-focus--border-width)); @@ -179,8 +188,6 @@ @include bem.modifier('thumbnail') { @include bem.elem('image') { - inline-size: calc(100% + 2 * props.get(vars.$border-width)); - margin: calc(-1 * props.get(vars.$border-width)); border-radius: props.get(vars.$rounding); } diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index c5bbc0d..592182e 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -14,10 +14,16 @@ $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad- $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; +$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l2--x)) !default; +$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l2--y)) !default; +$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l2--blur)) !default; +$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l2--grow)) !default; + $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default; $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; $border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index aee26e6..25a0d3d 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -7,7 +7,7 @@ $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index fbfb935..073f88b 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -4,7 +4,7 @@ $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; $pad: props.def(--o-emoji--pad, .3em) !default; -$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default; $zoom: props.def(--o-emoji--zoom, 3) !default; $valign: props.def(--o-emoji--valign, -.25em) !default; diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss index 451cc18..e560d1b 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss @@ -14,9 +14,6 @@ $shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) ! $shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default; $shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default; -$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default; - -$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; - -$border-color-dark: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute), 'dark') !default; +$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; +$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default; +$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default; diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss index 51ea581..b18ae2b 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss @@ -7,7 +7,7 @@ $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) ! $border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; $pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; $pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index 122dba6..711b2a7 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -8,7 +8,7 @@ $separator: props.def(--o-side-nav--separator, props.get(core.$size--200 $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; $item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; -$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; +$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss index 85596af..10489a5 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss @@ -8,7 +8,7 @@ $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) ! $border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; $pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; $pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss index f4486d6..4095629 100644 --- a/src/objects/_tabbar.vars.scss +++ b/src/objects/_tabbar.vars.scss @@ -4,7 +4,7 @@ @use '../core.vars' as core; $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; -$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss index d1d53d7..b8d8093 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss @@ -4,7 +4,7 @@ $pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; $pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; -$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; $heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index ba8cebe..60bf2e9 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -4,7 +4,7 @@ @use '../core.vars' as core; $size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; -$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss index 8a040c2..08472f2 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss @@ -4,12 +4,12 @@ $inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; $inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; -$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default; +$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default; $block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; $block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; +$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; $inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; $inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index 1db2fe5..514b9d3 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug @@ -1,9 +1,10 @@ mixin card - let classes = { - 'o-card': true, - 'o-card--quiet': !!attributes.quiet, - 'o-card--thumbnail': !!attributes.thumbnail, + 'o-card': true, + 'o-card--borderless': !!attributes.borderless, + 'o-card--quiet': !!attributes.quiet, + 'o-card--thumbnail': !!attributes.thumbnail, } if (attributes.class) { diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 5e48dde..64e3504 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -17,15 +17,15 @@ mixin view-card +divider('faint')(class='u-mb-700') .l-card-list.l-card-list--merge - +card(href='#' class='l-card-list__card') + +card(href='#' class='l-card-list__card' borderless=true) +card-body strong= 'Lorem ipsum dolor' = 'sit amet' - +card(href='#' class='l-card-list__card') + +card(href='#' class='l-card-list__card' borderless=true) +card-body strong= 'Lorem ipsum dolor' = 'sit amet' - +card(href='#' class='l-card-list__card') + +card(href='#' class='l-card-list__card' borderless=true) +card-body strong= 'Lorem ipsum dolor' = 'sit amet' @@ -86,7 +86,7 @@ mixin view-card let classes = { 'l-card-list': true, - 'l-card-list--aspect-5/4': layout === 'grid', + 'l-card-list--aspect-5/4': ['grid', 'grid-sm'].includes(layout), 'l-card-list--quiet': quiet, } classes[`l-card-list--${layout}`] = true; -- cgit v1.2.3-70-g09d2