Sha256: 6905572d36a0f6f149edfa986d380e888be70217c6e71840b220c45a5416ef32
Contents?: true
Size: 1.6 KB
Versions: 39
Compression:
Stored size: 1.6 KB
Contents
$height: rem(20px);
$horizontal-padding: ($height / 2);
$pip-size: rem(10px);
$pip-spacing: ($height - $pip-size) / 2;
@mixin pip-color($color) {
.Polaris-Badge__Pip {
color: $color;
}
}
.Polaris-Badge {
@include pip-color(color(ink, lightest));
display: inline-flex;
align-items: center;
padding: 0 $horizontal-padding;
background-color: color(sky);
border: 2px solid color(white);
border-radius: $height;
font-size: rem(13px);
line-height: $height;
color: color(ink, light);
}
.Polaris-Badge--statusSuccess {
@include pip-color(color(green, dark));
background-color: color(green, light);
color: color(green, text);
}
.Polaris-Badge--statusInfo {
@include pip-color(color(blue, dark));
background-color: color(blue, light);
color: color(blue, text);
}
.Polaris-Badge--statusAttention {
@include pip-color(color(yellow, dark));
background-color: color(yellow, light);
color: color(yellow, text);
}
.Polaris-Badge--statusWarning {
@include pip-color(color(orange, dark));
background-color: color(orange, light);
color: color(orange, text);
}
.Polaris-Badge--progressIncomplete .Polaris-Badge__Pip {
background: transparent;
}
.Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip {
background: linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent);
}
.Polaris-Badge--progressComplete .Polaris-Badge__Pip {
background: currentColor;
}
.Polaris-Badge__Pip {
height: $pip-size;
width: $pip-size;
margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding);
border: rem(2px) solid currentColor;
border-radius: 50%;
}
Version data entries
39 entries across 39 versions & 1 rubygems