patternfly-sass 3.8.1 → 3.9.0

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