brut 0.0.20 → 0.0.22

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 (728) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +24 -3
  3. data/.nvim.lua +1 -0
  4. data/Dockerfile.dx +12 -3
  5. data/Gemfile.lock +9 -7
  6. data/README.md +0 -7
  7. data/Rakefile +6 -4
  8. data/bin/dev +20 -0
  9. data/bin/docs +27 -0
  10. data/bin/setup +47 -1
  11. data/brut-css/.nvim.lua +1 -0
  12. data/brut-css/README.md +28 -0
  13. data/brut-css/bin/build +31 -0
  14. data/brut-css/bin/dev +1 -0
  15. data/brut-css/bin/docs +15 -0
  16. data/brut-css/bin/setup +5 -0
  17. data/brut-css/config/media-queries-all.css +15 -0
  18. data/brut-css/config/media-queries-minimal.css +5 -0
  19. data/brut-css/config/postcss.config.cjs +7 -0
  20. data/brut-css/config/pseudo-classes-all.css +9 -0
  21. data/brut-css/dx +1 -0
  22. data/brut-css/package-lock.json +3217 -0
  23. data/brut-css/package.json +36 -0
  24. data/brut-css/src/css/appearance.css +145 -0
  25. data/brut-css/src/css/border.css +522 -0
  26. data/brut-css/src/css/colors.css +3502 -0
  27. data/brut-css/src/css/dimensions.css +548 -0
  28. data/brut-css/src/css/flex.css +179 -0
  29. data/brut-css/src/css/index.css +13 -0
  30. data/brut-css/src/css/layout.css +120 -0
  31. data/brut-css/src/css/list.css +41 -0
  32. data/brut-css/src/css/positioning.css +354 -0
  33. data/brut-css/src/css/properties/colors.css +455 -0
  34. data/brut-css/src/css/properties/index.css +3 -0
  35. data/brut-css/src/css/properties/spacing.css +140 -0
  36. data/brut-css/src/css/properties/typography.css +224 -0
  37. data/brut-css/src/css/reset.css +107 -0
  38. data/brut-css/src/css/spacing.css +585 -0
  39. data/brut-css/src/css/typography.css +519 -0
  40. data/brut-css/src/css/utils.css +104 -0
  41. data/brut-css/src/docs/1_getting-started/1_overview.md +46 -0
  42. data/brut-css/src/docs/1_getting-started/2_installation.md +25 -0
  43. data/brut-css/src/docs/1_getting-started/3_core-concepts.md +75 -0
  44. data/brut-css/src/docs/1_getting-started/4_simple-example.md +132 -0
  45. data/brut-css/src/docs/1_getting-started/page.html.ejs +10 -0
  46. data/brut-css/src/docs/2_properties/page.html.ejs +71 -0
  47. data/brut-css/src/docs/3_classes/color-demo.html.ejs +31 -0
  48. data/brut-css/src/docs/3_classes/page.html.ejs +87 -0
  49. data/brut-css/src/docs/4_customization/1_design-system.md +36 -0
  50. data/brut-css/src/docs/4_customization/2_breakpoints.md +75 -0
  51. data/brut-css/src/docs/4_customization/3_pseudo-classes.md +74 -0
  52. data/brut-css/src/docs/4_customization/4_advanced-configuration.md +40 -0
  53. data/brut-css/src/docs/4_customization/page.html.ejs +10 -0
  54. data/brut-css/src/docs/docs.css +98 -0
  55. data/brut-css/src/docs/includes/body-and-header.html.ejs +30 -0
  56. data/brut-css/src/docs/includes/footer-and-rest.html.ejs +9 -0
  57. data/brut-css/src/docs/includes/head.html.ejs +5 -0
  58. data/brut-css/src/docs/includes/nav.html.ejs +10 -0
  59. data/brut-css/src/docs/index.html.ejs +32 -0
  60. data/brut-css/src/docs/prism-twilight.min.css +1 -0
  61. data/brut-css/src/js/Logger.js +71 -0
  62. data/brut-css/src/js/build.js +111 -0
  63. data/brut-css/src/js/cli/CLIArgError.js +7 -0
  64. data/brut-css/src/js/cli/Debug.js +27 -0
  65. data/brut-css/src/js/cli/DocsDir.js +16 -0
  66. data/brut-css/src/js/cli/DocsTemplateSourceDir.js +16 -0
  67. data/brut-css/src/js/cli/InputFile.js +31 -0
  68. data/brut-css/src/js/cli/MediaQueryConfigFile.js +10 -0
  69. data/brut-css/src/js/cli/OutputFile.js +22 -0
  70. data/brut-css/src/js/cli/ParsedArg.js +17 -0
  71. data/brut-css/src/js/cli/PathToBrutCSSRoot.js +19 -0
  72. data/brut-css/src/js/cli/PseudoClassConfigFile.js +11 -0
  73. data/brut-css/src/js/cli.js +108 -0
  74. data/brut-css/src/js/docGenerator.js +467 -0
  75. data/brut-css/src/js/mediaQueryConfigParser.js +98 -0
  76. data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +49 -0
  77. data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +42 -0
  78. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +9 -0
  79. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +185 -0
  80. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +8 -0
  81. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +7 -0
  82. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +73 -0
  83. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +9 -0
  84. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +4 -0
  85. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +8 -0
  86. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +12 -0
  87. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +4 -0
  88. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +8 -0
  89. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +5 -0
  90. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +9 -0
  91. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +49 -0
  92. data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +45 -0
  93. data/brut-css/src/js/pseudoClassConfigParser.js +145 -0
  94. data/brut-js/.projections.json +10 -0
  95. data/brut-js/README.md +118 -0
  96. data/brut-js/bin/build +10 -0
  97. data/brut-js/bin/ci +5 -0
  98. data/brut-js/bin/setup +5 -0
  99. data/brut-js/docs/README.md +8 -0
  100. data/brut-js/docs/jsdoc-plugins/customElementTag.js +8 -0
  101. data/brut-js/docs/jsdoc-theme/publish.js +692 -0
  102. data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +25 -0
  103. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +202 -0
  104. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +2 -0
  105. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +28 -0
  106. data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +327 -0
  107. data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +111 -0
  108. data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +132 -0
  109. data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +10 -0
  110. data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +199 -0
  111. data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +143 -0
  112. data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +2 -0
  113. data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +13 -0
  114. data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +32 -0
  115. data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +38 -0
  116. data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +14 -0
  117. data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +38 -0
  118. data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +131 -0
  119. data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +14 -0
  120. data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +131 -0
  121. data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +108 -0
  122. data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +19 -0
  123. data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +8 -0
  124. data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +19 -0
  125. data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +7 -0
  126. data/brut-js/docs/jsdoc.config.json +23 -0
  127. data/brut-js/docs/package-lock.json +343 -0
  128. data/brut-js/docs/package.json +7 -0
  129. data/brut-js/package-lock.json +2171 -0
  130. data/brut-js/package.json +32 -0
  131. data/brut-js/specs/AjaxSubmit.spec.js +256 -0
  132. data/brut-js/specs/Autosubmit.spec.js +127 -0
  133. data/brut-js/specs/ConfirmSubmit.spec.js +193 -0
  134. data/brut-js/specs/ConstraintViolationMessage.spec.js +33 -0
  135. data/brut-js/specs/ConstraintViolationMessages.spec.js +29 -0
  136. data/brut-js/specs/CopyToClipboard.spec.js +35 -0
  137. data/brut-js/specs/Form.spec.js +181 -0
  138. data/brut-js/specs/I18nTranslation.spec.js +19 -0
  139. data/brut-js/specs/LocaleDetection.spec.js +22 -0
  140. data/brut-js/specs/Message.spec.js +15 -0
  141. data/brut-js/specs/SpecHelper.js +23 -0
  142. data/brut-js/specs/Tabs.spec.js +41 -0
  143. data/brut-js/specs/config/asset_metadata.json +7 -0
  144. data/brut-js/src/AjaxSubmit.js +384 -0
  145. data/brut-js/src/Autosubmit.js +63 -0
  146. data/brut-js/src/BaseCustomElement.js +261 -0
  147. data/brut-js/src/ConfirmSubmit.js +116 -0
  148. data/brut-js/src/ConfirmationDialog.js +143 -0
  149. data/brut-js/src/ConstraintViolationMessage.js +125 -0
  150. data/brut-js/src/ConstraintViolationMessages.js +98 -0
  151. data/brut-js/src/CopyToClipboard.js +96 -0
  152. data/brut-js/src/Form.js +151 -0
  153. data/brut-js/src/I18nTranslation.js +61 -0
  154. data/brut-js/src/LocaleDetection.js +117 -0
  155. data/brut-js/src/Logger.js +90 -0
  156. data/brut-js/src/Message.js +56 -0
  157. data/brut-js/src/RichString.js +113 -0
  158. data/brut-js/src/Tabs.js +168 -0
  159. data/brut-js/src/Tracing.js +247 -0
  160. data/brut-js/src/appForTestingOnly.js +15 -0
  161. data/brut-js/src/index.js +130 -0
  162. data/brut-js/src/testing/AssetMetadata.js +35 -0
  163. data/brut-js/src/testing/AssetMetadataLoader.js +25 -0
  164. data/brut-js/src/testing/CustomElementTest.js +235 -0
  165. data/brut-js/src/testing/DOMCreator.js +45 -0
  166. data/brut-js/src/testing/index.js +48 -0
  167. data/brutrb.com/.vitepress/config.mjs +106 -0
  168. data/brutrb.com/.vitepress/plugins/jsdocLinker.js +34 -0
  169. data/brutrb.com/.vitepress/plugins/rdocLinker.js +18 -0
  170. data/brutrb.com/.vitepress/theme/custom.css +7 -0
  171. data/brutrb.com/.vitepress/theme/index.js +18 -0
  172. data/brutrb.com/.vitepress/theme/style.css +149 -0
  173. data/brutrb.com/ai.md +68 -0
  174. data/brutrb.com/assets.md +138 -0
  175. data/brutrb.com/bin/build +5 -0
  176. data/brutrb.com/bin/deploy +7 -0
  177. data/brutrb.com/bin/dev +5 -0
  178. data/brutrb.com/bin/setup +5 -0
  179. data/brutrb.com/brut-js.md +117 -0
  180. data/brutrb.com/business-logic.md +55 -0
  181. data/brutrb.com/cli.md +278 -0
  182. data/brutrb.com/components.md +243 -0
  183. data/brutrb.com/configuration.md +257 -0
  184. data/brutrb.com/css.md +103 -0
  185. data/brutrb.com/custom-element-tests.md +149 -0
  186. data/brutrb.com/database-access.md +201 -0
  187. data/brutrb.com/database-schema.md +312 -0
  188. data/brutrb.com/deployment.md +66 -0
  189. data/brutrb.com/dev-environment.md +179 -0
  190. data/brutrb.com/doc-conventions.md +39 -0
  191. data/brutrb.com/end-to-end-tests.md +174 -0
  192. data/brutrb.com/flash-and-session.md +224 -0
  193. data/brutrb.com/forms.md +866 -0
  194. data/brutrb.com/getting-started.md +66 -0
  195. data/brutrb.com/handlers.md +153 -0
  196. data/brutrb.com/hooks.md +178 -0
  197. data/brutrb.com/i18n.md +188 -0
  198. data/brutrb.com/images/Makefile +10 -0
  199. data/brutrb.com/images/dev-env-overview.dot +54 -0
  200. data/brutrb.com/images/dev-env-overview.png +0 -0
  201. data/brutrb.com/images/dev-env-protocol.dot +37 -0
  202. data/brutrb.com/images/dev-env-protocol.png +0 -0
  203. data/brutrb.com/images/logo-300.png +0 -0
  204. data/brutrb.com/images/logo.png +0 -0
  205. data/brutrb.com/images/overview.graffle +0 -0
  206. data/brutrb.com/images/overview.png +0 -0
  207. data/brutrb.com/images/spa.dot +19 -0
  208. data/brutrb.com/images/spa.png +0 -0
  209. data/brutrb.com/images/workspace-protocol.dot +44 -0
  210. data/brutrb.com/images/workspace-protocol.png +0 -0
  211. data/brutrb.com/index.md +36 -0
  212. data/brutrb.com/instrumentation.md +183 -0
  213. data/brutrb.com/javascript.md +122 -0
  214. data/brutrb.com/jobs.md +14 -0
  215. data/{doc-src → brutrb.com}/keyword-injection.md +122 -68
  216. data/brutrb.com/markdown-examples.md +85 -0
  217. data/brutrb.com/middleware.md +80 -0
  218. data/brutrb.com/not-released.md +5 -0
  219. data/brutrb.com/overview.md +404 -0
  220. data/brutrb.com/package-lock.json +2404 -0
  221. data/brutrb.com/package.json +11 -0
  222. data/brutrb.com/pages.md +378 -0
  223. data/brutrb.com/public/images/logo-300.png +0 -0
  224. data/brutrb.com/public/images/logo.png +0 -0
  225. data/brutrb.com/routes.md +215 -0
  226. data/brutrb.com/security.md +105 -0
  227. data/brutrb.com/seed-data.md +63 -0
  228. data/brutrb.com/space-time-continuum.md +85 -0
  229. data/brutrb.com/tutorial.md +3 -0
  230. data/brutrb.com/unit-tests.md +148 -0
  231. data/docker-compose.dx.yml +6 -3
  232. data/docs/404.html +21 -0
  233. data/docs/CNAME +1 -0
  234. data/docs/ai.html +24 -0
  235. data/docs/api/Brut/BackEnd/SeedData.html +493 -0
  236. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +214 -0
  237. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +125 -0
  238. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +125 -0
  239. data/docs/api/Brut/BackEnd/Sidekiq.html +125 -0
  240. data/docs/api/Brut/BackEnd/Validators/FormValidator.html +414 -0
  241. data/docs/api/Brut/BackEnd/Validators.html +128 -0
  242. data/docs/api/Brut/BackEnd.html +132 -0
  243. data/docs/api/Brut/CLI/App.html +1576 -0
  244. data/docs/api/Brut/CLI/AppRunner.html +491 -0
  245. data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +264 -0
  246. data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +306 -0
  247. data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +262 -0
  248. data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +314 -0
  249. data/docs/api/Brut/CLI/Apps/BuildAssets.html +183 -0
  250. data/docs/api/Brut/CLI/Apps/DB/Create.html +365 -0
  251. data/docs/api/Brut/CLI/Apps/DB/Drop.html +357 -0
  252. data/docs/api/Brut/CLI/Apps/DB/Migrate.html +383 -0
  253. data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +335 -0
  254. data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +329 -0
  255. data/docs/api/Brut/CLI/Apps/DB/Seed.html +347 -0
  256. data/docs/api/Brut/CLI/Apps/DB/Status.html +383 -0
  257. data/docs/api/Brut/CLI/Apps/DB.html +183 -0
  258. data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +303 -0
  259. data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +512 -0
  260. data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +398 -0
  261. data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +374 -0
  262. data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +410 -0
  263. data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +262 -0
  264. data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +303 -0
  265. data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +480 -0
  266. data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +450 -0
  267. data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +380 -0
  268. data/docs/api/Brut/CLI/Apps/Scaffold.html +253 -0
  269. data/docs/api/Brut/CLI/Apps/Test/Audit.html +464 -0
  270. data/docs/api/Brut/CLI/Apps/Test/E2e.html +407 -0
  271. data/docs/api/Brut/CLI/Apps/Test/JS.html +262 -0
  272. data/docs/api/Brut/CLI/Apps/Test/Run.html +578 -0
  273. data/docs/api/Brut/CLI/Apps/Test.html +253 -0
  274. data/docs/api/Brut/CLI/Apps.html +125 -0
  275. data/docs/api/Brut/CLI/Command.html +2342 -0
  276. data/docs/api/Brut/CLI/Error.html +139 -0
  277. data/docs/api/Brut/CLI/ExecutionResults/Result.html +664 -0
  278. data/docs/api/Brut/CLI/ExecutionResults.html +675 -0
  279. data/docs/api/Brut/CLI/Executor.html +430 -0
  280. data/docs/api/Brut/CLI/InvalidOption.html +245 -0
  281. data/docs/api/Brut/CLI/Options.html +753 -0
  282. data/docs/api/Brut/CLI/Output.html +699 -0
  283. data/docs/api/Brut/CLI/SystemExecError.html +451 -0
  284. data/docs/api/Brut/CLI.html +263 -0
  285. data/docs/api/Brut/FactoryBot.html +225 -0
  286. data/docs/api/Brut/Framework/App.html +1097 -0
  287. data/docs/api/Brut/Framework/Config.html +1045 -0
  288. data/docs/api/Brut/Framework/Container.html +1379 -0
  289. data/docs/api/Brut/Framework/Error.html +140 -0
  290. data/docs/api/Brut/Framework/Errors/AbstractMethod.html +144 -0
  291. data/docs/api/Brut/Framework/Errors/Bug.html +234 -0
  292. data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +257 -0
  293. data/docs/api/Brut/Framework/Errors/MissingParameter.html +273 -0
  294. data/docs/api/Brut/Framework/Errors/NoClassForPath.html +471 -0
  295. data/docs/api/Brut/Framework/Errors/NotFound.html +308 -0
  296. data/docs/api/Brut/Framework/Errors/NotImplemented.html +234 -0
  297. data/docs/api/Brut/Framework/Errors.html +328 -0
  298. data/docs/api/Brut/Framework/FussyTypeEnforcement.html +392 -0
  299. data/docs/api/Brut/Framework/MCP.html +861 -0
  300. data/docs/api/Brut/Framework/ProjectEnvironment.html +648 -0
  301. data/docs/api/Brut/Framework.html +129 -0
  302. data/docs/api/Brut/FrontEnd/AssetPathResolver.html +317 -0
  303. data/docs/api/Brut/FrontEnd/Component/Helpers.html +326 -0
  304. data/docs/api/Brut/FrontEnd/Component.html +365 -0
  305. data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +470 -0
  306. data/docs/api/Brut/FrontEnd/Components/FormTag.html +518 -0
  307. data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +317 -0
  308. data/docs/api/Brut/FrontEnd/Components/Input.html +195 -0
  309. data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +339 -0
  310. data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +660 -0
  311. data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +417 -0
  312. data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +918 -0
  313. data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +651 -0
  314. data/docs/api/Brut/FrontEnd/Components/Inputs.html +125 -0
  315. data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +367 -0
  316. data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +336 -0
  317. data/docs/api/Brut/FrontEnd/Components/TimeTag.html +655 -0
  318. data/docs/api/Brut/FrontEnd/Components/Traceparent.html +352 -0
  319. data/docs/api/Brut/FrontEnd/Components.html +135 -0
  320. data/docs/api/Brut/FrontEnd/Download.html +467 -0
  321. data/docs/api/Brut/FrontEnd/Flash.html +1150 -0
  322. data/docs/api/Brut/FrontEnd/Form.html +1157 -0
  323. data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +634 -0
  324. data/docs/api/Brut/FrontEnd/Forms/Input.html +615 -0
  325. data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +547 -0
  326. data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1318 -0
  327. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +609 -0
  328. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +587 -0
  329. data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +613 -0
  330. data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +582 -0
  331. data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +609 -0
  332. data/docs/api/Brut/FrontEnd/Forms.html +127 -0
  333. data/docs/api/Brut/FrontEnd/GenericResponse.html +377 -0
  334. data/docs/api/Brut/FrontEnd/Handler.html +442 -0
  335. data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +318 -0
  336. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +336 -0
  337. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +399 -0
  338. data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +354 -0
  339. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +151 -0
  340. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +315 -0
  341. data/docs/api/Brut/FrontEnd/Handlers.html +125 -0
  342. data/docs/api/Brut/FrontEnd/HandlingResults.html +339 -0
  343. data/docs/api/Brut/FrontEnd/HttpMethod.html +661 -0
  344. data/docs/api/Brut/FrontEnd/HttpStatus.html +496 -0
  345. data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +284 -0
  346. data/docs/api/Brut/FrontEnd/Layout.html +318 -0
  347. data/docs/api/Brut/FrontEnd/Middleware.html +135 -0
  348. data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +288 -0
  349. data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +292 -0
  350. data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +324 -0
  351. data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +372 -0
  352. data/docs/api/Brut/FrontEnd/Middlewares.html +125 -0
  353. data/docs/api/Brut/FrontEnd/Page.html +773 -0
  354. data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +797 -0
  355. data/docs/api/Brut/FrontEnd/Pages.html +125 -0
  356. data/docs/api/Brut/FrontEnd/RequestContext.html +1312 -0
  357. data/docs/api/Brut/FrontEnd/RouteHook.html +424 -0
  358. data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +242 -0
  359. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +249 -0
  360. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +264 -0
  361. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +261 -0
  362. data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +284 -0
  363. data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +252 -0
  364. data/docs/api/Brut/FrontEnd/RouteHooks.html +115 -0
  365. data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +227 -0
  366. data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +305 -0
  367. data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +324 -0
  368. data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +319 -0
  369. data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +315 -0
  370. data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +315 -0
  371. data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +327 -0
  372. data/docs/api/Brut/FrontEnd/Routing/Route.html +761 -0
  373. data/docs/api/Brut/FrontEnd/Routing.html +927 -0
  374. data/docs/api/Brut/FrontEnd/Session.html +1195 -0
  375. data/docs/api/Brut/FrontEnd.html +134 -0
  376. data/docs/api/Brut/I18n/BaseMethods.html +931 -0
  377. data/docs/api/Brut/I18n/ForBackEnd.html +302 -0
  378. data/docs/api/Brut/I18n/ForCLI.html +302 -0
  379. data/docs/api/Brut/I18n/ForHTML.html +296 -0
  380. data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +316 -0
  381. data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +930 -0
  382. data/docs/api/Brut/I18n.html +127 -0
  383. data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +435 -0
  384. data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +286 -0
  385. data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +302 -0
  386. data/docs/api/Brut/Instrumentation/OpenTelemetry.html +864 -0
  387. data/docs/api/Brut/Instrumentation.html +126 -0
  388. data/docs/api/Brut/SinatraHelpers/ClassMethods.html +532 -0
  389. data/docs/api/Brut/SinatraHelpers.html +281 -0
  390. data/docs/api/Brut/SpecSupport/ClockSupport.html +383 -0
  391. data/docs/api/Brut/SpecSupport/ComponentSupport.html +502 -0
  392. data/docs/api/Brut/SpecSupport/E2ETestServer.html +503 -0
  393. data/docs/api/Brut/SpecSupport/E2eSupport.html +142 -0
  394. data/docs/api/Brut/SpecSupport/EnhancedNode.html +403 -0
  395. data/docs/api/Brut/SpecSupport/FlashSupport.html +278 -0
  396. data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +401 -0
  397. data/docs/api/Brut/SpecSupport/GeneralSupport.html +195 -0
  398. data/docs/api/Brut/SpecSupport/HandlerSupport.html +160 -0
  399. data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +553 -0
  400. data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +439 -0
  401. data/docs/api/Brut/SpecSupport/Matchers.html +125 -0
  402. data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +335 -0
  403. data/docs/api/Brut/SpecSupport/RSpecSetup.html +602 -0
  404. data/docs/api/Brut/SpecSupport/SessionSupport.html +196 -0
  405. data/docs/api/Brut/SpecSupport.html +129 -0
  406. data/docs/api/Brut.html +225 -0
  407. data/docs/api/Clock.html +603 -0
  408. data/docs/api/RichString.html +968 -0
  409. data/docs/api/SemanticLogger/Appender/Async.html +219 -0
  410. data/docs/api/Sequel/Extensions/BrutInstrumentation.html +115 -0
  411. data/docs/api/Sequel/Extensions/BrutMigrations.html +533 -0
  412. data/docs/api/Sequel/Extensions.html +117 -0
  413. data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +105 -0
  414. data/docs/api/Sequel/Plugins/CreatedAt.html +125 -0
  415. data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +207 -0
  416. data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +186 -0
  417. data/docs/api/Sequel/Plugins/ExternalId.html +218 -0
  418. data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +202 -0
  419. data/docs/api/Sequel/Plugins/FindBang.html +125 -0
  420. data/docs/api/Sequel/Plugins.html +117 -0
  421. data/docs/api/Sequel.html +117 -0
  422. data/docs/api/_index.html +1553 -0
  423. data/docs/api/class_list.html +54 -0
  424. data/docs/api/css/common.css +1 -0
  425. data/docs/api/css/full_list.css +58 -0
  426. data/docs/api/css/style.css +503 -0
  427. data/docs/api/file.README.html +127 -0
  428. data/docs/api/file_list.html +59 -0
  429. data/docs/api/frames.html +22 -0
  430. data/docs/api/index.html +127 -0
  431. data/docs/api/js/app.js +344 -0
  432. data/docs/api/js/full_list.js +242 -0
  433. data/docs/api/js/jquery.js +4 -0
  434. data/docs/api/method_list.html +3998 -0
  435. data/docs/api/top-level-namespace.html +112 -0
  436. data/docs/assets/ai.md.tZrjP9im.js +1 -0
  437. data/docs/assets/ai.md.tZrjP9im.lean.js +1 -0
  438. data/docs/assets/app.D_yaTITQ.js +1 -0
  439. data/docs/assets/assets.md.D3wunzLx.js +19 -0
  440. data/docs/assets/assets.md.D3wunzLx.lean.js +1 -0
  441. data/docs/assets/brut-js.md.o2DAO2s2.js +12 -0
  442. data/docs/assets/brut-js.md.o2DAO2s2.lean.js +1 -0
  443. data/docs/assets/business-logic.md.BY4hGy0m.js +1 -0
  444. data/docs/assets/business-logic.md.BY4hGy0m.lean.js +1 -0
  445. data/docs/assets/chunks/@localSearchIndexroot.BsN5i0Fi.js +1 -0
  446. data/docs/assets/chunks/VPLocalSearchBox.B2-ZzyTY.js +8 -0
  447. data/docs/assets/chunks/framework.1L-BeKqY.js +18 -0
  448. data/docs/assets/chunks/theme.CfGFVRvE.js +2 -0
  449. data/docs/assets/cli.md.RmeA2b0i.js +127 -0
  450. data/docs/assets/cli.md.RmeA2b0i.lean.js +1 -0
  451. data/docs/assets/components.md.eCttGlN-.js +104 -0
  452. data/docs/assets/components.md.eCttGlN-.lean.js +1 -0
  453. data/docs/assets/configuration.md.BRriU0cL.js +78 -0
  454. data/docs/assets/configuration.md.BRriU0cL.lean.js +1 -0
  455. data/docs/assets/css.md.DJgj2clw.js +21 -0
  456. data/docs/assets/css.md.DJgj2clw.lean.js +1 -0
  457. data/docs/assets/custom-element-tests.md.BrYJQEl3.js +69 -0
  458. data/docs/assets/custom-element-tests.md.BrYJQEl3.lean.js +1 -0
  459. data/docs/assets/database-access.md.C7l-Vuvb.js +63 -0
  460. data/docs/assets/database-access.md.C7l-Vuvb.lean.js +1 -0
  461. data/docs/assets/database-schema.md.BUjR0VS1.js +63 -0
  462. data/docs/assets/database-schema.md.BUjR0VS1.lean.js +1 -0
  463. data/docs/assets/deployment.md.Dbka4OTr.js +1 -0
  464. data/docs/assets/deployment.md.Dbka4OTr.lean.js +1 -0
  465. data/docs/assets/dev-env-overview.Gj7NWM8-.png +0 -0
  466. data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
  467. data/docs/assets/dev-environment.md.BNc8AYiK.js +11 -0
  468. data/docs/assets/dev-environment.md.BNc8AYiK.lean.js +1 -0
  469. data/docs/assets/doc-conventions.md.DCfRXXi-.js +1 -0
  470. data/docs/assets/doc-conventions.md.DCfRXXi-.lean.js +1 -0
  471. data/docs/assets/end-to-end-tests.md.yfQHC0b5.js +26 -0
  472. data/docs/assets/end-to-end-tests.md.yfQHC0b5.lean.js +1 -0
  473. data/docs/assets/flash-and-session.md.BXY8RvT0.js +93 -0
  474. data/docs/assets/flash-and-session.md.BXY8RvT0.lean.js +1 -0
  475. data/docs/assets/forms.md.CBTYQ_Cz.js +379 -0
  476. data/docs/assets/forms.md.CBTYQ_Cz.lean.js +1 -0
  477. data/docs/assets/getting-started.md.Bz2s1Vjb.js +2 -0
  478. data/docs/assets/getting-started.md.Bz2s1Vjb.lean.js +1 -0
  479. data/docs/assets/handlers.md.089DVD3v.js +69 -0
  480. data/docs/assets/handlers.md.089DVD3v.lean.js +1 -0
  481. data/docs/assets/hooks.md.C4-moMny.js +80 -0
  482. data/docs/assets/hooks.md.C4-moMny.lean.js +1 -0
  483. data/docs/assets/i18n.md.Do9i1qWl.js +23 -0
  484. data/docs/assets/i18n.md.Do9i1qWl.lean.js +1 -0
  485. data/docs/assets/index.md.B28EwVpq.js +1 -0
  486. data/docs/assets/index.md.B28EwVpq.lean.js +1 -0
  487. data/docs/assets/instrumentation.md.CL6ax7nT.js +35 -0
  488. data/docs/assets/instrumentation.md.CL6ax7nT.lean.js +1 -0
  489. data/docs/assets/javascript.md.GWbhRS51.js +31 -0
  490. data/docs/assets/javascript.md.GWbhRS51.lean.js +1 -0
  491. data/docs/assets/jobs.md.S-2amAYp.js +1 -0
  492. data/docs/assets/jobs.md.S-2amAYp.lean.js +1 -0
  493. data/docs/assets/keyword-injection.md.Dt2tKREs.js +25 -0
  494. data/docs/assets/keyword-injection.md.Dt2tKREs.lean.js +1 -0
  495. data/docs/assets/markdown-examples.md.CCFEQO44.js +33 -0
  496. data/docs/assets/markdown-examples.md.CCFEQO44.lean.js +1 -0
  497. data/docs/assets/middleware.md.Czz_UlJN.js +20 -0
  498. data/docs/assets/middleware.md.Czz_UlJN.lean.js +1 -0
  499. data/docs/assets/not-released.md.BBy28McC.js +1 -0
  500. data/docs/assets/not-released.md.BBy28McC.lean.js +1 -0
  501. data/docs/assets/overview.Da81cB9R.png +0 -0
  502. data/docs/assets/overview.md.CDalkuxV.js +133 -0
  503. data/docs/assets/overview.md.CDalkuxV.lean.js +1 -0
  504. data/docs/assets/pages.md.BE3kfOc5.js +122 -0
  505. data/docs/assets/pages.md.BE3kfOc5.lean.js +1 -0
  506. data/docs/assets/routes.md.BMM7peut.js +29 -0
  507. data/docs/assets/routes.md.BMM7peut.lean.js +1 -0
  508. data/docs/assets/security.md.C668yXCi.js +1 -0
  509. data/docs/assets/security.md.C668yXCi.lean.js +1 -0
  510. data/docs/assets/seed-data.md.BvFZlqIk.js +14 -0
  511. data/docs/assets/seed-data.md.BvFZlqIk.lean.js +1 -0
  512. data/docs/assets/spa.qejUdp-5.png +0 -0
  513. data/docs/assets/space-time-continuum.md.KPUIKysQ.js +1 -0
  514. data/docs/assets/space-time-continuum.md.KPUIKysQ.lean.js +1 -0
  515. data/docs/assets/style.D73IYGCX.css +1 -0
  516. data/docs/assets/tutorial.md.BnoGjrdK.js +1 -0
  517. data/docs/assets/tutorial.md.BnoGjrdK.lean.js +1 -0
  518. data/docs/assets/unit-tests.md.DUGrnLj5.js +13 -0
  519. data/docs/assets/unit-tests.md.DUGrnLj5.lean.js +1 -0
  520. data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
  521. data/docs/assets.html +42 -0
  522. data/docs/brut-css/brut.css +1 -0
  523. data/docs/brut-css/brut.max.css +22372 -0
  524. data/docs/brut-css/classes/appearances.html +783 -0
  525. data/docs/brut-css/classes/background-colors.html +3529 -0
  526. data/docs/brut-css/classes/border-colors.html +3529 -0
  527. data/docs/brut-css/classes/borders.html +2293 -0
  528. data/docs/brut-css/classes/dimensions.html +2581 -0
  529. data/docs/brut-css/classes/flex.html +917 -0
  530. data/docs/brut-css/classes/foreground-colors.html +3261 -0
  531. data/docs/brut-css/classes/junk-drawer.html +431 -0
  532. data/docs/brut-css/classes/layout.html +668 -0
  533. data/docs/brut-css/classes/lists.html +331 -0
  534. data/docs/brut-css/classes/positioning.html +1751 -0
  535. data/docs/brut-css/classes/spacings.html +2633 -0
  536. data/docs/brut-css/classes/typography.html +2206 -0
  537. data/docs/brut-css/customization/advanced-configuration.html +204 -0
  538. data/docs/brut-css/customization/breakpoints.html +227 -0
  539. data/docs/brut-css/customization/design-system.html +197 -0
  540. data/docs/brut-css/customization/pseudo-classes.html +228 -0
  541. data/docs/brut-css/docs.css +98 -0
  542. data/docs/brut-css/getting-started/core-concepts.html +234 -0
  543. data/docs/brut-css/getting-started/installation.html +190 -0
  544. data/docs/brut-css/getting-started/overview.html +210 -0
  545. data/docs/brut-css/getting-started/simple-example.html +285 -0
  546. data/docs/brut-css/index.html +193 -0
  547. data/docs/brut-css/prism-twilight.min.css +1 -0
  548. data/docs/brut-css/properties/colors.html +1548 -0
  549. data/docs/brut-css/properties/spacings.html +614 -0
  550. data/docs/brut-css/properties/typography.html +777 -0
  551. data/docs/brut-js/api/AjaxSubmit.html +374 -0
  552. data/docs/brut-js/api/AjaxSubmit.js.html +435 -0
  553. data/docs/brut-js/api/Autosubmit.html +192 -0
  554. data/docs/brut-js/api/Autosubmit.js.html +114 -0
  555. data/docs/brut-js/api/BaseCustomElement.html +1091 -0
  556. data/docs/brut-js/api/BaseCustomElement.js.html +312 -0
  557. data/docs/brut-js/api/BrutCustomElements.html +172 -0
  558. data/docs/brut-js/api/BufferedLogger.html +173 -0
  559. data/docs/brut-js/api/ConfirmSubmit.html +278 -0
  560. data/docs/brut-js/api/ConfirmSubmit.js.html +167 -0
  561. data/docs/brut-js/api/ConfirmationDialog.html +425 -0
  562. data/docs/brut-js/api/ConfirmationDialog.js.html +194 -0
  563. data/docs/brut-js/api/ConstraintViolationMessage.html +448 -0
  564. data/docs/brut-js/api/ConstraintViolationMessage.js.html +176 -0
  565. data/docs/brut-js/api/ConstraintViolationMessages.html +590 -0
  566. data/docs/brut-js/api/ConstraintViolationMessages.js.html +149 -0
  567. data/docs/brut-js/api/CopyToClipboard.html +345 -0
  568. data/docs/brut-js/api/CopyToClipboard.js.html +147 -0
  569. data/docs/brut-js/api/Form.html +294 -0
  570. data/docs/brut-js/api/Form.js.html +202 -0
  571. data/docs/brut-js/api/I18nTranslation.html +409 -0
  572. data/docs/brut-js/api/I18nTranslation.js.html +112 -0
  573. data/docs/brut-js/api/LocaleDetection.html +312 -0
  574. data/docs/brut-js/api/LocaleDetection.js.html +168 -0
  575. data/docs/brut-js/api/Logger.html +702 -0
  576. data/docs/brut-js/api/Logger.js.html +141 -0
  577. data/docs/brut-js/api/Message.html +238 -0
  578. data/docs/brut-js/api/Message.js.html +107 -0
  579. data/docs/brut-js/api/PrefixedLogger.html +369 -0
  580. data/docs/brut-js/api/RichString.html +1049 -0
  581. data/docs/brut-js/api/RichString.js.html +164 -0
  582. data/docs/brut-js/api/Tabs.html +295 -0
  583. data/docs/brut-js/api/Tabs.js.html +219 -0
  584. data/docs/brut-js/api/Tracing.html +277 -0
  585. data/docs/brut-js/api/Tracing.js.html +298 -0
  586. data/docs/brut-js/api/external-CustomElementRegistry.html +140 -0
  587. data/docs/brut-js/api/external-Performance.html +138 -0
  588. data/docs/brut-js/api/external-Promise.html +138 -0
  589. data/docs/brut-js/api/external-ValidityState.html +138 -0
  590. data/docs/brut-js/api/external-Window.html +233 -0
  591. data/docs/brut-js/api/external-fetch.html +138 -0
  592. data/docs/brut-js/api/global.html +400 -0
  593. data/docs/brut-js/api/index.html +168 -0
  594. data/docs/brut-js/api/index.js.html +181 -0
  595. data/docs/brut-js/api/module-testing.html +383 -0
  596. data/docs/brut-js/api/scripts/linenumber.js +25 -0
  597. data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +202 -0
  598. data/docs/brut-js/api/scripts/prettify/lang-css.js +2 -0
  599. data/docs/brut-js/api/scripts/prettify/prettify.js +28 -0
  600. data/docs/brut-js/api/styles/jsdoc-default.css +327 -0
  601. data/docs/brut-js/api/styles/prettify-jsdoc.css +111 -0
  602. data/docs/brut-js/api/styles/prettify-tomorrow.css +132 -0
  603. data/docs/brut-js/api/testing.AssetMetadata.html +172 -0
  604. data/docs/brut-js/api/testing.AssetMetadataLoader.html +171 -0
  605. data/docs/brut-js/api/testing.CustomElementTest.html +679 -0
  606. data/docs/brut-js/api/testing.DOMCreator.html +171 -0
  607. data/docs/brut-js/api/testing_AssetMetadata.js.html +86 -0
  608. data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +76 -0
  609. data/docs/brut-js/api/testing_CustomElementTest.js.html +286 -0
  610. data/docs/brut-js/api/testing_DOMCreator.js.html +96 -0
  611. data/docs/brut-js/api/testing_index.js.html +99 -0
  612. data/docs/brut-js.html +35 -0
  613. data/docs/business-logic.html +24 -0
  614. data/docs/cli.html +150 -0
  615. data/docs/components.html +127 -0
  616. data/docs/configuration.html +101 -0
  617. data/docs/css.html +44 -0
  618. data/docs/custom-element-tests.html +92 -0
  619. data/docs/database-access.html +86 -0
  620. data/docs/database-schema.html +86 -0
  621. data/docs/deployment.html +24 -0
  622. data/docs/dev-environment.html +34 -0
  623. data/docs/doc-conventions.html +24 -0
  624. data/docs/end-to-end-tests.html +49 -0
  625. data/docs/flash-and-session.html +116 -0
  626. data/docs/forms.html +402 -0
  627. data/docs/getting-started.html +25 -0
  628. data/docs/handlers.html +92 -0
  629. data/docs/hashmap.json +1 -0
  630. data/docs/hooks.html +103 -0
  631. data/docs/i18n.html +46 -0
  632. data/docs/images/logo-300.png +0 -0
  633. data/docs/images/logo.png +0 -0
  634. data/docs/index.html +24 -0
  635. data/docs/instrumentation.html +58 -0
  636. data/docs/javascript.html +54 -0
  637. data/docs/jobs.html +24 -0
  638. data/docs/keyword-injection.html +48 -0
  639. data/docs/markdown-examples.html +56 -0
  640. data/docs/middleware.html +43 -0
  641. data/docs/not-released.html +24 -0
  642. data/docs/overview.html +156 -0
  643. data/docs/pages.html +145 -0
  644. data/docs/routes.html +52 -0
  645. data/docs/security.html +24 -0
  646. data/docs/seed-data.html +37 -0
  647. data/docs/space-time-continuum.html +24 -0
  648. data/docs/tutorial.html +24 -0
  649. data/docs/unit-tests.html +36 -0
  650. data/docs/vp-icons.css +1 -0
  651. data/lib/brut/back_end/seed_data.rb +19 -2
  652. data/lib/brut/back_end/sidekiq/middlewares/server.rb +2 -1
  653. data/lib/brut/back_end/sidekiq/middlewares.rb +2 -1
  654. data/lib/brut/back_end/sidekiq.rb +2 -1
  655. data/lib/brut/back_end/validator.rb +5 -1
  656. data/lib/brut/back_end.rb +4 -2
  657. data/lib/brut/cli/app_runner.rb +1 -1
  658. data/lib/brut/cli/apps/test.rb +5 -0
  659. data/lib/brut/cli.rb +4 -3
  660. data/lib/brut/factory_bot.rb +0 -5
  661. data/lib/brut/framework/app.rb +70 -5
  662. data/lib/brut/framework/config.rb +5 -3
  663. data/lib/brut/framework/container.rb +3 -2
  664. data/lib/brut/framework/errors.rb +12 -4
  665. data/lib/brut/framework/mcp.rb +58 -1
  666. data/lib/brut/framework/project_environment.rb +6 -2
  667. data/lib/brut/framework.rb +1 -1
  668. data/lib/brut/front_end/component.rb +69 -71
  669. data/lib/brut/front_end/components/constraint_violations.rb +1 -4
  670. data/lib/brut/front_end/components/form_tag.rb +1 -1
  671. data/lib/brut/front_end/components/input.rb +3 -3
  672. data/lib/brut/front_end/components/inputs/csrf_token.rb +1 -1
  673. data/lib/brut/front_end/components/inputs/{text_field.rb → input_tag.rb} +7 -9
  674. data/lib/brut/front_end/components/inputs/radio_button.rb +1 -1
  675. data/lib/brut/front_end/components/inputs/select_tag_with_options.rb +187 -0
  676. data/lib/brut/front_end/components/inputs/{textarea.rb → textarea_tag.rb} +2 -2
  677. data/lib/brut/front_end/components/time_tag.rb +2 -1
  678. data/lib/brut/front_end/form.rb +4 -4
  679. data/lib/brut/front_end/forms/input.rb +2 -1
  680. data/lib/brut/front_end/forms/input_definition.rb +5 -2
  681. data/lib/brut/front_end/forms/radio_button_group_input.rb +2 -1
  682. data/lib/brut/front_end/forms/radio_button_group_input_definition.rb +2 -2
  683. data/lib/brut/front_end/forms/select_input.rb +2 -4
  684. data/lib/brut/front_end/forms/select_input_definition.rb +2 -2
  685. data/lib/brut/front_end/handler.rb +28 -26
  686. data/lib/brut/front_end/handlers/csp_reporting_handler.rb +5 -2
  687. data/lib/brut/front_end/handlers/instrumentation_handler.rb +8 -4
  688. data/lib/brut/front_end/handlers/locale_detection_handler.rb +9 -5
  689. data/lib/brut/front_end/handlers/missing_handler.rb +5 -2
  690. data/lib/brut/front_end/layout.rb +16 -0
  691. data/lib/brut/front_end/page.rb +52 -29
  692. data/lib/brut/front_end/request_context.rb +3 -2
  693. data/lib/brut/front_end/routing.rb +5 -1
  694. data/lib/brut/front_end.rb +4 -13
  695. data/lib/brut/i18n/base_methods.rb +167 -79
  696. data/lib/brut/i18n/for_back_end.rb +4 -0
  697. data/lib/brut/i18n/for_cli.rb +4 -0
  698. data/lib/brut/i18n/for_html.rb +32 -4
  699. data/lib/brut/i18n/http_accept_language.rb +47 -0
  700. data/lib/brut/instrumentation/open_telemetry.rb +36 -1
  701. data/lib/brut/instrumentation.rb +3 -5
  702. data/lib/brut/sinatra_helpers.rb +11 -3
  703. data/lib/brut/spec_support/component_support.rb +30 -16
  704. data/lib/brut/spec_support/e2e_support.rb +1 -1
  705. data/lib/brut/spec_support/e2e_test_server.rb +3 -0
  706. data/lib/brut/spec_support/general_support.rb +3 -0
  707. data/lib/brut/spec_support/handler_support.rb +6 -1
  708. data/lib/brut/spec_support/matcher.rb +1 -0
  709. data/lib/brut/spec_support/matchers/be_page_for.rb +1 -0
  710. data/lib/brut/spec_support/matchers/have_html_attribute.rb +1 -0
  711. data/lib/brut/spec_support/matchers/have_i18n_string.rb +2 -5
  712. data/lib/brut/spec_support/matchers/have_link_to.rb +1 -0
  713. data/lib/brut/spec_support/matchers/have_redirected_to.rb +1 -0
  714. data/lib/brut/spec_support/matchers/have_rendered.rb +1 -0
  715. data/lib/brut/spec_support/matchers/have_returned_rack_response.rb +44 -0
  716. data/lib/brut/spec_support.rb +1 -1
  717. data/lib/brut/version.rb +1 -1
  718. data/lib/brut.rb +5 -4
  719. data/lib/sequel/extensions/brut_migrations.rb +1 -1
  720. metadata +648 -13
  721. data/doc-src/architecture.md +0 -102
  722. data/doc-src/assets.md +0 -98
  723. data/doc-src/forms.md +0 -214
  724. data/doc-src/handlers.md +0 -83
  725. data/doc-src/javascript.md +0 -265
  726. data/doc-src/pages.md +0 -210
  727. data/doc-src/route-hooks.md +0 -59
  728. data/lib/brut/front_end/components/inputs/select.rb +0 -117
data/docs/brut-css/classes/spacings.html ADDED
@@ -0,0 +1,2633 @@
1
+ <!doctype html>
2
+ <html class="ma-0 pa-0 h-100" lang="en">
3
+ <head>
4
+ <link rel="stylesheet" href="/brut-css/brut.css">
5
+ <link rel="stylesheet" href="/brut-css/docs.css">
6
+ <link rel="stylesheet" href="/brut-css/prism-twilight.min.css">
7
+ </head>
8
+
9
+ <body class="flex flex-column ff-sans ma-0 pa-0 h-100">
10
+ <header class="pos-sticky top-0 bg-gray-700 pa-3 z-5 shadow-2">
11
+ <div class="flex gap-3 justify-between items-center">
12
+ <h1><a href="/brut-css" class="black tdn">BrutCSS Reference Documentation</a></h1>
13
+ <ul class="lst-none pl-0 flex gap-2 justify-end items-center">
14
+ <form class="flex items-center gap-1 mr-3">
15
+ <label>
16
+ <input type="search" placeholder="e.g. padding-left" class="pa-2 br-2 ba bc-gray-600 bg-white-ish gray-200">
17
+ <span class="sr-only">Search term</span>
18
+ </label>
19
+ <button class="ph-3 pv-2 bg-white gray-100 ba bc-gray-500 br-3 hover-bg-gray-800 pointer flex items-center justify-between">
20
+ <span class="mr-2">Search</span>
21
+ <kbd>&#8984;</kbd>
22
+ <kbd>/</kbd>
23
+ </button>
24
+ </form>
25
+ <li><a href="/" class="red-200 tdn hover-tdu">BrutRB</a></li>
26
+ <span aria-hidden="true">&middot;</span>
27
+ <li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
28
+ <span aria-hidden="true">&middot;</span>
29
+ <li><a href="https://github.com/thirdtank/brut/tree/main/brut-css" class="gray-200 tdn hover-tdu">Code</a></li>
30
+ </ul>
31
+ </div>
32
+ </header>
33
+ <main class="flex overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 pos-relative">
34
+ <nav class="overflow-y-auto ph-3 pb-2 pt-4 w-20 bg-gray-800 gray-200 h-100">
35
+
36
+ <h3>Getting Started</h3>
37
+ <ul class="pl-3">
38
+
39
+ <li>
40
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/overview.html">Overview</a>
41
+ </li>
42
+
43
+ <li>
44
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/installation.html">Installation</a>
45
+ </li>
46
+
47
+ <li>
48
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/core-concepts.html">Core Concepts</a>
49
+ </li>
50
+
51
+ <li>
52
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/simple-example.html">Simple Example</a>
53
+ </li>
54
+
55
+ </ul>
56
+
57
+ <h3>Properties</h3>
58
+ <ul class="pl-3">
59
+
60
+ <li>
61
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/colors.html">Colors</a>
62
+ </li>
63
+
64
+ <li>
65
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/spacings.html">Spacings</a>
66
+ </li>
67
+
68
+ <li>
69
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/typography.html">Typography</a>
70
+ </li>
71
+
72
+ </ul>
73
+
74
+ <h3>Classes</h3>
75
+ <ul class="pl-3">
76
+
77
+ <li>
78
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/appearances.html">Appearances</a>
79
+ </li>
80
+
81
+ <li>
82
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/borders.html">Borders</a>
83
+ </li>
84
+
85
+ <li>
86
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/foreground-colors.html">Foreground Colors</a>
87
+ </li>
88
+
89
+ <li>
90
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/background-colors.html">Background Colors</a>
91
+ </li>
92
+
93
+ <li>
94
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/border-colors.html">Border Colors</a>
95
+ </li>
96
+
97
+ <li>
98
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/dimensions.html">Dimensions</a>
99
+ </li>
100
+
101
+ <li>
102
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/flex.html">Flex</a>
103
+ </li>
104
+
105
+ <li>
106
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/layout.html">Layout</a>
107
+ </li>
108
+
109
+ <li>
110
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/lists.html">Lists</a>
111
+ </li>
112
+
113
+ <li>
114
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/positioning.html">Positioning</a>
115
+ </li>
116
+
117
+ <li>
118
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/spacings.html">Spacings</a>
119
+ </li>
120
+
121
+ <li>
122
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/typography.html">Typography</a>
123
+ </li>
124
+
125
+ <li>
126
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/junk-drawer.html">Junk Drawer</a>
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ <h3>Customization</h3>
132
+ <ul class="pl-3">
133
+
134
+ <li>
135
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/design-system.html">Design System</a>
136
+ </li>
137
+
138
+ <li>
139
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/breakpoints.html">Breakpoints</a>
140
+ </li>
141
+
142
+ <li>
143
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/pseudo-classes.html">Pseudo Classes</a>
144
+ </li>
145
+
146
+ <li>
147
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/advanced-configuration.html">Advanced Configuration</a>
148
+ </li>
149
+
150
+ </ul>
151
+
152
+
153
+ </nav>
154
+ <section class="overflow-y-auto pt-4 h-100 flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-column">
155
+ <div class="ph-3 pv-2 flex items-start gap-2 justify-between">
156
+
157
+ <article>
158
+ <h2 class="}-5">Spacings Classes</h2>
159
+
160
+ <p>Spacing classes, used to add spaces around elements in various ways. These are all based on the <a href="/brut-css/properties/spacings.html#property-scale:spacing">Spacing</a> properties. Each has a nine-step scale with 0 being no spacing and 8 being the maximum.</p>
161
+
162
+
163
+
164
+
165
+ <h3 class="f-5 mt-4" id="class-scale:padding-all">Padding All</h3>
166
+ <p class="p">
167
+ <p>Padding on all sides</p>
168
+
169
+ </p>
170
+
171
+
172
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-0">
173
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-0</code></h4>
174
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-0</span> <span class="token punctuation">{</span>
175
+ <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
176
+ <span class="token punctuation">}</span></pre>
177
+ </div>
178
+ <div class="ml-3">
179
+ <p class="p">
180
+
181
+ </p>
182
+
183
+
184
+ </div>
185
+
186
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-1">
187
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-1</code></h4>
188
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-1</span> <span class="token punctuation">{</span>
189
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
190
+ <span class="token punctuation">}</span></pre>
191
+ </div>
192
+ <div class="ml-3">
193
+ <p class="p">
194
+
195
+ </p>
196
+
197
+
198
+ </div>
199
+
200
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-2">
201
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-2</code></h4>
202
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-2</span> <span class="token punctuation">{</span>
203
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
204
+ <span class="token punctuation">}</span></pre>
205
+ </div>
206
+ <div class="ml-3">
207
+ <p class="p">
208
+
209
+ </p>
210
+
211
+
212
+ </div>
213
+
214
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-3">
215
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-3</code></h4>
216
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-3</span> <span class="token punctuation">{</span>
217
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
218
+ <span class="token punctuation">}</span></pre>
219
+ </div>
220
+ <div class="ml-3">
221
+ <p class="p">
222
+
223
+ </p>
224
+
225
+
226
+ </div>
227
+
228
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-4">
229
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-4</code></h4>
230
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-4</span> <span class="token punctuation">{</span>
231
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
232
+ <span class="token punctuation">}</span></pre>
233
+ </div>
234
+ <div class="ml-3">
235
+ <p class="p">
236
+
237
+ </p>
238
+
239
+
240
+ </div>
241
+
242
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-5">
243
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-5</code></h4>
244
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-5</span> <span class="token punctuation">{</span>
245
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
246
+ <span class="token punctuation">}</span></pre>
247
+ </div>
248
+ <div class="ml-3">
249
+ <p class="p">
250
+
251
+ </p>
252
+
253
+
254
+ </div>
255
+
256
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-6">
257
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-6</code></h4>
258
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-6</span> <span class="token punctuation">{</span>
259
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
260
+ <span class="token punctuation">}</span></pre>
261
+ </div>
262
+ <div class="ml-3">
263
+ <p class="p">
264
+
265
+ </p>
266
+
267
+
268
+ </div>
269
+
270
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-7">
271
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-7</code></h4>
272
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-7</span> <span class="token punctuation">{</span>
273
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
274
+ <span class="token punctuation">}</span></pre>
275
+ </div>
276
+ <div class="ml-3">
277
+ <p class="p">
278
+
279
+ </p>
280
+
281
+
282
+ </div>
283
+
284
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pa-8">
285
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pa-8</code></h4>
286
+ <pre class="f-3 highlighted-code"><span class="token selector">.pa-8</span> <span class="token punctuation">{</span>
287
+ <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
288
+ <span class="token punctuation">}</span></pre>
289
+ </div>
290
+ <div class="ml-3">
291
+ <p class="p">
292
+
293
+ </p>
294
+
295
+
296
+ </div>
297
+
298
+
299
+ <h3 class="f-5 mt-4" id="class-scale:padding-left">Padding Left</h3>
300
+ <p class="p">
301
+ <p>Padding on the left</p>
302
+
303
+ </p>
304
+
305
+
306
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-0">
307
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-0</code></h4>
308
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-0</span> <span class="token punctuation">{</span>
309
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
310
+ <span class="token punctuation">}</span></pre>
311
+ </div>
312
+ <div class="ml-3">
313
+ <p class="p">
314
+
315
+ </p>
316
+
317
+
318
+ </div>
319
+
320
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-1">
321
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-1</code></h4>
322
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-1</span> <span class="token punctuation">{</span>
323
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
324
+ <span class="token punctuation">}</span></pre>
325
+ </div>
326
+ <div class="ml-3">
327
+ <p class="p">
328
+
329
+ </p>
330
+
331
+
332
+ </div>
333
+
334
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-2">
335
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-2</code></h4>
336
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-2</span> <span class="token punctuation">{</span>
337
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
338
+ <span class="token punctuation">}</span></pre>
339
+ </div>
340
+ <div class="ml-3">
341
+ <p class="p">
342
+
343
+ </p>
344
+
345
+
346
+ </div>
347
+
348
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-3">
349
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-3</code></h4>
350
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-3</span> <span class="token punctuation">{</span>
351
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
352
+ <span class="token punctuation">}</span></pre>
353
+ </div>
354
+ <div class="ml-3">
355
+ <p class="p">
356
+
357
+ </p>
358
+
359
+
360
+ </div>
361
+
362
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-4">
363
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-4</code></h4>
364
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-4</span> <span class="token punctuation">{</span>
365
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
366
+ <span class="token punctuation">}</span></pre>
367
+ </div>
368
+ <div class="ml-3">
369
+ <p class="p">
370
+
371
+ </p>
372
+
373
+
374
+ </div>
375
+
376
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-5">
377
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-5</code></h4>
378
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-5</span> <span class="token punctuation">{</span>
379
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
380
+ <span class="token punctuation">}</span></pre>
381
+ </div>
382
+ <div class="ml-3">
383
+ <p class="p">
384
+
385
+ </p>
386
+
387
+
388
+ </div>
389
+
390
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-6">
391
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-6</code></h4>
392
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-6</span> <span class="token punctuation">{</span>
393
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
394
+ <span class="token punctuation">}</span></pre>
395
+ </div>
396
+ <div class="ml-3">
397
+ <p class="p">
398
+
399
+ </p>
400
+
401
+
402
+ </div>
403
+
404
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-7">
405
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-7</code></h4>
406
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-7</span> <span class="token punctuation">{</span>
407
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
408
+ <span class="token punctuation">}</span></pre>
409
+ </div>
410
+ <div class="ml-3">
411
+ <p class="p">
412
+
413
+ </p>
414
+
415
+
416
+ </div>
417
+
418
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pl-8">
419
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pl-8</code></h4>
420
+ <pre class="f-3 highlighted-code"><span class="token selector">.pl-8</span> <span class="token punctuation">{</span>
421
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
422
+ <span class="token punctuation">}</span></pre>
423
+ </div>
424
+ <div class="ml-3">
425
+ <p class="p">
426
+
427
+ </p>
428
+
429
+
430
+ </div>
431
+
432
+
433
+ <h3 class="f-5 mt-4" id="class-scale:padding-right">Padding Right</h3>
434
+ <p class="p">
435
+ <p>Padding on the right</p>
436
+
437
+ </p>
438
+
439
+
440
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-0">
441
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-0</code></h4>
442
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-0</span> <span class="token punctuation">{</span>
443
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
444
+ <span class="token punctuation">}</span></pre>
445
+ </div>
446
+ <div class="ml-3">
447
+ <p class="p">
448
+
449
+ </p>
450
+
451
+
452
+ </div>
453
+
454
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-1">
455
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-1</code></h4>
456
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-1</span> <span class="token punctuation">{</span>
457
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
458
+ <span class="token punctuation">}</span></pre>
459
+ </div>
460
+ <div class="ml-3">
461
+ <p class="p">
462
+
463
+ </p>
464
+
465
+
466
+ </div>
467
+
468
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-2">
469
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-2</code></h4>
470
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-2</span> <span class="token punctuation">{</span>
471
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
472
+ <span class="token punctuation">}</span></pre>
473
+ </div>
474
+ <div class="ml-3">
475
+ <p class="p">
476
+
477
+ </p>
478
+
479
+
480
+ </div>
481
+
482
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-3">
483
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-3</code></h4>
484
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-3</span> <span class="token punctuation">{</span>
485
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
486
+ <span class="token punctuation">}</span></pre>
487
+ </div>
488
+ <div class="ml-3">
489
+ <p class="p">
490
+
491
+ </p>
492
+
493
+
494
+ </div>
495
+
496
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-4">
497
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-4</code></h4>
498
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-4</span> <span class="token punctuation">{</span>
499
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
500
+ <span class="token punctuation">}</span></pre>
501
+ </div>
502
+ <div class="ml-3">
503
+ <p class="p">
504
+
505
+ </p>
506
+
507
+
508
+ </div>
509
+
510
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-5">
511
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-5</code></h4>
512
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-5</span> <span class="token punctuation">{</span>
513
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
514
+ <span class="token punctuation">}</span></pre>
515
+ </div>
516
+ <div class="ml-3">
517
+ <p class="p">
518
+
519
+ </p>
520
+
521
+
522
+ </div>
523
+
524
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-6">
525
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-6</code></h4>
526
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-6</span> <span class="token punctuation">{</span>
527
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
528
+ <span class="token punctuation">}</span></pre>
529
+ </div>
530
+ <div class="ml-3">
531
+ <p class="p">
532
+
533
+ </p>
534
+
535
+
536
+ </div>
537
+
538
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-7">
539
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-7</code></h4>
540
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-7</span> <span class="token punctuation">{</span>
541
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
542
+ <span class="token punctuation">}</span></pre>
543
+ </div>
544
+ <div class="ml-3">
545
+ <p class="p">
546
+
547
+ </p>
548
+
549
+
550
+ </div>
551
+
552
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pr-8">
553
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pr-8</code></h4>
554
+ <pre class="f-3 highlighted-code"><span class="token selector">.pr-8</span> <span class="token punctuation">{</span>
555
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
556
+ <span class="token punctuation">}</span></pre>
557
+ </div>
558
+ <div class="ml-3">
559
+ <p class="p">
560
+
561
+ </p>
562
+
563
+
564
+ </div>
565
+
566
+
567
+ <h3 class="f-5 mt-4" id="class-scale:padding-top">Padding Top</h3>
568
+ <p class="p">
569
+ <p>Padding on the top</p>
570
+
571
+ </p>
572
+
573
+
574
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-0">
575
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-0</code></h4>
576
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-0</span> <span class="token punctuation">{</span>
577
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
578
+ <span class="token punctuation">}</span></pre>
579
+ </div>
580
+ <div class="ml-3">
581
+ <p class="p">
582
+
583
+ </p>
584
+
585
+
586
+ </div>
587
+
588
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-1">
589
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-1</code></h4>
590
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-1</span> <span class="token punctuation">{</span>
591
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
592
+ <span class="token punctuation">}</span></pre>
593
+ </div>
594
+ <div class="ml-3">
595
+ <p class="p">
596
+
597
+ </p>
598
+
599
+
600
+ </div>
601
+
602
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-2">
603
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-2</code></h4>
604
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-2</span> <span class="token punctuation">{</span>
605
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
606
+ <span class="token punctuation">}</span></pre>
607
+ </div>
608
+ <div class="ml-3">
609
+ <p class="p">
610
+
611
+ </p>
612
+
613
+
614
+ </div>
615
+
616
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-3">
617
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-3</code></h4>
618
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-3</span> <span class="token punctuation">{</span>
619
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
620
+ <span class="token punctuation">}</span></pre>
621
+ </div>
622
+ <div class="ml-3">
623
+ <p class="p">
624
+
625
+ </p>
626
+
627
+
628
+ </div>
629
+
630
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-4">
631
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-4</code></h4>
632
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-4</span> <span class="token punctuation">{</span>
633
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
634
+ <span class="token punctuation">}</span></pre>
635
+ </div>
636
+ <div class="ml-3">
637
+ <p class="p">
638
+
639
+ </p>
640
+
641
+
642
+ </div>
643
+
644
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-5">
645
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-5</code></h4>
646
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-5</span> <span class="token punctuation">{</span>
647
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
648
+ <span class="token punctuation">}</span></pre>
649
+ </div>
650
+ <div class="ml-3">
651
+ <p class="p">
652
+
653
+ </p>
654
+
655
+
656
+ </div>
657
+
658
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-6">
659
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-6</code></h4>
660
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-6</span> <span class="token punctuation">{</span>
661
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
662
+ <span class="token punctuation">}</span></pre>
663
+ </div>
664
+ <div class="ml-3">
665
+ <p class="p">
666
+
667
+ </p>
668
+
669
+
670
+ </div>
671
+
672
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-7">
673
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-7</code></h4>
674
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-7</span> <span class="token punctuation">{</span>
675
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
676
+ <span class="token punctuation">}</span></pre>
677
+ </div>
678
+ <div class="ml-3">
679
+ <p class="p">
680
+
681
+ </p>
682
+
683
+
684
+ </div>
685
+
686
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pt-8">
687
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pt-8</code></h4>
688
+ <pre class="f-3 highlighted-code"><span class="token selector">.pt-8</span> <span class="token punctuation">{</span>
689
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
690
+ <span class="token punctuation">}</span></pre>
691
+ </div>
692
+ <div class="ml-3">
693
+ <p class="p">
694
+
695
+ </p>
696
+
697
+
698
+ </div>
699
+
700
+
701
+ <h3 class="f-5 mt-4" id="class-scale:padding-bottom">Padding Bottom</h3>
702
+ <p class="p">
703
+ <p>Padding on the bottom</p>
704
+
705
+ </p>
706
+
707
+
708
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-0">
709
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-0</code></h4>
710
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-0</span> <span class="token punctuation">{</span>
711
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
712
+ <span class="token punctuation">}</span></pre>
713
+ </div>
714
+ <div class="ml-3">
715
+ <p class="p">
716
+
717
+ </p>
718
+
719
+
720
+ </div>
721
+
722
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-1">
723
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-1</code></h4>
724
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-1</span> <span class="token punctuation">{</span>
725
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
726
+ <span class="token punctuation">}</span></pre>
727
+ </div>
728
+ <div class="ml-3">
729
+ <p class="p">
730
+
731
+ </p>
732
+
733
+
734
+ </div>
735
+
736
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-2">
737
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-2</code></h4>
738
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-2</span> <span class="token punctuation">{</span>
739
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
740
+ <span class="token punctuation">}</span></pre>
741
+ </div>
742
+ <div class="ml-3">
743
+ <p class="p">
744
+
745
+ </p>
746
+
747
+
748
+ </div>
749
+
750
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-3">
751
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-3</code></h4>
752
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-3</span> <span class="token punctuation">{</span>
753
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
754
+ <span class="token punctuation">}</span></pre>
755
+ </div>
756
+ <div class="ml-3">
757
+ <p class="p">
758
+
759
+ </p>
760
+
761
+
762
+ </div>
763
+
764
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-4">
765
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-4</code></h4>
766
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-4</span> <span class="token punctuation">{</span>
767
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
768
+ <span class="token punctuation">}</span></pre>
769
+ </div>
770
+ <div class="ml-3">
771
+ <p class="p">
772
+
773
+ </p>
774
+
775
+
776
+ </div>
777
+
778
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-5">
779
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-5</code></h4>
780
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-5</span> <span class="token punctuation">{</span>
781
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
782
+ <span class="token punctuation">}</span></pre>
783
+ </div>
784
+ <div class="ml-3">
785
+ <p class="p">
786
+
787
+ </p>
788
+
789
+
790
+ </div>
791
+
792
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-6">
793
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-6</code></h4>
794
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-6</span> <span class="token punctuation">{</span>
795
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
796
+ <span class="token punctuation">}</span></pre>
797
+ </div>
798
+ <div class="ml-3">
799
+ <p class="p">
800
+
801
+ </p>
802
+
803
+
804
+ </div>
805
+
806
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-7">
807
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-7</code></h4>
808
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-7</span> <span class="token punctuation">{</span>
809
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
810
+ <span class="token punctuation">}</span></pre>
811
+ </div>
812
+ <div class="ml-3">
813
+ <p class="p">
814
+
815
+ </p>
816
+
817
+
818
+ </div>
819
+
820
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pb-8">
821
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pb-8</code></h4>
822
+ <pre class="f-3 highlighted-code"><span class="token selector">.pb-8</span> <span class="token punctuation">{</span>
823
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
824
+ <span class="token punctuation">}</span></pre>
825
+ </div>
826
+ <div class="ml-3">
827
+ <p class="p">
828
+
829
+ </p>
830
+
831
+
832
+ </div>
833
+
834
+
835
+ <h3 class="f-5 mt-4" id="class-scale:padding-horizontal">Padding Horizontal</h3>
836
+ <p class="p">
837
+ <p>Horizontal padding</p>
838
+
839
+ </p>
840
+
841
+
842
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-0">
843
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-0</code></h4>
844
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-0</span> <span class="token punctuation">{</span>
845
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
846
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
847
+ <span class="token punctuation">}</span></pre>
848
+ </div>
849
+ <div class="ml-3">
850
+ <p class="p">
851
+
852
+ </p>
853
+
854
+
855
+ </div>
856
+
857
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-1">
858
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-1</code></h4>
859
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-1</span> <span class="token punctuation">{</span>
860
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
861
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
862
+ <span class="token punctuation">}</span></pre>
863
+ </div>
864
+ <div class="ml-3">
865
+ <p class="p">
866
+
867
+ </p>
868
+
869
+
870
+ </div>
871
+
872
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-2">
873
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-2</code></h4>
874
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-2</span> <span class="token punctuation">{</span>
875
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
876
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
877
+ <span class="token punctuation">}</span></pre>
878
+ </div>
879
+ <div class="ml-3">
880
+ <p class="p">
881
+
882
+ </p>
883
+
884
+
885
+ </div>
886
+
887
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-3">
888
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-3</code></h4>
889
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-3</span> <span class="token punctuation">{</span>
890
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
891
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
892
+ <span class="token punctuation">}</span></pre>
893
+ </div>
894
+ <div class="ml-3">
895
+ <p class="p">
896
+
897
+ </p>
898
+
899
+
900
+ </div>
901
+
902
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-4">
903
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-4</code></h4>
904
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-4</span> <span class="token punctuation">{</span>
905
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
906
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
907
+ <span class="token punctuation">}</span></pre>
908
+ </div>
909
+ <div class="ml-3">
910
+ <p class="p">
911
+
912
+ </p>
913
+
914
+
915
+ </div>
916
+
917
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-5">
918
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-5</code></h4>
919
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-5</span> <span class="token punctuation">{</span>
920
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
921
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
922
+ <span class="token punctuation">}</span></pre>
923
+ </div>
924
+ <div class="ml-3">
925
+ <p class="p">
926
+
927
+ </p>
928
+
929
+
930
+ </div>
931
+
932
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-6">
933
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-6</code></h4>
934
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-6</span> <span class="token punctuation">{</span>
935
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
936
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
937
+ <span class="token punctuation">}</span></pre>
938
+ </div>
939
+ <div class="ml-3">
940
+ <p class="p">
941
+
942
+ </p>
943
+
944
+
945
+ </div>
946
+
947
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-7">
948
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-7</code></h4>
949
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-7</span> <span class="token punctuation">{</span>
950
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
951
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
952
+ <span class="token punctuation">}</span></pre>
953
+ </div>
954
+ <div class="ml-3">
955
+ <p class="p">
956
+
957
+ </p>
958
+
959
+
960
+ </div>
961
+
962
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ph-8">
963
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ph-8</code></h4>
964
+ <pre class="f-3 highlighted-code"><span class="token selector">.ph-8</span> <span class="token punctuation">{</span>
965
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
966
+ <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
967
+ <span class="token punctuation">}</span></pre>
968
+ </div>
969
+ <div class="ml-3">
970
+ <p class="p">
971
+
972
+ </p>
973
+
974
+
975
+ </div>
976
+
977
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-0">
978
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-0</code></h4>
979
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-0</span> <span class="token punctuation">{</span>
980
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
981
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
982
+ <span class="token punctuation">}</span></pre>
983
+ </div>
984
+ <div class="ml-3">
985
+ <p class="p">
986
+
987
+ </p>
988
+
989
+
990
+ </div>
991
+
992
+
993
+ <h3 class="f-5 mt-4" id="class-scale:padding-vertical">Padding Vertical</h3>
994
+ <p class="p">
995
+ <p>Vertical padding</p>
996
+
997
+ </p>
998
+
999
+
1000
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-1">
1001
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-1</code></h4>
1002
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-1</span> <span class="token punctuation">{</span>
1003
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1004
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1005
+ <span class="token punctuation">}</span></pre>
1006
+ </div>
1007
+ <div class="ml-3">
1008
+ <p class="p">
1009
+
1010
+ </p>
1011
+
1012
+
1013
+ </div>
1014
+
1015
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-2">
1016
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-2</code></h4>
1017
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-2</span> <span class="token punctuation">{</span>
1018
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1019
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1020
+ <span class="token punctuation">}</span></pre>
1021
+ </div>
1022
+ <div class="ml-3">
1023
+ <p class="p">
1024
+
1025
+ </p>
1026
+
1027
+
1028
+ </div>
1029
+
1030
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-3">
1031
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-3</code></h4>
1032
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-3</span> <span class="token punctuation">{</span>
1033
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1034
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1035
+ <span class="token punctuation">}</span></pre>
1036
+ </div>
1037
+ <div class="ml-3">
1038
+ <p class="p">
1039
+
1040
+ </p>
1041
+
1042
+
1043
+ </div>
1044
+
1045
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-4">
1046
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-4</code></h4>
1047
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-4</span> <span class="token punctuation">{</span>
1048
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1049
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1050
+ <span class="token punctuation">}</span></pre>
1051
+ </div>
1052
+ <div class="ml-3">
1053
+ <p class="p">
1054
+
1055
+ </p>
1056
+
1057
+
1058
+ </div>
1059
+
1060
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-5">
1061
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-5</code></h4>
1062
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-5</span> <span class="token punctuation">{</span>
1063
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1064
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1065
+ <span class="token punctuation">}</span></pre>
1066
+ </div>
1067
+ <div class="ml-3">
1068
+ <p class="p">
1069
+
1070
+ </p>
1071
+
1072
+
1073
+ </div>
1074
+
1075
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-6">
1076
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-6</code></h4>
1077
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-6</span> <span class="token punctuation">{</span>
1078
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1079
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1080
+ <span class="token punctuation">}</span></pre>
1081
+ </div>
1082
+ <div class="ml-3">
1083
+ <p class="p">
1084
+
1085
+ </p>
1086
+
1087
+
1088
+ </div>
1089
+
1090
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-7">
1091
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-7</code></h4>
1092
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-7</span> <span class="token punctuation">{</span>
1093
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1094
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1095
+ <span class="token punctuation">}</span></pre>
1096
+ </div>
1097
+ <div class="ml-3">
1098
+ <p class="p">
1099
+
1100
+ </p>
1101
+
1102
+
1103
+ </div>
1104
+
1105
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pv-8">
1106
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pv-8</code></h4>
1107
+ <pre class="f-3 highlighted-code"><span class="token selector">.pv-8</span> <span class="token punctuation">{</span>
1108
+ <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1109
+ <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1110
+ <span class="token punctuation">}</span></pre>
1111
+ </div>
1112
+ <div class="ml-3">
1113
+ <p class="p">
1114
+
1115
+ </p>
1116
+
1117
+
1118
+ </div>
1119
+
1120
+
1121
+ <h3 class="f-5 mt-4" id="class-scale:margin-all">Margin All</h3>
1122
+ <p class="p">
1123
+ <p>Margin on all sides</p>
1124
+
1125
+ </p>
1126
+
1127
+
1128
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-0">
1129
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-0</code></h4>
1130
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-0</span> <span class="token punctuation">{</span>
1131
+ <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1132
+ <span class="token punctuation">}</span></pre>
1133
+ </div>
1134
+ <div class="ml-3">
1135
+ <p class="p">
1136
+
1137
+ </p>
1138
+
1139
+
1140
+ </div>
1141
+
1142
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-1">
1143
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-1</code></h4>
1144
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-1</span> <span class="token punctuation">{</span>
1145
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1146
+ <span class="token punctuation">}</span></pre>
1147
+ </div>
1148
+ <div class="ml-3">
1149
+ <p class="p">
1150
+
1151
+ </p>
1152
+
1153
+
1154
+ </div>
1155
+
1156
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-2">
1157
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-2</code></h4>
1158
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-2</span> <span class="token punctuation">{</span>
1159
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1160
+ <span class="token punctuation">}</span></pre>
1161
+ </div>
1162
+ <div class="ml-3">
1163
+ <p class="p">
1164
+
1165
+ </p>
1166
+
1167
+
1168
+ </div>
1169
+
1170
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-3">
1171
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-3</code></h4>
1172
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-3</span> <span class="token punctuation">{</span>
1173
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1174
+ <span class="token punctuation">}</span></pre>
1175
+ </div>
1176
+ <div class="ml-3">
1177
+ <p class="p">
1178
+
1179
+ </p>
1180
+
1181
+
1182
+ </div>
1183
+
1184
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-4">
1185
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-4</code></h4>
1186
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-4</span> <span class="token punctuation">{</span>
1187
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1188
+ <span class="token punctuation">}</span></pre>
1189
+ </div>
1190
+ <div class="ml-3">
1191
+ <p class="p">
1192
+
1193
+ </p>
1194
+
1195
+
1196
+ </div>
1197
+
1198
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-5">
1199
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-5</code></h4>
1200
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-5</span> <span class="token punctuation">{</span>
1201
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1202
+ <span class="token punctuation">}</span></pre>
1203
+ </div>
1204
+ <div class="ml-3">
1205
+ <p class="p">
1206
+
1207
+ </p>
1208
+
1209
+
1210
+ </div>
1211
+
1212
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-6">
1213
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-6</code></h4>
1214
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-6</span> <span class="token punctuation">{</span>
1215
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1216
+ <span class="token punctuation">}</span></pre>
1217
+ </div>
1218
+ <div class="ml-3">
1219
+ <p class="p">
1220
+
1221
+ </p>
1222
+
1223
+
1224
+ </div>
1225
+
1226
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-7">
1227
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-7</code></h4>
1228
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-7</span> <span class="token punctuation">{</span>
1229
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1230
+ <span class="token punctuation">}</span></pre>
1231
+ </div>
1232
+ <div class="ml-3">
1233
+ <p class="p">
1234
+
1235
+ </p>
1236
+
1237
+
1238
+ </div>
1239
+
1240
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-8">
1241
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-8</code></h4>
1242
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-8</span> <span class="token punctuation">{</span>
1243
+ <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1244
+ <span class="token punctuation">}</span></pre>
1245
+ </div>
1246
+ <div class="ml-3">
1247
+ <p class="p">
1248
+
1249
+ </p>
1250
+
1251
+
1252
+ </div>
1253
+
1254
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ma-auto">
1255
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ma-auto</code></h4>
1256
+ <pre class="f-3 highlighted-code"><span class="token selector">.ma-auto</span> <span class="token punctuation">{</span>
1257
+ <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
1258
+ <span class="token punctuation">}</span></pre>
1259
+ </div>
1260
+ <div class="ml-3">
1261
+ <p class="p">
1262
+
1263
+ </p>
1264
+
1265
+
1266
+ </div>
1267
+
1268
+
1269
+ <h3 class="f-5 mt-4" id="class-scale:margin-left">Margin Left</h3>
1270
+ <p class="p">
1271
+ <p>Margin on the left</p>
1272
+
1273
+ </p>
1274
+
1275
+
1276
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-0">
1277
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-0</code></h4>
1278
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-0</span> <span class="token punctuation">{</span>
1279
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1280
+ <span class="token punctuation">}</span></pre>
1281
+ </div>
1282
+ <div class="ml-3">
1283
+ <p class="p">
1284
+
1285
+ </p>
1286
+
1287
+
1288
+ </div>
1289
+
1290
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-1">
1291
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-1</code></h4>
1292
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-1</span> <span class="token punctuation">{</span>
1293
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1294
+ <span class="token punctuation">}</span></pre>
1295
+ </div>
1296
+ <div class="ml-3">
1297
+ <p class="p">
1298
+
1299
+ </p>
1300
+
1301
+
1302
+ </div>
1303
+
1304
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-2">
1305
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-2</code></h4>
1306
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-2</span> <span class="token punctuation">{</span>
1307
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1308
+ <span class="token punctuation">}</span></pre>
1309
+ </div>
1310
+ <div class="ml-3">
1311
+ <p class="p">
1312
+
1313
+ </p>
1314
+
1315
+
1316
+ </div>
1317
+
1318
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-3">
1319
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-3</code></h4>
1320
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-3</span> <span class="token punctuation">{</span>
1321
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1322
+ <span class="token punctuation">}</span></pre>
1323
+ </div>
1324
+ <div class="ml-3">
1325
+ <p class="p">
1326
+
1327
+ </p>
1328
+
1329
+
1330
+ </div>
1331
+
1332
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-4">
1333
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-4</code></h4>
1334
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-4</span> <span class="token punctuation">{</span>
1335
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1336
+ <span class="token punctuation">}</span></pre>
1337
+ </div>
1338
+ <div class="ml-3">
1339
+ <p class="p">
1340
+
1341
+ </p>
1342
+
1343
+
1344
+ </div>
1345
+
1346
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-5">
1347
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-5</code></h4>
1348
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-5</span> <span class="token punctuation">{</span>
1349
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1350
+ <span class="token punctuation">}</span></pre>
1351
+ </div>
1352
+ <div class="ml-3">
1353
+ <p class="p">
1354
+
1355
+ </p>
1356
+
1357
+
1358
+ </div>
1359
+
1360
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-6">
1361
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-6</code></h4>
1362
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-6</span> <span class="token punctuation">{</span>
1363
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1364
+ <span class="token punctuation">}</span></pre>
1365
+ </div>
1366
+ <div class="ml-3">
1367
+ <p class="p">
1368
+
1369
+ </p>
1370
+
1371
+
1372
+ </div>
1373
+
1374
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-7">
1375
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-7</code></h4>
1376
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-7</span> <span class="token punctuation">{</span>
1377
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1378
+ <span class="token punctuation">}</span></pre>
1379
+ </div>
1380
+ <div class="ml-3">
1381
+ <p class="p">
1382
+
1383
+ </p>
1384
+
1385
+
1386
+ </div>
1387
+
1388
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-8">
1389
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-8</code></h4>
1390
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-8</span> <span class="token punctuation">{</span>
1391
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1392
+ <span class="token punctuation">}</span></pre>
1393
+ </div>
1394
+ <div class="ml-3">
1395
+ <p class="p">
1396
+
1397
+ </p>
1398
+
1399
+
1400
+ </div>
1401
+
1402
+ <div class="mt-4 flex gap-3 items-center justify-between" id="ml-auto">
1403
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.ml-auto</code></h4>
1404
+ <pre class="f-3 highlighted-code"><span class="token selector">.ml-auto</span> <span class="token punctuation">{</span>
1405
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
1406
+ <span class="token punctuation">}</span></pre>
1407
+ </div>
1408
+ <div class="ml-3">
1409
+ <p class="p">
1410
+
1411
+ </p>
1412
+
1413
+
1414
+ </div>
1415
+
1416
+
1417
+ <h3 class="f-5 mt-4" id="class-scale:margin-right">Margin Right</h3>
1418
+ <p class="p">
1419
+ <p>Margin on the right</p>
1420
+
1421
+ </p>
1422
+
1423
+
1424
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-0">
1425
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-0</code></h4>
1426
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-0</span> <span class="token punctuation">{</span>
1427
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1428
+ <span class="token punctuation">}</span></pre>
1429
+ </div>
1430
+ <div class="ml-3">
1431
+ <p class="p">
1432
+
1433
+ </p>
1434
+
1435
+
1436
+ </div>
1437
+
1438
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-1">
1439
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-1</code></h4>
1440
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-1</span> <span class="token punctuation">{</span>
1441
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1442
+ <span class="token punctuation">}</span></pre>
1443
+ </div>
1444
+ <div class="ml-3">
1445
+ <p class="p">
1446
+
1447
+ </p>
1448
+
1449
+
1450
+ </div>
1451
+
1452
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-2">
1453
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-2</code></h4>
1454
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-2</span> <span class="token punctuation">{</span>
1455
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1456
+ <span class="token punctuation">}</span></pre>
1457
+ </div>
1458
+ <div class="ml-3">
1459
+ <p class="p">
1460
+
1461
+ </p>
1462
+
1463
+
1464
+ </div>
1465
+
1466
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-3">
1467
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-3</code></h4>
1468
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-3</span> <span class="token punctuation">{</span>
1469
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1470
+ <span class="token punctuation">}</span></pre>
1471
+ </div>
1472
+ <div class="ml-3">
1473
+ <p class="p">
1474
+
1475
+ </p>
1476
+
1477
+
1478
+ </div>
1479
+
1480
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-4">
1481
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-4</code></h4>
1482
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-4</span> <span class="token punctuation">{</span>
1483
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1484
+ <span class="token punctuation">}</span></pre>
1485
+ </div>
1486
+ <div class="ml-3">
1487
+ <p class="p">
1488
+
1489
+ </p>
1490
+
1491
+
1492
+ </div>
1493
+
1494
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-5">
1495
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-5</code></h4>
1496
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-5</span> <span class="token punctuation">{</span>
1497
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1498
+ <span class="token punctuation">}</span></pre>
1499
+ </div>
1500
+ <div class="ml-3">
1501
+ <p class="p">
1502
+
1503
+ </p>
1504
+
1505
+
1506
+ </div>
1507
+
1508
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-6">
1509
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-6</code></h4>
1510
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-6</span> <span class="token punctuation">{</span>
1511
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1512
+ <span class="token punctuation">}</span></pre>
1513
+ </div>
1514
+ <div class="ml-3">
1515
+ <p class="p">
1516
+
1517
+ </p>
1518
+
1519
+
1520
+ </div>
1521
+
1522
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-7">
1523
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-7</code></h4>
1524
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-7</span> <span class="token punctuation">{</span>
1525
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1526
+ <span class="token punctuation">}</span></pre>
1527
+ </div>
1528
+ <div class="ml-3">
1529
+ <p class="p">
1530
+
1531
+ </p>
1532
+
1533
+
1534
+ </div>
1535
+
1536
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-8">
1537
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-8</code></h4>
1538
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-8</span> <span class="token punctuation">{</span>
1539
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1540
+ <span class="token punctuation">}</span></pre>
1541
+ </div>
1542
+ <div class="ml-3">
1543
+ <p class="p">
1544
+
1545
+ </p>
1546
+
1547
+
1548
+ </div>
1549
+
1550
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mr-auto">
1551
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mr-auto</code></h4>
1552
+ <pre class="f-3 highlighted-code"><span class="token selector">.mr-auto</span> <span class="token punctuation">{</span>
1553
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
1554
+ <span class="token punctuation">}</span></pre>
1555
+ </div>
1556
+ <div class="ml-3">
1557
+ <p class="p">
1558
+
1559
+ </p>
1560
+
1561
+
1562
+ </div>
1563
+
1564
+
1565
+ <h3 class="f-5 mt-4" id="class-scale:margin-top">Margin Top</h3>
1566
+ <p class="p">
1567
+ <p>Margin on the top</p>
1568
+
1569
+ </p>
1570
+
1571
+
1572
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-0">
1573
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-0</code></h4>
1574
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-0</span> <span class="token punctuation">{</span>
1575
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1576
+ <span class="token punctuation">}</span></pre>
1577
+ </div>
1578
+ <div class="ml-3">
1579
+ <p class="p">
1580
+
1581
+ </p>
1582
+
1583
+
1584
+ </div>
1585
+
1586
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-1">
1587
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-1</code></h4>
1588
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-1</span> <span class="token punctuation">{</span>
1589
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1590
+ <span class="token punctuation">}</span></pre>
1591
+ </div>
1592
+ <div class="ml-3">
1593
+ <p class="p">
1594
+
1595
+ </p>
1596
+
1597
+
1598
+ </div>
1599
+
1600
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-2">
1601
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-2</code></h4>
1602
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-2</span> <span class="token punctuation">{</span>
1603
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1604
+ <span class="token punctuation">}</span></pre>
1605
+ </div>
1606
+ <div class="ml-3">
1607
+ <p class="p">
1608
+
1609
+ </p>
1610
+
1611
+
1612
+ </div>
1613
+
1614
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-3">
1615
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-3</code></h4>
1616
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-3</span> <span class="token punctuation">{</span>
1617
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1618
+ <span class="token punctuation">}</span></pre>
1619
+ </div>
1620
+ <div class="ml-3">
1621
+ <p class="p">
1622
+
1623
+ </p>
1624
+
1625
+
1626
+ </div>
1627
+
1628
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-4">
1629
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-4</code></h4>
1630
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-4</span> <span class="token punctuation">{</span>
1631
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1632
+ <span class="token punctuation">}</span></pre>
1633
+ </div>
1634
+ <div class="ml-3">
1635
+ <p class="p">
1636
+
1637
+ </p>
1638
+
1639
+
1640
+ </div>
1641
+
1642
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-5">
1643
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-5</code></h4>
1644
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-5</span> <span class="token punctuation">{</span>
1645
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1646
+ <span class="token punctuation">}</span></pre>
1647
+ </div>
1648
+ <div class="ml-3">
1649
+ <p class="p">
1650
+
1651
+ </p>
1652
+
1653
+
1654
+ </div>
1655
+
1656
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-6">
1657
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-6</code></h4>
1658
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-6</span> <span class="token punctuation">{</span>
1659
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1660
+ <span class="token punctuation">}</span></pre>
1661
+ </div>
1662
+ <div class="ml-3">
1663
+ <p class="p">
1664
+
1665
+ </p>
1666
+
1667
+
1668
+ </div>
1669
+
1670
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-7">
1671
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-7</code></h4>
1672
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-7</span> <span class="token punctuation">{</span>
1673
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1674
+ <span class="token punctuation">}</span></pre>
1675
+ </div>
1676
+ <div class="ml-3">
1677
+ <p class="p">
1678
+
1679
+ </p>
1680
+
1681
+
1682
+ </div>
1683
+
1684
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-8">
1685
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-8</code></h4>
1686
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-8</span> <span class="token punctuation">{</span>
1687
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1688
+ <span class="token punctuation">}</span></pre>
1689
+ </div>
1690
+ <div class="ml-3">
1691
+ <p class="p">
1692
+
1693
+ </p>
1694
+
1695
+
1696
+ </div>
1697
+
1698
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mt-auto">
1699
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mt-auto</code></h4>
1700
+ <pre class="f-3 highlighted-code"><span class="token selector">.mt-auto</span> <span class="token punctuation">{</span>
1701
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
1702
+ <span class="token punctuation">}</span></pre>
1703
+ </div>
1704
+ <div class="ml-3">
1705
+ <p class="p">
1706
+
1707
+ </p>
1708
+
1709
+
1710
+ </div>
1711
+
1712
+
1713
+ <h3 class="f-5 mt-4" id="class-scale:margin-bottom">Margin Bottom</h3>
1714
+ <p class="p">
1715
+ <p>Margin on the bottom</p>
1716
+
1717
+ </p>
1718
+
1719
+
1720
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-0">
1721
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-0</code></h4>
1722
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-0</span> <span class="token punctuation">{</span>
1723
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1724
+ <span class="token punctuation">}</span></pre>
1725
+ </div>
1726
+ <div class="ml-3">
1727
+ <p class="p">
1728
+
1729
+ </p>
1730
+
1731
+
1732
+ </div>
1733
+
1734
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-1">
1735
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-1</code></h4>
1736
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-1</span> <span class="token punctuation">{</span>
1737
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1738
+ <span class="token punctuation">}</span></pre>
1739
+ </div>
1740
+ <div class="ml-3">
1741
+ <p class="p">
1742
+
1743
+ </p>
1744
+
1745
+
1746
+ </div>
1747
+
1748
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-2">
1749
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-2</code></h4>
1750
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-2</span> <span class="token punctuation">{</span>
1751
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1752
+ <span class="token punctuation">}</span></pre>
1753
+ </div>
1754
+ <div class="ml-3">
1755
+ <p class="p">
1756
+
1757
+ </p>
1758
+
1759
+
1760
+ </div>
1761
+
1762
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-3">
1763
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-3</code></h4>
1764
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-3</span> <span class="token punctuation">{</span>
1765
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1766
+ <span class="token punctuation">}</span></pre>
1767
+ </div>
1768
+ <div class="ml-3">
1769
+ <p class="p">
1770
+
1771
+ </p>
1772
+
1773
+
1774
+ </div>
1775
+
1776
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-4">
1777
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-4</code></h4>
1778
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-4</span> <span class="token punctuation">{</span>
1779
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1780
+ <span class="token punctuation">}</span></pre>
1781
+ </div>
1782
+ <div class="ml-3">
1783
+ <p class="p">
1784
+
1785
+ </p>
1786
+
1787
+
1788
+ </div>
1789
+
1790
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-5">
1791
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-5</code></h4>
1792
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-5</span> <span class="token punctuation">{</span>
1793
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1794
+ <span class="token punctuation">}</span></pre>
1795
+ </div>
1796
+ <div class="ml-3">
1797
+ <p class="p">
1798
+
1799
+ </p>
1800
+
1801
+
1802
+ </div>
1803
+
1804
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-6">
1805
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-6</code></h4>
1806
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-6</span> <span class="token punctuation">{</span>
1807
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1808
+ <span class="token punctuation">}</span></pre>
1809
+ </div>
1810
+ <div class="ml-3">
1811
+ <p class="p">
1812
+
1813
+ </p>
1814
+
1815
+
1816
+ </div>
1817
+
1818
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-7">
1819
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-7</code></h4>
1820
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-7</span> <span class="token punctuation">{</span>
1821
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1822
+ <span class="token punctuation">}</span></pre>
1823
+ </div>
1824
+ <div class="ml-3">
1825
+ <p class="p">
1826
+
1827
+ </p>
1828
+
1829
+
1830
+ </div>
1831
+
1832
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-8">
1833
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-8</code></h4>
1834
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-8</span> <span class="token punctuation">{</span>
1835
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1836
+ <span class="token punctuation">}</span></pre>
1837
+ </div>
1838
+ <div class="ml-3">
1839
+ <p class="p">
1840
+
1841
+ </p>
1842
+
1843
+
1844
+ </div>
1845
+
1846
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mb-auto">
1847
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mb-auto</code></h4>
1848
+ <pre class="f-3 highlighted-code"><span class="token selector">.mb-auto</span> <span class="token punctuation">{</span>
1849
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
1850
+ <span class="token punctuation">}</span></pre>
1851
+ </div>
1852
+ <div class="ml-3">
1853
+ <p class="p">
1854
+
1855
+ </p>
1856
+
1857
+
1858
+ </div>
1859
+
1860
+
1861
+ <h3 class="f-5 mt-4" id="class-scale:margin-horizontal">Margin Horizontal</h3>
1862
+ <p class="p">
1863
+ <p>Horizontal margin</p>
1864
+
1865
+ </p>
1866
+
1867
+
1868
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-0">
1869
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-0</code></h4>
1870
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-0</span> <span class="token punctuation">{</span>
1871
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1872
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1873
+ <span class="token punctuation">}</span></pre>
1874
+ </div>
1875
+ <div class="ml-3">
1876
+ <p class="p">
1877
+
1878
+ </p>
1879
+
1880
+
1881
+ </div>
1882
+
1883
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-1">
1884
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-1</code></h4>
1885
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-1</span> <span class="token punctuation">{</span>
1886
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1887
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1888
+ <span class="token punctuation">}</span></pre>
1889
+ </div>
1890
+ <div class="ml-3">
1891
+ <p class="p">
1892
+
1893
+ </p>
1894
+
1895
+
1896
+ </div>
1897
+
1898
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-2">
1899
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-2</code></h4>
1900
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-2</span> <span class="token punctuation">{</span>
1901
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1902
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1903
+ <span class="token punctuation">}</span></pre>
1904
+ </div>
1905
+ <div class="ml-3">
1906
+ <p class="p">
1907
+
1908
+ </p>
1909
+
1910
+
1911
+ </div>
1912
+
1913
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-3">
1914
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-3</code></h4>
1915
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-3</span> <span class="token punctuation">{</span>
1916
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1917
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1918
+ <span class="token punctuation">}</span></pre>
1919
+ </div>
1920
+ <div class="ml-3">
1921
+ <p class="p">
1922
+
1923
+ </p>
1924
+
1925
+
1926
+ </div>
1927
+
1928
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-4">
1929
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-4</code></h4>
1930
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-4</span> <span class="token punctuation">{</span>
1931
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1932
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1933
+ <span class="token punctuation">}</span></pre>
1934
+ </div>
1935
+ <div class="ml-3">
1936
+ <p class="p">
1937
+
1938
+ </p>
1939
+
1940
+
1941
+ </div>
1942
+
1943
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-5">
1944
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-5</code></h4>
1945
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-5</span> <span class="token punctuation">{</span>
1946
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1947
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1948
+ <span class="token punctuation">}</span></pre>
1949
+ </div>
1950
+ <div class="ml-3">
1951
+ <p class="p">
1952
+
1953
+ </p>
1954
+
1955
+
1956
+ </div>
1957
+
1958
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-6">
1959
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-6</code></h4>
1960
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-6</span> <span class="token punctuation">{</span>
1961
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1962
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1963
+ <span class="token punctuation">}</span></pre>
1964
+ </div>
1965
+ <div class="ml-3">
1966
+ <p class="p">
1967
+
1968
+ </p>
1969
+
1970
+
1971
+ </div>
1972
+
1973
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-7">
1974
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-7</code></h4>
1975
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-7</span> <span class="token punctuation">{</span>
1976
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1977
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1978
+ <span class="token punctuation">}</span></pre>
1979
+ </div>
1980
+ <div class="ml-3">
1981
+ <p class="p">
1982
+
1983
+ </p>
1984
+
1985
+
1986
+ </div>
1987
+
1988
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-8">
1989
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-8</code></h4>
1990
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-8</span> <span class="token punctuation">{</span>
1991
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1992
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1993
+ <span class="token punctuation">}</span></pre>
1994
+ </div>
1995
+ <div class="ml-3">
1996
+ <p class="p">
1997
+
1998
+ </p>
1999
+
2000
+
2001
+ </div>
2002
+
2003
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mh-auto">
2004
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mh-auto</code></h4>
2005
+ <pre class="f-3 highlighted-code"><span class="token selector">.mh-auto</span> <span class="token punctuation">{</span>
2006
+ <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
2007
+ <span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
2008
+ <span class="token punctuation">}</span></pre>
2009
+ </div>
2010
+ <div class="ml-3">
2011
+ <p class="p">
2012
+
2013
+ </p>
2014
+
2015
+
2016
+ </div>
2017
+
2018
+
2019
+ <h3 class="f-5 mt-4" id="class-scale:margin-vertical">Margin Vertical</h3>
2020
+ <p class="p">
2021
+ <p>Vertical margin</p>
2022
+
2023
+ </p>
2024
+
2025
+
2026
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-0">
2027
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-0</code></h4>
2028
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-0</span> <span class="token punctuation">{</span>
2029
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
2030
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
2031
+ <span class="token punctuation">}</span></pre>
2032
+ </div>
2033
+ <div class="ml-3">
2034
+ <p class="p">
2035
+
2036
+ </p>
2037
+
2038
+
2039
+ </div>
2040
+
2041
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-1">
2042
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-1</code></h4>
2043
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-1</span> <span class="token punctuation">{</span>
2044
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
2045
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
2046
+ <span class="token punctuation">}</span></pre>
2047
+ </div>
2048
+ <div class="ml-3">
2049
+ <p class="p">
2050
+
2051
+ </p>
2052
+
2053
+
2054
+ </div>
2055
+
2056
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-2">
2057
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-2</code></h4>
2058
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-2</span> <span class="token punctuation">{</span>
2059
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
2060
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
2061
+ <span class="token punctuation">}</span></pre>
2062
+ </div>
2063
+ <div class="ml-3">
2064
+ <p class="p">
2065
+
2066
+ </p>
2067
+
2068
+
2069
+ </div>
2070
+
2071
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-3">
2072
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-3</code></h4>
2073
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-3</span> <span class="token punctuation">{</span>
2074
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2075
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2076
+ <span class="token punctuation">}</span></pre>
2077
+ </div>
2078
+ <div class="ml-3">
2079
+ <p class="p">
2080
+
2081
+ </p>
2082
+
2083
+
2084
+ </div>
2085
+
2086
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-4">
2087
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-4</code></h4>
2088
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-4</span> <span class="token punctuation">{</span>
2089
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
2090
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
2091
+ <span class="token punctuation">}</span></pre>
2092
+ </div>
2093
+ <div class="ml-3">
2094
+ <p class="p">
2095
+
2096
+ </p>
2097
+
2098
+
2099
+ </div>
2100
+
2101
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-5">
2102
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-5</code></h4>
2103
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-5</span> <span class="token punctuation">{</span>
2104
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2105
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2106
+ <span class="token punctuation">}</span></pre>
2107
+ </div>
2108
+ <div class="ml-3">
2109
+ <p class="p">
2110
+
2111
+ </p>
2112
+
2113
+
2114
+ </div>
2115
+
2116
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-6">
2117
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-6</code></h4>
2118
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-6</span> <span class="token punctuation">{</span>
2119
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
2120
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
2121
+ <span class="token punctuation">}</span></pre>
2122
+ </div>
2123
+ <div class="ml-3">
2124
+ <p class="p">
2125
+
2126
+ </p>
2127
+
2128
+
2129
+ </div>
2130
+
2131
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-7">
2132
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-7</code></h4>
2133
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-7</span> <span class="token punctuation">{</span>
2134
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
2135
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
2136
+ <span class="token punctuation">}</span></pre>
2137
+ </div>
2138
+ <div class="ml-3">
2139
+ <p class="p">
2140
+
2141
+ </p>
2142
+
2143
+
2144
+ </div>
2145
+
2146
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-8">
2147
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-8</code></h4>
2148
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-8</span> <span class="token punctuation">{</span>
2149
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
2150
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
2151
+ <span class="token punctuation">}</span></pre>
2152
+ </div>
2153
+ <div class="ml-3">
2154
+ <p class="p">
2155
+
2156
+ </p>
2157
+
2158
+
2159
+ </div>
2160
+
2161
+ <div class="mt-4 flex gap-3 items-center justify-between" id="mv-auto">
2162
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.mv-auto</code></h4>
2163
+ <pre class="f-3 highlighted-code"><span class="token selector">.mv-auto</span> <span class="token punctuation">{</span>
2164
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
2165
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
2166
+ <span class="token punctuation">}</span></pre>
2167
+ </div>
2168
+ <div class="ml-3">
2169
+ <p class="p">
2170
+
2171
+ </p>
2172
+
2173
+
2174
+ </div>
2175
+
2176
+
2177
+ <h3 class="f-5 mt-4" id="class-scale:gap">Gap</h3>
2178
+ <p class="p">
2179
+ <p>Gaps, useful for flexbox and grid.</p>
2180
+
2181
+ </p>
2182
+
2183
+
2184
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-0">
2185
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-0</code></h4>
2186
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-0</span> <span class="token punctuation">{</span>
2187
+ <span class="token property">gap</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
2188
+ <span class="token punctuation">}</span></pre>
2189
+ </div>
2190
+ <div class="ml-3">
2191
+ <p class="p">
2192
+
2193
+ </p>
2194
+
2195
+
2196
+ </div>
2197
+
2198
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-1">
2199
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-1</code></h4>
2200
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-1</span> <span class="token punctuation">{</span>
2201
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
2202
+ <span class="token punctuation">}</span></pre>
2203
+ </div>
2204
+ <div class="ml-3">
2205
+ <p class="p">
2206
+
2207
+ </p>
2208
+
2209
+
2210
+ </div>
2211
+
2212
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-2">
2213
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-2</code></h4>
2214
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-2</span> <span class="token punctuation">{</span>
2215
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
2216
+ <span class="token punctuation">}</span></pre>
2217
+ </div>
2218
+ <div class="ml-3">
2219
+ <p class="p">
2220
+
2221
+ </p>
2222
+
2223
+
2224
+ </div>
2225
+
2226
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-3">
2227
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-3</code></h4>
2228
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-3</span> <span class="token punctuation">{</span>
2229
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2230
+ <span class="token punctuation">}</span></pre>
2231
+ </div>
2232
+ <div class="ml-3">
2233
+ <p class="p">
2234
+
2235
+ </p>
2236
+
2237
+
2238
+ </div>
2239
+
2240
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-4">
2241
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-4</code></h4>
2242
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-4</span> <span class="token punctuation">{</span>
2243
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
2244
+ <span class="token punctuation">}</span></pre>
2245
+ </div>
2246
+ <div class="ml-3">
2247
+ <p class="p">
2248
+
2249
+ </p>
2250
+
2251
+
2252
+ </div>
2253
+
2254
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-5">
2255
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-5</code></h4>
2256
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-5</span> <span class="token punctuation">{</span>
2257
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2258
+ <span class="token punctuation">}</span></pre>
2259
+ </div>
2260
+ <div class="ml-3">
2261
+ <p class="p">
2262
+
2263
+ </p>
2264
+
2265
+
2266
+ </div>
2267
+
2268
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-6">
2269
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-6</code></h4>
2270
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-6</span> <span class="token punctuation">{</span>
2271
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
2272
+ <span class="token punctuation">}</span></pre>
2273
+ </div>
2274
+ <div class="ml-3">
2275
+ <p class="p">
2276
+
2277
+ </p>
2278
+
2279
+
2280
+ </div>
2281
+
2282
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-7">
2283
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-7</code></h4>
2284
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-7</span> <span class="token punctuation">{</span>
2285
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
2286
+ <span class="token punctuation">}</span></pre>
2287
+ </div>
2288
+ <div class="ml-3">
2289
+ <p class="p">
2290
+
2291
+ </p>
2292
+
2293
+
2294
+ </div>
2295
+
2296
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gap-8">
2297
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gap-8</code></h4>
2298
+ <pre class="f-3 highlighted-code"><span class="token selector">.gap-8</span> <span class="token punctuation">{</span>
2299
+ <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
2300
+ <span class="token punctuation">}</span></pre>
2301
+ </div>
2302
+ <div class="ml-3">
2303
+ <p class="p">
2304
+
2305
+ </p>
2306
+
2307
+
2308
+ </div>
2309
+
2310
+
2311
+ <h3 class="f-5 mt-4" id="class-scale:row-gap">Row Gap</h3>
2312
+ <p class="p">
2313
+ <p>Row gaps.</p>
2314
+
2315
+ </p>
2316
+
2317
+
2318
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-0">
2319
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-0</code></h4>
2320
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-0</span> <span class="token punctuation">{</span>
2321
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
2322
+ <span class="token punctuation">}</span></pre>
2323
+ </div>
2324
+ <div class="ml-3">
2325
+ <p class="p">
2326
+
2327
+ </p>
2328
+
2329
+
2330
+ </div>
2331
+
2332
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-1">
2333
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-1</code></h4>
2334
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-1</span> <span class="token punctuation">{</span>
2335
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
2336
+ <span class="token punctuation">}</span></pre>
2337
+ </div>
2338
+ <div class="ml-3">
2339
+ <p class="p">
2340
+
2341
+ </p>
2342
+
2343
+
2344
+ </div>
2345
+
2346
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-2">
2347
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-2</code></h4>
2348
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-2</span> <span class="token punctuation">{</span>
2349
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
2350
+ <span class="token punctuation">}</span></pre>
2351
+ </div>
2352
+ <div class="ml-3">
2353
+ <p class="p">
2354
+
2355
+ </p>
2356
+
2357
+
2358
+ </div>
2359
+
2360
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-3">
2361
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-3</code></h4>
2362
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-3</span> <span class="token punctuation">{</span>
2363
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2364
+ <span class="token punctuation">}</span></pre>
2365
+ </div>
2366
+ <div class="ml-3">
2367
+ <p class="p">
2368
+
2369
+ </p>
2370
+
2371
+
2372
+ </div>
2373
+
2374
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-4">
2375
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-4</code></h4>
2376
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-4</span> <span class="token punctuation">{</span>
2377
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
2378
+ <span class="token punctuation">}</span></pre>
2379
+ </div>
2380
+ <div class="ml-3">
2381
+ <p class="p">
2382
+
2383
+ </p>
2384
+
2385
+
2386
+ </div>
2387
+
2388
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-5">
2389
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-5</code></h4>
2390
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-5</span> <span class="token punctuation">{</span>
2391
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2392
+ <span class="token punctuation">}</span></pre>
2393
+ </div>
2394
+ <div class="ml-3">
2395
+ <p class="p">
2396
+
2397
+ </p>
2398
+
2399
+
2400
+ </div>
2401
+
2402
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-6">
2403
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-6</code></h4>
2404
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-6</span> <span class="token punctuation">{</span>
2405
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
2406
+ <span class="token punctuation">}</span></pre>
2407
+ </div>
2408
+ <div class="ml-3">
2409
+ <p class="p">
2410
+
2411
+ </p>
2412
+
2413
+
2414
+ </div>
2415
+
2416
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-7">
2417
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-7</code></h4>
2418
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-7</span> <span class="token punctuation">{</span>
2419
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
2420
+ <span class="token punctuation">}</span></pre>
2421
+ </div>
2422
+ <div class="ml-3">
2423
+ <p class="p">
2424
+
2425
+ </p>
2426
+
2427
+
2428
+ </div>
2429
+
2430
+ <div class="mt-4 flex gap-3 items-center justify-between" id="row-gap-8">
2431
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.row-gap-8</code></h4>
2432
+ <pre class="f-3 highlighted-code"><span class="token selector">.row-gap-8</span> <span class="token punctuation">{</span>
2433
+ <span class="token property">row-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
2434
+ <span class="token punctuation">}</span></pre>
2435
+ </div>
2436
+ <div class="ml-3">
2437
+ <p class="p">
2438
+
2439
+ </p>
2440
+
2441
+
2442
+ </div>
2443
+
2444
+
2445
+ <h3 class="f-5 mt-4" id="class-scale:column-gap">Column Gap</h3>
2446
+ <p class="p">
2447
+ <p>Column gaps</p>
2448
+
2449
+ </p>
2450
+
2451
+
2452
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-0">
2453
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-0</code></h4>
2454
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-0</span> <span class="token punctuation">{</span>
2455
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
2456
+ <span class="token punctuation">}</span></pre>
2457
+ </div>
2458
+ <div class="ml-3">
2459
+ <p class="p">
2460
+
2461
+ </p>
2462
+
2463
+
2464
+ </div>
2465
+
2466
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-1">
2467
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-1</code></h4>
2468
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-1</span> <span class="token punctuation">{</span>
2469
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
2470
+ <span class="token punctuation">}</span></pre>
2471
+ </div>
2472
+ <div class="ml-3">
2473
+ <p class="p">
2474
+
2475
+ </p>
2476
+
2477
+
2478
+ </div>
2479
+
2480
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-2">
2481
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-2</code></h4>
2482
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-2</span> <span class="token punctuation">{</span>
2483
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
2484
+ <span class="token punctuation">}</span></pre>
2485
+ </div>
2486
+ <div class="ml-3">
2487
+ <p class="p">
2488
+
2489
+ </p>
2490
+
2491
+
2492
+ </div>
2493
+
2494
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-3">
2495
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-3</code></h4>
2496
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-3</span> <span class="token punctuation">{</span>
2497
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
2498
+ <span class="token punctuation">}</span></pre>
2499
+ </div>
2500
+ <div class="ml-3">
2501
+ <p class="p">
2502
+
2503
+ </p>
2504
+
2505
+
2506
+ </div>
2507
+
2508
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-4">
2509
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-4</code></h4>
2510
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-4</span> <span class="token punctuation">{</span>
2511
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
2512
+ <span class="token punctuation">}</span></pre>
2513
+ </div>
2514
+ <div class="ml-3">
2515
+ <p class="p">
2516
+
2517
+ </p>
2518
+
2519
+
2520
+ </div>
2521
+
2522
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-5">
2523
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-5</code></h4>
2524
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-5</span> <span class="token punctuation">{</span>
2525
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
2526
+ <span class="token punctuation">}</span></pre>
2527
+ </div>
2528
+ <div class="ml-3">
2529
+ <p class="p">
2530
+
2531
+ </p>
2532
+
2533
+
2534
+ </div>
2535
+
2536
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-6">
2537
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-6</code></h4>
2538
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-6</span> <span class="token punctuation">{</span>
2539
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
2540
+ <span class="token punctuation">}</span></pre>
2541
+ </div>
2542
+ <div class="ml-3">
2543
+ <p class="p">
2544
+
2545
+ </p>
2546
+
2547
+
2548
+ </div>
2549
+
2550
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-7">
2551
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-7</code></h4>
2552
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-7</span> <span class="token punctuation">{</span>
2553
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
2554
+ <span class="token punctuation">}</span></pre>
2555
+ </div>
2556
+ <div class="ml-3">
2557
+ <p class="p">
2558
+
2559
+ </p>
2560
+
2561
+
2562
+ </div>
2563
+
2564
+ <div class="mt-4 flex gap-3 items-center justify-between" id="col-gap-8">
2565
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.col-gap-8</code></h4>
2566
+ <pre class="f-3 highlighted-code"><span class="token selector">.col-gap-8</span> <span class="token punctuation">{</span>
2567
+ <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
2568
+ <span class="token punctuation">}</span></pre>
2569
+ </div>
2570
+ <div class="ml-3">
2571
+ <p class="p">
2572
+
2573
+ </p>
2574
+
2575
+
2576
+ </div>
2577
+
2578
+
2579
+ </article>
2580
+ <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
2581
+ <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
2582
+ <h3>On this Page</h3>
2583
+ <ul class="lst-none ma-0 pa-0">
2584
+
2585
+ <li class="lh-copy"><a href="#class-scale:padding-all">Padding All</a></li>
2586
+
2587
+ <li class="lh-copy"><a href="#class-scale:padding-left">Padding Left</a></li>
2588
+
2589
+ <li class="lh-copy"><a href="#class-scale:padding-right">Padding Right</a></li>
2590
+
2591
+ <li class="lh-copy"><a href="#class-scale:padding-top">Padding Top</a></li>
2592
+
2593
+ <li class="lh-copy"><a href="#class-scale:padding-bottom">Padding Bottom</a></li>
2594
+
2595
+ <li class="lh-copy"><a href="#class-scale:padding-horizontal">Padding Horizontal</a></li>
2596
+
2597
+ <li class="lh-copy"><a href="#class-scale:padding-vertical">Padding Vertical</a></li>
2598
+
2599
+ <li class="lh-copy"><a href="#class-scale:margin-all">Margin All</a></li>
2600
+
2601
+ <li class="lh-copy"><a href="#class-scale:margin-left">Margin Left</a></li>
2602
+
2603
+ <li class="lh-copy"><a href="#class-scale:margin-right">Margin Right</a></li>
2604
+
2605
+ <li class="lh-copy"><a href="#class-scale:margin-top">Margin Top</a></li>
2606
+
2607
+ <li class="lh-copy"><a href="#class-scale:margin-bottom">Margin Bottom</a></li>
2608
+
2609
+ <li class="lh-copy"><a href="#class-scale:margin-horizontal">Margin Horizontal</a></li>
2610
+
2611
+ <li class="lh-copy"><a href="#class-scale:margin-vertical">Margin Vertical</a></li>
2612
+
2613
+ <li class="lh-copy"><a href="#class-scale:gap">Gap</a></li>
2614
+
2615
+ <li class="lh-copy"><a href="#class-scale:row-gap">Row Gap</a></li>
2616
+
2617
+ <li class="lh-copy"><a href="#class-scale:column-gap">Column Gap</a></li>
2618
+
2619
+ </ul>
2620
+ </div>
2621
+ </div>
2622
+ </div>
2623
+ <footer class="bg-black white mt-auto">
2624
+ <p class="tc">
2625
+ Copyright &copy; 2025 David Bryant Copeland.
2626
+ </p>
2627
+ </footer>
2628
+ </section>
2629
+ </main>
2630
+ </body>
2631
+
2632
+ </html>
2633
+