Sha256: 22c9792850193396bb80d8eccce5cee1e9b58712d018da7f6346564a7e98e638

Contents?: true

Size: 1.58 KB

Versions: 92

Compression:

Stored size: 1.58 KB

Contents

@import "../tokens/colors";
@import "../utilities/colors";
@import "../tokens/opacity";
@import "../pb_avatar/avatar";

$pb_multiple_users_overlap: -9px;
$pb_multiple_users_border_size: 1px;
$pb_multiple_users_size: map-get($avatar-sizes, "xs");
$pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");

[class^=pb_multiple_users_kit] {
  display: inline-flex;

  .multiple_users_badge_xs,
  .multiple_users_badge_xxs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $pb_multiple_users_size;
    height: $pb_multiple_users_size;
    border-radius: calc($pb_multiple_users_size/2) + 2;
    background: tint($primary, 90%);
    border: $pb_multiple_users_border_size solid $white;
    color: $primary;
    font-weight: $bold;
    font-size: $font_smallest - 1;
  }

  .multiple_users_badge_xxs {
    width: $pb_multiple_users_size_xxs;
    height: $pb_multiple_users_size_xxs;
  }

  .pb_multiple_users_item {
    margin-left: $pb_multiple_users_overlap;
    margin-right: 0;

    &:first-of-type {
      margin-left: 0;
    }

    &.dark {
      .avatar_wrapper {
        border: $pb_multiple_users_border_size solid $bg_dark;
      }
    }

    .avatar_wrapper {
      border: $pb_multiple_users_border_size solid $white;
    }

    @each $item in [1, 2, 3, 4, 5] {
      &:nth-child(#{$item}) {
        z-index: #{$item - 1};
      }
    }
  }

  &[class*=_reverse] {
    flex-direction: row-reverse;

    .pb_multiple_users_item {
      margin-left: 0;
      margin-right: $pb_multiple_users_overlap;

      &:first-of-type {
        margin-right: 0;
      }
    }
  }
}

Version data entries

92 entries across 92 versions & 1 rubygems

Version Path
playbook_ui-14.0.0.pre.alpha.PLAY14733479 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-14.0.0.pre.alpha.dependabotnpmandyarnreactjoyride2823478 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-14.0.0.pre.alpha.PLAY14113475 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-14.0.0.pre.alpha.play1447alphatest3462 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-14.1.0 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.play1447addrequiredicons3455 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.play1447addrequiredicons3451 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.PLAY14043436 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3413 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3411 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3409 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3404 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.powerfontsexternal3403 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-14.0.0 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.1.pre.alpha.PLAY14633399 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.0.pre.alpha.PLAY14143373 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.0.pre.alpha.PLAY14143372 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.0.pre.alpha.PLAY14143358 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.34.0.pre.alpha.PLAY14143357 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
playbook_ui-13.33.1.pre.alpha.PLAY14143340 app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss