patternfly-sass 2.5.0 → 2.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1dd5f5f7e4792b9da5f557a71b00e8905116c327
-  data.tar.gz: 986607a3b2893727f83f0469c3272712700c42fe
+  metadata.gz: a8a7c3337ea931e10c3aa8b234c07f3cc104decd
+  data.tar.gz: e2c146468ac17fbaaf6cd68cc33a3c5ecfa9ae80
 SHA512:
-  metadata.gz: 4d48a43f7c51ca83a84ee67f379478c9ab47516125a63dde8787642a5f6a9bcd825e05e45d3f7920dd4c577c779bd6936b11a82ee3d4542658a2593c58b3f34b
-  data.tar.gz: 6196989cfe0b3c4123efb5f2d5f3436353a499563daed3eea5588f04195a4d6e774f032480919a32a10468fef7ed4e705c3ffdf84e4f29d321c18c5a7a3c1085
+  metadata.gz: ef3e02ec5a4e880655a8c8441ab75f32fad156348b1cf016e1df78b4239289c0839de87b97b5c702e1dac81689f156d9dddfd75e5fc9e7bb406bd9565042b5f5
+  data.tar.gz: 4d2901d6ab991d672fdc4556d6649018e5a5aaf6d802083fea273aea196f69a8ddabef8c3b0b0c68f750132f4a3d31540741cf97505ecca36fda54a0d3a9298a

data/README.md

@@ -19,7 +19,7 @@ Please see the appropriate guide for your environment of choice:
 In your Gemfile you need to add the `patternfly-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
 
 ```ruby
-gem 'patternfly-sass', '~> 2.5.0'
+gem 'patternfly-sass', '~> 2.6.0'
 gem 'sass-rails', '>= 3.2'
 ```
 

data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg

@@ -12,8 +12,8 @@
 	"license": "Apache 2.0",
 	"licenseURL": "http://www.apache.org/licenses/LICENSE-2.0.html",
 	"majorVersion": 2,
-	"minorVersion": 4,
-	"version": "Version 2.4",
+	"minorVersion": 6,
+	"version": "Version 2.6",
 	"fontId": "PatternFlyIcons-webfont",
 	"psName": "PatternFlyIcons-webfont",
 	"subFamily": "Regular",
@@ -65,4 +65,6 @@
 <glyph unicode="&#xe626;" glyph-name="openshift" data-tags="openshift" d="M132.915 427.491c2.111-26.34 6.648-52.35 13.028-77.863l156.184 56.879c-5.010 26.372-6.798 53.595-4.758 80.88h-0.032l-68.38-24.883c2.733 35.604 11.422 71.27 27.349 105.488 71.168 152.702 253.306 218.915 405.953 147.74h0.016c34.217-15.959 63.835-37.723 88.812-63.26l68.443 24.915c19.125-19.558 35.17-41.535 48.278-65.032l-145.999-53.153c29.003-51.972 42.709-111.837 38.235-172.032l164.045 59.691c-4.695 58.848-20.385 116.326-46.080 169.196l145.991 53.153c-11.477 23.654-24.726 46.513-40.094 68.049l-68.435-24.907c-45.521 63.882-107.552 117.256-183.54 152.718-234.992 109.584-515.395 7.53-624.931-227.438-35.454-76.036-48.64-156.814-42.457-235.008l68.372 24.867zM837.632 415.352l-0.032-0.032c-2.615-35.604-11.618-71.31-27.585-105.559-71.215-152.694-253.322-218.955-406.008-147.747-34.241 15.967-64.079 37.573-88.986 63.149l-77.525-28.223c-42.094 43.221-70.089 97.957-81.282 156.388l-0.008 0.016-156.207-56.903c14.36-56.942 39.259-111.072 73.46-159.232l77.525 28.231c45.434-63.905 107.386-117.319 183.414-152.812 235.024-109.56 515.348-7.507 624.931 227.486 35.478 76.028 48.585 156.759 42.307 234.906l-164.005-59.668z" />
 <glyph unicode="&#xe627;" glyph-name="kubernetes" data-tags="kubernetes" d="M448.692 513.871c3.104-2.267 6.924-3.597 11.062-3.597 10.105 0 18.334 7.984 18.758 17.984l0.455 0.228 6.328 111.774c-7.553-0.916-15.135-2.193-22.72-3.916-41.522-9.427-77.55-29.896-105.718-57.594l91.649-64.97 0.184 0.091zM399.84 429.414c3.708 1.012 7.162 3.185 9.743 6.42 6.299 7.899 5.186 19.294-2.367 25.86l0.091 0.455-83.683 74.85c-24.836-40.46-36.602-88.989-31.143-138.91l107.267 30.96 0.092 0.364zM481.109 396.541l30.868-14.841 30.777 14.797 7.649 33.236-21.308 26.634h-34.282l-21.353-26.589zM545.122 528.622c0.164-3.841 1.516-7.646 4.097-10.881 6.301-7.899 17.689-9.364 25.77-3.46l0.319-0.138 91.057 64.56c-34.354 33.641-79.186 55.593-127.664 61.556l6.328-111.591 0.092-0.047zM436.4 350.149c-1.968 8.619-9.563 14.497-18.030 14.614-1.21 0.018-2.458-0.091-3.688-0.319l-0.183 0.227-109.998-18.668c16.975-46.968 48.71-85.249 88.554-110.817l42.614 102.987-0.319 0.41c1.523 3.531 1.97 7.531 1.049 11.567zM699.737 536.955l-83.228-74.484 0.045-0.228c-2.898-2.523-5.041-5.936-5.964-9.971-2.244-9.849 3.688-19.67 13.34-22.31l0.091-0.455 107.813-31.052c2.285 23.259 0.897 47.328-4.645 71.436-5.6 24.402-15.016 46.911-27.452 67.065zM609.044 364.899c-1.418 0.262-2.869 0.392-4.326 0.319-2.427-0.123-4.863-0.743-7.194-1.867-9.103-4.383-13.060-15.164-9.106-24.358l-0.136-0.181 43.069-104.034c41.517 26.45 72.591 65.972 88.828 111.591l-110.955 18.758-0.18-0.228zM1022.291 331.069l-87.962 382.079c-4.612 20.031-18.17 36.889-36.835 45.802l-356.037 170.004c-10.272 4.906-21.622 7.177-33.008 6.602-9.052-0.456-17.921-2.7-26.087-6.602l-355.992-170.095c-18.665-8.913-32.222-25.771-36.833-45.802l-87.826-382.081c-4.097-17.784-0.764-36.46 9.242-51.766 1.201-1.853 2.493-3.645 3.871-5.373l246.404-306.366c12.92-16.061 32.509-25.411 53.223-25.405l395.146 0.091c20.707-0.018 40.294 9.317 53.225 25.36l246.313 306.412c12.926 16.067 17.769 37.098 13.157 57.141zM886.862 335.715c-2.595-11.377-14.863-18.292-27.5-15.572-0.091 0.023-0.221 0.026-0.319 0.045-0.143 0.034-0.268 0.102-0.41 0.136-1.761 0.388-3.967 0.771-5.509 1.185-7.286 1.953-12.57 4.865-19.122 7.376-14.098 5.057-25.774 9.283-37.151 10.928-5.777 0.456-8.722-2.301-11.928-4.416-1.556 0.313-6.349 1.16-9.106 1.593-20.417-64.164-63.892-119.722-122.838-154.526 1.018-2.456 2.746-7.68 3.55-8.606-1.346-3.593-3.366-7.035-1.638-12.566 4.137-10.724 10.827-21.207 18.894-33.827 3.907-5.831 7.905-10.31 11.428-16.982 0.844-1.596 1.963-4.051 2.777-5.737 5.48-11.715 1.46-25.208-9.059-30.275-10.6-5.108-23.785 0.287-29.458 12.064-0.812 1.668-1.953 3.887-2.642 5.464-3.018 6.918-4.065 12.841-6.191 19.532-4.838 14.177-8.808 25.912-14.615 35.831-3.246 4.8-7.229 5.414-10.881 6.602-0.674 1.164-3.196 5.791-4.552 8.196-11.769-4.449-23.946-8.153-36.56-11.018-55.284-12.551-110.631-7.462-160.078 11.519l-4.826-8.742c-3.593-0.961-7.057-1.937-9.182-4.473-7.76-9.257-10.859-24.115-16.497-38.279-2.123-6.69-3.128-12.614-6.147-19.532-0.683-1.565-1.83-3.754-2.64-5.418-0.006-0.012 0.006-0.031 0-0.045-0.007-0.018-0.037-0.029-0.045-0.045-5.686-11.739-18.826-17.115-29.411-12.020-10.519 5.066-14.536 18.562-9.061 30.277 0.815 1.688 1.89 4.14 2.733 5.737 3.525 6.674 7.522 11.197 11.428 17.029 8.068 12.62 15.151 23.938 19.286 34.664 1.039 3.564-0.499 8.442-1.894 12.047l3.871 9.289c-56.716 33.609-101.509 87.169-122.883 153.433l-9.288-1.593c-2.49 1.394-7.496 4.697-12.247 4.324-11.375-1.644-23.053-5.87-37.151-10.926-6.554-2.51-11.833-5.379-19.122-7.332-1.54-0.411-3.748-0.841-5.509-1.229-0.14-0.034-0.268-0.102-0.41-0.138-0.094-0.020-0.227-0.023-0.319-0.045-12.635-2.722-24.901 4.194-27.499 15.572-2.598 11.374 5.47 22.919 18.030 25.951 0.094 0.023 0.222 0.069 0.319 0.091 0.063 0.015 0.12 0.034 0.183 0.045 1.786 0.418 4.059 1.012 5.692 1.319 7.414 1.406 13.448 1.059 20.442 1.638 14.896 1.562 27.235 2.832 38.2 6.283 3.476 1.426 6.799 6.207 9.152 9.242l8.923 2.595c-9.999 69.246 6.919 137.204 43.479 192.224l-6.829 6.1c-0.434 2.658-1.006 8.805-4.28 12.292-8.379 7.867-18.944 14.393-31.688 22.263-6.049 3.559-11.595 5.853-17.665 10.335-1.292 0.952-3.012 2.412-4.416 3.55-0.104 0.082-0.215 0.146-0.319 0.228-10.222 8.151-12.572 22.215-5.236 31.415 4.127 5.176 10.433 7.737 16.982 7.512 5.095-0.174 10.37-2.035 14.842-5.6 1.454-1.15 3.436-2.661 4.735-3.779 5.721-4.921 9.209-9.784 14.023-14.887 10.509-10.673 19.194-19.534 28.729-25.953 5.007-2.917 8.853-1.742 12.657-1.229 1.224-0.904 5.341-3.859 7.695-5.464 36.266 38.479 83.901 66.978 139.227 79.54 12.859 2.92 25.73 4.86 38.518 5.919l0.5 9.016c2.836 2.746 6.020 6.697 6.919 11.018 0.927 11.457-0.575 23.783-2.367 38.655-0.989 6.947-2.632 12.718-2.914 20.261-0.057 1.548 0.029 3.688 0.045 5.464-0.004 0.199-0.045 0.392-0.045 0.592-0.001 13.075 9.539 23.673 21.308 23.675s21.305-10.601 21.305-23.675c0.009-1.855 0.111-4.34 0.045-6.056-0.278-7.541-1.922-13.313-2.913-20.261-1.793-14.871-3.338-27.197-2.414-38.655 0.843-5.734 4.194-8 6.968-10.654 0.064-1.545 0.313-6.675 0.5-9.514 67.749-6.018 130.668-37 176.881-85.459l8.103 5.783c2.747-0.162 8.799-0.995 12.932 1.412 9.536 6.42 18.223 15.323 28.729 25.996 4.814 5.105 8.349 9.966 14.068 14.889 1.306 1.123 3.28 2.626 4.734 3.779 10.221 8.154 24.441 7.286 31.781-1.912 7.339-9.2 4.985-23.262-5.236-31.415-1.439-1.16-3.316-2.766-4.69-3.779-6.069-4.482-11.662-6.776-17.711-10.335-12.741-7.87-23.308-14.396-31.687-22.263-3.958-4.235-3.66-8.242-4.007-12.066-1.181-1.085-5.35-4.778-7.557-6.785 18.368-27.336 32.138-58.364 39.929-92.287 7.719-33.612 8.925-67.204 4.462-99.482l8.606-2.504c1.548-2.188 4.725-7.507 9.197-9.242 10.963-3.451 23.302-4.722 38.198-6.283 6.994-0.579 13.030-0.233 20.443-1.638 1.776-0.335 4.364-1.042 6.191-1.457 12.553-3.028 20.618-14.574 18.022-25.948zM528.504 309.764c-1.812 3.391-4.693 6.217-8.423 8.014-2.844 1.372-5.837 1.975-8.786 1.865-6.488-0.238-12.645-3.859-15.89-9.924h-0.091l-54.089-97.798c37.433-12.755 78.773-15.607 120.241-6.191 7.402 1.681 14.636 3.695 21.671 6.055l-54.224 97.981h-0.41z" />
 <glyph unicode="&#xe800;" glyph-name="builder-image" data-tags="builder-image" d="M937.223 712.023c-8.066 11.57-18.759 19.803-32.080 24.715l-370.203 134.624c-7.399 2.683-14.802 4.073-22.192 4.185v0.009c-0.192 0.005-0.386 0.011-0.578 0.011-0.062 0-0.123-0.005-0.185-0.005s-0.123 0.005-0.185 0.005c-0.192 0-0.386-0.007-0.578-0.011v-0.009c-7.392-0.11-14.793-1.499-22.192-4.185l-370.201-134.624c-13.321-4.912-24.014-13.145-32.080-24.715-8.059-11.568-12.096-24.37-12.096-38.386v-403.854c0-12.265 3.157-23.666 9.465-34.171 6.311-10.523 14.905-18.761 25.767-24.718l370.203-201.927c9.547-5.456 19.931-8.238 31.136-8.389v-0.011c0.197-0.005 0.386-0.018 0.583-0.018 0.059 0 0.119 0.007 0.181 0.007 0.059 0 0.119-0.007 0.181-0.007 0.197 0 0.386 0.014 0.583 0.018v0.011c11.205 0.149 21.584 2.933 31.136 8.389l370.203 201.927c10.864 5.957 19.458 14.199 25.767 24.718 6.309 10.512 9.465 21.906 9.465 34.176v403.849c-0.002 14.016-4.037 26.818-12.098 38.386zM141.961 604.224l128.549-46.448-128.549-44.254v90.702zM141.961 385.001l97.691-43.554-97.691-33.63v77.184zM462.080 109.714l-276.43 149.648 138.069 44.608 138.361-61.685v-132.571zM462.080 346.206c0 0-201.586 80.112-284.823 113.047l187.387 64.51 97.435-35.205v-142.352zM511.986 541.186v0 0 0 0zM513.76 554.912l-0.752 0.274-0.103-0.037v0.002l0.101 0.037-326.11 119.23 326.857 121.815 327.893-121.456-327.886-119.865zM659.326 523.762l187.387-64.51c-83.237-32.939-284.823-113.047-284.823-113.047v142.352l97.435 35.205zM561.89 109.714v132.571l138.359 61.682 138.071-44.615-276.43-149.639zM882.009 307.817l-97.691 33.63 97.691 43.554v-77.184zM882.009 513.522l-128.549 44.254 128.549 46.448v-90.702z" />
+<glyph unicode="&#xe900;" glyph-name="trend-down" data-tags="trend-down" d="M1024 130.235v405.353c-0.311 14.638-6.224 29.271-16.809 39.858-10.587 10.585-24.907 16.187-39.541 16.498l-46.699 0.002c-14.946 0-29.573-5.915-40.162-16.503-10.585-10.585-16.503-25.221-16.187-39.856l-0.315-182.281-331.95 331.952c-7.767 7.767-19.719 7.767-27.488 0l-139.253-139.255-248.624 248.617-114.75-114.743 349.625-349.63c7.771-7.769 19.723-7.769 27.493 0l133.55 133.55 231.847-230.51-182.75-0.313c-14.638 0.313-29.271-5.605-39.856-16.19-10.585-10.587-16.501-25.221-16.19-39.856v-46.697c0-14.942 5.605-29.266 16.19-39.851 10.585-10.587 25.216-16.503 40.16-16.503h405.353c14.185-0.304 28.066 5.554 38.546 15.554 4.011 2.238 7.065 5.874 8.581 10.306 5.904 9.035 9.23 19.598 9.23 30.496z" />
+<glyph unicode="&#xe901;" glyph-name="trend-up" data-tags="trend-up" d="M1014.775 778.658c-1.515 4.432-4.569 8.071-8.581 10.306-10.48 10-24.361 15.858-38.546 15.554l-405.353-0.002c-14.944 0-29.575-5.915-40.16-16.501s-16.19-24.907-16.19-39.851v-46.697c-0.311-14.633 5.605-29.266 16.19-39.854 10.585-10.585 25.216-16.501 39.854-16.19l182.75-0.311-231.847-230.51-133.55 133.55c-7.769 7.769-19.721 7.769-27.493 0l-349.625-349.63 114.75-114.745 248.624 248.619 139.253-139.255c7.769-7.767 19.721-7.767 27.49 0l331.947 331.95 0.313-182.281c-0.313-14.633 5.605-29.269 16.19-39.854 10.587-10.587 25.216-16.503 40.162-16.503l46.699 0.002c14.631 0.311 28.953 5.913 39.538 16.498 10.587 10.587 16.501 25.218 16.811 39.856v405.355c0 10.898-3.326 21.461-9.227 30.491z" />
 </font></defs></svg>

data/assets/stylesheets/patternfly/_charts.scss

@@ -23,7 +23,7 @@
   stroke: #fff;
 }
 
-.c3-grid line { 
+.c3-grid line {
   stroke: $table-border-color;
 }
 
@@ -39,7 +39,7 @@
   td {
     background: transparent;
     border: 0;
-    color: #fff;
+    color: $tooltip-color;
     font-size: $font-size-base;
     padding: 5px 10px;
   }
@@ -58,9 +58,10 @@
   }
 }
 
-.c3-tooltip-sparkline {
+.c3-tooltip-sparkline,
+.donut-tooltip-pf {
   background: $tooltip-bg;
-  color: #fff;
+  color: $tooltip-color;
   @include opacity($tooltip-opacity);
   padding: 2px 6px;
 }
@@ -69,22 +70,17 @@
   stroke-dasharray: 0 0;
 }
 
+.chart-pf-sparkline {
+  margin-left: -5px;
+  margin-right: -5px;
+}
+
 .donut-title-big-pf {
-  color: $gray-dark;
   font-size: $donut-font-size-big;
   font-weight: 300;
 }
 
 .donut-title-small-pf {
-  color: $gray-dark;
   font-size: $font-size-base;
   font-weight: 400;
 }
-
-.donut-tooltip-pf {
-  background: $tooltip-bg;
-  color: $tooltip-color;
-  filter: alpha(opacity=90);
-  opacity: 0.9;
-  padding: 2px 6px;
-}

data/assets/stylesheets/patternfly/_ext-bootstrap-select.scss

@@ -1,10 +1,10 @@
-/*!
- * Bootstrap-select v1.7.5 (http://silviomoreto.github.io/bootstrap-select)
- *
- * Copyright 2013-2015 bootstrap-select
- * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
- */
-
+/*!
+ * Bootstrap-select v1.7.5 (http://silviomoreto.github.io/bootstrap-select)
+ *
+ * Copyright 2013-2015 bootstrap-select
+ * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
+ */
+
 .bootstrap-select {
   width: 220px \0;
   /*IE9 and below*/

data/assets/stylesheets/patternfly/_icons.scss

@@ -134,6 +134,12 @@
 .#{$icon-prefix}-topology:before {
   content: $pficon-var-topology;
 }
+.#{$icon-prefix}-trend-down:before {
+  content: $pficon-var-trend-down;
+}
+.#{$icon-prefix}-trend-up:before {
+  content: $pficon-var-trend-up;
+}
 .#{$icon-prefix}-user:before {
   content: $pficon-var-user;
 }

data/assets/stylesheets/patternfly/_variables.scss

@@ -124,6 +124,8 @@ $pficon-var-service:                                                "\e61e" !def
 $pficon-var-settings:                                               "\e610" !default;
 $pficon-var-thumb-tack-o:                                           "\e609" !default;
 $pficon-var-topology:                                               "\e608" !default;
+$pficon-var-trend-down:                                             "\e900" !default;
+$pficon-var-trend-up:                                               "\e901" !default;
 $pficon-var-user:                                                   "\e60e" !default;
 $pficon-var-users:                                                  "\e60f" !default;
 $pficon-var-warning-triangle-o:                                     "\e61c" !default;

data/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "patternfly-sass",
-  "version": "2.5.0",
+  "version": "2.6.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.5.0'
-  PATTERNFLY_SHA = 'acec07a43c11d578f7f0b21671788b378d465158'
+  VERSION = '2.6.0'
+  PATTERNFLY_SHA = '7e7a51f989d2b8fb18a84807a4d2bac7282f7656'
 end

data/package.json

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

data/spec/html/cards.html

@@ -487,7 +487,7 @@
                     </span>
                   </p>
                   <div id="chart-pf-donut"></div>
-                  <div id="chart-pf-sparkline"></div>
+                  <div class="chart-pf-sparkline" id="chart-pf-sparkline"></div>
                   <script>
                     var chart1 = c3.generate({
                       bindto: '#chart-pf-donut',
@@ -525,14 +525,12 @@
                         order: null
                       },
                     });
-                    $( "#chart-pf-donut .c3-chart-arcs-title" ).html(
-                      '<tspan dy="0" x="0" class="donut-title-big-pf">' +
-                      '950' +
-                      '</tspan>' +
-                      '<tspan dy="20" x="0" class="donut-title-small-pf">' +
-                      'MHz Used' +
-                      '</tspan>'
-                    );
+
+                    var donutChartTitle = d3.select("#chart-pf-donut").select('text.c3-chart-arcs-title');
+                    donutChartTitle.text("");
+                    donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+                    donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
                     var chart2 = c3.generate({
                       axis: {
                         x: {
@@ -548,7 +546,7 @@
                       },
                       data: {
                         columns: [
-                          ['Less than one year remaining', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
+                          ['Last 30 days', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
                         ],
                         type: 'area'
                       },
@@ -587,7 +585,7 @@
                     </span>
                   </p>
                   <div id="chart-pf-donut-2"></div>
-                  <div id="chart-pf-sparkline-2"></div>
+                  <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
                   <script>
                     var chart3 = c3.generate({
                       bindto: '#chart-pf-donut-2',
@@ -609,7 +607,7 @@
                       tooltip: {
                         contents: function (d) {
                           return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-                                  Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
+                                  Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
                                   '</span>';
                         }
                       },
@@ -625,14 +623,12 @@
                         order: null
                       },
                     });
-                    $( "#chart-pf-donut-2 .c3-chart-arcs-title" ).html(
-                      '<tspan dy="0" x="0" class="donut-title-big-pf">' +
-                      '176' +
-                      '</tspan>' +
-                      '<tspan dy="20" x="0" class="donut-title-small-pf">' +
-                      'GB Used' +
-                      '</tspan>'
-                    );
+
+                    var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
+                    donutChartTitle.text("");
+                    donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+                    donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
                     var chart4 = c3.generate({
                       axis: {
                         x: {
@@ -648,7 +644,7 @@
                       },
                       data: {
                         columns: [
-                          ['Less than one year remaining', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
+                          ['Last 30 days', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
                         ],
                         type: 'area'
                       },
@@ -683,11 +679,11 @@
                     <span class="card-pf-utilization-card-details-count">200</span>
                     <span class="card-pf-utilization-card-details-description">
                       <span class="card-pf-utilization-card-details-line-1">Available</span>
-                      <span class="card-pf-utilization-card-details-line-2">of 1300 Gpbs</span>
+                      <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
                     </span>
                   </p>
                   <div id="chart-pf-donut-3"></div>
-                  <div id="chart-pf-sparkline-3"></div>
+                  <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
                   <script>
                     var chart5 = c3.generate({
                       bindto: '#chart-pf-donut-3',
@@ -709,7 +705,7 @@
                       tooltip: {
                         contents: function (d) {
                           return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-                                  Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
+                                  Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
                                   '</span>';
                         }
                       },
@@ -725,14 +721,12 @@
                         order: null
                       },
                     });
-                    $( "#chart-pf-donut-3 .c3-chart-arcs-title" ).html(
-                      '<tspan dy="0" x="0" class="donut-title-big-pf">' +
-                      '1100' +
-                      '</tspan>' +
-                      '<tspan dy="20" x="0" class="donut-title-small-pf">' +
-                      'Gpbs Used' +
-                      '</tspan>'
-                    );
+
+                    var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
+                    donutChartTitle.text("");
+                    donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+                    donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
                     var chart6 = c3.generate({
                       axis: {
                         x: {
@@ -748,7 +742,7 @@
                       },
                       data: {
                         columns: [
-                          ['Less than one year remaining', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
+                          ['Last 30 days', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
                         ],
                         type: 'area'
                       },
@@ -794,11 +788,11 @@
                 <span class="card-pf-utilization-card-details-count">200</span>
                 <span class="card-pf-utilization-card-details-description">
                   <span class="card-pf-utilization-card-details-line-1">Available</span>
-                  <span class="card-pf-utilization-card-details-line-2">of 1300 Gpbs</span>
+                  <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
                 </span>
               </p>
               <div id="chart-pf-donut-4"></div>
-              <div id="chart-pf-sparkline-4"></div>
+              <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
               <script>
                 var chart7 = c3.generate({
                   bindto: '#chart-pf-donut-4',
@@ -820,7 +814,7 @@
                   tooltip: {
                     contents: function (d) {
                       return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-                              Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
+                              Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
                               '</span>';
                     }
                   },
@@ -836,14 +830,12 @@
                     order: null
                   },
                 });
-                $( "#chart-pf-donut-4 .c3-chart-arcs-title" ).html(
-                  '<tspan dy="0" x="0" class="donut-title-big-pf">' +
-                  '1100' +
-                  '</tspan>' +
-                  '<tspan dy="20" x="0" class="donut-title-small-pf">' +
-                  'Gpbs Used' +
-                  '</tspan>'
-                );
+
+                var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
+                donutChartTitle.text("");
+                donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+                donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
                 var chart8 = c3.generate({
                   axis: {
                     x: {
@@ -859,7 +851,7 @@
                   },
                   data: {
                     columns: [
-                      ['Less than one year remaining', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
+                      ['Last 30 days', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
                     ],
                     type: 'area'
                   },
@@ -944,14 +936,14 @@
       <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-5 col-md-5">
-          <div class="card-pf" style="height: 180px;">
-            <h2 class="card-pf-title" style="height: 17px;">
+          <div class="card-pf">
+            <h2 class="card-pf-title">
               Card Title
             </h2>
-            <div class="card-pf-body" style="height: 40px;">
+            <div class="card-pf-body">
               <p>[card contents]</p>
             </div>
-            <div class="card-pf-footer" style="">
+            <div class="card-pf-footer">
               <div class="dropdown card-pf-time-frame-filter">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                   Last 30 Days <span class="caret"></span>
@@ -970,11 +962,11 @@
           </div>
         </div>
         <div class="col-xs-12 col-sm-7 col-md-7">
-          <div class="card-pf" style="height: 180px;">
-            <h2 class="card-pf-title" style="height: 17px;">
+          <div class="card-pf">
+            <h2 class="card-pf-title">
               Card Title
             </h2>
-            <div class="card-pf-body" style="height: 40px;">
+            <div class="card-pf-body">
               <p>[card contents]</p>
             </div>
           </div>

data/spec/html/charts.html

@@ -48,9 +48,8 @@
       <h2>Sparkline</h2>
       <div class="row">
         <div class="col-md-4">
-          <div id="chart2"></div>
-          <div class="pull-right">91%</div>
-          <div class="pull-left">Less than one year remaining</div>
+          <div class="chart-pf-sparkline" id="chart2"></div>
+          <div>Less than one year remaining</div>
         </div>
       </div>
       <h2>Spline Chart</h2>
@@ -417,14 +416,11 @@
             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>'
-        );
+
+        var donutChartTitle = d3.select("#chart9").select('text.c3-chart-arcs-title');
+        donutChartTitle.text("");
+        donutChartTitle.insert('tspan').text("60").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+        donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
       </script>
 
     </div><!-- /container -->

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

@@ -2404,7 +2404,7 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .c3-tooltip td {
   background: transparent;
   border: 0;
-  color: #fff;
+  color: #ffffff;
   font-size: 12px;
   padding: 5px 10px;
 }
@@ -2419,9 +2419,10 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .c3-tooltip tr + tr > td {
   padding-top: 0;
 }
-.c3-tooltip-sparkline {
+.c3-tooltip-sparkline,
+.donut-tooltip-pf {
   background: #434343;
-  color: #fff;
+  color: #ffffff;
   opacity: 0.9;
   filter: alpha(opacity=90);
   padding: 2px 6px;
@@ -2430,23 +2431,18 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .c3-ygrid {
   stroke-dasharray: 0 0;
 }
+.chart-pf-sparkline {
+  margin-left: -5px;
+  margin-right: -5px;
+}
 .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;
@@ -2807,6 +2803,12 @@ table.datatable th:active {
 .pficon-topology:before {
   content: "\e608";
 }
+.pficon-trend-down:before {
+  content: "\e900";
+}
+.pficon-trend-up:before {
+  content: "\e901";
+}
 .pficon-user:before {
   content: "\e60e";
 }