Sha256: 2be3b5c9ca7988ebd9ec09e5958081efaafc210da422ccddcee7742089a6354d
Contents?: true
Size: 1.89 KB
Versions: 9
Compression:
Stored size: 1.89 KB
Contents
// Table of Contents
// ==================================================
// Label & Badge
// Colors
// Styles
// Label & Badge
// ==================================================
.badge,
.label {
background: color(haze);
border: 1px solid color(haze);
border-radius: border-radius(b);
color: color(black);
display: inline-block;
font-size: text-size(s);
font-weight: text-weight(semibold);
line-height: 1;
overflow: hidden;
padding: 6px 10px 7px;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
&:empty { display: none; }
}
.badge {
border-radius: border-radius(xl);
min-width: 14px;
padding: 6px;
}
// Colors
// ==================================================
@each $name, $color in map-keys($colors) {
.badge-color-#{$name},
.label-color-#{$name} {
background: color($name);
border-color: color($name);
color: text-color-on($name);
&.badge-outline,
&.label-outline { color: color($name); }
&.badge-color-tint,
&.label-color-tint {
background: tint($name, 80%);
border-color: tint($name, 80%);
color: color($name);
&.badge-outline,
&.label-outline { border-color: color($name); }
}
}
}
// Sizes
// ==================================================
.badge-size-l,
.label-size-l,
.badge-size-m,
.label-size-m { font-size: text-size(b); }
.badge-size-l,
.badge-size-m { min-width: 16px; }
.badge-size-l { padding: 15px; }
.badge-size-m { padding: 10px; }
.label-size-l { padding: 13px 20px; }
.label-size-m { padding: 10px 15px; }
.badge-size-s,
.label-size-s {
font-size: text-size(xs);
padding: 4px 8px 5px;
}
.badge-size-s {
min-width: 0;
padding: 4px 6px;
}
// Styles
// ==================================================
.badge-block,
.label-block {
display: block;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.badge-outline,
.label-outline { background: color(transparent); }
Version data entries
9 entries across 9 versions & 1 rubygems