diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-11-30 03:44:25 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2021-11-30 03:44:25 +0300 |
| commit | e521bd44733a627cd122426287841ac2f58eef4a (patch) | |
| tree | d3fe129bbbbc2bfe7dcb9ab0f862de10d2c3da07 | |
| parent | dbecbf079d8a11e06562d208ec76ccda99314402 (diff) | |
Add light badges from #35408
| -rw-r--r-- | site/assets/scss/_snippets.scss | 10 | ||||
| -rw-r--r-- | site/content/docs/5.1/extend/snippets.md | 18 |
2 files changed, 28 insertions, 0 deletions
diff --git a/site/assets/scss/_snippets.scss b/site/assets/scss/_snippets.scss index 2e0945a36c..76fc183970 100644 --- a/site/assets/scss/_snippets.scss +++ b/site/assets/scss/_snippets.scss @@ -1,3 +1,13 @@ +// Light badges +@each $color, $value in $theme-colors { + $badge-light-bg: shift-color($value, -80%); + .badge-light-#{$color} { + background-color: $badge-light-bg; + } +} + + +// Light buttons @each $color, $value in $theme-colors { $btn-light-bg: shift-color($value, -80%); $btn-light-border: shift-color($value, -80%); diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md index a006194e73..df642505ea 100644 --- a/site/content/docs/5.1/extend/snippets.md +++ b/site/content/docs/5.1/extend/snippets.md @@ -7,6 +7,24 @@ group: extend ## Components +### Light badges + +{{< example >}} +{{< badge.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<span class="badge badge-light-{{ .name }} text-dark">{{ .name | title }}</span>{{- end -}} +{{< /badge.inline >}} +{{< /example >}} + +```scss +@each $color, $value in $theme-colors { + $badge-light-bg: shift-color($value, -80%); + .badge-light-#{$color} { + background-color: $badge-light-bg; + } +} +``` + ### Light buttons {{< example >}} |