diff options
| -rw-r--r-- | scss/_badge.scss | 28 | ||||
| -rw-r--r-- | scss/_mixins.scss | 1 | ||||
| -rw-r--r-- | scss/_variables.scss | 11 | ||||
| -rw-r--r-- | scss/mixins/_badge.scss | 17 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/badge.md | 39 |
5 files changed, 17 insertions, 79 deletions
diff --git a/scss/_badge.scss b/scss/_badge.scss index 2082f058ec..baa80a75f3 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -9,17 +9,11 @@ @include font-size($badge-font-size); font-weight: $badge-font-weight; line-height: 1; + color: $badge-color; text-align: center; white-space: nowrap; vertical-align: baseline; @include border-radius($badge-border-radius); - @include transition($badge-transition); - - @at-root a#{&} { - @include hover-focus { - text-decoration: none; - } - } // Empty badges collapse automatically &:empty { @@ -32,23 +26,3 @@ position: relative; top: -1px; } - -// Pill badges -// -// Make them extra rounded with a modifier to replace v3's badges. - -.badge-pill { - padding-right: $badge-pill-padding-x; - padding-left: $badge-pill-padding-x; - @include border-radius($badge-pill-border-radius); -} - -// Colors -// -// Contextual variations (linked badges get darker on :hover). - -@each $color, $value in $theme-colors { - .badge-#{$color} { - @include badge-variant($value); - } -} diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 843303d453..9b2c1a13b3 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -12,7 +12,6 @@ @import "mixins/breakpoints"; @import "mixins/hover"; @import "mixins/image"; -@import "mixins/badge"; @import "mixins/resize"; @import "mixins/screen-reader"; @import "mixins/reset-text"; diff --git a/scss/_variables.scss b/scss/_variables.scss index d238a8508f..dd141e84a3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -911,18 +911,11 @@ $toast-header-border-color: rgba(0, 0, 0, .05) !default; $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; +$badge-color: $white !default; $badge-padding-y: .25em !default; -$badge-padding-x: .4em !default; +$badge-padding-x: .5em !default; $badge-border-radius: $border-radius !default; -$badge-transition: $btn-transition !default; -$badge-focus-width: $input-btn-focus-width !default; - -$badge-pill-padding-x: .6em !default; -// Use a higher than normal value to ensure completely rounded edges when -// customizing padding or font-size on labels. -$badge-pill-border-radius: 10rem !default; - // Modals diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss deleted file mode 100644 index 64b29cb579..0000000000 --- a/scss/mixins/_badge.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin badge-variant($bg) { - color: color-yiq($bg); - background-color: $bg; - - @at-root a#{&} { - @include hover-focus { - color: color-yiq($bg); - background-color: darken($bg, 10%); - } - - &:focus, - &.focus { - outline: 0; - box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); - } - } -} diff --git a/site/content/docs/4.3/components/badge.md b/site/content/docs/4.3/components/badge.md index 0f2ec97acd..2d3bc69e8e 100644 --- a/site/content/docs/4.3/components/badge.md +++ b/site/content/docs/4.3/components/badge.md @@ -8,22 +8,22 @@ toc: true ## Example -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. As of v5, badges no longer have focus or hover styles for links. {{< example >}} -<h1>Example heading <span class="badge badge-secondary">New</span></h1> -<h2>Example heading <span class="badge badge-secondary">New</span></h2> -<h3>Example heading <span class="badge badge-secondary">New</span></h3> -<h4>Example heading <span class="badge badge-secondary">New</span></h4> -<h5>Example heading <span class="badge badge-secondary">New</span></h5> -<h6>Example heading <span class="badge badge-secondary">New</span></h6> +<h1>Example heading <span class="badge bg-secondary">New</span></h1> +<h2>Example heading <span class="badge bg-secondary">New</span></h2> +<h3>Example heading <span class="badge bg-secondary">New</span></h3> +<h4>Example heading <span class="badge bg-secondary">New</span></h4> +<h5>Example heading <span class="badge bg-secondary">New</span></h5> +<h6>Example heading <span class="badge bg-secondary">New</span></h6> {{< /example >}} Badges can be used as part of links or buttons to provide a counter. {{< example >}} <button type="button" class="btn btn-primary"> - Notifications <span class="badge badge-light">4</span> + Notifications <span class="badge bg-secondary">4</span> </button> {{< /example >}} @@ -33,19 +33,19 @@ Unless the context is clear (as with the "Notifications" example, where it is un {{< example >}} <button type="button" class="btn btn-primary"> - Profile <span class="badge badge-light">9</span> + Profile <span class="badge bg-secondary">9</span> <span class="sr-only">unread messages</span> </button> {{< /example >}} -## Contextual variations +## Background colors -Add any of the below mentioned modifier classes to change the appearance of a badge. +Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`. {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<span class="badge badge-{{ .name }}">{{ .name | title }}</span>{{- end -}} +<span class="badge bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} @@ -55,22 +55,11 @@ Add any of the below mentioned modifier classes to change the appearance of a ba ## Pill badges -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 `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<span class="badge badge-pill badge-{{ .name }}">{{ .name | title }}</span>{{- end -}} -{{< /badge.inline >}} -{{< /example >}} - -## Links - -Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states. - -{{< example >}} -{{< badge.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -<a href="#" class="badge badge-{{ .name }}">{{ .name | title }}</a>{{- end -}} +<span class="badge rounded-pill bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} |