Add borderless/shadow to card list

3 files changed, 44 insertions, 0 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 69ca588..cca6e72 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -51,6 +51,27 @@
                     border-start-end-radius:   0;
                 }
             }
+
+            @include bem.modifier('borderless') {
+                border-color: props.get(vars.$card-bg-color);
+
+                @include bem.elem('card') {
+                    &:not(:last-child) {
+                        &::after {
+                            inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
+                        }
+                    }
+                }
+            }
+
+            @include bem.modifier('shadow') {
+                box-shadow:
+                    props.get(vars.$shadow-x)
+                    props.get(vars.$shadow-y)
+                    props.get(vars.$shadow-blur)
+                    props.get(vars.$shadow-grow)
+                    props.get(vars.$shadow-color);
+            }
         }
 
         @include bem.modifier('quiet') {
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index b4f30d9..4810834 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -29,6 +29,13 @@ $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;
 
+$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
+$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !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;
+$shadow-color:       props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default;
+
 $border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 7270d79..9a35b37 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -36,6 +36,22 @@ mixin view-card
 
         +divider('faint')(class='u-mb-700')
 
+        .l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+
+        +divider('faint')(class='u-mb-700')
+
         .l-card-list.l-card-list--masonry
             +card(thumbnail=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png')