Rename .label class to .tag
This commit is contained in:
Ameya Pandilwar
parent
48e02ebb8a
commit
4ed5fa77ff
|
|
@ -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 %}
|
||||
<h1>Example heading <span class="label label-default">New</span></h1>
|
||||
<h2>Example heading <span class="label label-default">New</span></h2>
|
||||
<h3>Example heading <span class="label label-default">New</span></h3>
|
||||
<h4>Example heading <span class="label label-default">New</span></h4>
|
||||
<h5>Example heading <span class="label label-default">New</span></h5>
|
||||
<h6>Example heading <span class="label label-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a label.
|
||||
|
||||
{% example html %}
|
||||
<span class="label label-default">Default</span>
|
||||
<span class="label label-primary">Primary</span>
|
||||
<span class="label label-success">Success</span>
|
||||
<span class="label label-info">Info</span>
|
||||
<span class="label label-warning">Warning</span>
|
||||
<span class="label label-danger">Danger</span>
|
||||
{% 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 %}
|
||||
<span class="label label-pill label-default">Default</span>
|
||||
<span class="label label-pill label-primary">Primary</span>
|
||||
<span class="label label-pill label-success">Success</span>
|
||||
<span class="label label-pill label-info">Info</span>
|
||||
<span class="label label-pill label-warning">Warning</span>
|
||||
<span class="label label-pill label-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -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 %}
|
||||
<h1>Example heading <span class="tag tag-default">New</span></h1>
|
||||
<h2>Example heading <span class="tag tag-default">New</span></h2>
|
||||
<h3>Example heading <span class="tag tag-default">New</span></h3>
|
||||
<h4>Example heading <span class="tag tag-default">New</span></h4>
|
||||
<h5>Example heading <span class="tag tag-default">New</span></h5>
|
||||
<h6>Example heading <span class="tag tag-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a tag.
|
||||
|
||||
{% example html %}
|
||||
<span class="tag tag-default">Default</span>
|
||||
<span class="tag tag-primary">Primary</span>
|
||||
<span class="tag tag-success">Success</span>
|
||||
<span class="tag tag-info">Info</span>
|
||||
<span class="tag tag-warning">Warning</span>
|
||||
<span class="tag tag-danger">Danger</span>
|
||||
{% 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 %}
|
||||
<span class="tag tag-pill tag-default">Default</span>
|
||||
<span class="tag tag-pill tag-primary">Primary</span>
|
||||
<span class="tag tag-pill tag-success">Success</span>
|
||||
<span class="tag tag-pill tag-info">Info</span>
|
||||
<span class="tag tag-pill tag-warning">Warning</span>
|
||||
<span class="tag tag-pill tag-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
border-top-color: #000 !important;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
.tag {
|
||||
border: $border-width solid #000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "labels";
|
||||
@import "tags";
|
||||
@import "jumbotron";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Labels
|
||||
// Tags
|
||||
|
||||
@mixin label-variant($color) {
|
||||
@mixin tag-variant($color) {
|
||||
background-color: $color;
|
||||
|
||||
&[href] {
|
||||
Loading…
Reference in New Issue