1 files changed, 84 insertions, 57 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6f93299404c..2760af8a48a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,34 +1,3 @@
-@media (max-width: $screen-sm-max) {
-  .issuable-affix {
-    margin-top: 20px;
-  }
-}
-
-@media (max-width: $screen-md-max) {
-  .issuable-affix {
-    position: static;
-  }
-}
-
-@media (min-width: $screen-md-max) {
-  .issuable-affix {
-    &.affix-top {
-      position: static;
-    }
-
-    &.affix {
-      position: fixed;
-      top: 70px;
-      margin-right: 35px;
-
-      &.no-affix {
-        position: relative;
-        top: 0;
-      }
-    }
-  }
-}
-
 .issuable-details {
   section {
     .issuable-discussion {
@@ -54,6 +23,10 @@
       padding: 6px 10px;
     }
   }
+
+  &.has-labels {
+    margin-bottom: -5px;
+  }
 }
 
 .issuable-sidebar {
@@ -66,8 +39,9 @@
     width: $gutter_inner_width;
     // --
 
-    &:first-child {
-      padding-top: 5px;
+    &.issuable-sidebar-header {
+      padding-top: 0;
+      padding-bottom: 10px;
     }
 
     &:last-child {
@@ -75,7 +49,6 @@
     }
 
     span {
-      margin-top: 7px;
       display: inline-block;
     }
 
@@ -84,7 +57,7 @@
     }
 
     .issuable-count {
-
+      margin-top: 7px;
     }
 
     .gutter-toggle {
@@ -99,19 +72,19 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
+    line-height: 1;
 
     .avatar {
       margin-left: 0;
     }
 
-    label {
-      font-weight: normal;
-      margin-right: 4px;
-    }
-
     .edit-link {
       color: $gl-gray;
+
+      &:hover {
+        color: $md-link-color;
+      }
     }
   }
 
@@ -144,11 +117,6 @@
   .btn-clipboard {
     color: $gl-gray;
   }
-
-  .participants .avatar {
-    margin-top: 6px;
-    margin-right: 2px;
-  }
 }
 
 .right-sidebar {
@@ -163,8 +131,12 @@
   &.right-sidebar-expanded {
     width: $gutter_width;
 
-    hr {
-      display: none;
+    .value {
+      line-height: 1;
+    }
+
+    .bold {
+      font-weight: 600;
     }
 
     .sidebar-collapsed-icon {
@@ -172,8 +144,23 @@
     }
 
     .gutter-toggle {
+      margin-top: 7px;
       border-left: 1px solid $border-gray-light;
     }
+
+    .assignee .avatar {
+      float: left;
+      margin-right: 10px;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    .username {
+      display: block;
+      margin-top: 4px;
+      font-size: 13px;
+      font-weight: normal;
+    }
   }
 
   .subscribe-button {
@@ -193,14 +180,6 @@
     width: $sidebar_collapsed_width;
     padding-top: 0;
 
-    hr {
-      margin: 0;
-      color: $gray-normal;
-      border-color: $gray-normal;
-      width: 62px;
-      margin-left: -20px
-    }
-
     .block {
       width: $sidebar_collapsed_width - 1px;
       margin-left: -19px;
@@ -209,12 +188,18 @@
       overflow: hidden;
     }
 
+    .participants {
+      border-bottom: 1px solid $border-gray-light;
+    }
+
     .hide-collapsed {
       display: none;
     }
 
     .gutter-toggle {
-      margin-left: -36px;
+      width: 100%;
+      margin-left: 0;
+      padding-left: 25px;
     }
 
     .sidebar-collapsed-icon {
@@ -229,6 +214,10 @@
         margin-top: 0;
       }
 
+      .author {
+        display: none;
+      }
+
       .btn-clipboard {
         border: none;
 
@@ -241,6 +230,11 @@
         }
       }
     }
+
+    .sidebar-collapsed-user {
+      padding-bottom: 0;
+      margin-bottom: 10px;
+    }
   }
 
   .btn {
@@ -251,6 +245,13 @@
       border: 1px solid $border-gray-dark;
     }
   }
+
+  a:not(.btn) {
+    &:hover {
+      color: $md-link-color;
+      text-decoration: none;
+    }
+  }
 }
 
 .btn-default.gutter-toggle {
@@ -270,3 +271,29 @@
     color: $gray-darkest;
   }
 }
+
+.participants-list {
+  margin: -5px -5px;
+}
+
+.participants-author {
+  display: inline-block;
+  padding: 5px 5px;
+
+  .author_link {
+    display: block;
+  }
+
+  .avatar.avatar-inline {
+    margin: 0;
+  }
+}
+
+.participants-more {
+  margin-top: 5px;
+  margin-left: 5px;
+
+  a {
+    color: #8c8c8c;
+  }
+}