patternfly-sass 3.8.1 → 3.9.0

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 (97) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +1 -1
  3. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  4. data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +1 -0
  5. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  6. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  7. data/assets/images/patternfly/logo-alt.svg +18 -18
  8. data/assets/images/patternfly/logo.svg +22 -22
  9. data/assets/javascripts/patternfly.js +1 -1
  10. data/assets/javascripts/patternfly.min.js +1 -1
  11. data/assets/stylesheets/_patternfly.scss +1 -0
  12. data/assets/stylesheets/patternfly/_card-view.scss +106 -0
  13. data/assets/stylesheets/patternfly/_cards.scss +5 -1
  14. data/assets/stylesheets/patternfly/_icons.scss +3 -1
  15. data/assets/stylesheets/patternfly/_layouts.scss +7 -0
  16. data/assets/stylesheets/patternfly/_list-group.scss +16 -0
  17. data/assets/stylesheets/patternfly/_notifications-drawer.scss +34 -2
  18. data/assets/stylesheets/patternfly/_toast.scss +21 -3
  19. data/assets/stylesheets/patternfly/_toolbar.scss +3 -1
  20. data/assets/stylesheets/patternfly/_variables.scss +2 -0
  21. data/assets/stylesheets/patternfly/lib/bootstrap-select.scss +7 -7
  22. data/bower.json +3 -2
  23. data/lib/patternfly-sass/version.rb +2 -2
  24. data/spec/html/about-modal.html +1 -0
  25. data/spec/html/accordions.html +1 -0
  26. data/spec/html/alerts.html +1 -0
  27. data/spec/html/area-charts.html +1 -0
  28. data/spec/html/badges.html +1 -0
  29. data/spec/html/bar-charts.html +1 -0
  30. data/spec/html/basic.html +14 -6
  31. data/spec/html/blank-slate.html +1 -0
  32. data/spec/html/bootstrap-combobox.html +1 -0
  33. data/spec/html/bootstrap-datepicker.html +2 -1
  34. data/spec/html/bootstrap-select.html +1 -0
  35. data/spec/html/bootstrap-switch.html +1 -0
  36. data/spec/html/bootstrap-touchspin.html +1 -0
  37. data/spec/html/bootstrap-treeview-2.html +14 -6
  38. data/spec/html/bootstrap-treeview.html +1 -0
  39. data/spec/html/breadcrumbs.html +1 -0
  40. data/spec/html/buttons.html +1 -0
  41. data/spec/html/card-view-card-variations.html +201 -0
  42. data/spec/html/card-view-multi-select.html +689 -0
  43. data/spec/html/card-view-single-select.html +439 -0
  44. data/spec/html/cards.html +14 -6
  45. data/spec/html/code.html +1 -0
  46. data/spec/html/dashboard.html +14 -6
  47. data/spec/html/datatables-columns.html +1 -0
  48. data/spec/html/datatables.html +1 -0
  49. data/spec/html/dist/css/patternfly-additions.css +197 -6
  50. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  51. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  52. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  53. data/spec/html/dist/css/patternfly.css +13 -0
  54. data/spec/html/dist/css/patternfly.css.map +1 -1
  55. data/spec/html/dist/css/patternfly.min.css +2 -2
  56. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  57. data/spec/html/donut-charts.html +1 -0
  58. data/spec/html/dropdowns.html +1 -0
  59. data/spec/html/form.html +14 -6
  60. data/spec/html/forms.html +1 -0
  61. data/spec/html/horizontal-navigation.html +10 -8
  62. data/spec/html/icons.html +5 -0
  63. data/spec/html/index.html +10 -0
  64. data/spec/html/infotip.html +1 -0
  65. data/spec/html/labels.html +1 -0
  66. data/spec/html/line-charts.html +1 -0
  67. data/spec/html/list-group.html +1 -0
  68. data/spec/html/list-view-rows.html +1 -0
  69. data/spec/html/list-view.html +8 -6
  70. data/spec/html/login.html +8 -6
  71. data/spec/html/modals.html +1 -0
  72. data/spec/html/navbar.html +1 -0
  73. data/spec/html/notification-drawer-horizontal-nav.html +25 -8
  74. data/spec/html/notification-drawer-vertical-nav.html +23 -6
  75. data/spec/html/pagination.html +1 -0
  76. data/spec/html/panels.html +1 -0
  77. data/spec/html/pie-charts.html +1 -0
  78. data/spec/html/popovers.html +1 -0
  79. data/spec/html/progress-bars.html +1 -0
  80. data/spec/html/search.html +1 -0
  81. data/spec/html/spinner.html +1 -0
  82. data/spec/html/tab.html +14 -6
  83. data/spec/html/tables.html +1 -0
  84. data/spec/html/tabs.html +1 -0
  85. data/spec/html/time-picker.html +1 -0
  86. data/spec/html/toast.html +26 -77
  87. data/spec/html/toolbar.html +1 -0
  88. data/spec/html/tooltip.html +1 -0
  89. data/spec/html/typography-2.html +14 -6
  90. data/spec/html/typography.html +1 -0
  91. data/spec/html/utilization-bar-charts.html +1 -0
  92. data/spec/html/vertical-navigation-primary-only.html +8 -6
  93. data/spec/html/vertical-navigation-with-secondary.html +8 -6
  94. data/spec/html/vertical-navigation-with-tertiary-no-icons.html +8 -6
  95. data/spec/html/vertical-navigation-with-tertiary-pins.html +8 -6
  96. data/spec/html/wizard.html +1 -0
  97. metadata +9 -2
data/assets/stylesheets/patternfly/_variables.scss CHANGED
@@ -19,6 +19,7 @@ $card-pf-border-color: $color-pf-bl
19
19
  $card-pf-border-top-color: transparent !default;
20
20
  $card-pf-container-bg-color: $color-pf-black-150 !default;
21
21
  $card-pf-footer-bg-color: $color-pf-black-100 !default;
22
+ $card-pf-selected-border-color: $color-pf-blue-300 !default;
22
23
  $donut-font-size-big: 30px !default;
23
24
  $dropdown-divider-margin: 4px 1px !default;
24
25
  $dropdown-link-active-border-color: $color-pf-blue !default;
@@ -143,6 +144,7 @@ $nav-pf-vertical-width: 200px !defau
143
144
  $pagination-padding-small-vertical: 0 !default;
144
145
  $panel-default-border-color: $color-pf-black-400 !default;
145
146
  $pficon-var-add-circle-o: "\e61b" !default;
147
+ $pficon-var-middleware: "\e917" !default;
146
148
  $pficon-var-blueprint: "\e915" !default;
147
149
  $pficon-var-build: "\e902" !default;
148
150
  $pficon-var-builder-image: "\e800" !default;
data/assets/stylesheets/patternfly/lib/bootstrap-select.scss CHANGED
@@ -1,10 +1,10 @@
1
- /*!
2
- * Bootstrap-select v1.10.0 (http://silviomoreto.github.io/bootstrap-select)
3
- *
4
- * Copyright 2013-2016 bootstrap-select
5
- * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
6
- */
7
-
1
+ /*!
2
+ * Bootstrap-select v1.10.0 (http://silviomoreto.github.io/bootstrap-select)
3
+ *
4
+ * Copyright 2013-2016 bootstrap-select
5
+ * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
6
+ */
7
+
8
8
  select.bs-select-hidden,
9
9
  select.selectpicker {
10
10
  display: none !important;
data/bower.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "patternfly-sass",
3
- "version": "3.8.1",
3
+ "version": "3.9.0",
4
4
  "license": "Apache-2.0",
5
5
  "homepage": "https://www.patternfly.org",
6
6
  "authors": [
@@ -35,11 +35,12 @@
35
35
  "bootstrap-switch": "~3.3.2",
36
36
  "bootstrap-touchspin": "~3.1.1",
37
37
  "c3": "~0.4.11",
38
+ "d3": "~3.5.17",
38
39
  "datatables": "~1.10.12",
39
40
  "datatables-colreorder": "~1.3.2",
40
41
  "datatables-colvis": "~1.1.2",
41
42
  "font-awesome-sass": "~4.6.2",
42
- "google-code-prettify": "~1.0.4",
43
+ "google-code-prettify": "~1.0.5",
43
44
  "jquery": "~2.1.4",
44
45
  "matchHeight": "~0.7.0",
45
46
  "eonasdan-bootstrap-datetimepicker": "~4.17.37",
data/lib/patternfly-sass/version.rb CHANGED
@@ -1,4 +1,4 @@
1
1
  module Patternfly
2
- VERSION = '3.8.1'
3
- PATTERNFLY_SHA = '890de7c3fdfd785aa3c8cd0504c57706bcc405e7'
2
+ VERSION = '3.9.0'
3
+ PATTERNFLY_SHA = '64af2f71671135117e03d6c29bd2d61ad9b3c4b7'
4
4
  end
data/spec/html/about-modal.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/accordions.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/alerts.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/area-charts.html CHANGED
@@ -31,6 +31,7 @@
31
31
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
32
32
  <script src="../../dist/js/patternfly.min.js"></script>
33
33
  </head>
34
+ </div>
34
35
 
35
36
  <body>
36
37
  <div class="container">
data/spec/html/badges.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/bar-charts.html CHANGED
@@ -31,6 +31,7 @@
31
31
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
32
32
  <script src="../../dist/js/patternfly.min.js"></script>
33
33
  </head>
34
+ </div>
34
35
 
35
36
  <body>
36
37
  <div class="container">
data/spec/html/basic.html CHANGED
@@ -30,12 +30,14 @@
30
30
  <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
31
31
  <script src="../../dist/js/patternfly.min.js"></script>
32
32
  </head>
33
- <div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
34
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
35
- <span class="pficon pficon-close"></span>
36
- </button>
37
- <span class="pficon pficon-warning-triangle-o"></span>
38
- These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
33
+ <div class="toast-notifications-list-pf">
34
+ <div class="toast-pf alert alert-warning alert-dismissable">
35
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
36
+ <span class="pficon pficon-close"></span>
37
+ </button>
38
+ <span class="pficon pficon-warning-triangle-o"></span>
39
+ These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
40
+ </div>
39
41
  </div>
40
42
 
41
43
  <body>
@@ -121,6 +123,12 @@
121
123
  <li>
122
124
  <a href="typography-2.html">Typography</a>
123
125
  </li>
126
+ <li>
127
+ <a href="card-view-multi-select.html">Card View - Multi Select</a>
128
+ </li>
129
+ <li>
130
+ <a href="card-view-single-select.html">Card View - Single Select</a>
131
+ </li>
124
132
  <li>
125
133
  <a href="cards.html">Cards</a>
126
134
  </li>
data/spec/html/blank-slate.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/bootstrap-combobox.html CHANGED
@@ -30,6 +30,7 @@
30
30
  <script src="//rawgit.com/danielfarrell/bootstrap-combobox/1.1.7/js/bootstrap-combobox.js"></script>
31
31
  <script src="../../dist/js/patternfly.min.js"></script>
32
32
  </head>
33
+ </div>
33
34
 
34
35
  <body>
35
36
  <div class="container">
data/spec/html/bootstrap-datepicker.html CHANGED
@@ -27,9 +27,10 @@
27
27
  <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
28
28
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
- <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
30
+ <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
31
31
  <script src="../../dist/js/patternfly.min.js"></script>
32
32
  </head>
33
+ </div>
33
34
 
34
35
  <body>
35
36
  <div class="container">
data/spec/html/bootstrap-select.html CHANGED
@@ -30,6 +30,7 @@
30
30
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
31
31
  <script src="../../dist/js/patternfly.min.js"></script>
32
32
  </head>
33
+ </div>
33
34
 
34
35
  <body>
35
36
  <div class="container">
data/spec/html/bootstrap-switch.html CHANGED
@@ -31,6 +31,7 @@
31
31
  <script src="bootstrap-switch.js"></script>
32
32
  <script src="../../dist/js/patternfly.min.js"></script>
33
33
  </head>
34
+ </div>
34
35
 
35
36
  <body>
36
37
  <div class="container">
data/spec/html/bootstrap-touchspin.html CHANGED
@@ -30,6 +30,7 @@
30
30
  <script src="//rawgit.com/istvan-ujjmeszaros/bootstrap-touchspin/3.1.1/dist/jquery.bootstrap-touchspin.min.js"></script>
31
31
  <script src="../../dist/js/patternfly.min.js"></script>
32
32
  </head>
33
+ </div>
33
34
 
34
35
  <body>
35
36
  <div class="container">
data/spec/html/bootstrap-treeview-2.html CHANGED
@@ -31,12 +31,14 @@
31
31
  <script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/v1.0.0/dist/bootstrap-treeview.min.js"></script>
32
32
  <script src="../../dist/js/patternfly.min.js"></script>
33
33
  </head>
34
- <div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
35
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
36
- <span class="pficon pficon-close"></span>
37
- </button>
38
- <span class="pficon pficon-warning-triangle-o"></span>
39
- These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
34
+ <div class="toast-notifications-list-pf">
35
+ <div class="toast-pf alert alert-warning alert-dismissable">
36
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
37
+ <span class="pficon pficon-close"></span>
38
+ </button>
39
+ <span class="pficon pficon-warning-triangle-o"></span>
40
+ These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
41
+ </div>
40
42
  </div>
41
43
 
42
44
  <body>
@@ -122,6 +124,12 @@
122
124
  <li>
123
125
  <a href="typography-2.html">Typography</a>
124
126
  </li>
127
+ <li>
128
+ <a href="card-view-multi-select.html">Card View - Multi Select</a>
129
+ </li>
130
+ <li>
131
+ <a href="card-view-single-select.html">Card View - Single Select</a>
132
+ </li>
125
133
  <li>
126
134
  <a href="cards.html">Cards</a>
127
135
  </li>
data/spec/html/bootstrap-treeview.html CHANGED
@@ -30,6 +30,7 @@
30
30
  <script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/v1.0.0/dist/bootstrap-treeview.min.js"></script>
31
31
  <script src="../../dist/js/patternfly.min.js"></script>
32
32
  </head>
33
+ </div>
33
34
 
34
35
  <body>
35
36
  <div class="container">
data/spec/html/breadcrumbs.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/buttons.html CHANGED
@@ -29,6 +29,7 @@
29
29
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
30
  <script src="../../dist/js/patternfly.min.js"></script>
31
31
  </head>
32
+ </div>
32
33
 
33
34
  <body>
34
35
  <div class="container">
data/spec/html/card-view-card-variations.html ADDED
@@ -0,0 +1,201 @@
1
+ <!DOCTYPE html>
2
+ <!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
3
+ <!--[if gt IE 9]><!-->
4
+ <html lang="en-us">
5
+ <!--<![endif]-->
6
+ <head>
7
+ <title>Card View - Card Variations - PatternFly</title>
8
+ <meta charset="UTF-8">
9
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <link rel="shortcut icon" href="../../dist/img/favicon.ico">
12
+ <!-- iPad retina icon -->
13
+ <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
14
+ <!-- iPad retina icon (iOS < 7) -->
15
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
16
+ <!-- iPad non-retina icon -->
17
+ <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
18
+ <!-- iPad non-retina icon (iOS < 7) -->
19
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
20
+ <!-- iPhone 6 Plus icon -->
21
+ <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
22
+ <!-- iPhone retina icon (iOS < 7) -->
23
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
24
+ <!-- iPhone non-retina icon (iOS < 7) -->
25
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
26
+ <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
27
+ <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
28
+ <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
29
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
+ <script src="../../dist/js/patternfly.min.js"></script>
31
+ </head>
32
+ </div>
33
+
34
+ <body>
35
+ <div class="container">
36
+ <div class="page-header">
37
+ <h1>Card View - Card Variations</h1>
38
+ </div>
39
+ <div class="alert alert-warning">
40
+ <span class="pficon pficon-warning-triangle-o"></span>
41
+ These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
42
+ </div>
43
+ <hr>
44
+ <h2>Large, Single Select</h2>
45
+ <div class="cards-pf">
46
+ <div class="row row-cards-pf">
47
+ <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
48
+ <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
49
+ <div class="card-pf-body">
50
+ <div class="card-pf-top-element">
51
+ <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
52
+ </div>
53
+ <h2 class="card-pf-title text-center">
54
+ Cake Service
55
+ </h2>
56
+ <div class="card-pf-items text-center">
57
+ <div class="card-pf-item">
58
+ <span class="pficon pficon-screen"></span>
59
+ <span class="card-pf-item-text">8</span>
60
+ </div>
61
+ <div class="card-pf-item">
62
+ <span class="fa fa-check"></span>
63
+ </div>
64
+ </div>
65
+ <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
66
+ </div>
67
+ <div class="card-pf-view-checkbox">
68
+ <input type="checkbox">
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <h2>Small, Multi Select</h2>
75
+ <div class="cards-pf">
76
+ <div class="row row-cards-pf">
77
+ <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
78
+ <div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
79
+ <div class="card-pf-body">
80
+ <div class="card-pf-top-element">
81
+ <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
82
+ </div>
83
+ <h2 class="card-pf-title text-center">
84
+ Cake Service
85
+ </h2>
86
+ <div class="card-pf-items text-center">
87
+ <div class="card-pf-item">
88
+ <span class="pficon pficon-screen"></span>
89
+ <span class="card-pf-item-text">8</span>
90
+ </div>
91
+ <div class="card-pf-item">
92
+ <span class="fa fa-check"></span>
93
+ </div>
94
+ </div>
95
+ <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
96
+ </div>
97
+ <div class="card-pf-view-checkbox">
98
+ <input type="checkbox">
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div><!-- /row -->
103
+ </div>
104
+ <h2>Mini, Status</h2>
105
+ <div class="cards-pf">
106
+ <div class="row row-cards-pf">
107
+ <div class="col-xs-12 col-sm-3 col-md-2">
108
+ <div class="card-pf card-pf-view card-pf-view-xs">
109
+ <div class="card-pf-body">
110
+ <div class="card-pf-heading-kebab">
111
+ <div class="dropdown pull-right dropdown-kebab-pf">
112
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
113
+ <span class="fa fa-ellipsis-v"></span>
114
+ </button>
115
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropupKebabRight">
116
+ <li><a href="#">Action</a></li>
117
+ <li><a href="#">Another action</a></li>
118
+ <li><a href="#">Something else here</a></li>
119
+ <li role="separator" class="divider"></li>
120
+ <li><a href="#">Separated link</a></li>
121
+ </ul>
122
+ </div>
123
+
124
+ <h2 class="card-pf-title">
125
+ <span class="pficon pficon-cluster"></span> Storage_1
126
+ </h2>
127
+ </div>
128
+ <div class="progress-pf-legend">
129
+ <div class="progress">
130
+ <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
131
+ <span class="sr-only">25% Used</span>
132
+ </div>
133
+ <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">
134
+ <span class="sr-only">75% Available</span>
135
+ </div>
136
+ </div>
137
+ <script>
138
+ // Initialize Tooltip
139
+ jQuery(document).ready(function() {
140
+ jQuery('[data-toggle="tooltip"]').tooltip();
141
+ });
142
+ </script>
143
+
144
+ <p><span class="pficon pficon-warning-triangle-o"></span> <strong>10%</strong> in use</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div><!-- /row -->
150
+ </div>
151
+ <h2>Mini, Summary</h2>
152
+ <div class="cards-pf">
153
+ <div class="row row-cards-pf">
154
+ <div class="col-xs-12 col-sm-3 col-md-2">
155
+ <div class="card-pf card-pf-view card-pf-view-xs">
156
+ <div class="card-pf-body">
157
+ <div class="card-pf-heading-kebab">
158
+ <div class="dropup pull-right dropdown-kebab-pf">
159
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
160
+ <span class="fa fa-ellipsis-v"></span>
161
+ </button>
162
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropupKebabRight">
163
+ <li><a href="#">Action</a></li>
164
+ <li><a href="#">Another action</a></li>
165
+ <li><a href="#">Something else here</a></li>
166
+ <li role="separator" class="divider"></li>
167
+ <li><a href="#">Separated link</a></li>
168
+ </ul>
169
+ </div>
170
+
171
+ <h2 class="card-pf-title">
172
+ <span class="pficon pficon-service"></span> Zone_1
173
+ </h2>
174
+ </div>
175
+ <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. <a href="#">More info</a></p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ <script>
182
+ $(document).ready(function() {
183
+ // Card Single Select
184
+ $('.card-pf-view-single-select').click(function() {
185
+ if ($(this).hasClass('active'))
186
+ { $(this).removeClass('active'); }
187
+ else
188
+ { $('.card-pf-view-single-select').removeClass('active'); $(this).addClass('active'); }
189
+ });
190
+ // Card Multi Select
191
+ $('input[type=checkbox]').click(function() {
192
+ if ($(this).parent().parent().hasClass('active'))
193
+ { $(this).parent().parent().removeClass('active'); }
194
+ else
195
+ { $(this).parent().parent().addClass('active'); }
196
+ });
197
+ });
198
+ </script>
199
+ </div><!-- /container -->
200
+ </body>
201
+ </html>