root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Merge branch 'fix-19094' of https://github.com/ameya-pandilwar/bootstrap into ameya-pandilwar-fix-19094

This commit is contained in:
Mark Otto 2016-02-16 20:28:51 -08:00
parent a2fe2aaced 8cd2778148
commit d6207d852a
10 changed files with 96 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/components/label.md
View File

@ -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 %}

10
docs/components/list-group.md
View File

@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p
</ul> </ul>
{% endexample %} {% endexample %}
## Labels ## Tags
Add labels to any list group item to show unread counts, activity, etc. Add tags to any list group item to show unread counts, activity, etc.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">14</span> <span class="tag tag-default tag-pill pull-xs-right">14</span>
Cras justo odio Cras justo odio
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">2</span> <span class="tag tag-default tag-pill pull-xs-right">2</span>
Dapibus ac facilisis in Dapibus ac facilisis in
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-xs-right">1</span> <span class="tag tag-default tag-pill pull-xs-right">1</span>
Morbi leo risus Morbi leo risus
</li> </li>
</ul> </ul>

46
docs/components/tag.md Normal file
View File

@ -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 %}

2
docs/migration.md
View File

@ -128,7 +128,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
### Badges ### 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 ### Panels, thumbnails, and wells

2
scss/_mixins.scss
View File

@ -18,7 +18,7 @@
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/hover"; @import "mixins/hover";
@import "mixins/image"; @import "mixins/image";
@import "mixins/label"; @import "mixins/tag";
@import "mixins/reset-filter"; @import "mixins/reset-filter";
@import "mixins/resize"; @import "mixins/resize";
@import "mixins/screen-reader"; @import "mixins/screen-reader";

2
scss/_print.scss
View File

@ -92,7 +92,7 @@
border-top-color: #000 !important; border-top-color: #000 !important;
} }
} }
.label { .tag {
border: $border-width solid #000; border: $border-width solid #000;
} }

48
scss/_labels.scss → scss/_tags.scss
View File

@ -3,13 +3,13 @@
// Requires one of the contextual, color modifier classes for `color` and // Requires one of the contextual, color modifier classes for `color` and
// `background-color`. // `background-color`.
.label { .tag {
display: inline-block; display: inline-block;
padding: $label-padding-y $label-padding-x; padding: $tag-padding-y $tag-padding-x;
font-size: $label-font-size; font-size: $tag-font-size;
font-weight: $label-font-weight; font-weight: $tag-font-weight;
line-height: 1; line-height: 1;
color: $label-color; color: $tag-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@ -22,16 +22,16 @@
} }
// Quick fix for labels in buttons // Quick fix for labels in buttons
.btn .label { .btn .tag {
position: relative; position: relative;
top: -1px; top: -1px;
} }
// scss-lint:disable QualifyingElement // scss-lint:disable QualifyingElement
// Add hover effects, but only for links // Add hover effects, but only for links
a.label { a.tag {
@include hover-focus { @include hover-focus {
color: $label-link-hover-color; color: $tag-link-hover-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@ -42,36 +42,36 @@ a.label {
// //
// Make them extra rounded with a modifier to replace v3's badges. // Make them extra rounded with a modifier to replace v3's badges.
.label-pill { .tag-pill {
padding-right: $label-pill-padding-x; padding-right: $tag-pill-padding-x;
padding-left: $label-pill-padding-x; padding-left: $tag-pill-padding-x;
@include border-radius($label-pill-border-radius); @include border-radius($tag-pill-border-radius);
} }
// Colors // Colors
// //
// Contextual variations (linked labels get darker on :hover). // Contextual variations (linked labels get darker on :hover).
.label-default { .tag-default {
@include label-variant($label-default-bg); @include tag-variant($tag-default-bg);
} }
.label-primary { .tag-primary {
@include label-variant($label-primary-bg); @include tag-variant($tag-primary-bg);
} }
.label-success { .tag-success {
@include label-variant($label-success-bg); @include tag-variant($tag-success-bg);
} }
.label-info { .tag-info {
@include label-variant($label-info-bg); @include tag-variant($tag-info-bg);
} }
.label-warning { .tag-warning {
@include label-variant($label-warning-bg); @include tag-variant($tag-warning-bg);
} }
.label-danger { .tag-danger {
@include label-variant($label-danger-bg); @include tag-variant($tag-danger-bg);
} }

30
scss/_variables.scss
View File

@ -613,26 +613,26 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
// Labels // Tags
$label-default-bg: $gray-light !default; $tag-default-bg: $gray-light !default;
$label-primary-bg: $brand-primary !default; $tag-primary-bg: $brand-primary !default;
$label-success-bg: $brand-success !default; $tag-success-bg: $brand-success !default;
$label-info-bg: $brand-info !default; $tag-info-bg: $brand-info !default;
$label-warning-bg: $brand-warning !default; $tag-warning-bg: $brand-warning !default;
$label-danger-bg: $brand-danger !default; $tag-danger-bg: $brand-danger !default;
$label-color: #fff !default; $tag-color: #fff !default;
$label-link-hover-color: #fff !default; $tag-link-hover-color: #fff !default;
$label-font-size: 75% !default; $tag-font-size: 75% !default;
$label-font-weight: bold !default; $tag-font-weight: bold !default;
$label-padding-x: .4em !default; $tag-padding-x: .4em !default;
$label-padding-y: .25em !default; $tag-padding-y: .25em !default;
$label-pill-padding-x: .6em !default; $tag-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when // Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels. // customizing padding or font-size on labels.
$label-pill-border-radius: 10rem !default; $tag-pill-border-radius: 10rem !default;
// Modals // Modals

2
scss/bootstrap.scss vendored
View File

@ -34,7 +34,7 @@
@import "card"; @import "card";
@import "breadcrumb"; @import "breadcrumb";
@import "pagination"; @import "pagination";
@import "labels"; @import "tags";
@import "jumbotron"; @import "jumbotron";
@import "alert"; @import "alert";
@import "progress"; @import "progress";

4
scss/mixins/_label.scss → scss/mixins/_tag.scss
View File

@ -1,6 +1,6 @@
// Labels // Tags
@mixin label-variant($color) { @mixin tag-variant($color) {
background-color: $color; background-color: $color;
&[href] { &[href] {