@csdsesystems/central-styles 1.0.3 → 1.0.4

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 (463) hide show
  1. package/package.json +2 -2
  2. package/Gulpfile.js +0 -56
  3. package/dependencies/.editorconfig +0 -21
  4. package/dependencies/.jshintrc +0 -24
  5. package/dependencies/LICENSE +0 -21
  6. package/dependencies/README.md +0 -80
  7. package/dependencies/bower.json +0 -24
  8. package/dependencies/components.html +0 -2761
  9. package/dependencies/css/.gitignore +0 -3
  10. package/dependencies/css/green.png +0 -0
  11. package/dependencies/css/green@2x.png +0 -0
  12. package/dependencies/css/red.png +0 -0
  13. package/dependencies/css/red@2x.png +0 -0
  14. package/dependencies/css/steelblue.png +0 -0
  15. package/dependencies/css/steelblue@2x.png +0 -0
  16. package/dependencies/example.png +0 -0
  17. package/dependencies/index.html +0 -120
  18. package/dependencies/layout.html +0 -712
  19. package/dependencies/package.json +0 -76
  20. package/dependencies/patterns.html +0 -313
  21. package/dependencies/scripts/hgt.js +0 -76
  22. package/dependencies/scripts/scripts/hgt.js +0 -76
  23. package/dependencies/scripts/scripts/vendor/infinite.min.js +0 -7
  24. package/dependencies/scripts/scripts/vendor/jquery.waypoints.min.js +0 -7
  25. package/dependencies/scripts/scripts/vendor/sticky.min.js +0 -7
  26. package/dependencies/scripts/vendor/infinite.min.js +0 -7
  27. package/dependencies/scripts/vendor/jquery.waypoints.min.js +0 -7
  28. package/dependencies/scripts/vendor/sticky.min.js +0 -7
  29. package/dependencies/styles/hgt-syntax.css +0 -86
  30. package/dependencies/styles/hgt.css +0 -428
  31. package/dependencies/styles/styles/hgt-syntax.css +0 -86
  32. package/dependencies/styles/styles/hgt.css +0 -412
  33. package/dependencies/styles.html +0 -985
  34. package/hologram_config.yml +0 -70
  35. package/images/BottomRightPattern.png +0 -0
  36. package/images/BottomRightPatternSml.png +0 -0
  37. package/images/CSDSCertificateLogo.png +0 -0
  38. package/images/CSDSLogoBlack-Sml.png +0 -0
  39. package/images/CSDSLogoColour.png +0 -0
  40. package/images/CSDSLogoColourV2.png +0 -0
  41. package/images/CSDSLogoWhite-Sml.png +0 -0
  42. package/images/PCLogoPlaceHolder.png +0 -0
  43. package/images/PC_certificate-footer.png +0 -0
  44. package/images/PC_certificate-footer.svg +0 -1
  45. package/images/PC_certificate-header.png +0 -0
  46. package/images/PC_certificate-header.svg +0 -1
  47. package/images/QLD-gov-logo-white.png +0 -0
  48. package/images/QLD-gov-logo.png +0 -0
  49. package/images/QLDGovLogoGrey.png +0 -0
  50. package/images/TopLeftPattern.png +0 -0
  51. package/images/TopLeftPatternSml.png +0 -0
  52. package/images/a1.jpg +0 -0
  53. package/images/a10.jpg +0 -0
  54. package/images/a2.jpg +0 -0
  55. package/images/a3.jpg +0 -0
  56. package/images/a4.jpg +0 -0
  57. package/images/a5.jpg +0 -0
  58. package/images/a6.jpg +0 -0
  59. package/images/a7.jpg +0 -0
  60. package/images/a8.jpg +0 -0
  61. package/images/achievements.png +0 -0
  62. package/images/alert-header-elearning.png +0 -0
  63. package/images/alert-header-equipment.png +0 -0
  64. package/images/alert-header-groups.png +0 -0
  65. package/images/alert-header-payments.png +0 -0
  66. package/images/alert-icon-groups.png +0 -0
  67. package/images/angular_logo.png +0 -0
  68. package/images/applicable_standards.png +0 -0
  69. package/images/axiom-pattern.png +0 -0
  70. package/images/background_lp_orange.jpg +0 -0
  71. package/images/background_pocket.jpg +0 -0
  72. package/images/bg_tick_wrapper.png +0 -0
  73. package/images/booking-calendar.png +0 -0
  74. package/images/booking-rooms.png +0 -0
  75. package/images/certificate-footer.png +0 -0
  76. package/images/certificate-footer.svg +0 -1
  77. package/images/certificate-header.png +0 -0
  78. package/images/choice-54e367cf104b0-default.png +0 -0
  79. package/images/courseCategory_alliedHealth.jpeg +0 -0
  80. package/images/courses/aam.jpg +0 -0
  81. package/images/courses/acls.jpg +0 -0
  82. package/images/courses/acrm.jpg +0 -0
  83. package/images/courses/als.jpg +0 -0
  84. package/images/courses/apics.jpg +0 -0
  85. package/images/courses/ason.jpg +0 -0
  86. package/images/courses/basic-sim.jpg +0 -0
  87. package/images/courses/bbs.jpg +0 -0
  88. package/images/courses/bkc.jpg +0 -0
  89. package/images/courses/bls.jpg +0 -0
  90. package/images/courses/blt.jpg +0 -0
  91. package/images/courses/capp.jpg +0 -0
  92. package/images/courses/chest.jpg +0 -0
  93. package/images/courses/cld.jpg +0 -0
  94. package/images/courses/cpc.jpg +0 -0
  95. package/images/courses/crop.jpg +0 -0
  96. package/images/courses/crp-oqp.jpg +0 -0
  97. package/images/courses/defib.jpg +0 -0
  98. package/images/courses/diabetic-foot.jpg +0 -0
  99. package/images/courses/ebus.jpg +0 -0
  100. package/images/courses/emac.jpg +0 -0
  101. package/images/courses/icr.jpg +0 -0
  102. package/images/courses/paccman.jpg +0 -0
  103. package/images/courses/rrcd-a.jpg +0 -0
  104. package/images/courses/seed.jpg +0 -0
  105. package/images/courses/spc.jpg +0 -0
  106. package/images/courses/tasp.jpg +0 -0
  107. package/images/courses/workshop.jpg +0 -0
  108. package/images/csds-eLearning-showcase-1.png +0 -0
  109. package/images/csds-pc-network.jpg +0 -0
  110. package/images/dashbard4_1.jpg +0 -0
  111. package/images/dashbard4_2.jpg +0 -0
  112. package/images/diagmonds-light.png +0 -0
  113. package/images/duotone.jpg +0 -0
  114. package/images/email_1.jpg +0 -0
  115. package/images/email_2.jpg +0 -0
  116. package/images/email_3.jpg +0 -0
  117. package/images/empty-state-courses.png +0 -0
  118. package/images/empty-state-groups.png +0 -0
  119. package/images/empty-state-orders.png +0 -0
  120. package/images/empty-state-payments.png +0 -0
  121. package/images/empty-state-portfolio.png +0 -0
  122. package/images/equip/airsim-baby.jpg +0 -0
  123. package/images/equip/airway-management-trainer.jpg +0 -0
  124. package/images/equip/broncho-boy.jpg +0 -0
  125. package/images/equip/default-img.jpg +0 -0
  126. package/images/equip/little-junior.jpg +0 -0
  127. package/images/equip/resusi-anne-basic.jpg +0 -0
  128. package/images/equip/simman-3g.jpg +0 -0
  129. package/images/full_height.jpg +0 -0
  130. package/images/gallery/1.jpg +0 -0
  131. package/images/gallery/10.jpg +0 -0
  132. package/images/gallery/10s.jpg +0 -0
  133. package/images/gallery/11.jpg +0 -0
  134. package/images/gallery/11s.jpg +0 -0
  135. package/images/gallery/12.jpg +0 -0
  136. package/images/gallery/12s.jpg +0 -0
  137. package/images/gallery/1s.jpg +0 -0
  138. package/images/gallery/2.jpg +0 -0
  139. package/images/gallery/2s.jpg +0 -0
  140. package/images/gallery/3.jpg +0 -0
  141. package/images/gallery/3s.jpg +0 -0
  142. package/images/gallery/4.jpg +0 -0
  143. package/images/gallery/4s.jpg +0 -0
  144. package/images/gallery/5.jpg +0 -0
  145. package/images/gallery/5s.jpg +0 -0
  146. package/images/gallery/6.jpg +0 -0
  147. package/images/gallery/6s.jpg +0 -0
  148. package/images/gallery/7.jpg +0 -0
  149. package/images/gallery/7s.jpg +0 -0
  150. package/images/gallery/8.jpg +0 -0
  151. package/images/gallery/8s.jpg +0 -0
  152. package/images/gallery/9.jpg +0 -0
  153. package/images/gallery/9s.jpg +0 -0
  154. package/images/graphic-email.png +0 -0
  155. package/images/graphic-healthcare-employee.png +0 -0
  156. package/images/graphic-healthcare-neither.png +0 -0
  157. package/images/graphic-healthcare-student.png +0 -0
  158. package/images/graphic-signup.png +0 -0
  159. package/images/green.png +0 -0
  160. package/images/green@2x.png +0 -0
  161. package/images/header-profile-skin-2 (1).png +0 -0
  162. package/images/header-profile-skin-2.png +0 -0
  163. package/images/headphones.jpg +0 -0
  164. package/images/html_logo.png +0 -0
  165. package/images/img_course.png +0 -0
  166. package/images/inspinia/3.png +0 -0
  167. package/images/inspinia/4.png +0 -0
  168. package/images/inspinia/avatar_all.png +0 -0
  169. package/images/inspinia/header-profile-skin-1.png +0 -0
  170. package/images/inspinia/header-profile-skin-2.png +0 -0
  171. package/images/inspinia/header-profile-skin-3.png +0 -0
  172. package/images/inspinia/header-profile.png +0 -0
  173. package/images/inspinia/header_one.jpg +0 -0
  174. package/images/inspinia/header_two.jpg +0 -0
  175. package/images/inspinia/shattered.png +0 -0
  176. package/images/inspinia/word_map.png +0 -0
  177. package/images/landing/CSDS-doing-things-differently-white.png +0 -0
  178. package/images/landing/CSDSLogo.png +0 -0
  179. package/images/landing/avatar1.jpg +0 -0
  180. package/images/landing/avatar2.jpg +0 -0
  181. package/images/landing/avatar3.jpg +0 -0
  182. package/images/landing/avatar4.jpg +0 -0
  183. package/images/landing/avatar5.jpg +0 -0
  184. package/images/landing/avatar6.jpg +0 -0
  185. package/images/landing/avatar7.jpg +0 -0
  186. package/images/landing/avatar8.jpg +0 -0
  187. package/images/landing/avatar9.jpg +0 -0
  188. package/images/landing/avatar_all.png +0 -0
  189. package/images/landing/dashboard.png +0 -0
  190. package/images/landing/header_one.jpg +0 -0
  191. package/images/landing/header_two.jpg +0 -0
  192. package/images/landing/iphone.jpg +0 -0
  193. package/images/landing/laptop.png +0 -0
  194. package/images/landing/perspective.png +0 -0
  195. package/images/landing/qldGovLogo.png +0 -0
  196. package/images/landing/shattered.png +0 -0
  197. package/images/landing/word_map.png +0 -0
  198. package/images/logoPlaceHolder.png +0 -0
  199. package/images/logo_csds_WOD.png +0 -0
  200. package/images/lp-professionals.png +0 -0
  201. package/images/map-placeholder.jpg +0 -0
  202. package/images/meteor_logo.png +0 -0
  203. package/images/mvc_logo.png +0 -0
  204. package/images/off_canvas.jpg +0 -0
  205. package/images/p1.jpg +0 -0
  206. package/images/p2.jpg +0 -0
  207. package/images/p3.jpg +0 -0
  208. package/images/p4.jpg +0 -0
  209. package/images/p5.jpg +0 -0
  210. package/images/p6.jpg +0 -0
  211. package/images/p7.jpg +0 -0
  212. package/images/p8.jpg +0 -0
  213. package/images/p_big1.jpg +0 -0
  214. package/images/p_big2.jpg +0 -0
  215. package/images/p_big3.jpg +0 -0
  216. package/images/pattern_centres.png +0 -0
  217. package/images/pattern_darkPages.png +0 -0
  218. package/images/pattern_educ.png +0 -0
  219. package/images/pattern_educ_whiteBG.png +0 -0
  220. package/images/pattern_white.png +0 -0
  221. package/images/patterns-error1.png +0 -0
  222. package/images/patterns-error2.png +0 -0
  223. package/images/patterns-error3.png +0 -0
  224. package/images/pcn-learning-solutions.jpg +0 -0
  225. package/images/pocket-simulation-centre.jpg +0 -0
  226. package/images/profile.jpg +0 -0
  227. package/images/profile_big.jpg +0 -0
  228. package/images/profile_small.jpg +0 -0
  229. package/images/profile_small2.jpg +0 -0
  230. package/images/rails_logo.png +0 -0
  231. package/images/red.png +0 -0
  232. package/images/red@2x.png +0 -0
  233. package/images/shop-equipmentloans.jpg +0 -0
  234. package/images/shop-products.jpg +0 -0
  235. package/images/signature.png +0 -0
  236. package/images/signaturePlaceHolder.png +0 -0
  237. package/images/simshop-bg.jpg +0 -0
  238. package/images/simshop-head.png +0 -0
  239. package/images/simshop-head2.png +0 -0
  240. package/images/steelblue-darkbg.png +0 -0
  241. package/images/steelblue.png +0 -0
  242. package/images/steelblue@2x.png +0 -0
  243. package/images/steelbluesmall.png +0 -0
  244. package/images/temp-landing-hero.jpg +0 -0
  245. package/images/wallpaper1.jpg +0 -0
  246. package/images/wallpaper2.jpg +0 -0
  247. package/images/wallpaper3.jpg +0 -0
  248. package/images/wallpaper4.jpg +0 -0
  249. package/images/zender_logo.png +0 -0
  250. package/index.html +0 -13
  251. package/sass/base/_base.scss +0 -931
  252. package/sass/base/_typography.scss +0 -236
  253. package/sass/bourbon/_bourbon-deprecated-upcoming.scss +0 -411
  254. package/sass/bourbon/_bourbon.scss +0 -87
  255. package/sass/bourbon/addons/_border-color.scss +0 -26
  256. package/sass/bourbon/addons/_border-radius.scss +0 -48
  257. package/sass/bourbon/addons/_border-style.scss +0 -25
  258. package/sass/bourbon/addons/_border-width.scss +0 -25
  259. package/sass/bourbon/addons/_buttons.scss +0 -64
  260. package/sass/bourbon/addons/_clearfix.scss +0 -25
  261. package/sass/bourbon/addons/_ellipsis.scss +0 -30
  262. package/sass/bourbon/addons/_font-stacks.scss +0 -31
  263. package/sass/bourbon/addons/_hide-text.scss +0 -27
  264. package/sass/bourbon/addons/_margin.scss +0 -26
  265. package/sass/bourbon/addons/_padding.scss +0 -26
  266. package/sass/bourbon/addons/_position.scss +0 -48
  267. package/sass/bourbon/addons/_prefixer.scss +0 -66
  268. package/sass/bourbon/addons/_retina-image.scss +0 -25
  269. package/sass/bourbon/addons/_size.scss +0 -51
  270. package/sass/bourbon/addons/_text-inputs.scss +0 -113
  271. package/sass/bourbon/addons/_timing-functions.scss +0 -34
  272. package/sass/bourbon/addons/_triangle.scss +0 -63
  273. package/sass/bourbon/addons/_word-wrap.scss +0 -29
  274. package/sass/bourbon/css3/_animation.scss +0 -43
  275. package/sass/bourbon/css3/_appearance.scss +0 -3
  276. package/sass/bourbon/css3/_backface-visibility.scss +0 -3
  277. package/sass/bourbon/css3/_background-image.scss +0 -42
  278. package/sass/bourbon/css3/_background.scss +0 -55
  279. package/sass/bourbon/css3/_border-image.scss +0 -59
  280. package/sass/bourbon/css3/_calc.scss +0 -4
  281. package/sass/bourbon/css3/_columns.scss +0 -47
  282. package/sass/bourbon/css3/_filter.scss +0 -4
  283. package/sass/bourbon/css3/_flex-box.scss +0 -287
  284. package/sass/bourbon/css3/_font-face.scss +0 -24
  285. package/sass/bourbon/css3/_font-feature-settings.scss +0 -4
  286. package/sass/bourbon/css3/_hidpi-media-query.scss +0 -10
  287. package/sass/bourbon/css3/_hyphens.scss +0 -4
  288. package/sass/bourbon/css3/_image-rendering.scss +0 -14
  289. package/sass/bourbon/css3/_keyframes.scss +0 -36
  290. package/sass/bourbon/css3/_linear-gradient.scss +0 -38
  291. package/sass/bourbon/css3/_perspective.scss +0 -8
  292. package/sass/bourbon/css3/_placeholder.scss +0 -8
  293. package/sass/bourbon/css3/_radial-gradient.scss +0 -39
  294. package/sass/bourbon/css3/_selection.scss +0 -42
  295. package/sass/bourbon/css3/_text-decoration.scss +0 -19
  296. package/sass/bourbon/css3/_transform.scss +0 -15
  297. package/sass/bourbon/css3/_transition.scss +0 -71
  298. package/sass/bourbon/css3/_user-select.scss +0 -3
  299. package/sass/bourbon/functions/_assign-inputs.scss +0 -11
  300. package/sass/bourbon/functions/_contains-falsy.scss +0 -20
  301. package/sass/bourbon/functions/_contains.scss +0 -26
  302. package/sass/bourbon/functions/_is-length.scss +0 -11
  303. package/sass/bourbon/functions/_is-light.scss +0 -21
  304. package/sass/bourbon/functions/_is-number.scss +0 -11
  305. package/sass/bourbon/functions/_is-size.scss +0 -13
  306. package/sass/bourbon/functions/_modular-scale.scss +0 -69
  307. package/sass/bourbon/functions/_px-to-em.scss +0 -13
  308. package/sass/bourbon/functions/_px-to-rem.scss +0 -15
  309. package/sass/bourbon/functions/_shade.scss +0 -24
  310. package/sass/bourbon/functions/_strip-units.scss +0 -17
  311. package/sass/bourbon/functions/_tint.scss +0 -24
  312. package/sass/bourbon/functions/_transition-property-name.scss +0 -22
  313. package/sass/bourbon/functions/_unpack.scss +0 -27
  314. package/sass/bourbon/helpers/_convert-units.scss +0 -21
  315. package/sass/bourbon/helpers/_directional-values.scss +0 -96
  316. package/sass/bourbon/helpers/_font-source-declaration.scss +0 -43
  317. package/sass/bourbon/helpers/_gradient-positions-parser.scss +0 -13
  318. package/sass/bourbon/helpers/_linear-angle-parser.scss +0 -25
  319. package/sass/bourbon/helpers/_linear-gradient-parser.scss +0 -41
  320. package/sass/bourbon/helpers/_linear-positions-parser.scss +0 -61
  321. package/sass/bourbon/helpers/_linear-side-corner-parser.scss +0 -31
  322. package/sass/bourbon/helpers/_radial-arg-parser.scss +0 -69
  323. package/sass/bourbon/helpers/_radial-gradient-parser.scss +0 -50
  324. package/sass/bourbon/helpers/_radial-positions-parser.scss +0 -18
  325. package/sass/bourbon/helpers/_render-gradients.scss +0 -26
  326. package/sass/bourbon/helpers/_shape-size-stripper.scss +0 -10
  327. package/sass/bourbon/helpers/_str-to-num.scss +0 -50
  328. package/sass/bourbon/settings/_asset-pipeline.scss +0 -7
  329. package/sass/bourbon/settings/_prefixer.scss +0 -9
  330. package/sass/bourbon/settings/_px-to-em.scss +0 -1
  331. package/sass/components/_alerts.scss +0 -300
  332. package/sass/components/_badges_labels.scss +0 -204
  333. package/sass/components/_breadcrumbs.scss +0 -65
  334. package/sass/components/_buttons.scss +0 -769
  335. package/sass/components/_calendar.scss +0 -301
  336. package/sass/components/_cards.scss +0 -218
  337. package/sass/components/_chips.scss +0 -23
  338. package/sass/components/_comments.scss +0 -129
  339. package/sass/components/_ibox.scss +0 -722
  340. package/sass/components/_icons.scss +0 -17
  341. package/sass/components/_inputs.scss +0 -3
  342. package/sass/components/_lists.scss +0 -489
  343. package/sass/components/_modals.scss +0 -260
  344. package/sass/components/_navigation.scss +0 -596
  345. package/sass/components/_photo_upload.scss +0 -39
  346. package/sass/components/_progress_bars.scss +0 -90
  347. package/sass/components/_sidebar.scss +0 -53
  348. package/sass/components/_tables.scss +0 -429
  349. package/sass/components/_timeline.scss +0 -84
  350. package/sass/components/_widgets.scss +0 -310
  351. package/sass/components/_wizards.scss +0 -48
  352. package/sass/components/_wysiwyg.scss +0 -3
  353. package/sass/inspinia/_animate.scss +0 -2848
  354. package/sass/inspinia/_badges_labels.scss +0 -67
  355. package/sass/inspinia/_base.scss +0 -1424
  356. package/sass/inspinia/_buttons.scss +0 -309
  357. package/sass/inspinia/_chat.scss +0 -125
  358. package/sass/inspinia/_custom.scss +0 -6
  359. package/sass/inspinia/_elements.scss +0 -2632
  360. package/sass/inspinia/_landing.scss +0 -659
  361. package/sass/inspinia/_md-skin.scss +0 -400
  362. package/sass/inspinia/_media.scss +0 -132
  363. package/sass/inspinia/_metismenu.scss +0 -82
  364. package/sass/inspinia/_mixins.scss +0 -0
  365. package/sass/inspinia/_navigation.scss +0 -590
  366. package/sass/inspinia/_pages.scss +0 -1366
  367. package/sass/inspinia/_rtl.scss +0 -280
  368. package/sass/inspinia/_sidebar.scss +0 -195
  369. package/sass/inspinia/_skins.scss +0 -480
  370. package/sass/inspinia/_spinners.scss +0 -1018
  371. package/sass/inspinia/_theme-config.scss +0 -114
  372. package/sass/inspinia/_top_navigation.scss +0 -132
  373. package/sass/inspinia/_typography.scss +0 -32
  374. package/sass/inspinia/_variables.scss +0 -39
  375. package/sass/layout/_bootstrap.scss +0 -496
  376. package/sass/layout/_content.scss +0 -31
  377. package/sass/layout/_forms.scss +0 -911
  378. package/sass/layout/_media-max-1199.scss +0 -7
  379. package/sass/layout/_media-max-1200.scss +0 -96
  380. package/sass/layout/_media-max-1400.scss +0 -7
  381. package/sass/layout/_media-max-330.scss +0 -5
  382. package/sass/layout/_media-max-350.scss +0 -38
  383. package/sass/layout/_media-max-400.scss +0 -51
  384. package/sass/layout/_media-max-460.scss +0 -81
  385. package/sass/layout/_media-max-479.scss +0 -32
  386. package/sass/layout/_media-max-550.scss +0 -47
  387. package/sass/layout/_media-max-600.scss +0 -64
  388. package/sass/layout/_media-max-672.scss +0 -6
  389. package/sass/layout/_media-max-768.scss +0 -81
  390. package/sass/layout/_media-max-840.scss +0 -11
  391. package/sass/layout/_media-max-900.scss +0 -5
  392. package/sass/layout/_media-max-991.scss +0 -18
  393. package/sass/layout/_media-max-992.scss +0 -48
  394. package/sass/layout/_media-max-999.scss +0 -35
  395. package/sass/layout/_media-min-1200.scss +0 -5
  396. package/sass/layout/_media-min-1201.scss +0 -112
  397. package/sass/layout/_media-min-1401.scss +0 -29
  398. package/sass/layout/_media-min-1501.scss +0 -8
  399. package/sass/layout/_media-min-1601.scss +0 -485
  400. package/sass/layout/_media-min-480.scss +0 -15
  401. package/sass/layout/_media-min-672.scss +0 -6
  402. package/sass/layout/_media-min-768.scss +0 -160
  403. package/sass/layout/_media-min-820.scss +0 -19
  404. package/sass/layout/_media-min-880.scss +0 -76
  405. package/sass/layout/_media-min-993.scss +0 -141
  406. package/sass/layout/_media.scss +0 -82
  407. package/sass/layout/_sidebar.scss +0 -29
  408. package/sass/layout/_top_navigation.scss +0 -37
  409. package/sass/pages/_pages.scss +0 -4429
  410. package/sass/plugins/_charts.scss +0 -65
  411. package/sass/plugins/_dropzone.scss +0 -15
  412. package/sass/plugins/_icheck.scss +0 -196
  413. package/sass/plugins/_select2-bootstrap.scss +0 -631
  414. package/sass/plugins/_skspinner.scss +0 -5
  415. package/sass/plugins/_sortable.scss +0 -43
  416. package/sass/plugins/_timepicker.scss +0 -14
  417. package/sass/plugins/_toastr.scss +0 -53
  418. package/sass/style.scss +0 -92
  419. package/sass/styleguide/_components-1-buttons.scss +0 -125
  420. package/sass/styleguide/_components-badges.scss +0 -62
  421. package/sass/styleguide/_components-breadcrumbs.scss +0 -30
  422. package/sass/styleguide/_components-cards.scss +0 -57
  423. package/sass/styleguide/_components-forms.scss +0 -176
  424. package/sass/styleguide/_components-ibox.scss +0 -107
  425. package/sass/styleguide/_components-labels.scss +0 -69
  426. package/sass/styleguide/_components-lists.scss +0 -274
  427. package/sass/styleguide/_components-modals.scss +0 -171
  428. package/sass/styleguide/_components-pagination.scss +0 -27
  429. package/sass/styleguide/_components-progressBars.scss +0 -82
  430. package/sass/styleguide/_components-tables.scss +0 -115
  431. package/sass/styleguide/_components-widgets.scss +0 -105
  432. package/sass/styleguide/_layout-asana.scss +0 -163
  433. package/sass/styleguide/_layout-centered.scss +0 -33
  434. package/sass/styleguide/_layout-itemAction.scss +0 -92
  435. package/sass/styleguide/_layout-responsive.scss +0 -77
  436. package/sass/styleguide/_patterns-alerts.scss +0 -62
  437. package/sass/styleguide/_patterns-dataformats.scss +0 -40
  438. package/sass/styleguide/_patterns-emptystates.scss +0 -46
  439. package/sass/styleguide/_patterns-errors.scss +0 -44
  440. package/sass/styleguide/_section-components.scss +0 -12
  441. package/sass/styleguide/_section-layout.scss +0 -40
  442. package/sass/styleguide/_section-patterns.scss +0 -11
  443. package/sass/styleguide/_section-styles.scss +0 -9
  444. package/sass/styleguide/_style-1-colors.scss +0 -126
  445. package/sass/styleguide/_style-2-icons.scss +0 -90
  446. package/sass/styleguide/_style-3-typography.scss +0 -139
  447. package/sass/styleguide/_style-4-spacing.scss +0 -85
  448. package/sass/styleguide/_style-5-borders.scss +0 -56
  449. package/sass/styleguide/_style-6-helpers.scss +0 -184
  450. package/sass/styleguide/index.md +0 -31
  451. package/sass/utilities/_mixins.scss +0 -607
  452. package/sass/utilities/_variables.scss +0 -118
  453. package/styleguide-dep/code_example_templates/js_example_template.html.erb +0 -7
  454. package/styleguide-dep/code_example_templates/jsx_example_template.html.erb +0 -7
  455. package/styleguide-dep/code_example_templates/markup_example_template.html.erb +0 -10
  456. package/styleguide-dep/code_example_templates/markup_table_template.html.erb +0 -23
  457. package/styleguide-dep/css/custom-icheckbox.css +0 -121
  458. package/styleguide-dep/css/doc.css +0 -165
  459. package/styleguide-dep/css/steelblue.png +0 -0
  460. package/styleguide-dep/css/steelblue@2x.png +0 -0
  461. package/styleguide-dep/js/checkbox.js +0 -6
  462. package/styleguide-dep/js/custom.js +0 -969
  463. package/styleguide-dep/js/inspinia.js +0 -297
package/dependencies/components.html DELETED
@@ -1,2761 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <title>Components &ndash; Central Style Guide - Concrete</title>
7
-
8
- <!-- Styleguide CSS -->
9
- <link rel="stylesheet" href="styles/hgt-syntax.css">
10
- <link rel="stylesheet" href="styles/hgt.css">
11
-
12
- <!-- Source CSS -->
13
-
14
-
15
- <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
16
-
17
- <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
18
-
19
- <link rel="stylesheet" href="../styleguide/css/style.css">
20
-
21
- <link rel="stylesheet" href="../styleguide-dep/css/doc.css">
22
-
23
- <link rel="stylesheet" href="../styleguide-dep/css/custom-icheckbox.css">
24
-
25
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic,500,500italic">
26
-
27
-
28
- </head>
29
-
30
- <body class="hgt-body">
31
- <div class="hgt-pagehead">
32
- <div class="hgt-container">
33
- <nav class="hgt-pagehead-nav" role="navigation">
34
- <a href="index.html"
35
- class="hgt-pagehead-nav-item ">
36
- Home
37
- </a>
38
-
39
-
40
- <a href="components.html"
41
- class="hgt-pagehead-nav-item selected">
42
- Components
43
- </a>
44
-
45
- <a href="layout.html"
46
- class="hgt-pagehead-nav-item ">
47
- Layout
48
- </a>
49
-
50
- <a href="patterns.html"
51
- class="hgt-pagehead-nav-item ">
52
- Patterns
53
- </a>
54
-
55
- <a href="styles.html"
56
- class="hgt-pagehead-nav-item ">
57
- Styles
58
- </a>
59
-
60
- </nav>
61
-
62
- <h1 class="hgt-pagehead-title">Central Style Guide - Concrete</h1>
63
- </div>
64
- </div>
65
-
66
- <div class="hgt-styleguide hgt-container">
67
- <div class="hgt-columns">
68
-
69
- <div class="hgt-column one-fourth">
70
- <nav class="hgt-menu">
71
-
72
-
73
- <a href="#0_overview-components" class="hgt-menu-item">Overview</a>
74
-
75
-
76
-
77
- <a href="#1_buttons" class="hgt-menu-item">Buttons</a>
78
-
79
-
80
-
81
- <a href="#badges" class="hgt-menu-item">Badges</a>
82
-
83
-
84
-
85
- <a href="#breadcrumbs" class="hgt-menu-item">Breadcrumbs</a>
86
-
87
-
88
-
89
- <a href="#cards" class="hgt-menu-item">Cards</a>
90
-
91
-
92
-
93
- <a href="#forms" class="hgt-menu-item">Forms</a>
94
-
95
-
96
-
97
- <a href="#ibox" class="hgt-menu-item">Ibox</a>
98
-
99
-
100
-
101
- <a href="#labels" class="hgt-menu-item">Labels</a>
102
-
103
-
104
-
105
- <a href="#lists" class="hgt-menu-item">Lists</a>
106
-
107
-
108
-
109
- <a href="#modals" class="hgt-menu-item">Modals</a>
110
-
111
-
112
-
113
- <a href="#pagination" class="hgt-menu-item">Pagination</a>
114
-
115
-
116
-
117
- <a href="#progress" class="hgt-menu-item">Progress bars</a>
118
-
119
-
120
-
121
- <a href="#tables" class="hgt-menu-item">Tables</a>
122
-
123
-
124
-
125
- <a href="#widgets" class="hgt-menu-item">Widgets</a>
126
-
127
-
128
- </nav>
129
- </div>
130
-
131
-
132
- <div class="hgt-column three-fourths">
133
- <div class="hgt-content">
134
- <h1 id="0_overview-components" class="styleguide">Overview</h1>
135
-
136
- <p class="lead">Over a dozen reusable components built to provide iconography, dropdowns,
137
- input groups, navigation, alerts, and much more.</p>
138
-
139
- <h1 id="1_buttons" class="styleguide">Buttons</h1>
140
-
141
- <p class="lead">Buttons are <em>mostly</em> used for <strong>actions</strong>, like in forms, while textual
142
- hyperlinks are <em>mostly</em> used for <strong>destinations</strong>, or moving from one
143
- page to another.</p>
144
- <p class="styleguide">You can find most of the styles in <code>components/_buttons.scss</code></p><p class="styleguide">Button styles can be applied to any element. Typically you&#39;ll want to
145
- use either a <code class="styleguide">&lt;button&gt;</code> or an <code class="styleguide">&lt;a&gt;</code> element:</p><div class="codeExample">
146
- <div class="exampleOutput clear">
147
- <button class="btn btnDefault">Click</button>
148
- <a class="btn btnDefault" href="#">Don't click</a>
149
-
150
-
151
- </div>
152
- <div class="codeBlock">
153
- <div class="highlight">
154
- <pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btnDefault"</span><span class="nt">&gt;</span>Click<span class="nt">&lt;/button&gt;</span>
155
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btnDefault"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Don't click<span class="nt">&lt;/a&gt;</span></pre>
156
- </div>
157
- </div>
158
- </div>
159
- <p class="styleguide">If your button is actually a link to another page, please use the
160
- <code class="styleguide">&lt;a&gt;</code> element, while if your button performs an action, such as submitting
161
- a form or triggering some javascript event, then use a <code class="styleguide">&lt;button&gt;</code> element.</p>
162
- <h2>Sizes</h2>
163
- <p class="styleguide">There are four sizes for buttons: default, large, small, and extra small.
164
- Simply apply the size modifier class for the desired size.</p><table class="styleguide"> <tr>
165
- <th>Button</th>
166
- <th>Modifier Class</th>
167
- </tr>
168
- <tr>
169
- <td><button class="btn btn-primary btn-xs">Extra small</button></td>
170
- <td><pre>btn btn-xs</pre></td>
171
- </tr>
172
- <tr>
173
- <td><button class="btn btn-primary btn-sm">Small</button></td>
174
- <td><pre>btn btn-sm</pre></td>
175
- </tr>
176
- <tr>
177
- <td><button class="btn btn-primary">Default</button></td>
178
- <td><pre>btn btn-default</pre></td>
179
- </tr>
180
- <tr>
181
- <td><button class="btn btn-primary btn-lg">Large</button></td>
182
- <td><pre>btn btn-large</pre></td>
183
- </tr>
184
- </table>
185
- <h2>Options</h2>
186
- <p class="styleguide">Use any of the available button classes to quickly create a styled button.
187
- <code>.btn-red</code> is also similar to <code>.btn-danger</code> the same way
188
- <code>.btn-yellow</code> is also similar to <code>.btn-warning</code></p><div class="codeExample">
189
- <div class="exampleOutput clear">
190
- <button class="btn btn-grey">Grey</button>
191
- <button class="btn btn-primary">Primary</button>
192
- <button class="btn btn-danger">Danger</button>
193
- <button class="btn btn-purple">Purple</button>
194
- <button class="btn btn-warning">Warning</button>
195
- <button class="btn btn-white">Cancel</button>
196
-
197
- </div>
198
- <div class="codeBlock">
199
- <div class="highlight">
200
- <pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-grey"</span><span class="nt">&gt;</span>Grey<span class="nt">&lt;/button&gt;</span>
201
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/button&gt;</span>
202
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/button&gt;</span>
203
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-purple"</span><span class="nt">&gt;</span>Purple<span class="nt">&lt;/button&gt;</span>
204
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/button&gt;</span>
205
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/button&gt;</span></pre>
206
- </div>
207
- </div>
208
- </div>
209
-
210
- <h2>Writing for buttons</h2>
211
- <p class="styleguide">We strive to label the button with what it does. The text on the button should begin with a verb. Otherwise, it&#39;s not a call to action. It&#39;s just a button with text on it.</p><p class="styleguide">Every component should only have at least one primary action. This is denoted by the modifier <code>btn-primary</code>. </p>
212
- <h2>Justified buttons</h2>
213
- <p class="styleguide">There is also an additional modifier that will make the button stretch to span
214
- the entire width of its parent container. Use <code>.btn-block</code>.</p><p class="styleguide">You can also use the <code>full-width</code> class in lieu of <code>btn-block</code>.</p><div class="codeExample">
215
- <div class="exampleOutput clear">
216
- <div class="row">
217
- <div class="col-lg-12">
218
- <button type="submit" class="btn btn-primary btn-block">
219
- Log in
220
- </button>
221
- </div>
222
- </div>
223
-
224
- </div>
225
- <div class="codeBlock">
226
- <div class="highlight">
227
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
228
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-12"</span><span class="nt">&gt;</span>
229
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>
230
- Log in
231
- <span class="nt">&lt;/button&gt;</span>
232
- <span class="nt">&lt;/div&gt;</span>
233
- <span class="nt">&lt;/div&gt;</span></pre>
234
- </div>
235
- </div>
236
- </div>
237
- <p class="styleguide">Another example of how to use <code>btn-block</code>.</p><div class="codeExample">
238
- <div class="exampleOutput clear">
239
- <div class="row">
240
- <div class="col-sm-4">
241
- <button type="submit" class="btn btn-primary btn-block">
242
- View requests
243
- </button>
244
- </div>
245
- <div class="col-sm-4">
246
- <button type="submit" class="btn btn-primary btn-block">
247
- New request
248
- </button>
249
- </div>
250
- <div class="col-sm-4">
251
- <button type="submit" class="btn btn-primary btn-block">
252
- View work orders
253
- </button>
254
- </div>
255
- </div>
256
-
257
- </div>
258
- <div class="codeBlock">
259
- <div class="highlight">
260
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
261
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">&gt;</span>
262
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>
263
- View requests
264
- <span class="nt">&lt;/button&gt;</span>
265
- <span class="nt">&lt;/div&gt;</span>
266
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">&gt;</span>
267
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>
268
- New request
269
- <span class="nt">&lt;/button&gt;</span>
270
- <span class="nt">&lt;/div&gt;</span>
271
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">&gt;</span>
272
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">&gt;</span>
273
- View work orders
274
- <span class="nt">&lt;/button&gt;</span>
275
- <span class="nt">&lt;/div&gt;</span>
276
- <span class="nt">&lt;/div&gt;</span></pre>
277
- </div>
278
- </div>
279
- </div>
280
- <p class="styleguide">We wrap a series of buttons with <code>.btn</code> in <code>btn-group</code>.
281
- We normally do this as supplemental navigation.</p><div class="codeExample">
282
- <div class="exampleOutput clear">
283
- <span class="btn-group">
284
- <a class="btn btn-default">List</a>
285
- <a class="btn btn-default active">Calendar</a>
286
- </span>
287
-
288
- </div>
289
- <div class="codeBlock">
290
- <div class="highlight">
291
- <pre><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
292
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>List<span class="nt">&lt;/a&gt;</span>
293
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-default active"</span><span class="nt">&gt;</span>Calendar<span class="nt">&lt;/a&gt;</span>
294
- <span class="nt">&lt;/span&gt;</span></pre>
295
- </div>
296
- </div>
297
- </div>
298
-
299
- <h2>Dropdowns</h2>
300
- <div class="codeExample">
301
- <div class="exampleOutput clear">
302
-
303
-
304
- <div class="btn-group">
305
- <button type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown">Status (2) <span class="caret"></span></button>
306
- <ul class="dropdown-menu">
307
- <li class="i-checks"><a><label> <input type="checkbox" value="" checked> Operational</label></a></li>
308
- <li class="i-checks"><a><label> <input type="checkbox" value="" checked> On hold</label></a></li>
309
- <li class="i-checks"><a><label> <input type="checkbox" value=""> Closed</label></a></li>
310
- </ul>
311
- </div>
312
-
313
- </div>
314
- <div class="codeBlock">
315
- <div class="highlight">
316
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
317
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-grey dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>Status (2) <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">&gt;&lt;/span&gt;&lt;/button&gt;</span>
318
- <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
319
- <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"i-checks"</span><span class="nt">&gt;&lt;a&gt;&lt;label&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">checked</span><span class="nt">&gt;</span> Operational<span class="nt">&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;</span>
320
- <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"i-checks"</span><span class="nt">&gt;&lt;a&gt;&lt;label&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">checked</span><span class="nt">&gt;</span> On hold<span class="nt">&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;</span>
321
- <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"i-checks"</span><span class="nt">&gt;&lt;a&gt;&lt;label&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span> Closed<span class="nt">&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;</span>
322
- <span class="nt">&lt;/ul&gt;</span>
323
- <span class="nt">&lt;/div&gt;</span></pre>
324
- </div>
325
- </div>
326
- </div>
327
-
328
- <h1 id="badges" class="styleguide">Badges</h1>
329
-
330
- <p class="lead">Easily highlight new or unread items by adding a
331
- <code><span class="badge"></code> to links and more.</p>
332
- <div class="codeExample">
333
- <div class="exampleOutput clear">
334
- <a>Inbox <span class="badge">42</span></a>
335
-
336
- </div>
337
- <div class="codeBlock">
338
- <div class="highlight">
339
- <pre><span class="nt">&lt;a&gt;</span>Inbox <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>42<span class="nt">&lt;/span&gt;&lt;/a&gt;</span></pre>
340
- </div>
341
- </div>
342
- </div>
343
- <p class="styleguide">You can add the <code>.lg</code> modifier class to increase
344
- size of your badge. <em>No, Johnathan. I&#39;m not talking about
345
- something else.</em></p><div class="codeExample">
346
- <div class="exampleOutput clear">
347
- <a>Inbox <span class="badge lg">42</span></a>
348
-
349
- </div>
350
- <div class="codeBlock">
351
- <div class="highlight">
352
- <pre><span class="nt">&lt;a&gt;</span>Inbox <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge lg"</span><span class="nt">&gt;</span>42<span class="nt">&lt;/span&gt;&lt;/a&gt;</span></pre>
353
- </div>
354
- </div>
355
- </div>
356
-
357
- <h2>Available variations</h2>
358
- <p class="styleguide">Add any of the below mentioned modifier classes to change the appearance of a label.</p><table class="styleguide"> <tr>
359
- <th>Label</th>
360
- <th>Modifier Class</th>
361
- </tr>
362
- <tr>
363
- <td><span class="badge badge-yellow">1</span></td>
364
- <td><code>badge-yellow</code></td>
365
- </tr>
366
- <tr>
367
- <td><span class="badge badge-teal">2</span></td>
368
- <td><code>badge-teal</code></td>
369
- </tr>
370
- <tr>
371
- <td><span class="badge badge-green">3</span></td>
372
- <td><code>badge-green</code></td>
373
- </tr>
374
- <tr>
375
- <td><span class="badge badge-success">4</span></td>
376
- <td><code>badge-success</code></td>
377
- </tr>
378
- <tr>
379
- <td><span class="badge badge-purple">5</span></td>
380
- <td><code>badge-purple</code></td>
381
- </tr>
382
- <tr>
383
- <td><span class="badge badge-deep-blue">6</span></td>
384
- <td><code>badge-deep-blue</code></td>
385
- </tr>
386
- <tr>
387
- <td><span class="badge badge-light-grey">7</span></td>
388
- <td><code>badge-light-grey</code></td>
389
- </tr>
390
- <tr>
391
- <td><span class="badge badge-brown">8</span></td>
392
- <td><code>badge-brown</code></td>
393
- </tr>
394
- <tr>
395
- <td><span class="badge badge-pink">9</span></td>
396
- <td><code>badge-pink</code></td>
397
- </tr>
398
- <tr>
399
- <td><span class="badge badge-primary">10</span></td>
400
- <td><code>badge-primary</code></td>
401
- </tr>
402
- <tr>
403
- <td><span class="badge badge-danger">11</span></td>
404
- <td><code>badge-danger</code></td>
405
- </tr>
406
- <tr>
407
- <td><span class="badge badge-red">12</span></td>
408
- <td><code>badge-red</code></td>
409
- </tr>
410
- <tr>
411
- <td><span class="badge badge-info">13</span></td>
412
- <td><code>badge-info</code></td>
413
- </tr>
414
- <tr>
415
- <td><span class="badge badge-orange">14</span></td>
416
- <td><code>badge-orange</code></td>
417
- </tr>
418
- </table><p class="styleguide">Similar to labels, the <code>outline</code> modifier class is also available.</p><table class="styleguide"> <tr>
419
- <th>Label</th>
420
- <th>Modifier Class</th>
421
- </tr>
422
- <tr>
423
- <td><span class="badge badge-yellow outline">1</span></td>
424
- <td><code>badge-yellow outline</code></td>
425
- </tr>
426
- <tr>
427
- <td><span class="badge badge-teal outline">2</span></td>
428
- <td><code>badge-teal outline</code></td>
429
- </tr>
430
- <tr>
431
- <td><span class="badge badge-green outline">3</span></td>
432
- <td><code>badge-green outline</code></td>
433
- </tr>
434
- <tr>
435
- <td><span class="badge badge-success outline">4</span></td>
436
- <td><code>badge-success outline</code></td>
437
- </tr>
438
- <tr>
439
- <td><span class="badge badge-purple outline">5</span></td>
440
- <td><code>badge-purple outline</code></td>
441
- </tr>
442
- <tr>
443
- <td><span class="badge badge-deep-blue outline">6</span></td>
444
- <td><code>badge-deep-blue outline</code></td>
445
- </tr>
446
- <tr>
447
- <td><span class="badge badge-light-grey outline">7</span></td>
448
- <td><code>badge-light-grey outline</code></td>
449
- </tr>
450
- <tr>
451
- <td><span class="badge badge-brown outline">8</span></td>
452
- <td><code>badge-brown outline</code></td>
453
- </tr>
454
- <tr>
455
- <td><span class="badge badge-pink outline">9</span></td>
456
- <td><code>badge-pink outline</code></td>
457
- </tr>
458
- <tr>
459
- <td><span class="badge badge-primary outline">10</span></td>
460
- <td><code>badge-primary outline</code></td>
461
- </tr>
462
- <tr>
463
- <td><span class="badge badge-danger outline">11</span></td>
464
- <td><code>badge-danger outline</code></td>
465
- </tr>
466
- <tr>
467
- <td><span class="badge badge-red outline">12</span></td>
468
- <td><code>badge-red outline</code></td>
469
- </tr>
470
- <tr>
471
- <td><span class="badge badge-info outline">13</span></td>
472
- <td><code>badge-info outline</code></td>
473
- </tr>
474
- <tr>
475
- <td><span class="badge badge-orange outline">14</span></td>
476
- <td><code>badge-orange outline</code></td>
477
- </tr>
478
- </table>
479
- <h1 id="breadcrumbs" class="styleguide">Breadcrumbs</h1>
480
-
481
- <p class="lead">A breadcrumb is a secondary navigation scheme type that helps a user identify their location within a system.</p>
482
- <p class="styleguide">Central uses a location-based breadcrumb that shows the user where they are in the system. Their current location is highlighted by using the <code>h1</code> tag. Then previous pages appear at the top. Each text link is for a page that is one level higher than the current one.</p><div class="codeExample">
483
- <div class="exampleOutput clear">
484
- <div class="row">
485
- <div class="col-md-12 clearfix">
486
- <ol class="breadcrumb m-t-md m-b-xxs">
487
- <li>
488
- <a href="../index.php">Home</a>
489
- </li>
490
- <li>
491
- <a href="index.php">Bookings</a>
492
- </li>
493
- </ol>
494
-
495
- <h1 class="pull-left m-t-none m-b-none">Rooms</h1>
496
- </div>
497
- </div>
498
-
499
- </div>
500
- <div class="codeBlock">
501
- <div class="highlight">
502
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
503
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-12 clearfix"</span><span class="nt">&gt;</span>
504
- <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb m-t-md m-b-xxs"</span><span class="nt">&gt;</span>
505
- <span class="nt">&lt;li&gt;</span>
506
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"../index.php"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
507
- <span class="nt">&lt;/li&gt;</span>
508
- <span class="nt">&lt;li&gt;</span>
509
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"index.php"</span><span class="nt">&gt;</span>Bookings<span class="nt">&lt;/a&gt;</span>
510
- <span class="nt">&lt;/li&gt;</span>
511
- <span class="nt">&lt;/ol&gt;</span>
512
-
513
- <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"pull-left m-t-none m-b-none"</span><span class="nt">&gt;</span>Rooms<span class="nt">&lt;/h1&gt;</span>
514
- <span class="nt">&lt;/div&gt;</span>
515
- <span class="nt">&lt;/div&gt;</span></pre>
516
- </div>
517
- </div>
518
- </div>
519
-
520
- <h1 id="cards" class="styleguide">Cards</h1>
521
-
522
- <p class="lead">A card serves as a gateway point to more detailed information. It's always a clickable component.
523
- A non-clickable version of a card is a widget. A card may contain just about anything, a photo, text, an action, multiple actions. </p>
524
-
525
- <p>When to use a card?</p>
526
-
527
- <ul>
528
- <li>If the component expects an action from a user</li>
529
- <li>A component is comprised of multiple data types</li>
530
- </ul>
531
- <div class="codeExample">
532
- <div class="exampleOutput clear">
533
- <div class="row">
534
- <div class="col-md-6 col-xs-12">
535
- <div class="ibox ibox-card ibox-card-wh card-purple card-elearning card-course">
536
- <a href="course-elearning.php">
537
- <div class="ibox-title">
538
- <span class="ibox-title-wrapper">
539
- <h2>
540
- <span class="ellipsis">Aboriginal and Torres Strait Islander Cultural Practice eLearning Program</span>
541
- <span class="sub-title nobr">CA</span>
542
- </h2>
543
- </span>
544
- </div>
545
- <div class="ibox-content">
546
- <h3 class="course-code m-b-xs">eLearning</h3>
547
- <div class="description m-b-sm">
548
- <p>Increase your knowledge and understanding of the issues, past and present, that affect Aboriginal and Torres Strait Islander societies/communities, including communicating sensitively and effectively.</p>
549
- </div>
550
-
551
- <p>
552
- <i class="fa fa-clock-o"></i> Self paced<br>
553
- <i class="fa fa-dollar"></i> Free
554
- </p>
555
- <p class="truncate">
556
- <span class="sub-heading">DEVELOPED BY</span><br>
557
- Aboriginal and Torres Strait Islander Health Unit, MNHHS
558
- </p>
559
- </div>
560
- </a>
561
- <div class="ibox-content p-sm">
562
- <a class="btn btn-transparent" href="course-elearning.php">VIEW MORE</a>
563
- </div>
564
- </a>
565
- </div>
566
- </div>
567
- </div>
568
-
569
- </div>
570
- <div class="codeBlock">
571
- <div class="highlight">
572
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
573
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6 col-xs-12"</span><span class="nt">&gt;</span>
574
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox ibox-card ibox-card-wh card-purple card-elearning card-course"</span><span class="nt">&gt;</span>
575
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"course-elearning.php"</span><span class="nt">&gt;</span>
576
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-title"</span><span class="nt">&gt;</span>
577
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ibox-title-wrapper"</span><span class="nt">&gt;</span>
578
- <span class="nt">&lt;h2&gt;</span>
579
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ellipsis"</span><span class="nt">&gt;</span>Aboriginal and Torres Strait Islander Cultural Practice eLearning Program<span class="nt">&lt;/span&gt;</span>
580
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-title nobr"</span><span class="nt">&gt;</span>CA<span class="nt">&lt;/span&gt;</span>
581
- <span class="nt">&lt;/h2&gt;</span>
582
- <span class="nt">&lt;/span&gt;</span>
583
- <span class="nt">&lt;/div&gt;</span>
584
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-content"</span><span class="nt">&gt;</span>
585
- <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"course-code m-b-xs"</span><span class="nt">&gt;</span>eLearning<span class="nt">&lt;/h3&gt;</span>
586
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"description m-b-sm"</span><span class="nt">&gt;</span>
587
- <span class="nt">&lt;p&gt;</span>Increase your knowledge and understanding of the issues, past and present, that affect Aboriginal and Torres Strait Islander societies/communities, including communicating sensitively and effectively.<span class="nt">&lt;/p&gt;</span>
588
- <span class="nt">&lt;/div&gt;</span>
589
-
590
- <span class="nt">&lt;p&gt;</span>
591
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o"</span><span class="nt">&gt;&lt;/i&gt;</span> Self paced<span class="nt">&lt;br&gt;</span>
592
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-dollar"</span><span class="nt">&gt;&lt;/i&gt;</span> Free
593
- <span class="nt">&lt;/p&gt;</span>
594
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"truncate"</span><span class="nt">&gt;</span>
595
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>DEVELOPED BY<span class="nt">&lt;/span&gt;&lt;br&gt;</span>
596
- Aboriginal and Torres Strait Islander Health Unit, MNHHS
597
- <span class="nt">&lt;/p&gt;</span>
598
- <span class="nt">&lt;/div&gt;</span>
599
- <span class="nt">&lt;/a&gt;</span>
600
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-content p-sm"</span><span class="nt">&gt;</span>
601
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-transparent"</span> <span class="na">href=</span><span class="s">"course-elearning.php"</span><span class="nt">&gt;</span>VIEW MORE<span class="nt">&lt;/a&gt;</span>
602
- <span class="nt">&lt;/div&gt;</span>
603
- <span class="nt">&lt;/a&gt;</span>
604
- <span class="nt">&lt;/div&gt;</span>
605
- <span class="nt">&lt;/div&gt;</span>
606
- <span class="nt">&lt;/div&gt;</span></pre>
607
- </div>
608
- </div>
609
- </div>
610
-
611
- <h1 id="forms" class="styleguide">Forms</h1>
612
-
613
- <h2>Basic example</h2>
614
- <p class="styleguide">Individual form controls automatically receive some global styling.
615
- All textual <code class="styleguide">&lt;input&gt;</code>, <code class="styleguide">&lt;textarea&gt;</code>, and <code class="styleguide">&lt;select&gt;</code> elements with <code class="styleguide">.form-control</code>
616
- are set to <code class="styleguide">width: 100%</code>; by default.</p><p class="styleguide">Wrap labels and controls in <code class="styleguide">.form-group</code> for optimum spacing.</p>
617
- <h2>Always add labels</h2>
618
- <p class="styleguide">Screen readers will have trouble with your forms if you don&#39;t include a label for every input.</p><div class="codeExample">
619
- <div class="exampleOutput clear">
620
- <form>
621
- <div class="form-group">
622
- <label for="exampleInputEmail1">Email address</label>
623
- <input type="email" class="form-control" id="exampleInputEmail1"
624
- placeholder="Placeholder text">
625
- </div>
626
- <div class="form-group">
627
- <label for="exampleInputPassword1">Password</label>
628
- <input type="password" class="form-control" id="exampleInputPassword1"
629
- placeholder="Placeholder text">
630
- </div>
631
- <div class="form-group">
632
- <label>Pocket centre</label>
633
- <div class="input-group">
634
- <span class="input-group-addon left"><i class="fa fa-sort"></i></span>
635
- <select class="form-control">
636
- <option value="Beaudesert">Beaudesert</option>
637
- <option value="Roma">Roma</option>
638
- </select>
639
- </div>
640
- </div>
641
- <button type="submit" class="btn btn-white">Cancel</button>
642
- <button type="submit" class="btn btn-primary pull-right">Submit</button>
643
- </form>
644
-
645
- </div>
646
- <div class="codeBlock">
647
- <div class="highlight">
648
- <pre><span class="nt">&lt;form&gt;</span>
649
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
650
- <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">&gt;</span>Email address<span class="nt">&lt;/label&gt;</span>
651
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span>
652
- <span class="na">placeholder=</span><span class="s">"Placeholder text"</span><span class="nt">&gt;</span>
653
- <span class="nt">&lt;/div&gt;</span>
654
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
655
- <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
656
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span>
657
- <span class="na">placeholder=</span><span class="s">"Placeholder text"</span><span class="nt">&gt;</span>
658
- <span class="nt">&lt;/div&gt;</span>
659
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
660
- <span class="nt">&lt;label&gt;</span>Pocket centre<span class="nt">&lt;/label&gt;</span>
661
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
662
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon left"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-sort"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
663
- <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
664
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Beaudesert"</span><span class="nt">&gt;</span>Beaudesert<span class="nt">&lt;/option&gt;</span>
665
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Roma"</span><span class="nt">&gt;</span>Roma<span class="nt">&lt;/option&gt;</span>
666
- <span class="nt">&lt;/select&gt;</span>
667
- <span class="nt">&lt;/div&gt;</span>
668
- <span class="nt">&lt;/div&gt;</span>
669
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/button&gt;</span>
670
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary pull-right"</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
671
- <span class="nt">&lt;/form&gt;</span></pre>
672
- </div>
673
- </div>
674
- </div>
675
-
676
- <h2>Checkboxes and radios</h2>
677
- <p class="styleguide">Checkboxes are for selecting one or several options in a list, while radios
678
- are for selecting one option from many.</p>
679
- <h3>Default (stacked)</h3>
680
- <div class="codeExample">
681
- <div class="exampleOutput clear">
682
- <div class="form-group">
683
- <label>Simulation Coordinators/Educators</label>
684
- <div class="i-checks2">
685
- <label>
686
- <input type="checkbox" value="">
687
- Andrew Heasley
688
- </label>
689
- </div>
690
- <div class="i-checks2">
691
- <label>
692
- <input type="checkbox" value="">
693
- Tony Carter
694
- </label>
695
- </div>
696
- <div class="i-checks2">
697
- <label>
698
- <input type="checkbox" value="">
699
- Jane Harnischfeger
700
- </label>
701
- </div>
702
- </div>
703
-
704
- <div class="form-group">
705
- <div class="radio i-checks2">
706
- <label>
707
- <input type="radio" name="optionsRadios" value="option1" checked>
708
- Option one is this and that be sure to include why it's great
709
- </label>
710
- </div>
711
- <div class="radio i-checks2">
712
- <label>
713
- <input type="radio" name="optionsRadios" value="option2">
714
- Option two can be something else and selecting it will deselect option one
715
- </label>
716
- </div>
717
- <div class="radio i-checks2 disabled">
718
- <label>
719
- <input type="radio" name="optionsRadios" value="option3" disabled>
720
- Option three is disabled
721
- </label>
722
- </div>
723
- </div>
724
-
725
- </div>
726
- <div class="codeBlock">
727
- <div class="highlight">
728
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
729
- <span class="nt">&lt;label&gt;</span>Simulation Coordinators/Educators<span class="nt">&lt;/label&gt;</span>
730
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"i-checks2"</span><span class="nt">&gt;</span>
731
- <span class="nt">&lt;label&gt;</span>
732
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
733
- Andrew Heasley
734
- <span class="nt">&lt;/label&gt;</span>
735
- <span class="nt">&lt;/div&gt;</span>
736
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"i-checks2"</span><span class="nt">&gt;</span>
737
- <span class="nt">&lt;label&gt;</span>
738
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
739
- Tony Carter
740
- <span class="nt">&lt;/label&gt;</span>
741
- <span class="nt">&lt;/div&gt;</span>
742
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"i-checks2"</span><span class="nt">&gt;</span>
743
- <span class="nt">&lt;label&gt;</span>
744
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
745
- Jane Harnischfeger
746
- <span class="nt">&lt;/label&gt;</span>
747
- <span class="nt">&lt;/div&gt;</span>
748
- <span class="nt">&lt;/div&gt;</span>
749
-
750
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
751
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"radio i-checks2"</span><span class="nt">&gt;</span>
752
- <span class="nt">&lt;label&gt;</span>
753
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"optionsRadios"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">&gt;</span>
754
- Option one is this and that be sure to include why it's great
755
- <span class="nt">&lt;/label&gt;</span>
756
- <span class="nt">&lt;/div&gt;</span>
757
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"radio i-checks2"</span><span class="nt">&gt;</span>
758
- <span class="nt">&lt;label&gt;</span>
759
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"optionsRadios"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span>
760
- Option two can be something else and selecting it will deselect option one
761
- <span class="nt">&lt;/label&gt;</span>
762
- <span class="nt">&lt;/div&gt;</span>
763
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"radio i-checks2 disabled"</span><span class="nt">&gt;</span>
764
- <span class="nt">&lt;label&gt;</span>
765
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"optionsRadios"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
766
- Option three is disabled
767
- <span class="nt">&lt;/label&gt;</span>
768
- <span class="nt">&lt;/div&gt;</span>
769
- <span class="nt">&lt;/div&gt;</span></pre>
770
- </div>
771
- </div>
772
- </div>
773
-
774
- <h2>Toggles</h2>
775
- <p class="styleguide">On/off is the basic toggle.</p><div class="codeExample">
776
- <div class="exampleOutput clear">
777
- <form>
778
- <div class="onoffswitch">
779
- <input type="checkbox" name="collapsemenu" checked="" class="onoffswitch-checkbox" id="example511">
780
- <label class="onoffswitch-label" for="example511">
781
- <span class="onoffswitch-inner"></span>
782
- <span class="onoffswitch-switch"></span>
783
- </label>
784
- </div>
785
- </form>
786
-
787
- </div>
788
- <div class="codeBlock">
789
- <div class="highlight">
790
- <pre><span class="nt">&lt;form&gt;</span>
791
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"onoffswitch"</span><span class="nt">&gt;</span>
792
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"collapsemenu"</span> <span class="na">checked=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"onoffswitch-checkbox"</span> <span class="na">id=</span><span class="s">"example511"</span><span class="nt">&gt;</span>
793
- <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"onoffswitch-label"</span> <span class="na">for=</span><span class="s">"example511"</span><span class="nt">&gt;</span>
794
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"onoffswitch-inner"</span><span class="nt">&gt;&lt;/span&gt;</span>
795
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"onoffswitch-switch"</span><span class="nt">&gt;&lt;/span&gt;</span>
796
- <span class="nt">&lt;/label&gt;</span>
797
- <span class="nt">&lt;/div&gt;</span>
798
- <span class="nt">&lt;/form&gt;</span></pre>
799
- </div>
800
- </div>
801
- </div>
802
- <p class="styleguide">To replace on/off with yes/no, just add a class modifier, <code class="styleguide">yesnoswitch</code> to the div container. </p><div class="codeExample">
803
- <div class="exampleOutput clear">
804
- <form>
805
- <div class="onoffswitch yesnoswitch">
806
- <input type="checkbox" name="collapsemenu" checked="" class="onoffswitch-checkbox" id="example511">
807
- <label class="onoffswitch-label" for="example511">
808
- <span class="onoffswitch-inner"></span>
809
- <span class="onoffswitch-switch"></span>
810
- </label>
811
- </div>
812
- </form>
813
-
814
- </div>
815
- <div class="codeBlock">
816
- <div class="highlight">
817
- <pre><span class="nt">&lt;form&gt;</span>
818
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"onoffswitch yesnoswitch"</span><span class="nt">&gt;</span>
819
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"collapsemenu"</span> <span class="na">checked=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"onoffswitch-checkbox"</span> <span class="na">id=</span><span class="s">"example511"</span><span class="nt">&gt;</span>
820
- <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"onoffswitch-label"</span> <span class="na">for=</span><span class="s">"example511"</span><span class="nt">&gt;</span>
821
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"onoffswitch-inner"</span><span class="nt">&gt;&lt;/span&gt;</span>
822
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"onoffswitch-switch"</span><span class="nt">&gt;&lt;/span&gt;</span>
823
- <span class="nt">&lt;/label&gt;</span>
824
- <span class="nt">&lt;/div&gt;</span>
825
- <span class="nt">&lt;/form&gt;</span></pre>
826
- </div>
827
- </div>
828
- </div>
829
-
830
- <h2>Search input</h2>
831
- <div class="codeExample">
832
- <div class="exampleOutput clear">
833
- <form>
834
- <div class="list-search-custom m-b-sm">
835
- <label><i class="fa fa-search"></i></label>
836
- <div class="form-group">
837
- <input type="text" class="form-control" placeholder="Search equipment">
838
- <a class="search-clear"> <i class="fa fa-times"></i></a>
839
- </div>
840
- </div>
841
- </form>
842
-
843
- </div>
844
- <div class="codeBlock">
845
- <div class="highlight">
846
- <pre><span class="nt">&lt;form&gt;</span>
847
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-search-custom m-b-sm"</span><span class="nt">&gt;</span>
848
- <span class="nt">&lt;label&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-search"</span><span class="nt">&gt;&lt;/i&gt;&lt;/label&gt;</span>
849
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
850
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search equipment"</span><span class="nt">&gt;</span>
851
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"search-clear"</span><span class="nt">&gt;</span> <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-times"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
852
- <span class="nt">&lt;/div&gt;</span>
853
- <span class="nt">&lt;/div&gt;</span>
854
- <span class="nt">&lt;/form&gt;</span></pre>
855
- </div>
856
- </div>
857
- </div>
858
-
859
- <h2>Textarea</h2>
860
- <p class="styleguide">Form control which supports multiple lines of text.</p><div class="codeExample">
861
- <div class="exampleOutput clear">
862
- <form class="form-inline editableform">
863
- <div class="control-group form-group">
864
- <div>
865
- <div class="editable-input">
866
- <textarea class="form-control input-large"
867
- rows="0" placeholder="Click to add reason"></textarea>
868
- </div>
869
- </div>
870
- </div>
871
- </form>
872
-
873
- </div>
874
- <div class="codeBlock">
875
- <div class="highlight">
876
- <pre><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline editableform"</span><span class="nt">&gt;</span>
877
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"control-group form-group"</span><span class="nt">&gt;</span>
878
- <span class="nt">&lt;div&gt;</span>
879
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"editable-input"</span><span class="nt">&gt;</span>
880
- <span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control input-large"</span>
881
- <span class="na">rows=</span><span class="s">"0"</span> <span class="na">placeholder=</span><span class="s">"Click to add reason"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
882
- <span class="nt">&lt;/div&gt;</span>
883
- <span class="nt">&lt;/div&gt;</span>
884
- <span class="nt">&lt;/div&gt;</span>
885
- <span class="nt">&lt;/form&gt;</span></pre>
886
- </div>
887
- </div>
888
- </div>
889
- <div class="codeExample">
890
- <div class="exampleOutput clear">
891
- <form class="form-inline editableform m-b-lg">
892
- <div class="control-group form-group">
893
- <div>
894
- <div class="editable-input">
895
- <textarea class="form-control input-large" rows="5"></textarea>
896
- </div>
897
- <div class="editable-buttons">
898
- <button type="button" class="btn btn-primary btn-sm editable-submit">
899
- <i class="glyphicon glyphicon-ok"></i>
900
- </button>
901
- <button type="button" class="btn btn-default btn-sm editable-cancel">
902
- <i class="glyphicon glyphicon-remove"></i>
903
- </button>
904
- </div>
905
- </div>
906
- </div>
907
- </form>
908
-
909
- </div>
910
- <div class="codeBlock">
911
- <div class="highlight">
912
- <pre><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline editableform m-b-lg"</span><span class="nt">&gt;</span>
913
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"control-group form-group"</span><span class="nt">&gt;</span>
914
- <span class="nt">&lt;div&gt;</span>
915
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"editable-input"</span><span class="nt">&gt;</span>
916
- <span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control input-large"</span> <span class="na">rows=</span><span class="s">"5"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
917
- <span class="nt">&lt;/div&gt;</span>
918
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"editable-buttons"</span><span class="nt">&gt;</span>
919
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm editable-submit"</span><span class="nt">&gt;</span>
920
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok"</span><span class="nt">&gt;&lt;/i&gt;</span>
921
- <span class="nt">&lt;/button&gt;</span>
922
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-sm editable-cancel"</span><span class="nt">&gt;</span>
923
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-remove"</span><span class="nt">&gt;&lt;/i&gt;</span>
924
- <span class="nt">&lt;/button&gt;</span>
925
- <span class="nt">&lt;/div&gt;</span>
926
- <span class="nt">&lt;/div&gt;</span>
927
- <span class="nt">&lt;/div&gt;</span>
928
- <span class="nt">&lt;/form&gt;</span></pre>
929
- </div>
930
- </div>
931
- </div>
932
-
933
- <h1 id="ibox" class="styleguide">Ibox</h1>
934
-
935
- <p class="lead">An ibox (information box) is a lightweight container that may either be stand alone or stacked against its fellow iboxes or expanded to show more information. They differ to widgets (where its main purpose is to display a single piece of information) and to cards (where there is an expected action).</p>
936
- <div class="codeExample">
937
- <div class="exampleOutput clear">
938
- <div class="ibox">
939
- <div class="ibox-title">
940
- <label>First name</label>
941
- <h2>
942
- <input class="form-control p-t-none" placeholder="Equipment name" value="Rebecca">
943
- </h2>
944
-
945
- <label>Last name</label>
946
- <h2>
947
- <input class="form-control p-t-none" placeholder="Equipment name" value="Launder">
948
- </h2>
949
- </div>
950
- </div>
951
-
952
- </div>
953
- <div class="codeBlock">
954
- <div class="highlight">
955
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox"</span><span class="nt">&gt;</span>
956
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-title"</span><span class="nt">&gt;</span>
957
- <span class="nt">&lt;label&gt;</span>First name<span class="nt">&lt;/label&gt;</span>
958
- <span class="nt">&lt;h2&gt;</span>
959
- <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control p-t-none"</span> <span class="na">placeholder=</span><span class="s">"Equipment name"</span> <span class="na">value=</span><span class="s">"Rebecca"</span><span class="nt">&gt;</span>
960
- <span class="nt">&lt;/h2&gt;</span>
961
-
962
- <span class="nt">&lt;label&gt;</span>Last name<span class="nt">&lt;/label&gt;</span>
963
- <span class="nt">&lt;h2&gt;</span>
964
- <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control p-t-none"</span> <span class="na">placeholder=</span><span class="s">"Equipment name"</span> <span class="na">value=</span><span class="s">"Launder"</span><span class="nt">&gt;</span>
965
- <span class="nt">&lt;/h2&gt;</span>
966
- <span class="nt">&lt;/div&gt;</span>
967
- <span class="nt">&lt;/div&gt;</span></pre>
968
- </div>
969
- </div>
970
- </div>
971
- <p class="styleguide">Iboxes can be stacked on top of each other and these can easily be done by removing the bottom margins by using the <code>m-b-none</code> class modifier.</p><div class="codeExample">
972
- <div class="exampleOutput clear">
973
-
974
- <div class="ibox m-b-none">
975
- <div class="ibox-title clearfix">
976
- <h3>Details</h3>
977
- </div>
978
- <div class="ibox-content">
979
- <div class="form-group">
980
- <label>Title</label>
981
- <div class="input-group">
982
- <span class="input-group-addon left"><i class="fa fa-sort"></i></span>
983
- <select class="form-control" name="" id="">
984
- <option value="" >Select a title</option>
985
- <option value="" >Dr</option>
986
- <option value="">Mr</option>
987
- <option value="" selected="selected">Ms</option>
988
- <option value="">Miss</option>
989
- </select>
990
- </div>
991
- </div>
992
- </div>
993
- </div>
994
-
995
- <div class="ibox collapsed m-b-none">
996
- <div class="ibox-title-alt clearfix">
997
- <div class="panel-heading">
998
- <div class="settings-item">
999
- <span>
1000
- <strong>Personal information</strong>
1001
- </span>
1002
- <div class="ibox-tools">
1003
- <a class="collapse-link">
1004
- <i class="fa fa-chevron-up"></i>
1005
- </a>
1006
- </div>
1007
- </div>
1008
- </div>
1009
- </div>
1010
-
1011
- <div class="ibox-content">
1012
- <div class="form-group">
1013
- <label>Gender</label>
1014
- <div class="input-group">
1015
- <span class="input-group-addon left"><i class="fa fa-sort"></i></span>
1016
- <select class="form-control" name="" id="">
1017
- <option value="" selected>Select gender</option>
1018
- <option value="" selected="selected">Male</option>
1019
- <option value="">Female</option>
1020
- </select>
1021
- </div>
1022
- </div>
1023
- </div>
1024
- </div>
1025
-
1026
- <div class="ibox collapsed m-b-none">
1027
- <div class="ibox-title-alt clearfix">
1028
- <div class="panel-heading">
1029
- <div class="settings-item">
1030
- <div class="ibox-tools">
1031
- <a class="collapse-link">
1032
- <i class="fa fa-chevron-up"></i>
1033
- </a>
1034
- </div>
1035
- <span>
1036
- <strong>Postal address</strong>
1037
- </span>
1038
- </div>
1039
- </div>
1040
- </div>
1041
-
1042
- <div class="ibox-content">
1043
- <div class="form-group">
1044
- <label>Address line 1</label>
1045
- <input type="text" class="form-control" value="6/27 Mountain Street">
1046
- </div>
1047
- </div>
1048
- </div>
1049
-
1050
- </div>
1051
- <div class="codeBlock">
1052
- <div class="highlight">
1053
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox m-b-none"</span><span class="nt">&gt;</span>
1054
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-title clearfix"</span><span class="nt">&gt;</span>
1055
- <span class="nt">&lt;h3&gt;</span>Details<span class="nt">&lt;/h3&gt;</span>
1056
- <span class="nt">&lt;/div&gt;</span>
1057
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-content"</span><span class="nt">&gt;</span>
1058
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
1059
- <span class="nt">&lt;label&gt;</span>Title<span class="nt">&lt;/label&gt;</span>
1060
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
1061
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon left"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-sort"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
1062
- <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">""</span><span class="nt">&gt;</span>
1063
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">&gt;</span>Select a title<span class="nt">&lt;/option&gt;</span>
1064
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span> <span class="nt">&gt;</span>Dr<span class="nt">&lt;/option&gt;</span>
1065
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Mr<span class="nt">&lt;/option&gt;</span>
1066
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">&gt;</span>Ms<span class="nt">&lt;/option&gt;</span>
1067
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Miss<span class="nt">&lt;/option&gt;</span>
1068
- <span class="nt">&lt;/select&gt;</span>
1069
- <span class="nt">&lt;/div&gt;</span>
1070
- <span class="nt">&lt;/div&gt;</span>
1071
- <span class="nt">&lt;/div&gt;</span>
1072
- <span class="nt">&lt;/div&gt;</span>
1073
-
1074
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox collapsed m-b-none"</span><span class="nt">&gt;</span>
1075
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-title-alt clearfix"</span><span class="nt">&gt;</span>
1076
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>
1077
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"settings-item"</span><span class="nt">&gt;</span>
1078
- <span class="nt">&lt;span&gt;</span>
1079
- <span class="nt">&lt;strong&gt;</span>Personal information<span class="nt">&lt;/strong&gt;</span>
1080
- <span class="nt">&lt;/span&gt;</span>
1081
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-tools"</span><span class="nt">&gt;</span>
1082
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapse-link"</span><span class="nt">&gt;</span>
1083
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-chevron-up"</span><span class="nt">&gt;&lt;/i&gt;</span>
1084
- <span class="nt">&lt;/a&gt;</span>
1085
- <span class="nt">&lt;/div&gt;</span>
1086
- <span class="nt">&lt;/div&gt;</span>
1087
- <span class="nt">&lt;/div&gt;</span>
1088
- <span class="nt">&lt;/div&gt;</span>
1089
-
1090
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-content"</span><span class="nt">&gt;</span>
1091
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
1092
- <span class="nt">&lt;label&gt;</span>Gender<span class="nt">&lt;/label&gt;</span>
1093
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
1094
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon left"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-sort"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
1095
- <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">""</span><span class="nt">&gt;</span>
1096
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span> <span class="na">selected</span><span class="nt">&gt;</span>Select gender<span class="nt">&lt;/option&gt;</span>
1097
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">&gt;</span>Male<span class="nt">&lt;/option&gt;</span>
1098
- <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Female<span class="nt">&lt;/option&gt;</span>
1099
- <span class="nt">&lt;/select&gt;</span>
1100
- <span class="nt">&lt;/div&gt;</span>
1101
- <span class="nt">&lt;/div&gt;</span>
1102
- <span class="nt">&lt;/div&gt;</span>
1103
- <span class="nt">&lt;/div&gt;</span>
1104
-
1105
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox collapsed m-b-none"</span><span class="nt">&gt;</span>
1106
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-title-alt clearfix"</span><span class="nt">&gt;</span>
1107
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">&gt;</span>
1108
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"settings-item"</span><span class="nt">&gt;</span>
1109
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-tools"</span><span class="nt">&gt;</span>
1110
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapse-link"</span><span class="nt">&gt;</span>
1111
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-chevron-up"</span><span class="nt">&gt;&lt;/i&gt;</span>
1112
- <span class="nt">&lt;/a&gt;</span>
1113
- <span class="nt">&lt;/div&gt;</span>
1114
- <span class="nt">&lt;span&gt;</span>
1115
- <span class="nt">&lt;strong&gt;</span>Postal address<span class="nt">&lt;/strong&gt;</span>
1116
- <span class="nt">&lt;/span&gt;</span>
1117
- <span class="nt">&lt;/div&gt;</span>
1118
- <span class="nt">&lt;/div&gt;</span>
1119
- <span class="nt">&lt;/div&gt;</span>
1120
-
1121
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ibox-content"</span><span class="nt">&gt;</span>
1122
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
1123
- <span class="nt">&lt;label&gt;</span>Address line 1<span class="nt">&lt;/label&gt;</span>
1124
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">value=</span><span class="s">"6/27 Mountain Street"</span><span class="nt">&gt;</span>
1125
- <span class="nt">&lt;/div&gt;</span>
1126
- <span class="nt">&lt;/div&gt;</span>
1127
- <span class="nt">&lt;/div&gt;</span></pre>
1128
- </div>
1129
- </div>
1130
- </div>
1131
-
1132
- <h1 id="labels" class="styleguide">Labels</h1>
1133
- <div class="codeExample">
1134
- <div class="exampleOutput clear">
1135
- <h1>Example heading <span class="label">Label</span></h1>
1136
- <h2>Example heading <span class="label">Label</span></h2>
1137
- <h3>Example heading <span class="label">Label</span></h3>
1138
- <h4>Example heading <span class="label">Label</span></h4>
1139
- <h5>Example heading <span class="label">Label</span></h5>
1140
- <h6>Example heading <span class="label">Label</span></h6>
1141
-
1142
- </div>
1143
- <div class="codeBlock">
1144
- <div class="highlight">
1145
- <pre><span class="nt">&lt;h1&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/span&gt;&lt;/h1&gt;</span>
1146
- <span class="nt">&lt;h2&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/span&gt;&lt;/h2&gt;</span>
1147
- <span class="nt">&lt;h3&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/span&gt;&lt;/h3&gt;</span>
1148
- <span class="nt">&lt;h4&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/span&gt;&lt;/h4&gt;</span>
1149
- <span class="nt">&lt;h5&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/span&gt;&lt;/h5&gt;</span>
1150
- <span class="nt">&lt;h6&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/span&gt;&lt;/h6&gt;</span></pre>
1151
- </div>
1152
- </div>
1153
- </div>
1154
-
1155
- <h2>Available variations</h2>
1156
- <p class="styleguide">Add any of the below mentioned modifier classes to change the appearance of a label.</p><table class="styleguide"> <tr>
1157
- <th>Label</th>
1158
- <th>Modifier Class</th>
1159
- </tr>
1160
- <tr>
1161
- <td><span class="label label-default">Default</span></td>
1162
- <td><code>label-default</code></td>
1163
- </tr>
1164
- <tr>
1165
- <td><span class="label label-primary">Primary</span></td>
1166
- <td><code>label-primary</code></td>
1167
- </tr>
1168
- <tr>
1169
- <td><span class="label label-success">Success</span></td>
1170
- <td><code>label-success</code></td>
1171
- </tr>
1172
- <tr>
1173
- <td><span class="label label-warning">Warning</span></td>
1174
- <td><code>label-warning</code></td>
1175
- </tr>
1176
- <tr>
1177
- <td><span class="label label-danger">Danger</span></td>
1178
- <td><code>label-danger</code></td>
1179
- </tr>
1180
- <tr>
1181
- <td><span class="label label-teal">Teal</span></td>
1182
- <td><code>label-teal</code></td>
1183
- </tr>
1184
- <tr>
1185
- <td><span class="label label-deep-blue">Deep blue</span></td>
1186
- <td><code>label-deep-blue</code></td>
1187
- </tr>
1188
- <tr>
1189
- <td><span class="label label-light-grey">Light grey</span></td>
1190
- <td><code>label-light-grey</code></td>
1191
- </tr>
1192
- <tr>
1193
- <td><span class="label label-brown">Brown</span></td>
1194
- <td><code>label-brown</code></td>
1195
- </tr>
1196
- <tr>
1197
- <td><span class="label label-pink">Pink</span></td>
1198
- <td><code>label-pink</code></td>
1199
- </tr>
1200
- <tr>
1201
- <td><span class="label label-orange">Orange</span></td>
1202
- <td><code>label-orange</code></td>
1203
- </tr>
1204
- <tr>
1205
- <td><span class="label label-invisible">Invisible</span></td>
1206
- <td><code>label-invisible</code></td>
1207
- </tr>
1208
- </table>
1209
- <h3>Invisible label</h3>
1210
- <p class="styleguide">The invisible label can be used if you want to contain small nuggets of data
1211
- using the basic label visual style but without any colour. As you can see above,
1212
- the invisible label does not contain padding and if you position multiple of these
1213
- labels, they would be separated by a margin of 10px between each other. </p><div class="codeExample">
1214
- <div class="exampleOutput clear">
1215
- <span class="label label-invisible">Uno</span></h1>
1216
- <span class="label label-invisible">Dos</span></h2>
1217
- <span class="label label-invisible">Tres</span></h3>
1218
- <span class="label label-invisible">Quatro</span></h4>
1219
- <span class="label label-invisible">Cinco</span></h5>
1220
- <span class="label label-invisible">Sais</span></h6>
1221
-
1222
- </div>
1223
- <div class="codeBlock">
1224
- <div class="highlight">
1225
- <pre><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-invisible"</span><span class="nt">&gt;</span>Uno<span class="nt">&lt;/span&gt;&lt;/h1&gt;</span>
1226
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-invisible"</span><span class="nt">&gt;</span>Dos<span class="nt">&lt;/span&gt;&lt;/h2&gt;</span>
1227
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-invisible"</span><span class="nt">&gt;</span>Tres<span class="nt">&lt;/span&gt;&lt;/h3&gt;</span>
1228
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-invisible"</span><span class="nt">&gt;</span>Quatro<span class="nt">&lt;/span&gt;&lt;/h4&gt;</span>
1229
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-invisible"</span><span class="nt">&gt;</span>Cinco<span class="nt">&lt;/span&gt;&lt;/h5&gt;</span>
1230
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-invisible"</span><span class="nt">&gt;</span>Sais<span class="nt">&lt;/span&gt;&lt;/h6&gt;</span></pre>
1231
- </div>
1232
- </div>
1233
- </div>
1234
-
1235
- <h3>Outline labels</h3>
1236
- <p class="styleguide">You can also revert the above modifier classes by adding the <code>outline</code> modifier class.</p><table class="styleguide"> <tr>
1237
- <th>Label</th>
1238
- <th>Modifier Class</th>
1239
- </tr>
1240
- <tr>
1241
- <td><span class="label label-default outline">Default</span></td>
1242
- <td><code>label-default outline</code></td>
1243
- </tr>
1244
- <tr>
1245
- <td><span class="label label-primary outline">Primary</span></td>
1246
- <td><code>label-primary outline</code></td>
1247
- </tr>
1248
- <tr>
1249
- <td><span class="label label-success outline">Success</span></td>
1250
- <td><code>label-success outline</code></td>
1251
- </tr>
1252
- <tr>
1253
- <td><span class="label label-warning outline">Warning</span></td>
1254
- <td><code>label-warning outline</code></td>
1255
- </tr>
1256
- <tr>
1257
- <td><span class="label label-danger outline">Danger</span></td>
1258
- <td><code>label-danger outline</code></td>
1259
- </tr>
1260
- <tr>
1261
- <td><span class="label label-teal outline">Teal</span></td>
1262
- <td><code>label-teal outline</code></td>
1263
- </tr>
1264
- <tr>
1265
- <td><span class="label label-deep-blue outline">Deep blue</span></td>
1266
- <td><code>label-deep-blue outline</code></td>
1267
- </tr>
1268
- <tr>
1269
- <td><span class="label label-light-grey outline">Light grey</span></td>
1270
- <td><code>label-light-grey outline</code></td>
1271
- </tr>
1272
- <tr>
1273
- <td><span class="label label-brown outline">Brown</span></td>
1274
- <td><code>label-brown outline</code></td>
1275
- </tr>
1276
- <tr>
1277
- <td><span class="label label-pink outline">Pink</span></td>
1278
- <td><code>label-pink outline</code></td>
1279
- </tr>
1280
- <tr>
1281
- <td><span class="label label-orange outline">Orange</span></td>
1282
- <td><code>label-orange outline</code></td>
1283
- </tr>
1284
- </table>
1285
- <h1 id="lists" class="styleguide">Lists</h1>
1286
-
1287
- <p class="lead">The usual unordered and ordered lists still work. However, with Concrete we also used the list element as major component of our search results pages. In our Item/Preview layout, the item pane is essentially a list that contains all search results/items (e.g. Usage events).</p>
1288
- <div class="codeExample">
1289
- <div class="exampleOutput clear">
1290
- <div class="list-container">
1291
- <div class="listing">
1292
- <div class="list-results">
1293
- <!-- List item -->
1294
- <div class="list-item">
1295
- <div class="list-row">
1296
- <div class="list-key text-muted">
1297
- <span class="text-red">DRAFT</span>
1298
- </div>
1299
- <div class="list-summary">
1300
- SCT
1301
- </div>
1302
- </div>
1303
- <div class="list-row-end">
1304
- <span>5</span>
1305
- <h3>0 hrs</h3>
1306
- <span class="preview"><i class="fa fa-angle-double-right"></i></span>
1307
- </div>
1308
- </div>
1309
- <!-- END List item -->
1310
-
1311
- <!-- List item -->
1312
- <div class="list-item">
1313
- <div class="list-row">
1314
- <div class="list-key text-muted">
1315
- <span class="text-red">DRAFT</span>
1316
- </div>
1317
- <div class="list-summary">
1318
- Usage event title
1319
- </div>
1320
- </div>
1321
- <div class="list-row-end">
1322
- <span>2</span>
1323
- <h3>0 hrs</h3>
1324
- <span class="preview"><i class="fa fa-angle-double-right"></i></span>
1325
- </div>
1326
- </div>
1327
- <!-- END List item -->
1328
- </div>
1329
- </div>
1330
- </div>
1331
-
1332
- </div>
1333
- <div class="codeBlock">
1334
- <div class="highlight">
1335
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-container"</span><span class="nt">&gt;</span>
1336
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"listing"</span><span class="nt">&gt;</span>
1337
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-results"</span><span class="nt">&gt;</span>
1338
- <span class="c">&lt;!-- List item --&gt;</span>
1339
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-item"</span><span class="nt">&gt;</span>
1340
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-row"</span><span class="nt">&gt;</span>
1341
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-key text-muted"</span><span class="nt">&gt;</span>
1342
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-red"</span><span class="nt">&gt;</span>DRAFT<span class="nt">&lt;/span&gt;</span>
1343
- <span class="nt">&lt;/div&gt;</span>
1344
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-summary"</span><span class="nt">&gt;</span>
1345
- SCT
1346
- <span class="nt">&lt;/div&gt;</span>
1347
- <span class="nt">&lt;/div&gt;</span>
1348
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-row-end"</span><span class="nt">&gt;</span>
1349
- <span class="nt">&lt;span&gt;</span>5<span class="nt">&lt;/span&gt;</span>
1350
- <span class="nt">&lt;h3&gt;</span>0 hrs<span class="nt">&lt;/h3&gt;</span>
1351
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"preview"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-angle-double-right"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
1352
- <span class="nt">&lt;/div&gt;</span>
1353
- <span class="nt">&lt;/div&gt;</span>
1354
- <span class="c">&lt;!-- END List item --&gt;</span>
1355
-
1356
- <span class="c">&lt;!-- List item --&gt;</span>
1357
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-item"</span><span class="nt">&gt;</span>
1358
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-row"</span><span class="nt">&gt;</span>
1359
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-key text-muted"</span><span class="nt">&gt;</span>
1360
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-red"</span><span class="nt">&gt;</span>DRAFT<span class="nt">&lt;/span&gt;</span>
1361
- <span class="nt">&lt;/div&gt;</span>
1362
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-summary"</span><span class="nt">&gt;</span>
1363
- Usage event title
1364
- <span class="nt">&lt;/div&gt;</span>
1365
- <span class="nt">&lt;/div&gt;</span>
1366
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-row-end"</span><span class="nt">&gt;</span>
1367
- <span class="nt">&lt;span&gt;</span>2<span class="nt">&lt;/span&gt;</span>
1368
- <span class="nt">&lt;h3&gt;</span>0 hrs<span class="nt">&lt;/h3&gt;</span>
1369
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"preview"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-angle-double-right"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
1370
- <span class="nt">&lt;/div&gt;</span>
1371
- <span class="nt">&lt;/div&gt;</span>
1372
- <span class="c">&lt;!-- END List item --&gt;</span>
1373
- <span class="nt">&lt;/div&gt;</span>
1374
- <span class="nt">&lt;/div&gt;</span>
1375
- <span class="nt">&lt;/div&gt;</span></pre>
1376
- </div>
1377
- </div>
1378
- </div>
1379
- <p class="styleguide">The simplest form a list is an <code>agile-list</code>.</p><div class="codeExample">
1380
- <div class="exampleOutput clear">
1381
- <ul class="agile-list bg-change no-indent">
1382
- <li>
1383
- <div class="row odd" data-toggle="collapse" data-target="#listExpiredVOCs" title="Expand" aria-expanded="true">
1384
- <div class="col-xs-12">
1385
- <span class="schedule-ss pull-right m-l-xs">10 expired</span>
1386
- <a><i class="fa fa-caret-right"></i> Expired</a>
1387
- </div>
1388
- </div><!-- END row -->
1389
- <div id="listExpiredVOCs" class="collapse in" aria-expanded="true">
1390
-
1391
- <div class="row even">
1392
- <div class="col-xs-12">
1393
-
1394
- <div class="row">
1395
- <div class="col-lg-7 col-md-12">
1396
- ALS Simulator
1397
- </div>
1398
- <div class="schedule-time col-lg-5 col-md-12 col-df-fl col-lg-fr text-red">
1399
- <span>24 Mar, 2015 - 24 Mar, 2016</span>
1400
- </div>
1401
- </div>
1402
-
1403
- <hr class="sm">
1404
-
1405
- <div class="row">
1406
- <div class="col-lg-7 col-md-12">
1407
- ALS Simulator Dark Skin
1408
- </div>
1409
- <div class="schedule-time col-lg-5 col-md-12 col-df-fl col-lg-fr text-red">
1410
- <span>24 Mar, 2015 - 24 Mar, 2016</span>
1411
- </div>
1412
- </div>
1413
-
1414
- </div>
1415
- </div>
1416
- </div>
1417
- </li>
1418
- </ul>
1419
-
1420
- </div>
1421
- <div class="codeBlock">
1422
- <div class="highlight">
1423
- <pre><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"agile-list bg-change no-indent"</span><span class="nt">&gt;</span>
1424
- <span class="nt">&lt;li&gt;</span>
1425
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row odd"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#listExpiredVOCs"</span> <span class="na">title=</span><span class="s">"Expand"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
1426
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-12"</span><span class="nt">&gt;</span>
1427
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"schedule-ss pull-right m-l-xs"</span><span class="nt">&gt;</span>10 expired<span class="nt">&lt;/span&gt;</span>
1428
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-caret-right"</span><span class="nt">&gt;&lt;/i&gt;</span> Expired<span class="nt">&lt;/a&gt;</span>
1429
- <span class="nt">&lt;/div&gt;</span>
1430
- <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- END row --&gt;</span>
1431
- <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"listExpiredVOCs"</span> <span class="na">class=</span><span class="s">"collapse in"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
1432
-
1433
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row even"</span><span class="nt">&gt;</span>
1434
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-12"</span><span class="nt">&gt;</span>
1435
-
1436
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
1437
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-7 col-md-12"</span><span class="nt">&gt;</span>
1438
- ALS Simulator
1439
- <span class="nt">&lt;/div&gt;</span>
1440
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"schedule-time col-lg-5 col-md-12 col-df-fl col-lg-fr text-red"</span><span class="nt">&gt;</span>
1441
- <span class="nt">&lt;span&gt;</span>24 Mar, 2015 - 24 Mar, 2016<span class="nt">&lt;/span&gt;</span>
1442
- <span class="nt">&lt;/div&gt;</span>
1443
- <span class="nt">&lt;/div&gt;</span>
1444
-
1445
- <span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"sm"</span><span class="nt">&gt;</span>
1446
-
1447
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
1448
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-7 col-md-12"</span><span class="nt">&gt;</span>
1449
- ALS Simulator Dark Skin
1450
- <span class="nt">&lt;/div&gt;</span>
1451
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"schedule-time col-lg-5 col-md-12 col-df-fl col-lg-fr text-red"</span><span class="nt">&gt;</span>
1452
- <span class="nt">&lt;span&gt;</span>24 Mar, 2015 - 24 Mar, 2016<span class="nt">&lt;/span&gt;</span>
1453
- <span class="nt">&lt;/div&gt;</span>
1454
- <span class="nt">&lt;/div&gt;</span>
1455
-
1456
- <span class="nt">&lt;/div&gt;</span>
1457
- <span class="nt">&lt;/div&gt;</span>
1458
- <span class="nt">&lt;/div&gt;</span>
1459
- <span class="nt">&lt;/li&gt;</span>
1460
- <span class="nt">&lt;/ul&gt;</span></pre>
1461
- </div>
1462
- </div>
1463
- </div>
1464
- <p class="styleguide">Another form of a list is the <code>feed-activity-list</code>.</p><div class="codeExample">
1465
- <div class="exampleOutput clear">
1466
- <div class="feed-activity-list" id="recently-added-bookings">
1467
-
1468
- <div class="feed-element">
1469
- <div class="agenda-item_event">
1470
- <div class="agenda-item-title">
1471
- <span class="badge outline pull-right"></span>
1472
- <strong><a>Aged Care Course</a></strong>
1473
- <div>15 Oct 2017, 9am - 3pm</div>
1474
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1475
- </div>
1476
- </div>
1477
- </div>
1478
-
1479
- <div class="feed-element">
1480
- <div class="agenda-item_event">
1481
- <div class="agenda-item-title">
1482
- <span class="badge outline pull-right"></span>
1483
- <strong><a>Forum for End of Life Care</a></strong>
1484
- <div>15 Oct 2017, 9am - 3pm</div>
1485
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1486
- </div>
1487
- </div>
1488
- </div>
1489
-
1490
- <div class="feed-element">
1491
- <div class="agenda-item_meeting">
1492
- <div class="agenda-item-title">
1493
- <span class="badge outline pull-right"></span>
1494
- <strong><a>Weekly Catch Up - Shane Convine</a></strong>
1495
- <div>15 Oct 2017, 9am - 3pm</div>
1496
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1497
- </div>
1498
- </div>
1499
- </div>
1500
-
1501
- <div class="feed-element">
1502
- <div class="agenda-item_meeting">
1503
- <div class="agenda-item-title">
1504
- <span class="badge outline pull-right"></span>
1505
- <strong><a>Graduate Certificate Committee Meeting</a></strong>
1506
- <div>15 Oct 2017, 9am - 3pm</div>
1507
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1508
- </div>
1509
- </div>
1510
- </div>
1511
-
1512
- <div class="feed-element">
1513
- <div class="agenda-item_clinical">
1514
- <div class="agenda-item-title">
1515
- <span class="badge outline pull-right"></span>
1516
- <strong><a>PSR Crisis</a></strong>
1517
- <div>15 Oct 2017, 9am - 3pm</div>
1518
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1519
- </div>
1520
- </div>
1521
- </div>
1522
-
1523
- <div class="feed-element">
1524
- <div class="agenda-item_course">
1525
- <div class="agenda-item-title">
1526
- <span class="badge outline pull-right"></span>
1527
- <strong><a>EBUS-Guide Sheath</a></strong>
1528
- <div>15 Oct 2017, 9am - 3pm</div>
1529
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1530
- </div>
1531
- </div>
1532
- </div>
1533
-
1534
- <div class="feed-element">
1535
- <div class="agenda-item_course">
1536
- <div class="agenda-item-title">
1537
- <span class="badge outline pull-right"></span>
1538
- <strong><a>Maternity Recommendations Round Table</a></strong>
1539
- <div>15 Oct 2017, 9am - 3pm</div>
1540
- <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
1541
- </div>
1542
- </div>
1543
- </div>
1544
- </div>
1545
-
1546
- </div>
1547
- <div class="codeBlock">
1548
- <div class="highlight">
1549
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-activity-list"</span> <span class="na">id=</span><span class="s">"recently-added-bookings"</span><span class="nt">&gt;</span>
1550
-
1551
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1552
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_event"</span><span class="nt">&gt;</span>
1553
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1554
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1555
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>Aged Care Course<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1556
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1557
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1558
- <span class="nt">&lt;/div&gt;</span>
1559
- <span class="nt">&lt;/div&gt;</span>
1560
- <span class="nt">&lt;/div&gt;</span>
1561
-
1562
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1563
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_event"</span><span class="nt">&gt;</span>
1564
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1565
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1566
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>Forum for End of Life Care<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1567
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1568
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1569
- <span class="nt">&lt;/div&gt;</span>
1570
- <span class="nt">&lt;/div&gt;</span>
1571
- <span class="nt">&lt;/div&gt;</span>
1572
-
1573
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1574
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_meeting"</span><span class="nt">&gt;</span>
1575
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1576
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1577
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>Weekly Catch Up - Shane Convine<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1578
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1579
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1580
- <span class="nt">&lt;/div&gt;</span>
1581
- <span class="nt">&lt;/div&gt;</span>
1582
- <span class="nt">&lt;/div&gt;</span>
1583
-
1584
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1585
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_meeting"</span><span class="nt">&gt;</span>
1586
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1587
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1588
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>Graduate Certificate Committee Meeting<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1589
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1590
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1591
- <span class="nt">&lt;/div&gt;</span>
1592
- <span class="nt">&lt;/div&gt;</span>
1593
- <span class="nt">&lt;/div&gt;</span>
1594
-
1595
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1596
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_clinical"</span><span class="nt">&gt;</span>
1597
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1598
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1599
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>PSR Crisis<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1600
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1601
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1602
- <span class="nt">&lt;/div&gt;</span>
1603
- <span class="nt">&lt;/div&gt;</span>
1604
- <span class="nt">&lt;/div&gt;</span>
1605
-
1606
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1607
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_course"</span><span class="nt">&gt;</span>
1608
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1609
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1610
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>EBUS-Guide Sheath<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1611
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1612
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1613
- <span class="nt">&lt;/div&gt;</span>
1614
- <span class="nt">&lt;/div&gt;</span>
1615
- <span class="nt">&lt;/div&gt;</span>
1616
-
1617
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-element"</span><span class="nt">&gt;</span>
1618
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item_course"</span><span class="nt">&gt;</span>
1619
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"agenda-item-title"</span><span class="nt">&gt;</span>
1620
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge outline pull-right"</span><span class="nt">&gt;&lt;/span&gt;</span>
1621
- <span class="nt">&lt;strong&gt;&lt;a&gt;</span>Maternity Recommendations Round Table<span class="nt">&lt;/a&gt;&lt;/strong&gt;</span>
1622
- <span class="nt">&lt;div&gt;</span>15 Oct 2017, 9am - 3pm<span class="nt">&lt;/div&gt;</span>
1623
- <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Added by <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;</span> on 15 Oct, 2016<span class="nt">&lt;/small&gt;</span>
1624
- <span class="nt">&lt;/div&gt;</span>
1625
- <span class="nt">&lt;/div&gt;</span>
1626
- <span class="nt">&lt;/div&gt;</span>
1627
- <span class="nt">&lt;/div&gt;</span></pre>
1628
- </div>
1629
- </div>
1630
- </div>
1631
- <p class="styleguide">Or you can always try using the <code>social-feed-box</code>. Best reason to use this is when you have a list of components that have multiple data types (such as an icon, a preview text).</p><div class="codeExample">
1632
- <div class="exampleOutput clear">
1633
- <div class="social-feed-box">
1634
-
1635
- <div class="social-avatar">
1636
- <a href="" class="pull-left">
1637
- <img alt="image" class="img-circle" src="http://placehold.it/50x50">
1638
- </a>
1639
- <div class="media-body">
1640
- <a href="#">
1641
- Cassie Carter
1642
- </a>
1643
- <span class="text-muted">8 Mar 421pm</span>
1644
- </div>
1645
- </div>
1646
- <div class="social-body">
1647
- <p>
1648
- Approved participants - <a>Jacqueline Caruana</a>, <a>Bethany Jibson</a>, <a>Trudy Barron</a>, <a>Vivienne Gray</a>, <a>Susanne Murray</a>, <a>Debbie Simmons</a>, <a>Michael Wohlfahrt</a>, <a>Wendy Parker</a>, <a>Catherine Law</a>.
1649
- </p>
1650
-
1651
- <div class="btn-group">
1652
- <a><i class="fa fa-clock-o fa-fw"></i> <a href="#">Simulation Meeting - 23 Oct 2016</a></a>
1653
- </div>
1654
- </div>
1655
- </div>
1656
-
1657
- <div class="social-feed-box">
1658
-
1659
- <div class="social-avatar">
1660
- <a href="" class="pull-left">
1661
- <img alt="image" class="img-circle" src="http://placehold.it/50x50">
1662
- </a>
1663
- <div class="media-body">
1664
- <a href="#">
1665
- Cassie Carter
1666
- </a>
1667
- <span class="text-muted">7 Mar 8am</span>
1668
- </div>
1669
- </div>
1670
- <div class="social-body">
1671
- <p>
1672
- Increased catering refer Eloise.
1673
- </p>
1674
-
1675
- <div class="btn-group">
1676
- <a><i class="fa fa-clock-o fa-fw"></i> <a href="#">Advance Life Support - 17 Nov 2016</a></a>
1677
- </div>
1678
- </div>
1679
- </div>
1680
-
1681
- </div>
1682
- <div class="codeBlock">
1683
- <div class="highlight">
1684
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-feed-box"</span><span class="nt">&gt;</span>
1685
-
1686
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-avatar"</span><span class="nt">&gt;</span>
1687
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"pull-left"</span><span class="nt">&gt;</span>
1688
- <span class="nt">&lt;img</span> <span class="na">alt=</span><span class="s">"image"</span> <span class="na">class=</span><span class="s">"img-circle"</span> <span class="na">src=</span><span class="s">"http://placehold.it/50x50"</span><span class="nt">&gt;</span>
1689
- <span class="nt">&lt;/a&gt;</span>
1690
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
1691
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
1692
- Cassie Carter
1693
- <span class="nt">&lt;/a&gt;</span>
1694
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>8 Mar 421pm<span class="nt">&lt;/span&gt;</span>
1695
- <span class="nt">&lt;/div&gt;</span>
1696
- <span class="nt">&lt;/div&gt;</span>
1697
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-body"</span><span class="nt">&gt;</span>
1698
- <span class="nt">&lt;p&gt;</span>
1699
- Approved participants - <span class="nt">&lt;a&gt;</span>Jacqueline Caruana<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Bethany Jibson<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Trudy Barron<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Vivienne Gray<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Susanne Murray<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Debbie Simmons<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Michael Wohlfahrt<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Wendy Parker<span class="nt">&lt;/a&gt;</span>, <span class="nt">&lt;a&gt;</span>Catherine Law<span class="nt">&lt;/a&gt;</span>.
1700
- <span class="nt">&lt;/p&gt;</span>
1701
-
1702
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
1703
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o fa-fw"</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Simulation Meeting - 23 Oct 2016<span class="nt">&lt;/a&gt;&lt;/a&gt;</span>
1704
- <span class="nt">&lt;/div&gt;</span>
1705
- <span class="nt">&lt;/div&gt;</span>
1706
- <span class="nt">&lt;/div&gt;</span>
1707
-
1708
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-feed-box"</span><span class="nt">&gt;</span>
1709
-
1710
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-avatar"</span><span class="nt">&gt;</span>
1711
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"pull-left"</span><span class="nt">&gt;</span>
1712
- <span class="nt">&lt;img</span> <span class="na">alt=</span><span class="s">"image"</span> <span class="na">class=</span><span class="s">"img-circle"</span> <span class="na">src=</span><span class="s">"http://placehold.it/50x50"</span><span class="nt">&gt;</span>
1713
- <span class="nt">&lt;/a&gt;</span>
1714
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
1715
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
1716
- Cassie Carter
1717
- <span class="nt">&lt;/a&gt;</span>
1718
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>7 Mar 8am<span class="nt">&lt;/span&gt;</span>
1719
- <span class="nt">&lt;/div&gt;</span>
1720
- <span class="nt">&lt;/div&gt;</span>
1721
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-body"</span><span class="nt">&gt;</span>
1722
- <span class="nt">&lt;p&gt;</span>
1723
- Increased catering refer Eloise.
1724
- <span class="nt">&lt;/p&gt;</span>
1725
-
1726
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
1727
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o fa-fw"</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Advance Life Support - 17 Nov 2016<span class="nt">&lt;/a&gt;&lt;/a&gt;</span>
1728
- <span class="nt">&lt;/div&gt;</span>
1729
- <span class="nt">&lt;/div&gt;</span>
1730
- <span class="nt">&lt;/div&gt;</span></pre>
1731
- </div>
1732
- </div>
1733
- </div>
1734
- <p class="styleguide">A more complex list that can&#39;t be accommodate by the above variations is just by separating components by a horizontal rule. </p><div class="codeExample">
1735
- <div class="exampleOutput clear">
1736
- <div class="form-group">
1737
-
1738
- <div class="row">
1739
- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
1740
- <div class="pull-left m-r-xs">
1741
- <img src="https://www.sdc.qld.edu.au/resources/central/img/VOC-icon.png" alt="VOC" width="32px">
1742
- </div>
1743
- <div class="float-left">
1744
- <a>Audio Visual Solution</a><br>
1745
- <span class="nobr">4 Jan, 2016</span> - <span class="nobr">4 Jan, 2017</span>
1746
- </div>
1747
- </div>
1748
- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-df-fl col-sm-fr">
1749
- <span class="text-warning"><i class="fa fa-exclamation-circle"></i> 2 days remaining</span>
1750
- </div>
1751
- </div>
1752
-
1753
- <hr class="sm">
1754
-
1755
- <div class="row">
1756
- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
1757
- <div class="pull-left m-r-xs">
1758
- <img src="https://www.sdc.qld.edu.au/resources/central/img/VOC-icon.png" alt="VOC" width="32px">
1759
- </div>
1760
- <div class="float-left">
1761
- <a>Megacode Kelly Advanced</a><br>
1762
- <span class="nobr">4 Jan, 2016</span> - <span class="nobr">4 Jan, 2017</span>
1763
- </div>
1764
- </div>
1765
- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-df-fl col-sm-fr">
1766
- <span><i class="fa fa-clock-o"></i> 360 days remaining</span>
1767
- </div>
1768
- </div>
1769
-
1770
- </div>
1771
-
1772
- </div>
1773
- <div class="codeBlock">
1774
- <div class="highlight">
1775
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
1776
-
1777
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
1778
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6 col-md-6 col-sm-6 col-xs-12"</span><span class="nt">&gt;</span>
1779
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pull-left m-r-xs"</span><span class="nt">&gt;</span>
1780
- <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"https://www.sdc.qld.edu.au/resources/central/img/VOC-icon.png"</span> <span class="na">alt=</span><span class="s">"VOC"</span> <span class="na">width=</span><span class="s">"32px"</span><span class="nt">&gt;</span>
1781
- <span class="nt">&lt;/div&gt;</span>
1782
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-left"</span><span class="nt">&gt;</span>
1783
- <span class="nt">&lt;a&gt;</span>Audio Visual Solution<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
1784
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nobr"</span><span class="nt">&gt;</span>4 Jan, 2016<span class="nt">&lt;/span&gt;</span> - <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nobr"</span><span class="nt">&gt;</span>4 Jan, 2017<span class="nt">&lt;/span&gt;</span>
1785
- <span class="nt">&lt;/div&gt;</span>
1786
- <span class="nt">&lt;/div&gt;</span>
1787
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6 col-md-6 col-sm-6 col-xs-12 col-df-fl col-sm-fr"</span><span class="nt">&gt;</span>
1788
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-exclamation-circle"</span><span class="nt">&gt;&lt;/i&gt;</span> 2 days remaining<span class="nt">&lt;/span&gt;</span>
1789
- <span class="nt">&lt;/div&gt;</span>
1790
- <span class="nt">&lt;/div&gt;</span>
1791
-
1792
- <span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"sm"</span><span class="nt">&gt;</span>
1793
-
1794
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
1795
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6 col-md-6 col-sm-6 col-xs-12"</span><span class="nt">&gt;</span>
1796
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pull-left m-r-xs"</span><span class="nt">&gt;</span>
1797
- <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"https://www.sdc.qld.edu.au/resources/central/img/VOC-icon.png"</span> <span class="na">alt=</span><span class="s">"VOC"</span> <span class="na">width=</span><span class="s">"32px"</span><span class="nt">&gt;</span>
1798
- <span class="nt">&lt;/div&gt;</span>
1799
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"float-left"</span><span class="nt">&gt;</span>
1800
- <span class="nt">&lt;a&gt;</span>Megacode Kelly Advanced<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
1801
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nobr"</span><span class="nt">&gt;</span>4 Jan, 2016<span class="nt">&lt;/span&gt;</span> - <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nobr"</span><span class="nt">&gt;</span>4 Jan, 2017<span class="nt">&lt;/span&gt;</span>
1802
- <span class="nt">&lt;/div&gt;</span>
1803
- <span class="nt">&lt;/div&gt;</span>
1804
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6 col-md-6 col-sm-6 col-xs-12 col-df-fl col-sm-fr"</span><span class="nt">&gt;</span>
1805
- <span class="nt">&lt;span&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o"</span><span class="nt">&gt;&lt;/i&gt;</span> 360 days remaining<span class="nt">&lt;/span&gt;</span>
1806
- <span class="nt">&lt;/div&gt;</span>
1807
- <span class="nt">&lt;/div&gt;</span>
1808
-
1809
- <span class="nt">&lt;/div&gt;</span></pre>
1810
- </div>
1811
- </div>
1812
- </div>
1813
-
1814
- <h1 id="modals" class="styleguide">Modals</h1>
1815
-
1816
- <p class="lead">Modals are used to display information to a user in an
1817
- in-site popup window.</p>
1818
- <div class="codeExample">
1819
- <div class="exampleOutput clear">
1820
- <div class="modal-dialog">
1821
- <div class="modal-content">
1822
-
1823
- <div class="modal-header">
1824
- <a class="pull-right">
1825
- <i class="fa fa-times"></i>
1826
- </a>
1827
- <h3>Log in</h3>
1828
- </div>
1829
-
1830
- <div class="modal-body">
1831
- <form class="m-t" role="form" autocomplete="off">
1832
- <div class="form-group">
1833
- <input type="email" class="form-control" placeholder="Email address">
1834
- </div>
1835
-
1836
- <div class="form-group">
1837
- <input type="password" class="form-control" placeholder="Password">
1838
- </div>
1839
-
1840
- <button type="submit" class="btn btn-primary block full-width m-t-lg m-b">
1841
- Log in
1842
- </button>
1843
-
1844
- <a type="submit" class="btn btn-grey block full-width m-b">
1845
- Create an account
1846
- </a>
1847
-
1848
- <p class="text-center m-b-none">
1849
- <a><small>Forgot password?</small></a>
1850
- </p>
1851
- </form>
1852
- </div>
1853
-
1854
- </div>
1855
- </div>
1856
-
1857
- </div>
1858
- <div class="codeBlock">
1859
- <div class="highlight">
1860
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">&gt;</span>
1861
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
1862
-
1863
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
1864
- <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"pull-right"</span><span class="nt">&gt;</span>
1865
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-times"</span><span class="nt">&gt;&lt;/i&gt;</span>
1866
- <span class="nt">&lt;/a&gt;</span>
1867
- <span class="nt">&lt;h3&gt;</span>Log in<span class="nt">&lt;/h3&gt;</span>
1868
- <span class="nt">&lt;/div&gt;</span>
1869
-
1870
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
1871
- <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"m-t"</span> <span class="na">role=</span><span class="s">"form"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>
1872
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
1873
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Email address"</span><span class="nt">&gt;</span>
1874
- <span class="nt">&lt;/div&gt;</span>
1875
-
1876
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
1877
- <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
1878
- <span class="nt">&lt;/div&gt;</span>
1879
-
1880
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary block full-width m-t-lg m-b"</span><span class="nt">&gt;</span>
1881
- Log in
1882
- <span class="nt">&lt;/button&gt;</span>
1883
-
1884
- <span class="nt">&lt;a</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-grey block full-width m-b"</span><span class="nt">&gt;</span>
1885
- Create an account
1886
- <span class="nt">&lt;/a&gt;</span>
1887
-
1888
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center m-b-none"</span><span class="nt">&gt;</span>
1889
- <span class="nt">&lt;a&gt;&lt;small&gt;</span>Forgot password?<span class="nt">&lt;/small&gt;&lt;/a&gt;</span>
1890
- <span class="nt">&lt;/p&gt;</span>
1891
- <span class="nt">&lt;/form&gt;</span>
1892
- <span class="nt">&lt;/div&gt;</span>
1893
-
1894
- <span class="nt">&lt;/div&gt;</span>
1895
- <span class="nt">&lt;/div&gt;</span></pre>
1896
- </div>
1897
- </div>
1898
- </div>
1899
- <p class="styleguide">There&#39;s another variation of the modal dialog where </p><div class="codeExample">
1900
- <div class="exampleOutput clear">
1901
- <div class="modal-dialog">
1902
- <div class="modal-content">
1903
- <div class="modal-header">
1904
- <a data-dismiss="modal" class="pull-right">
1905
- <i class="fa fa-times"></i>
1906
- </a>
1907
-
1908
- <h2 class="m-l-xs"><a href="booking-course.php"><span class="opaque">Day 1 of 3</span><br>Simulation Coordinator Training</a></h2>
1909
- <p class="m-t-none m-l-xs opaque">COURSE / INTERNAL</p>
1910
- </div>
1911
- <div class="modal-body">
1912
-
1913
- <div class="form-group">
1914
- <label class="m-b-xxs">Mon 18 Apr 2016</label>
1915
- <ul class="agile-list bg-change roomslist">
1916
- <li>
1917
- <div class="row odd collapsed" data-toggle="collapse" data-target="#room1" title="Expand" aria-expanded="false">
1918
- <div class="col-lg-8 col-sm-6 col-xs-12 roomtitle">
1919
- <a><i class="fa fa-caret-down"></i> <span>Debrief 1</span></a>
1920
- </div>
1921
- <div class="col-lg-4 col-sm-6 col-xs-12 text-right col-xs-left xl-r-a">
1922
- 9am - 12pm <i class="fa fa-exclamation-circle text-danger"></i>
1923
- </div>
1924
- </div>
1925
- <div>
1926
- <div class="collapse" id="room1" aria-expanded="false" style="height: 0px;">
1927
- <div class="row even">
1928
- <div class="col-lg-12">
1929
- <div class="m-b-xs">
1930
- <p class="alert alert-small alert-danger text-center" role="alert">
1931
- <span class="text-danger"><i class="fa fa-exclamation-circle"> </i> Room conflict</span> with <a href="#">Patient Safety Workshop</a>
1932
- </p>
1933
- </div>
1934
- <div class="m-b-xs">
1935
- <span class="sub-heading">LAYOUT</span>
1936
- <br>
1937
- Boardroom
1938
- </div>
1939
- <div class="m-b-xs">
1940
- <span class="sub-heading">EQUIPMENT</span>
1941
- <br>
1942
- Projector, Conference phone
1943
- </div>
1944
- <div class="m-b-xs">
1945
- <span class="sub-heading">COMMENTS</span>
1946
- <br>
1947
- <p>
1948
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris enim, dictum eget ligula ut, aliquet porta neque. Curabitur vel iaculis ante.
1949
- </p>
1950
- </div>
1951
- </div>
1952
- </div>
1953
- </div><!-- END row -->
1954
- </div></li>
1955
- <li>
1956
- <div class="row odd" data-toggle="collapse" data-target="#room2" title="Expand">
1957
- <div class="col-lg-8 col-sm-6 col-xs-12">
1958
- <a><i class="fa fa-caret-down"></i> Debrief 2</a>
1959
- </div>
1960
- <div class="col-lg-4 col-sm-6 col-xs-12 text-right col-xs-left xl-r-a">
1961
- 2am - 5pm
1962
- <i class="fa fa-check text-success"></i>
1963
- </div>
1964
- </div>
1965
- <div class="collapse" id="room2">
1966
- <div class="row even">
1967
- <div class="col-lg-12">
1968
- <div class="m-b-xs">
1969
- <span class="sub-heading">LAYOUT</span>
1970
- <br>
1971
- Boardroom
1972
- </div>
1973
- <div class="m-b-xs">
1974
- <span class="sub-heading">EQUIPMENT</span>
1975
- <br>
1976
- Projector, Conference phone
1977
- </div>
1978
- <div class="m-b-xs">
1979
- <span class="sub-heading">COMMENTS</span>
1980
- <br>
1981
- <p>
1982
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris enim, dictum eget ligula ut, aliquet porta neque. Curabitur vel iaculis ante.
1983
- </p>
1984
- </div>
1985
- </div>
1986
- </div><!-- END row -->
1987
- </div>
1988
- </li>
1989
- </ul>
1990
- </div>
1991
-
1992
- <div class="form-group">
1993
- <label>Location</label>
1994
- <p><a>Clinical Skills Development Service</a></p>
1995
- </div>
1996
-
1997
- <div class="form-group">
1998
-
1999
- <label>Contact</label>
2000
- <p>
2001
- <a>Rachel Weller</a><br>
2002
- <a href="mailto:rachel.weller@health.qld.gov.au"> rachel.weller@health.qld.gov.au</a><br>
2003
- <a href="tel:+0736465000"> 3646 5000</a>
2004
- </p>
2005
- </div>
2006
-
2007
- <div class="m-t-md">
2008
- <a type="button" class="btn btn-primary btn-block" href="booking-course.php">View booking</a>
2009
- </div>
2010
-
2011
- </div>
2012
- </div><!-- /.modal-content -->
2013
- <div class="modal-arrow"></div>
2014
- </div>
2015
-
2016
- </div>
2017
- <div class="codeBlock">
2018
- <div class="highlight">
2019
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">&gt;</span>
2020
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
2021
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
2022
- <span class="nt">&lt;a</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">class=</span><span class="s">"pull-right"</span><span class="nt">&gt;</span>
2023
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-times"</span><span class="nt">&gt;&lt;/i&gt;</span>
2024
- <span class="nt">&lt;/a&gt;</span>
2025
-
2026
- <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"m-l-xs"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"booking-course.php"</span><span class="nt">&gt;&lt;span</span> <span class="na">class=</span><span class="s">"opaque"</span><span class="nt">&gt;</span>Day 1 of 3<span class="nt">&lt;/span&gt;&lt;br&gt;</span>Simulation Coordinator Training<span class="nt">&lt;/a&gt;&lt;/h2&gt;</span>
2027
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"m-t-none m-l-xs opaque"</span><span class="nt">&gt;</span>COURSE / INTERNAL<span class="nt">&lt;/p&gt;</span>
2028
- <span class="nt">&lt;/div&gt;</span>
2029
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
2030
-
2031
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
2032
- <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"m-b-xxs"</span><span class="nt">&gt;</span>Mon 18 Apr 2016<span class="nt">&lt;/label&gt;</span>
2033
- <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"agile-list bg-change roomslist"</span><span class="nt">&gt;</span>
2034
- <span class="nt">&lt;li&gt;</span>
2035
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row odd collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#room1"</span> <span class="na">title=</span><span class="s">"Expand"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
2036
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-8 col-sm-6 col-xs-12 roomtitle"</span><span class="nt">&gt;</span>
2037
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-caret-down"</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;span&gt;</span>Debrief 1<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
2038
- <span class="nt">&lt;/div&gt;</span>
2039
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-4 col-sm-6 col-xs-12 text-right col-xs-left xl-r-a"</span><span class="nt">&gt;</span>
2040
- 9am - 12pm <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-exclamation-circle text-danger"</span><span class="nt">&gt;&lt;/i&gt;</span>
2041
- <span class="nt">&lt;/div&gt;</span>
2042
- <span class="nt">&lt;/div&gt;</span>
2043
- <span class="nt">&lt;div&gt;</span>
2044
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"room1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">style=</span><span class="s">"height: 0px;"</span><span class="nt">&gt;</span>
2045
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row even"</span><span class="nt">&gt;</span>
2046
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-12"</span><span class="nt">&gt;</span>
2047
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2048
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"alert alert-small alert-danger text-center"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
2049
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-exclamation-circle"</span><span class="nt">&gt;</span> <span class="nt">&lt;/i&gt;</span> Room conflict<span class="nt">&lt;/span&gt;</span> with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Patient Safety Workshop<span class="nt">&lt;/a&gt;</span>
2050
- <span class="nt">&lt;/p&gt;</span>
2051
- <span class="nt">&lt;/div&gt;</span>
2052
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2053
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>LAYOUT<span class="nt">&lt;/span&gt;</span>
2054
- <span class="nt">&lt;br&gt;</span>
2055
- Boardroom
2056
- <span class="nt">&lt;/div&gt;</span>
2057
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2058
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>EQUIPMENT<span class="nt">&lt;/span&gt;</span>
2059
- <span class="nt">&lt;br&gt;</span>
2060
- Projector, Conference phone
2061
- <span class="nt">&lt;/div&gt;</span>
2062
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2063
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>COMMENTS<span class="nt">&lt;/span&gt;</span>
2064
- <span class="nt">&lt;br&gt;</span>
2065
- <span class="nt">&lt;p&gt;</span>
2066
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris enim, dictum eget ligula ut, aliquet porta neque. Curabitur vel iaculis ante.
2067
- <span class="nt">&lt;/p&gt;</span>
2068
- <span class="nt">&lt;/div&gt;</span>
2069
- <span class="nt">&lt;/div&gt;</span>
2070
- <span class="nt">&lt;/div&gt;</span>
2071
- <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- END row --&gt;</span>
2072
- <span class="nt">&lt;/div&gt;&lt;/li&gt;</span>
2073
- <span class="nt">&lt;li&gt;</span>
2074
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row odd"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#room2"</span> <span class="na">title=</span><span class="s">"Expand"</span><span class="nt">&gt;</span>
2075
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-8 col-sm-6 col-xs-12"</span><span class="nt">&gt;</span>
2076
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-caret-down"</span><span class="nt">&gt;&lt;/i&gt;</span> Debrief 2<span class="nt">&lt;/a&gt;</span>
2077
- <span class="nt">&lt;/div&gt;</span>
2078
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-4 col-sm-6 col-xs-12 text-right col-xs-left xl-r-a"</span><span class="nt">&gt;</span>
2079
- 2am - 5pm
2080
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-check text-success"</span><span class="nt">&gt;&lt;/i&gt;</span>
2081
- <span class="nt">&lt;/div&gt;</span>
2082
- <span class="nt">&lt;/div&gt;</span>
2083
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"room2"</span><span class="nt">&gt;</span>
2084
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row even"</span><span class="nt">&gt;</span>
2085
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-12"</span><span class="nt">&gt;</span>
2086
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2087
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>LAYOUT<span class="nt">&lt;/span&gt;</span>
2088
- <span class="nt">&lt;br&gt;</span>
2089
- Boardroom
2090
- <span class="nt">&lt;/div&gt;</span>
2091
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2092
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>EQUIPMENT<span class="nt">&lt;/span&gt;</span>
2093
- <span class="nt">&lt;br&gt;</span>
2094
- Projector, Conference phone
2095
- <span class="nt">&lt;/div&gt;</span>
2096
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-b-xs"</span><span class="nt">&gt;</span>
2097
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sub-heading"</span><span class="nt">&gt;</span>COMMENTS<span class="nt">&lt;/span&gt;</span>
2098
- <span class="nt">&lt;br&gt;</span>
2099
- <span class="nt">&lt;p&gt;</span>
2100
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris enim, dictum eget ligula ut, aliquet porta neque. Curabitur vel iaculis ante.
2101
- <span class="nt">&lt;/p&gt;</span>
2102
- <span class="nt">&lt;/div&gt;</span>
2103
- <span class="nt">&lt;/div&gt;</span>
2104
- <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- END row --&gt;</span>
2105
- <span class="nt">&lt;/div&gt;</span>
2106
- <span class="nt">&lt;/li&gt;</span>
2107
- <span class="nt">&lt;/ul&gt;</span>
2108
- <span class="nt">&lt;/div&gt;</span>
2109
-
2110
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
2111
- <span class="nt">&lt;label&gt;</span>Location<span class="nt">&lt;/label&gt;</span>
2112
- <span class="nt">&lt;p&gt;&lt;a&gt;</span>Clinical Skills Development Service<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
2113
- <span class="nt">&lt;/div&gt;</span>
2114
-
2115
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
2116
-
2117
- <span class="nt">&lt;label&gt;</span>Contact<span class="nt">&lt;/label&gt;</span>
2118
- <span class="nt">&lt;p&gt;</span>
2119
- <span class="nt">&lt;a&gt;</span>Rachel Weller<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2120
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:rachel.weller@health.qld.gov.au"</span><span class="nt">&gt;</span> rachel.weller@health.qld.gov.au<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2121
- <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"tel:+0736465000"</span><span class="nt">&gt;</span> 3646 5000<span class="nt">&lt;/a&gt;</span>
2122
- <span class="nt">&lt;/p&gt;</span>
2123
- <span class="nt">&lt;/div&gt;</span>
2124
-
2125
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"m-t-md"</span><span class="nt">&gt;</span>
2126
- <span class="nt">&lt;a</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span> <span class="na">href=</span><span class="s">"booking-course.php"</span><span class="nt">&gt;</span>View booking<span class="nt">&lt;/a&gt;</span>
2127
- <span class="nt">&lt;/div&gt;</span>
2128
-
2129
- <span class="nt">&lt;/div&gt;</span>
2130
- <span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-content --&gt;</span>
2131
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-arrow"</span><span class="nt">&gt;&lt;/div&gt;</span>
2132
- <span class="nt">&lt;/div&gt;</span></pre>
2133
- </div>
2134
- </div>
2135
- </div>
2136
-
2137
- <h1 id="pagination" class="styleguide">Pagination</h1>
2138
-
2139
- <p class="lead">Provide pagination links for Central with our multi-page pagination component.</p>
2140
- <div class="codeExample">
2141
- <div class="exampleOutput clear">
2142
- <div class="list-options">
2143
- <div class="btn-group m-r-sm">
2144
- <button type="button" class="btn btn-white">
2145
- <i class="fa fa-chevron-left"></i>
2146
- </button>
2147
- <button class="btn btn-white">1</button>
2148
- <button class="btn btn-white active">2</button>
2149
- <button class="btn btn-white">3</button>
2150
- <button class="btn btn-white">4</button>
2151
- <button type="button" class="btn btn-white">
2152
- <i class="fa fa-chevron-right"></i>
2153
- </button>
2154
- </div>
2155
- </div>
2156
-
2157
- </div>
2158
- <div class="codeBlock">
2159
- <div class="highlight">
2160
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-options"</span><span class="nt">&gt;</span>
2161
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group m-r-sm"</span><span class="nt">&gt;</span>
2162
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>
2163
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-chevron-left"</span><span class="nt">&gt;&lt;/i&gt;</span>
2164
- <span class="nt">&lt;/button&gt;</span>
2165
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/button&gt;</span>
2166
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-white active"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/button&gt;</span>
2167
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/button&gt;</span>
2168
- <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span>
2169
- <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>
2170
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-chevron-right"</span><span class="nt">&gt;&lt;/i&gt;</span>
2171
- <span class="nt">&lt;/button&gt;</span>
2172
- <span class="nt">&lt;/div&gt;</span>
2173
- <span class="nt">&lt;/div&gt;</span></pre>
2174
- </div>
2175
- </div>
2176
- </div>
2177
-
2178
- <h1 id="progress" class="styleguide">Progress bars</h1>
2179
-
2180
- <p class="lead">Provide up-to-date feedback on the progress of a workflow or action
2181
- with simple yet flexible progress bars.</p>
2182
- <div class="codeExample">
2183
- <div class="exampleOutput clear">
2184
- <div class="progress">
2185
- <div class="progress-bar" role="progressbar" style="width: 10%">
2186
- <p class="text-center"><strong>10%</strong></p>
2187
- </div>
2188
- </div>
2189
-
2190
- </div>
2191
- <div class="codeBlock">
2192
- <div class="highlight">
2193
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2194
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 10%"</span><span class="nt">&gt;</span>
2195
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2196
- <span class="nt">&lt;/div&gt;</span>
2197
- <span class="nt">&lt;/div&gt;</span></pre>
2198
- </div>
2199
- </div>
2200
- </div>
2201
-
2202
- <h2>Variations of the progress bar</h2>
2203
- <div class="codeExample">
2204
- <div class="exampleOutput clear">
2205
- <div class="progress">
2206
- <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 10%">
2207
- <p class="text-center"><strong>10%</strong></p>
2208
- </div>
2209
- </div>
2210
- <div class="progress">
2211
- <div class="progress-bar progress-bar-yellow" style="width: 20%">
2212
- <p class="text-center"><strong>10%</strong></p>
2213
- </div>
2214
- </div>
2215
- <div class="progress">
2216
- <div class="progress-bar progress-bar-danger" style="width: 30%">
2217
- <p class="text-center"><strong>10%</strong></p>
2218
- </div>
2219
- </div>
2220
- <div class="progress">
2221
- <div class="progress-bar progress-bar-purple" style="width: 40%">
2222
- <p class="text-center"><strong>10%</strong></p>
2223
- </div>
2224
- </div>
2225
- <div class="progress">
2226
- <div class="progress-bar progress-bar-pink" style="width: 50%">
2227
- <p class="text-center"><strong>10%</strong></p>
2228
- </div>
2229
- </div>
2230
- <div class="progress">
2231
- <div class="progress-bar progress-bar-info" style="width: 60%">
2232
- <p class="text-center"><strong>10%</strong></p>
2233
- </div>
2234
- </div>
2235
- <div class="progress">
2236
- <div class="progress-bar progress-bar-grey progress-bar-striped" style="width: 70%">
2237
- <p class="text-center"><strong>10%</strong></p>
2238
- </div>
2239
- </div>
2240
-
2241
- </div>
2242
- <div class="codeBlock">
2243
- <div class="highlight">
2244
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2245
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-success progress-bar-striped"</span> <span class="na">style=</span><span class="s">"width: 10%"</span><span class="nt">&gt;</span>
2246
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2247
- <span class="nt">&lt;/div&gt;</span>
2248
- <span class="nt">&lt;/div&gt;</span>
2249
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2250
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-yellow"</span> <span class="na">style=</span><span class="s">"width: 20%"</span><span class="nt">&gt;</span>
2251
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2252
- <span class="nt">&lt;/div&gt;</span>
2253
- <span class="nt">&lt;/div&gt;</span>
2254
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2255
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-danger"</span> <span class="na">style=</span><span class="s">"width: 30%"</span><span class="nt">&gt;</span>
2256
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2257
- <span class="nt">&lt;/div&gt;</span>
2258
- <span class="nt">&lt;/div&gt;</span>
2259
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2260
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-purple"</span> <span class="na">style=</span><span class="s">"width: 40%"</span><span class="nt">&gt;</span>
2261
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2262
- <span class="nt">&lt;/div&gt;</span>
2263
- <span class="nt">&lt;/div&gt;</span>
2264
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2265
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-pink"</span> <span class="na">style=</span><span class="s">"width: 50%"</span><span class="nt">&gt;</span>
2266
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2267
- <span class="nt">&lt;/div&gt;</span>
2268
- <span class="nt">&lt;/div&gt;</span>
2269
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2270
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-info"</span> <span class="na">style=</span><span class="s">"width: 60%"</span><span class="nt">&gt;</span>
2271
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2272
- <span class="nt">&lt;/div&gt;</span>
2273
- <span class="nt">&lt;/div&gt;</span>
2274
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
2275
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-grey progress-bar-striped"</span> <span class="na">style=</span><span class="s">"width: 70%"</span><span class="nt">&gt;</span>
2276
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2277
- <span class="nt">&lt;/div&gt;</span>
2278
- <span class="nt">&lt;/div&gt;</span></pre>
2279
- </div>
2280
- </div>
2281
- </div>
2282
- <p class="styleguide">To display the smaller version of this progress bar,
2283
- can use the <code>.progress-mini</code> modifier class in the parent
2284
- <code>.progress</code> container.</p><div class="codeExample">
2285
- <div class="exampleOutput clear">
2286
- <div class="progress progress-mini">
2287
- <div class="progress-bar progress-bar-grey progress-bar-striped" style="width: 70%">
2288
- <p class="text-center"><strong>10%</strong></p>
2289
- </div>
2290
- </div>
2291
-
2292
- </div>
2293
- <div class="codeBlock">
2294
- <div class="highlight">
2295
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-mini"</span><span class="nt">&gt;</span>
2296
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar progress-bar-grey progress-bar-striped"</span> <span class="na">style=</span><span class="s">"width: 70%"</span><span class="nt">&gt;</span>
2297
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;&lt;strong&gt;</span>10%<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
2298
- <span class="nt">&lt;/div&gt;</span>
2299
- <span class="nt">&lt;/div&gt;</span></pre>
2300
- </div>
2301
- </div>
2302
- </div>
2303
- <p class="styleguide">You can also stack these progress bars.
2304
- <div class="progress progress-striped active">
2305
- <div style="width: 30%" class="progress-bar progress-bar-success">
2306
- <span class="sr-only">30% Complete (success)</span>
2307
- </div>
2308
- <div style="width: 20%" class="progress-bar progress-bar-warning">
2309
- <span class="sr-only">15% Complete (warning)</span>
2310
- </div>
2311
- <div style="width: 40%" class="progress-bar progress-bar-danger">
2312
- <span class="sr-only">40% Complete (danger)</span>
2313
- </div>
2314
- </div></p>
2315
- <h1 id="tables" class="styleguide">Tables</h1>
2316
-
2317
- <p class="lead">Provide pagination links for Central with our multi-page pagination component.</p>
2318
- <div class="codeExample">
2319
- <div class="exampleOutput clear">
2320
- <div class="form-group">
2321
- <table class="table history">
2322
- <tbody>
2323
- <tr>
2324
- <td class="p-l-none">
2325
- <strong>Inspection</strong><br>
2326
- <a>Work order #244</a><br>
2327
- </td>
2328
- <td>
2329
- <span class="small text-muted">
2330
- Result
2331
- </span><br>
2332
- <span class="text-green">
2333
- <i class="fa fa-check"></i>
2334
- Passed
2335
- </span>
2336
- </td>
2337
- <td class="text-right">
2338
- Andrea Thompson<br>
2339
- <a><i class="fa fa-map-marker"></i>
2340
- Lady Cilento Children's Hospital
2341
- </a><br>
2342
- 2 Nov, 2015
2343
- </td>
2344
- </tr>
2345
- <tr>
2346
- <td class="p-l-none">
2347
- <strong>Repair</strong><br>
2348
- <a>Work order #213</a>
2349
- </td>
2350
- <td>
2351
- <span class="small text-muted">
2352
- Time taken
2353
- </span><br>
2354
- <i class="fa fa-clock-o"></i> 1hr 40mins
2355
- </td>
2356
- <td class="text-right">
2357
- Clinton Henderson<br>
2358
- <a><i class="fa fa-map-marker"></i>
2359
- CSDS</a><br>
2360
- 21 Oct, 2015
2361
- </td>
2362
- </tr>
2363
- <tr>
2364
- <td class="p-l-none">
2365
- <strong>Inspection</strong><br>
2366
- <a>Work order #195</a>
2367
- </td>
2368
- <td>
2369
- <span class="small text-muted">
2370
- Result
2371
- </span><br>
2372
- <span class="text-danger">
2373
- <i class="fa fa-flag"></i>
2374
- Flagged
2375
- </span>
2376
- </td>
2377
- <td class="text-right">
2378
- Andrea Thompson<br>
2379
- <a><i class="fa fa-map-marker"></i>
2380
- Lady Cilento Children's Hospital
2381
- </a><br>
2382
- 17 Oct, 2015
2383
- </td>
2384
- </tr>
2385
- <tr>
2386
- <td class="p-l-none">
2387
- <strong>Service</strong><br>
2388
- <a>Work order #188</a>
2389
- </td>
2390
- <td>
2391
- <span class="small text-muted">Time taken</span><br>
2392
- <i class="fa fa-clock-o"></i> 3hr 15mins
2393
- </td>
2394
- <td class="text-right">
2395
- Daniel Host<br>
2396
- <a><i class="fa fa-map-marker"></i> CSDS</a><br>
2397
- 8 Oct, 2015
2398
- </td>
2399
- </tr>
2400
- <tr>
2401
- <td class="p-l-none">
2402
- <strong>Repair</strong><br>
2403
- <a>Work order #185</a><br>
2404
- </td>
2405
- <td>
2406
- <span class="small text-muted">
2407
- Time taken
2408
- </span><br>
2409
- <i class="fa fa-clock-o"></i> 1hr 40mins
2410
- </td>
2411
- <td class="text-right">
2412
- Clinton Henderson<br>
2413
- <a>
2414
- <i class="fa fa-map-marker"></i> CSDS
2415
- </a><br>
2416
- 29 Sep, 2015
2417
- </td>
2418
- </tr>
2419
- </tbody>
2420
- </table>
2421
- </div>
2422
-
2423
- </div>
2424
- <div class="codeBlock">
2425
- <div class="highlight">
2426
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
2427
- <span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table history"</span><span class="nt">&gt;</span>
2428
- <span class="nt">&lt;tbody&gt;</span>
2429
- <span class="nt">&lt;tr&gt;</span>
2430
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"p-l-none"</span><span class="nt">&gt;</span>
2431
- <span class="nt">&lt;strong&gt;</span>Inspection<span class="nt">&lt;/strong&gt;&lt;br&gt;</span>
2432
- <span class="nt">&lt;a&gt;</span>Work order #244<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2433
- <span class="nt">&lt;/td&gt;</span>
2434
- <span class="nt">&lt;td&gt;</span>
2435
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"small text-muted"</span><span class="nt">&gt;</span>
2436
- Result
2437
- <span class="nt">&lt;/span&gt;&lt;br&gt;</span>
2438
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green"</span><span class="nt">&gt;</span>
2439
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-check"</span><span class="nt">&gt;&lt;/i&gt;</span>
2440
- Passed
2441
- <span class="nt">&lt;/span&gt;</span>
2442
- <span class="nt">&lt;/td&gt;</span>
2443
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>
2444
- Andrea Thompson<span class="nt">&lt;br&gt;</span>
2445
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-map-marker"</span><span class="nt">&gt;&lt;/i&gt;</span>
2446
- Lady Cilento Children's Hospital
2447
- <span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2448
- 2 Nov, 2015
2449
- <span class="nt">&lt;/td&gt;</span>
2450
- <span class="nt">&lt;/tr&gt;</span>
2451
- <span class="nt">&lt;tr&gt;</span>
2452
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"p-l-none"</span><span class="nt">&gt;</span>
2453
- <span class="nt">&lt;strong&gt;</span>Repair<span class="nt">&lt;/strong&gt;&lt;br&gt;</span>
2454
- <span class="nt">&lt;a&gt;</span>Work order #213<span class="nt">&lt;/a&gt;</span>
2455
- <span class="nt">&lt;/td&gt;</span>
2456
- <span class="nt">&lt;td&gt;</span>
2457
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"small text-muted"</span><span class="nt">&gt;</span>
2458
- Time taken
2459
- <span class="nt">&lt;/span&gt;&lt;br&gt;</span>
2460
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o"</span><span class="nt">&gt;&lt;/i&gt;</span> 1hr 40mins
2461
- <span class="nt">&lt;/td&gt;</span>
2462
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>
2463
- Clinton Henderson<span class="nt">&lt;br&gt;</span>
2464
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-map-marker"</span><span class="nt">&gt;&lt;/i&gt;</span>
2465
- CSDS<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2466
- 21 Oct, 2015
2467
- <span class="nt">&lt;/td&gt;</span>
2468
- <span class="nt">&lt;/tr&gt;</span>
2469
- <span class="nt">&lt;tr&gt;</span>
2470
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"p-l-none"</span><span class="nt">&gt;</span>
2471
- <span class="nt">&lt;strong&gt;</span>Inspection<span class="nt">&lt;/strong&gt;&lt;br&gt;</span>
2472
- <span class="nt">&lt;a&gt;</span>Work order #195<span class="nt">&lt;/a&gt;</span>
2473
- <span class="nt">&lt;/td&gt;</span>
2474
- <span class="nt">&lt;td&gt;</span>
2475
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"small text-muted"</span><span class="nt">&gt;</span>
2476
- Result
2477
- <span class="nt">&lt;/span&gt;&lt;br&gt;</span>
2478
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">&gt;</span>
2479
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-flag"</span><span class="nt">&gt;&lt;/i&gt;</span>
2480
- Flagged
2481
- <span class="nt">&lt;/span&gt;</span>
2482
- <span class="nt">&lt;/td&gt;</span>
2483
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>
2484
- Andrea Thompson<span class="nt">&lt;br&gt;</span>
2485
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-map-marker"</span><span class="nt">&gt;&lt;/i&gt;</span>
2486
- Lady Cilento Children's Hospital
2487
- <span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2488
- 17 Oct, 2015
2489
- <span class="nt">&lt;/td&gt;</span>
2490
- <span class="nt">&lt;/tr&gt;</span>
2491
- <span class="nt">&lt;tr&gt;</span>
2492
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"p-l-none"</span><span class="nt">&gt;</span>
2493
- <span class="nt">&lt;strong&gt;</span>Service<span class="nt">&lt;/strong&gt;&lt;br&gt;</span>
2494
- <span class="nt">&lt;a&gt;</span>Work order #188<span class="nt">&lt;/a&gt;</span>
2495
- <span class="nt">&lt;/td&gt;</span>
2496
- <span class="nt">&lt;td&gt;</span>
2497
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"small text-muted"</span><span class="nt">&gt;</span>Time taken<span class="nt">&lt;/span&gt;&lt;br&gt;</span>
2498
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o"</span><span class="nt">&gt;&lt;/i&gt;</span> 3hr 15mins
2499
- <span class="nt">&lt;/td&gt;</span>
2500
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>
2501
- Daniel Host<span class="nt">&lt;br&gt;</span>
2502
- <span class="nt">&lt;a&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-map-marker"</span><span class="nt">&gt;&lt;/i&gt;</span> CSDS<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2503
- 8 Oct, 2015
2504
- <span class="nt">&lt;/td&gt;</span>
2505
- <span class="nt">&lt;/tr&gt;</span>
2506
- <span class="nt">&lt;tr&gt;</span>
2507
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"p-l-none"</span><span class="nt">&gt;</span>
2508
- <span class="nt">&lt;strong&gt;</span>Repair<span class="nt">&lt;/strong&gt;&lt;br&gt;</span>
2509
- <span class="nt">&lt;a&gt;</span>Work order #185<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2510
- <span class="nt">&lt;/td&gt;</span>
2511
- <span class="nt">&lt;td&gt;</span>
2512
- <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"small text-muted"</span><span class="nt">&gt;</span>
2513
- Time taken
2514
- <span class="nt">&lt;/span&gt;&lt;br&gt;</span>
2515
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o"</span><span class="nt">&gt;&lt;/i&gt;</span> 1hr 40mins
2516
- <span class="nt">&lt;/td&gt;</span>
2517
- <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>
2518
- Clinton Henderson<span class="nt">&lt;br&gt;</span>
2519
- <span class="nt">&lt;a&gt;</span>
2520
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-map-marker"</span><span class="nt">&gt;&lt;/i&gt;</span> CSDS
2521
- <span class="nt">&lt;/a&gt;&lt;br&gt;</span>
2522
- 29 Sep, 2015
2523
- <span class="nt">&lt;/td&gt;</span>
2524
- <span class="nt">&lt;/tr&gt;</span>
2525
- <span class="nt">&lt;/tbody&gt;</span>
2526
- <span class="nt">&lt;/table&gt;</span>
2527
- <span class="nt">&lt;/div&gt;</span></pre>
2528
- </div>
2529
- </div>
2530
- </div>
2531
-
2532
- <h1 id="widgets" class="styleguide">Widgets</h1>
2533
-
2534
- <p class="lead">A widget is basically a block with nice rounded corners.
2535
- It is mostly used as a container for multi-line titles and multiple pieces of data
2536
- that are too long to be contained in an alert box.</p>
2537
- <p class="styleguide">Remember that their width depends on the <code>div</code> that contains them.</p><p class="styleguide">Since a basic widget has a transparent background, you would most likely end up using
2538
- one of our colour classes.</p><div class="codeExample">
2539
- <div class="exampleOutput clear">
2540
- <div class="widget">
2541
- This is a basic widget.
2542
- </div>
2543
-
2544
- </div>
2545
- <div class="codeBlock">
2546
- <div class="highlight">
2547
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget"</span><span class="nt">&gt;</span>
2548
- This is a basic widget.
2549
- <span class="nt">&lt;/div&gt;</span></pre>
2550
- </div>
2551
- </div>
2552
- </div>
2553
- <div class="codeExample">
2554
- <div class="exampleOutput clear">
2555
- <div class="widget style1 red-bg">
2556
- <h1>H1</h1>
2557
- <h2>H2</h2>
2558
- <h3>H3</h3>
2559
- <p>This is a sample paragraph</p>
2560
- </div>
2561
-
2562
- </div>
2563
- <div class="codeBlock">
2564
- <div class="highlight">
2565
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget style1 red-bg"</span><span class="nt">&gt;</span>
2566
- <span class="nt">&lt;h1&gt;</span>H1<span class="nt">&lt;/h1&gt;</span>
2567
- <span class="nt">&lt;h2&gt;</span>H2<span class="nt">&lt;/h2&gt;</span>
2568
- <span class="nt">&lt;h3&gt;</span>H3<span class="nt">&lt;/h3&gt;</span>
2569
- <span class="nt">&lt;p&gt;</span>This is a sample paragraph<span class="nt">&lt;/p&gt;</span>
2570
- <span class="nt">&lt;/div&gt;</span></pre>
2571
- </div>
2572
- </div>
2573
- </div>
2574
- <div class="codeExample">
2575
- <div class="exampleOutput clear">
2576
- <div class="col-lg-10">
2577
- <div class="widget style2 navy-bg">
2578
- <h1>H1</h1>
2579
- <h2>H2</h2>
2580
- <h3>H3</h3>
2581
- <p>This is a sample paragraph</p>
2582
- </div>
2583
- </div>
2584
-
2585
- </div>
2586
- <div class="codeBlock">
2587
- <div class="highlight">
2588
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-10"</span><span class="nt">&gt;</span>
2589
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget style2 navy-bg"</span><span class="nt">&gt;</span>
2590
- <span class="nt">&lt;h1&gt;</span>H1<span class="nt">&lt;/h1&gt;</span>
2591
- <span class="nt">&lt;h2&gt;</span>H2<span class="nt">&lt;/h2&gt;</span>
2592
- <span class="nt">&lt;h3&gt;</span>H3<span class="nt">&lt;/h3&gt;</span>
2593
- <span class="nt">&lt;p&gt;</span>This is a sample paragraph<span class="nt">&lt;/p&gt;</span>
2594
- <span class="nt">&lt;/div&gt;</span>
2595
- <span class="nt">&lt;/div&gt;</span></pre>
2596
- </div>
2597
- </div>
2598
- </div>
2599
- <div class="codeExample">
2600
- <div class="exampleOutput clear">
2601
- <div class="col-lg-8">
2602
- <div class="widget style3 green-bg">
2603
- <h1>H1</h1>
2604
- <h2>H2</h2>
2605
- <h3>H3</h3>
2606
- <p>This is a sample paragraph</p>
2607
- </div>
2608
- </div>
2609
-
2610
- </div>
2611
- <div class="codeBlock">
2612
- <div class="highlight">
2613
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-8"</span><span class="nt">&gt;</span>
2614
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget style3 green-bg"</span><span class="nt">&gt;</span>
2615
- <span class="nt">&lt;h1&gt;</span>H1<span class="nt">&lt;/h1&gt;</span>
2616
- <span class="nt">&lt;h2&gt;</span>H2<span class="nt">&lt;/h2&gt;</span>
2617
- <span class="nt">&lt;h3&gt;</span>H3<span class="nt">&lt;/h3&gt;</span>
2618
- <span class="nt">&lt;p&gt;</span>This is a sample paragraph<span class="nt">&lt;/p&gt;</span>
2619
- <span class="nt">&lt;/div&gt;</span>
2620
- <span class="nt">&lt;/div&gt;</span></pre>
2621
- </div>
2622
- </div>
2623
- </div>
2624
- <div class="codeExample">
2625
- <div class="exampleOutput clear">
2626
- <div class="col-lg-6">
2627
- <div class="widget style4 gray-bg">
2628
- <h1>H1</h1>
2629
- <h2>H2</h2>
2630
- <h3>H3</h3>
2631
- <p>This is a sample paragraph</p>
2632
- </div>
2633
- </div>
2634
-
2635
- </div>
2636
- <div class="codeBlock">
2637
- <div class="highlight">
2638
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
2639
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget style4 gray-bg"</span><span class="nt">&gt;</span>
2640
- <span class="nt">&lt;h1&gt;</span>H1<span class="nt">&lt;/h1&gt;</span>
2641
- <span class="nt">&lt;h2&gt;</span>H2<span class="nt">&lt;/h2&gt;</span>
2642
- <span class="nt">&lt;h3&gt;</span>H3<span class="nt">&lt;/h3&gt;</span>
2643
- <span class="nt">&lt;p&gt;</span>This is a sample paragraph<span class="nt">&lt;/p&gt;</span>
2644
- <span class="nt">&lt;/div&gt;</span>
2645
- <span class="nt">&lt;/div&gt;</span></pre>
2646
- </div>
2647
- </div>
2648
- </div>
2649
- <div class="codeExample">
2650
- <div class="exampleOutput clear">
2651
- <div class="col-lg-4">
2652
- <div class="widget mini-widget lighter-grey-bg">
2653
- <h1>H1</h1>
2654
- <h2>H2</h2>
2655
- <h3>H3</h3>
2656
- <p>This is a sample paragraph</p>
2657
- </div>
2658
- </div>
2659
-
2660
- </div>
2661
- <div class="codeBlock">
2662
- <div class="highlight">
2663
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-4"</span><span class="nt">&gt;</span>
2664
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget mini-widget lighter-grey-bg"</span><span class="nt">&gt;</span>
2665
- <span class="nt">&lt;h1&gt;</span>H1<span class="nt">&lt;/h1&gt;</span>
2666
- <span class="nt">&lt;h2&gt;</span>H2<span class="nt">&lt;/h2&gt;</span>
2667
- <span class="nt">&lt;h3&gt;</span>H3<span class="nt">&lt;/h3&gt;</span>
2668
- <span class="nt">&lt;p&gt;</span>This is a sample paragraph<span class="nt">&lt;/p&gt;</span>
2669
- <span class="nt">&lt;/div&gt;</span>
2670
- <span class="nt">&lt;/div&gt;</span></pre>
2671
- </div>
2672
- </div>
2673
- </div>
2674
- <p class="styleguide">A widget may also be formatted to look like a modal with a title bar and a text box.
2675
- This can be achieved by splitting a widget to a <code>widget-head-color-box</code>
2676
- and <code>widget-text-box</code>.</p><div class="codeExample">
2677
- <div class="exampleOutput clear">
2678
- <div class="widget-head-color-box navy-bg">
2679
- <h2 class="font-bold no-margins">
2680
- Widget title
2681
- </h2>
2682
- </div>
2683
-
2684
- <div class="widget-text-box">
2685
- <div class="form-group">
2686
- <p>Text inside a widget.</p>
2687
- </div>
2688
- </div>
2689
-
2690
- </div>
2691
- <div class="codeBlock">
2692
- <div class="highlight">
2693
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget-head-color-box navy-bg"</span><span class="nt">&gt;</span>
2694
- <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"font-bold no-margins"</span><span class="nt">&gt;</span>
2695
- Widget title
2696
- <span class="nt">&lt;/h2&gt;</span>
2697
- <span class="nt">&lt;/div&gt;</span>
2698
-
2699
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget-text-box"</span><span class="nt">&gt;</span>
2700
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
2701
- <span class="nt">&lt;p&gt;</span>Text inside a widget.<span class="nt">&lt;/p&gt;</span>
2702
- <span class="nt">&lt;/div&gt;</span>
2703
- <span class="nt">&lt;/div&gt;</span></pre>
2704
- </div>
2705
- </div>
2706
- </div>
2707
- <p class="styleguide">You can also use a label/badge inside a widget.</p><div class="codeExample">
2708
- <div class="exampleOutput clear">
2709
- <div class="widget lighter-grey-bg style4 m-b-none clear">
2710
- <p>
2711
- Full body manikin
2712
- <label class="pull-right label label-primary">0</label>
2713
- </p>
2714
- </div>
2715
-
2716
- </div>
2717
- <div class="codeBlock">
2718
- <div class="highlight">
2719
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget lighter-grey-bg style4 m-b-none clear"</span><span class="nt">&gt;</span>
2720
- <span class="nt">&lt;p&gt;</span>
2721
- Full body manikin
2722
- <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"pull-right label label-primary"</span><span class="nt">&gt;</span>0<span class="nt">&lt;/label&gt;</span>
2723
- <span class="nt">&lt;/p&gt;</span>
2724
- <span class="nt">&lt;/div&gt;</span></pre>
2725
- </div>
2726
- </div>
2727
- </div>
2728
- </div>
2729
- </div>
2730
- </div>
2731
-
2732
- <footer class="hgt-footer">
2733
- Built using <a href="https://github.com/trulia/hologram">Hologram</a> and <a href="https://github.com/wearecube/hologram-github-theme">Hologram Github Theme</a>
2734
- </footer>
2735
- </div>
2736
-
2737
- <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
2738
- <script src="scripts/vendor/jquery.waypoints.min.js"></script>
2739
- <script src="scripts/vendor/sticky.min.js"></script>
2740
- <script src="scripts/vendor/infinite.min.js"></script>
2741
- <script src="scripts/hgt.js"></script>
2742
-
2743
-
2744
-
2745
- <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
2746
-
2747
- <script type="text/javascript" src="../node_modules/jqueryui/jquery-ui.min.js"></script>
2748
-
2749
- <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
2750
-
2751
- <script type="text/javascript" src="../node_modules/icheck/icheck.min.js"></script>
2752
-
2753
- <script type="text/javascript" src="../styleguide-dep/js/checkbox.js"></script>
2754
-
2755
- <script type="text/javascript" src="../styleguide-dep/js/custom.js"></script>
2756
-
2757
-
2758
-
2759
-
2760
- </body>
2761
- </html>