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:
@@ -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" >}}
|
||||
|
||||
Reference in New Issue
Block a user