diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_badge.scss (renamed from scss/_tags.scss) | 48 | ||||
| -rw-r--r-- | scss/_mixins.scss | 2 | ||||
| -rw-r--r-- | scss/_variables.scss | 32 | ||||
| -rw-r--r-- | scss/bootstrap.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_badge.scss (renamed from scss/mixins/_tag.scss) | 2 |
5 files changed, 43 insertions, 43 deletions
diff --git a/scss/_tags.scss b/scss/_badge.scss index dee9ed95d..39635fcc7 100644 --- a/scss/_tags.scss +++ b/scss/_badge.scss @@ -3,13 +3,13 @@ // Requires one of the contextual, color modifier classes for `color` and // `background-color`. -.tag { +.badge { display: inline-block; - padding: $tag-padding-y $tag-padding-x; - font-size: $tag-font-size; - font-weight: $tag-font-weight; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; line-height: 1; - color: $tag-color; + color: $badge-color; text-align: center; white-space: nowrap; vertical-align: baseline; @@ -22,16 +22,16 @@ } // Quick fix for tags in buttons -.btn .tag { +.btn .badge { position: relative; top: -1px; } // scss-lint:disable QualifyingElement // Add hover effects, but only for links -a.tag { +a.badge { @include hover-focus { - color: $tag-link-hover-color; + color: $badge-link-hover-color; text-decoration: none; cursor: pointer; } @@ -42,36 +42,36 @@ a.tag { // // Make them extra rounded with a modifier to replace v3's badges. -.tag-pill { - padding-right: $tag-pill-padding-x; - padding-left: $tag-pill-padding-x; - @include border-radius($tag-pill-border-radius); +.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 tags get darker on :hover). -.tag-default { - @include tag-variant($tag-default-bg); +.badge-default { + @include badge-variant($badge-default-bg); } -.tag-primary { - @include tag-variant($tag-primary-bg); +.badge-primary { + @include badge-variant($badge-primary-bg); } -.tag-success { - @include tag-variant($tag-success-bg); +.badge-success { + @include badge-variant($badge-success-bg); } -.tag-info { - @include tag-variant($tag-info-bg); +.badge-info { + @include badge-variant($badge-info-bg); } -.tag-warning { - @include tag-variant($tag-warning-bg); +.badge-warning { + @include badge-variant($badge-warning-bg); } -.tag-danger { - @include tag-variant($tag-danger-bg); +.badge-danger { + @include badge-variant($badge-danger-bg); } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index e53ab3414..8c2b9290e 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -18,7 +18,7 @@ @import "mixins/breakpoints"; @import "mixins/hover"; @import "mixins/image"; -@import "mixins/tag"; +@import "mixins/badge"; @import "mixins/reset-filter"; @import "mixins/resize"; @import "mixins/screen-reader"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 73a16b8a0..751420795 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -677,24 +677,24 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau // Tags -$tag-default-bg: $gray-light !default; -$tag-primary-bg: $brand-primary !default; -$tag-success-bg: $brand-success !default; -$tag-info-bg: $brand-info !default; -$tag-warning-bg: $brand-warning !default; -$tag-danger-bg: $brand-danger !default; - -$tag-color: #fff !default; -$tag-link-hover-color: #fff !default; -$tag-font-size: 75% !default; -$tag-font-weight: $font-weight-bold !default; -$tag-padding-x: .4em !default; -$tag-padding-y: .25em !default; - -$tag-pill-padding-x: .6em !default; +$badge-default-bg: $gray-light !default; +$badge-primary-bg: $brand-primary !default; +$badge-success-bg: $brand-success !default; +$badge-info-bg: $brand-info !default; +$badge-warning-bg: $brand-warning !default; +$badge-danger-bg: $brand-danger !default; + +$badge-color: #fff !default; +$badge-link-hover-color: #fff !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-x: .4em !default; +$badge-padding-y: .25em !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. -$tag-pill-border-radius: 10rem !default; +$badge-pill-border-radius: 10rem !default; // Modals diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index b2b63084b..afcfb3268 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -35,7 +35,7 @@ @import "card"; @import "breadcrumb"; @import "pagination"; -@import "tags"; +@import "badge"; @import "jumbotron"; @import "alert"; @import "progress"; diff --git a/scss/mixins/_tag.scss b/scss/mixins/_badge.scss index 900c54e36..77206b9a5 100644 --- a/scss/mixins/_tag.scss +++ b/scss/mixins/_badge.scss @@ -1,6 +1,6 @@ // Tags -@mixin tag-variant($color) { +@mixin badge-variant($color) { background-color: $color; &[href] { |