Bootstrap flavor - labels
This commit is contained in:
Angelos Chalaris
parent
de06298227
commit
56ce6acb00
3 changed files with 67 additions and 31 deletions
|
|
@ -1123,48 +1123,64 @@ img.thumbnail {
|
|||
- [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise
|
||||
the specified style will not work correctly.
|
||||
*/
|
||||
.lbl {
|
||||
.label {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
padding: 0.2em 0.6em 0.3em;
|
||||
color: #fff;
|
||||
background-color: #777;
|
||||
border-radius: 4px; }
|
||||
.lbl:empty {
|
||||
border-radius: 0.25em; }
|
||||
.label:empty {
|
||||
display: none; }
|
||||
|
||||
.lbl.blue {
|
||||
.label.label-primary {
|
||||
color: #fff;
|
||||
background-color: #337ab7; }
|
||||
|
||||
.lbl.green {
|
||||
.label.label-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.lbl.red {
|
||||
.label.label-info {
|
||||
color: #fff;
|
||||
background-color: #5bc0de; }
|
||||
|
||||
.bdg {
|
||||
.label.label-warning {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e; }
|
||||
|
||||
.label.label-danger {
|
||||
color: #fff;
|
||||
background-color: #d9534f; }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
padding: 3px 7px;
|
||||
color: #fff;
|
||||
background-color: #777;
|
||||
border-radius: 8px; }
|
||||
.bdg:empty {
|
||||
border-radius: 10px; }
|
||||
.badge:empty {
|
||||
display: none; }
|
||||
|
||||
.bdg.blue {
|
||||
.badge.badge-primary {
|
||||
color: #fff;
|
||||
background-color: #337ab7; }
|
||||
|
||||
.bdg.green {
|
||||
.badge.badge-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.bdg.red {
|
||||
.badge.badge-info {
|
||||
color: #fff;
|
||||
background-color: #5bc0de; }
|
||||
|
||||
.badge.badge-warning {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e; }
|
||||
|
||||
.badge.badge-danger {
|
||||
color: #fff;
|
||||
background-color: #d9534f; }
|
||||
|
||||
/*
|
||||
Mixin for tab system.
|
||||
Parameters:
|
||||
|
|
|
|||
2
flavors/mini-bootstrap.min.css
vendored
2
flavors/mini-bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -347,30 +347,50 @@ $colored-bg-text5-bg-color: $btn-d-bg-color; // Background color for the
|
|||
//====================================================================
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
// --- NOTES: ---
|
||||
// Label and badge default classes are applied automatically, no contextual
|
||||
// class is needed. Neither .label-default nor .badge-default are supported.
|
||||
// Badge styling is not based on context, they are cotrolled based on the
|
||||
// classes the user specifies.
|
||||
// Labels and badges are sized approximately.
|
||||
// -------------------
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-b-bg-color: $btn-p-bg-color; // Color for labels/badges style 1
|
||||
$lbl-g-bg-color: $btn-s-bg-color; // Color for labels/badges style 2
|
||||
$lbl-r-bg-color: $btn-i-bg-color; // Color for labels/badges style 3
|
||||
$lbl-style1-bg-color: $btn-p-bg-color; // Color for labels/badges style 1
|
||||
$lbl-style2-bg-color: $btn-s-bg-color; // Color for labels/badges style 2
|
||||
$lbl-style3-bg-color: $btn-i-bg-color; // Color for labels/badges style 3
|
||||
$lbl-style4-bg-color: $btn-w-bg-color; // Color for labels/badges style 5
|
||||
$lbl-style5-bg-color: $btn-d-bg-color; // Color for labels/badges style 6
|
||||
// Label class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$lbl-class-name: lbl; // Name for the base labels class
|
||||
$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class
|
||||
$lbl-style2-name: 'green'; // Name for labels/badges style 2 class
|
||||
$lbl-style3-name: 'red'; // Name for labels/badges style 3 class
|
||||
$badge-class-name: bdg; // Name for the base badges class
|
||||
$lbl-class-name: label; // Name for the base labels class
|
||||
$lbl-style1-name: label-primary; // Name for labels style 1 class
|
||||
$lbl-style2-name: label-success; // Name for labels style 2 class
|
||||
$lbl-style3-name: label-info; // Name for labels style 3 class
|
||||
$lbl-style4-name: label-warning; // Name for labels style 4 class
|
||||
$lbl-style5-name: label-danger; // Name for labels style 5 class
|
||||
$badge-class-name: badge; // Name for the base badges class
|
||||
$badge-style1-name: badge-primary; // Name for badges style 1 class
|
||||
$badge-style2-name: badge-success; // Name for badges style 2 class
|
||||
$badge-style3-name: badge-info; // Name for badges style 3 class
|
||||
$badge-style4-name: badge-warning; // Name for badges style 4 class
|
||||
$badge-style5-name: badge-danger; // Name for badges style 5 class
|
||||
// Enable labels (_label.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/label';
|
||||
// Use label mixins to create labels with given specs. For more information
|
||||
// refer to the _label.scss file to check the definitions.
|
||||
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, .25em, .2em .6em .3em, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-style1-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-style2-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-style3-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style4-name, $lbl-default-color, $lbl-style4-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style5-name, $lbl-default-color, $lbl-style5-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 10px, 3px 7px, hide);
|
||||
@include make-lbl-style($badge-class-name, $badge-style1-name, $lbl-default-color, $lbl-style1-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style2-name, $lbl-default-color, $lbl-style2-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style3-name, $lbl-default-color, $lbl-style3-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style4-name, $lbl-default-color, $lbl-style4-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style5-name, $lbl-default-color, $lbl-style5-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Tab module (_tab.scss)
|
||||
//====================================================================
|
||||
|
|
|
|||
Loading…
Reference in a new issue