@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/styles.html DELETED
@@ -1,985 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <title>Styles &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 ">
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 selected">
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-styles" class="hgt-menu-item">Overview</a>
74
-
75
-
76
-
77
- <a href="#1_colours" class="hgt-menu-item">Colours</a>
78
-
79
-
80
-
81
- <a href="#2_icons" class="hgt-menu-item">Icons and Logos</a>
82
-
83
-
84
-
85
- <a href="#3-typography" class="hgt-menu-item">Typography</a>
86
-
87
-
88
-
89
- <a href="#4-spacing" class="hgt-menu-item">Spacing</a>
90
-
91
-
92
-
93
- <a href="#5-borders" class="hgt-menu-item">Borders</a>
94
-
95
-
96
-
97
- <a href="#helpers" class="hgt-menu-item">Helpers</a>
98
-
99
-
100
- </nav>
101
- </div>
102
-
103
-
104
- <div class="hgt-column three-fourths">
105
- <div class="hgt-content">
106
- <h1 id="0_overview-styles" class="styleguide">Overview</h1>
107
-
108
- <p class="lead">Foundations, including colour, personality, writing style, and type</p>
109
-
110
- <h1 id="1_colours" class="styleguide">Colours</h1>
111
-
112
- <p class="lead">Concrete uses a specific color palette to communicate meaning,
113
- convey visual differentiation, and provide a consistent look and feel.
114
- From neutrals to brights, each hue is chosen to fit into the overall visual
115
- language and promote a contemporary and vibrant user experience.</p>
116
-
117
- <p>Most of the colours can be found in utilities/_variables.scss file.
118
-
119
- Background color -
120
- Accent color -
121
- Border color
122
-
123
- There are some colors where we darken or lighten colors. Feel free to use those SCSS mixins.
124
- </p>
125
-
126
- <h2>Base</h2>
127
-
128
- <table class="table color-table">
129
- <tbody>
130
- <tr>
131
- <td><div class="swatch" style="background-color: #5470ac;"></div>Accent color</td>
132
- <td><pre class="inline">$accent-color</pre></td>
133
- </tr>
134
- <tr>
135
- <td><div class="swatch" style="background-color: #e5e7ef;"></div>Light accent color</td>
136
- <td><pre class="inline">$light-accent-color</pre></td>
137
- </tr>
138
- <tr>
139
- <td><div class="swatch" style="background-color: #3a4e78;"></div>Dark accent color</td>
140
- <td><pre class="inline">$dark-accent-color</pre></td>
141
- </tr>
142
- </tbody>
143
- </table>
144
-
145
- <h2>Primary colors</h2>
146
-
147
- <table class="table color-table">
148
- <tbody>
149
- <tr>
150
- <td><div class="swatch" style="background-color: #536296;"></div>Navy</td>
151
- <td><pre class="inline">$navy</pre></td>
152
- </tr>
153
- <tr>
154
- <td><div class="swatch" style="background-color: #1c84c6;"></div>Blue</td>
155
- <td><pre class="inline">$blue</pre> <pre class="inline">$info</pre></td>
156
- </tr>
157
- <tr>
158
- <td><div class="swatch" style="background-color: #ce932c;"></div>Mustard</td>
159
- <td><pre class="inline">$mustard</pre></td>
160
- </tr>
161
- <tr>
162
- <td><div class="swatch" style="background-color: #a94442;"></div>Red</td>
163
- <td><pre class="inline">$red</pre></td>
164
- </tr>
165
- <tr>
166
- <td><div class="swatch" style="background-color: #2a7a44;"></div>Green</td>
167
- <td><pre class="inline">$green</pre></td>
168
- </tr>
169
- </tbody>
170
- </table>
171
-
172
- <h2>Blues</h2>
173
-
174
- <table class="table color-table">
175
- <tbody>
176
- <tr>
177
- <td><div class="swatch" style="background-color: #292c36;"></div>Navyblue</td>
178
- <td><pre class="inline">$navyblue</pre></td>
179
- </tr>
180
- <tr>
181
- <td><div class="swatch" style="background-color: #565c71;"></div>Light navyblue</td>
182
- <td><pre class="inline">$light-navyblue</pre></td>
183
- </tr>
184
- <tr>
185
- <td><div class="swatch" style="background-color: #1e2028;"></div>Dark navyblue</td>
186
- <td><pre class="inline">$dark-navyblue</pre></td>
187
- </tr>
188
- <tr>
189
- <td><div class="swatch" style="background-color: #131419;"></div>Darker navyblue</td>
190
- <td><pre class="inline">$darker-navyblue</pre></td>
191
- </tr>
192
- </tbody>
193
- </table>
194
-
195
- <h2>Greys</h2>
196
-
197
- <table class="table color-table">
198
- <tbody>
199
- <tr>
200
- <td><div class="swatch" style="background-color: #676a6c;"></div>Grey</td>
201
- <td><pre class="inline">$grey</pre></td>
202
- </tr>
203
- <tr>
204
- <td><div class="swatch" style="background-color: #969696;"></div>Med grey</td>
205
- <td><pre class="inline">$medium-grey</pre></td>
206
- </tr>
207
- <tr>
208
- <td><div class="swatch" style="background-color: #bebebe;"></div>Light grey</td>
209
- <td><pre class="inline">$light-grey</pre></td>
210
- </tr>
211
- <tr>
212
- <td><div class="swatch" style="background-color: #d8d8d8;"></div>Lighter grey</td>
213
- <td><pre class="inline">$lighter-grey</pre></td>
214
- </tr>
215
- <tr>
216
- <td><div class="swatch" style="background-color: #ececec;"></div>Lightest grey</td>
217
- <td><pre class="inline">$lightest-grey</pre></td>
218
- </tr>
219
- </tbody>
220
- </table>
221
-
222
- <h1 id="2_icons" class="styleguide">Icons and Logos</h1>
223
-
224
- <p class="lead">Includes over 250 glyphs in font format from the <a href="https://fortawesome.github.io/Font-Awesome/cheatsheet/">
225
- Font Awesome Icons set</a>. You can place Font Awesome icons just about anywhere with <code>i</code> tag.</p>
226
- <p class="styleguide">You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon&#39;s name.
227
- Font Awesome is designed to be used with inline elements (we like the <code class="styleguide">&lt;i&gt;</code> tag for brevity, but using a <code class="styleguide">&lt;span&gt;</code>
228
- is more semantically correct).</p><div class="codeExample">
229
- <div class="exampleOutput clear">
230
- <i class="fa fa-camera-retro"></i> fa-camera-retro
231
-
232
- </div>
233
- <div class="codeBlock">
234
- <div class="highlight">
235
- <pre><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro"</span><span class="nt">&gt;&lt;/i&gt;</span> fa-camera-retro</pre>
236
- </div>
237
- </div>
238
- </div>
239
- <p class="styleguide">To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase),
240
- <code>fa-2x</code>, <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.</p><div class="codeExample">
241
- <div class="exampleOutput clear">
242
- <i class="fa fa-camera-retro fa-lg"></i> fa-lg
243
- <i class="fa fa-camera-retro fa-2x"></i> fa-2x
244
- <i class="fa fa-camera-retro fa-3x"></i> fa-3x
245
- <i class="fa fa-camera-retro fa-4x"></i> fa-4x
246
- <i class="fa fa-camera-retro fa-5x"></i> fa-5x
247
-
248
- </div>
249
- <div class="codeBlock">
250
- <div class="highlight">
251
- <pre><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-lg"</span><span class="nt">&gt;&lt;/i&gt;</span> fa-lg
252
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-2x"</span><span class="nt">&gt;&lt;/i&gt;</span> fa-2x
253
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-3x"</span><span class="nt">&gt;&lt;/i&gt;</span> fa-3x
254
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-4x"</span><span class="nt">&gt;&lt;/i&gt;</span> fa-4x
255
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-5x"</span><span class="nt">&gt;&lt;/i&gt;</span> fa-5x</pre>
256
- </div>
257
- </div>
258
- </div>
259
- <p class="styleguide">Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code>
260
- for easy pull quotes or article icons.</p><div class="codeExample">
261
- <div class="exampleOutput clear">
262
- <i class="fa fa-quote-left fa-2x fa-pull-left fa-border"></i>
263
- ...tomorrow we will run faster, stretch out our arms farther...
264
- And then one fine morning— So we beat on, boats against the
265
- current, borne back ceaselessly into the past.
266
-
267
- </div>
268
- <div class="codeBlock">
269
- <div class="highlight">
270
- <pre><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-quote-left fa-2x fa-pull-left fa-border"</span><span class="nt">&gt;&lt;/i&gt;</span>
271
- ...tomorrow we will run faster, stretch out our arms farther...
272
- And then one fine morning— So we beat on, boats against the
273
- current, borne back ceaselessly into the past.</pre>
274
- </div>
275
- </div>
276
- </div>
277
-
278
- <h2>Central icons</h2>
279
- <div class="codeExample">
280
- <div class="exampleOutput clear">
281
- <div class="bs-glyphicons">
282
- <ul class="bs-glyphicons-list">
283
- <li>
284
- <i class="fa fa-th fa-2x"></i><br />
285
- <code>Dashboard</code>
286
- </li>
287
- <li>
288
- <i class="fa fa-user fa-2x"></i><br />
289
- <code>Accounts</code>
290
- </li>
291
- <li>
292
- <i class="fa fa-clock-o fa-2x"></i><br />
293
- <code>Bookings</code>
294
- </li>
295
- <li>
296
- <i class="fa fa-list-alt fa-2x"></i><br />
297
- <code>Courses</code>
298
- </li>
299
- <li>
300
- <i class="fa fa-folder-o fa-2x"></i><br />
301
- <code>Resources</code>
302
- </li>
303
- <li>
304
- <i class="fa fa-building fa-2x"></i><br />
305
- <code>Centres</code>
306
- </li>
307
- <li>
308
- <i class="fa fa-bullseye fa-2x"></i><br />
309
- <code>Equipment</code>
310
- </li>
311
- <li>
312
- <i class="fa fa-cube fa-2x"></i><br />
313
- <code>Products</code>
314
- </li>
315
- <li>
316
- <i class="fa fa-truck fa-2x"></i><br />
317
- <code>Orders</code>
318
- </li>
319
- <li>
320
- <i class="fa fa-check-square-o fa-2x"></i><br />
321
- <code>Tasks</code>
322
- </li>
323
- </ul>
324
- </div>
325
-
326
- </div>
327
- <div class="codeBlock">
328
- <div class="highlight">
329
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bs-glyphicons"</span><span class="nt">&gt;</span>
330
- <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"bs-glyphicons-list"</span><span class="nt">&gt;</span>
331
- <span class="nt">&lt;li&gt;</span>
332
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-th fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
333
- <span class="nt">&lt;code&gt;</span>Dashboard<span class="nt">&lt;/code&gt;</span>
334
- <span class="nt">&lt;/li&gt;</span>
335
- <span class="nt">&lt;li&gt;</span>
336
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-user fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
337
- <span class="nt">&lt;code&gt;</span>Accounts<span class="nt">&lt;/code&gt;</span>
338
- <span class="nt">&lt;/li&gt;</span>
339
- <span class="nt">&lt;li&gt;</span>
340
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-clock-o fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
341
- <span class="nt">&lt;code&gt;</span>Bookings<span class="nt">&lt;/code&gt;</span>
342
- <span class="nt">&lt;/li&gt;</span>
343
- <span class="nt">&lt;li&gt;</span>
344
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-list-alt fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
345
- <span class="nt">&lt;code&gt;</span>Courses<span class="nt">&lt;/code&gt;</span>
346
- <span class="nt">&lt;/li&gt;</span>
347
- <span class="nt">&lt;li&gt;</span>
348
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-folder-o fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
349
- <span class="nt">&lt;code&gt;</span>Resources<span class="nt">&lt;/code&gt;</span>
350
- <span class="nt">&lt;/li&gt;</span>
351
- <span class="nt">&lt;li&gt;</span>
352
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-building fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
353
- <span class="nt">&lt;code&gt;</span>Centres<span class="nt">&lt;/code&gt;</span>
354
- <span class="nt">&lt;/li&gt;</span>
355
- <span class="nt">&lt;li&gt;</span>
356
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-bullseye fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
357
- <span class="nt">&lt;code&gt;</span>Equipment<span class="nt">&lt;/code&gt;</span>
358
- <span class="nt">&lt;/li&gt;</span>
359
- <span class="nt">&lt;li&gt;</span>
360
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-cube fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
361
- <span class="nt">&lt;code&gt;</span>Products<span class="nt">&lt;/code&gt;</span>
362
- <span class="nt">&lt;/li&gt;</span>
363
- <span class="nt">&lt;li&gt;</span>
364
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-truck fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
365
- <span class="nt">&lt;code&gt;</span>Orders<span class="nt">&lt;/code&gt;</span>
366
- <span class="nt">&lt;/li&gt;</span>
367
- <span class="nt">&lt;li&gt;</span>
368
- <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-check-square-o fa-2x"</span><span class="nt">&gt;&lt;/i&gt;&lt;br</span> <span class="nt">/&gt;</span>
369
- <span class="nt">&lt;code&gt;</span>Tasks<span class="nt">&lt;/code&gt;</span>
370
- <span class="nt">&lt;/li&gt;</span>
371
- <span class="nt">&lt;/ul&gt;</span>
372
- <span class="nt">&lt;/div&gt;</span></pre>
373
- </div>
374
- </div>
375
- </div>
376
-
377
- <h1 id="3-typography" class="styleguide">Typography</h1>
378
-
379
- <p class="lead">Typography is a powerful tool. When used effectively, the
380
- right font commands attention, elicits emotions, and above all, creates a
381
- voice. It’s why typography is such an essential component of our
382
- brand’s visual identity.</p>
383
- <p class="styleguide">You can find most of the styles in <code>base/_typography.scss</code></p>
384
- <h2>Font</h2>
385
- <p class="styleguide">For this current project, we decided to move to the lighter, friendlier, and more
386
- legible, <a class="styleguide" href="http://www.wired.com/2014/07/how-googles-new-font-tries-to-anticipate-the-future/" title="http://www.wired.com/2014/07/how-googles-new-font-tries-to-anticipate-the-future/">Roboto</a>.</p>
387
- <h1 class="m-none">Roboto, Segoe UI, Fira Sans</h1>
388
-
389
- <p class="m-none">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
390
-
391
- <p class="m-none">abcdefghijklmnopqrstuvwxyz</p>
392
-
393
- <p class="m-none">01234567890!@#$%^&*()</p>
394
-
395
- <div class="codeBlock">
396
- <div class="highlight">
397
- <pre>
398
- font-family: "Roboto", "Segoe UI", "Fira Sans", "Droid Sans",
399
- "Helvetica Neue", "Arial", sans-serif;;
400
- font-weight: 300;
401
- </pre>
402
- </div>
403
- <p class="styleguide"></div></p>
404
- <h2>Headings</h2>
405
- <p class="styleguide">All HTML headings, <code class="styleguide">&lt;h1&gt;</code> through <code class="styleguide">&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code>
406
- classes are also available, for when you want to match the font styling of a heading but
407
- still want your text to be displayed inline.</p><div class="codeExample">
408
- <div class="exampleOutput clear">
409
- <h1>h1. Concrete heading</h1>
410
- <h2>h2. Concrete heading</h2>
411
- <h3>h3. Concrete heading</h3>
412
- <h4>h4. Concrete heading</h4>
413
- <h5>h5. Concrete heading</h5>
414
- <h6>h6. Concrete heading</h6>
415
-
416
- </div>
417
- <div class="codeBlock">
418
- <div class="highlight">
419
- <pre><span class="nt">&lt;h1&gt;</span>h1. Concrete heading<span class="nt">&lt;/h1&gt;</span>
420
- <span class="nt">&lt;h2&gt;</span>h2. Concrete heading<span class="nt">&lt;/h2&gt;</span>
421
- <span class="nt">&lt;h3&gt;</span>h3. Concrete heading<span class="nt">&lt;/h3&gt;</span>
422
- <span class="nt">&lt;h4&gt;</span>h4. Concrete heading<span class="nt">&lt;/h4&gt;</span>
423
- <span class="nt">&lt;h5&gt;</span>h5. Concrete heading<span class="nt">&lt;/h5&gt;</span>
424
- <span class="nt">&lt;h6&gt;</span>h6. Concrete heading<span class="nt">&lt;/h6&gt;</span></pre>
425
- </div>
426
- </div>
427
- </div>
428
- <p class="styleguide">Create lighter, secondary text in any heading with a generic <code class="styleguide">&lt;small&gt;</code> tag or the <code>.small</code> class.</p><div class="codeExample">
429
- <div class="exampleOutput clear">
430
- <h1>h1. Concrete heading <small>Secondary text</small></h1>
431
- <h2>h2. Concrete heading <small>Secondary text</small></h2>
432
- <h3>h3. Concrete heading <small>Secondary text</small></h3>
433
- <h4>h4. Concrete heading <small>Secondary text</small></h4>
434
- <h5>h5. Concrete heading <small>Secondary text</small></h5>
435
- <h6>h6. Concrete heading <small>Secondary text</small></h6>
436
-
437
- </div>
438
- <div class="codeBlock">
439
- <div class="highlight">
440
- <pre><span class="nt">&lt;h1&gt;</span>h1. Concrete heading <span class="nt">&lt;small&gt;</span>Secondary text<span class="nt">&lt;/small&gt;&lt;/h1&gt;</span>
441
- <span class="nt">&lt;h2&gt;</span>h2. Concrete heading <span class="nt">&lt;small&gt;</span>Secondary text<span class="nt">&lt;/small&gt;&lt;/h2&gt;</span>
442
- <span class="nt">&lt;h3&gt;</span>h3. Concrete heading <span class="nt">&lt;small&gt;</span>Secondary text<span class="nt">&lt;/small&gt;&lt;/h3&gt;</span>
443
- <span class="nt">&lt;h4&gt;</span>h4. Concrete heading <span class="nt">&lt;small&gt;</span>Secondary text<span class="nt">&lt;/small&gt;&lt;/h4&gt;</span>
444
- <span class="nt">&lt;h5&gt;</span>h5. Concrete heading <span class="nt">&lt;small&gt;</span>Secondary text<span class="nt">&lt;/small&gt;&lt;/h5&gt;</span>
445
- <span class="nt">&lt;h6&gt;</span>h6. Concrete heading <span class="nt">&lt;small&gt;</span>Secondary text<span class="nt">&lt;/small&gt;&lt;/h6&gt;</span></pre>
446
- </div>
447
- </div>
448
- </div>
449
-
450
- <div class="sub-heading">POCKET CENTRE</div>
451
-
452
- <h1 id="4-spacing" class="styleguide">Spacing</h1>
453
- <p class="styleguide">Margins and padding define the reading area of your page by separating main text from
454
- surrounding environment. They provide important visual relief in any document.
455
- With Concrete, we wanted to make the entire process of wireframing as flexible
456
- as possible. This meant giving the designers an ability to quickly add and strip
457
- margins and paddings on an element.</p>
458
- <h2>Example</h2>
459
- <p class="styleguide">This is a typical <code>h1</code> tag. As you can see, by default, there&#39;s a considerable
460
- amount of top margin.</p><div class="codeExample">
461
- <div class="exampleOutput clear">
462
- <h1>Example of header</h1>
463
-
464
- </div>
465
- <div class="codeBlock">
466
- <div class="highlight">
467
- <pre><span class="nt">&lt;h1&gt;</span>Example of header<span class="nt">&lt;/h1&gt;</span></pre>
468
- </div>
469
- </div>
470
- </div>
471
- <p class="styleguide">You can remove all margins, or you can also remove margins on a side by side basis.</p><div class="codeExample">
472
- <div class="exampleOutput clear">
473
- <h1 class="m-none">Example of header</h1>
474
- <h1 class="m-t-none">Example of header</h1>
475
- <h1 class="m-b-none">Example of header</h1>
476
- <h1 class="m-l-none">Example of header</h1>
477
- <h1 class="m-r-none">Example of header</h1>
478
-
479
- </div>
480
- <div class="codeBlock">
481
- <div class="highlight">
482
- <pre><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"m-none"</span><span class="nt">&gt;</span>Example of header<span class="nt">&lt;/h1&gt;</span>
483
- <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"m-t-none"</span><span class="nt">&gt;</span>Example of header<span class="nt">&lt;/h1&gt;</span>
484
- <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"m-b-none"</span><span class="nt">&gt;</span>Example of header<span class="nt">&lt;/h1&gt;</span>
485
- <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"m-l-none"</span><span class="nt">&gt;</span>Example of header<span class="nt">&lt;/h1&gt;</span>
486
- <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"m-r-none"</span><span class="nt">&gt;</span>Example of header<span class="nt">&lt;/h1&gt;</span></pre>
487
- </div>
488
- </div>
489
- </div>
490
- <div class="codeExample">
491
- <div class="exampleOutput clear">
492
- <div class="row">
493
- <div class="col-lg-2">
494
- <div class="widget red-bg">Default padding</div>
495
- </div>
496
- <div class="col-lg-2">
497
- <div class="widget red-bg p-none">No padding</div>
498
- </div>
499
- <div class="col-lg-2">
500
- <div class="widget red-bg p-t-none">No top padding</div>
501
- </div>
502
- <div class="col-lg-2">
503
- <div class="widget red-bg p-b-none">No bottom padding</div>
504
- </div>
505
- <div class="col-lg-2">
506
- <div class="widget red-bg p-r-none">No right padding</div>
507
- </div>
508
- <div class="col-lg-2">
509
- <div class="widget red-bg p-l-none">No left padding</div>
510
- </div>
511
- </div>
512
-
513
- </div>
514
- <div class="codeBlock">
515
- <div class="highlight">
516
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
517
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-2"</span><span class="nt">&gt;</span>
518
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget red-bg"</span><span class="nt">&gt;</span>Default padding<span class="nt">&lt;/div&gt;</span>
519
- <span class="nt">&lt;/div&gt;</span>
520
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-2"</span><span class="nt">&gt;</span>
521
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget red-bg p-none"</span><span class="nt">&gt;</span>No padding<span class="nt">&lt;/div&gt;</span>
522
- <span class="nt">&lt;/div&gt;</span>
523
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-2"</span><span class="nt">&gt;</span>
524
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget red-bg p-t-none"</span><span class="nt">&gt;</span>No top padding<span class="nt">&lt;/div&gt;</span>
525
- <span class="nt">&lt;/div&gt;</span>
526
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-2"</span><span class="nt">&gt;</span>
527
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget red-bg p-b-none"</span><span class="nt">&gt;</span>No bottom padding<span class="nt">&lt;/div&gt;</span>
528
- <span class="nt">&lt;/div&gt;</span>
529
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-2"</span><span class="nt">&gt;</span>
530
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget red-bg p-r-none"</span><span class="nt">&gt;</span>No right padding<span class="nt">&lt;/div&gt;</span>
531
- <span class="nt">&lt;/div&gt;</span>
532
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-2"</span><span class="nt">&gt;</span>
533
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"widget red-bg p-l-none"</span><span class="nt">&gt;</span>No left padding<span class="nt">&lt;/div&gt;</span>
534
- <span class="nt">&lt;/div&gt;</span>
535
- <span class="nt">&lt;/div&gt;</span></pre>
536
- </div>
537
- </div>
538
- </div>
539
- <p class="styleguide">At this stage, it&#39;s easy to see the pattern. <code>p-r-none</code> obviously
540
- refers to <code class="styleguide">padding-right-none</code> and that <code>m-r-none</code> <code class="styleguide">means margin-right-none</code>.</p>
541
- <h3>Complete list of margin and padding modifier classes</h3>
542
- <table class="styleguide"> <tr>
543
- <th>Padding class</th>
544
- <th>Definition</th>
545
- <th>Margin class</th>
546
- <th>Definition</th>
547
- </tr>
548
- <tr>
549
- <td><code>p-none</code></td>
550
- <td>No padding</td>
551
- <td><code>m-none</code></td>
552
- <td>No margin</td>
553
- </tr>
554
- <tr>
555
- <td><code>p-t-none</code></td>
556
- <td>No top padding</td>
557
- <td><code>m-t-none</code></td>
558
- <td>No top margin</td>
559
- </tr>
560
- <tr>
561
- <td><code>p-t-xxs</code></td>
562
- <td>Super extra small top padding</td>
563
- <td><code>m-t-xxs</code></td>
564
- <td>Super extra small top margin</td>
565
- </tr>
566
- <tr>
567
- <td><code>p-t-xs</code></td>
568
- <td>Extra small top padding</td>
569
- <td><code>m-t-xxs</code></td>
570
- <td>Extra small top margin</td>
571
- </tr>
572
- <tr>
573
- <td><code>p-t-sm</code></td>
574
- <td>Small top padding</td>
575
- <td><code>m-t-sm</code></td>
576
- <td>Small top margin</td>
577
- </tr>
578
- <tr>
579
- <td><code>p-t-m</code></td>
580
- <td>Medium top padding</td>
581
- <td><code>m-t-m</code></td>
582
- <td>Medium top margin</td>
583
- </tr>
584
- <tr>
585
- <td><code>p-r-none</code></td>
586
- <td>No right padding</td>
587
- <td><code>m-r-none</code></td>
588
- <td>No right margin</td>
589
- </tr>
590
- <tr>
591
- <td><code>p-r-xxs</code></td>
592
- <td>Super extra small right padding</td>
593
- <td><code>m-r-xxs</code></td>
594
- <td>Super extra small right margin</td>
595
- </tr>
596
- <tr>
597
- <td><code>p-r-xs</code></td>
598
- <td>Extra small right padding</td>
599
- <td><code>m-r-xxs</code></td>
600
- <td>Extra small right margin</td>
601
- </tr>
602
- <tr>
603
- <td><code>p-r-sm</code></td>
604
- <td>Small right padding</td>
605
- <td><code>m-r-sm</code></td>
606
- <td>Small right margin</td>
607
- </tr>
608
- <tr>
609
- <td><code>p-r-m</code></td>
610
- <td>Medium right padding</td>
611
- <td><code>m-r-m</code></td>
612
- <td>Medium right margin</td>
613
- </tr>
614
- <tr>
615
- <td><code>p-b-none</code></td>
616
- <td>No bottom padding</td>
617
- <td><code>m-b-none</code></td>
618
- <td>No bottom margin</td>
619
- </tr>
620
- <tr>
621
- <td><code>p-b-xxs</code></td>
622
- <td>Super extra smal bottom padding</td>
623
- <td><code>m-b-xxs</code></td>
624
- <td>Super extr small bottom margin</td>
625
- </tr>
626
- <tr>
627
- <td><code>p-b-xs</code></td>
628
- <td>Extra smallbottom padding</td>
629
- <td><code>m-b-xxs</code></td>
630
- <td>Extr small bottom margin</td>
631
- </tr>
632
- <tr>
633
- <td><code>p-b-sm</code></td>
634
- <td>Small botto padding</td>
635
- <td><code>m-b-sm</code></td>
636
- <td>Small botto margin</td>
637
- </tr>
638
- <tr>
639
- <td><code>p-b-m</code></td>
640
- <td>Medium bottom padding</td>
641
- <td><code>m-b-m</code></td>
642
- <td>Medium bottom margin</td>
643
- </tr>
644
- <tr>
645
- <td><code>p-l-none</code></td>
646
- <td>No left padding</td>
647
- <td><code>m-l-none</code></td>
648
- <td>No left margin</td>
649
- </tr>
650
- <tr>
651
- <td><code>p-l-xxs</code></td>
652
- <td>Super extra small left padding</td>
653
- <td><code>m-l-xxs</code></td>
654
- <td>Super extra small left margin</td>
655
- </tr>
656
- <tr>
657
- <td><code>p-l-xs</code></td>
658
- <td>Extra small left padding</td>
659
- <td><code>m-l-xxs</code></td>
660
- <td>Extra small left margin</td>
661
- </tr>
662
- <tr>
663
- <td><code>p-l-sm</code></td>
664
- <td>Small left padding</td>
665
- <td><code>m-l-sm</code></td>
666
- <td>Small left margin</td>
667
- </tr>
668
- <tr>
669
- <td><code>p-l-m</code></td>
670
- <td>Medium left padding</td>
671
- <td><code>m-l-m</code></td>
672
- <td>Medium left margin</td>
673
- </tr>
674
- </table>
675
- <h1 id="5-borders" class="styleguide">Borders</h1>
676
- <p class="styleguide">The <code>.border</code> class defines the border style and color with no width.
677
- Additional variations of this define the side(s) of the element</p><div class="codeExample">
678
- <div class="exampleOutput clear">
679
- <div class="row">
680
- <div class="col-lg-3">
681
- <div class="box b-t">
682
- Top border
683
- </div>
684
- </div>
685
- <div class="col-lg-3">
686
- <div class="box b-r">
687
- Right border only
688
- </div>
689
- </div>
690
- <div class="col-lg-3">
691
- <div class="box b-b">
692
- Bottom border only
693
- </div>
694
- </div>
695
- <div class="col-lg-3">
696
- <div class="box b-l">
697
- Left border only
698
- </div>
699
- </div>
700
- <div class="col-lg-3">
701
- <div class="box b-none">
702
- No border
703
- </div>
704
- </div>
705
- <div class="col-lg-3">
706
- <div class="box boxed b-t-none">
707
- No top border
708
- </div>
709
- </div>
710
- <div class="col-lg-3">
711
- <div class="box b-tb">
712
- Top and bottom border only
713
- </div>
714
- </div>
715
- <div class="col-lg-3">
716
- <div class="box b-lr">
717
- Left and right border only
718
- </div>
719
- </div>
720
- </div>
721
-
722
- </div>
723
- <div class="codeBlock">
724
- <div class="highlight">
725
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
726
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
727
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-t"</span><span class="nt">&gt;</span>
728
- Top border
729
- <span class="nt">&lt;/div&gt;</span>
730
- <span class="nt">&lt;/div&gt;</span>
731
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
732
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-r"</span><span class="nt">&gt;</span>
733
- Right border only
734
- <span class="nt">&lt;/div&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">"col-lg-3"</span><span class="nt">&gt;</span>
737
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-b"</span><span class="nt">&gt;</span>
738
- Bottom border only
739
- <span class="nt">&lt;/div&gt;</span>
740
- <span class="nt">&lt;/div&gt;</span>
741
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
742
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-l"</span><span class="nt">&gt;</span>
743
- Left border only
744
- <span class="nt">&lt;/div&gt;</span>
745
- <span class="nt">&lt;/div&gt;</span>
746
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
747
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-none"</span><span class="nt">&gt;</span>
748
- No border
749
- <span class="nt">&lt;/div&gt;</span>
750
- <span class="nt">&lt;/div&gt;</span>
751
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
752
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box boxed b-t-none"</span><span class="nt">&gt;</span>
753
- No top border
754
- <span class="nt">&lt;/div&gt;</span>
755
- <span class="nt">&lt;/div&gt;</span>
756
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
757
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-tb"</span><span class="nt">&gt;</span>
758
- Top and bottom border only
759
- <span class="nt">&lt;/div&gt;</span>
760
- <span class="nt">&lt;/div&gt;</span>
761
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
762
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box b-lr"</span><span class="nt">&gt;</span>
763
- Left and right border only
764
- <span class="nt">&lt;/div&gt;</span>
765
- <span class="nt">&lt;/div&gt;</span>
766
- <span class="nt">&lt;/div&gt;</span></pre>
767
- </div>
768
- </div>
769
- </div>
770
-
771
- <h1 id="helpers" class="styleguide">Helpers</h1>
772
-
773
- <h2>Contextual colours</h2>
774
- <p class="styleguide">Convey meaning through color with a handful of emphasis utility classes.
775
- These may also be applied to links and will darken on hover just like our default link
776
- styles.</p><div class="codeExample">
777
- <div class="exampleOutput clear">
778
- <p class="text-info">Adele's awesome. Take that, Kanye. </p>
779
- <p class="text-success">Good job, Adele!</p>
780
- <p class="text-warning">Is that Kanye West behind you, Adele?</p>
781
- <p class="text-danger">Yes, it's Kanye West! Run, Adele, run!</p>
782
-
783
- <p class="text-purple">In use</p>
784
- <p class="text-navy">text-navy</p>
785
-
786
- <p class="text-orange">Inspection</p>
787
- <p class="text-pink">Repair</p>
788
-
789
- </div>
790
- <div class="codeBlock">
791
- <div class="highlight">
792
- <pre><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">&gt;</span>Adele's awesome. Take that, Kanye. <span class="nt">&lt;/p&gt;</span>
793
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">&gt;</span>Good job, Adele!<span class="nt">&lt;/p&gt;</span>
794
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">&gt;</span>Is that Kanye West behind you, Adele?<span class="nt">&lt;/p&gt;</span>
795
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">&gt;</span>Yes, it's Kanye West! Run, Adele, run!<span class="nt">&lt;/p&gt;</span>
796
-
797
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-purple"</span><span class="nt">&gt;</span>In use<span class="nt">&lt;/p&gt;</span>
798
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-navy"</span><span class="nt">&gt;</span>text-navy<span class="nt">&lt;/p&gt;</span>
799
-
800
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-orange"</span><span class="nt">&gt;</span>Inspection<span class="nt">&lt;/p&gt;</span>
801
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-pink"</span><span class="nt">&gt;</span>Repair<span class="nt">&lt;/p&gt;</span></pre>
802
- </div>
803
- </div>
804
- </div>
805
- <p class="styleguide">Due to our fascination with colour names, we ended up creating aliases
806
- for the following class modifiers. We don&#39;t recommend using the colour aliases.
807
- We are currently working on deprecating these aliases in future releases.</p>
808
- <hr>
809
- <table class="styleguide"> <tr>
810
- <th>Class modifier</th>
811
- <th>Alias</th>
812
- </tr>
813
- <tr>
814
- <td><code>text-warning</code></td>
815
- <td><code>text-yellow</code>, <code>text-mustard</code></td>
816
- </tr>
817
- <tr>
818
- <td><code>text-danger</code></td>
819
- <td><code>text-red</code></td>
820
- </tr>
821
- <tr>
822
- <td><code>text-success</code></td>
823
- <td><code>text-green</code></td>
824
- </tr>
825
- </table><p class="styleguide">We also created a modifier class that you can use to dilute the opacity of a type element.</p><div class="codeExample">
826
- <div class="exampleOutput clear">
827
- <p class="text-info">Adele's awesome. Take that, Kanye. </p>
828
- <p class="text-info text-muted">Adele's awesome. Take that, Kanye. </p>
829
-
830
- <p class="text-success">Good job, Adele!</p>
831
- <p class="text-success text-muted">Good job, Adele!</p>
832
-
833
- </div>
834
- <div class="codeBlock">
835
- <div class="highlight">
836
- <pre><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">&gt;</span>Adele's awesome. Take that, Kanye. <span class="nt">&lt;/p&gt;</span>
837
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-info text-muted"</span><span class="nt">&gt;</span>Adele's awesome. Take that, Kanye. <span class="nt">&lt;/p&gt;</span>
838
-
839
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">&gt;</span>Good job, Adele!<span class="nt">&lt;/p&gt;</span>
840
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-success text-muted"</span><span class="nt">&gt;</span>Good job, Adele!<span class="nt">&lt;/p&gt;</span></pre>
841
- </div>
842
- </div>
843
- </div>
844
-
845
- <h2>Alignment classes</h2>
846
- <p class="styleguide">Easily realign text to components with text alignment classes.</p><div class="codeExample">
847
- <div class="exampleOutput clear">
848
- <p class="text-left">Left aligned text.</p>
849
- <p class="text-center">Center aligned text.</p>
850
- <p class="text-right">Right aligned text.</p>
851
- <p class="text-justify">Justified text.</p>
852
- <p class="text-nowrap">No wrap text.</p>
853
-
854
- </div>
855
- <div class="codeBlock">
856
- <div class="highlight">
857
- <pre><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-left"</span><span class="nt">&gt;</span>Left aligned text.<span class="nt">&lt;/p&gt;</span>
858
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>Center aligned text.<span class="nt">&lt;/p&gt;</span>
859
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">&gt;</span>Right aligned text.<span class="nt">&lt;/p&gt;</span>
860
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-justify"</span><span class="nt">&gt;</span>Justified text.<span class="nt">&lt;/p&gt;</span>
861
- <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-nowrap"</span><span class="nt">&gt;</span>No wrap text.<span class="nt">&lt;/p&gt;</span></pre>
862
- </div>
863
- </div>
864
- </div>
865
-
866
- <h2>Contextual backgrounds</h2>
867
- <p class="styleguide">Similar to the contextual text color classes, easily set the background of an
868
- element to any contextual class. Anchor components will darken on hover, just like the text classes.</p><div class="codeExample">
869
- <div class="exampleOutput clear">
870
- <div class="row">
871
- <div class="col-lg-3">
872
- <div class="swatch navy-bg">Navy</div>
873
- </div>
874
-
875
- <div class="col-lg-3">
876
- <div class="swatch yellow-bg">Yellow</div>
877
- </div>
878
-
879
- <div class="col-lg-3">
880
- <div class="swatch red-bg">Red</div>
881
- </div>
882
-
883
- <div class="col-lg-3">
884
- <div class="swatch red-inverted-bg">Red (inv)</div>
885
- </div>
886
-
887
- <div class="col-lg-3">
888
- <div class="swatch grey-bg">Grey</div>
889
- </div>
890
-
891
- <div class="col-lg-3">
892
- <div class="swatch lighter-grey-bg">Grey lighter</div>
893
- </div>
894
-
895
- <div class="col-lg-3">
896
- <div class="swatch gray-bg">Gray</div>
897
- </div>
898
-
899
- <div class="col-lg-3">
900
- <div class="swatch info-bg">Info</div>
901
- </div>
902
-
903
- <div class="col-lg-3">
904
- <div class="swatch green-bg">Green</div>
905
- </div>
906
- </div>
907
-
908
-
909
- </div>
910
- <div class="codeBlock">
911
- <div class="highlight">
912
- <pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
913
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
914
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch navy-bg"</span><span class="nt">&gt;</span>Navy<span class="nt">&lt;/div&gt;</span>
915
- <span class="nt">&lt;/div&gt;</span>
916
-
917
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
918
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch yellow-bg"</span><span class="nt">&gt;</span>Yellow<span class="nt">&lt;/div&gt;</span>
919
- <span class="nt">&lt;/div&gt;</span>
920
-
921
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
922
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch red-bg"</span><span class="nt">&gt;</span>Red<span class="nt">&lt;/div&gt;</span>
923
- <span class="nt">&lt;/div&gt;</span>
924
-
925
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
926
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch red-inverted-bg"</span><span class="nt">&gt;</span>Red (inv)<span class="nt">&lt;/div&gt;</span>
927
- <span class="nt">&lt;/div&gt;</span>
928
-
929
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
930
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch grey-bg"</span><span class="nt">&gt;</span>Grey<span class="nt">&lt;/div&gt;</span>
931
- <span class="nt">&lt;/div&gt;</span>
932
-
933
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
934
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch lighter-grey-bg"</span><span class="nt">&gt;</span>Grey lighter<span class="nt">&lt;/div&gt;</span>
935
- <span class="nt">&lt;/div&gt;</span>
936
-
937
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
938
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch gray-bg"</span><span class="nt">&gt;</span>Gray<span class="nt">&lt;/div&gt;</span>
939
- <span class="nt">&lt;/div&gt;</span>
940
-
941
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
942
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch info-bg"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/div&gt;</span>
943
- <span class="nt">&lt;/div&gt;</span>
944
-
945
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
946
- <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"swatch green-bg"</span><span class="nt">&gt;</span>Green<span class="nt">&lt;/div&gt;</span>
947
- <span class="nt">&lt;/div&gt;</span>
948
- <span class="nt">&lt;/div&gt;</span></pre>
949
- </div>
950
- </div>
951
- </div>
952
- </div>
953
- </div>
954
- </div>
955
-
956
- <footer class="hgt-footer">
957
- 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>
958
- </footer>
959
- </div>
960
-
961
- <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
962
- <script src="scripts/vendor/jquery.waypoints.min.js"></script>
963
- <script src="scripts/vendor/sticky.min.js"></script>
964
- <script src="scripts/vendor/infinite.min.js"></script>
965
- <script src="scripts/hgt.js"></script>
966
-
967
-
968
-
969
- <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
970
-
971
- <script type="text/javascript" src="../node_modules/jqueryui/jquery-ui.min.js"></script>
972
-
973
- <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
974
-
975
- <script type="text/javascript" src="../node_modules/icheck/icheck.min.js"></script>
976
-
977
- <script type="text/javascript" src="../styleguide-dep/js/checkbox.js"></script>
978
-
979
- <script type="text/javascript" src="../styleguide-dep/js/custom.js"></script>
980
-
981
-
982
-
983
-
984
- </body>
985
- </html>