RubyGems - patternfly-sass - Versions diffs - 3.23.2 → 3.31.1 - Mend

patternfly-sass 3.23.2 → 3.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

data/spec/html/card-view-card-variations.html DELETED Viewed

@@ -1,201 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
-<!--[if gt IE 9]><!-->
-<html lang="en-us">
-<!--<![endif]-->
-  <head>
-    <title>Card View - Card Variations - PatternFly</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../../dist/img/favicon.ico">
-    <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
-    <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
-    <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
-    <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
-    <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
-    <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
-    <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
-      <link href="tests.css" rel="stylesheet" media="screen, print">
-    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Card View - Card Variations</h1>
-      </div>
-      <div class="alert alert-warning">
-        <span class="pficon pficon-warning-triangle-o"></span>
-        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
-      </div>
-      <hr>
-<h2>Large Card</h2>
-<div class="cards-pf">
-  <div class="row row-cards-pf">
-    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
-<div class="card-pf card-pf-view ">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-  </div>
-</div>
-<h2>Small Card</h2>
-<div class="cards-pf">
-  <div class="row row-cards-pf">
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-  <div class="card-pf card-pf-view ">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-  </div><!-- /row -->
-</div>
-<h2>Mini Card with status</h2>
-<div class="cards-pf">
-  <div class="row row-cards-pf">
-    <div class="col-xs-12 col-sm-3 col-md-2">
-  <div class="card-pf card-pf-view card-pf-view-xs">
-  <div class="card-pf-body">
-    <div class="card-pf-heading-kebab">
-      <div class="dropdown pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropupKebabRight2">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-      <h2 class="card-pf-title">
-        <span class="pficon pficon-cluster"></span> Storage_1
-      </h2>
-    </div>
-    <div class="progress-pf-legend">
-      <div class="progress">
-  <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
-    <span class="sr-only">25% Used</span>
-  </div>
-  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
-    <span class="sr-only">75% Available</span>
-  </div>
-</div>
-<script>
-  // Initialize Tooltip
-  jQuery(document).ready(function() {
-    jQuery('[data-toggle="tooltip"]').tooltip();
-  });
-</script>
-      <p><span class="pficon pficon-warning-triangle-o"></span> <strong>10%</strong> in use</p>
-    </div>
-  </div>
-</div>
-    </div>
-  </div><!-- /row -->
-</div>
-<h2>Mini Card with text</h2>
-<div class="cards-pf">
-  <div class="row row-cards-pf">
-    <div class="col-xs-12 col-sm-3 col-md-2">
-  <div class="card-pf card-pf-view card-pf-view-xs">
-  <div class="card-pf-body">
-    <div class="card-pf-heading-kebab">
-      <div class="dropup pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropupKebabRight3">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-      <h2 class="card-pf-title">
-        <span class="pficon pficon-service"></span> Zone_1
-      </h2>
-    </div>
-    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. <a href="#">More info</a></p>
-  </div>
-</div>
-    </div>
-  </div>
-</div>
-<script>
-  $(document).ready(function() {
-    // Card Single Select
-    $('.card-pf-view-single-select').click(function() {
-      if ($(this).hasClass('active'))
-      { $(this).removeClass('active'); }
-      else
-      { $('.card-pf-view-single-select').removeClass('active'); $(this).addClass('active'); }
-    });
-    // Card Multi Select
-    $('input[type=checkbox]').click(function() {
-      if ($(this).parent().parent().hasClass('active'))
-      { $(this).parent().parent().removeClass('active'); }
-      else
-      { $(this).parent().parent().addClass('active'); }
-    });
-  });
-</script>
-    </div><!-- /container -->
-  </body>
-</html>

data/spec/html/card-view-multi-select.html DELETED Viewed

@@ -1,698 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
-<!--[if gt IE 9]><!-->
-<html lang="en-us">
-<!--<![endif]-->
-  <head>
-    <title>Card View - Multi Select - PatternFly</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../../dist/img/favicon.ico">
-    <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
-    <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
-    <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
-    <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
-    <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
-    <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
-    <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
-      <link href="tests.css" rel="stylesheet" media="screen, print">
-    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <div class="toast-notifications-list-pf">
-    <div class="toast-pf alert alert-warning alert-dismissable">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-        <span class="pficon pficon-close"></span>
-      </button>
-      <span class="pficon pficon-warning-triangle-o"></span>
-      These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
-    </div>
-  </div>
-<div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-success alert-dismissable">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-    <span class="pficon pficon-close"></span>
-  </button>
-  <div class="pull-right toast-pf-action">
-    <a href="#">Start Server</a>
-  </div>
-  <span class="pficon pficon-ok"></span>
-  <strong>server_abc</strong> has been added to main server group.
-</div>
-  <body class="cards-pf">
-    <nav class="navbar navbar-default navbar-pf" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="/">
-          <img src="./../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
-        </a>
-      </div>
-      <div class="collapse navbar-collapse navbar-collapse-1">
-        <ul class="nav navbar-nav navbar-utility">
-          <li>
-            <a href="#">Status</a>
-          </li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-              <span class="pficon pficon-user"></span>
-              Brian Johnson <b class="caret"></b>
-            </a>
-            <ul class="dropdown-menu">
-              <li>
-                <a href="#">Link</a>
-              </li>
-              <li>
-                <a href="#">Another link</a>
-              </li>
-              <li>
-                <a href="#">Something else here</a>
-              </li>
-              <li class="divider"></li>
-              <li class="dropdown-submenu">
-                <a tabindex="-1" href="#">More options</a>
-                <ul class="dropdown-menu">
-                  <li>
-                    <a href="#">Link</a>
-                  </li>
-                  <li>
-                    <a href="#">Another link</a>
-                  </li>
-                  <li>
-                    <a href="#">Something else here</a>
-                  </li>
-                  <li class="divider"></li>
-                  <li class="dropdown-header">Nav header</li>
-                  <li>
-                    <a href="#">Separated link</a>
-                  </li>
-                  <li class="divider"></li>
-                  <li>
-                    <a href="#">One more separated link</a>
-                  </li>
-                </ul>
-              </li>
-              <li class="divider"></li>
-              <li>
-                <a href="#">One more separated link</a>
-              </li>
-            </ul>
-          </li>
-        </ul>
-        <ul class="nav navbar-nav navbar-primary">
-          <li>
-            <a href="basic.html">Basic</a>
-          </li>
-          <li>
-            <a href="bootstrap-treeview-2.html">Tree View</a>
-          </li>
-          <li>
-            <a href="dashboard.html">Dashboard</a>
-          </li>
-          <li>
-            <a href="form.html">Form</a>
-          </li>
-          <li>
-            <a href="tab.html">Tab</a>
-          </li>
-          <li>
-            <a href="typography-2.html">Typography</a>
-          </li>
-          <li class="active">
-            <a href="card-view-multi-select.html" class="active">Card View - Multi Select</a>
-          </li>
-          <li>
-            <a href="card-view-single-select.html">Card View - Single Select</a>
-          </li>
-          <li>
-            <a href="cards.html">Cards</a>
-          </li>
-          <li>
-            <a href="pagination-card-view.html">Pagination - Card View</a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-      <div class="container-fluid">
-        <div class="row toolbar-pf">
-          <div class="col-sm-12">
-            <form class="toolbar-pf-actions">
-              <div class="form-group toolbar-pf-filter">
-                <label class="sr-only" for="filter">Name</label>
-                <div class="input-group">
-                  <div class="input-group-btn">
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
-                    <ul class="dropdown-menu">
-                      <li class="selected"><a href="#">Name</a></li>
-                      <li><a href="#">Type</a></li>
-                      <li><a href="#">Color</a></li>
-                    </ul>
-                  </div><!-- /btn-group -->
-                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
-                </div><!-- /input-group -->
-              </div>
-              <div class="form-group">
-                <div class="dropdown btn-group">
-                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
-                  <ul class="dropdown-menu">
-                    <li class="selected"><a href="#">Name</a></li>
-                    <li><a href="#">Type</a></li>
-                    <li><a href="#">Last Modified</a></li>
-                  </ul>
-                </div>
-                <button class="btn btn-link" type="button">
-                  <span class="fa fa-sort-alpha-asc"></span>
-                </button>
-              </div>
-              <div class="form-group">
-                <button class="btn btn-default" type="button">Action</button>
-                <button class="btn btn-default" type="button">Action</button>
-                <div class="dropdown btn-group  dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-              </div>
-              <div class="toolbar-pf-action-right">
-                <div class="form-group toolbar-pf-find">
-                  <button class="btn btn-link btn-find" type="button">
-                    <span class="fa fa-search"></span>
-                  </button>
-                  <div class="find-pf-dropdown-container">
-                    <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
-                    <div class="find-pf-buttons">
-                      <span class="find-pf-nums">1 of 3</span>
-                      <button class="btn btn-link" type="button">
-                        <span class="fa fa-angle-up"></span>
-                      </button>
-                      <button class="btn btn-link" type="button">
-                        <span class="fa fa-angle-down"></span>
-                      </button>
-                      <button class="btn btn-link btn-find-close" type="button">
-                        <span class="pficon pficon-close"></span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div class="form-group toolbar-pf-view-selector">
-                  <button class="btn btn-link "><i class="fa fa-th"></i></button>
-                  <button class="btn btn-link active"><i class="fa fa-th-large"></i></button>
-                  <button class="btn btn-link "><i class="fa fa-th-list"></i></button>
-                </div>
-              </div>
-            </form>
-            <div class="row toolbar-pf-results">
-              <div class="col-sm-12">
-                <h5>40 Results</h5>
-                <p>Active filters:</p>
-                <ul class="list-inline">
-                  <li>
-                    <span class="label label-info">
-                      Name: nameofthething
-                      <a href="#"><span class="pficon pficon-close"></span></a>
-                    </span>
-                  </li>
-                  <li>
-                    <span class="label label-info">
-                      Name: nameofthething
-                      <a href="#"><span class="pficon pficon-close"></span></a>
-                    </span>
-                  </li>
-                  <li>
-                    <span class="label label-info">
-                      Name: nameofthething
-                      <a href="#"><span class="pficon pficon-close"></span></a>
-                    </span>
-                  </li>
-                </ul>
-                <p><a href="#">Clear All Filters</a></p>
-              </div><!-- /col -->
-            </div><!-- /row -->
-          </div><!-- /col -->
-        </div><!-- /row -->
-      </div><!-- /container -->
-<div class="container-fluid container-cards-pf" id="card-container">
-  <div class="row row-cards-pf">
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
-  <div class="card-pf-body">
-    <div class="card-pf-top-element">
-      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
-    </div>
-    <h2 class="card-pf-title text-center">
-      Cake Service
-    </h2>
-    <div class="card-pf-items text-center">
-      <div class="card-pf-item">
-        <span class="pficon pficon-screen"></span>
-        <span class="card-pf-item-text">8</span>
-      </div>
-      <div class="card-pf-item">
-        <span class="fa fa-check"></span>
-      </div>
-    </div>
-    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
-  </div>
-  <div class="card-pf-view-checkbox">
-    <input type="checkbox">
-  </div>
-</div>
-    </div>
-  </div>
-</div>
-<script>
-  $(function() {
-    // matchHeight the contents of each .card-pf and then the .card-pf itself
-    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
-  });
-  $(document).ready(function() {
-    // Card Multi Select
-    $('input[type=checkbox]').click(function() {
-      if ($(this).parent().parent().hasClass('active'))
-      { $(this).parent().parent().removeClass('active'); }
-      else
-      { $(this).parent().parent().addClass('active'); }
-    });
-    // allow users to select multiple cards with shift key
-    $('#card-container').on('click', '.card-pf-view-checkbox>input', function(event) {
-      var $cardsContainer = $('.container-cards-pf');
-      var prevIndex = $cardsContainer.data('prevIndex');
-      var $cards = $cardsContainer.find('.card-pf');
-      var $currentCard = $(this).closest('.card-pf');
-      if(event.shiftKey && prevIndex > -1 && this.checked) {
-        var currentIndex = $cards.index($currentCard);
-        var $selectScope = currentIndex - prevIndex > 0
-          ? $currentCard.parent().prevAll().not($cards.eq(prevIndex).parent().prevAll().addBack())
-          : $cards.eq(prevIndex).parent().prevAll().not($currentCard.parent().prevAll().addBack());
-        $selectScope.children().addClass('active').find('.card-pf-view-checkbox').children('input').prop('checked', true);
-      }
-      $cardsContainer.data('prevIndex', this.checked ? $cards.index($currentCard) : -1);
-    });
-  });
-</script>
-  </body>
-</html>