patternfly-sass 2.3.0 → 2.4.0

data/assets/stylesheets/patternfly/_variables.scss

@@ -17,6 +17,7 @@ $card-pf-border-color:                                              #d1d1d1 !def
 $card-pf-border-top-color:                                          transparent !default;
 $card-pf-container-bg-color:                                        #f5f5f5 !default;
 $card-pf-footer-bg-color:                                           #fafafa !default;
+$donut-font-size-big:                                               30px !default;
 $dropdown-divider-margin:                                           4px 1px !default;
 $dropdown-link-active-border-color:                                 #0076b7 !default;
 $dropdown-link-hover-border-color:                                  #b3d3e7 !default;
@@ -84,6 +85,43 @@ $navbar-pf-navbar-navbar-brand-padding:                             8px 0 7px !d
 $navbar-pf-navbar-navbar-persistent-bg-color:                       #f6f6f6 !default;
 $navbar-pf-navbar-navbar-persistent-border-color:                   #cecdcd !default;
 $pagination-padding-small-vertical:                                 0 !default;
+$pficon-var-add-circle-o:                                           "\e61b" !default;
+$pficon-var-builder-image:                                          "\e800" !default;
+$pficon-var-close:                                                  "\e60b" !default;
+$pficon-var-cluster:                                                "\e620" !default;
+$pficon-var-container-node:                                         "\e621" !default;
+$pficon-var-delete:                                                 "\e611" !default;
+$pficon-var-edit:                                                   "\e60a" !default;
+$pficon-var-error-circle-o:                                         "\e61d" !default;
+$pficon-var-export:                                                 "\e616" !default;
+$pficon-var-folder-close:                                           "\e607" !default;
+$pficon-var-folder-open:                                            "\e606" !default;
+$pficon-var-help:                                                   "\e605" !default;
+$pficon-var-history:                                                "\e617" !default;
+$pficon-var-home:                                                   "\e618" !default;
+$pficon-var-image:                                                  "\e61f" !default;
+$pficon-var-import:                                                 "\e615" !default;
+$pficon-var-info:                                                   "\e604" !default;
+$pficon-var-flag:                                                   "\e603" !default;
+$pficon-var-kubernetes:                                             "\e627" !default;
+$pficon-var-ok:                                                     "\e602" !default;
+$pficon-var-openshift:                                              "\e626" !default;
+$pficon-var-print:                                                  "\e612" !default;
+$pficon-var-project:                                                "\e622" !default;
+$pficon-var-registry:                                               "\e623" !default;
+$pficon-var-replicator:                                             "\e624" !default;
+$pficon-var-restart:                                                "\e613" !default;
+$pficon-var-route:                                                  "\e625" !default;
+$pficon-var-running:                                                "\e614" !default;
+$pficon-var-save:                                                   "\e601" !default;
+$pficon-var-screen:                                                 "\e600" !default;
+$pficon-var-service:                                                "\e61e" !default;
+$pficon-var-settings:                                               "\e610" !default;
+$pficon-var-thumb-tack-o:                                           "\e609" !default;
+$pficon-var-topology:                                               "\e608" !default;
+$pficon-var-user:                                                   "\e60e" !default;
+$pficon-var-users:                                                  "\e60f" !default;
+$pficon-var-warning-triangle-o:                                     "\e61c" !default;
 $panel-default-border-color:                                        #bebdbd !default;
 $sidebar-pf-bg:                                                     #fafafa !default;
 $sidebar-pf-border-color:                                           #d0d0d0 !default;

data/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "patternfly-sass",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "license": "Apache-2.0",
   "homepage": "https://www.patternfly.org",
   "authors": [

data/lib/patternfly-sass/version.rb

@@ -1,4 +1,4 @@
 module Patternfly
-  VERSION = '2.3.0'
-  PATTERNFLY_SHA = 'c3c96f7d25d1c19922f0e9678413cc06446f8669'
+  VERSION = '2.4.0'
+  PATTERNFLY_SHA = 'a72edf01d55ca1484aaa25ca78abd3616fff4f2e'
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "patternfly-sass",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Red Hat's Patternfly, converted to Sass and ready to drop into Rails",
   "repository": {
     "type": "git",

data/spec/html/cards.html

@@ -133,7 +133,7 @@
           </div>
         </div>
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
+          <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>
@@ -146,7 +146,7 @@
           </div>
         </div>
         <div class="col-xs-6 col-sm-4 col-md-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
+          <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>
@@ -195,6 +195,97 @@
         </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-4 col-md-3 col-lg-2">
+          <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
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+          <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="#">
+                <span class="card-pf-aggregate-status-count">20</span> Amet
+              </a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+          <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="#">
+                <span class="card-pf-aggregate-status-count">9</span> Adipiscing
+              </a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+          <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-image"></span>
+              <a href="#">
+                <span class="card-pf-aggregate-status-count">12</span> Lorem
+              </a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+          <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-shield"></span>
+              <a href="#">
+                <span class="card-pf-aggregate-status-count">6</span> Dolar Sit
+              </a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
+              </p>
+            </div>
+            </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+          <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-rocket"></span>
+              <a href="#">
+                <span class="card-pf-aggregate-status-count">199</span> Consectetur
+              </a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>23</span></a>
+              </p>
+            </div>
+          </div>
+        </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-6 col-sm-5 col-md-5">
           <div class="card-pf">
@@ -293,6 +384,7 @@
           </div>
         </div>
       </div><!-- /row -->
+
     </div><!-- /container -->
     <script>
       $(function() {

data/spec/html/charts.html

@@ -65,6 +65,8 @@
       <div id="chart7"></div>
       <h2>Donut Chart</h2>
       <div id="chart8"></div>
+      <h2>Custom Donut Chart</h2>
+      <div id="chart9"></div>
       <script>
         var chart = c3.generate({
           axis: {
@@ -379,6 +381,50 @@
             title: "29,210 Host Totals"
           }
         });
+        var chart9 = c3.generate({
+          bindto: '#chart9',
+          type: "donut",
+          donut: {
+            title: "A",
+            label: {show: false},
+            width: 10
+          },
+          size: {
+            height: 130
+          },
+          legend: {
+            show: false
+          },
+          color: {
+            pattern: ["#EC7A08","#D1D1D1"]
+          },
+          tooltip: {
+            contents: function (d) {
+              return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                      Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
+                      '</span>';
+            }
+          },
+          data: {
+            type: "donut",
+            columns: [
+              ["Used", 60],
+              ["Available", 40]
+            ],
+            groups: [
+              ["used", "available"]
+            ],
+            order: null
+          },
+        });
+
+        $( "#chart9 .c3-chart-arcs-title" ).html(
+                '<tspan dy="0" x="0" class="donut-title-big-pf">' +
+                '60' +
+                '</tspan>' +
+                '<tspan dy="20" x="0" class="donut-title-small-pf">' +
+                'MHz Used' +
+                '</tspan>');
       </script>
     </div><!-- /container -->
   </body>

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

@@ -2157,9 +2157,6 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .treeview span.indent {
   margin-right: 5px;
 }
-.container-cards-pf {
-  margin-top: 20px;
-}
 .card-pf {
   background: #ffffff;
   border-top: 2px solid transparent;
@@ -2185,14 +2182,14 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 }
 .card-pf.card-pf-aggregate-status .card-pf-title a:hover,
 .card-pf.card-pf-aggregate-status .card-pf-aggregate-status-notifications a:hover {
-  color: #0099d3;
+  color: #00618a;
 }
-.card-pf.card-pf-aggregate-status,
-.card-pf.card-pf-status {
+.card-pf.card-pf-aggregate-status {
   padding: 0 10px;
   text-align: center;
 }
-.card-pf.card-pf-status {
+.card-pf.card-pf-aggregate-status-mini {
+  padding-bottom: 10px;
   position: relative;
 }
 @media (min-width: 768px) {
@@ -2208,16 +2205,19 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
   font-size: 24px;
   font-weight: 300;
 }
-.card-pf-aggregate-status-notifications .fa,
-.card-pf-aggregate-status-notifications .pficon {
-  font-size: 18px;
-  margin-right: 7px;
+.card-pf-aggregate-status-mini .card-pf-aggregate-status-notifications {
+  line-height: 1;
 }
 .card-pf-aggregate-status-notifications .card-pf-aggregate-status-notification + .card-pf-aggregate-status-notification {
   border-left: 1px solid #d1d1d1;
   margin-left: 3px;
   padding-left: 10px;
 }
+.card-pf-aggregate-status-notifications .fa,
+.card-pf-aggregate-status-notifications .pficon {
+  font-size: 18px;
+  margin-right: 7px;
+}
 .card-pf-body {
   margin: 20px 0;
   padding: 0 0 20px;
@@ -2226,6 +2226,14 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
   margin-top: 10px;
   padding-bottom: 10px;
 }
+.card-pf-aggregate-status-mini .card-pf-body {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-bottom: 0;
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
 .card-pf-body > *:last-child {
   margin-bottom: 0;
 }
@@ -2260,30 +2268,38 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
   font-size: 16px;
   margin-right: 7px;
 }
-.card-pf-title .card-pf-aggregate-status-count,
-.card-pf-title .card-pf-status-count {
+.card-pf-title .card-pf-aggregate-status-count {
   font-size: 16px;
 }
-.card-pf-status .card-pf-title {
+.card-pf-aggregate-status-mini .card-pf-title .card-pf-aggregate-status-count {
+  display: block;
+  font-size: 24px;
+  font-weight: 300;
+  margin-bottom: 3px;
+}
+.card-pf-aggregate-status-mini .card-pf-title {
   font-size: 12px;
-  margin: 10px 0 0;
-  padding: 0 0 10px;
+  margin-top: 5px;
 }
-.card-pf-status .card-pf-title .fa,
-.card-pf-status .card-pf-title .pficon {
-  color: #333333;
-  font-size: 28px;
-  position: absolute;
-  left: 10px;
-  margin-top: -14px;
-  top: 50%;
+.card-pf-aggregate-status-mini .card-pf-title a {
+  display: inline-block;
 }
-.card-pf-title .card-pf-status-count {
-  display: block;
+.card-pf-aggregate-status-mini .card-pf-title .fa,
+.card-pf-aggregate-status-mini .card-pf-title .pficon {
+  font-size: 26px;
+  margin-right: 0;
+  min-width: 26px;
+  position: absolute;
+  left: 20px;
+  text-align: center;
+  top: 15px;
 }
 .cards-pf {
   background: #f5f5f5;
 }
+.container-cards-pf {
+  margin-top: 20px;
+}
 .row-cards-pf {
   margin-left: -10px;
   margin-right: -10px;
@@ -2345,6 +2361,23 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .c3-ygrid {
   stroke-dasharray: 0 0;
 }
+.donut-title-big-pf {
+  color: #333333;
+  font-size: 30px;
+  font-weight: 300;
+}
+.donut-title-small-pf {
+  color: #333333;
+  font-size: 12px;
+  font-weight: 400;
+}
+.donut-tooltip-pf {
+  background: #434343;
+  color: #ffffff;
+  filter: alpha(opacity=90);
+  opacity: 0.9;
+  padding: 2px 6px;
+}
 .close {
   text-shadow: none;
   opacity: 0.6;
@@ -2599,104 +2632,82 @@ table.datatable th:active {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.pficon-screen:before {
-  content: "\e600";
-}
-.pficon-save:before {
-  content: "\e601";
-}
-.pficon-ok:before {
-  color: #3f9c35;
-  content: "\e602";
-}
-.pficon-messages:before,
-.pficon-flag:before {
-  content: "\e603";
-}
-.pficon-info:before {
-  content: "\e604";
-}
-.pficon-help:before {
-  content: "\e605";
-}
-.pficon-folder-open:before {
-  content: "\e606";
-}
-.pficon-folder-close:before {
-  content: "\e607";
-}
-.pficon-topology:before {
-  content: "\e608";
-}
-.pficon-thumb-tack-o:before {
-  content: "\e609";
+.pficon-add-circle-o:before {
+  content: "\e61b";
 }
-.pficon-edit:before {
-  content: "\e60a";
+.pficon-builder-image:before {
+  content: "\e800";
 }
 .pficon-close:before {
   content: "\e60b";
 }
-.pficon-user:before {
-  content: "\e60e";
+.pficon-cluster:before {
+  content: "\e620";
 }
-.pficon-users:before {
-  content: "\e60f";
+.pficon-container-node:before {
+  content: "\e621";
 }
-.pficon-add-circle-o:before {
-  content: "\e61b";
+.pficon-delete:before {
+  content: "\e611";
 }
-.pficon-warning-triangle-o:before {
-  color: #ec7a08;
-  content: "\e61c";
+.pficon-edit:before {
+  content: "\e60a";
 }
 .pficon-error-circle-o:before {
   color: #cc0000;
   content: "\e61d";
 }
-.pficon-service:before {
-  content: "\e61e";
+.pficon-export:before {
+  content: "\e616";
 }
-.pficon-image:before {
-  content: "\e61f";
+.pficon-flag:before,
+.pficon-messages:before {
+  content: "\e603";
 }
-.pficon-settings:before {
-  content: "\e610";
+.pficon-folder-close:before {
+  content: "\e607";
 }
-.pficon-delete:before {
-  content: "\e611";
+.pficon-folder-open:before {
+  content: "\e606";
 }
-.pficon-print:before {
-  content: "\e612";
+.pficon-help:before {
+  content: "\e605";
 }
-.pficon-refresh:before,
-.pficon-restart:before {
-  content: "\e613";
+.pficon-history:before {
+  content: "\e617";
 }
-.pficon-running:before {
-  content: "\e614";
+.pficon-home:before {
+  content: "\e618";
+}
+.pficon-image:before {
+  content: "\e61f";
 }
 .pficon-import:before {
   content: "\e615";
 }
-.pficon-export:before {
-  content: "\e616";
+.pficon-info:before {
+  content: "\e604";
 }
-.pficon-history:before {
-  content: "\e617";
+.pficon-kubernetes:before {
+  content: "\e627";
 }
-.pficon-home:before {
-  content: "\e618";
+.pficon-ok:before {
+  color: #3f9c35;
+  content: "\e602";
 }
-.pficon-cluster:before {
-  content: "\e620";
+.pficon-openshift:before {
+  content: "\e626";
 }
-.pficon-container-node:before {
-  content: "\e621";
+.pficon-print:before {
+  content: "\e612";
 }
 .pficon-project:before {
   content: "\e622";
 }
+.pficon-refresh:before,
+.pficon-restart:before {
+  content: "\e613";
+}
 .pficon-registry:before {
   content: "\e623";
 }
@@ -2706,11 +2717,36 @@ table.datatable th:active {
 .pficon-route:before {
   content: "\e625";
 }
-.pficon-openshift:before {
-  content: "\e626";
+.pficon-running:before {
+  content: "\e614";
 }
-.pficon-kubernetes:before {
-  content: "\e627";
+.pficon-save:before {
+  content: "\e601";
+}
+.pficon-screen:before {
+  content: "\e600";
+}
+.pficon-service:before {
+  content: "\e61e";
+}
+.pficon-settings:before {
+  content: "\e610";
+}
+.pficon-thumb-tack-o:before {
+  content: "\e609";
+}
+.pficon-topology:before {
+  content: "\e608";
+}
+.pficon-user:before {
+  content: "\e60e";
+}
+.pficon-users:before {
+  content: "\e60f";
+}
+.pficon-warning-triangle-o:before {
+  color: #ec7a08;
+  content: "\e61c";
 }
 .navbar-nav > li > .dropdown-menu.infotip {
   border-top-width: 1px !important;