patternfly-sass 3.3.4 → 3.3.5

data/spec/html/layout-alt-fixed-with-footer.html

@@ -174,8 +174,7 @@
       <div class="row row-cards-pf">
       <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
   </h2>
@@ -188,8 +187,7 @@
 
         </div>
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
   </h2>
@@ -203,8 +201,7 @@
 
         </div>
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
   </h2>
@@ -256,8 +253,7 @@
       <div class="row row-cards-pf">
       <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="fa fa-rebel"></span>
     <span class="card-pf-aggregate-status-count">0</span> Ipsum
@@ -271,8 +267,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="fa fa-paper-plane"></span>
     <a href="#">
@@ -288,8 +283,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="pficon pficon-cluster"></span>
     <a href="#">
@@ -352,8 +346,7 @@
       </div>
       <div class="row row-cards-pf">
         <div class="col-xs-12 col-sm-6 col-md-4">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <div class="card-pf-heading">
     <h2 class="card-pf-title">
       Top Utilized Clusters
@@ -409,8 +402,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-6 col-md-4">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <div class="card-pf-heading">
     <h2 class="card-pf-title">
       Quotas
@@ -532,9 +524,9 @@
         </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
+        <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-md-12">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-utilization">
+<div class="card-pf card-pf-utilization">
   <div class="card-pf-heading">
     <p class="card-pf-heading-details">Last 30 days</p>
     <h2 class="card-pf-title">
@@ -710,8 +702,7 @@
       </div><!-- /row -->
       <div class="row row-cards-pf">
         <div class="col-xs-12 col-sm-4 col-md-4">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-utilization">
+<div class="card-pf card-pf-utilization">
   <h2 class="card-pf-title">
     Network
   </h2>
@@ -775,10 +766,8 @@
         </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
-      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-12 col-sm-6 col-md-5">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <div class="card-pf-heading">
     <div class="dropdown card-pf-time-frame-filter">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@@ -800,8 +789,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-6 col-md-7">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <h2 class="card-pf-title">
     Card Title
   </h2>

data/spec/html/layout-alt-fixed.html

@@ -174,8 +174,7 @@
       <div class="row row-cards-pf">
       <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
   </h2>
@@ -188,8 +187,7 @@
 
         </div>
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
   </h2>
@@ -203,8 +201,7 @@
 
         </div>
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
   </h2>
@@ -256,8 +253,7 @@
       <div class="row row-cards-pf">
       <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="fa fa-rebel"></span>
     <span class="card-pf-aggregate-status-count">0</span> Ipsum
@@ -271,8 +267,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="fa fa-paper-plane"></span>
     <a href="#">
@@ -288,8 +283,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="pficon pficon-cluster"></span>
     <a href="#">
@@ -352,8 +346,7 @@
       </div>
       <div class="row row-cards-pf">
         <div class="col-xs-12 col-sm-6 col-md-4">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <div class="card-pf-heading">
     <h2 class="card-pf-title">
       Top Utilized Clusters
@@ -409,8 +402,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-6 col-md-4">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <div class="card-pf-heading">
     <h2 class="card-pf-title">
       Quotas
@@ -532,9 +524,9 @@
         </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
+        <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-md-12">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-utilization">
+<div class="card-pf card-pf-utilization">
   <div class="card-pf-heading">
     <p class="card-pf-heading-details">Last 30 days</p>
     <h2 class="card-pf-title">
@@ -710,8 +702,7 @@
       </div><!-- /row -->
       <div class="row row-cards-pf">
         <div class="col-xs-12 col-sm-4 col-md-4">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf card-pf-utilization">
+<div class="card-pf card-pf-utilization">
   <h2 class="card-pf-title">
     Network
   </h2>
@@ -775,10 +766,8 @@
         </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
-      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-12 col-sm-6 col-md-5">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <div class="card-pf-heading">
     <div class="dropdown card-pf-time-frame-filter">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@@ -800,8 +789,7 @@
 
         </div>
         <div class="col-xs-12 col-sm-6 col-md-7">
-          <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-          <div class="card-pf">
+<div class="card-pf">
   <h2 class="card-pf-title">
     Card Title
   </h2>

data/spec/html/list-view.html

@@ -146,16 +146,16 @@
         </div>
         <div class="list-view-pf-additional-info">
           <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="chart1"></span>
+              <span id="donut-chart-1"></span>
           </div>
           <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="chart2"></span>
+              <span id="donut-chart-2"></span>
           </div>
           <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="chart3"></span>
+              <span id="donut-chart-3"></span>
           </div>
           <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="chart4"></span>
+              <span id="donut-chart-4"></span>
           </div>
         </div>
       </div>
@@ -168,7 +168,7 @@
   var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
   customDonutChartConfig.size.height = 71;
   customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#chart1';
+  customDonutChartConfig.bindto = '#donut-chart-1';
   customDonutChartConfig.data = {
     type: "donut",
     columns: [
@@ -181,14 +181,14 @@
     order: null
   };
   c3.generate(customDonutChartConfig);
-  var donutChartTitle = d3.select("#chart1").select('text.c3-chart-arcs-title');
+  var donutChartTitle = d3.select("#donut-chart-1").select('text.c3-chart-arcs-title');
   donutChartTitle.text("");
   donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
 
   customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
   customDonutChartConfig.size.height = 71;
   customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#chart2';
+  customDonutChartConfig.bindto = '#donut-chart-2';
   customDonutChartConfig.data = {
     type: "donut",
     columns: [
@@ -201,14 +201,14 @@
     order: null
   };
   c3.generate(customDonutChartConfig);
-  donutChartTitle = d3.select("#chart2").select('text.c3-chart-arcs-title');
+  donutChartTitle = d3.select("#donut-chart-2").select('text.c3-chart-arcs-title');
   donutChartTitle.text("");
   donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
 
   customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
   customDonutChartConfig.size.height = 71;
   customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#chart3';
+  customDonutChartConfig.bindto = '#donut-chart-3';
   customDonutChartConfig.data = {
     type: "donut",
     columns: [
@@ -221,14 +221,14 @@
     order: null
   };
   c3.generate(customDonutChartConfig);
-  donutChartTitle = d3.select("#chart3").select('text.c3-chart-arcs-title');
+  donutChartTitle = d3.select("#donut-chart-3").select('text.c3-chart-arcs-title');
   donutChartTitle.text("");
   donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
 
   customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
   customDonutChartConfig.size.height = 71;
   customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#chart4';
+  customDonutChartConfig.bindto = '#donut-chart-4';
   customDonutChartConfig.data = {
     type: "donut",
     columns: [
@@ -241,7 +241,7 @@
     order: null
   };
   c3.generate(customDonutChartConfig);
-  donutChartTitle = d3.select("#chart4").select('text.c3-chart-arcs-title');
+  donutChartTitle = d3.select("#donut-chart-4").select('text.c3-chart-arcs-title');
   donutChartTitle.text("");
   donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
 </script>

data/spec/html/login.html

@@ -38,51 +38,52 @@
   </div>
 
   <body>
-    <span id="badge">
-      <img src="../dist/img/logo.svg" alt="PatternFly logo" />
-    </span>
-    <div class="container">
-      <div class="row">
-        <div class="col-sm-12">
-          <div id="brand">
-            <img src="../dist/img/brand.svg" alt="PatternFly Enterprise Application">
-          </div><!--/#brand-->
-        </div><!--/.col-*-->
-        <div class="col-sm-7 col-md-6 col-lg-5 login">
-          <form class="form-horizontal" role="form">
-            <div class="form-group">
-              <label for="inputUsername" class="col-sm-2 col-md-2 control-label">Username</label>
-              <div class="col-sm-10 col-md-10">
-                <input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1">
-              </div>
+<span id="badge">
+  <img src="../dist/img/logo.svg" alt="PatternFly logo" />
+</span>
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12">
+      <div id="brand">
+        <img src="../dist/img/brand.svg" alt="PatternFly Enterprise Application">
+      </div><!--/#brand-->
+    </div><!--/.col-*-->
+    <div class="col-sm-7 col-md-6 col-lg-5 login">
+      <form class="form-horizontal" role="form">
+        <div class="form-group">
+          <label for="inputUsername" class="col-sm-2 col-md-2 control-label">Username</label>
+          <div class="col-sm-10 col-md-10">
+            <input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1">
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="inputPassword" class="col-sm-2 col-md-2 control-label">Password</label>
+          <div class="col-sm-10 col-md-10">
+            <input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2">
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6">
+            <div class="checkbox">
+              <label>
+                <input type="checkbox" tabindex="3"> Remember username
+              </label>
             </div>
-            <div class="form-group">
-              <label for="inputPassword" class="col-sm-2 col-md-2 control-label">Password</label>
-              <div class="col-sm-10 col-md-10">
-                <input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2">
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6">
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" tabindex="3"> Remember username
-                  </label>
-                </div>
-                <span class="help-block"> Forgot <a href="#" tabindex="5">username</a> or <a href="#" tabindex="6">password</a>?</span>
-              </div>
-              <div class="col-xs-4 col-sm-4 col-md-4 submit">
-                <button type="submit" class="btn btn-primary btn-lg" tabindex="4">Log In</button>
-              </div>
-            </div>
-          </form>
-        </div><!--/.col-*-->
-        <div class="col-sm-5 col-md-6 col-lg-7 details">
-          <p><strong>Welcome to PatternFly!</strong>
-          This is placeholder text, only. Use this area to place any information or introductory message about your application that may be relevant for users. For example, you might include news or information about the latest release of your product here&mdash;such as a version number.</p>
-        </div><!--/.col-*-->
-      </div><!--/.row-->
-    </div><!--/.container-->
+            <span class="help-block"> Forgot <a href="#" tabindex="5">username</a> or <a href="#" tabindex="6">password</a>?</span>
+          </div>
+          <div class="col-xs-4 col-sm-4 col-md-4 submit">
+            <button type="submit" class="btn btn-primary btn-lg" tabindex="4">Log In</button>
+          </div>
+        </div>
+      </form>
+    </div><!--/.col-*-->
+    <div class="col-sm-5 col-md-6 col-lg-7 details">
+      <p><strong>Welcome to PatternFly!</strong>
+        This is placeholder text, only. Use this area to place any information or introductory message about your application that may be relevant for users. For example, you might include news or information about the latest release of your product here&mdash;such as a version number.</p>
+    </div><!--/.col-*-->
+  </div><!--/.row-->
+</div><!--/.container-->
+
 
   </body>
 </html>

data/spec/html/pie-charts.html

@@ -148,7 +148,7 @@
     position: 'right'
   };
   pieChartSmallConfig.size = {
-    width: 250,
+    width: 260,
     height: 115
   };
 

data/spec/html/popovers.html

@@ -95,19 +95,20 @@
       </div>
       <hr>
       <form class="form-horizontal">
-        <div class="form-group">
-          <label class="col-sm-2 control-label" for="textInput">Default <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="fa fa-info-circle"></span></a></label>
-          <div class="col-sm-10">
-            <input type="text" id="textInput" class="form-control">
-          </div>
-        </div>
-      </form>
-      <script>
-        // Initialize Popovers
-        $(document).ready(function() {
-          $('[data-toggle=popover]').popovers()
-        });
-      </script>
+  <div class="form-group">
+    <label class="col-sm-3 control-label" for="fieldlevelhelp">Default <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="fa fa-info-circle"></span></a></label>
+    <div class="col-sm-9">
+      <input type="text" id="fieldlevelhelp" class="form-control">
+    </div>
+  </div>
+</form>
+<script>
+  // Initialize Popovers
+  $(document).ready(function() {
+    $('[data-toggle=popover]').popovers()
+  });
+</script>
+
 
     </div><!-- /container -->
   </body>