From d9fa3fd7971b5331b6582b46b568048458bb5544 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Oct 2016 18:33:58 -0700 Subject: Rename .tag to .badge to avoid conflicting with WordPress --- docs/_data/nav.yml | 2 +- docs/components/badge.md | 50 ++++++++++++++++++++++++++++ docs/components/list-group.md | 6 ++-- docs/components/tag.md | 50 ---------------------------- scss/_badge.scss | 77 +++++++++++++++++++++++++++++++++++++++++++ scss/_mixins.scss | 2 +- scss/_tags.scss | 77 ------------------------------------------- scss/_variables.scss | 32 +++++++++--------- scss/bootstrap.scss | 2 +- scss/mixins/_badge.scss | 11 +++++++ scss/mixins/_tag.scss | 11 ------- 11 files changed, 160 insertions(+), 160 deletions(-) create mode 100644 docs/components/badge.md delete mode 100644 docs/components/tag.md create mode 100644 scss/_badge.scss delete mode 100644 scss/_tags.scss create mode 100644 scss/mixins/_badge.scss delete mode 100644 scss/mixins/_tag.scss diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index f89a136f8..847375422 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -31,6 +31,7 @@ - title: Components pages: - title: Alerts + - title: Badge - title: Breadcrumb - title: Buttons - title: Button group @@ -49,7 +50,6 @@ - title: Popovers - title: Progress - title: Scrollspy - - title: Tag - title: Tooltips - title: Utilities diff --git a/docs/components/badge.md b/docs/components/badge.md new file mode 100644 index 000000000..71b550f3b --- /dev/null +++ b/docs/components/badge.md @@ -0,0 +1,50 @@ +--- +layout: docs +title: Badges +description: Documentation and examples for badges, our small count and labelling component. +group: components +--- + +Small and adaptive tag for adding context to just about any content. + +## Example + +Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. + +{% example html %} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+{% endexample %} + +## Contextual variations + +Add any of the below mentioned modifier classes to change the appearance of a badge. + +{% example html %} +Default +Primary +Success +Info +Warning +Danger +{% endexample %} + +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + +## 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. + +{% example html %} +Default +Primary +Success +Info +Warning +Danger +{% endexample %} diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 22982d1b9..a04347455 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc. {% example html %} diff --git a/docs/components/tag.md b/docs/components/tag.md deleted file mode 100644 index d292cad22..000000000 --- a/docs/components/tag.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -layout: docs -title: Tags -description: Documentation and examples for tags, our small label-badge component. -group: components ---- - -Small and adaptive tag for adding context to just about any content. - -## Example - -Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units. - -{% example html %} -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-{% endexample %} - -## Contextual variations - -Add any of the below mentioned modifier classes to change the appearance of a tag. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} - -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} - -## Pill tags - -Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} diff --git a/scss/_badge.scss b/scss/_badge.scss new file mode 100644 index 000000000..39635fcc7 --- /dev/null +++ b/scss/_badge.scss @@ -0,0 +1,77 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + 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(); + + // Empty tags collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for tags in buttons +.btn .badge { + position: relative; + 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; + cursor: pointer; + } +} +// scss-lint:enable QualifyingElement + +// Pill tags +// +// 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 tags get darker on :hover). + +.badge-default { + @include badge-variant($badge-default-bg); +} + +.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); +} 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/_tags.scss b/scss/_tags.scss deleted file mode 100644 index dee9ed95d..000000000 --- a/scss/_tags.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Base class -// -// Requires one of the contextual, color modifier classes for `color` and -// `background-color`. - -.tag { - display: inline-block; - padding: $tag-padding-y $tag-padding-x; - font-size: $tag-font-size; - font-weight: $tag-font-weight; - line-height: 1; - color: $tag-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - @include border-radius(); - - // Empty tags collapse automatically - &:empty { - display: none; - } -} - -// Quick fix for tags in buttons -.btn .tag { - position: relative; - top: -1px; -} - -// scss-lint:disable QualifyingElement -// Add hover effects, but only for links -a.tag { - @include hover-focus { - color: $tag-link-hover-color; - text-decoration: none; - cursor: pointer; - } -} -// scss-lint:enable QualifyingElement - -// Pill tags -// -// 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); -} - -// Colors -// -// Contextual variations (linked tags get darker on :hover). - -.tag-default { - @include tag-variant($tag-default-bg); -} - -.tag-primary { - @include tag-variant($tag-primary-bg); -} - -.tag-success { - @include tag-variant($tag-success-bg); -} - -.tag-info { - @include tag-variant($tag-info-bg); -} - -.tag-warning { - @include tag-variant($tag-warning-bg); -} - -.tag-danger { - @include tag-variant($tag-danger-bg); -} 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/_badge.scss b/scss/mixins/_badge.scss new file mode 100644 index 000000000..77206b9a5 --- /dev/null +++ b/scss/mixins/_badge.scss @@ -0,0 +1,11 @@ +// Tags + +@mixin badge-variant($color) { + background-color: $color; + + &[href] { + @include hover-focus { + background-color: darken($color, 10%); + } + } +} diff --git a/scss/mixins/_tag.scss b/scss/mixins/_tag.scss deleted file mode 100644 index 900c54e36..000000000 --- a/scss/mixins/_tag.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Tags - -@mixin tag-variant($color) { - background-color: $color; - - &[href] { - @include hover-focus { - background-color: darken($color, 10%); - } - } -} -- cgit v1.2.3