60 lines
1.0 KiB
SCSS
60 lines
1.0 KiB
SCSS
/*
|
|
* Badge Module
|
|
*
|
|
* Badges that indicate the current status of a page/lib/api
|
|
*
|
|
* Usage: <span class="badge is-experimantal">Experimental</span>
|
|
*/
|
|
|
|
/*
|
|
* Badge Types
|
|
*/
|
|
|
|
$badges: (
|
|
beta: (
|
|
border: $amber-700,
|
|
color: $amber-900
|
|
),
|
|
deprecated: (
|
|
border: $pink-600,
|
|
color: $pink-600
|
|
),
|
|
experimental: (
|
|
border: $purple-600,
|
|
color: $purple-600
|
|
),
|
|
stable: (
|
|
border: $green-600,
|
|
color: $green-600
|
|
),
|
|
);
|
|
|
|
|
|
/*
|
|
* Class Definition
|
|
*/
|
|
|
|
.badge {
|
|
background: $white;
|
|
border: 2px solid $blue-grey-500;
|
|
border-radius: 2px;
|
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
box-sizing: border-box;
|
|
color: $blue-grey-500;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
height: $unit * 3;
|
|
line-height: ($unit * 3) - 2;
|
|
margin: ($unit + 4) $unit ($unit + 4) 0;
|
|
padding: 0 $unit;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
|
|
// BADGE TYPES
|
|
@each $name, $badge in $badges {
|
|
&.is-#{$name} {
|
|
border-color: map-get($badge, border);
|
|
color: map-get($badge, color);
|
|
}
|
|
}
|
|
} |