diff options
| author | Mark Otto <[email protected]> | 2021-04-14 00:34:56 -0700 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2021-09-08 18:36:14 +0300 |
| commit | 491f996086b21bf2d77e454169a8513fa6a44686 (patch) | |
| tree | a175acc186f6a0c31b4656e92f0ba3a70620413b /site | |
| parent | 499485589f10f678fd36b3683e1c8553c0a9a2e6 (diff) | |
| download | bootstrap-extend-snippets.tar.xz bootstrap-extend-snippets.zip | |
Add Extend > Snippets docs pageextend-snippets
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/scss/_snippets.scss | 7 | ||||
| -rw-r--r-- | site/assets/scss/docs.scss | 1 | ||||
| -rw-r--r-- | site/content/docs/5.1/extend/snippets.md | 33 | ||||
| -rw-r--r-- | site/data/sidebar.yml | 1 |
4 files changed, 42 insertions, 0 deletions
diff --git a/site/assets/scss/_snippets.scss b/site/assets/scss/_snippets.scss new file mode 100644 index 000000000..2e0945a36 --- /dev/null +++ b/site/assets/scss/_snippets.scss @@ -0,0 +1,7 @@ +@each $color, $value in $theme-colors { + $btn-light-bg: shift-color($value, -80%); + $btn-light-border: shift-color($value, -80%); + .btn-light-#{$color} { + @include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%)); + } +} diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 8b7bc99a1..6fad4a1fe 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -53,6 +53,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default @import "colors"; @import "clipboard-js"; @import "placeholder-img"; +@import "snippets"; // Load docs dependencies @import "syntax"; diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md new file mode 100644 index 000000000..a006194e7 --- /dev/null +++ b/site/content/docs/5.1/extend/snippets.md @@ -0,0 +1,33 @@ +--- +layout: docs +title: Snippets +description: Extend Bootstrap with some common snippets of source code not included in the main project. +group: extend +--- + +## Components + +### Light buttons + +{{< example >}} +{{< buttons.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<button type="button" class="btn btn-light-{{ .name }}">{{ .name | title }}</button> +{{- end -}} +{{< /buttons.inline >}} +{{< /example >}} + +```scss +@each $color, $value in $theme-colors { + $btn-light-bg: shift-color($value, -80%); + $btn-light-border: shift-color($value, -80%); + .btn-light-#{$color} { + @include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%)); + } +} +``` + +## Utilities + +- Opacity +- Expanded widths/heights diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index df95692af..5085c8795 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -118,6 +118,7 @@ - title: Extend pages: - title: Approach + - title: Snippets - title: Icons - title: About |