Contents

@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/spacing";
@import "../tokens/typography";

[class^=pb_badge_kit] {
  $pb_badge_height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: $border_rad_light;
  padding: 0 calc($space_xs/2);
  border-width: 1px;
  border-style: solid;
  border-color: $card_light;
  white-space: nowrap;

  span {
    display: inline-block;
    font-size: $font_smaller - 1;
    font-weight: $bolder;
  }

  @each $color_name, $color_value in $status_colors {
    &[class*=_#{$color_name}]  {
      background: rgba($color_value, $opacity_1);
      color: map-get($status_color_text, $color_name);
    }
  }

  &[class*=_rounded] {
    height: $pb_badge_height;
    min-height: $pb_badge_height;
    min-width: $pb_badge_height;
    border-radius: calc($pb_badge_height / 2);
  }

  &[class*=_notification] {
    background: $primary;
    color: $white;
  }


  &[class*=_notification_error] {
    background: $error;
    color: $white;
  }

  &.dark {
    border-width: 0;

    @each $color_name, $color_value in $status_colors {
      &[class*=_#{$color_name}]  {
        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
        color: map-get($status_color_text_dark, $color_name);
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-14.0.0.pre.alpha.PLAY14113475	app/pb_kits/playbook/pb_badge/_badge.scss