From 93ff537cbe24ae1234fb11483f7a2e696d203102 Mon Sep 17 00:00:00 2001
From: Kendrick Arnett <kmarnett@gmail.com>
Date: Mon, 19 Jun 2017 12:36:38 -0500
Subject: [PATCH] feat(Cards): Add full bleed cards.

---
 .../components/cards/_cards-full-bleed.pug    | 12 +++++++++++
 .../components/cards/_cards-full-bleed.scss   | 21 +++++++++++++++++++
 rocketbelt/components/cards/_cards.scss       |  1 +
 .../tools/functions/_eased-gradient.scss      |  2 +-
 templates/components/cards/index.pug          | 10 +++++++++
 5 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 rocketbelt/components/cards/_cards-full-bleed.pug
 create mode 100644 rocketbelt/components/cards/_cards-full-bleed.scss

diff --git a/rocketbelt/components/cards/_cards-full-bleed.pug b/rocketbelt/components/cards/_cards-full-bleed.pug
new file mode 100644
index 00000000..e421954d
--- /dev/null
+++ b/rocketbelt/components/cards/_cards-full-bleed.pug
@@ -0,0 +1,12 @@
+.card.card-full-bleed.z-depth-1
+  each alt in ['PS73156_1']
+    - var base = 'https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/';
+    - var short = alt.substring(0, alt.indexOf('_'));
+    .lazyload-wrapper(data-src-lg=base + short + '/' + alt + '.jpg?sw=400&sh=400')
+      img.lazyload-small(src=base + short + '/' + alt + '.jpg?sw=10&sh=10')
+      .lazyload-pad(style='padding-bottom: 100%')
+  .card-content
+    .card-title Full Bleed Cards
+    .card-body
+      p Combine an image with card content.
+      span And with the answer is one reflected plays well enough for a distinct design. Try it will fly outdoors. We search of course, since it above a cool jewel-like turquoise cushion.
diff --git a/rocketbelt/components/cards/_cards-full-bleed.scss b/rocketbelt/components/cards/_cards-full-bleed.scss
new file mode 100644
index 00000000..cfae5b74
--- /dev/null
+++ b/rocketbelt/components/cards/_cards-full-bleed.scss
@@ -0,0 +1,21 @@
+.card-full-bleed {
+  position: relative;
+  padding: 0;
+
+  .card-content {
+    position: absolute;
+    bottom: 0;
+    display: block;
+    width: 100%;
+    background: eased-gradient($direction: to top, $easing: in-out-sine);
+    color: color(white);
+  }
+
+  .card-title {
+    font-weight: font-weight(semibold);
+  }
+
+  .card-body {
+    font-weight: font-weight(regular);
+  }
+}
diff --git a/rocketbelt/components/cards/_cards.scss b/rocketbelt/components/cards/_cards.scss
index 588c118d..614bc853 100644
--- a/rocketbelt/components/cards/_cards.scss
+++ b/rocketbelt/components/cards/_cards.scss
@@ -1,4 +1,5 @@
 @import 'cards-action',
         'cards-basic',
+        'cards-full-bleed',
         'cards-hover',
         'cards-z-depth';
diff --git a/rocketbelt/tools/functions/_eased-gradient.scss b/rocketbelt/tools/functions/_eased-gradient.scss
index 15be6a2b..573f5ee8 100644
--- a/rocketbelt/tools/functions/_eased-gradient.scss
+++ b/rocketbelt/tools/functions/_eased-gradient.scss
@@ -1,6 +1,6 @@
 /// @author Kendrick Arnett
 /// @param $key [default] - The easing to return.
-@function eased-gradient($direction: '', $color-start: color(black), $color-end: rgba(color(black), 0), $easing: default, $num-stops: 10) {
+@function eased-gradient($direction: '', $color-start: color(black), $color-end: rgba(color(black), 0), $easing: default, $num-stops: 12) {
   @if $direction != '' { $direction: $direction + ', '; }
 
   $gradient-stops: $direction;
diff --git a/templates/components/cards/index.pug b/templates/components/cards/index.pug
index 922bb223..6af7e70e 100644
--- a/templates/components/cards/index.pug
+++ b/templates/components/cards/index.pug
@@ -47,6 +47,16 @@ block content
           +exampleCodeOnly
             include _cards-image.pug
 
+    h2 "Full Bleed" Cards
+    .grid-fluid
+      .row
+        .col.xs-4
+          include _cards-full-bleed.pug
+      .row
+        .col.xs
+          +exampleCodeOnly
+            include _cards-full-bleed.pug
+
     script(src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js')
     script(src='../images/rocketbelt.images-lazyload.js')