app/assets/stylesheets/framework/icons.scss

@@ -65,3 +65,7 @@
     text-decoration: none;
   }
 }
+
+.user-avatar-link {
+  text-decoration: none;
+}

app/assets/stylesheets/framework/layout.scss

@@ -25,6 +25,10 @@ body {
 .content-wrapper {
   padding-bottom: 100px;
+
+  &:not(.page-with-layout-nav) {
+    margin-top: $header-height;
+  }
 }
 .container {

app/assets/stylesheets/framework/nav.scss

@@ -24,10 +24,10 @@
 }
 @mixin scrolling-links() {
-  white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+  display: flex;
   &::-webkit-scrollbar {
     display: none;
@@ -35,6 +35,7 @@
 }
 .nav-links {
+  display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -42,17 +43,16 @@
   border-bottom: 1px solid $border-color;
   li {
-    display: inline-block;
+    display: flex;
     a {
-      display: inline-block;
       padding: $gl-btn-padding;
       padding-bottom: 11px;
-      margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
+      white-space: nowrap;
       &:hover,
       &:active,
@@ -85,10 +85,10 @@
     .container-fluid {
       background-color: $gray-normal;
       margin-bottom: 0;
+      display: flex;
     }
     li {
-
       &.active a {
         border-bottom: none;
         color: $link-underline-blue;
@@ -137,9 +137,9 @@
   }
   .nav-links {
-    display: inline-block;
     margin-bottom: 0;
     border-bottom: none;
+    float: left;
     &.wide {
       width: 100%;
@@ -291,6 +291,7 @@
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
+  margin-top: $header-height;
   .container-fluid {
     position: relative;
@@ -336,6 +337,10 @@
     border-bottom: none;
     height: 51px;
+    @media (min-width: $screen-sm-min) {
+      justify-content: center;
+    }
+
     li {
       a {
         padding-top: 10px;
@@ -347,6 +352,10 @@
 .scrolling-tabs-container {
   position: relative;
+  .merge-request-tabs-container & {
+    overflow: hidden;
+  }
+
   .nav-links {
     @include scrolling-links();
   }
@@ -428,7 +437,7 @@
       top: ($header-height + 1) * 3;
       &.affix {
-        top: 0;
+        top: $header-height;
       }
     }
   }
@@ -484,10 +493,6 @@
 .inner-page-scroll-tabs {
   position: relative;
-  .nav-links {
-    padding-bottom: 1px;
-  }
-
   .fade-right {
     @include fade(left, $white-light);
     right: 0;

app/assets/stylesheets/framework/sidebar.scss

@@ -53,6 +53,7 @@
 .right-sidebar-expanded {
   padding-right: 0;
+  z-index: 300;
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
     &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
@@ -80,6 +81,6 @@
   &.affix {
     position: fixed;
-    top: 0;
+    top: $header-height;
   }
 }

app/assets/stylesheets/framework/timeline.scss

@@ -3,30 +3,6 @@
   margin: 0;
   padding: 0;
-  .timeline-entry {
-    padding: $gl-padding $gl-btn-padding 0;
-    border-color: $white-normal;
-    color: $gl-text-color;
-    border-bottom: 1px solid $border-white-light;
-
-    .timeline-entry-inner {
-      position: relative;
-    }
-
-    &:target {
-      background: $line-target-blue;
-    }
-
-    .avatar {
-      margin-right: 15px;
-    }
-
-    .controls {
-      padding-top: 10px;
-      float: right;
-    }
-  }
-
   .note-text {
     p:last-child {
       margin-bottom: 0;
@@ -46,20 +22,45 @@
   }
 }
+.timeline-entry {
+  padding: $gl-padding $gl-btn-padding 0;
+  border-color: $white-normal;
+  color: $gl-text-color;
+  border-bottom: 1px solid $border-white-light;
+
+  .timeline-entry-inner {
+    position: relative;
+  }
+
+  &:target,
+  &.target {
+    background: $line-target-blue;
+  }
+
+  .avatar {
+    margin-right: 15px;
+  }
+
+  .controls {
+    padding-top: 10px;
+    float: right;
+  }
+}
+
 @media (max-width: $screen-xs-max) {
   .timeline {
     &::before {
       background: none;
     }
-    .timeline-entry .timeline-entry-inner {
-      .timeline-icon {
-        display: none;
-      }
-      .timeline-content {
-        margin-left: 0;
-      }
+  }
+  .timeline-entry .timeline-entry-inner {
+    .timeline-icon {
+      display: none;
+    }
+    .timeline-content {
+      margin-left: 0;
     }
   }
 }

app/assets/stylesheets/framework/typography.scss

@@ -139,6 +139,15 @@
     line-height: 1.6em;
     overflow-x: auto;
     border-radius: 2px;
+
+
+    &.plain-readme {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font-size: 14px;
+    }
   }
   p > code {
@@ -169,14 +178,14 @@
   }
   ul.task-list {
-    li.task-list-item {
+    > li.task-list-item {
       list-style-type: none;
       position: relative;
       min-height: 22px;
       padding-left: 28px;
       margin-left: 0 !important;
-      input.task-list-item-checkbox {
+      > input.task-list-item-checkbox {
         position: absolute;
         left: 8px;
         top: 5px;
@@ -279,14 +288,6 @@ h6 {
 /** CODE **/
 pre {
   font-family: $monospace_font;
-
-  &.plain-readme {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-  }
 }
 code {

app/assets/stylesheets/highlight/dark.scss

@@ -185,6 +185,11 @@ $dark-il: #de935f;
     color: $dark-highlight-color !important;
   }
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $dark-na;
+  }
+
   .hll { background-color: $dark-hll-bg; }
   .c { color: $dark-c; } /* Comment */
   .err { color: $dark-err; } /* Error */

app/assets/stylesheets/highlight/monokai.scss

@@ -185,6 +185,11 @@ $monokai-gi: #a6e22e;
     color: $black !important;
   }
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $monokai-k;
+  }
+
   .hll { background-color: $monokai-hll; }
   .c { color: $monokai-c; } /* Comment */
   .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -188,6 +188,11 @@ $solarized-dark-il: #2aa198;
     background-color: $solarized-dark-highlight !important;
   }
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $solarized-dark-kd;
+  }
+
   /* Solarized Dark
   For use with Jekyll and Pygments

app/assets/stylesheets/highlight/solarized_light.scss

@@ -196,6 +196,11 @@ $solarized-light-il: #2aa198;
     background-color: $solarized-light-highlight !important;
   }
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $solarized-light-kd;
+  }
+
   /* Solarized Light
   For use with Jekyll and Pygments

app/assets/stylesheets/highlight/white.scss

@@ -203,6 +203,11 @@ $white-gc-bg: #eaf2f5;
     background-color: $white-highlight !important;
   }
+  // Links to URLs, emails, or dependencies
+  .line a {
+    color: $white-nb;
+  }
+
   .hll { background-color: $white-hll-bg; }
   .c { color: $white-c; font-style: italic; }
   .err { color: $white-err; background-color: $white-err-bg; }

app/assets/stylesheets/pages/builds.scss

@@ -378,7 +378,7 @@
         background-color: $row-hover;
       }
-      .fa-spinner {
+      .fa-refresh {
         font-size: 13px;
         margin-left: 3px;
       }

app/assets/stylesheets/pages/environments.scss

@@ -68,10 +68,6 @@
       margin: 0;
     }
-    .avatar-image-container {
-      text-decoration: none;
-    }
-
     .icon-play {
       height: 13px;
       width: 12px;

app/assets/stylesheets/pages/issuable.scss

@@ -23,16 +23,6 @@
     .merge-manually {
       @extend .fixed-width-container;
     }
-
-    .merge-request-tabs-holder {
-      &.affix {
-        border-bottom: 1px solid $border-color;
-
-        .nav-links {
-          border: 0;
-        }
-      }
-    }
   }
   .merge-request-details {
@@ -205,8 +195,17 @@
   right: 0;
   transition: width .3s;
   background: $gray-light;
-  padding: 10px 20px;
-  z-index: 2;
+  padding: 0 20px;
+  z-index: 200;
+  overflow: hidden;
+
+  .issuable-sidebar {
+    width: calc(100% + 100px);
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
   &.right-sidebar-expanded {
     width: $gutter_width;
@@ -220,6 +219,10 @@
       }
     }
+    .issuable-sidebar-header {
+      padding-top: 10px;
+    }
+
     .assign-yourself .btn-link {
       padding-left: 0;
     }
@@ -273,11 +276,10 @@
     }
     width: $gutter_collapsed_width;
-    padding-top: 0;
+    padding: 0;
     .block {
       width: $gutter_collapsed_width - 2px;
-      margin-left: -19px;
       padding: 15px 0 0;
       border-bottom: none;
       overflow: hidden;

app/assets/stylesheets/pages/merge_requests.scss

@@ -109,6 +109,10 @@
       height: 22px;
       margin-right: 8px;
     }
+
+    .ci-error {
+      margin-right: $btn-side-margin;
+    }
   }
   .mr-widget-body,
@@ -121,6 +125,7 @@
     .dropdown-menu {
       margin-top: 11px;
+      z-index: 200;
     }
     .ci-action-icon-wrapper {
@@ -348,6 +353,22 @@
       margin-top: 10px;
       margin-left: 12px;
     }
+
+    &.empty-state {
+      .artwork {
+        margin-bottom: $gl-padding;
+      }
+
+      .text {
+        span {
+          font-weight: bold;
+        }
+
+        p {
+          margin-top: $gl-padding;
+        }
+      }
+    }
   }
   .mr-widget-footer {
@@ -689,9 +710,10 @@
 }
 .merge-request-tabs-holder {
-  top: 0;
-  z-index: 10;
+  top: $header-height;
+  z-index: 100;
   background-color: $white-light;
+  border-bottom: 1px solid $border-color;
   @media(min-width: $screen-sm-min) {
     position: sticky;
@@ -711,6 +733,16 @@
       padding-right: $gl-padding;
     }
   }
+
+  .nav-links {
+    border: 0;
+  }
+}
+
+.merge-request-tabs {
+  display: flex;
+  margin-bottom: 0;
+  padding: 0;
 }
 .limit-container-width {
@@ -721,6 +753,15 @@
   }
 }
+.merge-request-tabs-container {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $screen-xs-max) {
+    flex-direction: column-reverse;
+  }
+}
+
 .limit-container-width:not(.container-limited) {
   .merge-request-tabs-holder:not(.affix) {
     .merge-request-tabs-container {

app/assets/stylesheets/pages/note_form.scss

@@ -277,6 +277,7 @@
 .toolbar-text {
   font-size: 14px;
   line-height: 16px;
+  margin-top: 2px;
   @media (min-width: $screen-md-min) {
     float: left;
@@ -402,3 +403,45 @@
     }
   }
 }
+
+.uploading-container {
+  float: right;
+
+  @media (max-width: $screen-xs-max) {
+    float: left;
+    margin-top: 5px;
+  }
+}
+
+.uploading-error-icon,
+.uploading-error-message {
+  color: $gl-text-red;
+}
+
+.uploading-error-message {
+  @media (max-width: $screen-xs-max) {
+    &::after {
+      content: "\a";
+      white-space: pre;
+    }
+  }
+}
+
+.uploading-progress {
+  margin-right: 5px;
+}
+
+.attach-new-file,
+.button-attach-file,
+.retry-uploading-link {
+  color: $gl-link-color;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.markdown-selector {
+  color: $gl-link-color;
+}

app/assets/stylesheets/pages/notes.scss

@@ -609,6 +609,15 @@ ul.notes {
 }
 .line-resolve-all-container {
+  @media (min-width: $screen-sm-min) {
+    margin-right: 0;
+    padding-left: $gl-padding;
+  }
+
+  > div {
+    white-space: nowrap;
+  }
+
   .btn-group {
     margin-left: -4px;
   }
@@ -660,7 +669,7 @@ ul.notes {
 .line-resolve-btn {
   position: relative;
-  top: 2px;
+  top: 0;
   padding: 0;
   background-color: transparent;
   border: none;
@@ -681,8 +690,8 @@ ul.notes {
   svg {
     fill: $gray-darkest;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
   }
   .loading {

app/assets/stylesheets/pages/pipeline_schedules.scss

@@ -31,14 +31,6 @@
     margin-right: 10px;
     font-size: 12px;
   }
-
-  .cron-unset-status {
-    padding-top: 16px;
-    margin-left: -16px;
-    color: $gl-text-color-secondary;
-    font-size: 12px;
-    font-weight: 600;
-  }
 }
 .pipeline-schedule-table-row {
@@ -69,3 +61,16 @@
     color: $gl-text-color;
   }
 }
+
+.cron-preset-radio-input {
+  display: inline-block;
+
+  @media (max-width: $screen-md-max) {
+    display: block;
+    margin: 0 0 5px 5px;
+  }
+
+  input {
+    margin-right: 3px;
+  }
+}

app/assets/stylesheets/pages/pipelines.scss

@@ -191,7 +191,6 @@
     }
     .commit-title {
-      margin-top: 4px;
       max-width: 225px;
       overflow: hidden;
       white-space: nowrap;
@@ -224,7 +223,7 @@
   .duration,
   .finished-at {
     color: $gl-text-color-secondary;
-    margin: 4px 0;
+    margin: 0;
     white-space: nowrap;
     .fa {

app/assets/stylesheets/pages/projects.scss

@@ -639,58 +639,6 @@ pre.light-well {
   }
 }
-.project-last-commit {
-  background-color: $gray-light;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-base;
-  padding: 12px;
-
-  @media (min-width: $screen-sm-min) {
-    margin-top: $gl-padding;
-  }
-
-  .ci-status {
-    margin-right: $gl-padding;
-  }
-
-  .commit-row-message {
-    color: $gl-text-color;
-  }
-
-  .commit-sha {
-    margin-right: 5px;
-    font-weight: 600;
-  }
-
-  .commit-author-link {
-    .commit-author-name {
-      font-weight: 600;
-    }
-  }
-}
-
-.project-show-readme {
-  .row-content-block {
-    background-color: inherit;
-    border: none;
-  }
-
-  .readme-holder {
-    padding: $gl-padding 0;
-    border-top: 0;
-
-    .edit-project-readme {
-      z-index: 2;
-      position: relative;
-    }
-
-    .wiki h1 {
-      border-bottom: none;
-      padding: 0;
-    }
-  }
-}
-
 .git-clone-holder {
   width: 380px;