Rename .tag to .badge to avoid conflicting with WordPress
This commit is contained in:
Mark Otto
parent
d9d75f4d54
commit
d9fa3fd797
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<h1>Example heading <span class="badge badge-default">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-default">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-default">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-default">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-default">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a badge.
|
||||
|
||||
{% example html %}
|
||||
<span class="badge badge-default">Default</span>
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
{% 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 %}
|
||||
<span class="badge badge-pill tag-default">Default</span>
|
||||
<span class="badge badge-pill tag-primary">Primary</span>
|
||||
<span class="badge badge-pill tag-success">Success</span>
|
||||
<span class="badge badge-pill tag-info">Info</span>
|
||||
<span class="badge badge-pill tag-warning">Warning</span>
|
||||
<span class="badge badge-pill tag-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
|
|||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="tag tag-default tag-pill float-xs-right">14</span>
|
||||
<span class="badge badge-default tag-pill float-xs-right">14</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="tag tag-default tag-pill float-xs-right">2</span>
|
||||
<span class="badge badge-default tag-pill float-xs-right">2</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="tag tag-default tag-pill float-xs-right">1</span>
|
||||
<span class="badge badge-default tag-pill float-xs-right">1</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<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 %}
|
||||
|
||||
{% 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 %}
|
||||
<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 %}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
$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;
|
||||
|
||||
$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;
|
||||
$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;
|
||||
|
||||
$tag-pill-padding-x: .6em !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
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "tags";
|
||||
@import "badge";
|
||||
@import "jumbotron";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Tags
|
||||
|
||||
@mixin tag-variant($color) {
|
||||
@mixin badge-variant($color) {
|
||||
background-color: $color;
|
||||
|
||||
&[href] {
|
||||
Loading…
Reference in New Issue