source: pro-violet-viettel/www/deploy/20150304/assets/css/less/label-badge.less @ 804

/* labels & badges */
.label {
 border-radius:0;
 text-shadow:none;
 font-weight:normal;

 display:inline-block;

 background-color:@label-default !important;

 &[class*="col-"][class*="arrow"] {
        min-height:0;
 }
}


@media screen and (-webkit-min-device-pixel-ratio:0) { 
        //default display:none causes problems with Android Webview
        ::safari-only,.label:empty {
                display: inline-block;
        }
        ::safari-only,.badge:empty {
                display: inline-block;
        }
}




.badge {
 text-shadow:none;
 font-size:12px;
 padding-top:1px;
 padding-bottom:3px;
 font-weight:normal;
 line-height:15px;
 background-color:@label-default !important;
 
 &.no-radius { border-radius:0; }
 &.radius-1 { border-radius:1px; }
 &.radius-2 { border-radius:2px; }
 &.radius-3 { border-radius:3px; }
 &.radius-4 { border-radius:4px; }
 &.radius-5 { border-radius:5px; }
 &.radius-6 { border-radius:6px; }
}
.label-transparent, .badge-transparent {
        background-color:transparent !important;
}



//labels
.label-color(@color) {
  @label-class:~`"label-@{color}"`;
  @badge-class:~`"badge-@{color}"`;
  @label-color:@@label-class;

 .@{label-class}, .@{badge-class} {
        background-color:@label-color !important;
 }  
}

.label-arrow(@color) {
   @label-class:~`"label-@{color}"`;
   @label-color:@@label-class;

  .@{label-class}{
        &.arrowed:before {
                border-right-color:@label-color;
        }
        &.arrowed-in:before {
                border-color:@label-color;
        }
        &.arrowed-right:after {
                border-left-color:@label-color;
        }
        &.arrowed-in-right:after {
                border-color:@label-color;
        }
  }
}
.label-color(~"grey");
.label-color(~"info");
.label-color(~"primary");
.label-color(~"success");
.label-color(~"danger");
.label-color(~"important");
.label-color(~"inverse");
.label-color(~"warning");
.label-color(~"pink");
.label-color(~"purple");
.label-color(~"yellow");
.label-color(~"light");


.badge-yellow, .label-yellow {
        color:#996633 !important;
        border-color:@label-yellow;
}
.badge-light, .label-light {
        color:#888 !important;
}




.label.arrowed , .label.arrowed-in {
 position:relative;
 z-index: 1;
 &:before {
        display:inline-block;
        content:"";
        position:absolute;
        top:0;
        z-index: -1;
        
        border:1px solid transparent;

        border-right-color:@label-default;
 }
}
.label.arrowed-in:before {
        border-color:@label-default;
        border-left-color:transparent !important;
}


.label.arrowed-right , .label.arrowed-in-right {
 position:relative;
 z-index: 1;
 &:after {
        display:inline-block;
        content:"";
        position:absolute;
        top:0;
        z-index: -1;
        
        border:1px solid transparent;

        border-left-color:@label-default;
 }
}
.label.arrowed-in-right:after {
        border-color:@label-default;
        border-right-color:transparent !important;
}



.label-arrow(~"info");
.label-arrow(~"primary");
.label-arrow(~"success");
.label-arrow(~"warning");
.label-arrow(~"important");
.label-arrow(~"danger");
.label-arrow(~"inverse");
.label-arrow(~"pink");
.label-arrow(~"purple");
.label-arrow(~"yellow");
.label-arrow(~"light");
.label-arrow(~"grey");


.label {
 .label-size(12px, 1.15, 20px, 10px, 5px);
}
.label-lg {
  padding:0.3em 0.6em 0.4em;
 .label-size(13px, 1.1, 24px, 12px, 6px);
}
.label-xlg {
  padding:0.3em 0.7em 0.4em;
 .label-size(14px, 1.3, 28px, 14px, 7px);
}
.label-sm {
  padding:0.2em 0.4em 0.3em;
 .label-size(11px, 1, 18px, 9px, 4px);
}
.label > span , .label > [class*="icon-"] {
 line-height: 1;
 vertical-align: bottom;
}


.label-size(@font-size, @line-height, @height, @border-height, @border-width) {
  font-size: @font-size;
  line-height: @line-height;
  height: @height;
  
  &.arrowed {
        margin-left: @border-width;
        &:before {
                left: -(@border-width * 2);
                border-width: @border-height @border-width;
        }
  }
  &.arrowed-in {
        margin-left: (@border-width);
        &:before {
                left: -@border-width;
                border-width: @border-height @border-width;
        }
  }

  &.arrowed-right {
        margin-right: @border-width;
        &:after {
                right: -(@border-width * 2);
                border-width: @border-height @border-width;
        }
  }
  &.arrowed-in-right {
        margin-right: (@border-width);
        &:after {
                right: -@border-width;
                border-width: @border-height @border-width;
        }
  }
}