summaryrefslogtreecommitdiffstats
path: root/src/layouts/_card-list.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r--src/layouts/_card-list.scss47
1 files changed, 39 insertions, 8 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c8c3d18..cca6e72 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,7 +6,6 @@
6 6
7@forward 'card-list.vars'; 7@forward 'card-list.vars';
8@use 'card-list.vars' as vars; 8@use 'card-list.vars' as vars;
9@use '../objects/card.vars' as card;
10 9
11@mixin styles { 10@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
@@ -17,22 +16,33 @@
17 gap: props.get(vars.$row-gap); 16 gap: props.get(vars.$row-gap);
18 17
19 @include bem.modifier('merge') { 18 @include bem.modifier('merge') {
20 position: relative; 19 position: relative;
21 gap: 0; 20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21 padding: props.get(vars.$merge-padding);
22 background-color: props.get(vars.$card-bg-color);
23 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
22 25
23 @include bem.elem('card') { 26 @include bem.elem('card') {
24 transition: none;
25
26 &:not(:last-child) { 27 &:not(:last-child) {
27 margin-bottom: calc(-1 * props.get(card.$border-width)); 28 position: relative;
28 border-end-start-radius: 0; 29 border-end-start-radius: 0;
29 border-end-end-radius: 0; 30 border-end-end-radius: 0;
31
32 &::after {
33 position: absolute;
34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
36 content: '';
37 display: block;
38 block-size: props.get(vars.$border-width);
39 background-color: props.get(vars.$border-color);
40 }
30 } 41 }
31 42
32 &:hover, 43 &:hover,
33 &:active, 44 &:active,
34 &:focus-visible { 45 &:focus-visible {
35 z-index: 10;
36 transform: none; 46 transform: none;
37 } 47 }
38 48
@@ -41,6 +51,27 @@
41 border-start-end-radius: 0; 51 border-start-end-radius: 0;
42 } 52 }
43 } 53 }
54
55 @include bem.modifier('borderless') {
56 border-color: props.get(vars.$card-bg-color);
57
58 @include bem.elem('card') {
59 &:not(:last-child) {
60 &::after {
61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
62 }
63 }
64 }
65 }
66
67 @include bem.modifier('shadow') {
68 box-shadow:
69 props.get(vars.$shadow-x)
70 props.get(vars.$shadow-y)
71 props.get(vars.$shadow-blur)
72 props.get(vars.$shadow-grow)
73 props.get(vars.$shadow-color);
74 }
44 } 75 }
45 76
46 @include bem.modifier('quiet') { 77 @include bem.modifier('quiet') {
@@ -63,7 +94,7 @@
63 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); 94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
64 95
65 @include bem.modifier("grid-sm") { 96 @include bem.modifier("grid-sm") {
66 @include iro.media--media("<=md") { 97 @include media.media("<=md") {
67 display: flex; 98 display: flex;
68 gap: props.get(vars.$row-gap); 99 gap: props.get(vars.$row-gap);
69 } 100 }