2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +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
@@ -903,6 +903,28 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
</div>
{{< /example >}}
## Sass
### Variables
Variables for all dropdowns:
{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
Variables for the [dark dropdown](#dark-dropdowns):
{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
Variables for the CSS-based carets that indicate a dropdown's interactivity:
{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
### Mixins
Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}}
## Usage
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.