@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.21

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 (408) hide show
  1. package/README.md +9 -0
  2. package/dist/css/base/button.css +1 -1
  3. package/dist/css/base/button.css.map +1 -1
  4. package/dist/css/base/form.css +1 -1
  5. package/dist/css/base/form.css.map +1 -1
  6. package/dist/css/base/link.css +1 -1
  7. package/dist/css/base/link.css.map +1 -1
  8. package/dist/css/base/table.css +1 -1
  9. package/dist/css/base/table.css.map +1 -1
  10. package/dist/css/base.css +1 -1
  11. package/dist/css/base.css.map +1 -1
  12. package/dist/css/component/accordion.css +4 -1
  13. package/dist/css/component/accordion.css.map +1 -1
  14. package/dist/css/component/alert.css +1 -1
  15. package/dist/css/component/alert.css.map +1 -1
  16. package/dist/css/component/badge.css +2 -0
  17. package/dist/css/component/badge.css.map +1 -0
  18. package/dist/css/component/card.css +1 -1
  19. package/dist/css/component/card.css.map +1 -1
  20. package/dist/css/component/carousel.css +1 -1
  21. package/dist/css/component/carousel.css.map +1 -1
  22. package/dist/css/component/disclosure.css +2 -0
  23. package/dist/css/component/disclosure.css.map +1 -0
  24. package/dist/css/component/input-group.css.map +1 -1
  25. package/dist/css/component/list.css +1 -1
  26. package/dist/css/component/list.css.map +1 -1
  27. package/dist/css/component/menu.css +1 -1
  28. package/dist/css/component/menu.css.map +1 -1
  29. package/dist/css/component/navigation.css +1 -1
  30. package/dist/css/component/navigation.css.map +1 -1
  31. package/dist/css/component.css +4 -1
  32. package/dist/css/component.css.map +1 -1
  33. package/dist/css/graupl.css +4 -1
  34. package/dist/css/graupl.css.map +1 -1
  35. package/dist/css/init.css.map +1 -1
  36. package/dist/css/layout/columns.css +1 -1
  37. package/dist/css/layout/columns.css.map +1 -1
  38. package/dist/css/layout/container.css +1 -1
  39. package/dist/css/layout/container.css.map +1 -1
  40. package/dist/css/layout/flex-columns.css +1 -1
  41. package/dist/css/layout/flex-columns.css.map +1 -1
  42. package/dist/css/layout.css +4 -1
  43. package/dist/css/layout.css.map +1 -1
  44. package/dist/css/normalize.css.map +1 -1
  45. package/dist/css/state/focus.css +1 -1
  46. package/dist/css/state/focus.css.map +1 -1
  47. package/dist/css/state.css +1 -1
  48. package/dist/css/state.css.map +1 -1
  49. package/dist/css/theme/color.css +1 -1
  50. package/dist/css/theme/color.css.map +1 -1
  51. package/dist/css/theme/typography.css +1 -1
  52. package/dist/css/theme/typography.css.map +1 -1
  53. package/dist/css/theme.css +1 -1
  54. package/dist/css/theme.css.map +1 -1
  55. package/dist/css/utilities/alignment.css.map +1 -1
  56. package/dist/css/utilities/background.css +2 -0
  57. package/dist/css/utilities/background.css.map +1 -0
  58. package/dist/css/utilities/border.css +1 -1
  59. package/dist/css/utilities/border.css.map +1 -1
  60. package/dist/css/utilities/color.css +1 -1
  61. package/dist/css/utilities/color.css.map +1 -1
  62. package/dist/css/utilities/container.css +2 -0
  63. package/dist/css/utilities/container.css.map +1 -0
  64. package/dist/css/utilities/display.css +1 -1
  65. package/dist/css/utilities/display.css.map +1 -1
  66. package/dist/css/utilities/flex.css.map +1 -1
  67. package/dist/css/utilities/gradient.css +2 -0
  68. package/dist/css/utilities/gradient.css.map +1 -0
  69. package/dist/css/utilities/height.css +1 -1
  70. package/dist/css/utilities/height.css.map +1 -1
  71. package/dist/css/utilities/inset.css.map +1 -1
  72. package/dist/css/utilities/justification.css.map +1 -1
  73. package/dist/css/utilities/list.css.map +1 -1
  74. package/dist/css/utilities/order.css.map +1 -1
  75. package/dist/css/utilities/position.css +2 -0
  76. package/dist/css/utilities/position.css.map +1 -0
  77. package/dist/css/utilities/ratio.css +1 -1
  78. package/dist/css/utilities/ratio.css.map +1 -1
  79. package/dist/css/utilities/spacing.css +1 -1
  80. package/dist/css/utilities/spacing.css.map +1 -1
  81. package/dist/css/utilities/typography.css +1 -1
  82. package/dist/css/utilities/typography.css.map +1 -1
  83. package/dist/css/utilities/visibility.css +1 -1
  84. package/dist/css/utilities/visibility.css.map +1 -1
  85. package/dist/css/utilities/visually-hidden.css +2 -0
  86. package/dist/css/utilities/visually-hidden.css.map +1 -0
  87. package/dist/css/utilities/width.css +1 -1
  88. package/dist/css/utilities/width.css.map +1 -1
  89. package/dist/css/utilities/z-index.css +2 -0
  90. package/dist/css/utilities/z-index.css.map +1 -0
  91. package/dist/css/utilities.css +1 -1
  92. package/dist/css/utilities.css.map +1 -1
  93. package/dist/js/accordion.js +5 -0
  94. package/dist/js/accordion.js.map +1 -0
  95. package/dist/js/alert.js +5 -0
  96. package/dist/js/alert.js.map +1 -0
  97. package/dist/js/carousel.js +5 -0
  98. package/dist/js/carousel.js.map +1 -0
  99. package/dist/js/component/accordion.cjs.js +4 -2
  100. package/dist/js/component/accordion.cjs.js.map +1 -0
  101. package/dist/js/component/accordion.es.js +5 -0
  102. package/dist/js/component/accordion.es.js.map +1 -0
  103. package/dist/js/component/accordion.iife.js +4 -2
  104. package/dist/js/component/accordion.iife.js.map +1 -0
  105. package/dist/js/component/alert.cjs.js +4 -2
  106. package/dist/js/component/alert.cjs.js.map +1 -0
  107. package/dist/js/component/alert.es.js +5 -0
  108. package/dist/js/component/alert.es.js.map +1 -0
  109. package/dist/js/component/alert.iife.js +4 -2
  110. package/dist/js/component/alert.iife.js.map +1 -0
  111. package/dist/js/component/carousel.cjs.js +4 -2
  112. package/dist/js/component/carousel.cjs.js.map +1 -0
  113. package/dist/js/component/carousel.es.js +5 -0
  114. package/dist/js/component/carousel.es.js.map +1 -0
  115. package/dist/js/component/carousel.iife.js +4 -2
  116. package/dist/js/component/carousel.iife.js.map +1 -0
  117. package/dist/js/component/disclosure.cjs.js +5 -0
  118. package/dist/js/component/disclosure.cjs.js.map +1 -0
  119. package/dist/js/component/disclosure.es.js +5 -0
  120. package/dist/js/component/disclosure.es.js.map +1 -0
  121. package/dist/js/component/disclosure.iife.js +5 -0
  122. package/dist/js/component/disclosure.iife.js.map +1 -0
  123. package/dist/js/generator/accordion.cjs.js +5 -0
  124. package/dist/js/generator/accordion.cjs.js.map +1 -0
  125. package/dist/js/generator/accordion.es.js +5 -0
  126. package/dist/js/generator/accordion.es.js.map +1 -0
  127. package/dist/js/generator/accordion.iife.js +5 -0
  128. package/dist/js/generator/accordion.iife.js.map +1 -0
  129. package/dist/js/generator/alert.cjs.js +5 -0
  130. package/dist/js/generator/alert.cjs.js.map +1 -0
  131. package/dist/js/generator/alert.es.js +5 -0
  132. package/dist/js/generator/alert.es.js.map +1 -0
  133. package/dist/js/generator/alert.iife.js +5 -0
  134. package/dist/js/generator/alert.iife.js.map +1 -0
  135. package/dist/js/generator/carousel.cjs.js +5 -0
  136. package/dist/js/generator/carousel.cjs.js.map +1 -0
  137. package/dist/js/generator/carousel.es.js +5 -0
  138. package/dist/js/generator/carousel.es.js.map +1 -0
  139. package/dist/js/generator/carousel.iife.js +5 -0
  140. package/dist/js/generator/carousel.iife.js.map +1 -0
  141. package/dist/js/generator/disclosure.cjs.js +5 -0
  142. package/dist/js/generator/disclosure.cjs.js.map +1 -0
  143. package/dist/js/generator/disclosure.es.js +5 -0
  144. package/dist/js/generator/disclosure.es.js.map +1 -0
  145. package/dist/js/generator/disclosure.iife.js +5 -0
  146. package/dist/js/generator/disclosure.iife.js.map +1 -0
  147. package/dist/js/generator/navigation.cjs.js +3 -0
  148. package/dist/js/generator/navigation.cjs.js.map +1 -0
  149. package/dist/js/generator/navigation.es.js +3 -0
  150. package/dist/js/generator/navigation.es.js.map +1 -0
  151. package/dist/js/generator/navigation.iife.js +3 -0
  152. package/dist/js/generator/navigation.iife.js.map +1 -0
  153. package/dist/js/graupl.js +11 -0
  154. package/dist/js/graupl.js.map +1 -0
  155. package/dist/js/navigation.js +3 -0
  156. package/dist/js/navigation.js.map +1 -0
  157. package/package.json +49 -41
  158. package/scss/base/button.scss +1 -1
  159. package/scss/base/form.scss +1 -1
  160. package/scss/base/link.scss +1 -1
  161. package/scss/base/table.scss +1 -1
  162. package/scss/base.scss +1 -1
  163. package/scss/component/accordion.scss +1 -1
  164. package/scss/component/alert.scss +1 -1
  165. package/scss/component/badge.scss +3 -0
  166. package/scss/component/card.scss +1 -1
  167. package/scss/component/carousel.scss +1 -1
  168. package/scss/component/disclosure.scss +3 -0
  169. package/scss/component/input-group.scss +1 -1
  170. package/scss/component/list.scss +1 -1
  171. package/scss/component/menu.scss +1 -1
  172. package/scss/component/navigation.scss +1 -1
  173. package/scss/component.scss +1 -1
  174. package/scss/graupl.scss +1 -1
  175. package/scss/init.scss +1 -1
  176. package/scss/layout/columns.scss +1 -1
  177. package/scss/layout/container.scss +1 -1
  178. package/scss/layout/flex-columns.scss +1 -1
  179. package/scss/layout.scss +1 -1
  180. package/scss/normalize.scss +1 -1
  181. package/scss/state/focus.scss +1 -1
  182. package/scss/state.scss +1 -1
  183. package/scss/theme/color.scss +1 -1
  184. package/scss/theme/typography.scss +1 -1
  185. package/scss/theme.scss +1 -1
  186. package/scss/utilities/alignment.scss +1 -1
  187. package/scss/utilities/background.scss +3 -0
  188. package/scss/utilities/border.scss +1 -1
  189. package/scss/utilities/color.scss +1 -1
  190. package/scss/utilities/container.scss +3 -0
  191. package/scss/utilities/display.scss +1 -1
  192. package/scss/utilities/flex.scss +1 -1
  193. package/scss/utilities/gradient.scss +3 -0
  194. package/scss/utilities/height.scss +1 -1
  195. package/scss/utilities/inset.scss +1 -1
  196. package/scss/utilities/justification.scss +1 -1
  197. package/scss/utilities/list.scss +1 -1
  198. package/scss/utilities/order.scss +1 -1
  199. package/scss/utilities/position.scss +3 -0
  200. package/scss/utilities/ratio.scss +1 -1
  201. package/scss/utilities/spacing.scss +1 -1
  202. package/scss/utilities/typography.scss +1 -1
  203. package/scss/utilities/visibility.scss +1 -1
  204. package/scss/utilities/visually-hidden.scss +3 -0
  205. package/scss/utilities/width.scss +1 -1
  206. package/scss/utilities/z-index.scss +3 -0
  207. package/scss/utilities.scss +1 -1
  208. package/.browserslistrc +0 -3
  209. package/.czrc +0 -3
  210. package/.editorconfig +0 -13
  211. package/.github/CODE_OF_CONDUCT.md +0 -73
  212. package/.github/COMMIT_CONVENTION.md +0 -17
  213. package/.github/CONTRIBUTING.md +0 -86
  214. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  215. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  216. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  217. package/.github/SECURITY.md +0 -26
  218. package/.github/dependabot.yml +0 -17
  219. package/.github/pull_request_template.md +0 -5
  220. package/.github/workflows/codeql-analysis.yml +0 -71
  221. package/.github/workflows/docs.yml +0 -59
  222. package/.github/workflows/test.yml +0 -27
  223. package/.husky/commit-msg +0 -3
  224. package/.husky/pre-commit +0 -4
  225. package/.prettierignore +0 -12
  226. package/.stylelintignore +0 -9
  227. package/.versionrc.cjs +0 -61
  228. package/CHANGELOG.md +0 -392
  229. package/build.js +0 -7
  230. package/commitlint.config.js +0 -5
  231. package/dist/css/utilities/postion.css +0 -2
  232. package/dist/css/utilities/postion.css.map +0 -1
  233. package/dist/js/component/accordion.esm.js +0 -1289
  234. package/dist/js/component/alert.esm.js +0 -529
  235. package/dist/js/component/carousel.esm.js +0 -1110
  236. package/dist/js/graupl.cjs.js +0 -5
  237. package/dist/js/graupl.esm.js +0 -1462
  238. package/dist/js/graupl.iife.js +0 -5
  239. package/docs/.vitepress/config.js +0 -78
  240. package/docs/.vitepress/theme/custom.scss +0 -35
  241. package/docs/.vitepress/theme/index.js +0 -4
  242. package/docs/compiling-graupl.md +0 -56
  243. package/docs/components/alert.md +0 -130
  244. package/docs/components/button.md +0 -84
  245. package/docs/components/card.md +0 -369
  246. package/docs/components/index.md +0 -1
  247. package/docs/components/inputgroup.md +0 -159
  248. package/docs/components/menu.md +0 -326
  249. package/docs/components/navigation.md +0 -158
  250. package/docs/content.md +0 -237
  251. package/docs/defaults.md +0 -121
  252. package/docs/forms.md +0 -79
  253. package/docs/functions.md +0 -9
  254. package/docs/getting-started.md +0 -1
  255. package/docs/index.md +0 -1
  256. package/docs/introduction.md +0 -25
  257. package/docs/layout.md +0 -200
  258. package/docs/mixins.md +0 -47
  259. package/docs/state.md +0 -67
  260. package/docs/theme.md +0 -258
  261. package/docs/utilities.md +0 -357
  262. package/eslint.config.js +0 -74
  263. package/index.html +0 -923
  264. package/index.js +0 -12
  265. package/lint-staged.config.js +0 -6
  266. package/postcss.config.cjs +0 -12
  267. package/prettier.config.js +0 -16
  268. package/scss/utilities/postion.scss +0 -3
  269. package/src/js/accordion/Accordion.js +0 -1163
  270. package/src/js/accordion/AccordionItem.js +0 -496
  271. package/src/js/accordion/index.js +0 -10
  272. package/src/js/alert/Alert.js +0 -581
  273. package/src/js/alert/index.js +0 -11
  274. package/src/js/carousel/Carousel.js +0 -1427
  275. package/src/js/carousel/index.js +0 -10
  276. package/src/js/domHelpers.js +0 -37
  277. package/src/js/eventHandlers.js +0 -39
  278. package/src/js/navigation/index.js +0 -36
  279. package/src/js/storage.js +0 -106
  280. package/src/js/validate.js +0 -225
  281. package/src/scss/_defaults.scss +0 -145
  282. package/src/scss/_index.scss +0 -15
  283. package/src/scss/_init.scss +0 -3
  284. package/src/scss/_normalize.scss +0 -197
  285. package/src/scss/_variables.scss +0 -53
  286. package/src/scss/base/_index.scss +0 -6
  287. package/src/scss/base/button/_defaults.scss +0 -60
  288. package/src/scss/base/button/_index.scss +0 -107
  289. package/src/scss/base/button/_mixins.scss +0 -166
  290. package/src/scss/base/button/_variables.scss +0 -176
  291. package/src/scss/base/form/_defaults.scss +0 -17
  292. package/src/scss/base/form/_index.scss +0 -93
  293. package/src/scss/base/form/_variables.scss +0 -153
  294. package/src/scss/base/link/_defaults.scss +0 -50
  295. package/src/scss/base/link/_index.scss +0 -134
  296. package/src/scss/base/link/_variables.scss +0 -262
  297. package/src/scss/base/table/_defaults.scss +0 -53
  298. package/src/scss/base/table/_index.scss +0 -121
  299. package/src/scss/base/table/_variables.scss +0 -135
  300. package/src/scss/component/_index.scss +0 -10
  301. package/src/scss/component/accordion/_defaults.scss +0 -40
  302. package/src/scss/component/accordion/_index.scss +0 -180
  303. package/src/scss/component/accordion/_variables.scss +0 -316
  304. package/src/scss/component/alert/_defaults.scss +0 -49
  305. package/src/scss/component/alert/_index.scss +0 -118
  306. package/src/scss/component/alert/_variables.scss +0 -170
  307. package/src/scss/component/card/_defaults.scss +0 -32
  308. package/src/scss/component/card/_index.scss +0 -178
  309. package/src/scss/component/card/_variables.scss +0 -186
  310. package/src/scss/component/carousel/_defaults.scss +0 -43
  311. package/src/scss/component/carousel/_index.scss +0 -188
  312. package/src/scss/component/carousel/_variables.scss +0 -104
  313. package/src/scss/component/input-group/_defaults.scss +0 -30
  314. package/src/scss/component/input-group/_index.scss +0 -47
  315. package/src/scss/component/input-group/_variables.scss +0 -66
  316. package/src/scss/component/list/_defaults.scss +0 -15
  317. package/src/scss/component/list/_index.scss +0 -50
  318. package/src/scss/component/list/_variables.scss +0 -176
  319. package/src/scss/component/menu/_defaults.scss +0 -66
  320. package/src/scss/component/menu/_index.scss +0 -305
  321. package/src/scss/component/menu/_variables.scss +0 -500
  322. package/src/scss/component/navigation/_defaults.scss +0 -29
  323. package/src/scss/component/navigation/_index.scss +0 -189
  324. package/src/scss/component/navigation/_variables.scss +0 -237
  325. package/src/scss/functions/_important.scss +0 -13
  326. package/src/scss/functions/_screen.scss +0 -38
  327. package/src/scss/functions/_theme.scss +0 -39
  328. package/src/scss/functions/_utility.scss +0 -28
  329. package/src/scss/layout/_index.scss +0 -5
  330. package/src/scss/layout/columns/_defaults.scss +0 -19
  331. package/src/scss/layout/columns/_index.scss +0 -58
  332. package/src/scss/layout/columns/_variables.scss +0 -51
  333. package/src/scss/layout/container/_defaults.scss +0 -17
  334. package/src/scss/layout/container/_index.scss +0 -41
  335. package/src/scss/layout/container/_variables.scss +0 -50
  336. package/src/scss/layout/flex-columns/_defaults.scss +0 -18
  337. package/src/scss/layout/flex-columns/_index.scss +0 -80
  338. package/src/scss/layout/flex-columns/_variables.scss +0 -26
  339. package/src/scss/mixins/_animation.scss +0 -15
  340. package/src/scss/mixins/_layer.scss +0 -16
  341. package/src/scss/mixins/_screen.scss +0 -77
  342. package/src/scss/mixins/_state.scss +0 -18
  343. package/src/scss/mixins/_theme.scss +0 -15
  344. package/src/scss/mixins/_utility.scss +0 -132
  345. package/src/scss/mixins/_visually-hidden.scss +0 -20
  346. package/src/scss/state/_index.scss +0 -3
  347. package/src/scss/state/focus/_defaults.scss +0 -10
  348. package/src/scss/state/focus/_index.scss +0 -13
  349. package/src/scss/state/focus/_mixins.scss +0 -15
  350. package/src/scss/state/focus/_variables.scss +0 -44
  351. package/src/scss/theme/_index.scss +0 -4
  352. package/src/scss/theme/color/_defaults.scss +0 -143
  353. package/src/scss/theme/color/_index.scss +0 -42
  354. package/src/scss/theme/color/_variables.scss +0 -129
  355. package/src/scss/theme/typography/_defaults.scss +0 -54
  356. package/src/scss/theme/typography/_index.scss +0 -111
  357. package/src/scss/theme/typography/_variables.scss +0 -231
  358. package/src/scss/utilities/_index.scss +0 -18
  359. package/src/scss/utilities/alignment/_defaults.scss +0 -64
  360. package/src/scss/utilities/alignment/_index.scss +0 -168
  361. package/src/scss/utilities/alignment/_variables.scss +0 -6
  362. package/src/scss/utilities/border/_defaults.scss +0 -61
  363. package/src/scss/utilities/border/_index.scss +0 -269
  364. package/src/scss/utilities/border/_variables.scss +0 -6
  365. package/src/scss/utilities/color/_defaults.scss +0 -37
  366. package/src/scss/utilities/color/_index.scss +0 -202
  367. package/src/scss/utilities/color/_variables.scss +0 -6
  368. package/src/scss/utilities/display/_defaults.scss +0 -36
  369. package/src/scss/utilities/display/_index.scss +0 -134
  370. package/src/scss/utilities/display/_variables.scss +0 -6
  371. package/src/scss/utilities/flex/_defaults.scss +0 -87
  372. package/src/scss/utilities/flex/_index.scss +0 -255
  373. package/src/scss/utilities/flex/_variables.scss +0 -6
  374. package/src/scss/utilities/height/_defaults.scss +0 -43
  375. package/src/scss/utilities/height/_index.scss +0 -236
  376. package/src/scss/utilities/height/_variables.scss +0 -6
  377. package/src/scss/utilities/inset/_defaults.scss +0 -43
  378. package/src/scss/utilities/inset/_index.scss +0 -90
  379. package/src/scss/utilities/inset/_variables.scss +0 -6
  380. package/src/scss/utilities/justification/_defaults.scss +0 -61
  381. package/src/scss/utilities/justification/_index.scss +0 -168
  382. package/src/scss/utilities/justification/_variables.scss +0 -6
  383. package/src/scss/utilities/list/_defaults.scss +0 -41
  384. package/src/scss/utilities/list/_index.scss +0 -125
  385. package/src/scss/utilities/list/_variables.scss +0 -6
  386. package/src/scss/utilities/order/_defaults.scss +0 -24
  387. package/src/scss/utilities/order/_index.scss +0 -111
  388. package/src/scss/utilities/order/_variables.scss +0 -6
  389. package/src/scss/utilities/position/_defaults.scss +0 -28
  390. package/src/scss/utilities/position/_index.scss +0 -82
  391. package/src/scss/utilities/position/_variables.scss +0 -6
  392. package/src/scss/utilities/ratio/_defaults.scss +0 -30
  393. package/src/scss/utilities/ratio/_index.scss +0 -91
  394. package/src/scss/utilities/ratio/_variables.scss +0 -9
  395. package/src/scss/utilities/spacing/_defaults.scss +0 -51
  396. package/src/scss/utilities/spacing/_index.scss +0 -382
  397. package/src/scss/utilities/spacing/_variables.scss +0 -6
  398. package/src/scss/utilities/typography/_defaults.scss +0 -46
  399. package/src/scss/utilities/typography/_index.scss +0 -658
  400. package/src/scss/utilities/typography/_variables.scss +0 -6
  401. package/src/scss/utilities/visibility/_defaults.scss +0 -27
  402. package/src/scss/utilities/visibility/_index.scss +0 -82
  403. package/src/scss/utilities/visibility/_variables.scss +0 -6
  404. package/src/scss/utilities/width/_defaults.scss +0 -43
  405. package/src/scss/utilities/width/_index.scss +0 -236
  406. package/src/scss/utilities/width/_variables.scss +0 -6
  407. package/stylelint.config.js +0 -22
  408. package/vite.config.js +0 -57
package/docs/components/menu.md DELETED
@@ -1,326 +0,0 @@
1
- # Menu
2
-
3
- Defaults
4
-
5
- ```jsx
6
- // Menu selectors.
7
- $menu-selector: ".menu" !default;
8
- $submenu-selector: ".submenu" !default;
9
- $menu-item-selector: ".menu-item" !default;
10
- $menu-link-selector: ".menu-link" !default;
11
- $submenu-toggle-selector: ".submenu-toggle" !default;
12
- $menu-show-selector: ".show" !default;
13
- $menu-hide-selector: ".hide" !default;
14
-
15
- // Flex properties.
16
- $menu-flex-direction: row !default;
17
- $submenu-flex-direction: column !default;
18
-
19
- // Visibility properties.
20
- $menu-show-display: flex !default;
21
- $menu-hide-display: none !default;
22
- $submenu-show-display: $menu-show-display !default;
23
- $submenu-hide-display: $menu-hide-display !default;
24
-
25
- // Menu item properties.
26
- $menu-item-min-width: min-content !default;
27
- $menu-item-max-width: 100% !default;
28
-
29
- // Submenu properties.
30
- $submenu-position: absolute !default;
31
- $submenu-z-index: 2 !default;
32
- $submenu-top: 100% !default;
33
- $submenu-right: auto !default;
34
- $submenu-bottom: auto !default;
35
- $submenu-left: 0 !default;
36
-
37
- // Submenu item properties.
38
- $submenu-item-width: 100% !default;
39
-
40
- // Menu link properties.
41
- $menu-link-text-decoration: none !default;
42
- $menu-link-visited-text-decoration: $menu-link-text-decoration !default;
43
- $menu-link-focus-text-decoration: $menu-link-text-decoration !default;
44
- $menu-link-hover-text-decoration: $menu-link-text-decoration !default;
45
- $menu-link-active-text-decoration: $menu-link-text-decoration !default;
46
- $menu-link-disabled-text-decoration: $menu-link-text-decoration !default;
47
- $menu-link-text-decoration-style: solid !default;
48
- $menu-link-visited-text-decoration-style: $menu-link-text-decoration-style !default;
49
- $menu-link-focus-text-decoration-style: $menu-link-text-decoration-style !default;
50
- $menu-link-hover-text-decoration-style: $menu-link-text-decoration-style !default;
51
- $menu-link-active-text-decoration-style: $menu-link-text-decoration-style !default;
52
- $menu-link-disabled-text-decoration-style: $menu-link-text-decoration-style !default;
53
- $menu-link-transform: none !default;
54
- $menu-link-visited-transform: $menu-link-transform !default;
55
- $menu-link-focus-transform: $menu-link-transform !default;
56
- $menu-link-hover-transform: $menu-link-transform !default;
57
- $menu-link-active-transform: $menu-link-transform !default;
58
- $menu-link-disabled-transform: $menu-link-transform !default;
59
- $menu-border-width: 0 !default;
60
- $menu-link-border-width: 0 !default;
61
- $submenu-toggle-transform: rotate(0deg) !default;
62
- $submenu-toggle-open-transform: rotate(-180deg) !default;
63
- $submenu-toggle-content: "'▼'" !default;
64
- ```
65
-
66
- Variables
67
-
68
- The menu properties:
69
-
70
- ```scss
71
- --#{root-defaults.$prefix}menu-flex-direction
72
- --#{root-defaults.$prefix}menu-padding-x
73
- --#{root-defaults.$prefix}menu-padding-y
74
- --#{root-defaults.$prefix}menu-padding
75
-
76
- ```
77
-
78
- The menu gap properties:
79
-
80
- ```scss
81
- --#{root-defaults.$prefix}menu-column-gap
82
- --#{root-defaults.$prefix}menu-row-gap
83
- --#{root-defaults.$prefix}menu-gap
84
-
85
- ```
86
-
87
- The menu display properties:
88
-
89
- ```scss
90
- --#{root-defaults.$prefix}menu-show-display
91
- --#{root-defaults.$prefix}menu-hide-display
92
- --#{root-defaults.$prefix}menu-display
93
-
94
- ```
95
-
96
- The menu color properties:
97
-
98
- ```scss
99
- --#{root-defaults.$prefix}menu-background
100
- --#{root-defaults.$prefix}menu-color
101
-
102
- ```
103
-
104
- The menu border properties:
105
-
106
- ```scss
107
- --#{root-defaults.$prefix}menu-border-color
108
- --#{root-defaults.$prefix}menu-border-radius
109
- --#{root-defaults.$prefix}menu-border-style
110
- --#{root-defaults.$prefix}menu-border-width
111
- --#{root-defaults.$prefix}menu-border
112
-
113
- ```
114
-
115
- The submenu properties:
116
-
117
- ```scss
118
- --#{root-defaults.$prefix}submenu-flex-direction
119
- --#{root-defaults.$prefix}submenu-z-index
120
- --#{root-defaults.$prefix}submenu-padding-x
121
- --#{root-defaults.$prefix}submenu-padding-y
122
- --#{root-defaults.$prefix}submenu-padding
123
-
124
- ```
125
-
126
- The submenu gap properties:
127
-
128
- ```scss
129
- --#{root-defaults.$prefix}submenu-column-gap
130
- --#{root-defaults.$prefix}submenu-row-gap
131
- --#{root-defaults.$prefix}submenu-gap
132
-
133
- ```
134
-
135
- The submenu display properties:
136
-
137
- ```scss
138
- --#{root-defaults.$prefix}submenu-show-display
139
- --#{root-defaults.$prefix}submenu-hide-display
140
- --#{root-defaults.$prefix}submenu-display
141
-
142
- ```
143
-
144
- The submenu color properties:
145
-
146
- ```scss
147
- --#{root-defaults.$prefix}submenu-background
148
- --#{root-defaults.$prefix}submenu-color
149
-
150
- ```
151
-
152
- The submenu border properties:
153
-
154
- ```scss
155
- --#{root-defaults.$prefix}submenu-border-color
156
- --#{root-defaults.$prefix}submenu-border-radius
157
- --#{root-defaults.$prefix}submenu-border-style
158
- --#{root-defaults.$prefix}submenu-border-width
159
- --#{root-defaults.$prefix}submenu-border
160
-
161
- ```
162
-
163
- The submenu position properties:
164
-
165
- ```scss
166
- --#{root-defaults.$prefix}submenu-position
167
- --#{root-defaults.$prefix}submenu-top
168
- --#{root-defaults.$prefix}submenu-right
169
- --#{root-defaults.$prefix}submenu-bottom
170
- --#{root-defaults.$prefix}submenu-left
171
- --#{root-defaults.$prefix}submenu-inset
172
-
173
- ```
174
-
175
- The menu item properties:
176
-
177
- ```scss
178
- --#{root-defaults.$prefix}menu-item-min-width
179
- --#{root-defaults.$prefix}menu-item-max-width
180
- --#{root-defaults.$prefix}menu-item-padding-x
181
- --#{root-defaults.$prefix}menu-item-padding-y
182
- --#{root-defaults.$prefix}menu-item-padding
183
-
184
- ```
185
-
186
- The submenu item properties:
187
-
188
- ```scss
189
- --#{root-defaults.$prefix}submenu-item-width
190
-
191
- ```
192
-
193
- The menu link properties:
194
-
195
- ```scss
196
- --#{root-defaults.$prefix}menu-link-padding-x
197
- --#{root-defaults.$prefix}menu-link-padding-y
198
- --#{root-defaults.$prefix}menu-link-padding
199
-
200
- ```
201
-
202
- The menu link transform properties:
203
-
204
- ```scss
205
- --#{root-defaults.$prefix}menu-link-transition
206
- --#{root-defaults.$prefix}menu-link-transition-reduced-motion
207
- --#{root-defaults.$prefix}menu-link-transform
208
- --#{root-defaults.$prefix}menu-link-visited-transform
209
- --#{root-defaults.$prefix}menu-link-focus-transform
210
- --#{root-defaults.$prefix}menu-link-hover-transform
211
- --#{root-defaults.$prefix}menu-link-active-transform
212
- --#{root-defaults.$prefix}menu-link-disabled-transform
213
-
214
- ```
215
-
216
- The menu link gap properties:
217
-
218
- ```scss
219
- --#{root-defaults.$prefix}menu-link-column-gap
220
- --#{root-defaults.$prefix}menu-link-row-gap
221
- --#{root-defaults.$prefix}menu-link-gap
222
-
223
- ```
224
-
225
- The menu link colors:
226
-
227
- ```scss
228
- --#{root-defaults.$prefix}menu-link-background
229
- --#{root-defaults.$prefix}menu-link-visited-background
230
- --#{root-defaults.$prefix}menu-link-focus-background
231
- --#{root-defaults.$prefix}menu-link-hover-background
232
- --#{root-defaults.$prefix}menu-link-active-background
233
- --#{root-defaults.$prefix}menu-link-disabled-background
234
- --#{root-defaults.$prefix}menu-link-color
235
- --#{root-defaults.$prefix}menu-link-visited-color
236
- --#{root-defaults.$prefix}menu-link-focus-color
237
- --#{root-defaults.$prefix}menu-link-hover-color
238
- --#{root-defaults.$prefix}menu-link-active-color
239
- --#{root-defaults.$prefix}menu-link-disabled-color
240
-
241
- ```
242
-
243
- The menu link text decoration properties:
244
-
245
- ```scss
246
- --#{root-defaults.$prefix}menu-link-text-decoration
247
- --#{root-defaults.$prefix}menu-link-visited-text-decoration
248
- --#{root-defaults.$prefix}menu-link-focus-text-decoration
249
- --#{root-defaults.$prefix}menu-link-hover-text-decoration
250
- --#{root-defaults.$prefix}menu-link-active-text-decoration
251
- --#{root-defaults.$prefix}menu-link-disabled-text-decoration
252
- --#{root-defaults.$prefix}menu-link-text-decoration-thickness
253
- --#{root-defaults.$prefix}menu-link-visited-text-decoration-thickness
254
- --#{root-defaults.$prefix}menu-link-focus-text-decoration-thickness
255
- --#{root-defaults.$prefix}menu-link-hover-text-decoration-thickness
256
- --#{root-defaults.$prefix}menu-link-active-text-decoration-thickness
257
- --#{root-defaults.$prefix}menu-link-disabled-text-decoration-thickness
258
- --#{root-defaults.$prefix}menu-link-text-decoration-style
259
- --#{root-defaults.$prefix}menu-link-visited-text-decoration-style
260
- --#{root-defaults.$prefix}menu-link-focus-text-decoration-style
261
- --#{root-defaults.$prefix}menu-link-hover-text-decoration-style
262
- --#{root-defaults.$prefix}menu-link-active-text-decoration-style
263
- --#{root-defaults.$prefix}menu-link-disabled-text-decoration-style
264
- --#{root-defaults.$prefix}menu-link-text-decoration-color
265
- --#{root-defaults.$prefix}menu-link-visited-text-decoration-color
266
- --#{root-defaults.$prefix}menu-link-focus-text-decoration-color
267
- --#{root-defaults.$prefix}menu-link-hover-text-decoration-color
268
- --#{root-defaults.$prefix}menu-link-active-text-decoration-color
269
- --#{root-defaults.$prefix}menu-link-disabled-text-decoration-color
270
-
271
- ```
272
-
273
- The menu link border properties:
274
-
275
- ```scss
276
- --#{root-defaults.$prefix}menu-link-border-radius
277
- --#{root-defaults.$prefix}menu-link-border-style
278
- --#{root-defaults.$prefix}menu-link-border-width
279
- --#{root-defaults.$prefix}menu-link-border
280
- --#{root-defaults.$prefix}menu-link-border-color
281
- --#{root-defaults.$prefix}menu-link-visited-border-color
282
- --#{root-defaults.$prefix}menu-link-focus-border-color
283
- --#{root-defaults.$prefix}menu-link-hover-border-color
284
- --#{root-defaults.$prefix}menu-link-active-border-color
285
- --#{root-defaults.$prefix}menu-link-disabled-border-color
286
-
287
- ```
288
-
289
- The submenu toggle properties:
290
-
291
- ```scss
292
- --#{root-defaults.$prefix}submenu-toggle-transform
293
- --#{root-defaults.$prefix}submenu-toggle-open-transform
294
- --#{root-defaults.$prefix}submenu-toggle-content
295
- --#{root-defaults.$prefix}submenu-toggle-transition
296
- --#{root-defaults.$prefix}submenu-toggle-transition-reduced-motion
297
-
298
- ```
299
-
300
- Markup
301
-
302
- ```jsx
303
- <div class="py-10 full-width container">
304
- <div class="py-7">
305
- <nav class="navigation" data-graupl-menu-type="DisclosureMenu" data-graupl-menu-options="{'optionalKeySupport': true}">
306
- <a class="navigation-branding" href="#">Graupl</a>
307
- <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
308
- <ul class="menu">
309
- <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
310
- <li class="menu-item submenu-item">
311
- <button class="menu-link button link submenu-toggle">About</button>
312
- <ul class="submenu">
313
- <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
314
- <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
315
- <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
316
- </ul>
317
- </li>
318
- <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
319
- <li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
320
- <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
321
- </ul>
322
- </nav>
323
- </div>
324
- </div>
325
- </div>
326
- ```
package/docs/components/navigation.md DELETED
@@ -1,158 +0,0 @@
1
- # Navigation
2
-
3
- Default
4
-
5
- ```jsx
6
- // Navigation selectors.
7
- $navigation-selector: ".navigation" !default;
8
- $navigation-toggle-selector: ".navigation-toggle" !default;
9
- $navigation-branding-selector: ".navigation-branding" !default;
10
-
11
- // Navigation toggle properties.
12
- $navigation-toggle-content: "'☰'" !default;
13
-
14
- // Navigation branding properties.
15
- $navigation-branding-text-decoration: none !default;
16
- $navigation-branding-visited-text-decoration: $navigation-branding-text-decoration !default;
17
- $navigation-branding-focus-text-decoration: $navigation-branding-text-decoration !default;
18
- $navigation-branding-hover-text-decoration: $navigation-branding-text-decoration !default;
19
- $navigation-branding-active-text-decoration: $navigation-branding-text-decoration !default;
20
- $navigation-branding-disabled-text-decoration: $navigation-branding-text-decoration !default;
21
- $navigation-branding-text-decoration-style: solid !default;
22
- $navigation-branding-visited-text-decoration-style: $navigation-branding-text-decoration-style !default;
23
- $navigation-branding-focus-text-decoration-style: $navigation-branding-text-decoration-style !default;
24
- $navigation-branding-hover-text-decoration-style: $navigation-branding-text-decoration-style !default;
25
- $navigation-branding-active-text-decoration-style: $navigation-branding-text-decoration-style !default;
26
- $navigation-branding-disabled-text-decoration-style: $navigation-branding-text-decoration-style !default;
27
- ```
28
-
29
- Variables
30
-
31
- The navigation colors:
32
-
33
- ```scss
34
- --#{root-defaults.$prefix}navigation-background
35
- --#{root-defaults.$prefix}navigation-color
36
-
37
- ```
38
-
39
- The navigation toggle size:
40
-
41
- ```scss
42
- --#{root-defaults.$prefix}navigation-toggle-min-width
43
- --#{root-defaults.$prefix}navigation-toggle-min-height
44
-
45
- ```
46
-
47
- The navigation toggle spacing:
48
-
49
- ```scss
50
- --#{root-defaults.$prefix}navigation-toggle-padding-x
51
- --#{root-defaults.$prefix}navigation-toggle-padding-y
52
- --#{root-defaults.$prefix}navigation-toggle-padding
53
-
54
- ```
55
-
56
- The navigation toggle colors:
57
-
58
- ```scss
59
- --#{root-defaults.$prefix}navigation-toggle-background
60
- --#{root-defaults.$prefix}navigation-toggle-color
61
- --#{root-defaults.$prefix}navigation-toggle-hover-background
62
- --#{root-defaults.$prefix}navigation-toggle-hover-color
63
-
64
- ```
65
-
66
- The navigation toggle border properties:
67
-
68
- ```scss
69
- --#{root-defaults.$prefix}navigation-toggle-border-width
70
- --#{root-defaults.$prefix}navigation-toggle-border-style
71
- --#{root-defaults.$prefix}navigation-toggle-border
72
- --#{root-defaults.$prefix}navigation-toggle-border-color
73
- --#{root-defaults.$prefix}navigation-toggle-border-radius
74
-
75
- ```
76
-
77
- The navigation branding properties:
78
-
79
- ```scss
80
- --#{root-defaults.$prefix}navigation-branding-font-size
81
- --#{root-defaults.$prefix}navigation-branding-font-weight
82
- --#{root-defaults.$prefix}navigation-branding-padding-x
83
- --#{root-defaults.$prefix}navigation-branding-padding-y
84
- --#{root-defaults.$prefix}navigation-branding-padding
85
-
86
- ```
87
-
88
- The navigation branding colors:
89
-
90
- ```scss
91
- --#{root-defaults.$prefix}navigation-branding-color
92
- --#{root-defaults.$prefix}navigation-branding-visited-color
93
- --#{root-defaults.$prefix}navigation-branding-focus-color
94
- --#{root-defaults.$prefix}navigation-branding-hover-color
95
- --#{root-defaults.$prefix}navigation-branding-active-color
96
- --#{root-defaults.$prefix}navigation-branding-disabled-color
97
-
98
- ```
99
-
100
- The navigation branding text decoration properties:
101
-
102
- ```scss
103
- --#{root-defaults.$prefix}navigation-branding-text-decoration
104
- --#{root-defaults.$prefix}navigation-branding-visited-text-decoration
105
- --#{root-defaults.$prefix}navigation-branding-focus-text-decoration
106
- --#{root-defaults.$prefix}navigation-branding-hover-text-decoration
107
- --#{root-defaults.$prefix}navigation-branding-active-text-decoration
108
- --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration
109
- --#{root-defaults.$prefix}navigation-branding-text-decoration-style
110
- --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style
111
- --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style
112
- --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style
113
- --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style
114
- --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-style
115
- --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness
116
- --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-thickness
117
- --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness
118
- --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-thickness
119
- --#{root-defaults.$prefix}navigation-branding-active-text-decoration-thickness
120
- --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-thickness
121
- --#{root-defaults.$prefix}navigation-branding-text-decoration-color
122
- --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-color
123
- --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-color
124
- --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-color
125
- --#{root-defaults.$prefix}navigation-branding-active-text-decoration-color
126
- --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-color
127
-
128
- ```
129
-
130
- The navigation toggle properties:
131
-
132
- ```scss
133
- --#{root-defaults.$prefix}navigation-toggle-content
134
-
135
- ```
136
-
137
- Markup
138
-
139
- ```jsx
140
- <nav class="navigation" data-graupl-menu-type="DisclosureMenu" data-graupl-menu-options="{'optionalKeySupport': true}">
141
- <a class="navigation-branding" href="#">Graupl</a>
142
- <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
143
- <ul class="menu">
144
- <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
145
- <li class="menu-item submenu-item">
146
- <button class="menu-link button link submenu-toggle">About</button>
147
- <ul class="submenu">
148
- <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
149
- <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
150
- <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
151
- </ul>
152
- </li>
153
- <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
154
- <li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
155
- <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
156
- </ul>
157
- </nav>
158
- ```