Permalink
Fetching contributors…
Cannot retrieve contributors at this time
130 lines (109 sloc) 3.26 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("label") {
#{$label-class} {
@include reset-inline-block;
font-size: .7rem;
line-height: 100%;
background: $gray-dark;
padding: .275rem .425rem;
text-transform: uppercase;
border-radius: 2px;
white-space: nowrap;
top: -1px;
letter-spacing: 1px;
@include is-small {
font-size: .6rem;
padding: .2rem .35rem;
}
@include is-large {
font-size: .8rem;
padding: .35rem .5rem;
}
&:empty { display: none; }
&::after {
content: "";
height: 0;
width: 0;
position: absolute;
}
}
//-------------------- Modifiers --------------------//
@if index($label-modifiers, "badge") {
#{$label-class-modifier-badge} {
border-radius: 1rem;
}
}
@if index($label-modifiers, "arrow-left") {
#{$label-class-modifier-arrow-left} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-left: 2px;
margin-left: 10px;
&::after {
top: 0;
right: 100%;
border: .65rem solid transparent;
border-right-color: $gray-dark;
}
@include is-small {
&::after { border-width: .5rem; }
}
@include is-large {
&::after { border-width: .75rem; }
}
}
}
@if index($label-modifiers, "arrow-right") {
#{$label-class-modifier-arrow-right} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-right: 2px;
margin-right: 10px;
&::after {
top: 0;
left: 100%;
border: .65rem solid transparent;
border-left-color: $gray-dark;
}
@include is-small {
&::after { border-width: .5rem; }
}
@include is-large {
&::after { border-width: .75rem; }
}
}
}
@if index($label-modifiers, "ribbon-left") {
#{$label-class-modifier-ribbon-left} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&::after {
top: 100%;
left: 0;
border: 1em solid transparent;
border-top-width: 0 !important;
border-left-width: 0 !important;
border-right-color: $gray-darkest;
}
}
}
@if index($label-modifiers, "ribbon-right") {
#{$label-class-modifier-ribbon-right} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&::after {
top: 100%;
right: 0;
border: 1em solid transparent;
border-top-width: 0 !important;
border-right-width: 0 !important;
border-left-color: $gray-darkest;
}
}
}
}