1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 20:55:50 +02:00

Merge branch 'v4-dev' of github.com:twbs/bootstrap into v4-dev

This commit is contained in:
Mark Otto
2016-10-27 20:04:04 -07:00
3 changed files with 16 additions and 16 deletions

View File

@@ -41,10 +41,10 @@ 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 tag-default">Default</span> <span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill tag-primary">Primary</span> <span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill tag-success">Success</span> <span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill tag-info">Info</span> <span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill tag-warning">Warning</span> <span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill tag-danger">Danger</span> <span class="badge badge-pill badge-danger">Danger</span>
{% endexample %} {% endexample %}

View File

@@ -25,22 +25,22 @@ The most basic list group is simply an unordered list with list items, and the p
</ul> </ul>
{% endexample %} {% endexample %}
## Tags ## Badge
Add tags to any list group item to show unread counts, activity, etc. Add badges to any list group item to show unread counts, activity, etc.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="badge badge-default tag-pill float-xs-right">14</span> <span class="badge badge-default badge-pill float-xs-right">14</span>
Cras justo odio Cras justo odio
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="badge badge-default tag-pill float-xs-right">2</span> <span class="badge badge-default badge-pill float-xs-right">2</span>
Dapibus ac facilisis in Dapibus ac facilisis in
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="badge badge-default tag-pill float-xs-right">1</span> <span class="badge badge-default badge-pill float-xs-right">1</span>
Morbi leo risus Morbi leo risus
</li> </li>
</ul> </ul>

View File

@@ -58,21 +58,21 @@
} }
} }
@mixin button-outline-variant($color) { @mixin button-outline-variant($color, $color-hover: #fff) {
color: $color; color: $color;
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border-color: $color; border-color: $color;
@include hover { @include hover {
color: #fff; color: $color-hover;
background-color: $color; background-color: $color;
border-color: $color; border-color: $color;
} }
&:focus, &:focus,
&.focus { &.focus {
color: #fff; color: $color-hover;
background-color: $color; background-color: $color;
border-color: $color; border-color: $color;
} }
@@ -80,14 +80,14 @@
&:active, &:active,
&.active, &.active,
.open > &.dropdown-toggle { .open > &.dropdown-toggle {
color: #fff; color: $color-hover;
background-color: $color; background-color: $color;
border-color: $color; border-color: $color;
&:hover, &:hover,
&:focus, &:focus,
&.focus { &.focus {
color: #fff; color: $color-hover;
background-color: darken($color, 17%); background-color: darken($color, 17%);
border-color: darken($color, 25%); border-color: darken($color, 25%);
} }