patternfly-sass 3.3.4 → 3.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/assets/images/patternfly/OpenShift-Logo-NoText.svg +51 -0
  3. data/assets/images/patternfly/OpenShift-Logo-Text.svg +95 -0
  4. data/assets/images/patternfly/RH_Atomic-Logo-NoText.svg +53 -0
  5. data/assets/images/patternfly/RH_Atomic-Logo-Text.svg +91 -0
  6. data/assets/images/patternfly/kubernetes-Logo.svg +60 -0
  7. data/assets/stylesheets/patternfly/_datatables.scss +0 -2
  8. data/assets/stylesheets/patternfly/_mixin_overrides.scss +1 -1
  9. data/assets/stylesheets/patternfly/_mixins.scss +1 -1
  10. data/assets/stylesheets/patternfly/lib/bootstrap-select.scss +1 -1
  11. data/bower.json +1 -1
  12. data/lib/patternfly-sass/version.rb +2 -2
  13. data/spec/html/alerts.html +49 -41
  14. data/spec/html/basic.html +1 -0
  15. data/spec/html/blank-slate.html +2 -2
  16. data/spec/html/bootstrap-datepicker.html +33 -5
  17. data/spec/html/bootstrap-treeview-2.html +1 -0
  18. data/spec/html/cards.html +22 -31
  19. data/spec/html/dashboard.html +1 -0
  20. data/spec/html/dist/css/patternfly-additions.css +0 -2
  21. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  22. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  23. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  24. data/spec/html/form.html +1 -0
  25. data/spec/html/layout-alt-fixed-inner-scroll.html +13 -25
  26. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +13 -25
  27. data/spec/html/layout-alt-fixed-with-footer.html +13 -25
  28. data/spec/html/layout-alt-fixed.html +13 -25
  29. data/spec/html/list-view.html +12 -12
  30. data/spec/html/login.html +45 -44
  31. data/spec/html/pie-charts.html +1 -1
  32. data/spec/html/popovers.html +14 -13
  33. data/spec/html/tab.html +1 -0
  34. data/spec/html/time-picker.html +19 -17
  35. data/spec/html/toast.html +44 -40
  36. data/spec/html/typography-2.html +1 -0
  37. data/spec/html/vertical-navigation-without-icons.html +236 -228
  38. data/spec/html/vertical-navigation.html +236 -228
  39. data/tasks/converter.rb +5 -0
  40. metadata +7 -2
data/spec/html/vertical-navigation.html CHANGED
@@ -129,7 +129,7 @@
129
129
  <span class="pficon pficon-container-node"></span>
130
130
  <span class="list-group-item-value">Storage</span>
131
131
  </a>
132
- <div id="storage-secondary" class="nav-pf-persistent-secondary">
132
+ <div id="storage-secondary" class="nav-pf-persistent-secondary">
133
133
  <div class="persistent-secondary-header">
134
134
  <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
135
135
  <span>Storage</span>
@@ -261,7 +261,7 @@
261
261
  <span class="fa fa-cog"></span>
262
262
  <span class="list-group-item-value">Admin</span>
263
263
  </a>
264
- <div id="admin-secondary" class="nav-pf-persistent-secondary">
264
+ <div id="admin-secondary" class="nav-pf-persistent-secondary">
265
265
  <div class="persistent-secondary-header">
266
266
  <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
267
267
  <span>Admin</span>
@@ -338,41 +338,44 @@
338
338
  <div class="row row-cards-pf">
339
339
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
340
340
  <div class="col-xs-12 col-sm-6 col-md-3">
341
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
342
- <h2 class="card-pf-title">
343
- <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
344
- </h2>
345
- <div class="card-pf-body">
346
- <p class="card-pf-aggregate-status-notifications">
347
- <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>
348
- </p>
349
- </div>
350
- </div>
341
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
342
+ <h2 class="card-pf-title">
343
+ <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
344
+ </h2>
345
+ <div class="card-pf-body">
346
+ <p class="card-pf-aggregate-status-notifications">
347
+ <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>
348
+ </p>
349
+ </div>
350
+ </div>
351
+
351
352
  </div>
352
353
  <div class="col-xs-12 col-sm-6 col-md-3">
353
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
354
- <h2 class="card-pf-title">
355
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
356
- </h2>
357
- <div class="card-pf-body">
358
- <p class="card-pf-aggregate-status-notifications">
359
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
360
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
361
- </p>
362
- </div>
363
- </div>
354
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
355
+ <h2 class="card-pf-title">
356
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
357
+ </h2>
358
+ <div class="card-pf-body">
359
+ <p class="card-pf-aggregate-status-notifications">
360
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
361
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
362
+ </p>
363
+ </div>
364
+ </div>
365
+
364
366
  </div>
365
367
  <div class="col-xs-12 col-sm-6 col-md-3">
366
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
367
- <h2 class="card-pf-title">
368
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
369
- </h2>
370
- <div class="card-pf-body">
371
- <p class="card-pf-aggregate-status-notifications">
372
- <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
373
- </p>
374
- </div>
375
- </div>
368
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
369
+ <h2 class="card-pf-title">
370
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
371
+ </h2>
372
+ <div class="card-pf-body">
373
+ <p class="card-pf-aggregate-status-notifications">
374
+ <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
375
+ </p>
376
+ </div>
377
+ </div>
378
+
376
379
  </div>
377
380
  <div class="col-xs-12 col-sm-6 col-md-3">
378
381
  <div class="card-pf card-pf-accented card-pf-aggregate-status">
@@ -390,47 +393,50 @@
390
393
  <div class="row row-cards-pf">
391
394
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
392
395
  <div class="col-xs-12 col-sm-6 col-md-3">
393
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
394
- <h2 class="card-pf-title">
395
- <span class="fa fa-rebel"></span>
396
- <span class="card-pf-aggregate-status-count">0</span> Ipsum
397
- </h2>
398
- <div class="card-pf-body">
399
- <p class="card-pf-aggregate-status-notifications">
400
- <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>
401
- </p>
402
- </div>
403
- </div>
396
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
397
+ <h2 class="card-pf-title">
398
+ <span class="fa fa-rebel"></span>
399
+ <span class="card-pf-aggregate-status-count">0</span> Ipsum
400
+ </h2>
401
+ <div class="card-pf-body">
402
+ <p class="card-pf-aggregate-status-notifications">
403
+ <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>
404
+ </p>
405
+ </div>
406
+ </div>
407
+
404
408
  </div>
405
409
  <div class="col-xs-12 col-sm-6 col-md-3">
406
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
407
- <h2 class="card-pf-title">
408
- <span class="fa fa-paper-plane"></span>
409
- <a href="#">
410
- <span class="card-pf-aggregate-status-count">20</span> Amet
411
- </a>
412
- </h2>
413
- <div class="card-pf-body">
414
- <p class="card-pf-aggregate-status-notifications">
415
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
416
- </p>
417
- </div>
418
- </div>
410
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
411
+ <h2 class="card-pf-title">
412
+ <span class="fa fa-paper-plane"></span>
413
+ <a href="#">
414
+ <span class="card-pf-aggregate-status-count">20</span> Amet
415
+ </a>
416
+ </h2>
417
+ <div class="card-pf-body">
418
+ <p class="card-pf-aggregate-status-notifications">
419
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
420
+ </p>
421
+ </div>
422
+ </div>
423
+
419
424
  </div>
420
425
  <div class="col-xs-12 col-sm-6 col-md-3">
421
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
422
- <h2 class="card-pf-title">
423
- <span class="pficon pficon-cluster"></span>
424
- <a href="#">
425
- <span class="card-pf-aggregate-status-count">9</span> Adipiscing
426
- </a>
427
- </h2>
428
- <div class="card-pf-body">
429
- <p class="card-pf-aggregate-status-notifications">
430
- <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
431
- </p>
432
- </div>
433
- </div>
426
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
427
+ <h2 class="card-pf-title">
428
+ <span class="pficon pficon-cluster"></span>
429
+ <a href="#">
430
+ <span class="card-pf-aggregate-status-count">9</span> Adipiscing
431
+ </a>
432
+ </h2>
433
+ <div class="card-pf-body">
434
+ <p class="card-pf-aggregate-status-notifications">
435
+ <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
436
+ </p>
437
+ </div>
438
+ </div>
439
+
434
440
  </div>
435
441
  <div class="col-xs-12 col-sm-6 col-md-3">
436
442
  <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
@@ -451,125 +457,126 @@
451
457
  <div class="row row-cards-pf">
452
458
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
453
459
  <div class="col-xs-12 col-sm-6">
454
- <div class="card-pf">
455
- <div class="card-pf-heading">
456
- <h2 class="card-pf-title">
457
- Top Utilized Clusters
458
- </h2>
459
- </div>
460
- <div class="card-pf-body">
461
- <div class="progress-description">
462
- RHOS6-Controller
463
- </div>
464
- <div class="progress progress-label-top-right">
465
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;" data-toggle="tooltip" title="95% Used">
466
- <span><strong>190.0 of 200.0 GB</strong> Used</span>
467
- </div>
468
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
469
- <span class="sr-only">5% Available</span>
470
- </div>
471
- </div>
472
- <div class="progress-description">
473
- CFMEQE-Cluster
474
- </div>
475
- <div class="progress progress-label-top-right">
476
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Used">
477
- <span><strong>100.0 of 200.0 GB</strong> Used</span>
478
- </div>
479
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
480
- <span class="sr-only">50% Available</span>
481
- </div>
482
- </div>
483
- <div class="progress-description">
484
- RHOS-Undercloud
485
- </div>
486
- <div class="progress progress-label-top-right">
487
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" data-toggle="tooltip" title="70% Used">
488
- <span><strong>140.0 of 200.0 GB</strong> Used</span>
489
- </div>
490
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
491
- <span class="sr-only">30% Available</span>
492
- </div>
493
- </div>
494
- <div class="progress-description">
495
- RHEL6-Controller
496
- </div>
497
- <div class="progress progress-label-top-right">
498
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;" data-toggle="tooltip" title="76.5% Used">
499
- <span><strong>153.0 of 200.0 GB</strong> Used</span>
500
- </div>
501
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
502
- <span class="sr-only">23.5% Available</span>
503
- </div>
504
- </div>
505
- </div>
506
- </div>
460
+ <div class="card-pf">
461
+ <div class="card-pf-heading">
462
+ <h2 class="card-pf-title">
463
+ Top Utilized Clusters
464
+ </h2>
465
+ </div>
466
+ <div class="card-pf-body">
467
+ <div class="progress-description">
468
+ RHOS6-Controller
469
+ </div>
470
+ <div class="progress progress-label-top-right">
471
+ <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;" data-toggle="tooltip" title="95% Used">
472
+ <span><strong>190.0 of 200.0 GB</strong> Used</span>
473
+ </div>
474
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
475
+ <span class="sr-only">5% Available</span>
476
+ </div>
477
+ </div>
478
+ <div class="progress-description">
479
+ CFMEQE-Cluster
480
+ </div>
481
+ <div class="progress progress-label-top-right">
482
+ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Used">
483
+ <span><strong>100.0 of 200.0 GB</strong> Used</span>
484
+ </div>
485
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
486
+ <span class="sr-only">50% Available</span>
487
+ </div>
488
+ </div>
489
+ <div class="progress-description">
490
+ RHOS-Undercloud
491
+ </div>
492
+ <div class="progress progress-label-top-right">
493
+ <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" data-toggle="tooltip" title="70% Used">
494
+ <span><strong>140.0 of 200.0 GB</strong> Used</span>
495
+ </div>
496
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
497
+ <span class="sr-only">30% Available</span>
498
+ </div>
499
+ </div>
500
+ <div class="progress-description">
501
+ RHEL6-Controller
502
+ </div>
503
+ <div class="progress progress-label-top-right">
504
+ <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;" data-toggle="tooltip" title="76.5% Used">
505
+ <span><strong>153.0 of 200.0 GB</strong> Used</span>
506
+ </div>
507
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
508
+ <span class="sr-only">23.5% Available</span>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
507
514
  </div>
508
515
  <div class="col-xs-12 col-sm-6">
509
- <div class="card-pf">
510
- <div class="card-pf-heading">
511
- <h2 class="card-pf-title">
512
- Quotas
513
- </h2>
514
- </div>
515
- <div class="card-pf-body">
516
- <div class="progress-container progress-description-left progress-label-right">
517
- <div class="progress-description">
518
- CPU
519
- </div>
520
- <div class="progress">
521
- <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
522
- <span><strong>115 of 460</strong> MHz</span>
523
- </div>
524
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
525
- <span class="sr-only">75% Available</span>
526
- </div>
527
- </div>
528
- </div>
529
- <div class="progress-container progress-description-left progress-label-right">
530
- <div class="progress-description">
531
- Memory
532
- </div>
533
- <div class="progress">
534
- <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
535
- <span><strong>8 of 16</strong> GB</span>
536
- </div>
537
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
538
- <span class="sr-only">50% Available</span>
539
- </div>
540
- </div>
541
- </div>
542
- <div class="progress-container progress-description-left progress-label-right">
543
- <div class="progress-description">
544
- Pods
545
- </div>
546
- <div class="progress">
547
- <div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
548
- <span><strong>5 of 8</strong> Total</span>
549
- </div>
550
- <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
551
- <span class="sr-only">37.5% Available</span>
552
- </div>
553
- </div>
554
- </div>
555
- <div class="progress-container progress-description-left progress-label-right">
556
- <div class="progress-description">
557
- Services
558
- </div>
559
- <div class="progress">
560
- <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
561
- <span><strong>2 of 2</strong> Total</span>
562
- </div>
563
- </div>
564
- </div>
565
- </div>
566
- </div>
516
+ <div class="card-pf">
517
+ <div class="card-pf-heading">
518
+ <h2 class="card-pf-title">
519
+ Quotas
520
+ </h2>
521
+ </div>
522
+ <div class="card-pf-body">
523
+ <div class="progress-container progress-description-left progress-label-right">
524
+ <div class="progress-description">
525
+ CPU
526
+ </div>
527
+ <div class="progress">
528
+ <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
529
+ <span><strong>115 of 460</strong> MHz</span>
530
+ </div>
531
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
532
+ <span class="sr-only">75% Available</span>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ <div class="progress-container progress-description-left progress-label-right">
537
+ <div class="progress-description">
538
+ Memory
539
+ </div>
540
+ <div class="progress">
541
+ <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
542
+ <span><strong>8 of 16</strong> GB</span>
543
+ </div>
544
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
545
+ <span class="sr-only">50% Available</span>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ <div class="progress-container progress-description-left progress-label-right">
550
+ <div class="progress-description">
551
+ Pods
552
+ </div>
553
+ <div class="progress">
554
+ <div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
555
+ <span><strong>5 of 8</strong> Total</span>
556
+ </div>
557
+ <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
558
+ <span class="sr-only">37.5% Available</span>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ <div class="progress-container progress-description-left progress-label-right">
563
+ <div class="progress-description">
564
+ Services
565
+ </div>
566
+ <div class="progress">
567
+ <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
568
+ <span><strong>2 of 2</strong> Total</span>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
567
575
  </div>
568
576
  </div><!-- /row -->
569
577
  <div class="row row-cards-pf">
570
578
  <div class="col-md-12">
571
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
572
- <div class="card-pf card-pf-utilization">
579
+ <div class="card-pf card-pf-utilization">
573
580
  <div class="card-pf-heading">
574
581
  <p class="card-pf-heading-details">Last 30 days</p>
575
582
  <h2 class="card-pf-title">
@@ -745,8 +752,7 @@
745
752
  </div><!-- /row -->
746
753
  <div class="row row-cards-pf">
747
754
  <div class="col-xs-12 col-sm-4 col-md-4">
748
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
749
- <div class="card-pf card-pf-utilization">
755
+ <div class="card-pf card-pf-utilization">
750
756
  <h2 class="card-pf-title">
751
757
  Network
752
758
  </h2>
@@ -812,51 +818,53 @@
812
818
  <div class="row row-cards-pf">
813
819
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
814
820
  <div class="col-xs-12 col-sm-6 col-md-5">
815
- <div class="card-pf">
816
- <div class="card-pf-heading">
817
- <div class="dropdown card-pf-time-frame-filter">
818
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
819
- Last 30 Days <span class="caret"></span>
820
- </button>
821
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
822
- <li><a href="#">Last 60 Days</a></li>
823
- <li><a href="#">Last 90 Days</a></li>
824
- </ul>
825
- </div>
826
- <h2 class="card-pf-title">
827
- Card Title
828
- </h2>
829
- </div>
830
- <div class="card-pf-body">
831
- <p>[card contents]</p>
832
- </div>
833
- </div>
821
+ <div class="card-pf">
822
+ <div class="card-pf-heading">
823
+ <div class="dropdown card-pf-time-frame-filter">
824
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
825
+ Last 30 Days <span class="caret"></span>
826
+ </button>
827
+ <ul class="dropdown-menu dropdown-menu-right" role="menu">
828
+ <li><a href="#">Last 60 Days</a></li>
829
+ <li><a href="#">Last 90 Days</a></li>
830
+ </ul>
831
+ </div>
832
+ <h2 class="card-pf-title">
833
+ Card Title
834
+ </h2>
835
+ </div>
836
+ <div class="card-pf-body">
837
+ <p>[card contents]</p>
838
+ </div>
839
+ </div>
840
+
834
841
  </div>
835
842
  <div class="col-xs-12 col-sm-6 col-md-7">
836
- <div class="card-pf">
837
- <h2 class="card-pf-title">
838
- Card Title
839
- </h2>
840
- <div class="card-pf-body">
841
- <p>[card contents]</p>
842
- </div>
843
- <div class="card-pf-footer">
844
- <div class="dropdown card-pf-time-frame-filter">
845
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
846
- Last 30 Days <span class="caret"></span>
847
- </button>
848
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
849
- <li><a href="#">Last 60 Days</a></li>
850
- <li><a href="#">Last 90 Days</a></li>
851
- </ul>
852
- </div>
853
- <p>
854
- <a href="#" class="card-pf-link-with-icon">
855
- <span class="pficon pficon-add-circle-o"></span>Add New Cluster
856
- </a>
857
- </p>
858
- </div>
859
- </div>
843
+ <div class="card-pf">
844
+ <h2 class="card-pf-title">
845
+ Card Title
846
+ </h2>
847
+ <div class="card-pf-body">
848
+ <p>[card contents]</p>
849
+ </div>
850
+ <div class="card-pf-footer">
851
+ <div class="dropdown card-pf-time-frame-filter">
852
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
853
+ Last 30 Days <span class="caret"></span>
854
+ </button>
855
+ <ul class="dropdown-menu dropdown-menu-right" role="menu">
856
+ <li><a href="#">Last 60 Days</a></li>
857
+ <li><a href="#">Last 90 Days</a></li>
858
+ </ul>
859
+ </div>
860
+ <p>
861
+ <a href="#" class="card-pf-link-with-icon">
862
+ <span class="pficon pficon-add-circle-o"></span>Add New Cluster
863
+ </a>
864
+ </p>
865
+ </div>
866
+ </div>
867
+
860
868
  </div>
861
869
  </div><!-- /row -->
862
870
  <div class="row row-cards-pf">