Sha256: 5c1f3c3c86362dbf1051829b61a88f9a6cdfa313caf9db19ddbefccea0ef6a53
Contents?: true
Size: 1.6 KB
Versions: 6
Compression:
Stored size: 1.6 KB
Contents
@use "sass:math";
@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: math.div($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
6 entries across 6 versions & 1 rubygems