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