diff --git a/docs/components/label.md b/docs/components/label.md deleted file mode 100644 index e1495201ce..0000000000 --- a/docs/components/label.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -layout: docs -title: Labels -group: components ---- - -Small and adaptive tag for adding context to just about any content. - -## Example - -Labels 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 label. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} - -## Pill labels - -Use the `.label-pill` modifier class to make labels 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/tag.md b/docs/components/tag.md new file mode 100644 index 0000000000..185ea378de --- /dev/null +++ b/docs/components/tag.md @@ -0,0 +1,46 @@ +--- +layout: docs +title: Tags +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 %} + +## 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/docs/migration.md b/docs/migration.md index 814e1d9be0..c11a871dfb 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -128,7 +128,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with ### Badges -- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead. +- Dropped the badge component. Use the `.tag-pill` modifier together with the tag component instead. ### Panels, thumbnails, and wells diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 5c86512070..1b5bf0fae6 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -18,7 +18,7 @@ @import "mixins/breakpoints"; @import "mixins/hover"; @import "mixins/image"; -@import "mixins/label"; +@import "mixins/tag"; @import "mixins/reset-filter"; @import "mixins/resize"; @import "mixins/screen-reader"; diff --git a/scss/_print.scss b/scss/_print.scss index d569cce4d6..b2c93735c7 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -92,7 +92,7 @@ border-top-color: #000 !important; } } - .label { + .tag { border: $border-width solid #000; } diff --git a/scss/_labels.scss b/scss/_tags.scss similarity index 67% rename from scss/_labels.scss rename to scss/_tags.scss index 6dec516085..fde812905a 100644 --- a/scss/_labels.scss +++ b/scss/_tags.scss @@ -3,13 +3,13 @@ // Requires one of the contextual, color modifier classes for `color` and // `background-color`. -.label { +.tag { display: inline-block; padding: .25em .4em; font-size: 75%; - font-weight: $label-font-weight; + font-weight: $tag-font-weight; line-height: 1; - color: $label-color; + color: $tag-color; text-align: center; white-space: nowrap; vertical-align: baseline; @@ -22,16 +22,16 @@ } // Quick fix for labels in buttons -.btn .label { +.btn .tag { position: relative; top: -1px; } // scss-lint:disable QualifyingElement // Add hover effects, but only for links -a.label { +a.tag { @include hover-focus { - color: $label-link-hover-color; + color: $tag-link-hover-color; text-decoration: none; cursor: pointer; } @@ -42,7 +42,7 @@ a.label { // // Make them extra rounded with a modifier to replace v3's badges. -.label-pill { +.tag-pill { padding-right: .6em; padding-left: .6em; // Use a higher than normal value to ensure completely rounded edges when @@ -54,26 +54,26 @@ a.label { // // Contextual variations (linked labels get darker on :hover). -.label-default { - @include label-variant($label-default-bg); +.tag-default { + @include tag-variant($tag-default-bg); } -.label-primary { - @include label-variant($label-primary-bg); +.tag-primary { + @include tag-variant($tag-primary-bg); } -.label-success { - @include label-variant($label-success-bg); +.tag-success { + @include tag-variant($tag-success-bg); } -.label-info { - @include label-variant($label-info-bg); +.tag-info { + @include tag-variant($tag-info-bg); } -.label-warning { - @include label-variant($label-warning-bg); +.tag-warning { + @include tag-variant($tag-warning-bg); } -.label-danger { - @include label-variant($label-danger-bg); +.tag-danger { + @include tag-variant($tag-danger-bg); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1d7c67004b..d60330a861 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -607,18 +607,18 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -// Labels +// Tags -$label-default-bg: $gray-light !default; -$label-primary-bg: $brand-primary !default; -$label-success-bg: $brand-success !default; -$label-info-bg: $brand-info !default; -$label-warning-bg: $brand-warning !default; -$label-danger-bg: $brand-danger !default; +$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; -$label-color: #fff !default; -$label-link-hover-color: #fff !default; -$label-font-weight: bold !default; +$tag-color: #fff !default; +$tag-link-hover-color: #fff !default; +$tag-font-weight: bold !default; // Modals diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index ef30c6b639..f99a722cad 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -34,7 +34,7 @@ @import "card"; @import "breadcrumb"; @import "pagination"; -@import "labels"; +@import "tags"; @import "jumbotron"; @import "alert"; @import "progress"; diff --git a/scss/mixins/_label.scss b/scss/mixins/_tag.scss similarity index 75% rename from scss/mixins/_label.scss rename to scss/mixins/_tag.scss index 4bc48c60dd..900c54e366 100644 --- a/scss/mixins/_label.scss +++ b/scss/mixins/_tag.scss @@ -1,6 +1,6 @@ -// Labels +// Tags -@mixin label-variant($color) { +@mixin tag-variant($color) { background-color: $color; &[href] {