patternfly-sass 3.23.2 → 3.31.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (369) hide show
  1. checksums.yaml +4 -4
  2. data/CODE_OF_CONDUCT.md +4 -0
  3. data/QUICKSTART.md +165 -0
  4. data/README.md +354 -112
  5. data/dist/fonts/FontAwesome.otf +0 -0
  6. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Bold-webfont.eot +0 -0
  7. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Bold-webfont.svg +0 -0
  8. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Bold-webfont.ttf +0 -0
  9. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Bold-webfont.woff +0 -0
  10. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Bold-webfont.woff2 +0 -0
  11. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-BoldItalic-webfont.eot +0 -0
  12. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-BoldItalic-webfont.svg +0 -0
  13. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-BoldItalic-webfont.ttf +0 -0
  14. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-BoldItalic-webfont.woff +0 -0
  15. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-BoldItalic-webfont.woff2 +0 -0
  16. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBold-webfont.eot +0 -0
  17. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBold-webfont.svg +0 -0
  18. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBold-webfont.ttf +0 -0
  19. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBold-webfont.woff +0 -0
  20. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBold-webfont.woff2 +0 -0
  21. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
  22. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBoldItalic-webfont.svg +0 -0
  23. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
  24. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
  25. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-ExtraBoldItalic-webfont.woff2 +0 -0
  26. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Italic-webfont.eot +0 -0
  27. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Italic-webfont.svg +0 -0
  28. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Italic-webfont.ttf +0 -0
  29. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Italic-webfont.woff +0 -0
  30. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Italic-webfont.woff2 +0 -0
  31. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Light-webfont.eot +0 -0
  32. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Light-webfont.svg +0 -0
  33. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Light-webfont.ttf +0 -0
  34. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Light-webfont.woff +0 -0
  35. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Light-webfont.woff2 +0 -0
  36. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-LightItalic-webfont.eot +0 -0
  37. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-LightItalic-webfont.svg +0 -0
  38. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-LightItalic-webfont.ttf +0 -0
  39. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-LightItalic-webfont.woff +0 -0
  40. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-LightItalic-webfont.woff2 +0 -0
  41. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Regular-webfont.eot +0 -0
  42. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Regular-webfont.svg +0 -0
  43. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Regular-webfont.ttf +0 -0
  44. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Regular-webfont.woff +0 -0
  45. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Regular-webfont.woff2 +0 -0
  46. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Semibold-webfont.eot +0 -0
  47. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Semibold-webfont.svg +0 -0
  48. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Semibold-webfont.ttf +0 -0
  49. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Semibold-webfont.woff +0 -0
  50. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-Semibold-webfont.woff2 +0 -0
  51. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-SemiboldItalic-webfont.eot +0 -0
  52. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-SemiboldItalic-webfont.svg +0 -0
  53. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-SemiboldItalic-webfont.ttf +0 -0
  54. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-SemiboldItalic-webfont.woff +0 -0
  55. data/{assets/fonts/patternfly → dist/fonts}/OpenSans-SemiboldItalic-webfont.woff2 +0 -0
  56. data/dist/fonts/PatternFlyIcons-webfont.eot +0 -0
  57. data/{assets/fonts/patternfly → dist/fonts}/PatternFlyIcons-webfont.svg +28 -0
  58. data/dist/fonts/PatternFlyIcons-webfont.ttf +0 -0
  59. data/dist/fonts/PatternFlyIcons-webfont.woff +0 -0
  60. data/dist/fonts/fontawesome-webfont.eot +0 -0
  61. data/dist/fonts/fontawesome-webfont.svg +2671 -0
  62. data/{assets/fonts/patternfly → dist/fonts}/fontawesome-webfont.ttf +0 -0
  63. data/dist/fonts/fontawesome-webfont.woff +0 -0
  64. data/dist/fonts/fontawesome-webfont.woff2 +0 -0
  65. data/{assets/fonts/patternfly → dist/fonts}/glyphicons-halflings-regular.eot +0 -0
  66. data/{assets/fonts/patternfly → dist/fonts}/glyphicons-halflings-regular.svg +0 -0
  67. data/{assets/fonts/patternfly → dist/fonts}/glyphicons-halflings-regular.ttf +0 -0
  68. data/{assets/fonts/patternfly → dist/fonts}/glyphicons-halflings-regular.woff +0 -0
  69. data/{assets/fonts/patternfly → dist/fonts}/glyphicons-halflings-regular.woff2 +0 -0
  70. data/{assets/images/patternfly → dist/img}/OpenShift-Logo-NoText.svg +0 -0
  71. data/{assets/images/patternfly → dist/img}/OpenShift-Logo-Text.svg +0 -0
  72. data/{assets/images/patternfly → dist/img}/OpenShift-logo.svg +0 -0
  73. data/{assets/images/patternfly → dist/img}/RH_Atomic-Logo-NoText.svg +0 -0
  74. data/{assets/images/patternfly → dist/img}/RH_Atomic-Logo-Text.svg +0 -0
  75. data/{assets/images/patternfly → dist/img}/RH_atomic.svg +0 -0
  76. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-114.png +0 -0
  77. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-144.png +0 -0
  78. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-152.png +0 -0
  79. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-180.png +0 -0
  80. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-57.png +0 -0
  81. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-72.png +0 -0
  82. data/{assets/images/patternfly → dist/img}/apple-touch-icon-precomposed-76.png +0 -0
  83. data/{assets/images/patternfly → dist/img}/bg-login.jpg +0 -0
  84. data/{assets/images/patternfly → dist/img}/bg-modal-about-pf.png +0 -0
  85. data/{assets/images/patternfly → dist/img}/bg-navbar-pf-alt.svg +0 -0
  86. data/{assets/images/patternfly → dist/img}/brand-alt.svg +0 -0
  87. data/{assets/images/patternfly → dist/img}/brand.svg +0 -0
  88. data/{assets/images/patternfly → dist/img}/favicon.ico +0 -0
  89. data/{assets/images/patternfly → dist/img}/kubernetes-Logo.svg +0 -0
  90. data/{assets/images/patternfly → dist/img}/kubernetes.svg +0 -0
  91. data/{assets/images/patternfly → dist/img}/logo-alt.svg +0 -0
  92. data/{assets/images/patternfly → dist/img}/logo.svg +0 -0
  93. data/{assets/images/patternfly → dist/img}/spinner-inverse-lg.gif +0 -0
  94. data/{assets/images/patternfly → dist/img}/spinner-inverse-sm.gif +0 -0
  95. data/{assets/images/patternfly → dist/img}/spinner-inverse-xs.gif +0 -0
  96. data/{assets/images/patternfly → dist/img}/spinner-inverse.gif +0 -0
  97. data/{assets/images/patternfly → dist/img}/spinner-lg.gif +0 -0
  98. data/{assets/images/patternfly → dist/img}/spinner-sm.gif +0 -0
  99. data/{assets/images/patternfly → dist/img}/spinner-xs.gif +0 -0
  100. data/{assets/images/patternfly → dist/img}/spinner.gif +0 -0
  101. data/dist/js/patternfly-functions-base.js +7 -0
  102. data/dist/js/patternfly-functions-charts.js +13 -0
  103. data/dist/js/patternfly-functions-colors.js +8 -0
  104. data/dist/js/patternfly-functions-count-chars.js +59 -0
  105. data/dist/js/patternfly-functions-data-tables.js +149 -0
  106. data/dist/js/patternfly-functions-fixed-heights.js +87 -0
  107. data/dist/js/patternfly-functions-list.js +79 -0
  108. data/dist/js/patternfly-functions-navigation.js +113 -0
  109. data/dist/js/patternfly-functions-popovers.js +37 -0
  110. data/dist/js/patternfly-functions-sidebar.js +31 -0
  111. data/dist/js/patternfly-functions-tree-grid.js +79 -0
  112. data/dist/js/patternfly-functions-vertical-nav.js +590 -0
  113. data/{assets/javascripts → dist/js}/patternfly-functions.js +133 -95
  114. data/dist/js/patternfly-functions.min.js +1 -0
  115. data/dist/js/patternfly-settings-base.js +16 -0
  116. data/dist/js/patternfly-settings-charts.js +423 -0
  117. data/dist/js/patternfly-settings-colors.js +88 -0
  118. data/{assets/javascripts → dist/js}/patternfly-settings.js +22 -13
  119. data/dist/js/patternfly-settings.min.js +1 -0
  120. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfColVis.js +0 -0
  121. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfEmpty.js +1 -1
  122. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfEmpty.min.js +1 -1
  123. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfFilter.js +0 -0
  124. data/dist/js/patternfly.dataTables.pfFilter.min.js +1 -0
  125. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfPagination.js +1 -1
  126. data/dist/js/patternfly.dataTables.pfPagination.min.js +1 -0
  127. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfResize.js +0 -0
  128. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfResize.min.js +1 -1
  129. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfSelect.js +0 -0
  130. data/{assets/javascripts → dist/js}/patternfly.dataTables.pfSelect.min.js +1 -1
  131. data/{assets/javascripts → dist/js}/patternfly.js +153 -106
  132. data/dist/js/patternfly.min.js +2 -0
  133. data/{assets/stylesheets → dist/sass}/_patternfly-compass.scss +1 -1
  134. data/{assets/stylesheets → dist/sass}/_patternfly-sprockets.scss +1 -1
  135. data/dist/sass/_patternfly.scss +145 -0
  136. data/{assets/stylesheets → dist/sass}/patternfly/_about-modal.scss +2 -2
  137. data/{assets/stylesheets → dist/sass}/patternfly/_alerts.scss +0 -0
  138. data/dist/sass/patternfly/_application-launcher.scss +213 -0
  139. data/{assets/stylesheets → dist/sass}/patternfly/_badges.scss +0 -0
  140. data/{assets/stylesheets → dist/sass}/patternfly/_blank-slate.scss +0 -0
  141. data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-combobox.scss +1 -1
  142. data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-datepicker.scss +13 -5
  143. data/dist/sass/patternfly/_bootstrap-mixin-overrides.scss +33 -0
  144. data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-select.scss +15 -7
  145. data/dist/sass/patternfly/_bootstrap-slider.scss +66 -0
  146. data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-switch.scss +1 -1
  147. data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-touchspin.scss +0 -0
  148. data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-treeview.scss +0 -0
  149. data/{assets/stylesheets → dist/sass}/patternfly/_breadcrumbs.scss +0 -0
  150. data/{assets/stylesheets → dist/sass}/patternfly/_buttons.scss +2 -2
  151. data/{assets/stylesheets → dist/sass}/patternfly/_card-view.scss +1 -1
  152. data/{assets/stylesheets → dist/sass}/patternfly/_cards.scss +2 -2
  153. data/{assets/stylesheets → dist/sass}/patternfly/_charts.scss +28 -0
  154. data/{assets/stylesheets → dist/sass}/patternfly/_close.scss +1 -0
  155. data/dist/sass/patternfly/_color-variables.scss +85 -0
  156. data/{assets/stylesheets → dist/sass}/patternfly/_datatables.scss +5 -5
  157. data/{assets/stylesheets → dist/sass}/patternfly/_dropdowns.scss +9 -4
  158. data/dist/sass/patternfly/_experimental-features.scss +48 -0
  159. data/dist/sass/patternfly/_fonts.scss +124 -0
  160. data/{assets/stylesheets → dist/sass}/patternfly/_footer.scss +0 -0
  161. data/{assets/stylesheets → dist/sass}/patternfly/_forms.scss +0 -0
  162. data/{assets/stylesheets → dist/sass}/patternfly/_icons.scss +91 -7
  163. data/{assets/stylesheets → dist/sass}/patternfly/_infotip.scss +0 -0
  164. data/{assets/stylesheets → dist/sass}/patternfly/_labels.scss +0 -0
  165. data/{assets/stylesheets → dist/sass}/patternfly/_layouts.scss +0 -0
  166. data/{assets/stylesheets → dist/sass}/patternfly/_links.scss +0 -0
  167. data/{assets/stylesheets → dist/sass}/patternfly/_list-group.scss +0 -0
  168. data/{assets/stylesheets → dist/sass}/patternfly/_list-pf.scss +6 -3
  169. data/{assets/stylesheets → dist/sass}/patternfly/_list-view-dnd.scss +0 -0
  170. data/{assets/stylesheets → dist/sass}/patternfly/_list-view.scss +12 -12
  171. data/{assets/stylesheets → dist/sass}/patternfly/_login.scss +3 -7
  172. data/dist/sass/patternfly/_mixins.scss +81 -0
  173. data/{assets/stylesheets → dist/sass}/patternfly/_modals.scss +0 -0
  174. data/{assets/stylesheets → dist/sass}/patternfly/_nav-vertical-alt.scss +1 -1
  175. data/{assets/stylesheets → dist/sass}/patternfly/_navbar-alt.scss +0 -0
  176. data/{assets/stylesheets → dist/sass}/patternfly/_navbar-vertical.scss +9 -2
  177. data/{assets/stylesheets → dist/sass}/patternfly/_navbar.scss +26 -2
  178. data/{assets/stylesheets → dist/sass}/patternfly/_notifications-drawer.scss +102 -15
  179. data/{assets/stylesheets → dist/sass}/patternfly/_pager.scss +1 -1
  180. data/{assets/stylesheets → dist/sass}/patternfly/_pagination.scss +2 -2
  181. data/{assets/stylesheets → dist/sass}/patternfly/_panels.scss +21 -0
  182. data/{assets/stylesheets → dist/sass}/patternfly/_popovers.scss +1 -1
  183. data/{assets/stylesheets → dist/sass}/patternfly/_progress-bars.scss +1 -1
  184. data/{assets/stylesheets → dist/sass}/patternfly/_search.scss +1 -1
  185. data/{assets/stylesheets → dist/sass}/patternfly/_sidebar.scss +0 -0
  186. data/dist/sass/patternfly/_skip-to-content.scss +12 -0
  187. data/{assets/stylesheets → dist/sass}/patternfly/_spinner.scss +16 -16
  188. data/{assets/stylesheets → dist/sass}/patternfly/_syntax-highlighting.scss +0 -0
  189. data/{assets/stylesheets → dist/sass}/patternfly/_table-view.scss +0 -0
  190. data/{assets/stylesheets → dist/sass}/patternfly/_tables.scss +0 -0
  191. data/{assets/stylesheets → dist/sass}/patternfly/_tabs.scss +1 -1
  192. data/{assets/stylesheets → dist/sass}/patternfly/_time-picker.scss +1 -3
  193. data/{assets/stylesheets → dist/sass}/patternfly/_toast.scss +7 -6
  194. data/{assets/stylesheets → dist/sass}/patternfly/_toolbar.scss +1 -1
  195. data/{assets/stylesheets → dist/sass}/patternfly/_tooltip.scss +0 -0
  196. data/{assets/stylesheets → dist/sass}/patternfly/_type.scss +0 -0
  197. data/{assets/stylesheets → dist/sass}/patternfly/_variables.scss +75 -9
  198. data/{assets/stylesheets → dist/sass}/patternfly/_vertical-nav.scss +41 -42
  199. data/{assets/stylesheets → dist/sass}/patternfly/_wizard.scss +175 -123
  200. data/dist/sass/patternfly/dependencies/bootstrap-combobox/combobox.scss +57 -0
  201. data/dist/sass/patternfly/dependencies/bootstrap-datepicker/datepicker.scss +235 -0
  202. data/dist/sass/patternfly/dependencies/bootstrap-datepicker/datepicker3.scss +251 -0
  203. data/dist/sass/patternfly/dependencies/bootstrap-select/bootstrap-select.scss +389 -0
  204. data/dist/sass/patternfly/dependencies/bootstrap-select/variables.scss +9 -0
  205. data/dist/sass/patternfly/dependencies/bootstrap-slider/_mixins.scss +25 -0
  206. data/dist/sass/patternfly/dependencies/bootstrap-slider/_rules.scss +246 -0
  207. data/dist/sass/patternfly/dependencies/bootstrap-slider/_variables.scss +28 -0
  208. data/dist/sass/patternfly/dependencies/bootstrap-slider/bootstrap-slider.scss +42 -0
  209. data/{assets/stylesheets/patternfly/lib → dist/sass/patternfly/dependencies/bootstrap-switch}/bootstrap-switch.scss +12 -10
  210. data/dist/sass/patternfly/dependencies/bootstrap-switch/build.scss +3 -0
  211. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins.scss +40 -0
  212. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/alerts.scss +14 -0
  213. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/background-variant.scss +9 -0
  214. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/border-radius.scss +18 -0
  215. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/buttons.scss +68 -0
  216. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/center-block.scss +7 -0
  217. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/clearfix.scss +22 -0
  218. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/forms.scss +85 -0
  219. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/gradients.scss +59 -0
  220. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/grid-framework.scss +98 -0
  221. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/grid.scss +122 -0
  222. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/hide-text.scss +21 -0
  223. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/image.scss +33 -0
  224. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/labels.scss +12 -0
  225. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/list-group.scss +29 -0
  226. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/nav-divider.scss +10 -0
  227. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/nav-vertical-align.scss +9 -0
  228. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/opacity.scss +8 -0
  229. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/pagination.scss +23 -0
  230. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/panels.scss +24 -0
  231. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/progress-bar.scss +10 -0
  232. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/reset-filter.scss +8 -0
  233. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/reset-text.scss +18 -0
  234. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/resize.scss +6 -0
  235. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/responsive-visibility.scss +15 -0
  236. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/size.scss +10 -0
  237. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/tab-focus.scss +9 -0
  238. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/table-row.scss +28 -0
  239. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/text-emphasis.scss +9 -0
  240. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/text-overflow.scss +8 -0
  241. data/dist/sass/patternfly/dependencies/bootstrap-switch/mixins/vendor-prefixes.scss +227 -0
  242. data/dist/sass/patternfly/dependencies/bootstrap-switch/variables.scss +862 -0
  243. data/{assets/stylesheets/patternfly/lib/bootstrap-touchspin.scss → dist/sass/patternfly/dependencies/bootstrap-touchspin/_jquery.bootstrap-touchspin.scss} +1 -1
  244. data/{assets/stylesheets/patternfly/lib/c3.scss → dist/sass/patternfly/dependencies/c3/_c3.scss} +7 -0
  245. data/dist/sass/patternfly/dependencies/eonasdan-bootstrap-datetimepicker/_bootstrap-datetimepicker.scss +344 -0
  246. data/dist/sass/patternfly/dependencies/eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker-build.scss +16 -0
  247. data/lib/patternfly-sass.rb +4 -4
  248. data/lib/patternfly-sass/engine.rb +2 -2
  249. data/lib/patternfly-sass/version.rb +1 -2
  250. data/patternfly-sass.gemspec +16 -17
  251. metadata +249 -498
  252. data/.gitignore +0 -41
  253. data/.rspec +0 -3
  254. data/.rubocop.yml +0 -56
  255. data/.travis.yml +0 -51
  256. data/Gemfile +0 -3
  257. data/Rakefile +0 -130
  258. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  259. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  260. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  261. data/assets/fonts/patternfly/fontawesome-webfont.eot +0 -0
  262. data/assets/fonts/patternfly/fontawesome-webfont.svg +0 -685
  263. data/assets/fonts/patternfly/fontawesome-webfont.woff +0 -0
  264. data/assets/fonts/patternfly/fontawesome-webfont.woff2 +0 -0
  265. data/assets/javascripts/patternfly-functions.min.js +0 -1
  266. data/assets/javascripts/patternfly-settings.min.js +0 -1
  267. data/assets/javascripts/patternfly.dataTables.pfFilter.min.js +0 -1
  268. data/assets/javascripts/patternfly.dataTables.pfPagination.min.js +0 -1
  269. data/assets/javascripts/patternfly.min.js +0 -2
  270. data/assets/stylesheets/_patternfly.scss +0 -108
  271. data/assets/stylesheets/patternfly/_color-variables.scss +0 -84
  272. data/assets/stylesheets/patternfly/_fonts.scss +0 -124
  273. data/assets/stylesheets/patternfly/_mixin_overrides.scss +0 -65
  274. data/assets/stylesheets/patternfly/_mixins.scss +0 -120
  275. data/assets/stylesheets/patternfly/lib/bootstrap-datepicker.scss +0 -678
  276. data/assets/stylesheets/patternfly/lib/bootstrap-datetimepicker.scss +0 -374
  277. data/assets/stylesheets/patternfly/lib/bootstrap-select.scss +0 -282
  278. data/assets/stylesheets/patternfly/lib/patternfly-bootstrap-combobox.scss +0 -44
  279. data/bower.json +0 -53
  280. data/package.json +0 -70
  281. data/spec/compare_spec.rb +0 -60
  282. data/spec/html/about-modal.html +0 -77
  283. data/spec/html/accordions.html +0 -336
  284. data/spec/html/alerts.html +0 -106
  285. data/spec/html/area-charts.html +0 -103
  286. data/spec/html/badges.html +0 -73
  287. data/spec/html/bar-charts.html +0 -350
  288. data/spec/html/basic.html +0 -796
  289. data/spec/html/blank-slate.html +0 -81
  290. data/spec/html/bootstrap-combobox.html +0 -344
  291. data/spec/html/bootstrap-datepicker.html +0 -148
  292. data/spec/html/bootstrap-select.html +0 -213
  293. data/spec/html/bootstrap-switch.html +0 -267
  294. data/spec/html/bootstrap-switch.js +0 -61
  295. data/spec/html/bootstrap-touchspin.html +0 -210
  296. data/spec/html/bootstrap-treeview-2.html +0 -296
  297. data/spec/html/bootstrap-treeview.html +0 -383
  298. data/spec/html/breadcrumbs.html +0 -52
  299. data/spec/html/buttons.html +0 -556
  300. data/spec/html/card-view-card-variations.html +0 -201
  301. data/spec/html/card-view-multi-select.html +0 -698
  302. data/spec/html/card-view-single-select.html +0 -432
  303. data/spec/html/cards.html +0 -899
  304. data/spec/html/code.html +0 -83
  305. data/spec/html/dashboard.html +0 -353
  306. data/spec/html/dist/css/patternfly-additions.css +0 -7202
  307. data/spec/html/dist/css/patternfly-additions.css.map +0 -1
  308. data/spec/html/dist/css/patternfly-additions.min.css +0 -5
  309. data/spec/html/dist/css/patternfly-additions.min.css.map +0 -1
  310. data/spec/html/dist/css/patternfly.css +0 -10355
  311. data/spec/html/dist/css/patternfly.css.map +0 -1
  312. data/spec/html/dist/css/patternfly.min.css +0 -8
  313. data/spec/html/dist/css/patternfly.min.css.map +0 -1
  314. data/spec/html/donut-charts.html +0 -235
  315. data/spec/html/dropdowns.html +0 -138
  316. data/spec/html/form.html +0 -281
  317. data/spec/html/forms.html +0 -875
  318. data/spec/html/horizontal-navigation.html +0 -765
  319. data/spec/html/icons.html +0 -447
  320. data/spec/html/img/dashboard-3.png +0 -0
  321. data/spec/html/index.html +0 -284
  322. data/spec/html/infotip.html +0 -89
  323. data/spec/html/labels.html +0 -108
  324. data/spec/html/line-charts.html +0 -178
  325. data/spec/html/list-group.html +0 -111
  326. data/spec/html/list-pf.html +0 -529
  327. data/spec/html/list-view-compound-expansion.html +0 -1720
  328. data/spec/html/list-view-rows.html +0 -597
  329. data/spec/html/list-view-simple-expansion.html +0 -1003
  330. data/spec/html/list-view.html +0 -614
  331. data/spec/html/login.html +0 -92
  332. data/spec/html/modals.html +0 -83
  333. data/spec/html/navbar.html +0 -4680
  334. data/spec/html/notification-drawer-horizontal-nav.html +0 -1503
  335. data/spec/html/notification-drawer-vertical-nav.html +0 -1631
  336. data/spec/html/pagination-card-view.html +0 -560
  337. data/spec/html/pagination-list-view.html +0 -1204
  338. data/spec/html/pagination-table-view.html +0 -813
  339. data/spec/html/pagination.html +0 -320
  340. data/spec/html/panels.html +0 -113
  341. data/spec/html/pie-charts.html +0 -180
  342. data/spec/html/popovers.html +0 -115
  343. data/spec/html/progress-bars.html +0 -335
  344. data/spec/html/search.html +0 -171
  345. data/spec/html/spinner.html +0 -77
  346. data/spec/html/tab.html +0 -842
  347. data/spec/html/table-view-columns.html +0 -495
  348. data/spec/html/table-view-navbar.html +0 -814
  349. data/spec/html/table-view.html +0 -688
  350. data/spec/html/tables.html +0 -540
  351. data/spec/html/tabs.html +0 -279
  352. data/spec/html/tests.css +0 -16
  353. data/spec/html/time-picker.html +0 -75
  354. data/spec/html/toast.html +0 -87
  355. data/spec/html/toolbar.html +0 -268
  356. data/spec/html/tooltip.html +0 -71
  357. data/spec/html/typography-2.css +0 -10
  358. data/spec/html/typography-2.html +0 -313
  359. data/spec/html/typography.html +0 -212
  360. data/spec/html/utilization-bar-charts.html +0 -69
  361. data/spec/html/vertical-navigation-primary-only.html +0 -844
  362. data/spec/html/vertical-navigation-with-badges.html +0 -1184
  363. data/spec/html/vertical-navigation-with-secondary.html +0 -911
  364. data/spec/html/vertical-navigation-with-tertiary-no-icons.html +0 -1085
  365. data/spec/html/vertical-navigation-with-tertiary-pins.html +0 -1085
  366. data/spec/html/wizard.html +0 -756
  367. data/spec/main.html +0 -16
  368. data/spec/spec_helper.rb +0 -9
  369. data/tasks/converter.rb +0 -353
@@ -1,212 +0,0 @@
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>Typography - 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
- <link href="tests.css" rel="stylesheet" media="screen, print">
29
- <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
30
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
31
- <script src="./../../dist/js/patternfly.min.js"></script>
32
- </head>
33
-
34
- <body>
35
- <div class="container">
36
- <div class="page-header">
37
- <h1>Typography</h1>
38
- </div>
39
- <div class="alert alert-warning">
40
- <span class="pficon pficon-warning-triangle-o"></span>
41
- These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
42
- </div>
43
- <hr>
44
- <h2>Headings</h2>
45
- <h1>h1. Bootstrap heading</h1>
46
- <h2>h2. Bootstrap heading</h2>
47
- <h3>h3. Bootstrap heading</h3>
48
- <h4>h4. Bootstrap heading</h4>
49
- <h5>h5. Bootstrap heading</h5>
50
- <h6>h6. Bootstrap heading</h6>
51
- <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
52
- <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
53
- <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
54
- <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
55
- <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
56
- <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
57
- <hr>
58
- <h2>Body Copy</h2>
59
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
60
- <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
61
- <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
62
- <h3>Lead Body Copy</h3>
63
- <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
64
- <hr>
65
- <h2>Emphasis</h2>
66
- <h3>Small Text</h3>
67
- <small>This line of text is meant to be treated as fine print.</small>
68
- <h3>Bold</h3>
69
- <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
70
- <h3>Italics</h3>
71
- <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
72
- <h3>Alignment classes</h3>
73
- <p class="text-left">Left aligned text.</p>
74
- <p class="text-center">Center aligned text.</p>
75
- <p class="text-right">Right aligned text.</p>
76
- <p class="text-justify">Justified text.</p>
77
- <hr>
78
- <h2>Abbreviations</h2>
79
- <h3>Basic abbreviation</h3>
80
- <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
81
- <h3>Initialism</h3>
82
- <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
83
- <hr>
84
- <h2>Addresses</h2>
85
- <address>
86
- <strong>Twitter, Inc.</strong><br>
87
- 795 Folsom Ave, Suite 600<br>
88
- San Francisco, CA 94107<br>
89
- <abbr title="Phone">P:</abbr> (123) 456-7890
90
- </address>
91
- <address>
92
- <strong>Full Name</strong><br>
93
- <a href="mailto:#">first.last@example.com</a>
94
- </address>
95
- <hr>
96
- <h2>Blockquotes</h2>
97
- <h3>Default blockquote</h3>
98
- <blockquote>
99
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
100
- </blockquote>
101
- <h3>Blockquote options</h3>
102
- <blockquote>
103
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
104
- <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
105
- </blockquote>
106
- <blockquote class="blockquote-reverse">
107
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
108
- <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
109
- </blockquote>
110
- <hr>
111
- <h2>Lists</h2>
112
- <h3>Unordered</h3>
113
- <ul>
114
- <li>Lorem ipsum dolor sit amet</li>
115
- <li>Consectetur adipiscing elit</li>
116
- <li>Integer molestie lorem at massa</li>
117
- <li>Facilisis in pretium nisl aliquet</li>
118
- <li>Nulla volutpat aliquam velit
119
- <ul>
120
- <li>Phasellus iaculis neque</li>
121
- <li>Purus sodales ultricies</li>
122
- <li>Vestibulum laoreet porttitor sem</li>
123
- <li>Ac tristique libero volutpat at</li>
124
- </ul>
125
- </li>
126
- <li>Faucibus porta lacus fringilla vel</li>
127
- <li>Aenean sit amet erat nunc</li>
128
- <li>Eget porttitor lorem</li>
129
- </ul>
130
- <h3>Ordered</h3>
131
- <ol>
132
- <li>Lorem ipsum dolor sit amet</li>
133
- <li>Consectetur adipiscing elit</li>
134
- <li>Integer molestie lorem at massa</li>
135
- <li>Facilisis in pretium nisl aliquet</li>
136
- <li>Nulla volutpat aliquam velit</li>
137
- <li>Faucibus porta lacus fringilla vel</li>
138
- <li>Aenean sit amet erat nunc</li>
139
- <li>Eget porttitor lorem</li>
140
- </ol>
141
- <h3>Unstyled</h3>
142
- <ul class="list-unstyled">
143
- <li>Lorem ipsum dolor sit amet</li>
144
- <li>Consectetur adipiscing elit</li>
145
- <li>Integer molestie lorem at massa</li>
146
- <li>Facilisis in pretium nisl aliquet</li>
147
- <li>Nulla volutpat aliquam velit
148
- <ul>
149
- <li>Phasellus iaculis neque</li>
150
- <li>Purus sodales ultricies</li>
151
- <li>Vestibulum laoreet porttitor sem</li>
152
- <li>Ac tristique libero volutpat at</li>
153
- </ul>
154
- </li>
155
- <li>Faucibus porta lacus fringilla vel</li>
156
- <li>Aenean sit amet erat nunc</li>
157
- <li>Eget porttitor lorem</li>
158
- </ul>
159
- <h3>Inline</h3>
160
- <ul class="list-inline">
161
- <li>Lorem ipsum</li>
162
- <li>Phasellus iaculis</li>
163
- <li>Nulla volutpat</li>
164
- </ul>
165
- <h3>Description</h3>
166
- <dl>
167
- <dt>Description lists</dt>
168
- <dd>A description list is perfect for defining terms.</dd>
169
- <dt>Euismod</dt>
170
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
171
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
172
- <dt>Malesuada porta</dt>
173
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
174
- </dl>
175
- <dl class="dl-horizontal">
176
- <dt>Description lists</dt>
177
- <dd>A description list is perfect for defining terms.</dd>
178
- <dt>Euismod</dt>
179
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
180
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
181
- <dt>Malesuada porta</dt>
182
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
183
- <dt>Felis euismod semper eget lacinia</dt>
184
- <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
185
- </dl>
186
- <hr>
187
- <div class="page-header">
188
- <h1>Page Header</h1>
189
- </div>
190
- <h2>Font Weights</h2>
191
- <ul>
192
- <li style="font-weight: 300;">OpenSans Light 300</li>
193
- <li style="font-weight: 300;"><i>OpenSans Light Italic 300</i></li>
194
- <li>OpenSans Regular 400</li>
195
- <li><i>OpenSans Regular Italic 400</i></li>
196
- <li style="font-weight: 600;">OpenSans SemiBold 500</li>
197
- <li style="font-weight: 600;"><i>OpenSans SemiBold Italic 500</i></li>
198
- <li style="font-weight: 700;">OpenSans Bold 600</li>
199
- <li style="font-weight: 700;"><i>OpenSans Bold Italic 600</i></li>
200
- <li style="font-weight: 800;">OpenSans ExtraBold 700</li>
201
- <li style="font-weight: 800;"><i>OpenSans ExtraBold Italic 700</i></li>
202
- </ul>
203
- <h2>Diacritics</h2>
204
- <p>L'avantage d'utiliser le lorem ipsum est bien évidemment de pouvoir créer des maquettes ou de remplir un site internet de contenus qui présentent un rendu s'approchant un maximum du rendu final. Par défaut lorem ipsum ne contient pas d'accent ni de caractères spéciaux contrairement à la langue française qui en contient beaucoup. C'est sur ce critère que nous proposons une solution avec cet outil qui générant du faux-texte lorem ipsum mais avec en plus, des caractères spéciaux tel que les accents ou certains symboles utiles pour la langue française. L'utilisation du lorem standard est facile d’utilisation mais lorsque le futur client utilisera votre logiciel il se peut que certains caractères spéciaux ou qu'un accent ne soient pas codés correctement. Cette page a pour but donc de pouvoir perdre le moins de temps possible et donc de tester directement si tous les encodages de base de donnée ou des sites sont les bons de plus il permet de récuperer un code css avec le texte formaté !</p>
205
-
206
- <p>Příliš žluťoučký kůň úpěl ďábelské ódy.</p>
207
- <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
208
- <h3>caractères spéciaux</h3>
209
-
210
- </div><!-- /container -->
211
- </body>
212
- </html>
@@ -1,69 +0,0 @@
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>Utilization Bar Charts - 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
- <link href="tests.css" rel="stylesheet" media="screen, print">
29
- <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
30
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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
-
36
- <body>
37
- <div class="container">
38
- <div class="page-header">
39
- <h1>Utilization Bar Charts</h1>
40
- </div>
41
- <div class="alert alert-warning">
42
- <span class="pficon pficon-warning-triangle-o"></span>
43
- 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>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
44
- </div>
45
- <hr>
46
- <h2>Utilization Bar Chart</h2>
47
- <div class="row">
48
- <div class="col-xs-8 col-sm-6 col-md-6">
49
- <div class="progress">
50
- <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
51
- <span class="sr-only">25% Used</span>
52
- </div>
53
- <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">
54
- <span class="sr-only">75% Available</span>
55
- </div>
56
- </div>
57
- <script>
58
- // Initialize Tooltip
59
- jQuery(document).ready(function() {
60
- jQuery('[data-toggle="tooltip"]').tooltip();
61
- });
62
- </script>
63
-
64
- </div>
65
- </div>
66
-
67
- </div><!-- /container -->
68
- </body>
69
- </html>
@@ -1,844 +0,0 @@
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 layout-pf-fixed">
5
- <!--<![endif]-->
6
- <head>
7
- <title>Vertical Navigation with Primary Only - 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
- <link href="tests.css" rel="stylesheet" media="screen, print">
29
- <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
30
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
31
- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
32
- <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
33
- <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
34
- <script src="./../../dist/js/patternfly.min.js"></script>
35
- </head>
36
- <div class="toast-notifications-list-pf">
37
- <div class="toast-pf alert alert-warning alert-dismissable">
38
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
39
- <span class="pficon pficon-close"></span>
40
- </button>
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
- </div>
45
-
46
- <body class="cards-pf">
47
-
48
- <nav class="navbar navbar-pf-vertical">
49
- <div class="navbar-header">
50
- <button type="button" class="navbar-toggle">
51
- <span class="sr-only">Toggle navigation</span>
52
- <span class="icon-bar"></span>
53
- <span class="icon-bar"></span>
54
- <span class="icon-bar"></span>
55
- </button>
56
- <a href="/" class="navbar-brand">
57
- <img class="navbar-brand-icon" src="./../../dist/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="./../../dist/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
58
- </a>
59
- </div>
60
- <nav class="collapse navbar-collapse">
61
- <ul class="nav navbar-nav navbar-right navbar-iconic">
62
- <li class="dropdown">
63
- <a class="dropdown-toggle nav-item-iconic" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
64
- <span title="Notifications" class="fa pficon-flag"></span>
65
- <span class="badge">2</span>
66
- </a>
67
- <div class="dropdown-menu infotip bottom-right">
68
- <div class="arrow"></div>
69
- <ul class="list-group">
70
- <li class="list-group-item">
71
- <span class="i pficon pficon-info"></span> Modified Datasources ExampleDS
72
- </li>
73
- <li class="list-group-item">
74
- <span class="i pficon pficon-info"></span> Error: System Failure
75
- </li>
76
- </ul>
77
- <div class="footer">
78
- <a>Clear Messages</a>
79
- </div>
80
- </div>
81
- </li>
82
- <li class="dropdown">
83
- <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
84
- <span title="Help" class="fa pficon-help"></span>
85
- <span class="caret"></span>
86
- </a>
87
- <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
88
- <li><a href="#">Help</a></li>
89
- <li><a href="#">About</a></li>
90
- </ul>
91
- </li>
92
- <li class="dropdown">
93
- <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
94
- <span title="Username" class="fa pficon-user"></span>
95
- <span class="caret"></span>
96
- </a>
97
- <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
98
- <li><a href="#">Preferences</a></li>
99
- <li><a href="#">Logout</a></li>
100
- </ul>
101
- </li>
102
- </ul>
103
- </nav>
104
- </nav> <!--/.navbar-->
105
-
106
-
107
- <div class="nav-pf-vertical nav-pf-vertical-with-sub-menus
108
-
109
-
110
-
111
- ">
112
- <ul class="list-group">
113
- <li class="list-group-item">
114
- <a>
115
- <span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
116
- <span class="list-group-item-value">Dashboard</span>
117
- </a>
118
- </li>
119
- <li class="list-group-item">
120
- <a>
121
- <span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
122
- <span class="list-group-item-value">Dolor</span>
123
-
124
- </a>
125
- </li>
126
- <li class="list-group-item active " data-target="#ipsum-secondary">
127
- <a>
128
- <span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
129
- <span class="list-group-item-value">Ipsum</span>
130
- </a>
131
-
132
- </li>
133
- <li class="list-group-item " data-target="#amet-secondary">
134
- <a>
135
- <span class="fa fa-paper-plane" data-toggle="tooltip" title="Amet"></span>
136
- <span class="list-group-item-value">Amet</span>
137
- </a>
138
-
139
- </li>
140
- <li class="list-group-item">
141
- <a>
142
- <span class="fa fa-graduation-cap" data-toggle="tooltip" title="Adipscing"></span>
143
- <span class="list-group-item-value">Adipscing</span>
144
- </a>
145
- </li>
146
- <li class="list-group-item">
147
- <a>
148
- <span class="fa fa-gamepad" data-toggle="tooltip" title="Lorem"></span>
149
- <span class="list-group-item-value">Lorem</span>
150
- </a>
151
- </li>
152
-
153
- <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" data-target="#amet-secondary">
154
- <a>
155
- <span class="pficon pficon-user" data-toggle="tooltip" title="" data-original-title="User"></span>
156
- <span class="list-group-item-value">User</span>
157
- </a>
158
- <div id="user-secondary" class="nav-pf-secondary-nav">
159
- <div class="nav-item-pf-header">
160
- <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
161
- <span>User</span>
162
- </div>
163
-
164
- <ul class="list-group">
165
- <li class="list-group-item">
166
- <a>
167
- <span class="list-group-item-value">Preferences</span>
168
- </a>
169
- </li>
170
-
171
- <li class="list-group-item">
172
- <a>
173
- <span class="list-group-item-value">Logout</span>
174
- </a>
175
- </li>
176
- </ul>
177
- </div>
178
- </li>
179
-
180
- <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" data-target="#amet-secondary">
181
- <a>
182
- <span class="pficon pficon-help" data-toggle="tooltip" title="" data-original-title="Amet"></span>
183
- <span class="list-group-item-value">Help</span>
184
- </a>
185
- <div id="help-secondary" class="nav-pf-secondary-nav">
186
- <div class="nav-item-pf-header">
187
- <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
188
- <span>Help</span>
189
- </div>
190
- <ul class="list-group">
191
- <li class="list-group-item">
192
- <a>
193
- <span class="list-group-item-value">Help</span>
194
- </a>
195
- </li>
196
- <li class="list-group-item">
197
- <a>
198
- <span class="list-group-item-value">About</span>
199
- </a>
200
- </li>
201
- </ul>
202
- </div>
203
- </li>
204
-
205
- </ul>
206
-
207
- </div>
208
- <div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
209
-
210
-
211
- ">
212
-
213
- <div class="row row-cards-pf">
214
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
215
- <div class="col-xs-12 col-sm-6 col-md-3">
216
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
217
- <h2 class="card-pf-title">
218
- <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
219
- </h2>
220
- <div class="card-pf-body">
221
- <p class="card-pf-aggregate-status-notifications">
222
- <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>
223
- </p>
224
- </div>
225
- </div>
226
-
227
- </div>
228
- <div class="col-xs-12 col-sm-6 col-md-3">
229
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
230
- <h2 class="card-pf-title">
231
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
232
- </h2>
233
- <div class="card-pf-body">
234
- <p class="card-pf-aggregate-status-notifications">
235
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
236
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
237
- </p>
238
- </div>
239
- </div>
240
-
241
- </div>
242
- <div class="col-xs-12 col-sm-6 col-md-3">
243
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
244
- <h2 class="card-pf-title">
245
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
246
- </h2>
247
- <div class="card-pf-body">
248
- <p class="card-pf-aggregate-status-notifications">
249
- <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
250
- </p>
251
- </div>
252
- </div>
253
-
254
- </div>
255
- <div class="col-xs-12 col-sm-6 col-md-3">
256
- <div class="card-pf card-pf-accented card-pf-aggregate-status">
257
- <h2 class="card-pf-title">
258
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
259
- </h2>
260
- <div class="card-pf-body">
261
- <p class="card-pf-aggregate-status-notifications">
262
- <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
263
- </p>
264
- </div>
265
- </div>
266
- </div>
267
- </div><!-- /row -->
268
- <div class="row row-cards-pf">
269
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
270
- <div class="col-xs-12 col-sm-6 col-md-3">
271
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
272
- <h2 class="card-pf-title">
273
- <span class="fa fa-rebel"></span>
274
- <span class="card-pf-aggregate-status-count">0</span> Ipsum
275
- </h2>
276
- <div class="card-pf-body">
277
- <p class="card-pf-aggregate-status-notifications">
278
- <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>
279
- </p>
280
- </div>
281
- </div>
282
-
283
- </div>
284
- <div class="col-xs-12 col-sm-6 col-md-3">
285
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
286
- <h2 class="card-pf-title">
287
- <a href="#">
288
- <span class="fa fa-paper-plane"></span>
289
- <span class="card-pf-aggregate-status-count">20</span> Amet
290
- </a>
291
- </h2>
292
- <div class="card-pf-body">
293
- <p class="card-pf-aggregate-status-notifications">
294
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
295
- </p>
296
- </div>
297
- </div>
298
-
299
- </div>
300
- <div class="col-xs-12 col-sm-6 col-md-3">
301
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
302
- <h2 class="card-pf-title">
303
- <a href="#">
304
- <span class="pficon pficon-cluster"></span>
305
- <span class="card-pf-aggregate-status-count">9</span> Adipiscing
306
- </a>
307
- </h2>
308
- <div class="card-pf-body">
309
- <p class="card-pf-aggregate-status-notifications">
310
- <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
311
- </p>
312
- </div>
313
- </div>
314
-
315
- </div>
316
- <div class="col-xs-12 col-sm-6 col-md-3">
317
- <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
318
- <h2 class="card-pf-title">
319
- <a href="#">
320
- <span class="pficon pficon-image"></span>
321
- <span class="card-pf-aggregate-status-count">12</span> Lorem
322
- </a>
323
- </h2>
324
- <div class="card-pf-body">
325
- <p class="card-pf-aggregate-status-notifications">
326
- <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
327
- </p>
328
- </div>
329
- </div>
330
- </div>
331
- </div>
332
- <div class="row row-cards-pf">
333
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
334
- <div class="col-xs-12 col-sm-6">
335
- <div class="card-pf">
336
- <div class="card-pf-heading">
337
- <h2 class="card-pf-title">
338
- Top Utilized Clusters
339
- </h2>
340
- </div>
341
- <div class="card-pf-body">
342
- <div class="progress-description">
343
- RHOS6-Controller
344
- </div>
345
- <div class="progress progress-label-top-right">
346
- <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">
347
- <span><strong>190.0 of 200.0 GB</strong> Used</span>
348
- </div>
349
- <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">
350
- <span class="sr-only">5% Available</span>
351
- </div>
352
- </div>
353
- <div class="progress-description">
354
- CFMEQE-Cluster
355
- </div>
356
- <div class="progress progress-label-top-right">
357
- <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">
358
- <span><strong>100.0 of 200.0 GB</strong> Used</span>
359
- </div>
360
- <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">
361
- <span class="sr-only">50% Available</span>
362
- </div>
363
- </div>
364
- <div class="progress-description">
365
- RHOS-Undercloud
366
- </div>
367
- <div class="progress progress-label-top-right">
368
- <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">
369
- <span><strong>140.0 of 200.0 GB</strong> Used</span>
370
- </div>
371
- <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">
372
- <span class="sr-only">30% Available</span>
373
- </div>
374
- </div>
375
- <div class="progress-description">
376
- RHEL6-Controller
377
- </div>
378
- <div class="progress progress-label-top-right">
379
- <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">
380
- <span><strong>153.0 of 200.0 GB</strong> Used</span>
381
- </div>
382
- <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">
383
- <span class="sr-only">23.5% Available</span>
384
- </div>
385
- </div>
386
- </div>
387
- </div>
388
-
389
- </div>
390
- <div class="col-xs-12 col-sm-6">
391
- <div class="card-pf">
392
- <div class="card-pf-heading">
393
- <h2 class="card-pf-title">
394
- Quotas
395
- </h2>
396
- </div>
397
- <div class="card-pf-body">
398
- <div class="progress-container progress-description-left progress-label-right">
399
- <div class="progress-description">
400
- CPU
401
- </div>
402
- <div class="progress">
403
- <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
404
- <span><strong>115 of 460</strong> MHz</span>
405
- </div>
406
- <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">
407
- <span class="sr-only">75% Available</span>
408
- </div>
409
- </div>
410
- </div>
411
- <div class="progress-container progress-description-left progress-label-right">
412
- <div class="progress-description">
413
- Memory
414
- </div>
415
- <div class="progress">
416
- <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">
417
- <span><strong>8 of 16</strong> GB</span>
418
- </div>
419
- <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">
420
- <span class="sr-only">50% Available</span>
421
- </div>
422
- </div>
423
- </div>
424
- <div class="progress-container progress-description-left progress-label-right">
425
- <div class="progress-description">
426
- Pods
427
- </div>
428
- <div class="progress">
429
- <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">
430
- <span><strong>5 of 8</strong> Total</span>
431
- </div>
432
- <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">
433
- <span class="sr-only">37.5% Available</span>
434
- </div>
435
- </div>
436
- </div>
437
- <div class="progress-container progress-description-left progress-label-right">
438
- <div class="progress-description">
439
- Services
440
- </div>
441
- <div class="progress">
442
- <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
443
- <span><strong>2 of 2</strong> Total</span>
444
- </div>
445
- </div>
446
- </div>
447
- </div>
448
- </div>
449
-
450
- </div>
451
- </div><!-- /row -->
452
- <div class="row row-cards-pf">
453
- <div class="col-md-12">
454
- <div class="card-pf card-pf-utilization">
455
- <div class="card-pf-heading">
456
- <p class="card-pf-heading-details">Last 30 days</p>
457
- <h2 class="card-pf-title">
458
- Utilization
459
- </h2>
460
- </div>
461
- <div class="card-pf-body">
462
- <div class="row">
463
- <div class="col-xs-12 col-sm-4 col-md-4">
464
- <h3 class="card-pf-subtitle">CPU</h3>
465
- <p class="card-pf-utilization-details">
466
- <span class="card-pf-utilization-card-details-count">50</span>
467
- <span class="card-pf-utilization-card-details-description">
468
- <span class="card-pf-utilization-card-details-line-1">Available</span>
469
- <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
470
- </span>
471
- </p>
472
- <div id="chart-pf-donut-1"></div>
473
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
474
- <script>
475
- var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
476
- donutConfig.bindto = '#chart-pf-donut-1';
477
- donutConfig.color = {
478
- pattern: ["#cc0000","#D1D1D1"]
479
- };
480
- donutConfig.data = {
481
- type: "donut",
482
- columns: [
483
- ["Used", 95],
484
- ["Available", 5]
485
- ],
486
- groups: [
487
- ["used", "available"]
488
- ],
489
- order: null
490
- };
491
- donutConfig.tooltip = {
492
- contents: function (d) {
493
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
494
- Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
495
- '</span>';
496
- }
497
- };
498
-
499
- var chart1 = c3.generate(donutConfig);
500
- var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
501
- donutChartTitle.text("");
502
- donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
503
- donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
504
-
505
- var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
506
- sparklineConfig.bindto = '#chart-pf-sparkline-1';
507
- sparklineConfig.data = {
508
- columns: [
509
- ['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
510
- ],
511
- type: 'area'
512
- };
513
- var chart2 = c3.generate(sparklineConfig);
514
- </script>
515
- </div>
516
- <div class="col-xs-12 col-sm-4 col-md-4">
517
- <h3 class="card-pf-subtitle">Memory</h3>
518
- <p class="card-pf-utilization-details">
519
- <span class="card-pf-utilization-card-details-count">256</span>
520
- <span class="card-pf-utilization-card-details-description">
521
- <span class="card-pf-utilization-card-details-line-1">Available</span>
522
- <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
523
- </span>
524
- </p>
525
- <div id="chart-pf-donut-2"></div>
526
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
527
- <script>
528
- var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
529
- donutConfig.bindto = '#chart-pf-donut-2';
530
- donutConfig.color = {
531
- pattern: ["#3f9c35","#D1D1D1"]
532
- };
533
- donutConfig.data = {
534
- type: "donut",
535
- columns: [
536
- ["Used", 41],
537
- ["Available", 59]
538
- ],
539
- groups: [
540
- ["used", "available"]
541
- ],
542
- order: null
543
- };
544
- donutConfig.tooltip = {
545
- contents: function (d) {
546
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
547
- Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
548
- '</span>';
549
- }
550
- };
551
-
552
- var chart3 = c3.generate(donutConfig);
553
- var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
554
- donutChartTitle.text("");
555
- donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
556
- donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
557
-
558
- var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
559
- sparklineConfig.bindto = '#chart-pf-sparkline-2';
560
- sparklineConfig.data = {
561
- columns: [
562
- ['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
563
- ],
564
- type: 'area'
565
- };
566
- var chart4 = c3.generate(sparklineConfig);
567
- </script>
568
- </div>
569
- <div class="col-xs-12 col-sm-4 col-md-4">
570
- <h3 class="card-pf-subtitle">Network</h3>
571
- <p class="card-pf-utilization-details">
572
- <span class="card-pf-utilization-card-details-count">200</span>
573
- <span class="card-pf-utilization-card-details-description">
574
- <span class="card-pf-utilization-card-details-line-1">Available</span>
575
- <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
576
- </span>
577
- </p>
578
- <div id="chart-pf-donut-3"></div>
579
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
580
- <script>
581
- var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
582
- donutConfig.bindto = '#chart-pf-donut-3';
583
- donutConfig.color = {
584
- pattern: ["#EC7A08","#D1D1D1"]
585
- };
586
- donutConfig.data = {
587
- type: "donut",
588
- columns: [
589
- ["Used", 85],
590
- ["Available", 15]
591
- ],
592
- groups: [
593
- ["used", "available"]
594
- ],
595
- order: null
596
- };
597
- donutConfig.tooltip = {
598
- contents: function (d) {
599
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
600
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
601
- '</span>';
602
- }
603
- };
604
-
605
- var chart5 = c3.generate(donutConfig);
606
- var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
607
- donutChartTitle.text("");
608
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
609
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
610
-
611
- var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
612
- sparklineConfig.bindto = '#chart-pf-sparkline-3';
613
- sparklineConfig.data = {
614
- columns: [
615
- ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
616
- ],
617
- type: 'area'
618
- };
619
- var chart6 = c3.generate(sparklineConfig);
620
- </script>
621
- </div>
622
- </div>
623
- </div>
624
- </div>
625
-
626
- </div>
627
- </div><!-- /row -->
628
- <div class="row row-cards-pf">
629
- <div class="col-xs-12 col-sm-4 col-md-4">
630
- <div class="card-pf card-pf-utilization">
631
- <h2 class="card-pf-title">
632
- Network
633
- </h2>
634
- <div class="card-pf-body">
635
- <p class="card-pf-utilization-details">
636
- <span class="card-pf-utilization-card-details-count">200</span>
637
- <span class="card-pf-utilization-card-details-description">
638
- <span class="card-pf-utilization-card-details-line-1">Available</span>
639
- <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
640
- </span>
641
- </p>
642
- <div id="chart-pf-donut-4"></div>
643
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
644
- <script>
645
- var c3ChartDefaults = $().c3ChartDefaults();
646
-
647
- var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
648
- donutConfig.bindto = '#chart-pf-donut-4';
649
- donutConfig.color = {
650
- pattern: ["#EC7A08","#D1D1D1"]
651
- };
652
- donutConfig.data = {
653
- type: "donut",
654
- columns: [
655
- ["Used", 85],
656
- ["Available", 15]
657
- ],
658
- groups: [
659
- ["used", "available"]
660
- ],
661
- order: null
662
- };
663
- donutConfig.tooltip = {
664
- contents: function (d) {
665
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
666
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
667
- '</span>';
668
- }
669
- };
670
-
671
- var chart1 = c3.generate(donutConfig);
672
- var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
673
- donutChartTitle.text("");
674
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
675
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
676
-
677
- var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
678
- sparklineConfig.bindto = '#chart-pf-sparkline-4';
679
- sparklineConfig.data = {
680
- columns: [
681
- ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
682
- ],
683
- type: 'area'
684
- };
685
-
686
- var chart2 = c3.generate(sparklineConfig);
687
- </script>
688
- </div>
689
- </div>
690
-
691
- </div>
692
- </div><!-- /row -->
693
- <div class="row row-cards-pf">
694
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
695
- <div class="col-xs-12 col-sm-6 col-md-5">
696
- <div class="card-pf">
697
- <div class="card-pf-heading">
698
- <div class="dropdown card-pf-time-frame-filter">
699
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
700
- Last 30 Days <span class="caret"></span>
701
- </button>
702
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
703
- <li class="selected"><a href="#">Last 30 Days</a></li>
704
- <li><a href="#">Last 60 Days</a></li>
705
- <li><a href="#">Last 90 Days</a></li>
706
- </ul>
707
- </div>
708
- <h2 class="card-pf-title">
709
- Card Title
710
- </h2>
711
- </div>
712
- <div class="card-pf-body">
713
- <p>[card contents]</p>
714
- </div>
715
- </div>
716
-
717
- </div>
718
- <div class="col-xs-12 col-sm-6 col-md-7">
719
- <div class="card-pf">
720
- <h2 class="card-pf-title">
721
- Card Title
722
- </h2>
723
- <div class="card-pf-body">
724
- <p>[card contents]</p>
725
- </div>
726
- <div class="card-pf-footer">
727
- <div class="dropdown card-pf-time-frame-filter">
728
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
729
- Last 30 Days <span class="caret"></span>
730
- </button>
731
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
732
- <li class="selected"><a href="#">Last 30 Days</a></li>
733
- <li><a href="#">Last 60 Days</a></li>
734
- <li><a href="#">Last 90 Days</a></li>
735
- </ul>
736
- </div>
737
- <p>
738
- <a href="#" class="card-pf-link-with-icon">
739
- <span class="pficon pficon-add-circle-o"></span>Add New Cluster
740
- </a>
741
- </p>
742
- </div>
743
- </div>
744
-
745
- </div>
746
- </div><!-- /row -->
747
- <div class="row row-cards-pf">
748
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
749
- <div class="col-xs-12 col-sm-5 col-md-5">
750
- <div class="card-pf">
751
- <h2 class="card-pf-title">
752
- Card Title
753
- </h2>
754
- <div class="card-pf-body">
755
- <p>[card contents]</p>
756
- </div>
757
- <div class="card-pf-footer">
758
- <div class="dropdown card-pf-time-frame-filter">
759
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
760
- Last 30 Days <span class="caret"></span>
761
- </button>
762
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
763
- <li class="selected"><a href="#">Last 30 Days</a></li>
764
- <li><a href="#">Last 60 Days</a></li>
765
- <li><a href="#">Last 90 Days</a></li>
766
- </ul>
767
- </div>
768
- <p>
769
- <a href="#" class="card-pf-link-with-icon">
770
- <span class="pficon pficon-flag"></span>View CPU Events
771
- </a>
772
- </p>
773
- </div>
774
- </div>
775
- </div>
776
- <div class="col-xs-12 col-sm-7 col-md-7">
777
- <div class="card-pf">
778
- <h2 class="card-pf-title">
779
- Card Title
780
- </h2>
781
- <div class="card-pf-body">
782
- <p>[card contents]</p>
783
- </div>
784
- </div>
785
- </div>
786
- </div>
787
- <div class="row row-cards-pf">
788
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
789
- <div class="col-xs-6 col-sm-8 col-md-8">
790
- <div class="card-pf">
791
- <div class="card-pf-body">
792
- <p>[card contents]</p>
793
- </div>
794
- <div class="card-pf-footer">
795
- <p><a href="#">Footer link</a></p>
796
- </div>
797
- </div>
798
- </div>
799
- <div class="col-xs-6 col-sm-4 col-md-4">
800
- <div class="card-pf">
801
- <div class="card-pf-body">
802
- <p>[card contents]</p>
803
- </div>
804
- <div class="card-pf-footer">
805
- <p><a href="#">Footer link</a></p>
806
- </div>
807
- </div>
808
- </div>
809
- </div><!-- /row -->
810
- <div class="row row-cards-pf">
811
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
812
- <div class="col-xs-6 col-sm-6 col-md-6">
813
- <div class="card-pf">
814
- <div class="card-pf-body">
815
- <p>[card contents]</p>
816
- </div>
817
- </div>
818
- </div>
819
- <div class="col-xs-6 col-sm-6 col-md-6">
820
- <div class="card-pf">
821
- <div class="card-pf-body">
822
- <p>[card contents]</p>
823
- </div>
824
- </div>
825
- </div>
826
- </div><!-- /row -->
827
-
828
- </div>
829
- <script>
830
- $(document).ready(function() {
831
- // matchHeight the contents of each .card-pf and then the .card-pf itself
832
- $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
833
- $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
834
- $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
835
- $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
836
-
837
- // Initialize the vertical navigation
838
- $().setupVerticalNavigation(true);
839
- });
840
- </script>
841
-
842
-
843
- </body>
844
- </html>