Contents

@import "../tokens/colors";
@import "../tokens/opacity";

$pb_progress_simple_height: 4px;

[class^=pb__progress_simple_wrapper] {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &[class*=_center] {
    justify-content: center;
  }

  &[class*=_right] {
    justify-content: flex-end;
  }
}

[class^=pb_progress_simple] {
  width: 100%;
  height: $pb_progress_simple_height;
  border-radius: $pb_progress_simple_height/2;
  background: rgba($primary, $opacity-1);

  .progress_simple_value {
    width: 0%;
    height: 100%;
    border-radius: $pb_progress_simple_height/2;
    background: $primary;
  }

  &[class*=_muted] {
    background: rgba($slate, $opacity-2);

    .progress_simple_value {
      background: $slate;
    }
  }

  &[class*=_right] {
    display: flex;
    align-self: flex-end;
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
playbook_ui-2.8.4	app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
playbook_ui-2.8.3	app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
playbook_ui-2.8.1	app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss