Merge branch 'dz-avatar-border' into 'master'

Add light border to rounded avatars Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/20128 To make it clear that avatar is cropped by border radius cc @hazelyang See merge request !5429

Merge branch 'dz-avatar-border' into 'master'
d93d78d9 · Dmitriy Zaporozhets · 46a17ffd · 87a5d712 · d93d78d9 · d93d78d9
Commit d93d78d9 authored Jul 23, 2016 by Dmitriy Zaporozhets
4 changed files
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -5,6 +5,7 @@
  height: 40px;
  padding: 0;
  @include border-radius($avatar_radius);
+  border: 1px solid rgba(0, 0, 0, .1);

  &.avatar-inline {
    float: none;
@@ -15,8 +16,9 @@
    &.s24 { margin-right: 4px; }
  }

-  &.group-avatar, &.project-avatar, &.avatar-tile {
+  &.avatar-tile {
    @include border-radius(0);
+    border: none;
  }

  &.s16 { width: 16px; height: 16px; margin-right: 6px; }
@@ -43,12 +45,12 @@
  &.s16 { font-size: 12px; line-height: 1.33; }
  &.s24 { font-size: 14px; line-height: 1.8; }
  &.s26 { font-size: 20px; line-height: 1.33; }
-  &.s32 { font-size: 20px; line-height: 32px; }
-  &.s40 { font-size: 16px; line-height: 40px; }
-  &.s60 { font-size: 32px; line-height: 60px; }
-  &.s70 { font-size: 34px; line-height: 70px; }
-  &.s90 { font-size: 36px; line-height: 90px; }
-  &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
-  &.s140 { font-size: 72px; line-height: 140px; }
-  &.s160 { font-size: 96px; line-height: 160px; }
+  &.s32 { font-size: 20px; line-height: 30px; }
+  &.s40 { font-size: 16px; line-height: 38px; }
+  &.s60 { font-size: 32px; line-height: 58px; }
+  &.s70 { font-size: 34px; line-height: 68px; }
+  &.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; }
 }
--- a/app/assets/stylesheets/pages/dashboard.scss
+++ b/app/assets/stylesheets/pages/dashboard.scss
@@ -36,10 +36,6 @@

 .dash-project-avatar {
  float: left;
-
-  .avatar {
-    @include border-radius(50%);
-  }
 }

 .dash-project-access-icon {

--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -6,7 +6,7 @@

 .cover-block.groups-cover-block
  %div{ class: container_class }
-    = image_tag group_icon(@group), class: "avatar group-avatar s70"
+    = image_tag group_icon(@group), class: "avatar group-avatar s70 avatar-tile"
    .group-info
      .cover-title
        %h1

--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
 - empty_repo = @project.empty_repo?
 .project-home-panel.text-center{ class: ("empty-project" if empty_repo) }
  %div{ class: container_class }
-    = project_icon(@project, alt: @project.name, class: 'project-avatar avatar s70')
+    = project_icon(@project, alt: @project.name, class: 'project-avatar avatar s70 avatar-tile')
    %h1.project-title
      = @project.name
      %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}