LE Product Cards with Search

8/6/2018 - 4:31 PM

LE Product Cards with Search


// --------------
// Global styles
// --------------

*, *:after, *:before
  box-sizing: border-box

// Color Variables
$l1: hsla(0, 0%, 100%, 1)
$l2: hsla(223, 13%, 87%, 1)
$l3: hsla(0, 0%, 77%, 1)
$d1: hsla(0, 0%, 20%, 1)
$d2: #555
$p1: #be1e2e
$p2: #333
$p3: #ddd
$g1: #FFB714
$g2: #FFE579

// Mixins
=size($x, $y)
  width: $x
  height: $y

// Text
h2, h4, p, ul, li
  margin: 0
  padding: 0
  
input
  position: relative
  top: 0
  left: 0
  width: 200px
  clear: both
  float: left
  

h2, h4
  font-family: 'Oswald', sans-serif
  text-transform: uppercase
  color: $d1

h2
  font-size: 1.75rem
  font-size: 28px
  font-weight: 600
  letter-spacing: -0.2px
  margin-bottom: 0.3125em

p, li
  font-family: "Roboto", sans-serif
  font-weight: 600
  color: $d2
  line-height: 1.7

ul, li
  text-decoration: none
  list-style: disc outside

ul
  padding-left: 20px

svg
  margin: 0px
  min-width: 24px
  min-height: 24px



// --------------
// Main styles begin
// --------------

body
  background-color: $l2
  background-image: linear-gradient(140deg, $l1, $l2)
  margin: auto
  width: 50rem
  //min-height: 450px
  min-height: 100vh
  display: flex
  align-items: center
  justify-content: center

  .search
    position: flex
    top: 30px
    outline: 0
    color: #666
    padding: 5px
    letter-spacing: 0.75px
    line-height: 1.6
    font-size: 1rem
    font-weight: 800
    border: #333 thin solid
    &:focus
      outline: #D5CA9E auto 3px
  
  
.row
  width: 80rem
  display: flex
  justify-content: center
  align-content: center
  margin: 2em auto
  clear: both
  &:after
    content: ''
    display: block
    clear: both

  .highlight
    background: #be1e2e
    padding: 5px
    color: #eee
    



// --------------
// Overall card
// --------------

.cardContainer
  position: relative
  +size(300px, 400px)
  min-width: 300px
  min-height: 400px
  margin: 4px
  perspective: 1000px
.chris > .image-info
  background: 150%

// .active is applied to .card when .card is clicked.
.active
  transform: translateZ(0px) rotateY(180deg) !important
  &:after
    display: none
  // &:hover:after
  //   opacity: 0 !important

.card
  display: inline-block
  +size(100%, 100%)
  cursor: pointer
  -moz-backface-visibility: hidden
  transform-style: preserve-3d
  transform: translateZ(-100px)
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
  // :after allows for a more performant box-shadow because only opacity is being animated.
  &:after
    content: ''
    position: absolute
    z-index: -1
    +size(100%, 100%)
    border-radius: 5px
    box-shadow: 0 14px 50px -4px hsla(0, 0%, 0%, 0.15)
    opacity: 0
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4)
  &:hover
    transform: translateZ(0px)
  &:hover:after
    opacity: 1

  .side
    -webkit-backface-visibility: hidden
    backface-visibility: hidden
    position: absolute
    +size(100%, 100%)
    border-radius: 5px
    background-color: $l1

  .front
    z-index: 2
  .back
    transform: rotateY(180deg)

  .info
    padding: 16px



// --------------
// Front of card
// --------------

.front

  .img
    background-color: $l2
    background-position: center
    background-size: cover
    border-radius: 5px 5px 0 0
    +size(100%, 200px)
    
  

  .img1
    background: 100%
    background-image: url(http://assets.lincolnelectric.com/assets/US/EN/store/thumbnails/tomahawk-375-promo.jpg)
    
  .img2
    background-image: url(https://assets.lincolnelectric.com/assets/global/Products/K1308-25/140x140.jpg)
  .img3
    background-image: url(http://assets.lincolnelectric.com/assets/US/EN/store/thumbnails/tomahawk-375-promo.jpg)



// --------------
// Back of card
// --------------

.back
  position: relative

  h2
    margin-top: 6px
    margin-bottom: 18px

  .reviews
    display: flex
    align-items: center
    margin-bottom: 12px
    cursor: pointer
    p
      color: $l3
      font-weight: 300
      margin: 1px 0 0 6px
      transition: 0.3s ease-in-out
    &:hover
      p
        color: $d2

  li
    line-height: 1.8
    margin: 2px 0 6px 0

  .btn
    // positioning
    position: absolute
    bottom: 16px
    +size(calc(100% - 32px), 56px)
    display: flex
    align-items: center
    justify-content: center
    // style
    background-color: $p1
    background-image: linear-gradient(-50deg, $p1, $p2)
    border-radius: 5px
    cursor: pointer
    h4
      color: #fff

    &:hover
      h4
        transform: translateX(0px)
      svg
        transform: translateX(0px)
        opacity: 1

    h4
      transform: translateX(12px)
      transition: transform 0.3s ease-out
    svg
      margin: 1px 0 0 4px
      transform: translateX(-8px)
      opacity: 0
      transition: all 0.3s ease-out
  img-info 
    background-size: 120%
    background: red

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

script.babel


const cards = document.querySelectorAll('.card');

function transition() {
  if (this.classList.contains('active')) {
    this.classList.remove('active')
  } else {
    this.classList.add('active');
  }
}

cards.forEach(card => card.addEventListener('click', transition));

  jQuery.fn.highlight = function(pat) {

        function innerHighlight(node, pat) {
 
            var skip = 0;

            if (node.nodeType == 3) {

                var pos = node.data.toUpperCase().indexOf(pat);

                if (pos >= 0) {

                    var spannode = document.createElement('span');
                    spannode.className = 'highlight';
                    var middlebit = node.splitText(pos);
                    var endbit = middlebit.splitText(pat.length);
                    var middleclone = middlebit.cloneNode(true);

                    spannode.appendChild(middleclone);
                    middlebit.parentNode.replaceChild(spannode, middlebit);
                    skip = 1;

                }

            } else if (node.nodeType == 1 && node.childNodes && !/(script|style) /i.test(node.tagName)) {

                for (var i = 0; i < node.childNodes.length; ++i) {

                    i += innerHighlight(node.childNodes[i], pat);

                }

            }

            return skip;

        }

        return this.each(function() {

            innerHighlight(this, pat.toUpperCase());

        });

    };

    jQuery.fn.removeHighlight = function() {

        function newNormalize(node) {

            for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {

                var child = children[i];

                if (child.nodeType == 1) {

                    newNormalize(child);
                    continue;

                }

                if (child.nodeType != 3) { continue; }

                var next = child.nextSibling;

                if (next == null || next.nodeType != 3) { continue; }

                var combined_text = child.nodeValue + next.nodeValue;
                new_node = node.ownerDocument.createTextNode(combined_text);
                node.insertBefore(new_node, child);
                node.removeChild(child);
                node.removeChild(next);
                i--;
                nodeCount--;

            }

        }

        return this.find("span.highlight").each(function() {

            var thisParent = this.parentNode;
            thisParent.replaceChild(this.firstChild, this);
            newNormalize(thisParent);

        }).end();

    };
    

$(function() {

            $('#text-search').bind('keyup change', function(ev) {

                // pull in the new value
                var searchTerm = $(this).val();

                // remove any old highlighted terms
                $('body').removeHighlight();

                // disable highlighting if empty
                if ( searchTerm ) {

                     // highlight the new term
                     $('body').highlight( searchTerm );

                }

            });

        });

le-product-cards-with-search.markdown

Rendered
Source

LE Product Cards with Search

A Pen by Dylan Burkey on CodePen.

License.

index.html


 
<section class="container">
  <section class="row search-module">
  <input class="search" id="text-search" placeholder="Search" type="text" name="text-search">
</section>
 <div class="row">
    <div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Flexcut 80 (LC105m)</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img1"></div>
      <div class="info">
        <h2>Flexcut 80 (LC100M)</h2>
        <p>Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Nozzle (80A)</li>
          <li>Sold In Packs Of 5</li>
          <li>Updated hip bolstering offers superior operator comfort and positioning</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
  <div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Flexcut 80 (LC105m)</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
  
    


<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img1"></div>
      <div class="info">
        <h2>Flexcut 80 (LC100M)</h2>
        <p>Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Nozzle (80A)</li>
          <li>Sold In Packs Of 5</li>
          <li>Updated hip bolstering offers superior operator comfort and positioning</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
<div class="row">
<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Flexcut 80 (LC105m)</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
  
  <div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Flexcut 80 (LC105m)</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
  
  
  
 <div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Flexcut 80 (LC105m)</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
   <div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Flexcut 80 (LC105m)</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
       
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>
  
  </section>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

LE Product Cards with Search

LE Product Cards with Search