2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00

Add Sass docs (variables, mixins, and loops) to most pages (#32747)

* WIP: Mention variables, mixins, and loops in docs

* Add Sass sections to component pages

* add sass docs for forms and content

* Update buttons.md

* Remove empty mixins sections

* Massive update to utilities and some consistency changes

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
2021-02-10 19:29:59 -08:00
committed by GitHub
parent e50c11b8c6
commit 4c7a3e8adf
100 changed files with 942 additions and 480 deletions
+10
View File
@@ -142,3 +142,13 @@ 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]({{< docsref "/components/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" >}}