cacao-css 3.20.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 +16 -4
  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 -258
  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/components/list/list.css DELETED
@@ -1,162 +0,0 @@
1
- /* ==========================================================================
2
- List
3
- ========================================================================== */
4
-
5
- /** @define List; weak */
6
-
7
- /**
8
- * Provides custom layouts for bare lists.
9
- * Must be applied to a <ul> or an <ol>. Use only one modifier per list.
10
- */
11
-
12
- :root {
13
- --List-arrow-spacing: .5em;
14
- --List-barred-spacing: .5em;
15
- --List-dotted-spacing: .5em;
16
- --List-gutter-spacing: 2rem;
17
- --List-spaced-spacing: 1em;
18
- }
19
-
20
- /**
21
- * List reset
22
- * Barebones list, no margins or styles.
23
- */
24
-
25
- .List {
26
- list-style: none;
27
- padding-left: 0;
28
- padding-right: 0;
29
- }
30
-
31
- /**
32
- * Inline list
33
- * Creates an inline list with inline items.
34
- */
35
-
36
- .List--arrow,
37
- .List--inline,
38
- .List--spaced,
39
- .List--gutter,
40
- .List--gutterLg,
41
- .List--barred,
42
- .List--dotted,
43
- .List--inline > li,
44
- .List--spaced > li,
45
- .List--gutter > li,
46
- .List--gutterLg > li,
47
- .List--arrow > li,
48
- .List--barred > li,
49
- .List--dotted > li {
50
- display: inline-block;
51
- }
52
-
53
- /**
54
- * Arrow list
55
- * Adds arrow between the inline items.
56
- * White space will add extra spacing.
57
- *
58
- * Extends `.List--inline`.
59
- */
60
-
61
- .List--arrow > li::before {
62
- content: '>';
63
- margin-left: var(--List-arrow-spacing);
64
- margin-right: var(--List-arrow-spacing);
65
- }
66
-
67
- .List--arrow > li.is-first::before,
68
- .List--arrow > li:first-child::before {
69
- content: none;
70
- display: none;
71
- margin-left: 0;
72
- margin-right: 0;
73
- }
74
-
75
- /**
76
- * Spaced list
77
- * Adds spacing between the inline items.
78
- *
79
- * Extends `.List--inline`.
80
- */
81
-
82
- .List--spaced {
83
- margin-left: calc(var(--List-spaced-spacing) * -1);
84
- }
85
-
86
- .List--spaced > li {
87
- margin-left: var(--List-spaced-spacing);
88
- }
89
-
90
- /**
91
- * List with gutters
92
- * Adds gutters between the inline items.
93
- *
94
- * Extends `.List--inline`.
95
- */
96
-
97
- .List--gutter {
98
- margin-left: calc(var(--List-gutter-spacing) * -1);
99
- }
100
-
101
- .List--gutter > li {
102
- margin-left: var(--List-gutter-spacing);
103
- }
104
-
105
- /**
106
- * List with large gutters
107
- * Adds gutters between the inline items.
108
- *
109
- * Extends `.List--inline`.
110
- */
111
-
112
- .List--gutterLg {
113
- margin-left: calc(var(--List-gutter-spacing) * -2);
114
- }
115
-
116
- .List--gutterLg > li {
117
- margin-left: calc(var(--List-gutter-spacing) * 2);
118
- }
119
-
120
- /**
121
- * Barred list
122
- * Adds vertical bars between the inline items.
123
- * White space will add extra spacing.
124
- *
125
- * Extends `.List--inline`.
126
- */
127
-
128
- .List--barred > li::before {
129
- content: '|';
130
- margin-left: calc(var(--List-barred-spacing) / 2);
131
- margin-right: var(--List-barred-spacing);
132
- }
133
-
134
- .List--barred > li.is-first::before,
135
- .List--barred > li:first-child::before {
136
- content: none;
137
- display: none;
138
- margin-left: 0;
139
- margin-right: 0;
140
- }
141
-
142
- /**
143
- * Dotted list
144
- * Adds bullets between the inline items.
145
- * White space will add extra spacing.
146
- *
147
- * Extends `.List--inline`.
148
- */
149
-
150
- .List--dotted > li::before {
151
- content: '•';
152
- margin-left: calc(var(--List-dotted-spacing) / 2);
153
- margin-right: var(--List-dotted-spacing);
154
- }
155
-
156
- .List--dotted > li.is-first::before,
157
- .List--dotted > li:first-child::before {
158
- content: none;
159
- display: none;
160
- margin-left: 0;
161
- margin-right: 0;
162
- }
package/src/css/components/media/README.md DELETED
@@ -1,43 +0,0 @@
1
- # Media
2
-
3
- The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)
4
- is an abstract element used as the basis for building more complex and
5
- repetitive components (like blog comments, Tweets, etc).
6
-
7
- Uses a fallback for browsers that do not support flexbox. Fallbacks are
8
- applied when `<html>` has a class of `no-flexbox` or `no-flexwrap`.
9
-
10
- Basic visual tests are in [`test/modules/media.html`](http://aptuitiv.github.io/cacao/test/modules/media.html)
11
- and fallback layout tests are found in [`test/modules/media-noflex.html`](http://aptuitiv.github.io/cacao/test/modules/media-noflex.html).
12
-
13
-
14
- ## Available classes
15
-
16
- * `Media`: Base component.
17
- * `Media--withGutter`: Add a gutter between media items.
18
- * `Media--withGutterSm`: Add a smaller gutter between media items.
19
- * `Media-content`: Child content.
20
- * `Media-subject`: The subject(s) of the content.
21
- * `Media-subject--middle`: Vertically align subject to middle of content.
22
- * `Media-subject--bottom`: Vertically align subject to bottom of content.
23
-
24
-
25
- ## Configurable variables
26
-
27
- * `--Media-cell-gutter`: Gutter width.
28
-
29
-
30
- ## Usage
31
-
32
- ```html
33
- <div class="Media Media--withGutterSm">
34
- <div class="Media-subject">
35
- <img src="http://placehold.it/80x80" alt="">
36
- </div>
37
- <div class="Media-content">
38
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
39
- venenatis interdum urna, quis sodales mauris rutrum quis.
40
- </div>
41
- </div>
42
- ```
43
-
package/src/css/components/media/index.css DELETED
@@ -1 +0,0 @@
1
- @import './media';
package/src/css/components/media/media.css DELETED
@@ -1,161 +0,0 @@
1
- /* ==========================================================================
2
- Media
3
- ========================================================================== */
4
-
5
- /** @define Media */
6
-
7
- /**
8
- * The media object is an abstract element used as the basis for building
9
- * more complex and repetitive components (like blog comments, Tweets, etc).
10
- *
11
- * Uses a fallback for browsers that do not support flexbox. Fallbacks are
12
- * applied when `<html>` has a class of `no-flexbox`.
13
- *
14
- * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
15
- */
16
-
17
- :root {
18
- --Media-cell-gutter: 20px;
19
- }
20
-
21
- /* Base
22
- ========================================================================== */
23
-
24
- .Media {
25
- display: flex;
26
- }
27
-
28
- /**
29
- * Modifiers: Gutters
30
- */
31
-
32
- .Media--withGutter {
33
- margin-left: calc(var(--Media-cell-gutter) * -1);
34
- }
35
-
36
- .Media--withGutter > .Media-content,
37
- .Media--withGutter > .Media-subject {
38
- padding-left: var(--Media-cell-gutter);
39
- }
40
-
41
- .Media--withGutterSm {
42
- margin-left: calc(var(--Media-cell-gutter) / -2);
43
- }
44
-
45
- .Media--withGutterSm > .Media-content,
46
- .Media--withGutterSm > .Media-subject {
47
- padding-left: calc(var(--Media-cell-gutter) / 2);
48
- }
49
-
50
- /* Content
51
- ========================================================================== */
52
-
53
- /**
54
- * 1. Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7
55
- * Use `0%` to avoid bug in IE10/11 with unitless flex basis - http://git.io/vllWx
56
- */
57
-
58
- .Media-content {
59
- flex: 1 1 0%; /* 1 */
60
- }
61
-
62
- /* Subjects
63
- ========================================================================== */
64
-
65
- /**
66
- * The media content, or subject that the body is related to.
67
- */
68
-
69
- .Media-subject {
70
- }
71
-
72
- /**
73
- * Modifier: Align content vertically center.
74
- */
75
-
76
- .Media-subject--middle {
77
- align-self: center;
78
- }
79
-
80
- /**
81
- * Modifier: Align content to the bottom.
82
- */
83
-
84
- .Media-subject--bottom {
85
- align-self: flex-end;
86
- }
87
-
88
- /* Object element
89
- ========================================================================== */
90
-
91
- /**
92
- * Media image
93
- * Must be applied to objects that are children of `.Media-content`. This
94
- * is typically an image, video, etc...
95
- */
96
-
97
- .Media-object {
98
- display: block;
99
- }
100
-
101
- /* ==========================================================================
102
- Fallback
103
- ========================================================================== */
104
-
105
- /**
106
- * 1. 100% width doesn't act as expected when used with gutters
107
- */
108
-
109
- /* postcss-bem-linter: ignore */
110
- .no-flexwrap .Media,
111
- .no-flexbox .Media {
112
- display: block;
113
- width: auto; /* 1 */
114
- }
115
-
116
- /* postcss-bem-linter: ignore */
117
- .no-flexwrap .Media-content,
118
- .no-flexbox .Media-content {
119
- width: 100%;
120
- }
121
-
122
- /* postcss-bem-linter: ignore */
123
- .no-flexwrap .Media,
124
- .no-flexwrap .Media-content,
125
- .no-flexbox .Media,
126
- .no-flexbox .Media-content {
127
- overflow: hidden;
128
- zoom: 1;
129
- }
130
-
131
- /* postcss-bem-linter: ignore */
132
- .no-flexwrap .Media-content,
133
- .no-flexwrap .Media-subject,
134
- .no-flexbox .Media-content,
135
- .no-flexbox .Media-subject {
136
- display: table-cell;
137
- vertical-align: top;
138
- }
139
-
140
- /* postcss-bem-linter: ignore */
141
- .no-flexwrap .Media-subject--middle,
142
- .no-flexbox .Media-subject--middle {
143
- vertical-align: middle;
144
- }
145
-
146
- /* postcss-bem-linter: ignore */
147
- .no-flexwrap .Media-subject--bottom,
148
- .no-flexbox .Media-subject--bottom {
149
- vertical-align: bottom;
150
- }
151
-
152
- /**
153
- * 1. Fix collapse in webkit from max-width: 100% and display: table-cell.
154
- */
155
-
156
- /* postcss-bem-linter: ignore */
157
- .no-flexwrap .Media-object,
158
- .no-flexbox .Media-object {
159
- max-width: none; /* 1 */
160
- }
161
-
package/src/css/components/message/index.css DELETED
@@ -1 +0,0 @@
1
- @import './message';
package/src/css/components/message/message.css DELETED
@@ -1,42 +0,0 @@
1
- /* =========================================================================== *\
2
- MESSAGE
3
- \* =========================================================================== */
4
-
5
- /** @define Message */
6
-
7
- :root {
8
- --Message-padding: 8px 12px;
9
- --Message-border-radius: 4px;
10
-
11
- --Message-background: #dfdfdf;
12
- --Message-borderColor: #9f9f9f;
13
- --Message-color: #333;
14
-
15
- --Message-success-background: #fbec88;
16
- --Message-success-borderColor: #fad42e;
17
- --Message-success-color: #333;
18
-
19
- --Message-error-background: #fef1ec;
20
- --Message-error-borderColor: #cd0a0a;
21
- --Message-error-color: #cd0a0a;
22
- }
23
-
24
- .Message {
25
- background: var(--Message-background);
26
- border: 1px solid var(--Message-borderColor);
27
- border-radius: var(--Message-border-radius);
28
- color: var(--Message-color);
29
- padding: var(--Message-padding);
30
- }
31
-
32
- .Message--success {
33
- background: var(--Message-success-background);
34
- border: 1px solid var(--Message-success-borderColor);
35
- color: var(--Message-success-color);
36
- }
37
-
38
- .Message--error {
39
- background: var(--Message-error-background);
40
- border: 1px solid var(--Message-error-borderColor);
41
- color: var(--Message-error-color);
42
- }
package/src/css/components/navigation/README.md DELETED
@@ -1,110 +0,0 @@
1
- # Navigation
2
-
3
- Put the styles for the site navigation here.
4
-
5
- ## MainNav
6
-
7
- Base structure for main navigation menus. Can easily be extended and / or
8
- themed.
9
-
10
-
11
- ### Available classes
12
-
13
- * `MainNav`: Applied to the menu container.
14
- * `MainNav-item`: Menu items containing content such as links.
15
- * `MainNav-link`: Menu item links.
16
-
17
- #### States
18
-
19
- * `is-current` / `is-currentParent`: When applied to menu item the item will be styled to stand out
20
- from the other items.
21
-
22
-
23
- ### Configurable variables
24
-
25
- * `--MainNav-fontFamily`: Base menu font family.
26
- * `-MainNav-fontSize`: Base menu font size.
27
- * `-MainNav-lineHeight`: Base menu line height.
28
- * `-MainNav-link-background`: Background shorthand for menu links.
29
- * `-MainNav-link-backgroundHover`: Background shorthand for hovered menu links.
30
- * `-MainNav-link-color`: Foreground color of menu links.
31
- * `-MainNav-link-colorHover`: Foreground color of hovered menu links.
32
-
33
-
34
- ### Use
35
-
36
- Examples:
37
-
38
- ```html
39
- <ul class="MainNav">
40
- <li class="MainNav-item">
41
- <a class="MainNav-link" href="#">Menu item 1</a>
42
- </li>
43
- <li class="MainNav-item is-currentParent">
44
- <a class="MainNav-link" href="#">Menu item 2</a>
45
- <ul class="MainNav">
46
- <li class="MainNav-item">
47
- <a class="MainNav-link" href="#">Sub menu item 1</a>
48
- </li>
49
- <li class="MainNav-item is-current">
50
- <a class="MainNav-link" href="#">Sub menu item 2</a>
51
- </li>
52
- </ul>
53
- </li>
54
- <li class="MainNav-item">
55
- <a class="MainNav-link" href="#">Menu item 3</a>
56
- </li>
57
- <li class="MainNav-item">
58
- <a class="MainNav-link" href="#">Menu item 4</a>
59
- </li>
60
- </ul>
61
- ```
62
-
63
-
64
-
65
- ## Dropdown
66
-
67
- Base structure for dropdown menus. Can easily be extended and / or themed.
68
-
69
-
70
- ### Available classes
71
-
72
- * `Dropdown`: Applied to the menu's parent to provide context for the dropdown
73
- menu.
74
- * `Dropdown-menu`: The actual dropdown.
75
- * `Dropdown-item`: Items within the dropdown menu.
76
- * `Dropdown-link`: Links within the dropdown menu.
77
-
78
- #### States
79
-
80
- * `is-last`: When applied to `Dropdown` this causes menus to align and fly-out
81
- to the right.
82
-
83
-
84
- ### Configurable variables
85
-
86
- * `--Dropdown-background`: Default dropdown menu background shorthand.
87
- * `--Dropdown-fontSize`: Font size of base dropdown menu.
88
- * `--Dropdown-lineHeight`: Line height of base dropdown menu.
89
- * `--Dropdown-item-padding`: Padding of items within the dropdown menu.
90
- * `--Dropdown-link-color`: Foreground color of links within the dropdown.
91
- * `--Dropdown-link-colorHover`: Foreground color of hovered links within the dropdown.
92
-
93
-
94
- ### Use
95
-
96
- Examples:
97
-
98
- ```html
99
- <span class="Dropdown">
100
- Dropdown
101
- <ul class="Dropdown-menu">
102
- <li class="Dropdown-item">
103
- <a class="Dropdown-link" href="{{url}}">Item 1</a>
104
- </li>
105
- <li class="Dropdown-item">
106
- <a class="Dropdown-link" href="{{url}}">Item 2</a>
107
- </li>
108
- </ul>
109
- </span>
110
- ```
package/src/css/components/navigation/dropdown.css DELETED
@@ -1,165 +0,0 @@
1
- /* ==========================================================================
2
- Dropdown
3
- ========================================================================== */
4
-
5
- /** @define Dropdown */
6
-
7
- /**
8
- * Drop-down navigation menu.
9
- */
10
-
11
- :root {
12
- --Dropdown-background: #a0a0a0;
13
- --Dropdown-fontSize: inherit;
14
- --Dropdown-lineHeight: inherit;
15
- --Dropdown-item-padding: .5em 1em;
16
- --Dropdown-item-padding-small-screen: .8em 30px .8em 1em;
17
- --Dropdown-link-color: #333;
18
- --Dropdown-link-colorHover: #000;
19
- }
20
-
21
- .Dropdown {
22
- position: relative;
23
- }
24
-
25
- /* Base menu
26
- ========================================================================== */
27
-
28
- .Dropdown-menu {
29
- background: var(--Dropdown-background);
30
- box-shadow: 0 22px 35px 0 rgba(0, 0, 0, .1);
31
- display: none;
32
- left: 0;
33
- list-style: none;
34
- margin: 0;
35
- min-width: 100%;
36
- padding: 0;
37
- position: absolute;
38
- top: 100%;
39
- z-index: 999;
40
- }
41
-
42
- .Dropdown-menu::before,
43
- .Dropdown-menu::after {
44
- content: ' ';
45
- display: table;
46
- }
47
-
48
- .Dropdown-menu::after {
49
- clear: both;
50
- }
51
-
52
- /* Menu items
53
- ========================================================================== */
54
-
55
- .Dropdown-item {
56
- position: relative;
57
- }
58
-
59
- /** Item that should only be shown in the small screen navigation **/
60
-
61
- .Dropdown-item--smallScreen {
62
- display: none;
63
- }
64
-
65
- @media (--c-bp-smallScreenNav) {
66
- .Dropdown-item--smallScreen {
67
- display: block;
68
- }
69
- }
70
-
71
- /* Menu links
72
- ========================================================================== */
73
-
74
- .Dropdown-link {
75
- color: var(--Dropdown-link-color);
76
- display: block;
77
- font-size: var(--Dropdown-fontSize);
78
- font-weight: 400;
79
- line-height: var(--Dropdown-lineHeight);
80
- padding: var(--Dropdown-item-padding);
81
- text-decoration: none;
82
- white-space: nowrap;
83
- }
84
-
85
- @media (--c-bp-largeScreenNav) {
86
- .Dropdown-link:hover,
87
- .Dropdown-link.is-current,
88
- .Dropdown-link.is-currentParent {
89
- color: var(--Dropdown-link-colorHover);
90
- }
91
-
92
- .Dropdown-link:hover {
93
- text-decoration: none;
94
- }
95
- }
96
-
97
- .Dropdown-link.is-current,
98
- .Dropdown-link.is-currentParent {
99
- font-weight: 700;
100
- }
101
-
102
- /* State
103
- ========================================================================== */
104
-
105
- @media (--c-bp-largeScreenNav) {
106
-
107
- /* show sub-menus under hovered items */
108
-
109
- .Dropdown:hover > .Dropdown-menu,
110
- .Dropdown-item:hover > .Dropdown-menu {
111
- display: block;
112
- }
113
-
114
- /* display sub-menus under the last item to the right */
115
-
116
- .Dropdown.is-last:hover > .Dropdown-menu {
117
- left: auto;
118
- right: 0;
119
- }
120
-
121
- /* fly-out to the right */
122
-
123
- .Dropdown-item:hover > .Dropdown-menu {
124
- left: 100%;
125
- top: 0;
126
- transform: none;
127
- }
128
-
129
- /* fly-out to the left if root parent is last item */
130
-
131
- .Dropdown.is-last .Dropdown-item:hover > .Dropdown-menu {
132
- left: auto;
133
- right: 100%;
134
- }
135
- }
136
-
137
- /* ------------------------------------ *\
138
- #PARENT ITEMS
139
- \* ------------------------------------ */
140
-
141
- .Dropdown-link--parent {
142
- position: relative;
143
- }
144
-
145
- .Dropdown-link--parent::before,
146
- .Dropdown-link--parent::after {
147
- background: var(--Dropdown-link-color);
148
- content: '';
149
- display: inline-block;
150
- height: 1px;
151
- margin-top: -1px;
152
- position: absolute;
153
- right: 16px;
154
- top: 50%;
155
- transform-origin: 7px 50%;
156
- width: 7px;
157
- }
158
-
159
- .Dropdown-link--parent::after {
160
- transform: rotate(-45deg);
161
- }
162
-
163
- .Dropdown-link--parent::before {
164
- transform: rotate(45deg);
165
- }