patternfly-sass 3.7.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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/line-charts.html CHANGED
@@ -26,9 +26,9 @@
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/c3/0.4.10/c3.min.js"></script>
31
- <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.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/c3/0.4.11/c3.min.js"></script>
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
34
 
data/spec/html/list-group.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/list-view-rows.html ADDED
@@ -0,0 +1,592 @@
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>List View Rows - 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/c3/0.4.11/c3.min.js"></script>
31
+ <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
32
+ <script src="../../dist/js/patternfly.min.js"></script>
33
+ </head>
34
+
35
+ <body>
36
+ <div class="container">
37
+ <div class="page-header">
38
+ <h1>List View Rows</h1>
39
+ </div>
40
+ <div class="alert alert-warning">
41
+ <span class="pficon pficon-warning-triangle-o"></span>
42
+ 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>.
43
+ </div>
44
+ <hr>
45
+ <div class="list-group list-view-pf">
46
+ <div class="list-group-item">
47
+ <div class="list-view-pf-checkbox">
48
+ <input type="checkbox">
49
+ </div>
50
+ <div class="list-view-pf-actions">
51
+ <button class="btn btn-default">Action</button>
52
+ <div class="dropdown pull-right dropdown-kebab-pf">
53
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
54
+ <span class="fa fa-ellipsis-v"></span>
55
+ </button>
56
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
57
+ <li><a href="#">Action</a></li>
58
+ <li><a href="#">Another action</a></li>
59
+ <li><a href="#">Something else here</a></li>
60
+ <li role="separator" class="divider"></li>
61
+ <li><a href="#">Separated link</a></li>
62
+ </ul>
63
+ </div>
64
+
65
+ </div>
66
+ <div class="list-view-pf-main-info">
67
+ <div class="list-view-pf-left">
68
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
69
+ </div>
70
+ <div class="list-view-pf-body">
71
+ <div class="list-view-pf-description">
72
+ <div class="list-group-item-heading">
73
+ Event One
74
+ </div>
75
+ <div class="list-group-item-text">
76
+ The following snippet of text is <a href="#">rendered as link text</a>.
77
+ </div>
78
+ </div>
79
+ <div class="list-view-pf-additional-info">
80
+ <div class="list-view-pf-additional-info-item">
81
+ <span class="pficon pficon-screen"></span>
82
+ <strong>8</strong> Hosts
83
+ </div>
84
+ <div class="list-view-pf-additional-info-item">
85
+ <span class="pficon pficon-cluster"></span>
86
+ <strong>8</strong> Clusters
87
+ </div>
88
+ <div class="list-view-pf-additional-info-item">
89
+ <span class="pficon pficon-container-node"></span>
90
+ <strong>18</strong> Nodes
91
+ </div>
92
+ <div class="list-view-pf-additional-info-item">
93
+ <span class="pficon pficon-image"></span>
94
+ <strong>4</strong> Images
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ <script>
102
+ // Row Checkbox Selection
103
+ $(document).ready(function () {
104
+ $("input[type='checkbox']").change(function (e) {
105
+ if ($(this).is(":checked")) {
106
+ $(this).closest('.list-group-item').addClass("active");
107
+ } else {
108
+ $(this).closest('.list-group-item').removeClass("active");
109
+ }
110
+ });
111
+ });
112
+ </script>
113
+ <h2>Row Variations</h2>
114
+ <div class="list-group list-view-pf">
115
+ <div class="list-group-item list-view-pf-stacked">
116
+ <div class="list-view-pf-actions">
117
+ <button class="btn btn-default">Action</button>
118
+ <div class="dropdown pull-right dropdown-kebab-pf">
119
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
120
+ <span class="fa fa-ellipsis-v"></span>
121
+ </button>
122
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight1">
123
+ <li><a href="#">Action</a></li>
124
+ <li><a href="#">Another action</a></li>
125
+ <li><a href="#">Something else here</a></li>
126
+ <li role="separator" class="divider"></li>
127
+ <li><a href="#">Separated link</a></li>
128
+ </ul>
129
+ </div>
130
+
131
+ </div>
132
+ <div class="list-view-pf-main-info">
133
+ <div class="list-view-pf-left">
134
+ <span class="fa fa-plane list-view-pf-icon-lg"></span>
135
+ </div>
136
+ <div class="list-view-pf-body">
137
+ <div class="list-view-pf-description">
138
+ <div class="list-group-item-heading">
139
+ Event One
140
+ <small>Feb 23, 2015 12:32 am</small>
141
+ </div>
142
+ <div class="list-group-item-text">
143
+ The following snippet of text is <a href="#">rendered as link text</a>.
144
+ </div>
145
+ </div>
146
+ <div class="list-view-pf-additional-info">
147
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
148
+ <span id="donut-chart-1"></span>
149
+ </div>
150
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
151
+ <span id="donut-chart-2"></span>
152
+ </div>
153
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
154
+ <span id="donut-chart-3"></span>
155
+ </div>
156
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
157
+ <span id="donut-chart-4"></span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <script>
165
+ // Donut Charts
166
+ var c3ChartDefaults = $().c3ChartDefaults();
167
+ var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
168
+ customDonutChartConfig.size.height = 71;
169
+ customDonutChartConfig.donut.width = 5;
170
+ customDonutChartConfig.bindto = '#donut-chart-1';
171
+ customDonutChartConfig.data = {
172
+ type: "donut",
173
+ columns: [
174
+ ["Used", 34],
175
+ ["Available", 86]
176
+ ],
177
+ groups: [
178
+ ["used", "available"]
179
+ ],
180
+ order: null
181
+ };
182
+ c3.generate(customDonutChartConfig);
183
+ var donutChartTitle = d3.select("#donut-chart-1").select('text.c3-chart-arcs-title');
184
+ donutChartTitle.text("");
185
+ donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
186
+
187
+ customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
188
+ customDonutChartConfig.size.height = 71;
189
+ customDonutChartConfig.donut.width = 5;
190
+ customDonutChartConfig.bindto = '#donut-chart-2';
191
+ customDonutChartConfig.data = {
192
+ type: "donut",
193
+ columns: [
194
+ ["Used", 21],
195
+ ["Available", 79]
196
+ ],
197
+ groups: [
198
+ ["used", "available"]
199
+ ],
200
+ order: null
201
+ };
202
+ c3.generate(customDonutChartConfig);
203
+ donutChartTitle = d3.select("#donut-chart-2").select('text.c3-chart-arcs-title');
204
+ donutChartTitle.text("");
205
+ donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
206
+
207
+ customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
208
+ customDonutChartConfig.size.height = 71;
209
+ customDonutChartConfig.donut.width = 5;
210
+ customDonutChartConfig.bindto = '#donut-chart-3';
211
+ customDonutChartConfig.data = {
212
+ type: "donut",
213
+ columns: [
214
+ ["Used", 14],
215
+ ["Available", 86]
216
+ ],
217
+ groups: [
218
+ ["used", "available"]
219
+ ],
220
+ order: null
221
+ };
222
+ c3.generate(customDonutChartConfig);
223
+ donutChartTitle = d3.select("#donut-chart-3").select('text.c3-chart-arcs-title');
224
+ donutChartTitle.text("");
225
+ donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
226
+
227
+ customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
228
+ customDonutChartConfig.size.height = 71;
229
+ customDonutChartConfig.donut.width = 5;
230
+ customDonutChartConfig.bindto = '#donut-chart-4';
231
+ customDonutChartConfig.data = {
232
+ type: "donut",
233
+ columns: [
234
+ ["Used", 25],
235
+ ["Available", 75]
236
+ ],
237
+ groups: [
238
+ ["used", "available"]
239
+ ],
240
+ order: null
241
+ };
242
+ c3.generate(customDonutChartConfig);
243
+ donutChartTitle = d3.select("#donut-chart-4").select('text.c3-chart-arcs-title');
244
+ donutChartTitle.text("");
245
+ donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
246
+ </script>
247
+ <div class="list-group list-view-pf">
248
+ <div class="list-group-item list-view-pf-stacked">
249
+ <div class="list-view-pf-actions">
250
+ <button class="btn btn-default">Action</button>
251
+ <div class="dropdown pull-right dropdown-kebab-pf">
252
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
253
+ <span class="fa fa-ellipsis-v"></span>
254
+ </button>
255
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
256
+ <li><a href="#">Action</a></li>
257
+ <li><a href="#">Another action</a></li>
258
+ <li><a href="#">Something else here</a></li>
259
+ <li role="separator" class="divider"></li>
260
+ <li><a href="#">Separated link</a></li>
261
+ </ul>
262
+ </div>
263
+
264
+ </div>
265
+ <div class="list-view-pf-main-info">
266
+ <div class="list-view-pf-left">
267
+ <div class="list-view-pf-calendar">
268
+ March
269
+ <strong>29</strong>
270
+ </div>
271
+ </div>
272
+ <div class="list-view-pf-body">
273
+ <div class="list-view-pf-description">
274
+ <div class="list-group-item-heading">
275
+ Event One
276
+ </div>
277
+ <div class="list-group-item-text">
278
+ The following snippet of text is <a href="#">rendered as link text</a>.
279
+ </div>
280
+ </div>
281
+ <div class="list-view-pf-additional-info">
282
+ <div class="list-view-pf-additional-info-item">
283
+ <span class="pficon pficon-screen"></span>
284
+ <strong>8</strong> Clusters
285
+ </div>
286
+ <div class="list-view-pf-additional-info-item">
287
+ <span class="pficon pficon-screen"></span>
288
+ <strong>8</strong> Hosts
289
+ </div>
290
+ <div class="list-view-pf-additional-info-item">
291
+ <span class="pficon pficon-container-node"></span>
292
+ <strong>18</strong>
293
+ Nodes
294
+ </div>
295
+ <div class="list-view-pf-additional-info-item">
296
+ <span class="pficon pficon-image"></span>
297
+ <strong>4</strong> Images
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ <div class="list-group list-view-pf">
305
+ <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
306
+ <div class="list-view-pf-checkbox">
307
+ <input type="checkbox">
308
+ </div>
309
+ <div class="list-view-pf-actions">
310
+ <button class="btn btn-default">Action</button>
311
+ <button class="btn btn-default">Action</button>
312
+ <div class="dropdown pull-right dropdown-kebab-pf">
313
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
314
+ <span class="fa fa-ellipsis-v"></span>
315
+ </button>
316
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
317
+ <li><a href="#">Action</a></li>
318
+ <li><a href="#">Another action</a></li>
319
+ <li><a href="#">Something else here</a></li>
320
+ <li role="separator" class="divider"></li>
321
+ <li><a href="#">Separated link</a></li>
322
+ </ul>
323
+ </div>
324
+
325
+ </div>
326
+ <div class="list-view-pf-main-info">
327
+ <div class="list-view-pf-body">
328
+ <div class="list-view-pf-description">
329
+ <div class="list-group-item-heading">
330
+ Event Ones
331
+ </div>
332
+ <div class="list-group-item-text">
333
+ The following snippet of text is <a href="#">rendered as link text</a>.
334
+ </div>
335
+ </div>
336
+ <div class="list-view-pf-additional-info">
337
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
338
+ <strong>113,735</strong> Service One
339
+ </div>
340
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
341
+ <strong>35%</strong> Service Two
342
+ </div>
343
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
344
+ <strong>22.0%</strong> Service Three
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ <script>
352
+ // Row Checkbox Selection
353
+ $(document).ready(function () {
354
+ $("input[type='checkbox']").change(function (e) {
355
+ if ($(this).is(":checked")) {
356
+ $(this).closest('.list-group-item').addClass("active");
357
+ } else {
358
+ $(this).closest('.list-group-item').removeClass("active");
359
+ }
360
+ });
361
+ });
362
+ </script>
363
+ <div class="list-group list-view-pf">
364
+ <div class="list-group-item">
365
+ <div class="list-view-pf-checkbox">
366
+ <input type="checkbox">
367
+ </div>
368
+ <div class="list-view-pf-main-info">
369
+ <div class="list-view-pf-left">
370
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
371
+ </div>
372
+ <div class="list-view-pf-body">
373
+ <div class="list-view-pf-description">
374
+ <div class="list-group-item-heading">
375
+ Event One
376
+ </div>
377
+ <div class="list-group-item-text">
378
+ The following snippet of text is <a href="#">rendered as link text</a>.
379
+ </div>
380
+ </div>
381
+ <div class="list-view-pf-additional-info">
382
+ <div class="list-view-pf-additional-info-item">
383
+ <span class="pficon pficon-screen"></span>
384
+ <strong>8</strong> Hosts
385
+ </div>
386
+ <div class="list-view-pf-additional-info-item">
387
+ <span class="pficon pficon-cluster"></span>
388
+ <strong>8</strong> Clusters
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ <script>
396
+ // Row Checkbox Selection
397
+ $(document).ready(function () {
398
+ $("input[type='checkbox']").change(function (e) {
399
+ if ($(this).is(":checked")) {
400
+ $(this).closest('.list-group-item').addClass("active");
401
+ } else {
402
+ $(this).closest('.list-group-item').removeClass("active");
403
+ }
404
+ });
405
+ });
406
+ </script>
407
+ <div class="list-group list-view-pf list-view-pf-equalized-column">
408
+ <div class="list-group-item">
409
+ <div class="list-view-pf-main-info">
410
+ <div class="list-view-pf-left">
411
+ <span class="pficon pficon-ok list-view-pf-icon-md list-view-pf-icon-success"></span>
412
+ </div>
413
+ <div class="list-view-pf-body">
414
+ <div class="list-view-pf-description">
415
+ <div class="list-group-item-heading">
416
+ Event One
417
+ </div>
418
+ <div class="list-group-item-text">
419
+ The following snippet of text is <a href="#">rendered as link text</a>.
420
+ </div>
421
+ </div>
422
+ <div class="list-view-pf-additional-info">
423
+ <div class="list-view-pf-additional-info-item">
424
+ <span class="pficon pficon-screen"></span>
425
+ <strong>108</strong> Hosts
426
+ </div>
427
+ <div class="list-view-pf-additional-info-item">
428
+ <span class="pficon pficon-cluster"></span>
429
+ <strong>28</strong> Clusters
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ <div class="list-group-item">
436
+ <div class="list-view-pf-main-info">
437
+ <div class="list-view-pf-left">
438
+ <span class="pficon pficon-info list-view-pf-icon-md list-view-pf-icon-info"></span>
439
+ </div>
440
+ <div class="list-view-pf-body">
441
+ <div class="list-view-pf-description">
442
+ <div class="list-group-item-heading">
443
+ Event One
444
+ </div>
445
+ <div class="list-group-item-text">
446
+ The following snippet of text is <a href="#">rendered as link text</a>.
447
+ </div>
448
+ </div>
449
+ <div class="list-view-pf-additional-info">
450
+ <div class="list-view-pf-additional-info-item">
451
+ <span class="pficon pficon-screen"></span>
452
+ <strong>8</strong> Hosts
453
+ </div>
454
+ <div class="list-view-pf-additional-info-item">
455
+ <span class="pficon pficon-cluster"></span>
456
+ <strong>28</strong> Clusters
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ <div class="list-group-item">
463
+ <div class="list-view-pf-main-info">
464
+ <div class="list-view-pf-left">
465
+ <span class="pficon pficon-warning-triangle-o list-view-pf-icon-md list-view-pf-icon-warning"></span>
466
+ </div>
467
+ <div class="list-view-pf-body">
468
+ <div class="list-view-pf-description">
469
+ <div class="list-group-item-heading">
470
+ Event One
471
+ </div>
472
+ <div class="list-group-item-text">
473
+ The following snippet of text is <a href="#">rendered as link text</a>.
474
+ </div>
475
+ </div>
476
+ <div class="list-view-pf-additional-info">
477
+ <div class="list-view-pf-additional-info-item">
478
+ <span class="pficon pficon-screen"></span>
479
+ <strong>108</strong> Hosts
480
+ </div>
481
+ <div class="list-view-pf-additional-info-item">
482
+ <span class="pficon pficon-cluster"></span>
483
+ <strong>28</strong> Clusters
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ <div class="list-group-item">
490
+ <div class="list-view-pf-main-info">
491
+ <div class="list-view-pf-left">
492
+ <span class="pficon pficon-error-circle-o list-view-pf-icon-md list-view-pf-icon-danger"></span>
493
+ </div>
494
+ <div class="list-view-pf-body">
495
+ <div class="list-view-pf-description">
496
+ <div class="list-group-item-heading">
497
+ Event One
498
+ </div>
499
+ <div class="list-group-item-text">
500
+ The following snippet of text is <a href="#">rendered as link text</a>.
501
+ </div>
502
+ </div>
503
+ <div class="list-view-pf-additional-info">
504
+ <div class="list-view-pf-additional-info-item">
505
+ <span class="pficon pficon-screen"></span>
506
+ <strong>8</strong> Hosts
507
+ </div>
508
+ <div class="list-view-pf-additional-info-item">
509
+ <span class="pficon pficon-cluster"></span>
510
+ <strong>28</strong> Clusters
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ <script>
518
+ // Equalize column width
519
+ $(document).ready(function () {
520
+ var widest = 0;
521
+ $('.list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
522
+ widest = $(this).width() > widest ? $(this).width() : widest;
523
+ }).width(widest);
524
+ });
525
+ </script>
526
+ <div class="list-group list-view-pf">
527
+ <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
528
+ <div class="list-view-pf-checkbox">
529
+ <input type="checkbox">
530
+ </div>
531
+ <div class="list-view-pf-actions">
532
+ <button class="btn btn-default">Action</button>
533
+ <button class="btn btn-default">Action</button>
534
+ <div class="dropdown pull-right dropdown-kebab-pf">
535
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
536
+ <span class="fa fa-ellipsis-v"></span>
537
+ </button>
538
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
539
+ <li><a href="#">Action</a></li>
540
+ <li><a href="#">Another action</a></li>
541
+ <li><a href="#">Something else here</a></li>
542
+ <li role="separator" class="divider"></li>
543
+ <li><a href="#">Separated link</a></li>
544
+ </ul>
545
+ </div>
546
+
547
+ </div>
548
+ <div class="list-view-pf-main-info">
549
+ <div class="list-view-pf-left">
550
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
551
+ </div>
552
+ <div class="list-view-pf-body">
553
+ <div class="list-view-pf-description">
554
+ <div class="list-group-item-heading">
555
+ Event One
556
+ </div>
557
+ <div class="list-group-item-text">
558
+ The following snippet of text is <a href="#">rendered as link text</a>.
559
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
560
+ </div>
561
+ </div>
562
+ <div class="list-view-pf-additional-info">
563
+ <div class="list-view-pf-additional-info-item">
564
+ <img src="http://placehold.it/60x60" alt="placeholder image">
565
+ </div>
566
+ <div class="list-view-pf-additional-info-item">
567
+ <span class="pficon pficon-cluster"></span>
568
+ <strong>8</strong> Clusters
569
+ </div>
570
+ <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
571
+ <strong>35%</strong> Service Two
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ <script>
579
+ // Row Checkbox Selection
580
+ $(document).ready(function () {
581
+ $("input[type='checkbox']").change(function (e) {
582
+ if ($(this).is(":checked")) {
583
+ $(this).closest('.list-group-item').addClass("active");
584
+ } else {
585
+ $(this).closest('.list-group-item').removeClass("active");
586
+ }
587
+ });
588
+ });
589
+ </script>
590
+ </div><!-- /container -->
591
+ </body>
592
+ </html>