summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/components/avatar.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/components/avatar.scss')
-rw-r--r--app/assets/stylesheets/components/avatar.scss240
1 files changed, 142 insertions, 98 deletions
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 4ab197b935b..25ee3ca944d 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -1,28 +1,111 @@
+$avatar-sizes: (
+ 16: (
+ font-size: 10px,
+ line-height: 16px,
+ border-radius: $border-radius-small
+ ),
+ 18: (
+ border-radius: $border-radius-small
+ ),
+ 19: (
+ border-radius: $border-radius-small
+ ),
+ 20: (
+ border-radius: $border-radius-small
+ ),
+ 24: (
+ font-size: 12px,
+ line-height: 24px,
+ border-radius: $border-radius-default
+ ),
+ 26: (
+ font-size: 20px,
+ line-height: 1.33,
+ border-radius: $border-radius-default
+ ),
+ 32: (
+ font-size: 14px,
+ line-height: 32px,
+ border-radius: $border-radius-default
+ ),
+ 36: (
+ border-radius: $border-radius-default
+ ),
+ 40: (
+ font-size: 16px,
+ line-height: 38px,
+ border-radius: $border-radius-default
+ ),
+ 46: (
+ border-radius: $border-radius-default
+ ),
+ 48: (
+ font-size: 20px,
+ line-height: 48px,
+ border-radius: $border-radius-large
+ ),
+ 60: (
+ font-size: 32px,
+ line-height: 58px,
+ border-radius: $border-radius-large
+ ),
+ 64: (
+ font-size: 28px,
+ line-height: 64px,
+ border-radius: $border-radius-large
+ ),
+ 70: (
+ font-size: 34px,
+ line-height: 70px,
+ border-radius: $border-radius-large
+ ),
+ 90: (
+ font-size: 36px,
+ line-height: 88px,
+ border-radius: $border-radius-large
+ ),
+ 96: (
+ font-size: 48px,
+ line-height: 96px,
+ border-radius: $border-radius-large
+ ),
+ 100: (
+ font-size: 36px,
+ line-height: 98px,
+ border-radius: $border-radius-large
+ ),
+ 110: (
+ font-size: 40px,
+ line-height: 108px,
+ font-weight: $gl-font-weight-normal,
+ border-radius: $border-radius-large
+ ),
+ 140: (
+ font-size: 72px,
+ line-height: 138px,
+ border-radius: $border-radius-large
+ ),
+ 160: (
+ font-size: 96px,
+ line-height: 158px,
+ border-radius: $border-radius-large
+ )
+);
+
+$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
+ $identicon-orange, $gray-darker;
+
.avatar-circle {
float: left;
margin-right: 15px;
border-radius: $avatar-radius;
border: 1px solid $gray-normal;
- &.s16 { @include avatar-size(16px, 8px); }
- &.s18 { @include avatar-size(18px, 8px); }
- &.s19 { @include avatar-size(19px, 8px); }
- &.s20 { @include avatar-size(20px, 8px); }
- &.s24 { @include avatar-size(24px, 8px); }
- &.s26 { @include avatar-size(26px, 8px); }
- &.s32 { @include avatar-size(32px, 8px); }
- &.s36 { @include avatar-size(36px, 16px); }
- &.s40 { @include avatar-size(40px, 16px); }
- &.s46 { @include avatar-size(46px, 16px); }
- &.s48 { @include avatar-size(48px, 16px); }
- &.s60 { @include avatar-size(60px, 16px); }
- &.s64 { @include avatar-size(64px, 16px); }
- &.s70 { @include avatar-size(70px, 16px); }
- &.s90 { @include avatar-size(90px, 16px); }
- &.s96 { @include avatar-size(96px, 16px); }
- &.s100 { @include avatar-size(100px, 16px); }
- &.s110 { @include avatar-size(110px, 16px); }
- &.s140 { @include avatar-size(140px, 16px); }
- &.s160 { @include avatar-size(160px, 16px); }
+
+ @each $size, $size-config in $avatar-sizes {
+ &.s#{$size} {
+ @include avatar-size(#{$size}px, if($size < 36, 8px, 16px));
+ }
+ }
}
.avatar {
@@ -42,8 +125,13 @@
margin-left: 2px;
flex-shrink: 0;
- &.s16 { margin-right: 4px; }
- &.s24 { margin-right: 4px; }
+ &.s16 {
+ margin-right: 4px;
+ }
+
+ &.s24 {
+ margin-right: 4px;
+ }
}
&.center {
@@ -69,60 +157,25 @@
background-color: $gray-darker;
// Sizes
- &.s16 { font-size: 10px;
- line-height: 16px; }
-
- &.s24 { font-size: 12px;
- line-height: 24px; }
-
- &.s26 { font-size: 20px;
- line-height: 1.33; }
-
- &.s32 { font-size: 14px;
- line-height: 32px; }
-
- &.s40 { font-size: 16px;
- line-height: 38px; }
-
- &.s48 { font-size: 20px;
- line-height: 48px; }
-
- &.s60 { font-size: 32px;
- line-height: 58px; }
-
- &.s64 { font-size: 28px;
- line-height: 64px; }
-
- &.s70 { font-size: 34px;
- line-height: 70px; }
-
- &.s90 { font-size: 36px;
- line-height: 88px; }
-
- &.s96 { font-size: 48px;
- line-height: 96px; }
-
- &.s100 { font-size: 36px;
- line-height: 98px; }
-
- &.s110 { font-size: 40px;
- line-height: 108px;
- font-weight: $gl-font-weight-normal; }
-
- &.s140 { font-size: 72px;
- line-height: 138px; }
-
- &.s160 { font-size: 96px;
- line-height: 158px; }
+ @each $size, $size-config in $avatar-sizes {
+ $keys: map-keys($size-config);
+
+ &.s#{$size} {
+ @each $key in $keys {
+ // We don't want `border-radius` to be included here.
+ @if ($key != 'border-radius') {
+ #{$key}: map-get($size-config, #{$key});
+ }
+ }
+ }
+ }
// Background colors
- &.bg1 { background-color: $identicon-red; }
- &.bg2 { background-color: $identicon-purple; }
- &.bg3 { background-color: $identicon-indigo; }
- &.bg4 { background-color: $identicon-blue; }
- &.bg5 { background-color: $identicon-teal; }
- &.bg6 { background-color: $identicon-orange; }
- &.bg7 { background-color: $gray-darker; }
+ @for $i from 1 through length($identicon-backgrounds) {
+ &.bg#{$i} {
+ background-color: nth($identicon-backgrounds, $i);
+ }
+ }
}
.avatar-container {
@@ -139,41 +192,32 @@
.avatar {
border-radius: 0;
+ border: 0;
height: auto;
width: 100%;
margin: 0;
align-self: center;
}
- &.s40 { min-width: 40px;
- min-height: 40px; }
+ &.s40 {
+ min-width: 40px;
+ min-height: 40px;
+ }
- &.s64 { min-width: 64px;
- min-height: 64px; }
+ &.s64 {
+ min-width: 64px;
+ min-height: 64px;
+ }
}
.rect-avatar {
border-radius: $border-radius-small;
- &.s16 { border-radius: $border-radius-small; }
- &.s18 { border-radius: $border-radius-small; }
- &.s19 { border-radius: $border-radius-small; }
- &.s20 { border-radius: $border-radius-small; }
- &.s24 { border-radius: $border-radius-default; }
- &.s26 { border-radius: $border-radius-default; }
- &.s32 { border-radius: $border-radius-default; }
- &.s36 { border-radius: $border-radius-default; }
- &.s40 { border-radius: $border-radius-default; }
- &.s46 { border-radius: $border-radius-default; }
- &.s48 { border-radius: $border-radius-large; }
- &.s60 { border-radius: $border-radius-large; }
- &.s64 { border-radius: $border-radius-large; }
- &.s70 { border-radius: $border-radius-large; }
- &.s90 { border-radius: $border-radius-large; }
- &.s96 { border-radius: $border-radius-large; }
- &.s100 { border-radius: $border-radius-large; }
- &.s110 { border-radius: $border-radius-large; }
- &.s140 { border-radius: $border-radius-large; }
- &.s160 { border-radius: $border-radius-large; }
+
+ @each $size, $size-config in $avatar-sizes {
+ &.s#{$size} {
+ border-radius: map-get($size-config, 'border-radius');
+ }
+ }
}
.avatar-counter {