Merge branch 'master' into 'balsalmiq-support'

# Conflicts:
#   config/webpack.config.js

24 files changed, 400 insertions, 128 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 90935b9616b..7c50b80fd2b 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -145,3 +145,17 @@ a {
 .dropdown-menu-nav a {
   transition: none;
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn $fade-in-duration 1;
+}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index b849cc2d853..b2102d2fbc5 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -38,6 +38,15 @@
     height: 300px;
     overflow-y: scroll;
   }
+
+  .disabled {
+    cursor: default;
+    opacity: 0.5;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
 
 .emoji-search {
@@ -99,8 +108,7 @@
 }
 
 .award-control {
-  margin: 3px 5px 3px 0;
-  padding: .35em .4em;
+  margin-right: 5px;
   outline: 0;
 
   &.disabled {
@@ -154,6 +162,17 @@
     }
   }
 
+  &.user-authored {
+    cursor: default;
+    opacity: 0.65;
+
+    &:hover,
+    &:active {
+      background-color: $white-light;
+      border-color: $border-color;
+    }
+  }
+
   &.btn {
     &:focus {
       outline: 0;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 52425262925..f3e2a5db0a6 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -230,7 +230,6 @@
     float: right;
     margin-top: 8px;
     padding-bottom: 8px;
-    border-bottom: 1px solid $border-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 9a0f7a14e57..759401a7806 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -5,7 +5,7 @@
   direction: rtl;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
-    overflow-x: scroll;
+    overflow-x: auto;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 2c33b235980..638c1403b25 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -40,6 +40,10 @@
   line-height: 24px;
 }
 
+.bold {
+  font-weight: 600;
+}
+
 .tab-content {
   overflow: visible;
 }
@@ -66,7 +70,7 @@ pre {
 }
 
 hr {
-  margin: $gl-padding 0;
+  margin: 24px 0;
   border-top: 1px solid darken($gray-normal, 8%);
 }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 7767826b033..30d785464ac 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -14,14 +14,32 @@
   }
 }
 
+@mixin set-visible {
+  transform: translateY(0);
+  visibility: visible;
+  opacity: 1;
+  transition-duration: 100ms, 150ms, 25ms;
+  transition-delay: 35ms, 50ms, 25ms;
+}
+
+@mixin set-invisible {
+  transform: translateY(-10px);
+  visibility: hidden;
+  opacity: 0;
+  transition-property: opacity, transform, visibility;
+  transition-duration: 70ms, 250ms, 250ms;
+  transition-timing-function: linear, $dropdown-animation-timing;
+  transition-delay: 25ms, 50ms, 0ms;
+}
+
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
     display: block;
+    @include set-visible;
 
     @media (max-width: $screen-xs-max) {
       width: 100%;
-      min-width: 240px;
     }
   }
 
@@ -161,8 +179,9 @@
 
 .dropdown-menu,
 .dropdown-menu-nav {
-  display: none;
+  display: block;
   position: absolute;
+  width: 100%;
   top: 100%;
   left: 0;
   z-index: 9;
@@ -176,6 +195,12 @@
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
+  overflow: hidden;
+  @include set-invisible;
+
+  @media (max-width: $screen-sm-min) {
+    width: 100%;
+  }
 
   &.is-loading {
     .dropdown-content {
@@ -252,6 +277,23 @@
   }
 }
 
+.filtered-search-box-input-container .dropdown-menu,
+.filtered-search-box-input-container .dropdown-menu-nav,
+.comment-type-dropdown .dropdown-menu {
+  display: none;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.filtered-search-box-input-container {
+  .dropdown-menu,
+  .dropdown-menu-nav {
+    max-width: 280px;
+    width: auto;
+  }
+}
+
 .dropdown-menu-drop-up {
   top: auto;
   bottom: 100%;
@@ -326,6 +368,10 @@
 
 .dropdown-select {
   width: $dropdown-width;
+
+  @media (max-width: $screen-sm-min) {
+    width: 100%;
+  }
 }
 
 .dropdown-menu-align-right {
@@ -564,3 +610,28 @@
     color: $gl-text-color-secondary;
   }
 }
+
+.droplab-item-ignore {
+  pointer-events: none;
+}
+
+.pika-single.animate-picker.is-bound,
+.pika-single.animate-picker.is-bound.is-hidden {
+  /*
+   * Having `!important` is not recommended but
+   * since `pikaday` sets positioning inline
+   * there's no way it can be gracefully overridden
+   * using config options.
+   */
+  position: absolute !important;
+  display: block;
+}
+
+.pika-single.animate-picker.is-bound {
+  @include set-visible;
+}
+
+.pika-single.animate-picker.is-bound.is-hidden {
+  @include set-invisible;
+  overflow: hidden;
+}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index b8dab538fee..099187a5193 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -73,14 +73,6 @@
 
     &.wiki {
       padding: 30px $gl-padding;
-
-      .highlight {
-        margin-bottom: 9px;
-
-        > pre {
-          margin: 0;
-        }
-      }
     }
 
     &.blob-no-preview {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 12465d4a70b..11d44df4867 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -82,7 +82,7 @@
   .input-token:last-child {
     flex: 1;
     -webkit-flex: 1;
-    max-width: initial;
+    max-width: inherit;
   }
 }
 
@@ -246,17 +246,17 @@
   }
 }
 
-.filtered-search-history-dropdown-toggle-button {
+.filtered-search-history-dropdown-wrapper {
+  position: static;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+}
+
+.filtered-search-history-dropdown-toggle-button {
+  flex: 1;
   width: auto;
-  height: 100%;
-  padding-top: 0;
-  padding-left: 0.75em;
-  padding-bottom: 0;
-  padding-right: 0.5em;
+  padding-right: 10px;
 
-  background-color: transparent;
   border-radius: 0;
   border-top: 0;
   border-left: 0;
@@ -264,6 +264,7 @@
   border-right: 1px solid $border-color;
 
   color: $gl-text-color-secondary;
+  line-height: 1;
 
   transition: color 0.1s linear;
 
@@ -275,24 +276,21 @@
   }
 
   .dropdown-toggle-text {
+    display: inline-block;
     color: inherit;
 
     .fa {
+      vertical-align: middle;
       color: inherit;
     }
   }
 
   .fa {
-    position: initial;
+    position: static;
   }
 
 }
 
-.filtered-search-history-dropdown-wrapper {
-  position: initial;
-  flex-shrink: 0;
-}
-
 .filtered-search-history-dropdown {
   width: 40%;
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index abb092623c0..6d9218310eb 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -155,7 +155,7 @@ header {
 
     .header-logo {
       display: inline-block;
-      margin: 0 7px 0 2px;
+      margin: 0 12px 0 2px;
       position: relative;
       top: 10px;
       transition-duration: .3s;
@@ -186,7 +186,7 @@ header {
       display: flex;
       align-items: flex-start;
       flex: 1 1 auto;
-      padding-top: (($header-height - 19) / 2);
+      padding-top: 14px;
       overflow: hidden;
     }
 
@@ -329,8 +329,17 @@ header {
 
 .header-user {
   .dropdown-menu-nav {
+    width: auto;
     min-width: 140px;
     margin-top: -5px;
+
+    .current-user {
+      padding: 5px 18px;
+
+      .user-name {
+        display: block;
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index e6d808717f3..b6cf5101d60 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -110,7 +110,7 @@
 
 .top-area {
   @include clearfix;
-  border-bottom: 1px solid $white-normal;
+  border-bottom: 1px solid $border-color;
 
   .nav-text {
     padding-top: 16px;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index cd23deb6d75..d2164a1d333 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -4,7 +4,7 @@
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding $gl-btn-padding 14px;
+    padding: $gl-padding $gl-btn-padding 0;
     border-color: $white-normal;
     color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index c241816788b..96d8a812723 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -8,6 +8,13 @@
 
   img {
     max-width: 100%;
+    margin: 0 0 8px;
+  }
+
+  p a:not(.no-attachment-icon) img {
+    // Remove bottom padding because
+    // <p> already has $gl-padding bottom
+    margin-bottom: 0;
   }
 
   *:first-child:not(.katex-display) {
@@ -47,44 +54,50 @@
   h1 {
     font-size: 1.75em;
     font-weight: 600;
-    margin: 16px 0 10px;
-    padding: 0 0 0.3em;
+    margin: 24px 0 16px;
+    padding-bottom: 0.3em;
     border-bottom: 1px solid $white-dark;
     color: $gl-text-color;
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   h2 {
     font-size: 1.5em;
     font-weight: 600;
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid $white-dark;
     color: $gl-text-color;
   }
 
   h3 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 1.3em;
   }
 
   h4 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 1.2em;
   }
 
   h5 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 1em;
   }
 
   h6 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 0.95em;
   }
 
   blockquote {
     color: $gl-grayish-blue;
     font-size: inherit;
-    padding: 8px 21px;
-    margin: 12px 0;
+    padding: 8px 24px;
+    margin: 16px 0;
     border-left: 3px solid $white-dark;
   }
 
@@ -95,19 +108,20 @@
 
   blockquote p {
     color: $gl-grayish-blue !important;
+    margin: 0;
     font-size: inherit;
     line-height: 1.5;
   }
 
   p {
     color: $gl-text-color;
-    margin: 6px 0 0;
+    margin: 0 0 16px;
   }
 
   table {
     @extend .table;
     @extend .table-bordered;
-    margin: 12px 0;
+    margin: 16px 0;
     color: $gl-text-color;
 
     th {
@@ -120,7 +134,7 @@
   }
 
   pre {
-    margin: 12px 0;
+    margin-bottom: 16px;
     font-size: 13px;
     line-height: 1.6em;
     overflow-x: auto;
@@ -134,7 +148,7 @@
   ul,
   ol {
     padding: 0;
-    margin: 3px 0 !important;
+    margin: 0 0 16px !important;
   }
 
   ul:dir(rtl),
@@ -158,6 +172,7 @@
     li.task-list-item {
       list-style-type: none;
       position: relative;
+      min-height: 22px;
       padding-left: 28px;
       margin-left: 0 !important;
 
@@ -337,3 +352,32 @@ h4 {
 .idiff.addition {
   background: $line-added-dark;
 }
+
+
+/**
+ * form text input i.e. search bar, comments, forms, etc.
+ */
+input,
+textarea {
+  &::-webkit-input-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  // support firefox 19+ vendor prefix
+  &::-moz-placeholder {
+    color: $placeholder-text-color;
+    opacity: 1; // FF defaults to 0.54
+  }
+
+  // scss-lint:disable PseudoElement
+  // support Edge vendor prefix
+  &::-ms-input-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  // scss-lint:disable PseudoElement
+  // support IE vendor prefix
+  &:-ms-input-placeholder {
+    color: $placeholder-text-color;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 712eb7caf33..49741c963df 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -26,6 +26,7 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
+$green-25: #f6fcf8;
 $green-50: #e4f5eb;
 $green-100: #bae6cc;
 $green-200: #8dd5aa;
@@ -37,6 +38,7 @@ $green-700: #12753a;
 $green-800: #0e5a2d;
 $green-900: #0a4020;
 
+$blue-25: #f6fafd;
 $blue-50: #e4eff9;
 $blue-100: #bcd7f1;
 $blue-200: #8fbce8;
@@ -48,6 +50,7 @@ $blue-700: #17599c;
 $blue-800: #134a81;
 $blue-900: #0f3b66;
 
+$orange-25: #fffcf8;
 $orange-50: #fff2e1;
 $orange-100: #fedfb3;
 $orange-200: #feca81;
@@ -59,6 +62,7 @@ $orange-700: #c26700;
 $orange-800: #a35100;
 $orange-900: #853b00;
 
+$red-25: #fef7f6;
 $red-50: #fbe7e4;
 $red-100: #f4c4bc;
 $red-200: #ed9d90;
@@ -107,6 +111,7 @@ $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
 $gl-header-color: #4c4e54;
 $gl-header-nav-hover-color: #434343;
+$placeholder-text-color: rgba(0, 0, 0, .42);
 
 /*
  * Lists
@@ -147,7 +152,7 @@ $gl-sidebar-padding: 22px;
 /*
  * Misc
  */
-$row-hover: lighten($blue-50, 2%);
+$row-hover: $blue-25;
 $row-hover-border: $blue-100;
 $progress-color: #c0392b;
 $header-height: 50px;
@@ -223,18 +228,18 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 /*
  * Commit Diff Colors
  */
-$added: $green-300;
-$deleted: $red-300;
-$line-added: $green-50;
-$line-added-dark: $green-100;
-$line-removed: $red-50;
-$line-removed-dark: $red-100;
-$line-number-old: lighten($red-100, 5%);
-$line-number-new: lighten($green-100, 5%);
-$line-number-select: lighten($orange-100, 5%);
-$line-target-blue: $blue-50;
-$line-select-yellow: $orange-50;
-$line-select-yellow-dark: $orange-100;
+$added: #63c363;
+$deleted: #f77;
+$line-added: #ecfdf0;
+$line-added-dark: #c7f0d2;
+$line-removed: #fbe9eb;
+$line-removed-dark: #fac5cd;
+$line-number-old: #f9d7dc;
+$line-number-new: #ddfbe6;
+$line-number-select: #fbf2da;
+$line-target-blue: #f6faff;
+$line-select-yellow: #fcf8e7;
+$line-select-yellow-dark: #f0e2bd;
 $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
 $dark-diff-match-color: rgba(255, 255, 255, 0.1);
 $file-mode-changed: #777;
@@ -454,6 +459,11 @@ $label-remove-border: rgba(0, 0, 0, .1);
 $label-border-radius: 100px;
 
 /*
+* Animation
+*/
+$fade-in-duration: 200ms;
+
+/*
 * Lint
 */
 $lint-incorrect-color: $red-500;
@@ -552,3 +562,8 @@ $filter-name-text-color: rgba(0, 0, 0, 0.55);
 $filter-value-text-color: rgba(0, 0, 0, 0.85);
 $filter-name-selected-color: #ebebeb;
 $filter-value-selected-color: #d7d7d7;
+
+/*
+Animation Functions
+*/
+$dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 03fddaeb163..411f1c4442b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -39,7 +39,7 @@
     overflow-y: hidden;
     font-size: 12px;
 
-    .fa-refresh {
+    .fa-spinner {
       font-size: 24px;
       margin-left: 20px;
     }
@@ -61,8 +61,9 @@
   .truncated-info {
     text-align: center;
     border-bottom: 1px solid;
-    background-color: $black-transparent;
+    background-color: $black;
     height: 45px;
+    padding: 15px;
 
     &.affix {
       top: 0;
@@ -87,6 +88,16 @@
       right: 5px;
       left: 5px;
     }
+
+    .truncated-info-size {
+      margin: 0 5px;
+    }
+
+    .raw-link {
+      color: inherit;
+      margin-left: 5px;
+      text-decoration: underline;
+    }
   }
 }
 
@@ -219,7 +230,7 @@
   font-size: 12px;
   position: relative;
 
-  .fa-refresh {
+  .fa-spinner {
     font-size: 24px;
   }
 
@@ -366,7 +377,7 @@
         background-color: $row-hover;
       }
 
-      .fa-refresh {
+      .fa-spinner {
         font-size: 13px;
         margin-left: 3px;
       }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 0dad91ba128..9e3142c8aa3 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -135,7 +135,7 @@
 
 .text-expander {
   display: inline-block;
-  background: $gray-light;
+  background: $white-light;
   color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
@@ -146,6 +146,11 @@
   line-height: $gl-font-size;
   outline: none;
 
+  &.open {
+    background: $gray-light;
+    box-shadow: inset 0 0 2px rgba($black, 0.2);
+  }
+
   &:hover {
     background-color: darken($gray-light, 10%);
     text-decoration: none;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 46fd19c93f9..f3de05aa5f6 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -29,11 +29,5 @@
 
   .description {
     margin-top: 6px;
-
-    p {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
   }
 }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 1aa1079903c..1b4694377b3 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -106,6 +106,10 @@
         span {
           white-space: pre-wrap;
         }
+
+        .line {
+          word-wrap: break-word;
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 79da490675a..5b723f7c722 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -10,10 +10,14 @@
   position: relative;
 
   &.event-inline {
-    .profile-icon {
+    .system-note-image {
       top: 20px;
     }
 
+    .user-avatar {
+      top: 14px;
+    }
+
     .event-title,
     .event-item-timestamp {
       line-height: 40px;
@@ -24,7 +28,7 @@
     color: $gl-text-color;
   }
 
-  .profile-icon {
+  .system-note-image {
     position: absolute;
     left: 0;
     top: 14px;
@@ -35,15 +39,18 @@
       fill: $gl-text-color-secondary;
     }
 
-    &.open-icon svg {
-      fill: $green-300;
+    &.opened-icon,
+    &.created-icon {
+      svg {
+        fill: $green-300;
+      }
     }
 
     &.closed-icon svg {
       fill: $red-300;
     }
 
-    &.fork-icon svg {
+    &.accepted-icon svg {
       fill: $blue-300;
     }
   }
@@ -128,8 +135,7 @@
     li {
       &.commit {
         background: transparent;
-        padding: 3px;
-        padding-left: 0;
+        padding: 0;
         border: none;
 
         .commit-row-title {
@@ -183,7 +189,7 @@
       max-width: 100%;
     }
 
-    .profile-icon {
+    .system-note-image {
       display: none;
     }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 0bca3e93e4c..97fab513b01 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -52,7 +52,7 @@
 
   .title {
     padding: 0;
-    margin: 0;
+    margin-bottom: 16px;
     border-bottom: none;
   }
 
@@ -210,10 +210,6 @@
       }
     }
 
-    .bold {
-      font-weight: 600;
-    }
-
     .light {
       font-weight: normal;
     }
@@ -361,6 +357,8 @@
 }
 
 .detail-page-description {
+  padding: 16px 0 0;
+
   small {
     color: $gray-darkest;
   }
@@ -368,6 +366,8 @@
 
 .edited-text {
   color: $gray-darkest;
+  display: block;
+  margin: 0 0 16px;
 
   .author_link {
     color: $gray-darkest;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index b637994adf8..62f654ed343 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -28,7 +28,7 @@
 .note-edit-form {
   .note-form-actions {
     position: relative;
-    margin-top: $gl-padding;
+    margin: $gl-padding 0;
   }
 
   .note-preview-holder {
@@ -387,6 +387,7 @@
   @media (max-width: $screen-xs-max) {
     display: flex;
     width: 100%;
+    margin-bottom: 10px;
 
     .comment-btn {
       flex-grow: 1;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 94ea4c5c8c6..69a95db6920 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -18,12 +18,12 @@ ul.notes {
     float: left;
 
     svg {
-      width: 18px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       fill: $gray-darkest;
       position: absolute;
-      left: 30px;
-      top: 15px;
+      left: 0;
+      top: 16px;
     }
   }
 
@@ -102,13 +102,12 @@ ul.notes {
 
     .note-awards {
       .js-awards-block {
-        padding: 2px;
-        margin-top: 10px;
+        margin-bottom: 16px;
       }
     }
 
     .note-header {
-      padding-bottom: 3px;
+      padding-bottom: 8px;
       padding-right: 20px;
 
       @media (min-width: $screen-sm-min) {
@@ -123,6 +122,9 @@ ul.notes {
     }
 
     .note-emoji-button {
+      position: relative;
+      line-height: 1;
+
       .fa-spinner {
         display: none;
       }
@@ -144,6 +146,14 @@ ul.notes {
     padding: 0;
     clear: both;
 
+    @media (min-width: $screen-sm-min) {
+      margin-left: 65px;
+    }
+
+    .note-header {
+      padding-bottom: 0;
+    }
+
     &.timeline-entry::after {
       clear: none;
     }
@@ -172,6 +182,10 @@ ul.notes {
 
     .timeline-content {
       padding: 14px 10px;
+
+      @media (min-width: $screen-sm-min) {
+        margin-left: 20px;
+      }
     }
 
     .note-header {
@@ -344,6 +358,15 @@ ul.notes {
   font-size: 14px;
 }
 
+.note-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.note-header-info {
+  min-width: 0;
+}
+
 .note-headline-light {
   display: inline;
 
@@ -363,21 +386,31 @@ ul.notes {
   }
 }
 
+.note-headline-meta {
+  display: inline-block;
+  white-space: nowrap;
+
+  .system-note-message {
+    white-space: normal;
+  }
+}
+
 /**
  * Actions for Discussions/Notes
  */
 
-.discussion-actions,
-.note-actions {
+.discussion-actions {
   float: right;
   margin-left: 10px;
   color: $gray-darkest;
 }
 
 .note-actions {
-  position: absolute;
-  right: 0;
-  top: 0;
+  flex-shrink: 0;
+  // For PhantomJS that does not support flex
+  float: right;
+  margin-left: 10px;
+  color: $gray-darkest;
 
   .note-action-button {
     margin-left: 8px;
@@ -420,7 +453,8 @@ ul.notes {
   .award-control-icon-positive,
   .award-control-icon-super-positive {
     position: absolute;
-    margin-left: -20px;
+    top: 0;
+    left: 0;
     opacity: 0;
   }
 
@@ -619,7 +653,6 @@ ul.notes {
   }
 
   &:not(.is-disabled):hover,
-  &:not(.is-disabled):focus,
   &.is-active {
     color: $gl-text-green;
 
@@ -633,6 +666,11 @@ ul.notes {
     height: 15px;
     width: 15px;
   }
+
+  .loading {
+    margin: 0;
+    height: auto;
+  }
 }
 
 .discussion-next-btn {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8c6dd392865..fe084eb9397 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -289,8 +289,12 @@ table.u2f-registrations {
   margin: 0 auto;
 
   .bordered-box {
-    border: 1px solid $border-color;
+    border: 1px solid $blue-300;
     border-radius: $border-radius-default;
+    background-color: $blue-25;
+    position: relative;
+    display: flex;
+    justify-content: center;
   }
 
   .landing {
@@ -298,28 +302,59 @@ table.u2f-registrations {
     margin-bottom: $gl-padding;
 
     .close {
-      margin-right: 20px;
-    }
+      position: absolute;
+      right: 20px;
+      opacity: 1;
+
+      .dismiss-icon {
+        float: right;
+        cursor: pointer;
+        color: $blue-300;
+      }
 
-    .dismiss-icon {
-      float: right;
-      cursor: pointer;
-      color: $cycle-analytics-dismiss-icon-color;
+      &:hover {
+        background-color: transparent;
+        border: 0;
+
+        .dismiss-icon {
+          color: $blue-400;
+        }
+      }
     }
 
     .svg-container {
-      text-align: center;
+      margin-right: 30px;
+      display: inline-block;
 
       svg {
-        width: 136px;
-        height: 136px;
+        height: 110px;
+        vertical-align: top;
       }
     }
+
+    .user-callout-copy {
+      display: inline-block;
+      vertical-align: top;
+    }
   }
 
   @media(max-width: $screen-xs-max) {
-    .inner-content {
-      padding-left: 30px;
+    text-align: center;
+
+    .bordered-box {
+      display: block;
+    }
+
+    .landing {
+      .svg-container,
+      .user-callout-copy {
+        margin: 0;
+        display: block;
+
+        svg {
+          height: 75px;
+        }
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 717ebb44a23..28a8f9cb335 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -596,6 +596,10 @@ pre.light-well {
 
   .avatar-container {
     align-self: flex-start;
+
+    > a {
+      width: 100%;
+    }
   }
 
   .project-details {
@@ -929,27 +933,23 @@ pre.light-well {
   }
 
   .variable-key {
-    width: 300px;
-    max-width: 300px;
+    max-width: 120px;
     overflow: hidden;
     word-wrap: break-word;
-
-    // override bootstrap
-    white-space: normal!important;
-
-    @media (max-width: $screen-sm-max) {
-      width: 150px;
-      max-width: 150px;
-    }
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .variable-value {
-    @media(max-width: $screen-xs-max) {
-      width: 150px;
-      max-width: 150px;
-      overflow: hidden;
-      word-wrap: break-word;
-    }
+    max-width: 150px;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .variable-menu {
+    text-align: right;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 543d2ece3df..b9818ffcf42 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -124,7 +124,13 @@ input[type="checkbox"]:hover {
 
     // Custom dropdown positioning
     .dropdown-menu {
-      top: 37px;
+      transition-property: opacity, transform;
+      transition-duration: 250ms, 250ms;
+      transition-delay: 0ms, 25ms;
+      transition-timing-function: $dropdown-animation-timing;
+      transform: translateY(0);
+      opacity: 0;
+      display: block;
       left: -5px;
       padding: 0;
 
@@ -156,6 +162,13 @@ input[type="checkbox"]:hover {
         color: $layout-link-gray;
       }
     }
+
+    .dropdown-menu {
+      transition-duration: 100ms, 75ms;
+      transition-delay: 75ms, 100ms;
+      transform: translateY(13px);
+      opacity: 1;
+    }
   }
 
   &.has-value {