Merge branch 'master' into 23535-folders-in-wiki-repository

30 files changed, 864 insertions, 630 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 76a88d96183..f2d60bff2b5 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -74,6 +74,7 @@
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
     min-height: 475px;
+    transition: width .2s;
 
     &.is-compact {
       width: calc(100% - 290px);
@@ -259,7 +260,7 @@
 
 .board-list-count {
   padding: 10px 0;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   font-size: 13px;
 
   > .fa {
@@ -338,3 +339,18 @@
     }
   }
 }
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: width .2s,
+                padding .2s;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
new file mode 100644
index 00000000000..3e2fa8ca88d
--- /dev/null
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -0,0 +1,55 @@
+.divergence-graph {
+  padding: 12px 12px 0 0;
+  float: right;
+
+  .graph-side {
+    position: relative;
+    width: 80px;
+    height: 22px;
+    padding: 5px 0 13px;
+    float: left;
+
+    .bar {
+      position: absolute;
+      height: 4px;
+      background-color: $divergence-graph-bar-bg;
+    }
+
+    .bar-behind {
+      right: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    .bar-ahead {
+      left: 0;
+      border-radius: 0 3px 3px 0;
+    }
+
+    .count {
+      padding-top: 6px;
+      padding-bottom: 0;
+      font-size: 12px;
+      color: $gl-text-color;
+      display: block;
+    }
+
+    .count-behind {
+      padding-right: 4px;
+      text-align: right;
+    }
+
+    .count-ahead {
+      padding-left: 4px;
+      text-align: left;
+    }
+  }
+
+  .graph-separator {
+    position: relative;
+    width: 1px;
+    height: 18px;
+    margin: 5px 0 0;
+    float: left;
+    background-color: $divergence-graph-separator-bg;
+  }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f9e8d297c05..fd101d43b5b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -160,7 +160,7 @@
     flex: 1;
 
     a {
-      color: $gl-gray;
+      color: $gl-text-color;
 
       &:hover {
         color: $gl-link-color;
@@ -357,7 +357,7 @@
 }
 
 .build-light-text {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 }
 
 .build-gutter-toggle {
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index d1cd1e5d848..90643832390 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -18,7 +18,7 @@
     }
 
     td {
-      color: $gl-gray;
+      color: $gl-text-color;
       vertical-align: middle !important;
 
       a {
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
deleted file mode 100644
index bf656d0e28e..00000000000
--- a/app/assets/stylesheets/pages/commit.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-.commit-title {
-  display: block;
-}
-
-.commit-author,
-.commit-committer {
-  display: block;
-  color: $commit-committer-color;
-  font-weight: normal;
-  font-style: italic;
-}
-
-.commit-author strong,
-.commit-committer strong {
-  font-weight: bold;
-  font-style: normal;
-}
-
-.commit-description {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  margin-top: 10px;
-  word-break: normal;
-  white-space: pre-wrap;
-}
-
-.js-details-expand {
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.ci-status-link {
-  svg {
-    overflow: visible;
-  }
-}
-
-.commit-box {
-  border-top: 1px solid $border-color;
-  padding: $gl-padding 0;
-
-  .commit-title {
-    margin: 0;
-    font-size: 23px;
-    color: $gl-gray-dark;
-  }
-
-  .commit-description {
-    margin-top: 15px;
-  }
-}
-
-.commit-hash-full {
-  @media (max-width: $screen-sm-max) {
-    width: 80px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-    vertical-align: bottom;
-  }
-}
-
-.file-stats {
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 10px 0;
-
-    li {
-      padding: 3px 0;
-      line-height: 20px;
-    }
-  }
-
-  .new-file {
-    a {
-      color: $gl-text-green;
-    }
-  }
-
-  .renamed-file {
-    a {
-      color: $gl-text-orange;
-    }
-  }
-
-  .deleted-file {
-    a {
-      color: $gl-text-red;
-    }
-  }
-
-  .edit-file {
-    a {
-      color: $gl-text-color;
-    }
-  }
-}
-
-/*
- * Commit message textarea for web editor and
- * custom merge request message
- */
-.commit-message-container {
-  background-color: $body-bg;
-  position: relative;
-  font-family: $monospace_font;
-  $left: 12px;
-  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
-  .max-width-marker {
-    width: 72ch;
-    color: $commit-max-width-marker-color;
-    font-family: inherit;
-    left: $left;
-    height: 100%;
-    border-right: 1px solid mix($input-border, $white-light);
-    position: absolute;
-    z-index: 1;
-  }
-
-  > textarea {
-    background-color: $commit-message-text-area-bg;
-    font-family: inherit;
-    padding-left: $left;
-    position: relative;
-    z-index: 2;
-  }
-}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index e76e1a73b25..fef8e8eec27 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,6 +1,75 @@
+.commit-description {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 10px;
+  word-break: normal;
+  white-space: pre-wrap;
+}
+
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.commit-box {
+  border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
+
+  .commit-title {
+    margin: 0;
+    color: $gl-text-color;
+  }
+
+  .commit-description {
+    margin-top: 15px;
+  }
+}
+
+.commit-hash-full {
+  @media (max-width: $screen-sm-max) {
+    width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+/*
+ * Commit message textarea for web editor and
+ * custom merge request message
+ */
+.commit-message-container {
+  background-color: $body-bg;
+  position: relative;
+  font-family: $monospace_font;
+  $left: 12px;
+  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
+  .max-width-marker {
+    width: 72ch;
+    color: $commit-max-width-marker-color;
+    font-family: inherit;
+    left: $left;
+    height: 100%;
+    border-right: 1px solid mix($input-border, $white-light);
+    position: absolute;
+    z-index: 1;
+  }
+
+  textarea {
+    background-color: $commit-message-text-area-bg;
+    font-family: inherit;
+    padding-left: $left;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+
 .commits-compare-switch {
-  @include btn-default;
-  @include btn-white;
   float: left;
   margin-right: 9px;
 }
@@ -8,7 +77,6 @@
 .commit-header {
   padding: 5px 10px;
   background-color: $gray-light;
-  border-top: 1px solid $gray-darker;
   border-bottom: 1px solid $gray-darker;
   font-size: 14px;
 
@@ -18,8 +86,6 @@
 }
 
 .commit-row-title {
-  line-height: 1.35;
-
   .notes_count {
     float: right;
     margin-right: 10px;
@@ -30,15 +96,14 @@
   }
 
   .commit-row-message {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
-
 }
 
 .text-expander {
   display: inline-block;
   background: $gray-light;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
@@ -54,9 +119,8 @@
 
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    float: right;
-    margin-left: $gl-padding;
-    margin-top: 2px;
+    width: 300px;
+    text-align: right;
     font-size: 0;
   }
 
@@ -86,35 +150,13 @@
 
 .commit,
 .generic_commit_status {
-  padding: 10px 0;
-  position: relative;
-
-  @media (min-width: $screen-sm-min) {
-    padding-left: 46px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $gray-darker;
-  }
 
   a,
   button {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
     vertical-align: baseline;
   }
 
-  .avatar {
-    margin-left: -46px;
-  }
-
-  .item-title {
-    display: inline-block;
-
-    @media (min-width: $screen-sm-min) {
-      max-width: 70%;
-    }
-  }
-
   .commit-row-description {
     font-size: 14px;
     border-left: 1px solid $white-normal;
@@ -134,20 +176,7 @@
     }
 
     a {
-      color: $gl-dark-link-color;
-    }
-  }
-
-  .commit-row-info {
-    color: $gl-gray;
-    line-height: 1.35;
-
-    a {
-      color: $gl-gray;
-    }
-
-    .avatar {
-      margin-right: 8px;
+      color: $gl-text-color;
     }
   }
 
@@ -164,7 +193,7 @@
 }
 
 .branch-commit {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   .commit-icon {
     text-align: center;
@@ -174,7 +203,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $gl-gray-light;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -183,62 +212,6 @@
   }
 
   .commit-row-message {
-    color: $gl-gray;
-  }
-}
-
-.divergence-graph {
-  padding: 12px 12px 0 0;
-  float: right;
-
-  .graph-side {
-    position: relative;
-    width: 80px;
-    height: 22px;
-    padding: 5px 0 13px;
-    float: left;
-
-    .bar {
-      position: absolute;
-      height: 4px;
-      background-color: $divergence-graph-bar-bg;
-    }
-
-    .bar-behind {
-      right: 0;
-      border-radius: 3px 0 0 3px;
-    }
-
-    .bar-ahead {
-      left: 0;
-      border-radius: 0 3px 3px 0;
-    }
-
-    .count {
-      padding-top: 6px;
-      padding-bottom: 0;
-      font-size: 12px;
-      color: $gl-title-color;
-      display: block;
-    }
-
-    .count-behind {
-      padding-right: 4px;
-      text-align: right;
-    }
-
-    .count-ahead {
-      padding-left: 4px;
-      text-align: left;
-    }
-  }
-
-  .graph-separator {
-    position: relative;
-    width: 1px;
-    height: 18px;
-    margin: 5px 0 0;
-    float: left;
-    background-color: $divergence-graph-separator-bg;
+    color: $gl-text-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 9ce261eafef..cda069e6c0e 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -20,6 +20,10 @@
 
     .fa {
       color: $cycle-analytics-light-gray;
+
+      &:hover {
+        color: $gl-text-color;
+      }
     }
 
     .stage-header {
@@ -111,14 +115,14 @@
           line-height: 19px;
           font-size: 14px;
           font-weight: 600;
-          color: $gl-title-color;
+          color: $gl-text-color;
         }
 
         &.text {
           color: $layout-link-gray;
 
           &.value-col {
-            color: $gl-title-color;
+            color: $gl-text-color;
           }
         }
       }
@@ -260,7 +264,7 @@
 
       .stage-empty,
       .not-available {
-        color: $gl-text-color-light;
+        color: $gl-text-color-secondary;
       }
     }
   }
@@ -327,7 +331,7 @@
         @include text-overflow();
 
         a {
-          color: $gl-dark-link-color;
+          color: $gl-text-color;
         }
       }
     }
@@ -355,7 +359,7 @@
     .issue-link,
     .commit-author-link,
     .issue-author-link {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     // Custom CSS for components
@@ -396,11 +400,11 @@
       }
 
       .item-build-name {
-        color: $gl-title-color;
+        color: $gl-text-color;
       }
 
       .pipeline-id {
-        color: $gl-title-color;
+        color: $gl-text-color;
         padding: 0 3px 0 0;
       }
 
@@ -423,7 +427,7 @@
       }
 
       .fa {
-        color: $gl-text-color-light;
+        color: $gl-text-color-secondary;
         font-size: $code_font_size;
       }
     }
@@ -435,7 +439,7 @@
     width: 75%;
     margin: 0 auto;
     padding-top: 130px;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
 
     h4 {
       color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 9b28df1afc5..46fd19c93f9 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -1,15 +1,15 @@
 .detail-page-header {
   padding: $gl-padding-top 0;
   border-bottom: 1px solid $border-color;
-  color: $gl-text-color-dark;
+  color: $gl-text-color;
   line-height: 34px;
 
   .author {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .identifier {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .issue_created_ago,
@@ -22,7 +22,7 @@
   .title {
     margin: 0 0 16px;
     font-size: 2em;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index f30795fd2c2..96ba7c40634 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -14,7 +14,7 @@
     background: $gray-light;
     border-bottom: 1px solid $border-color;
     padding: 10px 16px;
-    color: $gl-diff-text-color;
+    color: $gl-text-color;
     z-index: 10;
     border-radius: 3px 3px 0 0;
 
@@ -50,7 +50,7 @@
     overflow: auto;
     overflow-y: hidden;
     background: $white-light;
-    color: $gl-title-color;
+    color: $gl-text-color;
     border-radius: 0 0 3px 3px;
 
     .unfold {
@@ -380,7 +380,7 @@
         }
 
         cursor: default;
-        color: $gl-title-color;
+        color: $gl-text-color;
       }
 
       &.disabled {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 5517dc5dcbd..778ef01430e 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -72,25 +72,25 @@
 
   .external-url,
   .dropdown-new {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .dropdown-menu {
 
     .fa {
       margin-right: 6px;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
   }
 
   .build-link,
   .branch-name {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .stop-env-link,
   .external-url {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     .stop-env-icon {
       font-size: 14px;
@@ -101,7 +101,7 @@
     .build-column {
 
       .build-link {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       .avatar {
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 98925c2d0cb..b989d72ce1c 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .avatar {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 16bff5f1e03..d377526e655 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -13,7 +13,7 @@
   .stats {
     float: right;
     line-height: $list-text-height;
-    color: $gl-gray;
+    color: $gl-text-color;
 
     span {
       margin-right: 15px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6b4d1f85564..4ef95d27f4f 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,3 +1,48 @@
+// Limit MR description for side-by-side diff view
+.fixed-width-container {
+  max-width: $limited-layout-width - ($gl-padding * 2);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.limit-container-width {
+  .detail-page-header {
+    @extend .fixed-width-container;
+  }
+
+  .issuable-details {
+    .detail-page-description,
+    .mr-source-target,
+    .mr-state-widget,
+    .merge-manually {
+      @extend .fixed-width-container;
+    }
+
+    .merge-request-tabs-holder {
+      &.affix {
+        border-bottom: 1px solid $border-color;
+
+        .nav-links {
+          border: 0;
+        }
+      }
+    }
+  }
+
+  .merge-request-details {
+    .emoji-list-container {
+      @extend .fixed-width-container;
+    }
+  }
+
+  .diffs {
+    .mr-version-controls,
+    .files-changed {
+      @extend .fixed-width-container;
+    }
+  }
+}
+
 .issuable-details {
   section {
     .issuable-discussion {
@@ -5,6 +50,12 @@
     }
   }
 
+  .title {
+    padding: 0;
+    margin: 0;
+    border-bottom: none;
+  }
+
   // Border around images in issue and MR descriptions.
   .description img:not(.emoji) {
     border: 1px solid $white-normal;
@@ -97,10 +148,10 @@
     }
 
     .edit-link {
-      color: $gl-gray;
+      color: $gl-text-color;
 
-      &:hover {
-        color: $md-link-color;
+      &:not([href]):hover {
+        color: rgba($avatar-border, .2);
       }
     }
   }
@@ -133,7 +184,7 @@
   }
 
   .btn-clipboard:hover {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
@@ -168,7 +219,7 @@
     }
 
     .no-value {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
 
     .sidebar-collapsed-icon {
@@ -236,7 +287,7 @@
       color: $issuable-sidebar-color;
 
       &:hover {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
 
       span {
@@ -249,16 +300,16 @@
       }
 
       .avatar:hover {
-        border-color: $issuable-avatar-hover-border;
+        border-color: $issuable-sidebar-color;
       }
 
       .btn-clipboard {
         border: none;
-        color: $issuable-clipboard-color;
+        color: $issuable-sidebar-color;
 
         &:hover {
           background: transparent;
-          color: $gl-gray;
+          color: $gl-text-color;
         }
       }
     }
@@ -277,6 +328,10 @@
     &:hover {
       color: $md-link-color;
       text-decoration: none;
+
+      .avatar {
+        border-color: rgba($avatar-border, .2);
+      }
     }
   }
 
@@ -318,6 +373,10 @@
   display: inline-block;
   padding: 5px;
 
+  &:nth-of-type(7n) {
+    padding-right: 0;
+  }
+
   .author_link {
     display: block;
   }
@@ -332,7 +391,7 @@
   margin-left: 5px;
 
   a {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -414,3 +473,102 @@
     }
   }
 }
+
+.time_tracker {
+  padding-bottom: 0;
+  border-bottom: 0;
+
+
+  .sidebar-collapsed-icon {
+
+    > .stopwatch-svg {
+      display: inline-block;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: $sidebar-collapsed-icon-color;
+    }
+
+    &:hover svg {
+      fill: $gl-text-color;
+    }
+  }
+
+  .help-button,
+  .close-help-button {
+    cursor: pointer;
+  }
+
+  .compare-meter {
+    &.within_estimate {
+      .meter-fill {
+        background: $gl-primary;
+      }
+    }
+
+    &.over_estimate {
+      .meter-fill {
+        background: $red-light;
+      }
+
+      .time-remaining,
+      .compare-value.spent {
+        color: $red-light;
+      }
+    }
+  }
+
+  .meter-container {
+    background: $border-gray-light;
+    border-radius: 3px;
+
+    .meter-fill {
+      max-width: 100%;
+      height: 5px;
+      border-radius: 3px;
+      background: $gl-primary;
+    }
+  }
+
+  .compare-display-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+
+    .compare-display {
+      font-size: 13px;
+      color: $compare-display-color;
+
+      .compare-value {
+        color: $gl-text-color;
+      }
+    }
+  }
+
+  .time-tracking-help-state {
+    background: $white-light;
+    margin: 16px -20px 0;
+    padding: 16px 20px;
+    border-top: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-light;
+
+    a:hover {
+      color: $btn-white-active;
+    }
+  }
+
+  .help-state-toggle-enter-active {
+    transition: all .8s ease;
+  }
+
+  .help-state-toggle-leave-active {
+    transition: all .5s ease;
+  }
+
+  .help-state-toggle-enter,
+  .help-state-toggle-leave-active {
+    opacity: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index d129eb12a45..21d9b4c54ea 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -117,7 +117,7 @@
 
 .manage-labels-list {
   .btn-action {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
 
     .fa {
       font-size: 18px;
@@ -203,6 +203,10 @@
     z-index: 3;
     border-radius: $label-border-radius;
     padding: 6px 10px 6px 9px;
+
+    &:hover {
+      box-shadow: inset 0 0 0 80px $label-remove-border;
+    }
   }
 
   .btn {
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
index a7c80dce424..68b6c5ecbd4 100644
--- a/app/assets/stylesheets/pages/lint.scss
+++ b/app/assets/stylesheets/pages/lint.scss
@@ -9,3 +9,13 @@
     color: $lint-correct-color;
   }
 }
+
+.ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
+  }
+}
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 712bd3da22f..71ed5b1361a 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -17,14 +17,19 @@
     line-height: 1.5;
 
     p {
-      font-size: 18px;
+      font-size: 16px;
       color: $login-brand-holder-color;
     }
 
     h1:first-child {
       font-weight: normal;
-      margin-bottom: 30px;
+      margin-bottom: 0.68em;
       margin-top: 0;
+      font-size: 34px;
+    }
+
+    h3 {
+      font-size: 22px;
     }
 
     img {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 36ee5d17211..be7193bae04 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -25,7 +25,7 @@
   }
 
   .form-horizontal {
-    margin-top: 5px;
+    margin-top: 20px;
 
     @media (min-width: $screen-sm-min) {
       display: -webkit-flex;
@@ -98,6 +98,10 @@
     padding-right: 35px;
 
     @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
+
+    @media (min-width: $screen-md-min) {
       width: 350px;
     }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 1b1126695a1..ab68b360f93 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -4,7 +4,7 @@
  */
 .mr-state-widget {
   background: $gray-light;
-  color: $gl-gray;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
 
@@ -58,7 +58,7 @@
         padding-right: 0;
 
         a {
-          color: $gl-gray;
+          color: $gl-text-color;
         }
       }
 
@@ -70,7 +70,7 @@
 
   .ci_widget {
     border-bottom: 1px solid $well-inner-border;
-    color: $gl-gray;
+    color: $gl-text-color;
 
     svg {
       margin-right: 4px;
@@ -94,7 +94,7 @@
   }
 
   .normal {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .js-deployment-link {
@@ -106,7 +106,7 @@
       font-weight: 600;
       font-size: 16px;
       margin: 5px 0;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
 
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
@@ -190,7 +190,7 @@
 }
 
 .label-branch {
-  color: $gl-gray-dark;
+  color: $gl-text-color;
   font-family: $monospace_font;
   font-weight: bold;
   overflow: hidden;
@@ -310,10 +310,6 @@
       left: 0;
       top: 2px;
     }
-
-    .commit-row-info {
-      line-height: 20px;
-    }
   }
 
   .btn-clipboard {
@@ -367,7 +363,7 @@
 
     th {
       background-color: $white-light;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
   }
 }
@@ -424,10 +420,6 @@
 .merge-request-tabs-holder {
   background-color: $white-light;
 
-  .container-limited {
-    max-width: $limited-layout-width;
-  }
-
   &.affix {
     top: 100px;
     left: 0;
@@ -437,10 +429,26 @@
     @media (max-width: $screen-xs-max) {
       right: 0;
     }
+
+    .merge-request-tabs-container {
+      padding-left: $gl-padding;
+      padding-right: $gl-padding;
+    }
   }
+}
 
-  &:not(.affix) .container-fluid {
-    padding-left: 0;
-    padding-right: 0;
+.limit-container-width {
+  .merge-request-tabs-container {
+    max-width: $limited-layout-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.limit-container-width:not(.container-limited) {
+  .merge-request-tabs-holder:not(.affix) {
+    .merge-request-tabs-container {
+      max-width: $limited-layout-width - ($gl-padding * 2);
+    }
   }
 }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index f47ae9c6157..686b64cdd24 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -102,13 +102,17 @@
     margin-top: 7px;
 
     .issuable-number {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
       margin-right: 5px;
     }
 
     .avatar {
       float: none;
     }
+
+    > a:not(:last-of-type) {
+      margin-right: 5px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index e54e12be82f..f984b469609 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -27,6 +27,7 @@
 .new-note,
 .note-edit-form {
   .note-form-actions {
+    position: relative;
     margin-top: $gl-padding;
   }
 
@@ -44,7 +45,7 @@
 .note-textarea {
   display: block;
   padding: 10px 0;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-family: $regular_font;
   border: 0;
 
@@ -204,7 +205,7 @@
 
 .comment-toolbar {
   padding-top: $gl-padding-top;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }
 
@@ -265,3 +266,18 @@
     }
   }
 }
+
+.note-edit-warning.settings-message {
+  display: none;
+  padding: 5px 10px;
+  position: absolute;
+  left: 127px;
+  top: 2px;
+
+  @media (max-width: $screen-xs-max) {
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 8f15775ee03..da0caa30c26 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -43,7 +43,7 @@ ul.notes {
     }
 
     .system-note-message {
-      display: inline-block;
+      display: inline;
 
       &::first-letter {
         text-transform: lowercase;
@@ -55,7 +55,7 @@ ul.notes {
       }
 
       p {
-        display: inline-block;
+        display: inline;
         margin: 0;
 
         &::first-letter {
@@ -195,10 +195,10 @@ ul.notes {
     }
 
     .note-body {
-      overflow: auto;
+      overflow-x: auto;
+      overflow-y: hidden;
 
       .note-text {
-        overflow: auto;
         word-wrap: break-word;
         @include md-typography;
         // Reset ul style types since we're nested inside a ul already
@@ -345,7 +345,7 @@ ul.notes {
   }
 
   .author_link {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
@@ -353,6 +353,14 @@ ul.notes {
   font-size: 14px;
 }
 
+.note-headline-light {
+  display: inline;
+
+  @media (max-width: $screen-xs-min) {
+    display: block;
+  }
+}
+
 .note-headline-light,
 .discussion-headline-light {
   color: $notes-light-color;
@@ -507,7 +515,6 @@ ul.notes {
 
 .line-resolve-all-container {
   .btn-group {
-    margin-top: -1px;
     margin-left: -4px;
   }
 
@@ -518,8 +525,9 @@ ul.notes {
 }
 
 .line-resolve-all {
+  vertical-align: middle;
   display: inline-block;
-  padding: 5px 10px;
+  padding: 6px 10px;
   background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
@@ -527,18 +535,14 @@ ul.notes {
   &.has-next-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    border-right: 0;
   }
 
   .line-resolve-btn {
-    vertical-align: middle;
     margin-right: 5px;
   }
 }
 
-.line-resolve-text {
-  vertical-align: middle;
-}
-
 .line-resolve-btn {
   display: inline-block;
   position: relative;
@@ -580,13 +584,11 @@ ul.notes {
 
 // Merge request notes in diffs
 .diff-file {
-
   // Diff is side by side
   .notes_content.parallel .note-header .note-headline-light {
     display: block;
     position: relative;
   }
-
   // Diff is inline
   .notes_content .note-header .note-headline-light {
     display: inline-block;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index c370b6247b0..47dfc22d533 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,9 @@
 .pipelines {
+  .realtime-loading {
+    font-size: 40px;
+    text-align: center;
+  }
+
   .stage {
     max-width: 90px;
     width: 90px;
@@ -24,6 +29,10 @@
     min-width: 1200px;
     table-layout: fixed;
 
+    .label {
+      margin-bottom: 3px;
+    }
+
     .pipeline-id {
       color: $black;
     }
@@ -35,8 +44,8 @@
 
     .pipeline-info,
     .pipeline-commit,
-    .pipeline-actions,
-    .pipeline-stages {
+    .pipeline-stages,
+    .pipeline-actions {
       width: 20%;
     }
   }
@@ -131,7 +140,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $gl-gray-light;
+      fill: $gl-text-color-secondary;
     }
 
     .fa {
@@ -176,13 +185,16 @@
 
   .stage-cell {
     font-size: 0;
+    padding: 10px 4px;
 
-    svg {
-      height: 18px;
-      width: 18px;
-      position: relative;
+    > .stage-container > div > button > span > svg,
+    > .stage-container > button > svg {
+      height: 22px;
+      width: 22px;
+      position: absolute;
+      top: -1px;
+      left: -1px;
       z-index: 2;
-      vertical-align: middle;
       overflow: visible;
     }
 
@@ -195,10 +207,14 @@
         white-space: nowrap;
       }
 
+      .tooltip-inner {
+        padding: 3px 4px;
+      }
+
       &:not(:last-child) {
         &::after {
           content: '';
-          width: 8px;
+          width: 7px;
           position: absolute;
           right: -7px;
           top: 10px;
@@ -210,7 +226,7 @@
 
   .duration,
   .finished-at {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
     margin: 4px 0;
 
     .fa {
@@ -231,7 +247,7 @@
 
     .btn {
       margin: 0;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
 
     .cancel-retry-btns {
@@ -244,10 +260,10 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
 
       .fa {
-        color: $gl-gray-light;
+        color: $gl-text-color-secondary;
         font-size: 14px;
       }
 
@@ -276,12 +292,16 @@
         }
       }
     }
+
+    .tooltip {
+      white-space: nowrap;
+    }
   }
 
   .build-link {
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
   }
 
@@ -337,14 +357,16 @@
   padding: $gl-padding;
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
+  overflow: auto;
 
-  ul {
+  .stage-column-list,
+  .builds-container > ul {
     padding: 0;
   }
 
   a {
     text-decoration: none;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
   }
 
   svg {
@@ -468,13 +490,54 @@
     width: 186px;
     margin-bottom: 10px;
     white-space: normal;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
+
+    // Action Icons in big pipeline-graph nodes
+    > .ci-action-icon-container .ci-action-icon-wrapper {
+      i {
+        color: $border-color;
+        border-radius: 100%;
+        border: 1px solid $border-color;
+        padding: 5px 6px;
+        font-size: 13px;
+        background: $white-light;
+        height: 30px;
+        width: 30px;
+
+        &::before {
+          position: relative;
+          top: 3px;
+          left: 3px;
+        }
+
+        &:hover {
+          color: $gl-text-color;
+          background-color: $stage-hover-bg;
+          border: 1px solid $stage-hover-bg;
+        }
+      }
+
+      .ci-play-icon {
+        padding: 5px 5px 5px 7px;
+      }
+    }
+
+    > .ci-action-icon-container {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
+
+    .ci-status-icon svg {
+      height: 20px;
+      width: 20px;
+    }
 
     .dropdown-menu-toggle {
       background-color: transparent;
       border: none;
       padding: 0;
-      color: $gl-text-color-light;
+      color: $gl-text-color-secondary;
 
       &:focus {
         outline: none;
@@ -504,16 +567,6 @@
       }
     }
 
-    > .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    }
-
-    .ci-status-icon svg {
-      height: 20px;
-      width: 20px;
-    }
 
     .arrow {
       &::before,
@@ -596,29 +649,9 @@
       }
     }
   }
-
-  .grouped-pipeline-dropdown {
-    .dropdown-build {
-      .build-content {
-        width: 100%;
-
-        &:hover {
-          background-color: $stage-hover-bg;
-          color: $gl-text-color;
-        }
-      }
-
-      .ci-action-icon-container {
-        padding: 0;
-        font-size: 11px;
-        position: absolute;
-        top: 1px;
-        right: 8px;
-      }
-    }
-  }
 }
 
+// Triggers the dropdown in the big pipeline graph
 .dropdown-counter-badge {
   color: $border-color;
   font-weight: 100;
@@ -628,66 +661,6 @@
   top: 8px;
 }
 
-.grouped-pipeline-dropdown {
-  padding: 0;
-  width: 191px;
-  min-width: 191px;
-  left: auto;
-  right: -195px;
-  top: -4px;
-  box-shadow: 0 1px 5px $black-transparent;
-
-  a {
-    display: inline-block;
-  }
-
-  .dropdown-build {
-    .build-content {
-      width: 100%;
-
-      &:hover {
-        background-color: $stage-hover-bg;
-        color: $gl-text-color;
-      }
-    }
-
-    .ci-action-icon-container {
-      padding: 0;
-      font-size: 11px;
-      position: absolute;
-      margin-top: 3px;
-      right: 7px;
-    }
-  }
-
-  ul {
-    max-height: 245px;
-    overflow: auto;
-    margin: 3px 0;
-
-    li {
-      margin: 4px 8px 4px 9px;
-      padding: 0;
-      line-height: 1.1;
-      position: relative;
-
-      .ci-action-icon-container:hover {
-        background-color: transparent;
-      }
-
-      .ci-status-icon {
-        position: relative;
-        top: 2px;
-      }
-    }
-  }
-}
-
-.pipeline-graph .dropdown-build .ci-status-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
 .ci-status-text {
   max-width: 110px;
   white-space: nowrap;
@@ -699,177 +672,233 @@
   font-weight: 200;
 }
 
-// Action Icons
-.ci-action-icon-container .ci-action-icon-wrapper {
-  i {
-    color: $border-color;
-    border-radius: 100%;
-    border: 1px solid $border-color;
-    padding: 5px 6px;
-    font-size: 13px;
-    background: $white-light;
-    height: 30px;
-    width: 30px;
+// Dropdown button in mini pipeline graph
+.mini-pipeline-graph-dropdown-toggle {
+  border-radius: 100px;
+  background-color: $white-light;
+  border-width: 1px;
+  border-style: solid;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  transition: all 0.2s linear;
+  position: relative;
 
-    &::before {
-      position: relative;
-      top: 3px;
-      left: 3px;
-    }
+  > .fa.fa-caret-down {
+    position: absolute;
+    left: 20px;
+    top: 5px;
+    display: inline-block;
+    visibility: hidden;
+    opacity: 0;
+    color: inherit;
+    font-size: 12px;
+    transition: visibility 0.1s, opacity 0.1s linear;
+  }
 
-    &:hover {
-      color: $gl-text-color;
-      background-color: $stage-hover-bg;
-      border: 1px solid $stage-hover-bg;
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    width: 35px;
+
+    .fa.fa-caret-down {
+      visibility: visible;
+      opacity: 1;
     }
   }
 
-  .ci-play-icon {
-    padding: 5px 5px 5px 7px;
+  // Dropdown button animation in mini pipeline graph
+  &.ci-status-icon-success {
+    border-color: $gl-success;
+    color: $gl-success;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-success, 0.1);
+      border-color: $gl-success;
+    }
   }
-}
 
-.dropdown-build {
-  color: $gl-text-color-light;
+  &.ci-status-icon-failed {
+    border-color: $gl-danger;
+    color: $gl-danger;
 
-  .build-content {
-    padding: 4px 7px 8px;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-danger, 0.1);
+      border-color: $gl-danger;
+    }
   }
 
-  .ci-action-icon-container {
-    padding: 0;
-    font-size: 11px;
-    float: right;
-    margin-top: 3px;
-    display: inline-block;
-    position: relative;
+  &.ci-status-icon-pending,
+  &.ci-status-icon-success_with_warnings {
+    border-color: $gl-warning;
+    color: $gl-warning;
 
-    i {
-      font-size: 11px;
-      margin-top: 0;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-warning, 0.1);
+      border-color: $gl-warning;
     }
   }
 
-  .ci-action-icon-container {
-    i {
-      width: 24px;
-      height: 24px;
+  &.ci-status-icon-running {
+    border-color: $blue-normal;
+    color: $blue-normal;
 
-      &::before {
-        top: 1px;
-        left: 1px;
-      }
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($blue-normal, 0.1);
+      border-color: $blue-normal;
     }
   }
 
-  .stage {
-    max-width: 100px;
-    width: 100px;
-  }
+  &.ci-status-icon-canceled,
+  &.ci-status-icon-disabled,
+  &.ci-status-icon-not-found,
+  &.ci-status-icon-manual {
+    border-color: $gl-text-color;
+    color: $gl-text-color;
 
-  .ci-status-icon svg {
-    height: 18px;
-    width: 18px;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-text-color, 0.1);
+      border-color: $gl-text-color;
+    }
   }
 
-  .ci-status-text {
-    max-width: 95px;
+  &.ci-status-icon-created,
+  &.ci-status-icon-skipped {
+    border-color: $gray-darkest;
+    color: $gray-darkest;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gray-darkest, 0.1);
+      border-color: $gray-darkest;
+    }
   }
 }
 
-/**
- * Builds dropdown in mini pipeline
- */
-.mini-pipeline-graph {
-  .builds-dropdown {
-    background-color: transparent;
-    padding: 0;
-    color: $gl-text-color-light;
-    border: none;
-    margin: 0;
-
-    &:focus,
-    &:hover {
-      outline: none;
-      margin-right: -8px;
+// dropdown content for big and mini pipeline
+.big-pipeline-graph-dropdown-menu,
+.mini-pipeline-graph-dropdown-menu {
+  width: 195px;
+  max-width: 195px;
 
-      .ci-status-icon {
-        width: 32px;
-        padding: 0 8px 0 0;
-        transition: width 0.1s cubic-bezier(0.25, 0, 1, 1);
+  li {
+    padding: 2px 3px;
+  }
 
-        + .dropdown-caret {
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-    }
+  .scrollable-menu {
+    max-height: 245px;
+    overflow: auto;
+  }
 
-    &:focus,
-    &:active {
-      .ci-status-icon-success {
-        background-color: rgba($gl-success, .1);
-      }
+  // Loading icon
+  .builds-dropdown-loading {
+    margin: 0 auto;
+    width: 20px;
+  }
+
+  // Action icon on the right
+  a.ci-action-icon-wrapper {
+    color: $action-icon-color;
+    border: 1px solid $action-icon-color;
+    border-radius: 20px;
+    width: 22px;
+    height: 22px;
+    padding: 2px 0 0 5px;
+    cursor: pointer;
+    float: right;
+    margin: -26px 9px 0 0;
+    font-size: 12px;
+    background-color: $white-light;
 
-      .ci-status-icon-failed {
-        background-color: rgba($gl-danger, .1);
-      }
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
+      border: 1px solid transparent;
+    }
+  }
 
-      .ci-status-icon-pending,
-      .ci-status-icon-success_with_warnings {
-        background-color: rgba($gl-warning, .1);
-      }
+  // link to the build
+  .mini-pipeline-graph-dropdown-item {
+    padding: 3px 7px 4px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+    white-space: nowrap;
+    margin: 0 5px;
+    border-radius: 3px;
 
-      .ci-status-icon-running {
-        background-color: rgba($blue-normal, .1);
-      }
+    // build name
+    .ci-build-text {
+      font-weight: 200;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 90px;
+      color: $gl-text-color-secondary;
+      margin-left: 2px;
+      display: inline-block;
+      top: 1px;
+      vertical-align: text-bottom;
+      position: relative;
+    }
 
-      .ci-status-icon-canceled,
-      .ci-status-icon-disabled,
-      .ci-status-icon-not-found {
-        background-color: rgba($gl-gray, .1);
-      }
+    // status icon on the left
+    .ci-status-icon {
+      top: 3px;
+      position: relative;
 
-      .ci-status-icon-created,
-      .ci-status-icon-skipped {
-        background-color: rgba($gray-darkest, .1);
+      > svg {
+        overflow: visible;
+        width: 18px;
+        height: 18px;
       }
     }
 
-    .mini-pipeline-graph-icon-container {
-      .dropdown-caret {
-        font-size: 11px;
-        position: absolute;
-        top: 6px;
-        left: 20px;
-        margin-right: -6px;
-        z-index: 2;
-        visibility: hidden;
-        opacity: 0;
-        transition: visibility 0.1s, opacity 0.1s linear;
-      }
+    &:hover,
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
     }
   }
+}
 
-  .dropdown-build .build-content {
-    padding: 3px 7px 7px;
-  }
-
-  .builds-dropdown-loading {
-    margin: 10px auto;
-    width: 18px;
-  }
-
-  .grouped-pipeline-dropdown {
-    right: -172px;
-    top: 23px;
-    min-height: 50px;
+// Dropdown in the big pipeline graph
+.big-pipeline-graph-dropdown-menu {
+  width: 195px;
+  min-width: 195px;
+  left: auto;
+  right: -195px;
+  top: -4px;
+  box-shadow: 0 1px 5px $black-transparent;
 
-    a {
-      color: $gl-text-color-light;
+  .mini-pipeline-graph-dropdown-item {
+    .ci-status-icon {
+      top: -1px;
     }
   }
+}
 
+/**
+ * Top arrow in the dropdown in the mini pipeline graph
+ */
+.mini-pipeline-graph-dropdown-menu {
   .arrow-up {
     &::before,
     &::after {
@@ -898,31 +927,8 @@
 }
 
 /**
- * Icons in mini pipeline graph
+ * Terminal
  */
-.mini-pipeline-graph-icon-container .ci-status-icon {
-  display: inline-block;
-  border: 1px solid;
-  border-radius: 22px;
-  margin-right: 1px;
-  width: 22px;
-  height: 22px;
-  position: relative;
-  z-index: 2;
-  transition: all 0.1s cubic-bezier(0.25, 0, 1, 1);
-
-  svg {
-    top: -1px;
-    left: -1px;
-  }
-}
-
-.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg {
-  width: 22px;
-  height: 22px;
-}
-
-
 .terminal-icon {
   margin-left: 3px;
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8b1976bd925..722b3006f7c 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -216,8 +216,8 @@
   }
 }
 
-.user-profile {
 
+.user-profile {
   .cover-controls a {
     margin-left: 5px;
   }
@@ -231,8 +231,11 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  .user-profile-nav {
+    font-size: 0;
+  }
 
+  @media (max-width: $screen-xs-max) {
     .cover-block {
       padding-top: 20px;
     }
@@ -253,6 +256,12 @@
         }
       }
     }
+
+    .user-profile-nav {
+      a {
+        margin-right: 0;
+      }
+    }
   }
 }
 
@@ -271,4 +280,4 @@ table.u2f-registrations {
   .scopes-list {
     padding-left: 18px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index b99be02ab0c..8b59c20cb65 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -9,24 +9,24 @@
 .new_project,
 .edit-project {
 
-  fieldset {
-
-    &.features {
+  .sharing-and-permissions {
+    .header {
+      padding-top: $gl-vert-padding;
+    }
 
-      .label-light {
-        margin-bottom: 0;
-      }
+    .label-light {
+      margin-bottom: 0;
+    }
 
-      .help-block {
-        margin-top: 0;
-      }
+    .help-block {
+      margin-top: 0;
     }
 
     .form-group {
       margin-bottom: 5px;
     }
 
-    &> .form-group {
+    & > .form-group {
       padding-left: 0;
     }
   }
@@ -73,7 +73,7 @@
       border: 1px solid $border-color;
     }
 
-    &+ .select2 a {
+    & + .select2 a {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -292,7 +292,7 @@
     .option-title {
       font-weight: normal;
       display: inline-block;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
     }
 
     .option-descr {
@@ -331,7 +331,7 @@
 a.deploy-project-label {
   padding: 5px;
   margin-right: 5px;
-  color: $gl-gray;
+  color: $gl-text-color;
   background-color: $row-hover;
 
   &:hover {
@@ -372,7 +372,7 @@ a.deploy-project-label {
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .dropdown-menu {
@@ -426,7 +426,7 @@ a.deploy-project-label {
         width: 100%;
         height: 100%;
         padding-top: $gl-padding;
-        color: $gl-gray;
+        color: $gl-text-color;
 
         .caption {
           min-height: 30px;
@@ -523,7 +523,7 @@ a.deploy-project-label {
 
     &:hover,
     &:focus {
-      color: darken($notes-light-color, 15%);
+      color: $gl-text-color;
     }
   }
 
@@ -552,7 +552,7 @@ pre.light-well {
   margin: 0 7px 7px;
 
   h5 {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .light-well {
@@ -587,11 +587,21 @@ pre.light-well {
 
     .project-full-name {
       @include str-truncated;
+
+      @media (max-width: $screen-xs-max) {
+        max-width: 50%;
+      }
     }
 
     .controls {
       line-height: $list-text-height;
 
+      .badge {
+        @media (max-width: $screen-xs-max) {
+          display: none;
+        }
+      }
+
       a:hover {
         text-decoration: none;
       }
@@ -605,6 +615,12 @@ pre.light-well {
         top: 2px;
       }
     }
+
+    .description p {
+      @media (max-width: $screen-xs-max) {
+        max-width: 50%;
+      }
+    }
   }
 
   .bottom {
@@ -618,7 +634,6 @@ pre.light-well {
   margin: 0;
 }
 
-
 .activity-filter-block {
   .controls {
     padding-bottom: 7px;
@@ -663,7 +678,7 @@ pre.light-well {
   }
 
   .commit-row-message {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 
   .commit_short_id {
@@ -751,7 +766,7 @@ pre.light-well {
 
 .protected-branches-list {
   a {
-    color: $gl-gray;
+    color: $gl-text-color;
 
     &:hover {
       color: $gl-link-color;
@@ -811,7 +826,31 @@ pre.light-well {
 
 .compare-form-group {
   .dropdown-menu {
-    width: 300px;
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 300px;
+    }
+  }
+
+  + .compare-ellipsis {
+    width: 100%;
+    vertical-align: middle;
+    text-align: center;
+    margin-top: -20px;
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: auto;
+    }
+  }
+
+  .inline-input-group {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
   }
 }
 
@@ -866,10 +905,18 @@ pre.light-well {
   }
 }
 
-.project-feature-nested {
+.project-feature {
+  padding-top: 10px;
+
   @media (min-width: $screen-sm-min) {
     padding-left: 45px;
   }
+
+  &.nested {
+    @media (min-width: $screen-sm-min) {
+      padding-left: 90px;
+    }
+  }
 }
 
 .project-repo-select {
@@ -882,8 +929,32 @@ pre.light-well {
 .variables-table {
   table-layout: fixed;
 
+  &.table-responsive {
+    border: none;
+  }
+
   .variable-key {
-    width: 30%;
+    width: 300px;
+    max-width: 300px;
+    overflow: hidden;
+    word-wrap: break-word;
+
+    // override bootstrap
+    white-space: normal!important;
+
+    @media (max-width: $screen-sm-max) {
+      width: 150px;
+      max-width: 150px;
+    }
+  }
+
+  .variable-value {
+    @media(max-width: $screen-xs-max) {
+      width: 150px;
+      max-width: 150px;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index cedd4cb2987..88ea92c5afb 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -14,6 +14,19 @@
   }
 }
 
+.search form:hover,
+.file-finder-input:hover,
+.issuable-search-form:hover,
+.search-text-input:hover,
+.form-control:hover {
+  border-color: lighten($dropdown-input-focus-border, 20%);
+  box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+}
+
+input[type="checkbox"]:hover {
+  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
+}
+
 .search {
   margin-right: 10px;
   margin-left: 10px;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index ddee2c95247..a28a87ed4f8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,5 +1,5 @@
 .settings-list-icon {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   font-size: $settings-icon-size;
   line-height: 42px;
 }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4acd17360c1..6f31d4ed789 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -19,7 +19,8 @@
       overflow: visible;
     }
 
-    &.ci-failed {
+    &.ci-failed,
+    &.ci-failed_with_warnings {
       color: $gl-danger;
       border-color: $gl-danger;
 
@@ -61,15 +62,15 @@
 
     &.ci-canceled,
     &.ci-disabled {
-      color: $gl-gray;
-      border-color: $gl-gray;
+      color: $gl-text-color;
+      border-color: $gl-text-color;
 
       &:not(span):hover {
-        background-color: rgba($gl-gray, .07);
+        background-color: rgba($gl-text-color, .07);
       }
 
       svg {
-        fill: $gl-gray;
+        fill: $gl-text-color;
       }
     }
 
@@ -101,15 +102,15 @@
 
     &.ci-created,
     &.ci-skipped {
-      color: $gl-gray-light;
-      border-color: $gl-gray-light;
+      color: $gl-text-color-secondary;
+      border-color: $gl-text-color-secondary;
 
       &:not(span):hover {
-        background-color: rgba($gl-gray-light, .07);
+        background-color: rgba($gl-text-color-secondary, .07);
       }
 
       svg {
-        fill: $gl-gray-light;
+        fill: $gl-text-color-secondary;
       }
     }
 
@@ -135,3 +136,9 @@
     left: 5px;
   }
 }
+
+.ci-status-link {
+  svg {
+    overflow: visible;
+  }
+}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 508b30f3947..01675acc62e 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -90,7 +90,7 @@
         }
 
         p {
-          color: $gl-text-color-dark;
+          color: $gl-text-color;
         }
       }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index cad4e149845..948921efc0b 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -32,6 +32,10 @@
       .last-commit {
         @include str-truncated(506px);
 
+        .fa-angle-right {
+          margin-left: 5px;
+        }
+
         @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
           @include str-truncated(450px);
         }
@@ -78,7 +82,7 @@
 
       i,
       a {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       img {
@@ -104,21 +108,21 @@
     padding-right: 8px;
 
     .commit-author-name {
-      color: $gl-gray;
+      color: $gl-text-color;
     }
   }
 
   .tree-time-ago {
     min-width: 135px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .tree-commit {
     max-width: 320px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     .tree-commit-link {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
 
       &:hover {
         text-decoration: underline;
@@ -134,21 +138,18 @@
 
 .blob-commit-info {
   list-style: none;
-  padding: $gl-padding;
   background: $gray-light;
+  padding: 6px 0;
   border: 1px solid $border-color;
   border-bottom: none;
   margin: 0;
 
-  .commit {
-    padding-top: 0;
-    padding-bottom: 0;
+  .table-list-cell {
+    border-bottom: none;
+  }
 
-    .commit-row-title {
-      .commit-row-message {
-        font-weight: normal;
-      }
-    }
+  .commit-actions {
+    width: 200px;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 480cb2b9f0d..9bc47bbe173 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -29,7 +29,7 @@
 
   .wiki-last-edit-by {
     display: block;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     strong {
       color: $gl-text-color;
@@ -38,7 +38,7 @@
 
   .light {
     font-weight: normal;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .git-access-header {