From 99d28db710f747702ff980b09ee6d9fa624a6d24 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 12 Jan 2021 15:55:29 -0800 Subject: [PATCH] add sass docs for forms and content --- scss/_variables.scss | 39 +++++++++++++++++-- scss/mixins/_forms.scss | 3 ++ site/content/docs/5.0/content/figures.md | 6 +++ site/content/docs/5.0/content/images.md | 8 ++++ site/content/docs/5.0/content/tables.md | 14 +++++-- site/content/docs/5.0/content/typography.md | 16 ++++++++ site/content/docs/5.0/forms/checks-radios.md | 10 +++++ .../content/docs/5.0/forms/floating-labels.md | 10 +++++ site/content/docs/5.0/forms/form-control.md | 18 +++++++++ site/content/docs/5.0/forms/input-group.md | 10 +++++ site/content/docs/5.0/forms/overview.md | 12 ++++++ site/content/docs/5.0/forms/range.md | 10 +++++ site/content/docs/5.0/forms/select.md | 10 +++++ site/content/docs/5.0/forms/validation.md | 26 ++++++++++--- 14 files changed, 180 insertions(+), 12 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 95845da27f72..a8779f03fc67 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -440,12 +440,14 @@ $font-sizes: ( ) !default; // scss-docs-end font-sizes +// scss-docs-start headings-variables $headings-margin-bottom: $spacer / 2 !default; $headings-font-family: null !default; $headings-font-style: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: null !default; +// scss-docs-end headings-variables // scss-docs-start display-headings $display-font-sizes: ( @@ -461,6 +463,7 @@ $display-font-weight: 300 !default; $display-line-height: $headings-line-height !default; // scss-docs-end display-headings +// scss-docs-start type-variables $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; @@ -495,6 +498,7 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; $mark-bg: #fcf8e3 !default; +// scss-docs-end type-variables // Tables @@ -537,7 +541,9 @@ $table-group-separator-color: currentColor !default; $table-caption-color: $text-muted !default; $table-bg-scale: -80% !default; +// scss-docs-end table-variables +// scss-docs-start table-loop $table-variants: ( "primary": shift-color($primary, $table-bg-scale), "secondary": shift-color($secondary, $table-bg-scale), @@ -548,13 +554,14 @@ $table-variants: ( "light": $light, "dark": $dark, ) !default; -// scss-docs-end table-variables +// scss-docs-end table-loop // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. +// scss-docs-start input-btn-variables $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; $input-btn-font-family: null !default; @@ -575,6 +582,7 @@ $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; $input-btn-border-width: $border-width !default; +// scss-docs-end input-btn-variables // Buttons @@ -630,18 +638,23 @@ $btn-active-border-tint-amount: 10% !default; // Forms +// scss-docs-start form-text-variables $form-text-margin-top: .25rem !default; $form-text-font-size: $small-font-size !default; $form-text-font-style: null !default; $form-text-font-weight: null !default; $form-text-color: $text-muted !default; +// scss-docs-end form-text-variables +// scss-docs-start form-label-variables $form-label-margin-bottom: .5rem !default; $form-label-font-size: null !default; $form-label-font-style: null !default; $form-label-font-weight: null !default; $form-label-color: null !default; +// scss-docs-end form-label-variables +// scss-docs-start form-input-variables $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-font-family: $input-btn-font-family !default; @@ -690,8 +703,9 @@ $input-height-sm: add($input-line-height * 1em, add($input $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-input-variables - +// scss-docs-start form-check-variables $form-check-input-width: 1em !default; $form-check-min-height: $font-size-base * $line-height-base !default; $form-check-padding-start: $form-check-input-width + .5em !default; @@ -724,6 +738,10 @@ $form-check-input-disabled-opacity: .5 !default; $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; +$form-check-inline-margin-end: 1rem !default; +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables $form-switch-color: rgba(0, 0, 0, .25) !default; $form-switch-width: 2em !default; $form-switch-padding-start: $form-switch-width + .5em !default; @@ -736,16 +754,18 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,") !default; $form-switch-checked-bg-position: right center !default; +// scss-docs-end form-switch-variables -$form-check-inline-margin-end: 1rem !default; - +// scss-docs-start input-group-variables $input-group-addon-padding-y: $input-padding-y !default; $input-group-addon-padding-x: $input-padding-x !default; $input-group-addon-font-weight: $input-font-weight !default; $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; +// scss-docs-end input-group-variables +// scss-docs-start form-select-variables $form-select-padding-y: $input-padding-y !default; $form-select-padding-x: $input-padding-x !default; $form-select-font-family: $input-font-family !default; @@ -783,7 +803,9 @@ $form-select-font-size-sm: $input-font-size-sm !default; $form-select-padding-y-lg: $input-padding-y-lg !default; $form-select-padding-x-lg: $input-padding-x-lg !default; $form-select-font-size-lg: $input-font-size-lg !default; +// scss-docs-end form-select-variables +// scss-docs-start form-range-variables $form-range-track-width: 100% !default; $form-range-track-height: .5rem !default; $form-range-track-cursor: pointer !default; @@ -802,11 +824,15 @@ $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For f $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; $form-range-thumb-disabled-bg: $gray-500 !default; $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-range-variables +// scss-docs-start form-file-variables $form-file-button-color: $input-color !default; $form-file-button-bg: $input-group-addon-bg !default; $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default; +// scss-docs-end form-file-variables +// scss-docs-start form-floating-variables $form-floating-height: add(3.5rem, $input-height-border) !default; $form-floating-padding-x: $input-padding-x !default; $form-floating-padding-y: 1rem !default; @@ -815,9 +841,11 @@ $form-floating-input-padding-b: .625rem !default; $form-floating-label-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; +// scss-docs-end form-floating-variables // Form validation +// scss-docs-start form-feedback-variables $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $form-text-font-size !default; $form-feedback-font-style: $form-text-font-style !default; @@ -828,6 +856,7 @@ $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +// scss-docs-end form-feedback-variables // scss-docs-start form-validation-states $form-validation-states: ( @@ -1289,8 +1318,10 @@ $thumbnail-box-shadow: $box-shadow-sm !default; // Figures +// scss-docs-start figure-variables $figure-caption-font-size: $small-font-size !default; $figure-caption-color: $gray-600 !default; +// scss-docs-end figure-variables // Breadcrumbs diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 8be4d2ee9132..9db92bb906fd 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,5 +1,7 @@ // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details + +// scss-docs-start form-validation-mixins @mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { .was-validated #{if(&, "&", "")}:#{$state}, @@ -122,3 +124,4 @@ } } } +// scss-docs-end form-validation-mixins diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.0/content/figures.md index f5956614fe42..e859aa5b130e 100644 --- a/site/content/docs/5.0/content/figures.md +++ b/site/content/docs/5.0/content/figures.md @@ -24,3 +24,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
A caption for the above image.
{{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md index 271b08e30d22..f1012efbf557 100644 --- a/site/content/docs/5.0/content/images.md +++ b/site/content/docs/5.0/content/images.md @@ -53,3 +53,11 @@ If you are using the `` element to specify multiple `` elements ... ``` + +## Sass + +### Variables + +Variables are available for image thumbnails. + +{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md index dde90b997a0f..3681e186ac0b 100644 --- a/site/content/docs/5.0/content/tables.md +++ b/site/content/docs/5.0/content/tables.md @@ -775,9 +775,17 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Customizing in Sass +## Sass -- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. -- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. +### Variables {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} + +### Loop + +{{< scss-docs name="table-loop" file="scss/_variables.scss" >}} + +### Customizing + +- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index cf9c83636816..7d41f04dee7e 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -302,3 +302,19 @@ Align terms and descriptions horizontally by using our grid system's predefined ## Responsive font sizes In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. + +## Sass + +### Variables + +Headings have some dedicated variables for sizing and spacing. + +{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}} + +Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables. + +{{< scss-docs name="type-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md index ae89f5ee34d2..d82c60a2541d 100644 --- a/site/content/docs/5.0/forms/checks-radios.md +++ b/site/content/docs/5.0/forms/checks-radios.md @@ -269,3 +269,13 @@ Different variants of `.btn`, such at the various outlined styles, are supported {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no mixins for checkboxes and radios. diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md index 3163ea8e0c57..56b63870777d 100644 --- a/site/content/docs/5.0/forms/floating-labels.md +++ b/site/content/docs/5.0/forms/floating-labels.md @@ -100,3 +100,13 @@ When working with the Bootstrap grid system, be sure to place form elements with {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no mixins for floating label forms. diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md index e35f099674d3..a28293569d73 100644 --- a/site/content/docs/5.0/forms/form-control.md +++ b/site/content/docs/5.0/forms/form-control.md @@ -130,3 +130,21 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).