cacao-css 3.21.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (356) hide show
  1. package/.prettierignore +10 -0
  2. package/.prettierrc.json +13 -0
  3. package/CHANGELOG.md +112 -104
  4. package/LICENSE +1 -1
  5. package/README.md +8 -472
  6. package/imports.css +282 -0
  7. package/package.json +2 -51
  8. package/src/aspect/aspect.css +23 -0
  9. package/src/base/base.css +44 -0
  10. package/src/config.css +8 -0
  11. package/src/display/core/align.css +15 -0
  12. package/src/display/core/display.css +33 -0
  13. package/src/display/core/flex.css +19 -0
  14. package/src/display/core/justify.css +23 -0
  15. package/src/display/core/order.css +23 -0
  16. package/src/display/lg/align.css +17 -0
  17. package/src/display/lg/display.css +25 -0
  18. package/src/display/lg/flex.css +21 -0
  19. package/src/display/lg/justify.css +25 -0
  20. package/src/display/lg/order.css +25 -0
  21. package/src/display/md/align.css +17 -0
  22. package/src/display/md/display.css +25 -0
  23. package/src/display/md/flex.css +21 -0
  24. package/src/display/md/justify.css +25 -0
  25. package/src/display/md/order.css +25 -0
  26. package/src/display/sm/align.css +17 -0
  27. package/src/display/sm/display.css +25 -0
  28. package/src/display/sm/flex.css +21 -0
  29. package/src/display/sm/justify.css +25 -0
  30. package/src/display/sm/order.css +25 -0
  31. package/src/display/xl/align.css +17 -0
  32. package/src/display/xl/display.css +25 -0
  33. package/src/display/xl/flex.css +21 -0
  34. package/src/display/xl/justify.css +25 -0
  35. package/src/display/xl/order.css +25 -0
  36. package/src/embed/embed.css +21 -0
  37. package/src/fit/fit.css +11 -0
  38. package/src/{css/components/header/header.css → grid/core/col-1.css} +3 -6
  39. package/src/grid/core/col-10.css +43 -0
  40. package/src/grid/core/col-11.css +47 -0
  41. package/src/grid/core/col-12.css +51 -0
  42. package/src/grid/core/col-2.css +11 -0
  43. package/src/{css/components/breadcrumb/breadcrumb.css → grid/core/col-3.css} +8 -9
  44. package/src/grid/core/col-4.css +19 -0
  45. package/src/grid/core/col-5.css +23 -0
  46. package/src/grid/core/col-6.css +27 -0
  47. package/src/grid/core/col-7.css +31 -0
  48. package/src/grid/core/col-8.css +35 -0
  49. package/src/grid/core/col-9.css +39 -0
  50. package/src/grid/grid.css +19 -0
  51. package/src/{css/components/form/required.css → grid/lg/col-1.css} +5 -5
  52. package/src/grid/lg/col-10.css +45 -0
  53. package/src/grid/lg/col-11.css +49 -0
  54. package/src/grid/lg/col-12.css +53 -0
  55. package/src/grid/lg/col-2.css +13 -0
  56. package/src/grid/lg/col-3.css +17 -0
  57. package/src/grid/lg/col-4.css +21 -0
  58. package/src/grid/lg/col-5.css +25 -0
  59. package/src/grid/lg/col-6.css +29 -0
  60. package/src/grid/lg/col-7.css +33 -0
  61. package/src/grid/lg/col-8.css +37 -0
  62. package/src/grid/lg/col-9.css +41 -0
  63. package/src/{css/components/navigation/bar.css → grid/md/col-1.css} +5 -7
  64. package/src/grid/md/col-10.css +45 -0
  65. package/src/grid/md/col-11.css +49 -0
  66. package/src/grid/md/col-12.css +53 -0
  67. package/src/grid/md/col-2.css +13 -0
  68. package/src/grid/md/col-3.css +17 -0
  69. package/src/grid/md/col-4.css +21 -0
  70. package/src/grid/md/col-5.css +25 -0
  71. package/src/grid/md/col-6.css +29 -0
  72. package/src/grid/md/col-7.css +33 -0
  73. package/src/grid/md/col-8.css +37 -0
  74. package/src/grid/md/col-9.css +41 -0
  75. package/src/grid/sm/col-1.css +9 -0
  76. package/src/grid/sm/col-10.css +45 -0
  77. package/src/grid/sm/col-11.css +49 -0
  78. package/src/grid/sm/col-12.css +53 -0
  79. package/src/grid/sm/col-2.css +13 -0
  80. package/src/grid/sm/col-3.css +17 -0
  81. package/src/grid/sm/col-4.css +21 -0
  82. package/src/grid/sm/col-5.css +25 -0
  83. package/src/grid/sm/col-6.css +29 -0
  84. package/src/grid/sm/col-7.css +33 -0
  85. package/src/grid/sm/col-8.css +37 -0
  86. package/src/grid/sm/col-9.css +41 -0
  87. package/src/grid/xl/col-1.css +9 -0
  88. package/src/grid/xl/col-10.css +45 -0
  89. package/src/grid/xl/col-11.css +49 -0
  90. package/src/grid/xl/col-12.css +53 -0
  91. package/src/grid/xl/col-2.css +13 -0
  92. package/src/grid/xl/col-3.css +17 -0
  93. package/src/grid/xl/col-4.css +21 -0
  94. package/src/grid/xl/col-5.css +25 -0
  95. package/src/grid/xl/col-6.css +29 -0
  96. package/src/grid/xl/col-7.css +33 -0
  97. package/src/grid/xl/col-8.css +37 -0
  98. package/src/grid/xl/col-9.css +41 -0
  99. package/src/gutter/core/all.css +31 -0
  100. package/src/gutter/core/horizontal.css +31 -0
  101. package/src/gutter/core/vertical.css +31 -0
  102. package/src/gutter/lg/all.css +33 -0
  103. package/src/gutter/lg/horizontal.css +33 -0
  104. package/src/gutter/lg/vertical.css +33 -0
  105. package/src/gutter/md/all.css +33 -0
  106. package/src/gutter/md/horizontal.css +33 -0
  107. package/src/gutter/md/vertical.css +33 -0
  108. package/src/gutter/sm/all.css +33 -0
  109. package/src/gutter/sm/horizontal.css +33 -0
  110. package/src/gutter/sm/vertical.css +33 -0
  111. package/src/gutter/xl/all.css +33 -0
  112. package/src/gutter/xl/horizontal.css +33 -0
  113. package/src/gutter/xl/vertical.css +33 -0
  114. package/src/image/image.css +30 -0
  115. package/src/links/links.css +18 -0
  116. package/src/margin/core/all.css +27 -0
  117. package/src/margin/core/bottom.css +27 -0
  118. package/src/margin/core/end.css +27 -0
  119. package/src/margin/core/horizontal.css +33 -0
  120. package/src/margin/core/start.css +27 -0
  121. package/src/margin/core/top.css +27 -0
  122. package/src/margin/core/vertical.css +33 -0
  123. package/src/margin/lg/all.css +29 -0
  124. package/src/margin/lg/bottom.css +29 -0
  125. package/src/margin/lg/end.css +29 -0
  126. package/src/margin/lg/horizontal.css +35 -0
  127. package/src/margin/lg/start.css +29 -0
  128. package/src/margin/lg/top.css +29 -0
  129. package/src/margin/lg/vertical.css +35 -0
  130. package/src/margin/md/all.css +29 -0
  131. package/src/margin/md/bottom.css +29 -0
  132. package/src/margin/md/end.css +29 -0
  133. package/src/margin/md/horizontal.css +35 -0
  134. package/src/margin/md/start.css +29 -0
  135. package/src/margin/md/top.css +29 -0
  136. package/src/margin/md/vertical.css +35 -0
  137. package/src/margin/sm/all.css +29 -0
  138. package/src/margin/sm/bottom.css +29 -0
  139. package/src/margin/sm/end.css +29 -0
  140. package/src/margin/sm/horizontal.css +35 -0
  141. package/src/margin/sm/start.css +29 -0
  142. package/src/margin/sm/top.css +29 -0
  143. package/src/margin/sm/vertical.css +35 -0
  144. package/src/margin/xl/all.css +29 -0
  145. package/src/margin/xl/bottom.css +29 -0
  146. package/src/margin/xl/end.css +29 -0
  147. package/src/margin/xl/horizontal.css +35 -0
  148. package/src/margin/xl/start.css +29 -0
  149. package/src/margin/xl/top.css +29 -0
  150. package/src/margin/xl/vertical.css +35 -0
  151. package/src/{css/components/form/success.css → padding/core/all.css} +21 -8
  152. package/src/padding/core/bottom.css +27 -0
  153. package/src/padding/core/end.css +27 -0
  154. package/src/padding/core/horizontal.css +33 -0
  155. package/src/padding/core/start.css +27 -0
  156. package/src/padding/core/top.css +27 -0
  157. package/src/padding/core/vertical.css +33 -0
  158. package/src/padding/lg/all.css +29 -0
  159. package/src/padding/lg/bottom.css +29 -0
  160. package/src/padding/lg/end.css +29 -0
  161. package/src/padding/lg/horizontal.css +35 -0
  162. package/src/padding/lg/start.css +29 -0
  163. package/src/padding/lg/top.css +29 -0
  164. package/src/padding/lg/vertical.css +35 -0
  165. package/src/padding/md/all.css +29 -0
  166. package/src/padding/md/bottom.css +29 -0
  167. package/src/padding/md/end.css +29 -0
  168. package/src/padding/md/horizontal.css +35 -0
  169. package/src/padding/md/start.css +29 -0
  170. package/src/padding/md/top.css +29 -0
  171. package/src/padding/md/vertical.css +35 -0
  172. package/src/padding/sm/all.css +29 -0
  173. package/src/padding/sm/bottom.css +29 -0
  174. package/src/padding/sm/end.css +29 -0
  175. package/src/padding/sm/horizontal.css +35 -0
  176. package/src/padding/sm/start.css +29 -0
  177. package/src/padding/sm/top.css +29 -0
  178. package/src/padding/sm/vertical.css +35 -0
  179. package/src/padding/xl/all.css +29 -0
  180. package/src/padding/xl/bottom.css +29 -0
  181. package/src/padding/xl/end.css +29 -0
  182. package/src/padding/xl/horizontal.css +34 -0
  183. package/src/padding/xl/start.css +29 -0
  184. package/src/padding/xl/top.css +29 -0
  185. package/src/padding/xl/vertical.css +35 -0
  186. package/src/reset/reset.css +47 -0
  187. package/src/{css/utils/background/background.css → size/core/size.css} +7 -1
  188. package/src/size/lg/size.css +13 -0
  189. package/src/size/md/size.css +13 -0
  190. package/src/{css/components/content/content.css → size/sm/size.css} +7 -12
  191. package/src/size/xl/size.css +13 -0
  192. package/src/spacing/spacing.css +15 -0
  193. package/src/{css/components/footer/footer.css → typography/align.css} +4 -3
  194. package/src/typography/transform.css +15 -0
  195. package/src/{css/components/form/label.css → typography/weight.css} +5 -5
  196. package/gulp/config.js +0 -41
  197. package/gulp/css.js +0 -147
  198. package/gulp/utilities.js +0 -150
  199. package/gulpfile.js +0 -37
  200. package/src/css/base/README.md +0 -12
  201. package/src/css/base/base.css +0 -145
  202. package/src/css/base/code.css +0 -36
  203. package/src/css/base/forms.css +0 -67
  204. package/src/css/base/index.css +0 -7
  205. package/src/css/base/print.css +0 -77
  206. package/src/css/base/tables.css +0 -38
  207. package/src/css/base/typography.css +0 -270
  208. package/src/css/components/arrange/arrange.css +0 -157
  209. package/src/css/components/arrange/index.css +0 -1
  210. package/src/css/components/breadcrumb/index.css +0 -1
  211. package/src/css/components/button/README.md +0 -88
  212. package/src/css/components/button/button.css +0 -142
  213. package/src/css/components/button/index.css +0 -1
  214. package/src/css/components/constrain/README.md +0 -65
  215. package/src/css/components/constrain/constrain.css +0 -162
  216. package/src/css/components/constrain/image.css +0 -29
  217. package/src/css/components/constrain/index.css +0 -2
  218. package/src/css/components/container/README.md +0 -28
  219. package/src/css/components/container/container.css +0 -48
  220. package/src/css/components/container/index.css +0 -1
  221. package/src/css/components/content/index.css +0 -1
  222. package/src/css/components/flexembed/README.md +0 -65
  223. package/src/css/components/flexembed/flexembed.css +0 -82
  224. package/src/css/components/flexembed/index.css +0 -1
  225. package/src/css/components/footer/index.css +0 -1
  226. package/src/css/components/form/error.css +0 -21
  227. package/src/css/components/form/index.css +0 -6
  228. package/src/css/components/form/selectmenu.css +0 -92
  229. package/src/css/components/form/textinput.css +0 -60
  230. package/src/css/components/grid/README.md +0 -107
  231. package/src/css/components/grid/grid.css +0 -150
  232. package/src/css/components/grid/index.css +0 -1
  233. package/src/css/components/header/index.css +0 -1
  234. package/src/css/components/image/README.md +0 -66
  235. package/src/css/components/image/caption.css +0 -13
  236. package/src/css/components/image/image.css +0 -59
  237. package/src/css/components/image/index.css +0 -3
  238. package/src/css/components/image/wrapper.css +0 -44
  239. package/src/css/components/index.css +0 -17
  240. package/src/css/components/list/README.md +0 -36
  241. package/src/css/components/list/columns.css +0 -42
  242. package/src/css/components/list/index.css +0 -2
  243. package/src/css/components/list/list.css +0 -162
  244. package/src/css/components/media/README.md +0 -43
  245. package/src/css/components/media/index.css +0 -1
  246. package/src/css/components/media/media.css +0 -161
  247. package/src/css/components/message/index.css +0 -1
  248. package/src/css/components/message/message.css +0 -42
  249. package/src/css/components/navigation/README.md +0 -110
  250. package/src/css/components/navigation/dropdown.css +0 -165
  251. package/src/css/components/navigation/footer.css +0 -59
  252. package/src/css/components/navigation/index.css +0 -7
  253. package/src/css/components/navigation/mainnav.css +0 -73
  254. package/src/css/components/navigation/responsive-overlay.css +0 -129
  255. package/src/css/components/navigation/responsive-pushdown.css +0 -131
  256. package/src/css/components/navigation/sidebar.css +0 -44
  257. package/src/css/components/navigation/small-screen-button.css +0 -99
  258. package/src/css/components/pagination/index.css +0 -1
  259. package/src/css/components/pagination/pagination.css +0 -41
  260. package/src/css/components/triangle/README.md +0 -22
  261. package/src/css/components/triangle/index.css +0 -1
  262. package/src/css/components/triangle/triangle.css +0 -59
  263. package/src/css/config.css +0 -18
  264. package/src/css/main.css +0 -4
  265. package/src/css/utils/align/align.css +0 -26
  266. package/src/css/utils/align/index.css +0 -1
  267. package/src/css/utils/background/index.css +0 -1
  268. package/src/css/utils/content/content.css +0 -11
  269. package/src/css/utils/content/index.css +0 -1
  270. package/src/css/utils/display/display-responsive.css +0 -52
  271. package/src/css/utils/display/display.css +0 -71
  272. package/src/css/utils/display/index.css +0 -2
  273. package/src/css/utils/flex/flex-responsive.css +0 -759
  274. package/src/css/utils/flex/flex.css +0 -253
  275. package/src/css/utils/flex/index.css +0 -2
  276. package/src/css/utils/image/image.css +0 -27
  277. package/src/css/utils/image/index.css +0 -1
  278. package/src/css/utils/index.css +0 -16
  279. package/src/css/utils/layout/index.css +0 -1
  280. package/src/css/utils/layout/layout.css +0 -71
  281. package/src/css/utils/link/index.css +0 -1
  282. package/src/css/utils/link/link.css +0 -95
  283. package/src/css/utils/margin/gutters.css +0 -120
  284. package/src/css/utils/margin/index.css +0 -21
  285. package/src/css/utils/margin/marg-bottom-lg.css +0 -35
  286. package/src/css/utils/margin/marg-bottom-md.css +0 -35
  287. package/src/css/utils/margin/marg-bottom-sm.css +0 -35
  288. package/src/css/utils/margin/marg-bottom.css +0 -34
  289. package/src/css/utils/margin/marg-left-lg.css +0 -35
  290. package/src/css/utils/margin/marg-left-md.css +0 -35
  291. package/src/css/utils/margin/marg-left-sm.css +0 -35
  292. package/src/css/utils/margin/marg-left.css +0 -34
  293. package/src/css/utils/margin/marg-right-lg.css +0 -35
  294. package/src/css/utils/margin/marg-right-md.css +0 -35
  295. package/src/css/utils/margin/marg-right-sm.css +0 -35
  296. package/src/css/utils/margin/marg-right.css +0 -34
  297. package/src/css/utils/margin/marg-top-lg.css +0 -35
  298. package/src/css/utils/margin/marg-top-md.css +0 -35
  299. package/src/css/utils/margin/marg-top-sm.css +0 -35
  300. package/src/css/utils/margin/marg-top.css +0 -34
  301. package/src/css/utils/margin/spaced-lg.css +0 -41
  302. package/src/css/utils/margin/spaced-md.css +0 -41
  303. package/src/css/utils/margin/spaced-sm.css +0 -41
  304. package/src/css/utils/margin/spaced.css +0 -40
  305. package/src/css/utils/padding/gutters-lg.css +0 -40
  306. package/src/css/utils/padding/gutters-md.css +0 -40
  307. package/src/css/utils/padding/gutters-sm.css +0 -40
  308. package/src/css/utils/padding/gutters.css +0 -39
  309. package/src/css/utils/padding/index.css +0 -28
  310. package/src/css/utils/padding/pad-bottom-lg.css +0 -35
  311. package/src/css/utils/padding/pad-bottom-md.css +0 -35
  312. package/src/css/utils/padding/pad-bottom-sm.css +0 -35
  313. package/src/css/utils/padding/pad-bottom.css +0 -34
  314. package/src/css/utils/padding/pad-left-lg.css +0 -35
  315. package/src/css/utils/padding/pad-left-md.css +0 -35
  316. package/src/css/utils/padding/pad-left-sm.css +0 -35
  317. package/src/css/utils/padding/pad-left.css +0 -33
  318. package/src/css/utils/padding/pad-right-lg.css +0 -35
  319. package/src/css/utils/padding/pad-right-md.css +0 -35
  320. package/src/css/utils/padding/pad-right-sm.css +0 -35
  321. package/src/css/utils/padding/pad-right.css +0 -33
  322. package/src/css/utils/padding/pad-top-lg.css +0 -35
  323. package/src/css/utils/padding/pad-top-md.css +0 -35
  324. package/src/css/utils/padding/pad-top-sm.css +0 -35
  325. package/src/css/utils/padding/pad-top.css +0 -34
  326. package/src/css/utils/padding/spaced-lg.css +0 -41
  327. package/src/css/utils/padding/spaced-md.css +0 -41
  328. package/src/css/utils/padding/spaced-sm.css +0 -41
  329. package/src/css/utils/padding/spaced.css +0 -40
  330. package/src/css/utils/position/index.css +0 -1
  331. package/src/css/utils/position/position.css +0 -28
  332. package/src/css/utils/pull/index.css +0 -4
  333. package/src/css/utils/pull/pull-lg.css +0 -130
  334. package/src/css/utils/pull/pull-md.css +0 -130
  335. package/src/css/utils/pull/pull-sm.css +0 -130
  336. package/src/css/utils/pull/pull.css +0 -122
  337. package/src/css/utils/push/index.css +0 -4
  338. package/src/css/utils/push/push-lg.css +0 -130
  339. package/src/css/utils/push/push-md.css +0 -130
  340. package/src/css/utils/push/push-sm.css +0 -130
  341. package/src/css/utils/push/push.css +0 -122
  342. package/src/css/utils/radius/index.css +0 -1
  343. package/src/css/utils/radius/radius.css +0 -35
  344. package/src/css/utils/size/height.css +0 -25
  345. package/src/css/utils/size/index.css +0 -6
  346. package/src/css/utils/size/size-lg.css +0 -184
  347. package/src/css/utils/size/size-md.css +0 -184
  348. package/src/css/utils/size/size-sm.css +0 -184
  349. package/src/css/utils/size/size-xs.css +0 -184
  350. package/src/css/utils/size/size.css +0 -182
  351. package/src/css/utils/size/width.css +0 -25
  352. package/src/css/utils/typography/index.css +0 -4
  353. package/src/css/utils/typography/typography-lg.css +0 -17
  354. package/src/css/utils/typography/typography-md.css +0 -17
  355. package/src/css/utils/typography/typography-sm.css +0 -17
  356. package/src/css/utils/typography/typography.css +0 -241
package/src/css/base/typography.css DELETED
@@ -1,270 +0,0 @@
1
- /* ==========================================================================
2
- Typography
3
- ========================================================================== */
4
-
5
- /**
6
- * Note: This sets the <html> element's font-size to 62.5%, which
7
- * equals 10px (for default browser font size of 16px).
8
- * This allows rem units to be calculated more intuitively.
9
- *
10
- * Font size strategy
11
- * - <html> element font size set as a percentage so that font sizes are accessible
12
- * if the user resizes the text size in their browser.
13
- * - Font size set on the <body> tag is a rem. A direct relation to the HTML element.
14
- * - Font sizes for components should be rem. For example, the font size of the navigation
15
- * should be set as a rem. The relation is to the <html> tag, which by default is 10px.
16
- * - Font sizes of elements within a component should be em to be relative to the component.
17
- * For example, a navigation link within the navigation menu would be set to an em font size,
18
- * which would then be in relation to the navigation component (assuming that a font size in rem
19
- * was set on the navigation item).
20
- *
21
- * References that influenced this approach:
22
- * https://css-tricks.com/rem-global-em-local/
23
- * http://clagnut.com/blog/2384/
24
- */
25
-
26
- :root {
27
- --base-typography-color: #333;
28
- --base-typography-fontFamily: sans-serif;
29
- --base-typography-fontSize: 1.8rem;
30
- --base-typography-fontWeight: 400;
31
- --base-typography-hrule-width: 1px;
32
- --base-typography-letterSpacing: 0;
33
- --base-typography-lineHeight: 1.58;
34
- --base-typography-spacing: 1.58em;
35
- }
36
-
37
- :root {
38
- --base-typography-link-color: #000;
39
- --base-typography-link-colorHover: var(--base-typography-link-color);
40
- --base-typography-link-decoration: underline;
41
- --base-typography-link-decorationHover: underline;
42
- }
43
-
44
- /* headings */
45
-
46
- :root {
47
- --base-typography-h1-fontSize: 1.5em;
48
- --base-typography-h2-fontSize: 1.4em;
49
- --base-typography-h3-fontSize: 1.3em;
50
- --base-typography-h4-fontSize: 1.1em;
51
- --base-typography-h5-fontSize: 1em;
52
- --base-typography-h6-fontSize: 1em;
53
- --base-typography-h1-lineHeight: 1.2;
54
- --base-typography-h2-lineHeight: 1.2;
55
- --base-typography-h3-lineHeight: 1.2;
56
- --base-typography-h4-lineHeight: 1.2;
57
- --base-typography-h5-lineHeight: 1.2;
58
- --base-typography-h6-lineHeight: 1.2;
59
- --base-typography-heading-color: inherit;
60
- --base-typography-heading-fontFamily: sans-serif;
61
- --base-typography-heading-fontWeight: 700;
62
- --base-typography-heading-letterSpacing: 0;
63
- }
64
-
65
- /* General
66
- ========================================================================== */
67
-
68
- /**
69
- * Set the base font size to be a percentage so that it's more accessible to browser text zooming
70
- * 62.5% = 10px = 1rem
71
- */
72
-
73
- html {
74
- font-size: 62.5%;
75
- }
76
-
77
- /**
78
- * Set body defaults for other elements to inherit
79
- */
80
-
81
- body {
82
- color: var(--base-typography-color);
83
- font-family: var(--base-typography-fontFamily);
84
- font-size: var(--base-typography-fontSize);
85
- font-weight: var(--base-typography-fontWeight);
86
- letter-spacing: var(--base-typography-letterSpacing);
87
- line-height: var(--base-typography-lineHeight);
88
- }
89
-
90
- /**
91
- * The Normalize libray sets the font weight to "bolder". This works in most cases if the
92
- * element's font weight is 400. But if it's 300 then "bolder" ends up being 400, which is
93
- * usually not desired. This ensures that bold is always bold.
94
- */
95
- b,
96
- strong {
97
- font-weight: 700;
98
- }
99
-
100
- /**
101
- * Consistent spacing on block elements
102
- */
103
-
104
- address,
105
- blockquote,
106
- dl,
107
- figure,
108
- hr,
109
- ol,
110
- p,
111
- ul {
112
- margin: 0 0 var(--base-typography-spacing);
113
- }
114
-
115
- /**
116
- * Blockquote
117
- */
118
-
119
- blockquote {
120
- border-left: 10px solid #ccc;
121
- margin: var(--base-typography-spacing)
122
- calc(var(--base-typography-spacing) * 0.7);
123
- padding: 0.5em 1em;
124
- position: relative;
125
- }
126
-
127
- blockquote p:first-child {
128
- margin-top: 0;
129
- }
130
-
131
- blockquote p:last-child {
132
- margin-bottom: 0;
133
- }
134
-
135
- /**
136
- * Links
137
- */
138
-
139
- a {
140
- color: var(--base-typography-link-color);
141
- text-decoration: var(--base-typography-link-decoration);
142
- }
143
-
144
- @media (hover: hover) and (pointer: fine) {
145
- a:hover {
146
- color: var(--base-typography-link-colorHover);
147
- text-decoration: var(--base-typography-link-decorationHover);
148
- }
149
- }
150
-
151
- /**
152
- * Default styling for telephone links to not look like links
153
- */
154
- a[href^="tel"] {
155
- color: inherit;
156
- text-decoration: none;
157
- }
158
-
159
- @media (hover: hover) and (pointer: fine) {
160
- a[href^="tel"]:hover {
161
- color: inherit;
162
- text-decoration: none;
163
- }
164
- }
165
-
166
- /**
167
- * Lists
168
- */
169
-
170
- ol,
171
- ul {
172
- padding-left: 2.4em;
173
- }
174
-
175
- li > ol,
176
- li > ul {
177
- margin-bottom: 0;
178
- }
179
-
180
- dt {
181
- font-weight: 700;
182
- }
183
-
184
- dd {
185
- margin: 0;
186
- }
187
-
188
- /**
189
- * Inline abbreviations
190
- */
191
-
192
- abbr[title] {
193
- border-bottom: 1px dotted;
194
- cursor: help;
195
- }
196
-
197
- /**
198
- * Reset browser default
199
- */
200
-
201
- address {
202
- font-style: normal;
203
- }
204
-
205
- /**
206
- * 1. Remove default hr shading.
207
- * 2. Inherit text or parent border color.
208
- */
209
-
210
- hr {
211
- border-style: solid; /* 1 */
212
- border-width: var(--base-typography-hrule-width) 0 0 0;
213
- color: inherit; /* 2 */
214
- }
215
-
216
- /* Headings
217
- ========================================================================== */
218
-
219
- h1,
220
- h2,
221
- h3,
222
- h4,
223
- h5,
224
- h6 {
225
- color: var(--base-typography-heading-color);
226
- font-family: var(--base-typography-heading-fontFamily);
227
- font-weight: var(--base-typography-heading-fontWeight);
228
- letter-spacing: var(--base-typography-heading-letterSpacing);
229
- margin: calc(var(--base-typography-spacing) * 1.2) 0
230
- calc(var(--base-typography-spacing) / 3);
231
- }
232
-
233
- h2:first-child,
234
- h3:first-child,
235
- h4:first-child,
236
- h5:first-child,
237
- h6:first-child {
238
- margin-top: 0;
239
- }
240
-
241
- h1 {
242
- font-size: var(--base-typography-h1-fontSize);
243
- line-height: var(--base-typography-h1-lineHeight);
244
- margin-top: 0;
245
- }
246
-
247
- h2 {
248
- font-size: var(--base-typography-h2-fontSize);
249
- line-height: var(--base-typography-h2-lineHeight);
250
- }
251
-
252
- h3 {
253
- font-size: var(--base-typography-h3-fontSize);
254
- line-height: var(--base-typography-h3-lineHeight);
255
- }
256
-
257
- h4 {
258
- font-size: var(--base-typography-h4-fontSize);
259
- line-height: var(--base-typography-h4-lineHeight);
260
- }
261
-
262
- h5 {
263
- font-size: var(--base-typography-h5-fontSize);
264
- line-height: var(--base-typography-h5-lineHeight);
265
- }
266
-
267
- h6 {
268
- font-size: var(--base-typography-h6-fontSize);
269
- line-height: var(--base-typography-h6-lineHeight);
270
- }
package/src/css/components/arrange/arrange.css DELETED
@@ -1,157 +0,0 @@
1
- /* =========================================================================== *\
2
- ARRANGE
3
- https://github.com/suitcss/components-arrange
4
- \* =========================================================================== */
5
-
6
-
7
- /** @define Arrange; weak */
8
-
9
- /**
10
- * This component lets you lay out a row of cells in various ways. You can
11
- * specify whether a cell should be wide enough to fit its content, or take up
12
- * the remaining space in the row. It's also possible to give all cells an
13
- * equal width, and to control their vertical alignment.
14
- */
15
-
16
- :root {
17
- --Arrange-gutter-size: 20px;
18
- }
19
-
20
- /**
21
- * 1. Rely on table layout.
22
- * 2. Zero out the default spacing that might be on an element (e.g., `ul`).
23
- * 3. Make sure the component fills at least the full width of its parent.
24
- * 4. Reset the table-layout algorithm in case a component is nested.
25
- */
26
-
27
- .Arrange {
28
- display: table; /* 2 */
29
- margin: 0; /* 3 */
30
- min-width: 100%; /* 4 */
31
- padding: 0; /* 3 */
32
- table-layout: auto; /* 5 */
33
- }
34
-
35
- /**
36
- * There are three possible types of child. `sizeFill` will expand to fill all
37
- * of the remaining space not filled by `sizeFit` elements. `row` will begin a
38
- * new row context, keeping columns the same size.
39
- *
40
- * 1. Zero out any default spacing that might be on an element (e.g., `li`);
41
- * Margin has no effect when coupled with `display: table-cell`.
42
- * 2. All cells are top-aligned by default
43
- */
44
-
45
- .Arrange-sizeFill,
46
- .Arrange-sizeFit {
47
- display: table-cell;
48
- padding: 0; /* 1 */
49
- vertical-align: top; /* 2 */
50
- }
51
-
52
- /**
53
- * Make sure the main content block expands to fill the remaining space.
54
- */
55
-
56
- .Arrange-sizeFill {
57
- width: 100%;
58
- }
59
-
60
- /**
61
- * Where possible, protect against large images breaking the layout. Prevent them from
62
- * exceeding the width of the main content block by making them fluid.
63
- *
64
- * Only work for all browsers with the `Arrange--equal` variant. For Firefox
65
- * and IE to constrain image dimensions for other layouts, large images will
66
- * need their width set to `100%`.
67
- */
68
-
69
- .Arrange-sizeFill img {
70
- height: auto;
71
- max-width: 100%;
72
- }
73
-
74
- /**
75
- * Defend against a side-effect of this layout pattern: images in
76
- * 'Arrange-sizeFit' cannot be fluid, otherwise they lose their ability to
77
- * provide size to a cell.
78
- */
79
-
80
- .Arrange-sizeFit img {
81
- max-width: none !important;
82
- width: auto !important;
83
- }
84
-
85
- /**
86
- * Start a new row context.
87
- */
88
-
89
- .Arrange-row {
90
- display: table-row;
91
- }
92
-
93
- /* Vertical alignment modifiers
94
- ========================================================================== */
95
-
96
- .Arrange--middle > .Arrange-sizeFill,
97
- .Arrange--middle > .Arrange-sizeFit {
98
- vertical-align: middle;
99
- }
100
-
101
- .Arrange--bottom > .Arrange-sizeFill,
102
- .Arrange--bottom > .Arrange-sizeFit {
103
- vertical-align: bottom;
104
- }
105
-
106
- /* Equal-width modifier
107
- ========================================================================== */
108
-
109
- /**
110
- * This layout algorithm will create equal-width table cells, irrespective of
111
- * the width of their content.
112
- *
113
- * 1. The layout algorithm requires a set width to correctly calculate table
114
- * cell width.
115
- */
116
-
117
- .Arrange--equal {
118
- table-layout: fixed;
119
- width: 100%; /* 1 */
120
- }
121
-
122
- /**
123
- * Give the cells an equal width. This value ensures that Arrange is still 100%
124
- * wide when gutters are used in conjunctions with equal-width cells.
125
- *
126
- * It's recommended that only 'Arrange-sizeFill' be used for equal width cells.
127
- * Their inner images will automatically be responsive.
128
- */
129
-
130
- .Arrange--equal > .Arrange-sizeFill,
131
- .Arrange--equal > .Arrange-sizeFit,
132
- .Arrange--equal > .Arrange-row > .Arrange-sizeFill,
133
- .Arrange--equal > .Arrange-row > .Arrange-sizeFit {
134
- width: 1%;
135
- }
136
-
137
- /* Gutter modifier
138
- ========================================================================== */
139
-
140
- /**
141
- * Add a gutter between cells
142
- *
143
- * NOTE: this can trigger a horizontal scrollbar if the component is as wide as
144
- * the viewport. Use padding on a container, or `overflow-x:hidden` to protect
145
- * against it.
146
- */
147
-
148
- .Arrange--withGutter {
149
- margin: 0 calc(var(--Arrange-gutter-size) / -2);
150
- }
151
-
152
- .Arrange--withGutter > .Arrange-sizeFit,
153
- .Arrange--withGutter > .Arrange-sizeFill,
154
- .Arrange--withGutter > .Arrange-row > .Arrange-sizeFit,
155
- .Arrange--withGutter > .Arrange-row > .Arrange-sizeFill {
156
- padding: 0 calc(var(--Arrange-gutter-size) / 2);
157
- }
package/src/css/components/arrange/index.css DELETED
@@ -1 +0,0 @@
1
- @import './arrange.css';
package/src/css/components/breadcrumb/index.css DELETED
@@ -1 +0,0 @@
1
- @import './breadcrumb.css';
package/src/css/components/button/README.md DELETED
@@ -1,88 +0,0 @@
1
- # Button
2
-
3
- Provides a basic button template that includes a very basic default theme that
4
- is ready to be extended.
5
-
6
- Basic visual tests are in [`test/modules/button.html`](http://aptuitiv.github.io/cacao/test/modules/button.html).
7
-
8
-
9
- ## Available classes
10
-
11
- * `Button`: The core button component
12
- * `Button--lg`: Adjusts padding so that button is larger
13
- * `Button--sm`: Adjusts padding so that button is smaller
14
-
15
- ### States
16
-
17
- * `is-disabled`: For disabled-state button styles
18
-
19
- **Note**: You must also include the `disabled` attribute on `button`
20
- elements. For `a` elements, you should prevent JavaScript event handlers
21
- from firing.
22
-
23
-
24
- ## Configurable variables
25
-
26
- * `--Button-background`: Background for the base button.
27
- * `--Button-backgroundHover`: Hover background for the base button.
28
- * `--Button-border`: Border shorthand applied to the base button.
29
- * `--Button-border-radius`: Border radius applied to the base button.
30
- * `--Button-color`: Foreground color for the base button.
31
- * `--Button-disabled-opacity`: Opacity applied to disabled buttons.
32
- * `--Button-fontFamily`: Font family for the base button.
33
- * `--Button-fontSize`: Font size for the base button.
34
- * `--Button-letterSpacing`: Letter spacing for the base button.
35
- * `--Button-lineHeight`: Line height for the base button.
36
- * `--Button-padding`: Padding shorthand.
37
- * `--Button-paddingLg`: Larger padding shorthand.
38
- * `--Button-paddingSm`: Smaller padding shorthand.
39
-
40
-
41
- ## Use
42
-
43
- Examples:
44
-
45
- ```html
46
- <a class="Button" href="{{url}}">Sign up</a>
47
-
48
- <button class="Button is-disabled" type="button" disabled>Close</button>
49
- ```
50
-
51
- ### Theming / extending
52
-
53
- The CSS is focused on common structural requirements for buttons. You can build
54
- your application-specific theme styles in your app. For example:
55
-
56
- ```css
57
- /* import the module or write these styles directly in `button.css` */
58
- @import "cacao/lib/button";
59
-
60
- .Button--default {
61
- background-color: #eee;
62
- color: #444;
63
- border-color: #d9d9d9 #d9d9d9 #ccc;
64
- border-radius: 2px;
65
- }
66
-
67
- .Button--default:hover,
68
- .Button--default:focus,
69
- .Button--default:active,
70
- .Button--default.is-pressed {
71
- background-color: #f5f5f5;
72
- color: #222;
73
- border-color: #c6c6c6 #c6c6c6 #bbb;
74
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
75
- }
76
-
77
- .Button--default:focus {
78
- border-color: #069;
79
- outline: 0;
80
- }
81
-
82
- .Button--default:active,
83
- .Button--default.is-pressed {
84
- background-color: #ccc;
85
- box-shadow: inset 0 1px 2px rgba(0,0,0, 0.2);
86
- }
87
- ```
88
-
package/src/css/components/button/button.css DELETED
@@ -1,142 +0,0 @@
1
- /* ==========================================================================
2
- Button
3
- ========================================================================== */
4
-
5
- /** @define Button */
6
-
7
- /**
8
- * Provides a structural UI button template ready to be extended
9
- *
10
- * The button classes are best applied to links and buttons.
11
- * These components can be used in forms, as calls to action, or as part of the
12
- * general UI of the site/app.
13
- */
14
-
15
- :root {
16
- --Button-background: #555;
17
- --Button-backgroundHover: #9f9f9f;
18
- --Button-border: 0;
19
- --Button-border-radius: 4px;
20
- --Button-color: #fff;
21
- --Button-colorHover: #fff;
22
- --Button-disabled-opacity: .6;
23
- --Button-fontFamily: inherit;
24
- --Button-fontSize: inherit;
25
- --Button-letterSpacing: inherit;
26
- --Button-lineHeight: 1.4;
27
- --Button-padding: .35em 1.5em;
28
- --Button-paddingLg: .7em 2em;
29
- --Button-paddingSm: .2em .75em;
30
- }
31
-
32
- /**
33
- * 1. Prevent button text from being selectable.
34
- */
35
-
36
- .Button {
37
- align-items: center;
38
- background: var(--Button-background);
39
- border: var(--Button-border);
40
- border-radius: var(--Button-border-radius);
41
- color: var(--Button-color);
42
- cursor: pointer;
43
- display: inline-flex;
44
- font-family: var(--Button-fontFamily);
45
- font-size: var(--Button-fontSize);
46
- letter-spacing: var(--Button-letterSpacing);
47
- line-height: var(--Button-lineHeight);
48
- margin: 0;
49
- padding: var(--Button-padding);
50
- text-align: center;
51
- text-decoration: none;
52
- user-select: none; /* 2 */
53
- }
54
-
55
- /**
56
- * Remove excess padding and border in Firefox 4+
57
- */
58
-
59
- .Button::-moz-focus-inner {
60
- border: 0;
61
- padding: 0;
62
- }
63
-
64
- /**
65
- * Work around a Firefox/IE bug where the transparent `button` background
66
- * results in a loss of the default `button` focus styles.
67
- * Based on SUIT CSS: https://github.com/suitcss/base/blob/master/lib/base.css.
68
- * Also see https://css-tricks.com/copy-the-browsers-native-focus-styles/ for "Highlight"
69
- */
70
- .Button:focus-visible {
71
- outline: 1px dotted;
72
- /* stylelint-disable */
73
- outline: 2px auto Highlight;
74
- outline: 2px auto -webkit-focus-ring-color;
75
- /* stylelint-enable */
76
- outline-offset: 1px;
77
- }
78
-
79
- /**
80
- * UI States
81
- */
82
-
83
- /* Only show hover states if supported */
84
- @media (hover: hover) and (pointer: fine) {
85
- .Button:hover:not(:disabled) {
86
- background: var(--Button-backgroundHover);
87
- color: var(--Button-colorHover);
88
- text-decoration: none;
89
- }
90
- }
91
-
92
- .Button:focus-visible {
93
- background: var(--Button-backgroundHover);
94
- color: var(--Button-colorHover);
95
- text-decoration: none;
96
- }
97
-
98
- .Button:disabled,
99
- .Button.is-disabled {
100
- cursor: default;
101
- opacity: var(--Button-disabled-opacity);
102
- }
103
-
104
- /**
105
- * Size modifiers
106
- */
107
-
108
- .Button--lg {
109
- font-size: calc(var(--base-typography-fontSize) + 3);
110
- padding: var(--Button-paddingLg);
111
- }
112
-
113
- .Button--sm {
114
- font-size: var(--base-typography-fontSize);
115
- font-weight: 300;
116
- padding: var(--Button-paddingSm);
117
- }
118
-
119
- /**
120
- * Color modifiers
121
- */
122
- .Button--secondary {
123
- background: #555;
124
- }
125
-
126
- /* Only show hover states if supported */
127
- @media (hover: hover) and (pointer: fine) {
128
- .Button--secondary:hover {
129
- background: #333;
130
- }
131
- }
132
-
133
- .Button--secondary:focus-visible {
134
- background: #333;
135
- }
136
-
137
- /**
138
- * Border modifiers
139
- */
140
- .Button--square {
141
- border-radius: 0;
142
- }
package/src/css/components/button/index.css DELETED
@@ -1 +0,0 @@
1
- @import './button';