rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

update badges to use the theme colors sass map

Browse Source
This commit is contained in:
Mark Otto 2017-06-25 18:15:32 -07:00
parent b4879ec40f
commit aa83c4f417
3 changed files with 28 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
docs/4.0/components/badge.md
View File

@ -11,21 +11,21 @@ toc: true
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
<div class="bd-example"> <div class="bd-example">
<div class="h1">Example heading <span class="badge badge-default">New</span></div> <div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h2">Example heading <span class="badge badge-default">New</span></div> <div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h3">Example heading <span class="badge badge-default">New</span></div> <div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h4">Example heading <span class="badge badge-default">New</span></div> <div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h5">Example heading <span class="badge badge-default">New</span></div> <div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h6">Example heading <span class="badge badge-default">New</span></div> <div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
</div> </div>
{% highlight html %} {% highlight html %}
<h1>Example heading <span class="badge badge-default">New</span></h1> <h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-default">New</span></h2> <h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-default">New</span></h3> <h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-default">New</span></h4> <h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-default">New</span></h5> <h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-default">New</span></h6> <h6>Example heading <span class="badge badge-secondary">New</span></h6>
{% endhighlight %} {% endhighlight %}
## Contextual variations ## Contextual variations
@ -33,12 +33,8 @@ Badges scale to match the size of the immediate parent element by using relative
Add any of the below mentioned modifier classes to change the appearance of a badge. Add any of the below mentioned modifier classes to change the appearance of a badge.
{% example html %} {% example html %}
<span class="badge badge-default">Default</span> {% for color in site.data.theme-colors %}
<span class="badge badge-primary">Primary</span> <span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
{% endexample %} {% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@ -49,12 +45,8 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %} {% example html %}
<span class="badge badge-pill badge-default">Default</span> {% for color in site.data.theme-colors %}
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
{% endexample %} {% endexample %}
## Links ## Links
@ -62,10 +54,6 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states. Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
{% example html %} {% example html %}
<a href="#" class="badge badge-default">Default</a> {% for color in site.data.theme-colors %}
<a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
{% endexample %} {% endexample %}

36
scss/_badge.scss
View File

@ -27,16 +27,6 @@
top: -1px; top: -1px;
} }
// scss-lint:disable QualifyingElement
// Add hover effects, but only for links
a.badge {
@include hover-focus {
color: $badge-link-hover-color;
text-decoration: none;
}
}
// scss-lint:enable QualifyingElement
// Pill badges // Pill badges
// //
// Make them extra rounded with a modifier to replace v3's badges. // Make them extra rounded with a modifier to replace v3's badges.
@ -51,26 +41,8 @@ a.badge {
// //
// Contextual variations (linked badges get darker on :hover). // Contextual variations (linked badges get darker on :hover).
.badge-default { @each $color, $value in $theme-colors {
@include badge-variant($badge-default-bg); .badge-#{$color} {
} @include badge-variant($value);
}
.badge-primary {
@include badge-variant($badge-primary-bg);
}
.badge-success {
@include badge-variant($badge-success-bg);
}
.badge-info {
@include badge-variant($badge-info-bg);
}
.badge-warning {
@include badge-variant($badge-warning-bg);
}
.badge-danger {
@include badge-variant($badge-danger-bg);
} }

11
scss/mixins/_badge.scss
View File

@ -1,11 +1,12 @@
// Badges @mixin badge-variant($bg) {
@include color-yiq($bg);
@mixin badge-variant($color) { background-color: $bg;
background-color: $color;
&[href] { &[href] {
@include hover-focus { @include hover-focus {
background-color: darken($color, 10%); @include color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
} }
} }
} }