patternfly-sass 3.17.0 → 3.20.0

data/spec/html/basic.html

@@ -30,6 +30,7 @@
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
     <script src="//cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
     <script src="../../dist/js/patternfly.dataTables.pfEmpty.js"></script>
     <script src="../../dist/js/patternfly.dataTables.pfFilter.js"></script>
     <script src="../../dist/js/patternfly.dataTables.pfResize.js"></script>
@@ -138,6 +139,9 @@
           <li>
             <a href="cards.html">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>
@@ -241,6 +245,33 @@
   </thead>
 </table>
 
+<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
+  <div class="form-group">
+    <select class="selectpicker pagination-pf-pagesize">
+      <option value="6">6</option>
+      <option value="10" >10</option>
+      <option value="15" selected="selected">15</option>
+      <option value="25">25</option>
+      <option value="50">50</option>
+    </select>
+    <span>per page</span>
+  </div>
+  <div class="form-group">
+    <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
+    <ul class="pagination pagination-pf-back">
+      <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
+      <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
+    </ul>
+    <label for="pagination1-page" class="sr-only">Current Page</label>
+    <input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
+    <span>of <span class="pagination-pf-pages">5</span></span>
+    <ul class="pagination pagination-pf-forward">
+      <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
+      <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
+    </ul>
+  </div>
+</form>
+
 <!-- Blank Slate HTML -->
 <div class="blank-slate-pf table-view-pf-empty hidden" id="emptyState1">
   <div class="blank-slate-pf-icon">
@@ -375,6 +406,240 @@ var dataSet = [{
   platforms: "Win 95+ / OSX.1+",
   version: "1.2",
   grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Mozilla 1.3",
+  platforms: "Win 95+ / OSX.1+",
+  version: "1.3",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Mozilla 1.4",
+  platforms: "Win 95+ / OSX.1+",
+  version: "1.4",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Mozilla 1.5",
+  platforms: "Win 95+ / OSX.1+",
+  version: "1.5",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Mozilla 1.6",
+  platforms: "Win 95+ / OSX.1+",
+  version: "1.6",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Mozilla 1.7",
+  platforms: "Win 98+ / OSX.1+",
+  version: "1.7",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Mozilla 1.8",
+  platforms: "Win 98+ / OSX.1+",
+  version: "1.8",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Seamonkey 1.1",
+  platforms: "Win 98+ / OSX.2+",
+  version: "1.8",
+  grade: "A"
+}, {
+  engine: "Gecko",
+  browser: "Epiphany 2.20",
+  platforms: "Gnome",
+  version: "1.8",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "Safari 1.2",
+  platforms: "OSX.3",
+  version: "125.5",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "Safari 1.3",
+  platforms: "OSX.3",
+  version: "312.8",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "Safari 2.0",
+  platforms: "OSX.4+",
+  version: "419.3",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "Safari 3.0",
+  platforms: "OSX.4+",
+  version: "522.1",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "OmniWeb 5.5",
+  platforms: "OSX.4+",
+  version: "420",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "iPod Touch / iPhone",
+  platforms: "iPod",
+  version: "420.1",
+  grade: "A"
+}, {
+  engine: "Webkit",
+  browser: "S60",
+  platforms: "S60",
+  version: "413",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 7.0",
+  platforms: "Win 95+ / OSX.1+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 7.5",
+  platforms: "Win 95+ / OSX.2+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 8.0",
+  platforms: "Win 95+ / OSX.2+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 8.5",
+  platforms: "Win 95+ / OSX.2+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 9.0",
+  platforms: "Win 95+ / OSX.3+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 9.2",
+  platforms: "Win 88+ / OSX.3+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera 9.5",
+  platforms: "Win 88+ / OSX.3+",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Opera for Wii",
+  platforms: "Wii",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Nokia N800",
+  platforms: "N800",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Presto",
+  browser: "Nintendo DS browser",
+  platforms: "Nintendo DS",
+  version: "8.5",
+  grade: "C/A<sup>1</sup>"
+}, {
+  engine: "KHTML",
+  browser: "Konqureror 3.1",
+  platforms: "KDE 3.1",
+  version: "3.1",
+  grade: "C"
+}, {
+  engine: "KHTML",
+  browser: "Konqureror 3.3",
+  platforms: "KDE 3.3",
+  version: "3.3",
+  grade: "A"
+}, {
+  engine: "KHTML",
+  browser: "Konqureror 3.5",
+  platforms: "KDE 3.5",
+  version: "3.5",
+  grade: "A"
+}, {
+  engine: "Tasman",
+  browser: "Internet Explorer 4.5",
+  platforms: "Mac OS 8-9",
+  version: "-",
+  grade: "X"
+}, {
+  engine: "Tasman",
+  browser: "Internet Explorer 5.1",
+  platforms: "Mac OS 7.6-9",
+  version: "1",
+  grade: "C"
+}, {
+  engine: "Tasman",
+  browser: "Internet Explorer 5.2",
+  platforms: "Mac OS 8-X",
+  version: "1",
+  grade: "C"
+}, {
+  engine: "Misc",
+  browser: "NetFront 3.1",
+  platforms: "Embedded devices",
+  version: "-",
+  grade: "C"
+}, {
+  engine: "Misc",
+  browser: "NetFront 3.4",
+  platforms: "Embedded devices",
+  version: "-",
+  grade: "A"
+}, {
+  engine: "Misc",
+  browser: "Dillo 0.8",
+  platforms: "Embedded devices",
+  version: "-",
+  grade: "X"
+}, {
+  engine: "Misc",
+  browser: "Links",
+  platforms: "Text only",
+  version: "-",
+  grade: "X"
+}, {
+  engine: "Misc",
+  browser: "Lynx",
+  platforms: "Text only",
+  version: "-",
+  grade: "X"
+}, {
+  engine: "Misc",
+  browser: "IE Mobile",
+  platforms: "Windows Mobile 6",
+  version: "-",
+  grade: "C"
+}, {
+  engine: "Misc",
+  browser: "PSP browser",
+  platforms: "PSP",
+  version: "-",
+  grade: "C"
+}, {
+  engine: "Other browsers",
+  browser: "All others",
+  platforms: "-",
+  version: "-",
+  grade: "U"
 }];
 
 // DataTable Config
@@ -426,6 +691,7 @@ $("#table1").DataTable({
   order: [[ 1, 'asc' ]],
   pfConfig: {
     emptyStateSelector: "#emptyState1",
+    filterCaseInsensitive: true,
     filterCols: [
       null,
       {
@@ -446,6 +712,7 @@ $("#table1").DataTable({
         placeholder: "Filter By CSS Grade..."
       }
     ],
+    paginationSelector: "#pagination1",
     toolbarSelector: "#toolbar1",
     selectAllSelector: 'th:first-child input[type="checkbox"]'
   },

data/spec/html/bootstrap-treeview-2.html

@@ -134,6 +134,9 @@
           <li>
             <a href="cards.html">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>

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

@@ -144,6 +144,9 @@
           <li>
             <a href="cards.html">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>
@@ -255,7 +258,7 @@
         </div><!-- /row -->
       </div><!-- /container -->
 
-<div class="container-fluid container-cards-pf">
+<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">
@@ -672,8 +675,24 @@
       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>

data/spec/html/card-view-single-select.html

@@ -144,6 +144,9 @@
           <li>
             <a href="cards.html">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>

data/spec/html/cards.html

@@ -146,6 +146,9 @@
           <li class="active">
             <a href="cards.html" class="active">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>

data/spec/html/dashboard.html

@@ -134,6 +134,9 @@
           <li>
             <a href="cards.html">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>

data/spec/html/dist/css/patternfly-additions.css

@@ -2750,6 +2750,8 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 }
 .close {
   text-shadow: none;
+  z-index: 1;
+  position: relative;
   opacity: 0.6;
   filter: alpha(opacity=60);
 }
@@ -2994,6 +2996,9 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .pficon-cpu:before {
   content: "\e905";
 }
+.pficon-degraded:before {
+  content: "\e91b";
+}
 .pficon-delete:before {
   content: "\e611";
 }
@@ -3063,6 +3068,9 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .pficon-project:before {
   content: "\e622";
 }
+.pficon-rebalance:before {
+  content: "\e91c";
+}
 .pficon-refresh:before,
 .pficon-restart:before {
   content: "\e613";
@@ -3602,6 +3610,8 @@ a.disabled {
 }
 .list-view-pf-stacked .list-view-pf-description {
   display: block;
+  -ms-flex: none;
+      flex: none;
 }
 @media (min-width: 992px) {
   .list-view-pf-description {
@@ -3759,6 +3769,42 @@ a.disabled {
   position: relative;
   width: 100%;
 }
+.list-view-pf-dnd .dndDragging.drag-original {
+  display: none;
+}
+.list-view-pf-dnd .dndDragging.drag-original .list-view-pf-dnd-original-items {
+  display: block;
+}
+.list-view-pf-dnd .dndDragging .list-view-pf-dnd-drag-items {
+  display: inline-block;
+}
+.list-view-pf-dnd .dndDragging .list-view-pf-dnd-original-items {
+  display: none;
+}
+.list-view-pf-dnd .dndPlaceholder {
+  background-color: #ededed;
+  padding: 20px 0;
+}
+.list-view-pf-dnd .list-group-item-header {
+  margin-left: -10px;
+}
+.list-view-pf-dnd .list-group-item-header:before {
+  background-image: linear-gradient(to bottom, #0088ce 60%, #fff 0%);
+  background-position: left;
+  background-repeat: repeat-y;
+  background-size: 2px 5px;
+  border: 4px solid #0088ce;
+  border-color: #00659c;
+  content: "";
+  height: 55px;
+  left: 4px;
+  position: absolute;
+  top: 5px;
+  width: 10px;
+}
+.list-view-pf-dnd-drag-items {
+  display: none;
+}
 .login-pf {
   height: 100%;
 }