diff options
| -rw-r--r-- | docs/components/badge.md | 12 | ||||
| -rw-r--r-- | docs/components/list-group.md | 10 | ||||
| -rw-r--r-- | scss/mixins/_buttons.scss | 10 |
3 files changed, 16 insertions, 16 deletions
diff --git a/docs/components/badge.md b/docs/components/badge.md index 71b550f3b..55a6df4f7 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -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. {% example html %} -<span class="badge badge-pill tag-default">Default</span> -<span class="badge badge-pill tag-primary">Primary</span> -<span class="badge badge-pill tag-success">Success</span> -<span class="badge badge-pill tag-info">Info</span> -<span class="badge badge-pill tag-warning">Warning</span> -<span class="badge badge-pill tag-danger">Danger</span> +<span class="badge badge-pill badge-default">Default</span> +<span class="badge badge-pill badge-primary">Primary</span> +<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 %} diff --git a/docs/components/list-group.md b/docs/components/list-group.md index a04347455..bc7c8b194 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -25,22 +25,22 @@ The most basic list group is simply an unordered list with list items, and the p </ul> {% 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 %} <ul class="list-group"> <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 </li> <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 </li> <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 </li> </ul> diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 5196ab65e..853a46bfc 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -58,21 +58,21 @@ } } -@mixin button-outline-variant($color) { +@mixin button-outline-variant($color, $color-hover: #fff) { color: $color; background-image: none; background-color: transparent; border-color: $color; @include hover { - color: #fff; + color: $color-hover; background-color: $color; border-color: $color; } &:focus, &.focus { - color: #fff; + color: $color-hover; background-color: $color; border-color: $color; } @@ -80,14 +80,14 @@ &:active, &.active, .open > &.dropdown-toggle { - color: #fff; + color: $color-hover; background-color: $color; border-color: $color; &:hover, &:focus, &.focus { - color: #fff; + color: $color-hover; background-color: darken($color, 17%); border-color: darken($color, 25%); } |