diff options
Diffstat (limited to 'site/content/docs/5.0/components/buttons.md')
| -rw-r--r-- | site/content/docs/5.0/components/buttons.md | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index b53263a88..063bae1c4 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -205,3 +205,25 @@ buttons.forEach(function (button) { button.toggle() }) ``` + +## Sass + +### Variables + +{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. + +{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}} + +{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}} + +{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}} + +### Loops + +Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`. + +{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}} |