mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-15 11:59:39 +03:00
Add light badges from #35408
This commit is contained in:
@@ -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%);
|
||||
|
||||
@@ -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 >}}
|
||||
|
||||
Reference in New Issue
Block a user