Merge branch 'style-avatar-component' into 'master'

Style avatar component

Closes gitlab-ui#252

See merge request gitlab-org/gitlab-ce!28399

4 files changed, 41 insertions, 38 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 37a729c7a63..4ab197b935b 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -1,33 +1,28 @@
-@mixin avatar-size($size, $margin-right) {
-  width: $size;
-  height: $size;
-  margin-right: $margin-right;
-}
-
 .avatar-circle {
   float: left;
   margin-right: 15px;
   border-radius: $avatar-radius;
   border: 1px solid $gray-normal;
-  &.s16 { @include avatar-size(16px, 6px); }
-  &.s18 { @include avatar-size(18px, 6px); }
-  &.s19 { @include avatar-size(19px, 6px); }
-  &.s20 { @include avatar-size(20px, 7px); }
+  &.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, 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); }
-  &.s64 { @include avatar-size(64px, 14px); }
-  &.s70 { @include avatar-size(70px, 14px); }
-  &.s90 { @include avatar-size(90px, 15px); }
-  &.s100 { @include avatar-size(100px, 15px); }
-  &.s110 { @include avatar-size(110px, 15px); }
-  &.s140 { @include avatar-size(140px, 15px); }
-  &.s160 { @include avatar-size(160px, 20px); }
+  &.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); }
 }
 
 .avatar {
@@ -39,6 +34,7 @@
   padding: 0;
   background: $gray-lightest;
   overflow: hidden;
+  border-color: rgba($black, $gl-avatar-border-opacity);
 
   &.avatar-inline {
     float: none;
@@ -64,41 +60,37 @@
   &.avatar-placeholder {
     border: 0;
   }
-
-  &:not([href]):hover {
-    border-color: darken($gray-normal, 10%);
-  }
 }
 
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $gl-gray-700;
+  color: $gray-800;
   background-color: $gray-darker;
 
   // Sizes
-  &.s16 { font-size: 12px;
-    line-height: 1.33; }
+  &.s16 { font-size: 10px;
+    line-height: 16px; }
 
-  &.s24 { font-size: 13px;
-    line-height: 1.8; }
+  &.s24 { font-size: 12px;
+    line-height: 24px; }
 
   &.s26 { font-size: 20px;
     line-height: 1.33; }
 
-  &.s32 { font-size: 20px;
-    line-height: 30px; }
+  &.s32 { font-size: 14px;
+    line-height: 32px; }
 
   &.s40 { font-size: 16px;
     line-height: 38px; }
 
   &.s48 { font-size: 20px;
-    line-height: 46px; }
+    line-height: 48px; }
 
   &.s60 { font-size: 32px;
     line-height: 58px; }
 
-  &.s64 { font-size: 32px;
+  &.s64 { font-size: 28px;
     line-height: 64px; }
 
   &.s70 { font-size: 34px;
@@ -107,6 +99,9 @@
   &.s90 { font-size: 36px;
     line-height: 88px; }
 
+  &.s96 { font-size: 48px;
+    line-height: 96px; }
+
   &.s100 { font-size: 36px;
     line-height: 98px; }
 
@@ -144,7 +139,6 @@
 
   .avatar {
     border-radius: 0;
-    border: 0;
     height: auto;
     width: 100%;
     margin: 0;
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index ab9047c54e4..9b0d19b0ef0 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -8,7 +8,6 @@
 
 @import 'framework/animations';
 @import 'framework/vue_transitions';
-@import 'framework/avatar';
 @import 'framework/asciidoctor';
 @import 'framework/banner';
 @import 'framework/blocks';
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 97de0c98325..18671f7c4d8 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -376,3 +376,12 @@
     }
   }
 }
+
+/*
+* Mixin that handles the size and right margin of avatars.
+*/
+@mixin avatar-size($size, $margin-right) {
+  width: $size;
+  height: $size;
+  margin-right: $margin-right;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 1cf122102cc..28768bdf88f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -589,6 +589,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards
 */
 $avatar-radius: 50%;
 $gl-avatar-size: 40px;
+$gl-avatar-border-opacity: 0.1;
 
 /*
 * Blame