avatar.scss 2.59 KB
Newer Older
1 2 3 4 5 6
@mixin avatar-size($size, $margin-right) {
  width: $size;
  height: $size;
  margin-right: $margin-right;
}

7
.avatar-circle {
8
  float: left;
9 10
  margin-right: 15px;
  border-radius: $avatar_radius;
11
  border: 1px solid $avatar-border;
12
  &.s16 { @include avatar-size(16px, 6px); }
13 14
  &.s18 { @include avatar-size(18px, 6px); }
  &.s19 { @include avatar-size(19px, 6px); }
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
  &.s20 { @include avatar-size(20px, 7px); }
  &.s24 { @include avatar-size(24px, 8px); }
  &.s26 { @include avatar-size(26px, 8px); }
  &.s32 { @include avatar-size(32px, 10px); }
  &.s36 { @include avatar-size(36px, 10px); }
  &.s40 { @include avatar-size(40px, 10px); }
  &.s46 { @include avatar-size(46px, 15px); }
  &.s48 { @include avatar-size(48px, 10px); }
  &.s60 { @include avatar-size(60px, 12px); }
  &.s70 { @include avatar-size(70px, 14px); }
  &.s90 { @include avatar-size(90px, 15px); }
  &.s110 { @include avatar-size(110px, 15px); }
  &.s140 { @include avatar-size(140px, 15px); }
  &.s160 { @include avatar-size(160px, 20px); }
}

.avatar {
32
  @extend .avatar-circle;
33 34
  @include transition-property(none);

35
  width: 40px;
36 37
  height: 40px;
  padding: 0;
38 39 40

  &.avatar-inline {
    float: none;
41
    display: inline-block;
42 43
    margin-left: 4px;
    margin-bottom: 2px;
44 45
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
46

47 48
    &.s16 { margin-right: 4px; }
    &.s24 { margin-right: 4px; }
49 50
  }

51 52 53 54 55 56
  &.center {
    font-size: 14px;
    line-height: 1.8em;
    text-align: center;
  }

57
  &.avatar-tile {
Clement Ho's avatar
Clement Ho committed
58
    border-radius: 0;
59
    border: none;
60
  }
61 62

  &:not([href]):hover {
63
    border-color: darken($avatar-border, 10%);
64
  }
65
}
66 67 68 69 70 71

.identicon {
  text-align: center;
  vertical-align: top;

  &.s16 { font-size: 12px; line-height: 1.33; }
72
  &.s24 { font-size: 14px; line-height: 1.8; }
73
  &.s26 { font-size: 20px; line-height: 1.33; }
74 75 76
  &.s32 { font-size: 20px; line-height: 30px; }
  &.s40 { font-size: 16px; line-height: 38px; }
  &.s60 { font-size: 32px; line-height: 58px; }
77
  &.s70 { font-size: 34px; line-height: 70px; }
78 79 80 81
  &.s90 { font-size: 36px; line-height: 88px; }
  &.s110 { font-size: 40px; line-height: 108px; font-weight: 300; }
  &.s140 { font-size: 72px; line-height: 138px; }
  &.s160 { font-size: 96px; line-height: 158px; }
82
}
83

84 85
.avatar-container {
  @extend .avatar-circle;
86 87 88 89 90 91 92
  overflow: hidden;
  display: flex;

  .avatar {
    border-radius: 0;
    border: none;
    height: auto;
93
    width: 100%;
94 95 96
    margin: 0;
    align-self: center;
  }
97
}
98 99 100 101

.avatar-counter {
  background-color: $gray-darkest;
  color: $white-light;
102
  border: 1px solid $avatar-border;
103 104 105 106 107 108
  border-radius: 1em;
  font-family: $regular_font;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
}