RubyGems - patternfly-sass - Versions diffs - 3.8.1 → 3.9.0 - Mend

patternfly-sass 3.8.1 → 3.9.0

Files changed (97) hide show

checksums.yaml +4 -4
data/.travis.yml +1 -1
data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +1 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
data/assets/images/patternfly/logo-alt.svg +18 -18
data/assets/images/patternfly/logo.svg +22 -22
data/assets/javascripts/patternfly.js +1 -1
data/assets/javascripts/patternfly.min.js +1 -1
data/assets/stylesheets/_patternfly.scss +1 -0
data/assets/stylesheets/patternfly/_card-view.scss +106 -0
data/assets/stylesheets/patternfly/_cards.scss +5 -1
data/assets/stylesheets/patternfly/_icons.scss +3 -1
data/assets/stylesheets/patternfly/_layouts.scss +7 -0
data/assets/stylesheets/patternfly/_list-group.scss +16 -0
data/assets/stylesheets/patternfly/_notifications-drawer.scss +34 -2
data/assets/stylesheets/patternfly/_toast.scss +21 -3
data/assets/stylesheets/patternfly/_toolbar.scss +3 -1
data/assets/stylesheets/patternfly/_variables.scss +2 -0
data/assets/stylesheets/patternfly/lib/bootstrap-select.scss +7 -7
data/bower.json +3 -2
data/lib/patternfly-sass/version.rb +2 -2
data/spec/html/about-modal.html +1 -0
data/spec/html/accordions.html +1 -0
data/spec/html/alerts.html +1 -0
data/spec/html/area-charts.html +1 -0
data/spec/html/badges.html +1 -0
data/spec/html/bar-charts.html +1 -0
data/spec/html/basic.html +14 -6
data/spec/html/blank-slate.html +1 -0
data/spec/html/bootstrap-combobox.html +1 -0
data/spec/html/bootstrap-datepicker.html +2 -1
data/spec/html/bootstrap-select.html +1 -0
data/spec/html/bootstrap-switch.html +1 -0
data/spec/html/bootstrap-touchspin.html +1 -0
data/spec/html/bootstrap-treeview-2.html +14 -6
data/spec/html/bootstrap-treeview.html +1 -0
data/spec/html/breadcrumbs.html +1 -0
data/spec/html/buttons.html +1 -0
data/spec/html/card-view-card-variations.html +201 -0
data/spec/html/card-view-multi-select.html +689 -0
data/spec/html/card-view-single-select.html +439 -0
data/spec/html/cards.html +14 -6
data/spec/html/code.html +1 -0
data/spec/html/dashboard.html +14 -6
data/spec/html/datatables-columns.html +1 -0
data/spec/html/datatables.html +1 -0
data/spec/html/dist/css/patternfly-additions.css +197 -6
data/spec/html/dist/css/patternfly-additions.css.map +1 -1
data/spec/html/dist/css/patternfly-additions.min.css +1 -1
data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
data/spec/html/dist/css/patternfly.css +13 -0
data/spec/html/dist/css/patternfly.css.map +1 -1
data/spec/html/dist/css/patternfly.min.css +2 -2
data/spec/html/dist/css/patternfly.min.css.map +1 -1
data/spec/html/donut-charts.html +1 -0
data/spec/html/dropdowns.html +1 -0
data/spec/html/form.html +14 -6
data/spec/html/forms.html +1 -0
data/spec/html/horizontal-navigation.html +10 -8
data/spec/html/icons.html +5 -0
data/spec/html/index.html +10 -0
data/spec/html/infotip.html +1 -0
data/spec/html/labels.html +1 -0
data/spec/html/line-charts.html +1 -0
data/spec/html/list-group.html +1 -0
data/spec/html/list-view-rows.html +1 -0
data/spec/html/list-view.html +8 -6
data/spec/html/login.html +8 -6
data/spec/html/modals.html +1 -0
data/spec/html/navbar.html +1 -0
data/spec/html/notification-drawer-horizontal-nav.html +25 -8
data/spec/html/notification-drawer-vertical-nav.html +23 -6
data/spec/html/pagination.html +1 -0
data/spec/html/panels.html +1 -0
data/spec/html/pie-charts.html +1 -0
data/spec/html/popovers.html +1 -0
data/spec/html/progress-bars.html +1 -0
data/spec/html/search.html +1 -0
data/spec/html/spinner.html +1 -0
data/spec/html/tab.html +14 -6
data/spec/html/tables.html +1 -0
data/spec/html/tabs.html +1 -0
data/spec/html/time-picker.html +1 -0
data/spec/html/toast.html +26 -77
data/spec/html/toolbar.html +1 -0
data/spec/html/tooltip.html +1 -0
data/spec/html/typography-2.html +14 -6
data/spec/html/typography.html +1 -0
data/spec/html/utilization-bar-charts.html +1 -0
data/spec/html/vertical-navigation-primary-only.html +8 -6
data/spec/html/vertical-navigation-with-secondary.html +8 -6
data/spec/html/vertical-navigation-with-tertiary-no-icons.html +8 -6
data/spec/html/vertical-navigation-with-tertiary-pins.html +8 -6
data/spec/html/wizard.html +1 -0
metadata +9 -2

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

@@ -0,0 +1,689 @@
+<!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" >
+    <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="#">First Link</a>
+            </li>
+            <li>
+              <a href="#">Another Link</a>
+            </li>
+            <li>
+              <a href="#">And Another</a>
+            </li>
+            <li>
+              <a href="#">As a General Rule</a>
+            </li>
+            <li>
+              <a href="#">Five to Seven Links</a>
+            </li>
+            <li>
+              <a href="#">Is Good</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><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><!-- /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><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>
+                <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">
+                  <ul class="list-inline">
+                    <li><a href="#"><i class="fa fa-th"></i></a></li>
+                    <li class="active"><a href="#"><i class="fa fa-th-large"></i></a></li>
+                    <li><a href="#"><i class="fa fa-th-list"></i></a></li>
+                  </ul>
+                </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 -->
+      <script>
+      (function($) {
+        $(document).ready(function() {
+          // Upon clicking the find button, show the find dropdown content
+          $(".btn-find").click(function () {
+            $(".find-pf-dropdown-container").toggle();
+          });
+          // Upon clicking the find close button, hide the find dropdown content
+          $(".btn-find-close").click(function () {
+            $(".find-pf-dropdown-container").hide();
+          });
+        });
+      })(jQuery);
+    </script>
+<div class="container-fluid container-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 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'); }
+    });
+  });
+</script>
+  </body>
+</html>