rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add sass docs for forms and content

Browse source
This commit is contained in:
Mark Otto 2021-01-12 15:55:29 -08:00 • committed by XhmikosR
parent 31214ca03c
commit 5e5d61c1ae
14 changed files with 180 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

39
scss/_variables.scss
View file

@ -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,<svg xmlns='http://www
$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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

3
scss/mixins/_forms.scss
View file

@ -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

6
site/content/docs/5.0/content/figures.md
View file

@ -24,3 +24,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}

8
site/content/docs/5.0/content/images.md
View file

@ -53,3 +53,11 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
```
## Sass
### Variables
Variables are available for image thumbnails.
{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}

14
site/content/docs/5.0/content/tables.md
View file

@ -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
### 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.
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}

16
site/content/docs/5.0/content/typography.md
View file

@ -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" >}}).

10
site/content/docs/5.0/forms/checks-radios.md
View file

@ -269,3 +269,13 @@ Different variants of `.btn`, such at the various outlined styles, are supported
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
### Mixins
There are no mixins for checkboxes and radios.

10
site/content/docs/5.0/forms/floating-labels.md
View file

@ -100,3 +100,13 @@ When working with the Bootstrap grid system, be sure to place form elements with
</div>
</div>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
### Mixins
There are no mixins for floating label forms.

18
site/content/docs/5.0/forms/form-control.md
View file

@ -130,3 +130,21 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
<option value="Chicago">
</datalist>
{{< /example >}}
## Sass
### Variables
`$input-*` are shared across most of our form controls (and not buttons).
{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.
{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}
### Mixins
There are no mixins for form controls.

10
site/content/docs/5.0/forms/input-group.md
View file

@ -308,3 +308,13 @@ Input groups include support for custom selects and custom file inputs. Browser
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
### Mixins
There are no mixins for input groups.

12
site/content/docs/5.0/forms/overview.md
View file

@ -142,3 +142,15 @@ For situations where it's not possible to include a visible `<label>` or appropr
If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
## Sass
Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables.
### Variables
`$btn-input-*` variables are shared global variables between our buttons and our form components. You'll find these frequently reassigned as values to other component-specific variables.
{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}
### Mixins

10
site/content/docs/5.0/forms/range.md
View file

@ -41,3 +41,13 @@ By default, range inputs "snap" to integer values. To change this, you can speci
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
### Mixins
There are no mixins for range inputs.

10
site/content/docs/5.0/forms/select.md
View file

@ -73,3 +73,13 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
<option value="3">Three</option>
</select>
{{< /example >}}
## Sass
### Variables
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
### Mixins
There are no mixins for select elements.

26
site/content/docs/5.0/forms/validation.md
View file

@ -349,18 +349,34 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</form>
{{< /example >}}
## Customizing
## Sass
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
### Variables
Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states:
### Mixins
Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
### Map
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
### Loop
Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
### Customizing
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin.