Badge.scss

gistfile1.txt

$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%;
}