styles.scss 893 Bytes
Newer Older
1 2
@use '../../styles/colors.scss';
@use '../../styles/lengths.scss';
3
@use '../../styles/functions.scss';
4 5

$avatar-stack-background-color: theme('avatar-background-color', colors.surface());
6

Guilherme Gazzo's avatar
Guilherme Gazzo committed
7
$sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
8

Guilherme Gazzo's avatar
Guilherme Gazzo committed
9
.rcx-avatar {
10 11
  display: inline-flex;

12 13
  vertical-align: middle;

14
  &__element {
15 16
    position: relative;

17
    border-radius: lengths.border-width(2);
18 19 20 21

    &--rounded {
      border-radius: 100%;
    }
Guilherme Gazzo's avatar
Guilherme Gazzo committed
22
  }
23

24 25 26
  &-stack {
    display: flex;
    flex-direction: row-reverse;
27
    justify-content: center;
28

29 30 31
    color: #{ $avatar-stack-background-color };

    & > .rcx-avatar {
32 33 34
      margin:
        auto
        lengths.margin(-2);
35 36

      & > .rcx-avatar__element {
37
        border: lengths.border-width(2) solid currentColor;
38 39
      }
    }
40
  }
41 42 43 44 45 46

  @each $size in $sizes {
    &--x#{$size} {
      @include square(functions.to-rem($size));
    }
  }
Guilherme Gazzo's avatar
Guilherme Gazzo committed
47
}