patternfly-sass 3.3.4 → 3.3.5

Sign up to get free protection for your applications and to get access to all the features.
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">