patternfly-sass 3.17.0 → 3.20.0

data/spec/html/pagination.html

@@ -28,6 +28,7 @@
       <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/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
     <script src="../../dist/js/patternfly.min.js"></script>
   </head>
 
@@ -278,6 +279,42 @@
           </a>
         </li>
       </ul>
+      <hr>
+      <h2>Pagination row for card, list, and table views</h2>
+      <p>The following control can be seen in these examples:</p>
+      <ul>
+        <li><a href="pagination-card-view.html">Card View</a></li>
+        <li><a href="pagination-list-view.html">List View</a></li>
+        <li><a href="pagination-table-view.html">Table View</a></li>
+      </ul>
+      <form class="content-view-pf-pagination  clearfix" id="">
+  <div class="form-group">
+    <select class="selectpicker pagination-pf-pagesize">
+      <option value="6">6</option>
+      <option value="10" >10</option>
+      <option value="15" >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="-page" class="sr-only">Current Page</label>
+    <input class="pagination-pf-page" type="text" value="1" id="-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>
+
+
     </div><!-- /container -->
   </body>
 </html>

data/spec/html/tab.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>
@@ -258,6 +262,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">
@@ -392,6 +423,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
@@ -443,6 +708,7 @@ $("#table1").DataTable({
   order: [[ 1, 'asc' ]],
   pfConfig: {
     emptyStateSelector: "#emptyState1",
+    filterCaseInsensitive: true,
     filterCols: [
       null,
       {
@@ -463,6 +729,7 @@ $("#table1").DataTable({
         placeholder: "Filter By CSS Grade..."
       }
     ],
+    paginationSelector: "#pagination1",
     toolbarSelector: "#toolbar1",
     selectAllSelector: 'th:first-child input[type="checkbox"]'
   },

data/spec/html/table-view-navbar.html

@@ -30,8 +30,10 @@
     <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.pfPagination.js"></script>
     <script src="../../dist/js/patternfly.dataTables.pfResize.js"></script>
     <script src="../../dist/js/patternfly.dataTables.pfSelect.js"></script>
     <script src="../../dist/js/patternfly.min.js"></script>
@@ -130,6 +132,9 @@
           <li>
             <a href="cards.html">Cards</a>
           </li>
+          <li>
+            <a href="pagination-card-view.html">Pagination - Card View</a>
+          </li>
         </ul>
       </div>
     </nav>
@@ -248,6 +253,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">
@@ -383,6 +415,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
@@ -434,6 +700,7 @@ $("#table1").DataTable({
   order: [[ 1, 'asc' ]],
   pfConfig: {
     emptyStateSelector: "#emptyState1",
+    filterCaseInsensitive: true,
     filterCols: [
       null,
       {
@@ -454,6 +721,7 @@ $("#table1").DataTable({
         placeholder: "Filter By CSS Grade..."
       }
     ],
+    paginationSelector: "#pagination1",
     toolbarSelector: "#toolbar1",
     selectAllSelector: 'th:first-child input[type="checkbox"]'
   },