From 793065e8569cd9c6ec40df66ad4f03edab3faaca Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 21 Oct 2024 23:19:01 +0200
Subject: Update card
---
src/layouts/_card-list.scss | 18 +++++++++++-------
src/layouts/_card-list.vars.scss | 13 ++++++++-----
src/objects/_card.scss | 19 ++++++++++++++++++-
3 files changed, 37 insertions(+), 13 deletions(-)
(limited to 'src')
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 59105c4..0722a88 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -13,15 +13,19 @@
@include iro.bem-layout('card-list') {
display: flex;
flex-direction: column;
- gap: props.get(vars.$row-gap) props.get(vars.$col-gap);
+ gap: props.get(vars.$row-gap);
+
+ @include iro.bem-modifier('quiet') {
+ row-gap: props.get(vars.$quiet--row-gap);
+ }
@include iro.bem-modifier('grid') {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
- gap: props.get(vars.$grid--col-gap);
+ gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
@include iro.bem-modifier('quiet') {
- row-gap: props.get(vars.$grid--row-gap);
+ row-gap: props.get(vars.$grid--quiet--row-gap);
}
}
@@ -31,20 +35,20 @@
column-gap: props.get(vars.$masonry--col-gap);
@include iro.bem-elem('card') {
- margin-block-end: props.get(vars.$masonry--col-gap);
+ margin-block-end: props.get(vars.$masonry--row-gap);
break-inside: avoid;
}
@include iro.bem-modifier('quiet') {
@include iro.bem-elem('card') {
- margin-block-end: props.get(vars.$masonry--row-gap);
+ margin-block-end: props.get(vars.$masonry--quiet--row-gap);
}
}
}
@include iro.bem-modifier('masonry-h') {
flex-flow: row wrap;
- gap: props.get(vars.$masonry-h--col-gap);
+ gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
@include iro.bem-modifier('no-flush') {
&::after {
@@ -65,7 +69,7 @@
}
@include iro.bem-modifier('quiet') {
- row-gap: props.get(vars.$masonry-h--row-gap);
+ row-gap: props.get(vars.$masonry-h--quiet--row-gap);
}
}
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index c2df3ef..7d19e07 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,19 +1,22 @@
@use 'iro-sass/src/props';
@use '../core.vars' as core;
-$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default;
-$col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default;
+$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$quiet--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
-$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
+$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default;
$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--quiet--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
-$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--800)) !default;
+$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
+$masonry--quiet--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--800)) !default;
-$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--800)) !default;
+$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
$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--row-gap, props.get(core.$size--800)) !default;
$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border)) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 0be38c9..3126775 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -77,7 +77,8 @@
}
@include iro.bem-elem('body') {
- flex: 1 0 auto;
+ flex: 0 1 auto;
+ block-size: 100%;
padding-block: props.get(vars.$pad-b);
padding-inline: props.get(vars.$pad-i);
@@ -181,5 +182,21 @@
padding-inline: 0;
}
}
+
+ @include fw.bem-modifier('horizontal') {
+ flex-direction: row;
+ align-items: center;
+
+ @include iro.bem-elem('body') {
+ flex: 0 0 auto;
+ block-size: auto;
+
+ @include iro.bem-modifier('main') {
+ flex-shrink: 1;
+ inline-size: 100%;
+ min-inline-size: 0;
+ }
+ }
+ }
}
}
--
cgit v1.2.3-70-g09d2