Improved card and card list

1 files changed, 28 insertions, 0 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..a1655be 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,6 +6,7 @@
 
 @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'));
@@ -15,6 +16,33 @@
         flex-direction: column;
         gap:            props.get(vars.$row-gap);
 
+        @include bem.modifier('merge') {
+            position:   relative;
+            gap:        0;
+
+            @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;
+                }
+
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    z-index:    10;
+                    transform:  none;
+                }
+
+                @include bem.next-twin-elem {
+                    border-start-start-radius: 0;
+                    border-start-end-radius:   0;
+                }
+            }
+        }
+
         @include bem.modifier('quiet') {
             row-gap: props.get(vars.$quiet--row-gap);
         }