patternfly-sass 3.7.0 → 3.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/assets/fonts/patternfly/OpenSans-Bold-webfont.eot +0 -0
  3. data/assets/fonts/patternfly/OpenSans-Bold-webfont.svg +0 -0
  4. data/assets/fonts/patternfly/OpenSans-Bold-webfont.ttf +0 -0
  5. data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff +0 -0
  6. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.eot +0 -0
  7. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.svg +0 -0
  8. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.ttf +0 -0
  9. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff +0 -0
  10. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.eot +0 -0
  11. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.svg +0 -0
  12. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.ttf +0 -0
  13. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff +0 -0
  14. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
  15. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.svg +0 -0
  16. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
  17. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
  18. data/assets/fonts/patternfly/OpenSans-Italic-webfont.eot +0 -0
  19. data/assets/fonts/patternfly/OpenSans-Italic-webfont.svg +0 -0
  20. data/assets/fonts/patternfly/OpenSans-Italic-webfont.ttf +0 -0
  21. data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff +0 -0
  22. data/assets/fonts/patternfly/OpenSans-Light-webfont.eot +0 -0
  23. data/assets/fonts/patternfly/OpenSans-Light-webfont.svg +0 -0
  24. data/assets/fonts/patternfly/OpenSans-Light-webfont.ttf +0 -0
  25. data/assets/fonts/patternfly/OpenSans-Light-webfont.woff +0 -0
  26. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.eot +0 -0
  27. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.svg +0 -0
  28. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.ttf +0 -0
  29. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff +0 -0
  30. data/assets/fonts/patternfly/OpenSans-Regular-webfont.eot +0 -0
  31. data/assets/fonts/patternfly/OpenSans-Regular-webfont.svg +0 -0
  32. data/assets/fonts/patternfly/OpenSans-Regular-webfont.ttf +0 -0
  33. data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff +0 -0
  34. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.eot +0 -0
  35. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.svg +0 -0
  36. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.ttf +0 -0
  37. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff +0 -0
  38. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.eot +0 -0
  39. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.svg +0 -0
  40. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.ttf +0 -0
  41. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff +0 -0
  42. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  43. data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +0 -0
  44. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  45. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  46. data/assets/fonts/patternfly/fontawesome-webfont.eot +0 -0
  47. data/assets/fonts/patternfly/fontawesome-webfont.svg +44 -14
  48. data/assets/fonts/patternfly/fontawesome-webfont.ttf +0 -0
  49. data/assets/fonts/patternfly/fontawesome-webfont.woff +0 -0
  50. data/assets/fonts/patternfly/fontawesome-webfont.woff2 +0 -0
  51. data/assets/images/patternfly/apple-touch-icon-precomposed-114.png +0 -0
  52. data/assets/images/patternfly/apple-touch-icon-precomposed-144.png +0 -0
  53. data/assets/images/patternfly/apple-touch-icon-precomposed-57.png +0 -0
  54. data/assets/images/patternfly/apple-touch-icon-precomposed-72.png +0 -0
  55. data/assets/images/patternfly/bg-login.jpg +0 -0
  56. data/assets/images/patternfly/logo-alt.svg +18 -18
  57. data/assets/images/patternfly/logo.svg +22 -22
  58. data/assets/javascripts/patternfly.js +290 -91
  59. data/assets/javascripts/patternfly.min.js +2 -1
  60. data/assets/stylesheets/patternfly/_layouts.scss +23 -42
  61. data/assets/stylesheets/patternfly/_list-view.scss +7 -0
  62. data/assets/stylesheets/patternfly/_navbar.scss +3 -3
  63. data/assets/stylesheets/patternfly/_notifications-drawer.scss +16 -3
  64. data/assets/stylesheets/patternfly/_toolbar.scss +120 -14
  65. data/assets/stylesheets/patternfly/_variables.scss +20 -5
  66. data/assets/stylesheets/patternfly/_vertical-nav.scss +631 -381
  67. data/assets/stylesheets/patternfly/_wizard.scss +105 -14
  68. data/assets/stylesheets/patternfly/lib/bootstrap-datepicker.scss +0 -1
  69. data/bower.json +11 -11
  70. data/lib/patternfly-sass/version.rb +2 -2
  71. data/patternfly-sass.gemspec +2 -2
  72. data/spec/html/about-modal.html +1 -1
  73. data/spec/html/accordions.html +1 -1
  74. data/spec/html/alerts.html +1 -1
  75. data/spec/html/area-charts.html +3 -3
  76. data/spec/html/badges.html +1 -1
  77. data/spec/html/bar-charts.html +3 -3
  78. data/spec/html/basic.html +2 -2
  79. data/spec/html/blank-slate.html +1 -1
  80. data/spec/html/bootstrap-combobox.html +2 -2
  81. data/spec/html/bootstrap-datepicker.html +2 -2
  82. data/spec/html/bootstrap-select.html +2 -2
  83. data/spec/html/bootstrap-switch.html +1 -1
  84. data/spec/html/bootstrap-touchspin.html +2 -2
  85. data/spec/html/bootstrap-treeview-2.html +3 -3
  86. data/spec/html/bootstrap-treeview.html +3 -3
  87. data/spec/html/breadcrumbs.html +1 -1
  88. data/spec/html/buttons.html +1 -1
  89. data/spec/html/cards.html +4 -4
  90. data/spec/html/code.html +1 -1
  91. data/spec/html/dashboard.html +3 -3
  92. data/spec/html/datatables-columns.html +3 -3
  93. data/spec/html/datatables.html +2 -2
  94. data/spec/html/dist/css/patternfly-additions.css +1093 -794
  95. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  96. data/spec/html/dist/css/patternfly-additions.min.css +2 -2
  97. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  98. data/spec/html/dist/css/patternfly.css +133 -14
  99. data/spec/html/dist/css/patternfly.css.map +1 -1
  100. data/spec/html/dist/css/patternfly.min.css +6 -6
  101. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  102. data/spec/html/donut-charts.html +3 -3
  103. data/spec/html/dropdowns.html +1 -1
  104. data/spec/html/form.html +2 -2
  105. data/spec/html/forms.html +1 -1
  106. data/spec/html/horizontal-navigation.html +5 -7
  107. data/spec/html/icons.html +1 -1
  108. data/spec/html/index.html +15 -15
  109. data/spec/html/infotip.html +1 -1
  110. data/spec/html/labels.html +1 -1
  111. data/spec/html/line-charts.html +3 -3
  112. data/spec/html/list-group.html +1 -1
  113. data/spec/html/list-view-rows.html +592 -0
  114. data/spec/html/list-view.html +314 -309
  115. data/spec/html/login.html +1 -1
  116. data/spec/html/modals.html +1 -1
  117. data/spec/html/navbar.html +2 -2
  118. data/spec/html/notification-drawer-horizontal-nav.html +1451 -0
  119. data/spec/html/{notifications-drawer.html → notification-drawer-vertical-nav.html} +146 -265
  120. data/spec/html/pagination.html +1 -1
  121. data/spec/html/panels.html +1 -1
  122. data/spec/html/pie-charts.html +3 -3
  123. data/spec/html/popovers.html +1 -1
  124. data/spec/html/progress-bars.html +1 -1
  125. data/spec/html/search.html +1 -1
  126. data/spec/html/spinner.html +1 -1
  127. data/spec/html/tab.html +2 -2
  128. data/spec/html/tables.html +1 -1
  129. data/spec/html/tabs.html +1 -1
  130. data/spec/html/time-picker.html +2 -2
  131. data/spec/html/toast.html +1 -1
  132. data/spec/html/toolbar.html +43 -8
  133. data/spec/html/tooltip.html +1 -1
  134. data/spec/html/typography-2.html +1 -1
  135. data/spec/html/typography.html +1 -1
  136. data/spec/html/utilization-bar-charts.html +3 -3
  137. data/spec/html/{layout-alt-fixed-inner-scroll.html → vertical-navigation-primary-only.html} +61 -192
  138. data/spec/html/{layout-alt-fixed.html → vertical-navigation-with-secondary.html} +120 -184
  139. data/spec/html/{vertical-navigation-without-icons.html → vertical-navigation-with-tertiary-no-icons.html} +212 -155
  140. data/spec/html/{vertical-navigation.html → vertical-navigation-with-tertiary-pins.html} +212 -155
  141. data/spec/html/wizard.html +88 -48
  142. metadata +21 -21
  143. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +0 -917
  144. data/spec/html/layout-alt-fixed-with-footer.html +0 -917
data/spec/html/login.html CHANGED
@@ -26,7 +26,7 @@
26
26
  <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
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
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
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
32
  <div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
data/spec/html/modals.html CHANGED
@@ -26,7 +26,7 @@
26
26
  <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
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
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
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
32
 
data/spec/html/navbar.html CHANGED
@@ -26,8 +26,8 @@
26
26
  <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
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
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
30
- <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
29
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
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
33
 
data/spec/html/notification-drawer-horizontal-nav.html ADDED
@@ -0,0 +1,1451 @@
1
+ <!DOCTYPE html>
2
+ <!--[if IE 9]><html lang="en-us" class="ie9 layout-pf layout-pf-fixed"><![endif]-->
3
+ <!--[if gt IE 9]><!-->
4
+ <html lang="en-us" class="layout-pf">
5
+ <!--<![endif]-->
6
+ <head>
7
+ <title>Notification Drawer for Horizontal Navigation - 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="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
31
+ <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
32
+ <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
33
+ <script src="../../dist/js/patternfly.min.js"></script>
34
+ </head>
35
+ <div class="toast-pf toast-pf-max-width toast-pf-top-right 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>
42
+
43
+ <body class="cards-pf">
44
+ <nav class="navbar navbar-default navbar-pf" role="navigation">
45
+ <div class="navbar-header">
46
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
47
+ <span class="sr-only">Toggle navigation</span>
48
+ <span class="icon-bar"></span>
49
+ <span class="icon-bar"></span>
50
+ <span class="icon-bar"></span>
51
+ </button>
52
+ <a class="navbar-brand" href="/">
53
+ <img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
54
+ </a>
55
+ </div>
56
+ <div class="collapse navbar-collapse navbar-collapse-1">
57
+ <ul class="nav navbar-nav navbar-utility">
58
+ <li class="drawer-pf-trigger dropdown">
59
+ <a class="nav-item-iconic drawer-pf-trigger-icon">
60
+ <span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
61
+ </a>
62
+ </li>
63
+ <li>
64
+ <a href="#">Status</a>
65
+ </li>
66
+ <li class="dropdown">
67
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
68
+ <span class="pficon pficon-user"></span>
69
+ Brian Johnson <b class="caret"></b>
70
+ </a>
71
+ <ul class="dropdown-menu">
72
+ <li>
73
+ <a href="#">Link</a>
74
+ </li>
75
+ <li>
76
+ <a href="#">Another link</a>
77
+ </li>
78
+ <li>
79
+ <a href="#">Something else here</a>
80
+ </li>
81
+ <li class="divider"></li>
82
+ <li class="dropdown-submenu">
83
+ <a tabindex="-1" href="#">More options</a>
84
+ <ul class="dropdown-menu">
85
+ <li>
86
+ <a href="#">Link</a>
87
+ </li>
88
+ <li>
89
+ <a href="#">Another link</a>
90
+ </li>
91
+ <li>
92
+ <a href="#">Something else here</a>
93
+ </li>
94
+ <li class="divider"></li>
95
+ <li class="dropdown-header">Nav header</li>
96
+ <li>
97
+ <a href="#">Separated link</a>
98
+ </li>
99
+ <li class="divider"></li>
100
+ <li>
101
+ <a href="#">One more separated link</a>
102
+ </li>
103
+ </ul>
104
+ </li>
105
+ <li class="divider"></li>
106
+ <li>
107
+ <a href="#">One more separated link</a>
108
+ </li>
109
+ </ul>
110
+ </li>
111
+ </ul>
112
+ <div class="drawer-pf hide drawer-pf-notifications-non-clickable">
113
+ <div class="drawer-pf-title">
114
+ <h3 class="text-center">Notifications Drawer</h3>
115
+ </div>
116
+ <div class="panel-group" id="notification-drawer-accordion">
117
+ <div class="panel panel-default">
118
+ <div class="panel-heading" data-component="collapse-heading">
119
+ <h4 class="panel-title">
120
+ <a data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseOne">
121
+ Notification Tab 1
122
+ </a>
123
+ </h4>
124
+ <span class="panel-counter">5 New Events</span>
125
+ </div>
126
+ <div id="fixedCollapseOne" class="panel-collapse collapse in">
127
+ <div class="panel-body">
128
+ <div class="drawer-pf-notification unread">
129
+ <div class="dropdown pull-right dropdown-kebab-pf">
130
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
131
+ <span class="fa fa-ellipsis-v"></span>
132
+ </button>
133
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
134
+ <li><a href="#">Action</a></li>
135
+ <li><a href="#">Another action</a></li>
136
+ <li><a href="#">Something else here</a></li>
137
+ <li role="separator" class="divider"></li>
138
+ <li><a href="#">Separated link</a></li>
139
+ </ul>
140
+ </div>
141
+
142
+ <span class="pficon pficon-info pull-left"></span>
143
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
144
+ <div class="drawer-pf-notification-info">
145
+ <span class="date">3/31/16</span>
146
+ <span class="time">12:12:44 PM</span>
147
+ </div>
148
+ </div>
149
+ <div class="drawer-pf-notification unread">
150
+ <div class="dropdown pull-right dropdown-kebab-pf">
151
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
152
+ <span class="fa fa-ellipsis-v"></span>
153
+ </button>
154
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
155
+ <li><a href="#">Action</a></li>
156
+ <li><a href="#">Another action</a></li>
157
+ <li><a href="#">Something else here</a></li>
158
+ <li role="separator" class="divider"></li>
159
+ <li><a href="#">Separated link</a></li>
160
+ </ul>
161
+ </div>
162
+
163
+ <span class="pficon pficon-ok pull-left"></span>
164
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
165
+ <div class="drawer-pf-notification-info">
166
+ <span class="date">3/31/16</span>
167
+ <span class="time">12:12:44 PM</span>
168
+ </div>
169
+ </div>
170
+ <div class="drawer-pf-notification">
171
+ <div class="dropdown pull-right dropdown-kebab-pf">
172
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
173
+ <span class="fa fa-ellipsis-v"></span>
174
+ </button>
175
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
176
+ <li><a href="#">Action</a></li>
177
+ <li><a href="#">Another action</a></li>
178
+ <li><a href="#">Something else here</a></li>
179
+ <li role="separator" class="divider"></li>
180
+ <li><a href="#">Separated link</a></li>
181
+ </ul>
182
+ </div>
183
+
184
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
185
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
186
+ <div class="drawer-pf-notification-info">
187
+ <span class="date">3/31/16</span>
188
+ <span class="time">12:12:44 PM</span>
189
+ </div>
190
+ </div>
191
+ <div class="drawer-pf-notification">
192
+ <div class="dropdown pull-right dropdown-kebab-pf">
193
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
194
+ <span class="fa fa-ellipsis-v"></span>
195
+ </button>
196
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
197
+ <li><a href="#">Action</a></li>
198
+ <li><a href="#">Another action</a></li>
199
+ <li><a href="#">Something else here</a></li>
200
+ <li role="separator" class="divider"></li>
201
+ <li><a href="#">Separated link</a></li>
202
+ </ul>
203
+ </div>
204
+
205
+ <span class="pficon pficon-error-circle-o pull-left"></span>
206
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
207
+ <div class="drawer-pf-notification-info">
208
+ <span class="date">3/31/16</span>
209
+ <span class="time">12:12:44 PM</span>
210
+ </div>
211
+ </div>
212
+
213
+ </div>
214
+ <div class="drawer-pf-action">
215
+ <button class="btn btn-link btn-block">Mark All Read</button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ <div class="panel panel-default">
220
+ <div class="panel-heading" data-component="collapse-heading">
221
+ <h4 class="panel-title">
222
+ <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseTwo">
223
+ Notification Tab 2
224
+ </a>
225
+ </h4>
226
+ <span class="panel-counter">5 New Events</span>
227
+ </div>
228
+ <div id="fixedCollapseTwo" class="panel-collapse collapse">
229
+ <div class="panel-body">
230
+ <div class="drawer-pf-notification unread">
231
+ <div class="dropdown pull-right dropdown-kebab-pf">
232
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
233
+ <span class="fa fa-ellipsis-v"></span>
234
+ </button>
235
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
236
+ <li><a href="#">Action</a></li>
237
+ <li><a href="#">Another action</a></li>
238
+ <li><a href="#">Something else here</a></li>
239
+ <li role="separator" class="divider"></li>
240
+ <li><a href="#">Separated link</a></li>
241
+ </ul>
242
+ </div>
243
+
244
+ <span class="pficon pficon-info pull-left"></span>
245
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
246
+ <div class="drawer-pf-notification-info">
247
+ <span class="date">3/31/16</span>
248
+ <span class="time">12:12:44 PM</span>
249
+ </div>
250
+ </div>
251
+ <div class="drawer-pf-notification unread">
252
+ <div class="dropdown pull-right dropdown-kebab-pf">
253
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
254
+ <span class="fa fa-ellipsis-v"></span>
255
+ </button>
256
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
257
+ <li><a href="#">Action</a></li>
258
+ <li><a href="#">Another action</a></li>
259
+ <li><a href="#">Something else here</a></li>
260
+ <li role="separator" class="divider"></li>
261
+ <li><a href="#">Separated link</a></li>
262
+ </ul>
263
+ </div>
264
+
265
+ <span class="pficon pficon-ok pull-left"></span>
266
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
267
+ <div class="drawer-pf-notification-info">
268
+ <span class="date">3/31/16</span>
269
+ <span class="time">12:12:44 PM</span>
270
+ </div>
271
+ </div>
272
+ <div class="drawer-pf-notification">
273
+ <div class="dropdown pull-right dropdown-kebab-pf">
274
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
275
+ <span class="fa fa-ellipsis-v"></span>
276
+ </button>
277
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
278
+ <li><a href="#">Action</a></li>
279
+ <li><a href="#">Another action</a></li>
280
+ <li><a href="#">Something else here</a></li>
281
+ <li role="separator" class="divider"></li>
282
+ <li><a href="#">Separated link</a></li>
283
+ </ul>
284
+ </div>
285
+
286
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
287
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
288
+ <div class="drawer-pf-notification-info">
289
+ <span class="date">3/31/16</span>
290
+ <span class="time">12:12:44 PM</span>
291
+ </div>
292
+ </div>
293
+ <div class="drawer-pf-notification">
294
+ <div class="dropdown pull-right dropdown-kebab-pf">
295
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
296
+ <span class="fa fa-ellipsis-v"></span>
297
+ </button>
298
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
299
+ <li><a href="#">Action</a></li>
300
+ <li><a href="#">Another action</a></li>
301
+ <li><a href="#">Something else here</a></li>
302
+ <li role="separator" class="divider"></li>
303
+ <li><a href="#">Separated link</a></li>
304
+ </ul>
305
+ </div>
306
+
307
+ <span class="pficon pficon-error-circle-o pull-left"></span>
308
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
309
+ <div class="drawer-pf-notification-info">
310
+ <span class="date">3/31/16</span>
311
+ <span class="time">12:12:44 PM</span>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="drawer-pf-notification unread">
316
+ <div class="dropdown pull-right dropdown-kebab-pf">
317
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
318
+ <span class="fa fa-ellipsis-v"></span>
319
+ </button>
320
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
321
+ <li><a href="#">Action</a></li>
322
+ <li><a href="#">Another action</a></li>
323
+ <li><a href="#">Something else here</a></li>
324
+ <li role="separator" class="divider"></li>
325
+ <li><a href="#">Separated link</a></li>
326
+ </ul>
327
+ </div>
328
+
329
+ <span class="pficon pficon-info pull-left"></span>
330
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
331
+ <div class="drawer-pf-notification-info">
332
+ <span class="date">3/31/16</span>
333
+ <span class="time">12:12:44 PM</span>
334
+ </div>
335
+ </div>
336
+ <div class="drawer-pf-notification unread">
337
+ <div class="dropdown pull-right dropdown-kebab-pf">
338
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
339
+ <span class="fa fa-ellipsis-v"></span>
340
+ </button>
341
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
342
+ <li><a href="#">Action</a></li>
343
+ <li><a href="#">Another action</a></li>
344
+ <li><a href="#">Something else here</a></li>
345
+ <li role="separator" class="divider"></li>
346
+ <li><a href="#">Separated link</a></li>
347
+ </ul>
348
+ </div>
349
+
350
+ <span class="pficon pficon-ok pull-left"></span>
351
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
352
+ <div class="drawer-pf-notification-info">
353
+ <span class="date">3/31/16</span>
354
+ <span class="time">12:12:44 PM</span>
355
+ </div>
356
+ </div>
357
+ <div class="drawer-pf-notification">
358
+ <div class="dropdown pull-right dropdown-kebab-pf">
359
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
360
+ <span class="fa fa-ellipsis-v"></span>
361
+ </button>
362
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
363
+ <li><a href="#">Action</a></li>
364
+ <li><a href="#">Another action</a></li>
365
+ <li><a href="#">Something else here</a></li>
366
+ <li role="separator" class="divider"></li>
367
+ <li><a href="#">Separated link</a></li>
368
+ </ul>
369
+ </div>
370
+
371
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
372
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
373
+ <div class="drawer-pf-notification-info">
374
+ <span class="date">3/31/16</span>
375
+ <span class="time">12:12:44 PM</span>
376
+ </div>
377
+ </div>
378
+ <div class="drawer-pf-notification">
379
+ <div class="dropdown pull-right dropdown-kebab-pf">
380
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
381
+ <span class="fa fa-ellipsis-v"></span>
382
+ </button>
383
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
384
+ <li><a href="#">Action</a></li>
385
+ <li><a href="#">Another action</a></li>
386
+ <li><a href="#">Something else here</a></li>
387
+ <li role="separator" class="divider"></li>
388
+ <li><a href="#">Separated link</a></li>
389
+ </ul>
390
+ </div>
391
+
392
+ <span class="pficon pficon-error-circle-o pull-left"></span>
393
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
394
+ <div class="drawer-pf-notification-info">
395
+ <span class="date">3/31/16</span>
396
+ <span class="time">12:12:44 PM</span>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="drawer-pf-notification unread">
401
+ <div class="dropdown pull-right dropdown-kebab-pf">
402
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
403
+ <span class="fa fa-ellipsis-v"></span>
404
+ </button>
405
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
406
+ <li><a href="#">Action</a></li>
407
+ <li><a href="#">Another action</a></li>
408
+ <li><a href="#">Something else here</a></li>
409
+ <li role="separator" class="divider"></li>
410
+ <li><a href="#">Separated link</a></li>
411
+ </ul>
412
+ </div>
413
+
414
+ <span class="pficon pficon-info pull-left"></span>
415
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
416
+ <div class="drawer-pf-notification-info">
417
+ <span class="date">3/31/16</span>
418
+ <span class="time">12:12:44 PM</span>
419
+ </div>
420
+ </div>
421
+ <div class="drawer-pf-notification unread">
422
+ <div class="dropdown pull-right dropdown-kebab-pf">
423
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
424
+ <span class="fa fa-ellipsis-v"></span>
425
+ </button>
426
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
427
+ <li><a href="#">Action</a></li>
428
+ <li><a href="#">Another action</a></li>
429
+ <li><a href="#">Something else here</a></li>
430
+ <li role="separator" class="divider"></li>
431
+ <li><a href="#">Separated link</a></li>
432
+ </ul>
433
+ </div>
434
+
435
+ <span class="pficon pficon-ok pull-left"></span>
436
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
437
+ <div class="drawer-pf-notification-info">
438
+ <span class="date">3/31/16</span>
439
+ <span class="time">12:12:44 PM</span>
440
+ </div>
441
+ </div>
442
+ <div class="drawer-pf-notification">
443
+ <div class="dropdown pull-right dropdown-kebab-pf">
444
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
445
+ <span class="fa fa-ellipsis-v"></span>
446
+ </button>
447
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
448
+ <li><a href="#">Action</a></li>
449
+ <li><a href="#">Another action</a></li>
450
+ <li><a href="#">Something else here</a></li>
451
+ <li role="separator" class="divider"></li>
452
+ <li><a href="#">Separated link</a></li>
453
+ </ul>
454
+ </div>
455
+
456
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
457
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
458
+ <div class="drawer-pf-notification-info">
459
+ <span class="date">3/31/16</span>
460
+ <span class="time">12:12:44 PM</span>
461
+ </div>
462
+ </div>
463
+ <div class="drawer-pf-notification">
464
+ <div class="dropdown pull-right dropdown-kebab-pf">
465
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
466
+ <span class="fa fa-ellipsis-v"></span>
467
+ </button>
468
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
469
+ <li><a href="#">Action</a></li>
470
+ <li><a href="#">Another action</a></li>
471
+ <li><a href="#">Something else here</a></li>
472
+ <li role="separator" class="divider"></li>
473
+ <li><a href="#">Separated link</a></li>
474
+ </ul>
475
+ </div>
476
+
477
+ <span class="pficon pficon-error-circle-o pull-left"></span>
478
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
479
+ <div class="drawer-pf-notification-info">
480
+ <span class="date">3/31/16</span>
481
+ <span class="time">12:12:44 PM</span>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="drawer-pf-loading text-center">
486
+ <span class="spinner spinner-xs spinner-inline"></span> Loading More
487
+ </div>
488
+ </div>
489
+ <div class="drawer-pf-action">
490
+ <button class="btn btn-link btn-block">Mark All Read</button>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ <div class="panel panel-default">
495
+ <div class="panel-heading" data-component="collapse-heading">
496
+ <h4 class="panel-title">
497
+ <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseThree">
498
+ Notification Tab 3
499
+ </a>
500
+ </h4>
501
+ <span class="panel-counter">5 New Events</span>
502
+ </div>
503
+ <div id="fixedCollapseThree" class="panel-collapse collapse">
504
+ <div class="panel-body">
505
+ <div class="drawer-pf-notification unread">
506
+ <div class="dropdown pull-right dropdown-kebab-pf">
507
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
508
+ <span class="fa fa-ellipsis-v"></span>
509
+ </button>
510
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
511
+ <li><a href="#">Action</a></li>
512
+ <li><a href="#">Another action</a></li>
513
+ <li><a href="#">Something else here</a></li>
514
+ <li role="separator" class="divider"></li>
515
+ <li><a href="#">Separated link</a></li>
516
+ </ul>
517
+ </div>
518
+
519
+ <span class="pficon pficon-info pull-left"></span>
520
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
521
+ <div class="drawer-pf-notification-info">
522
+ <span class="date">3/31/16</span>
523
+ <span class="time">12:12:44 PM</span>
524
+ </div>
525
+ </div>
526
+ <div class="drawer-pf-notification unread">
527
+ <div class="dropdown pull-right dropdown-kebab-pf">
528
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
529
+ <span class="fa fa-ellipsis-v"></span>
530
+ </button>
531
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
532
+ <li><a href="#">Action</a></li>
533
+ <li><a href="#">Another action</a></li>
534
+ <li><a href="#">Something else here</a></li>
535
+ <li role="separator" class="divider"></li>
536
+ <li><a href="#">Separated link</a></li>
537
+ </ul>
538
+ </div>
539
+
540
+ <span class="pficon pficon-ok pull-left"></span>
541
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
542
+ <div class="drawer-pf-notification-info">
543
+ <span class="date">3/31/16</span>
544
+ <span class="time">12:12:44 PM</span>
545
+ </div>
546
+ </div>
547
+ <div class="drawer-pf-notification">
548
+ <div class="dropdown pull-right dropdown-kebab-pf">
549
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
550
+ <span class="fa fa-ellipsis-v"></span>
551
+ </button>
552
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
553
+ <li><a href="#">Action</a></li>
554
+ <li><a href="#">Another action</a></li>
555
+ <li><a href="#">Something else here</a></li>
556
+ <li role="separator" class="divider"></li>
557
+ <li><a href="#">Separated link</a></li>
558
+ </ul>
559
+ </div>
560
+
561
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
562
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
563
+ <div class="drawer-pf-notification-info">
564
+ <span class="date">3/31/16</span>
565
+ <span class="time">12:12:44 PM</span>
566
+ </div>
567
+ </div>
568
+ <div class="drawer-pf-notification">
569
+ <div class="dropdown pull-right dropdown-kebab-pf">
570
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
571
+ <span class="fa fa-ellipsis-v"></span>
572
+ </button>
573
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
574
+ <li><a href="#">Action</a></li>
575
+ <li><a href="#">Another action</a></li>
576
+ <li><a href="#">Something else here</a></li>
577
+ <li role="separator" class="divider"></li>
578
+ <li><a href="#">Separated link</a></li>
579
+ </ul>
580
+ </div>
581
+
582
+ <span class="pficon pficon-error-circle-o pull-left"></span>
583
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
584
+ <div class="drawer-pf-notification-info">
585
+ <span class="date">3/31/16</span>
586
+ <span class="time">12:12:44 PM</span>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="drawer-pf-notification unread">
591
+ <div class="dropdown pull-right dropdown-kebab-pf">
592
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
593
+ <span class="fa fa-ellipsis-v"></span>
594
+ </button>
595
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
596
+ <li><a href="#">Action</a></li>
597
+ <li><a href="#">Another action</a></li>
598
+ <li><a href="#">Something else here</a></li>
599
+ <li role="separator" class="divider"></li>
600
+ <li><a href="#">Separated link</a></li>
601
+ </ul>
602
+ </div>
603
+
604
+ <span class="pficon pficon-info pull-left"></span>
605
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
606
+ <div class="drawer-pf-notification-info">
607
+ <span class="date">3/31/16</span>
608
+ <span class="time">12:12:44 PM</span>
609
+ </div>
610
+ </div>
611
+ <div class="drawer-pf-notification unread">
612
+ <div class="dropdown pull-right dropdown-kebab-pf">
613
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
614
+ <span class="fa fa-ellipsis-v"></span>
615
+ </button>
616
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
617
+ <li><a href="#">Action</a></li>
618
+ <li><a href="#">Another action</a></li>
619
+ <li><a href="#">Something else here</a></li>
620
+ <li role="separator" class="divider"></li>
621
+ <li><a href="#">Separated link</a></li>
622
+ </ul>
623
+ </div>
624
+
625
+ <span class="pficon pficon-ok pull-left"></span>
626
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
627
+ <div class="drawer-pf-notification-info">
628
+ <span class="date">3/31/16</span>
629
+ <span class="time">12:12:44 PM</span>
630
+ </div>
631
+ </div>
632
+ <div class="drawer-pf-notification">
633
+ <div class="dropdown pull-right dropdown-kebab-pf">
634
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
635
+ <span class="fa fa-ellipsis-v"></span>
636
+ </button>
637
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
638
+ <li><a href="#">Action</a></li>
639
+ <li><a href="#">Another action</a></li>
640
+ <li><a href="#">Something else here</a></li>
641
+ <li role="separator" class="divider"></li>
642
+ <li><a href="#">Separated link</a></li>
643
+ </ul>
644
+ </div>
645
+
646
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
647
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
648
+ <div class="drawer-pf-notification-info">
649
+ <span class="date">3/31/16</span>
650
+ <span class="time">12:12:44 PM</span>
651
+ </div>
652
+ </div>
653
+ <div class="drawer-pf-notification">
654
+ <div class="dropdown pull-right dropdown-kebab-pf">
655
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
656
+ <span class="fa fa-ellipsis-v"></span>
657
+ </button>
658
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
659
+ <li><a href="#">Action</a></li>
660
+ <li><a href="#">Another action</a></li>
661
+ <li><a href="#">Something else here</a></li>
662
+ <li role="separator" class="divider"></li>
663
+ <li><a href="#">Separated link</a></li>
664
+ </ul>
665
+ </div>
666
+
667
+ <span class="pficon pficon-error-circle-o pull-left"></span>
668
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
669
+ <div class="drawer-pf-notification-info">
670
+ <span class="date">3/31/16</span>
671
+ <span class="time">12:12:44 PM</span>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="drawer-pf-notification unread">
676
+ <div class="dropdown pull-right dropdown-kebab-pf">
677
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
678
+ <span class="fa fa-ellipsis-v"></span>
679
+ </button>
680
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
681
+ <li><a href="#">Action</a></li>
682
+ <li><a href="#">Another action</a></li>
683
+ <li><a href="#">Something else here</a></li>
684
+ <li role="separator" class="divider"></li>
685
+ <li><a href="#">Separated link</a></li>
686
+ </ul>
687
+ </div>
688
+
689
+ <span class="pficon pficon-info pull-left"></span>
690
+ <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
691
+ <div class="drawer-pf-notification-info">
692
+ <span class="date">3/31/16</span>
693
+ <span class="time">12:12:44 PM</span>
694
+ </div>
695
+ </div>
696
+ <div class="drawer-pf-notification unread">
697
+ <div class="dropdown pull-right dropdown-kebab-pf">
698
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
699
+ <span class="fa fa-ellipsis-v"></span>
700
+ </button>
701
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
702
+ <li><a href="#">Action</a></li>
703
+ <li><a href="#">Another action</a></li>
704
+ <li><a href="#">Something else here</a></li>
705
+ <li role="separator" class="divider"></li>
706
+ <li><a href="#">Separated link</a></li>
707
+ </ul>
708
+ </div>
709
+
710
+ <span class="pficon pficon-ok pull-left"></span>
711
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
712
+ <div class="drawer-pf-notification-info">
713
+ <span class="date">3/31/16</span>
714
+ <span class="time">12:12:44 PM</span>
715
+ </div>
716
+ </div>
717
+ <div class="drawer-pf-notification">
718
+ <div class="dropdown pull-right dropdown-kebab-pf">
719
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
720
+ <span class="fa fa-ellipsis-v"></span>
721
+ </button>
722
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
723
+ <li><a href="#">Action</a></li>
724
+ <li><a href="#">Another action</a></li>
725
+ <li><a href="#">Something else here</a></li>
726
+ <li role="separator" class="divider"></li>
727
+ <li><a href="#">Separated link</a></li>
728
+ </ul>
729
+ </div>
730
+
731
+ <span class="pficon pficon-warning-triangle-o pull-left"></span>
732
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
733
+ <div class="drawer-pf-notification-info">
734
+ <span class="date">3/31/16</span>
735
+ <span class="time">12:12:44 PM</span>
736
+ </div>
737
+ </div>
738
+ <div class="drawer-pf-notification">
739
+ <div class="dropdown pull-right dropdown-kebab-pf">
740
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
741
+ <span class="fa fa-ellipsis-v"></span>
742
+ </button>
743
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
744
+ <li><a href="#">Action</a></li>
745
+ <li><a href="#">Another action</a></li>
746
+ <li><a href="#">Something else here</a></li>
747
+ <li role="separator" class="divider"></li>
748
+ <li><a href="#">Separated link</a></li>
749
+ </ul>
750
+ </div>
751
+
752
+ <span class="pficon pficon-error-circle-o pull-left"></span>
753
+ <span class="drawer-pf-notification-message">Another Event Notification</span>
754
+ <div class="drawer-pf-notification-info">
755
+ <span class="date">3/31/16</span>
756
+ <span class="time">12:12:44 PM</span>
757
+ </div>
758
+ </div>
759
+
760
+ </div>
761
+ <div class="drawer-pf-action">
762
+ <button class="btn btn-link btn-block">Mark All Read</button>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ <script>
769
+ $(document).ready(function() {
770
+ // Show/Hide Notifications Drawer
771
+ $('.drawer-pf-trigger').click(function() {
772
+ var $drawer = $('.drawer-pf');
773
+
774
+ $(this).toggleClass('open');
775
+ if ($drawer.hasClass('hide')) {
776
+ $drawer.removeClass('hide');
777
+ setTimeout(function () {
778
+ if (window.dispatchEvent) {
779
+ window.dispatchEvent(new Event('resize'));
780
+ }
781
+ // Special case for IE
782
+ if ($(document).fireEvent) {
783
+ $(document).fireEvent('onresize');
784
+ }
785
+ }, 100);
786
+ } else {
787
+ $drawer.addClass('hide');
788
+ }
789
+ });
790
+ // Mark All Read
791
+ $('.panel-collapse').each(function (index, panel) {
792
+ var $panel = $(panel);
793
+ $panel.on('click', '.drawer-pf-action .btn', function() {
794
+ $panel.find('.unread').removeClass('unread');
795
+ $(panel.parentElement).find('.panel-counter').text('0 New Events');
796
+ });
797
+ });
798
+
799
+ $('#notification-drawer-accordion').initCollapseHeights('.panel-body');
800
+ });
801
+ </script>
802
+ <ul class="nav navbar-nav navbar-primary">
803
+ <li>
804
+ <a href="#">First Link</a>
805
+ </li>
806
+ <li class="active">
807
+ <a href="#">Another Link</a>
808
+ </li>
809
+ <li>
810
+ <a href="#">And Another</a>
811
+ </li>
812
+ <li>
813
+ <a href="#">As a General Rule</a>
814
+ </li>
815
+ <li>
816
+ <a href="#">Five to Seven Links</a>
817
+ </li>
818
+ <li>
819
+ <a href="#">Is Good</a>
820
+ </li>
821
+ </ul>
822
+ </div>
823
+ </nav>
824
+ <div class="container-fluid container-cards-pf">
825
+ <div class="row row-cards-pf">
826
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
827
+ <div class="col-xs-12 col-sm-6 col-md-3">
828
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
829
+ <h2 class="card-pf-title">
830
+ <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
831
+ </h2>
832
+ <div class="card-pf-body">
833
+ <p class="card-pf-aggregate-status-notifications">
834
+ <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>
835
+ </p>
836
+ </div>
837
+ </div>
838
+
839
+ </div>
840
+ <div class="col-xs-12 col-sm-6 col-md-3">
841
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
842
+ <h2 class="card-pf-title">
843
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
844
+ </h2>
845
+ <div class="card-pf-body">
846
+ <p class="card-pf-aggregate-status-notifications">
847
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
848
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
849
+ </p>
850
+ </div>
851
+ </div>
852
+
853
+ </div>
854
+ <div class="col-xs-12 col-sm-6 col-md-3">
855
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
856
+ <h2 class="card-pf-title">
857
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
858
+ </h2>
859
+ <div class="card-pf-body">
860
+ <p class="card-pf-aggregate-status-notifications">
861
+ <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
862
+ </p>
863
+ </div>
864
+ </div>
865
+
866
+ </div>
867
+ <div class="col-xs-12 col-sm-6 col-md-3">
868
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
869
+ <h2 class="card-pf-title">
870
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
871
+ </h2>
872
+ <div class="card-pf-body">
873
+ <p class="card-pf-aggregate-status-notifications">
874
+ <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
875
+ </p>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ </div><!-- /row -->
880
+ <div class="row row-cards-pf">
881
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
882
+ <div class="col-xs-12 col-sm-6 col-md-3">
883
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
884
+ <h2 class="card-pf-title">
885
+ <span class="fa fa-rebel"></span>
886
+ <span class="card-pf-aggregate-status-count">0</span> Ipsum
887
+ </h2>
888
+ <div class="card-pf-body">
889
+ <p class="card-pf-aggregate-status-notifications">
890
+ <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>
891
+ </p>
892
+ </div>
893
+ </div>
894
+
895
+ </div>
896
+ <div class="col-xs-12 col-sm-6 col-md-3">
897
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
898
+ <h2 class="card-pf-title">
899
+ <a href="#">
900
+ <span class="fa fa-paper-plane"></span>
901
+ <span class="card-pf-aggregate-status-count">20</span> Amet
902
+ </a>
903
+ </h2>
904
+ <div class="card-pf-body">
905
+ <p class="card-pf-aggregate-status-notifications">
906
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
907
+ </p>
908
+ </div>
909
+ </div>
910
+
911
+ </div>
912
+ <div class="col-xs-12 col-sm-6 col-md-3">
913
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
914
+ <h2 class="card-pf-title">
915
+ <a href="#">
916
+ <span class="pficon pficon-cluster"></span>
917
+ <span class="card-pf-aggregate-status-count">9</span> Adipiscing
918
+ </a>
919
+ </h2>
920
+ <div class="card-pf-body">
921
+ <p class="card-pf-aggregate-status-notifications">
922
+ <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
923
+ </p>
924
+ </div>
925
+ </div>
926
+
927
+ </div>
928
+ <div class="col-xs-12 col-sm-6 col-md-3">
929
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
930
+ <h2 class="card-pf-title">
931
+ <a href="#">
932
+ <span class="pficon pficon-image"></span>
933
+ <span class="card-pf-aggregate-status-count">12</span> Lorem
934
+ </a>
935
+ </h2>
936
+ <div class="card-pf-body">
937
+ <p class="card-pf-aggregate-status-notifications">
938
+ <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
939
+ </p>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </div>
944
+ <div class="row row-cards-pf">
945
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
946
+ <div class="col-xs-12 col-sm-6">
947
+ <div class="card-pf">
948
+ <div class="card-pf-heading">
949
+ <h2 class="card-pf-title">
950
+ Top Utilized Clusters
951
+ </h2>
952
+ </div>
953
+ <div class="card-pf-body">
954
+ <div class="progress-description">
955
+ RHOS6-Controller
956
+ </div>
957
+ <div class="progress progress-label-top-right">
958
+ <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">
959
+ <span><strong>190.0 of 200.0 GB</strong> Used</span>
960
+ </div>
961
+ <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">
962
+ <span class="sr-only">5% Available</span>
963
+ </div>
964
+ </div>
965
+ <div class="progress-description">
966
+ CFMEQE-Cluster
967
+ </div>
968
+ <div class="progress progress-label-top-right">
969
+ <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">
970
+ <span><strong>100.0 of 200.0 GB</strong> Used</span>
971
+ </div>
972
+ <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">
973
+ <span class="sr-only">50% Available</span>
974
+ </div>
975
+ </div>
976
+ <div class="progress-description">
977
+ RHOS-Undercloud
978
+ </div>
979
+ <div class="progress progress-label-top-right">
980
+ <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">
981
+ <span><strong>140.0 of 200.0 GB</strong> Used</span>
982
+ </div>
983
+ <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">
984
+ <span class="sr-only">30% Available</span>
985
+ </div>
986
+ </div>
987
+ <div class="progress-description">
988
+ RHEL6-Controller
989
+ </div>
990
+ <div class="progress progress-label-top-right">
991
+ <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">
992
+ <span><strong>153.0 of 200.0 GB</strong> Used</span>
993
+ </div>
994
+ <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">
995
+ <span class="sr-only">23.5% Available</span>
996
+ </div>
997
+ </div>
998
+ </div>
999
+ </div>
1000
+
1001
+ </div>
1002
+ <div class="col-xs-12 col-sm-6">
1003
+ <div class="card-pf">
1004
+ <div class="card-pf-heading">
1005
+ <h2 class="card-pf-title">
1006
+ Quotas
1007
+ </h2>
1008
+ </div>
1009
+ <div class="card-pf-body">
1010
+ <div class="progress-container progress-description-left progress-label-right">
1011
+ <div class="progress-description">
1012
+ CPU
1013
+ </div>
1014
+ <div class="progress">
1015
+ <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
1016
+ <span><strong>115 of 460</strong> MHz</span>
1017
+ </div>
1018
+ <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">
1019
+ <span class="sr-only">75% Available</span>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ <div class="progress-container progress-description-left progress-label-right">
1024
+ <div class="progress-description">
1025
+ Memory
1026
+ </div>
1027
+ <div class="progress">
1028
+ <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">
1029
+ <span><strong>8 of 16</strong> GB</span>
1030
+ </div>
1031
+ <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">
1032
+ <span class="sr-only">50% Available</span>
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+ <div class="progress-container progress-description-left progress-label-right">
1037
+ <div class="progress-description">
1038
+ Pods
1039
+ </div>
1040
+ <div class="progress">
1041
+ <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">
1042
+ <span><strong>5 of 8</strong> Total</span>
1043
+ </div>
1044
+ <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">
1045
+ <span class="sr-only">37.5% Available</span>
1046
+ </div>
1047
+ </div>
1048
+ </div>
1049
+ <div class="progress-container progress-description-left progress-label-right">
1050
+ <div class="progress-description">
1051
+ Services
1052
+ </div>
1053
+ <div class="progress">
1054
+ <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
1055
+ <span><strong>2 of 2</strong> Total</span>
1056
+ </div>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ </div>
1063
+ </div><!-- /row -->
1064
+ <div class="row row-cards-pf">
1065
+ <div class="col-md-12">
1066
+ <div class="card-pf card-pf-utilization">
1067
+ <div class="card-pf-heading">
1068
+ <p class="card-pf-heading-details">Last 30 days</p>
1069
+ <h2 class="card-pf-title">
1070
+ Utilization
1071
+ </h2>
1072
+ </div>
1073
+ <div class="card-pf-body">
1074
+ <div class="row">
1075
+ <div class="col-xs-12 col-sm-4 col-md-4">
1076
+ <h3 class="card-pf-subtitle">CPU</h3>
1077
+ <p class="card-pf-utilization-details">
1078
+ <span class="card-pf-utilization-card-details-count">50</span>
1079
+ <span class="card-pf-utilization-card-details-description">
1080
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
1081
+ <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
1082
+ </span>
1083
+ </p>
1084
+ <div id="chart-pf-donut-1"></div>
1085
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
1086
+ <script>
1087
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
1088
+ donutConfig.bindto = '#chart-pf-donut-1';
1089
+ donutConfig.color = {
1090
+ pattern: ["#cc0000","#D1D1D1"]
1091
+ };
1092
+ donutConfig.data = {
1093
+ type: "donut",
1094
+ columns: [
1095
+ ["Used", 95],
1096
+ ["Available", 5]
1097
+ ],
1098
+ groups: [
1099
+ ["used", "available"]
1100
+ ],
1101
+ order: null
1102
+ };
1103
+ donutConfig.tooltip = {
1104
+ contents: function (d) {
1105
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
1106
+ Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
1107
+ '</span>';
1108
+ }
1109
+ };
1110
+
1111
+ var chart1 = c3.generate(donutConfig);
1112
+ var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
1113
+ donutChartTitle.text("");
1114
+ donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
1115
+ donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
1116
+
1117
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
1118
+ sparklineConfig.bindto = '#chart-pf-sparkline-1';
1119
+ sparklineConfig.data = {
1120
+ columns: [
1121
+ ['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
1122
+ ],
1123
+ type: 'area'
1124
+ };
1125
+ var chart2 = c3.generate(sparklineConfig);
1126
+ </script>
1127
+ </div>
1128
+ <div class="col-xs-12 col-sm-4 col-md-4">
1129
+ <h3 class="card-pf-subtitle">Memory</h3>
1130
+ <p class="card-pf-utilization-details">
1131
+ <span class="card-pf-utilization-card-details-count">256</span>
1132
+ <span class="card-pf-utilization-card-details-description">
1133
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
1134
+ <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
1135
+ </span>
1136
+ </p>
1137
+ <div id="chart-pf-donut-2"></div>
1138
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
1139
+ <script>
1140
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
1141
+ donutConfig.bindto = '#chart-pf-donut-2';
1142
+ donutConfig.color = {
1143
+ pattern: ["#3f9c35","#D1D1D1"]
1144
+ };
1145
+ donutConfig.data = {
1146
+ type: "donut",
1147
+ columns: [
1148
+ ["Used", 41],
1149
+ ["Available", 59]
1150
+ ],
1151
+ groups: [
1152
+ ["used", "available"]
1153
+ ],
1154
+ order: null
1155
+ };
1156
+ donutConfig.tooltip = {
1157
+ contents: function (d) {
1158
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
1159
+ Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
1160
+ '</span>';
1161
+ }
1162
+ };
1163
+
1164
+ var chart3 = c3.generate(donutConfig);
1165
+ var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
1166
+ donutChartTitle.text("");
1167
+ donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
1168
+ donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
1169
+
1170
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
1171
+ sparklineConfig.bindto = '#chart-pf-sparkline-2';
1172
+ sparklineConfig.data = {
1173
+ columns: [
1174
+ ['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
1175
+ ],
1176
+ type: 'area'
1177
+ };
1178
+ var chart4 = c3.generate(sparklineConfig);
1179
+ </script>
1180
+ </div>
1181
+ <div class="col-xs-12 col-sm-4 col-md-4">
1182
+ <h3 class="card-pf-subtitle">Network</h3>
1183
+ <p class="card-pf-utilization-details">
1184
+ <span class="card-pf-utilization-card-details-count">200</span>
1185
+ <span class="card-pf-utilization-card-details-description">
1186
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
1187
+ <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
1188
+ </span>
1189
+ </p>
1190
+ <div id="chart-pf-donut-3"></div>
1191
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
1192
+ <script>
1193
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
1194
+ donutConfig.bindto = '#chart-pf-donut-3';
1195
+ donutConfig.color = {
1196
+ pattern: ["#EC7A08","#D1D1D1"]
1197
+ };
1198
+ donutConfig.data = {
1199
+ type: "donut",
1200
+ columns: [
1201
+ ["Used", 85],
1202
+ ["Available", 15]
1203
+ ],
1204
+ groups: [
1205
+ ["used", "available"]
1206
+ ],
1207
+ order: null
1208
+ };
1209
+ donutConfig.tooltip = {
1210
+ contents: function (d) {
1211
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
1212
+ Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
1213
+ '</span>';
1214
+ }
1215
+ };
1216
+
1217
+ var chart5 = c3.generate(donutConfig);
1218
+ var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
1219
+ donutChartTitle.text("");
1220
+ donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
1221
+ donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
1222
+
1223
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
1224
+ sparklineConfig.bindto = '#chart-pf-sparkline-3';
1225
+ sparklineConfig.data = {
1226
+ columns: [
1227
+ ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
1228
+ ],
1229
+ type: 'area'
1230
+ };
1231
+ var chart6 = c3.generate(sparklineConfig);
1232
+ </script>
1233
+ </div>
1234
+ </div>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ </div>
1239
+ </div><!-- /row -->
1240
+ <div class="row row-cards-pf">
1241
+ <div class="col-xs-12 col-sm-4 col-md-4">
1242
+ <div class="card-pf card-pf-utilization">
1243
+ <h2 class="card-pf-title">
1244
+ Network
1245
+ </h2>
1246
+ <div class="card-pf-body">
1247
+ <p class="card-pf-utilization-details">
1248
+ <span class="card-pf-utilization-card-details-count">200</span>
1249
+ <span class="card-pf-utilization-card-details-description">
1250
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
1251
+ <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
1252
+ </span>
1253
+ </p>
1254
+ <div id="chart-pf-donut-4"></div>
1255
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
1256
+ <script>
1257
+ var c3ChartDefaults = $().c3ChartDefaults();
1258
+
1259
+ var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
1260
+ donutConfig.bindto = '#chart-pf-donut-4';
1261
+ donutConfig.color = {
1262
+ pattern: ["#EC7A08","#D1D1D1"]
1263
+ };
1264
+ donutConfig.data = {
1265
+ type: "donut",
1266
+ columns: [
1267
+ ["Used", 85],
1268
+ ["Available", 15]
1269
+ ],
1270
+ groups: [
1271
+ ["used", "available"]
1272
+ ],
1273
+ order: null
1274
+ };
1275
+ donutConfig.tooltip = {
1276
+ contents: function (d) {
1277
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
1278
+ Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
1279
+ '</span>';
1280
+ }
1281
+ };
1282
+
1283
+ var chart1 = c3.generate(donutConfig);
1284
+ var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
1285
+ donutChartTitle.text("");
1286
+ donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
1287
+ donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
1288
+
1289
+ var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
1290
+ sparklineConfig.bindto = '#chart-pf-sparkline-4';
1291
+ sparklineConfig.data = {
1292
+ columns: [
1293
+ ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
1294
+ ],
1295
+ type: 'area'
1296
+ };
1297
+
1298
+ var chart2 = c3.generate(sparklineConfig);
1299
+ </script>
1300
+ </div>
1301
+ </div>
1302
+
1303
+ </div>
1304
+ </div><!-- /row -->
1305
+ <div class="row row-cards-pf">
1306
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
1307
+ <div class="col-xs-12 col-sm-6 col-md-5">
1308
+ <div class="card-pf">
1309
+ <div class="card-pf-heading">
1310
+ <div class="dropdown card-pf-time-frame-filter">
1311
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
1312
+ Last 30 Days <span class="caret"></span>
1313
+ </button>
1314
+ <ul class="dropdown-menu dropdown-menu-right" role="menu">
1315
+ <li><a href="#">Last 60 Days</a></li>
1316
+ <li><a href="#">Last 90 Days</a></li>
1317
+ </ul>
1318
+ </div>
1319
+ <h2 class="card-pf-title">
1320
+ Card Title
1321
+ </h2>
1322
+ </div>
1323
+ <div class="card-pf-body">
1324
+ <p>[card contents]</p>
1325
+ </div>
1326
+ </div>
1327
+
1328
+ </div>
1329
+ <div class="col-xs-12 col-sm-6 col-md-7">
1330
+ <div class="card-pf">
1331
+ <h2 class="card-pf-title">
1332
+ Card Title
1333
+ </h2>
1334
+ <div class="card-pf-body">
1335
+ <p>[card contents]</p>
1336
+ </div>
1337
+ <div class="card-pf-footer">
1338
+ <div class="dropdown card-pf-time-frame-filter">
1339
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
1340
+ Last 30 Days <span class="caret"></span>
1341
+ </button>
1342
+ <ul class="dropdown-menu dropdown-menu-right" role="menu">
1343
+ <li><a href="#">Last 60 Days</a></li>
1344
+ <li><a href="#">Last 90 Days</a></li>
1345
+ </ul>
1346
+ </div>
1347
+ <p>
1348
+ <a href="#" class="card-pf-link-with-icon">
1349
+ <span class="pficon pficon-add-circle-o"></span>Add New Cluster
1350
+ </a>
1351
+ </p>
1352
+ </div>
1353
+ </div>
1354
+
1355
+ </div>
1356
+ </div><!-- /row -->
1357
+ <div class="row row-cards-pf">
1358
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
1359
+ <div class="col-xs-12 col-sm-5 col-md-5">
1360
+ <div class="card-pf">
1361
+ <h2 class="card-pf-title">
1362
+ Card Title
1363
+ </h2>
1364
+ <div class="card-pf-body">
1365
+ <p>[card contents]</p>
1366
+ </div>
1367
+ <div class="card-pf-footer">
1368
+ <div class="dropdown card-pf-time-frame-filter">
1369
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
1370
+ Last 30 Days <span class="caret"></span>
1371
+ </button>
1372
+ <ul class="dropdown-menu dropdown-menu-right" role="menu">
1373
+ <li><a href="#">Last 60 Days</a></li>
1374
+ <li><a href="#">Last 90 Days</a></li>
1375
+ </ul>
1376
+ </div>
1377
+ <p>
1378
+ <a href="#" class="card-pf-link-with-icon">
1379
+ <span class="pficon pficon-flag"></span>View CPU Events
1380
+ </a>
1381
+ </p>
1382
+ </div>
1383
+ </div>
1384
+ </div>
1385
+ <div class="col-xs-12 col-sm-7 col-md-7">
1386
+ <div class="card-pf">
1387
+ <h2 class="card-pf-title">
1388
+ Card Title
1389
+ </h2>
1390
+ <div class="card-pf-body">
1391
+ <p>[card contents]</p>
1392
+ </div>
1393
+ </div>
1394
+ </div>
1395
+ </div>
1396
+ <div class="row row-cards-pf">
1397
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
1398
+ <div class="col-xs-6 col-sm-8 col-md-8">
1399
+ <div class="card-pf">
1400
+ <div class="card-pf-body">
1401
+ <p>[card contents]</p>
1402
+ </div>
1403
+ <div class="card-pf-footer">
1404
+ <p><a href="#">Footer link</a></p>
1405
+ </div>
1406
+ </div>
1407
+ </div>
1408
+ <div class="col-xs-6 col-sm-4 col-md-4">
1409
+ <div class="card-pf">
1410
+ <div class="card-pf-body">
1411
+ <p>[card contents]</p>
1412
+ </div>
1413
+ <div class="card-pf-footer">
1414
+ <p><a href="#">Footer link</a></p>
1415
+ </div>
1416
+ </div>
1417
+ </div>
1418
+ </div><!-- /row -->
1419
+ <div class="row row-cards-pf">
1420
+ <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
1421
+ <div class="col-xs-6 col-sm-6 col-md-6">
1422
+ <div class="card-pf">
1423
+ <div class="card-pf-body">
1424
+ <p>[card contents]</p>
1425
+ </div>
1426
+ </div>
1427
+ </div>
1428
+ <div class="col-xs-6 col-sm-6 col-md-6">
1429
+ <div class="card-pf">
1430
+ <div class="card-pf-body">
1431
+ <p>[card contents]</p>
1432
+ </div>
1433
+ </div>
1434
+ </div>
1435
+ </div><!-- /row -->
1436
+
1437
+ </div>
1438
+ <script>
1439
+ $(document).ready(function() {
1440
+ // matchHeight the contents of each .card-pf and then the .card-pf itself
1441
+ $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
1442
+ $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
1443
+ $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
1444
+ $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
1445
+
1446
+ // initialize tooltips
1447
+ $('[data-toggle="tooltip"]').tooltip();
1448
+ });
1449
+ </script>
1450
+ </body>
1451
+ </html>