Merge branch 'master' into 25426-group-dashboard-ui

21 files changed, 798 insertions, 92 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index b8ba77f4513..9dc9f9a9068 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -49,3 +49,4 @@
 @import "framework/icons.scss";
 @import "framework/snippets.scss";
 @import "framework/memory_graph.scss";
+@import "framework/responsive-tables.scss";
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 57387b913dc..00c981f64c5 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -445,3 +445,9 @@ table {
     word-wrap: break-word;
   }
 }
+
+.disabled-content {
+  pointer-events: none;
+  opacity: .5;
+}
+
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 5ab48b6c874..9c70f1a1ef2 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -201,6 +201,11 @@
     width: 100%;
   }
 
+  &.dropdown-open-left {
+    right: 0;
+    left: auto;
+  }
+
   &.is-loading {
     .dropdown-content {
       display: none;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 78f425057eb..d08df05fd6c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -85,7 +85,7 @@
     }
 
     /**
-     *  Blame file
+     *  Annotate file
      */
     &.blame {
       table {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 90051ffe753..cfbaaaa04c7 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -22,12 +22,6 @@
 }
 
 @media (min-width: $screen-sm-min) {
-  .issues_bulk_update {
-    .dropdown-menu-toggle {
-      width: 132px;
-    }
-  }
-
   .filter-item:not(:last-child) {
     margin-right: 6px;
   }
@@ -90,6 +84,7 @@
 .filtered-search-term {
   display: -webkit-flex;
   display: flex;
+  flex-shrink: 0;
   margin-top: 5px;
   margin-bottom: 5px;
 
@@ -147,15 +142,17 @@
       }
     }
   }
+}
 
-  .selected {
-    .name {
-      background-color: $filter-name-selected-color;
-    }
+.filtered-search-token:hover,
+.filtered-search-token .selected,
+.filtered-search-term .selected {
+  .name {
+    background-color: $filter-name-selected-color;
+  }
 
-    .value-container {
-      background-color: $filter-value-selected-color;
-    }
+  .value-container {
+    background-color: $filter-value-selected-color;
   }
 }
 
@@ -239,7 +236,7 @@
     width: 35px;
     background-color: $white-light;
     border: none;
-    position: absolute;
+    position: static;
     right: 0;
     height: 100%;
     outline: none;
@@ -375,12 +372,6 @@
   padding: 0;
 }
 
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-  .issue-bulk-update-dropdown-toggle {
-    width: 100px;
-  }
-}
-
 @media (max-width: $screen-xs-max) {
   .issues-details-filters {
     padding: 0 0 10px;
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 25b4feca3c3..38d884bc7eb 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -16,6 +16,22 @@
     @extend .alert;
     @extend .alert-danger;
     margin: 0;
+
+    .flash-text,
+    .flash-action {
+      display: inline-block;
+    }
+
+    a.flash-action {
+      margin-left: 5px;
+      text-decoration: none;
+      font-weight: normal;
+      border-bottom: 1px solid;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
   }
 
   .flash-notice,
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 678af978edd..600a1f53b58 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -29,10 +29,6 @@
     display: none;
   }
 
-  .issues-holder .issue-check {
-    display: none;
-  }
-
   .rss-btn {
     display: none;
   }
@@ -112,11 +108,6 @@
     }
   }
 
-  .issue-edited-ago,
-  .note_edited_ago {
-    display: none;
-  }
-
   aside:not(.right-sidebar) {
     display: none;
   }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 28b2a7cfacd..3787ef370b2 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -45,7 +45,8 @@
   li {
     display: flex;
 
-    a {
+    a,
+    .btn-link {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
@@ -67,7 +68,29 @@
       }
     }
 
-    &.active a {
+    .btn-link {
+      padding-top: 16px;
+      padding-left: 15px;
+      padding-right: 15px;
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      border-radius: 0;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: transparent;
+      }
+
+      &:active {
+        outline: 0;
+        box-shadow: none;
+      }
+    }
+
+    &.active a,
+    &.active .btn-link {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: 600;
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
new file mode 100644
index 00000000000..a24483fa431
--- /dev/null
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -0,0 +1,90 @@
+@mixin flex-max-width($max) {
+  flex: 0 0 #{$max + '%'};
+  max-width: #{$max + '%'};
+}
+
+.gl-responsive-table-row {
+  margin-top: 10px;
+  border: 1px solid $border-color;
+
+  @media (min-width: $screen-md-min) {
+    padding: 15px 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-bottom: 1px solid $white-normal;
+  }
+
+  .table-section {
+    white-space: nowrap;
+
+    .branch-commit {
+      max-width: 100%;
+    }
+
+    $section-widths: 10 15 20 25 30 40;
+    @each $width in $section-widths {
+      &.section-#{$width} {
+        flex: 0 0 #{$width + '%'};
+
+        @media (min-width: $screen-md-min) {
+          max-width: #{$width + '%'};
+        }
+      }
+    }
+
+    &:not(.table-button-footer) {
+      @media (max-width: $screen-sm-max) {
+        display: flex;
+        align-self: stretch;
+        padding: 10px;
+        align-items: center;
+        height: 62px;
+
+        &:not(:first-of-type) {
+          border-top: 1px solid $white-normal;
+        }
+      }
+    }
+  }
+}
+
+.table-row-header {
+  font-size: 13px;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.table-mobile-header {
+  color: $gl-text-color-secondary;
+  @include flex-max-width(40);
+
+  @media (min-width: $screen-md-min) {
+    display: none;
+  }
+}
+
+.table-mobile-content {
+  @media (max-width: $screen-sm-max) {
+    @include flex-max-width(60);
+    text-align: right;
+  }
+}
+
+.flex-truncate-parent {
+  display: flex;
+}
+
+.flex-truncate-child {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $screen-md-min) {
+    flex: 0 0 90%;
+  }
+}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 5b62d7fa3a7..d4421e3af74 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -33,7 +33,7 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) {
-    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+    &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
 
@@ -56,7 +56,7 @@
   z-index: 300;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+    &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
   }
@@ -88,3 +88,35 @@
     min-height: 100%;
   }
 }
+
+@mixin maintain-sidebar-dimensions {
+  display: block;
+  width: $gutter-width;
+  padding: 10px 20px;
+}
+
+.issues-bulk-update.right-sidebar {
+  @include maintain-sidebar-dimensions;
+  transition: right $sidebar-transition-duration;
+  right: -$gutter-width;
+
+  &.right-sidebar-expanded {
+    @include maintain-sidebar-dimensions;
+    right: 0;
+  }
+
+  &.right-sidebar-collapsed {
+    @include maintain-sidebar-dimensions;
+    right: -$gutter-width;
+
+    .block {
+      padding: 16px 0;
+      width: 250px;
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  .issuable-sidebar {
+    padding: 0 3px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 975a4b40383..4114a050d9a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -187,6 +187,7 @@ $divergence-graph-bar-bg: #ccc;
 $divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
+$highlight-changes-color: rgb(235, 255, 232);
 
 
 /*
@@ -569,3 +570,10 @@ $filter-value-selected-color: #d7d7d7;
 Animation Functions
 */
 $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
+
+/*
+Convdev Index
+*/
+$color-high-score: $green-400;
+$color-average-score: $orange-400;
+$color-low-score: $red-400;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index ebe662136d5..740e383dbb5 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -96,9 +96,51 @@
   @media (min-width: $screen-sm-min) {
     width: 400px;
   }
+
+  &.is-expandable {
+    .board-header {
+      cursor: pointer;
+    }
+  }
+
+  &.is-collapsed {
+    width: 50px;
+
+    .board-header {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .board-title {
+      position: initial;
+      padding: 0;
+      border-bottom: 0;
+
+      > span {
+        display: block;
+        transform: rotate(90deg) translate(25px, 0);
+      }
+    }
+
+    .board-title-expandable-toggle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -10px;
+    }
+
+    .board-list-component,
+    .board-issue-count-holder {
+      display: none;
+    }
+  }
 }
 
 .board-inner {
+  position: relative;
   height: 100%;
   font-size: $issue-boards-font-size;
   background: $gray-light;
@@ -175,21 +217,53 @@
   }
 }
 
+.slide-down-enter {
+  transform: translateY(-100%);
+}
+
+.slide-down-enter-active {
+  transition: transform $fade-in-duration;
+
+  + .board-list {
+    transform: translateY(-136px);
+    transition: none;
+  }
+}
+
+.slide-down-enter-to {
+  + .board-list {
+    transform: translateY(0);
+    transition: transform $fade-in-duration ease;
+  }
+}
+
+.slide-down-leave {
+  transform: translateY(0);
+}
+
+.slide-down-leave-active {
+  transition: all $fade-in-duration;
+  transform: translateY(-136px);
+
+  + .board-list {
+    transition: transform $fade-in-duration ease;
+    transform: translateY(-136px);
+  }
+}
+
 .board-list-component {
   height: calc(100% - 49px);
+  overflow: hidden;
 }
 
 .board-list {
   height: 100%;
+  width: 100%;
   margin-bottom: 0;
   padding: 5px;
   list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
-
-  &.is-smaller {
-    height: calc(100% - 136px);
-  }
 }
 
 .board-list-loading {
@@ -351,6 +425,7 @@
 }
 
 .board-new-issue-form {
+  z-index: 1;
   margin: 5px;
 }
 
diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss
new file mode 100644
index 00000000000..0413114c279
--- /dev/null
+++ b/app/assets/stylesheets/pages/convdev_index.scss
@@ -0,0 +1,255 @@
+$space-between-cards: 8px;
+
+.convdev-empty svg {
+  margin: 64px auto 32px;
+  max-width: 420px;
+}
+
+.convdev-header {
+  margin-top: $gl-padding;
+  margin-bottom: $gl-padding;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+
+  .convdev-header-title {
+    font-size: 48px;
+    line-height: 1;
+    margin: 0;
+  }
+
+  .convdev-header-subtitle {
+    font-size: 22px;
+    line-height: 1;
+    color: $gl-text-color-secondary;
+    margin-left: 8px;
+    font-weight: 500;
+
+    a {
+      font-size: 18px;
+      color: $gl-text-color-secondary;
+
+      &:hover {
+        color: $blue-500;
+      }
+    }
+  }
+}
+
+.convdev-cards {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.convdev-card-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: center;
+  width: 50%;
+  border-color: $border-color;
+  margin: 0 0 32px;
+  padding: $space-between-cards / 2;
+  position: relative;
+
+  @media (min-width: $screen-xs-min) {
+    width: percentage(1 / 4);
+  }
+
+  @media (min-width: $screen-sm-min) {
+    width: percentage(1 / 5);
+  }
+
+  @media (min-width: $screen-md-min) {
+    width: percentage(1 / 6);
+  }
+
+  @media (min-width: $screen-lg-min) {
+    width: percentage(1 / 10);
+  }
+}
+
+.convdev-card {
+  border: solid 1px $border-color;
+  border-radius: 3px;
+  border-top-width: 3px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.convdev-card-low {
+  border-top-color: $color-low-score;
+
+  .card-score-big {
+    background-color: $red-25;
+  }
+}
+
+.convdev-card-average {
+  border-top-color: $color-average-score;
+
+  .card-score-big {
+    background-color: $orange-25;
+  }
+}
+
+.convdev-card-high {
+  border-top-color: $color-high-score;
+
+  .card-score-big {
+    background-color: $green-25;
+  }
+}
+
+.convdev-card-title {
+  margin: $gl-padding auto auto;
+  max-width: 100px;
+
+  h3 {
+    font-size: 14px;
+    margin: 0 0 2px;
+  }
+
+  .text-light {
+    font-size: 13px;
+    line-height: 1.25;
+    color: $gl-text-color-secondary;
+  }
+}
+
+.card-scores {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: $gl-padding $gl-btn-padding;
+  line-height: 1;
+}
+
+.card-score {
+  color: $gl-text-color-secondary;
+
+  .card-score-name {
+    font-size: 13px;
+    margin-top: 4px;
+  }
+}
+
+.card-score-value {
+  font-size: 16px;
+  color: $gl-text-color;
+  font-weight: 500;
+}
+
+.card-score-big {
+  border-top: 2px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  font-size: 22px;
+  padding: 10px 0;
+  font-weight: 500;
+}
+
+.card-buttons {
+  display: flex;
+
+  > * {
+    font-size: 16px;
+    color: $gl-text-color-secondary;
+    padding: 10px;
+    flex-grow: 1;
+
+    &:hover {
+      background-color: $border-color;
+      color: $gl-text-color;
+    }
+
+    + * {
+      border-left: solid 1px $border-color;
+    }
+  }
+}
+
+.convdev-steps {
+  margin-top: $gl-padding;
+  height: 1px;
+  min-width: 100%;
+  justify-content: space-around;
+  position: relative;
+  background: $border-color;
+}
+
+.convdev-step {
+  $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%;
+  @each $pos in $step-positions {
+    $i: index($step-positions, $pos);
+
+    &:nth-child(#{$i}) {
+      left: $pos;
+    }
+  }
+
+  position: absolute;
+  transform-origin: 75% 50%;
+  padding: 8px;
+  height: 50px;
+  width: 50px;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: solid 1px $border-color;
+  background: $white-light;
+  transform: translate(-50%, -50%);
+  color: $gl-text-color-secondary;
+  fill: $gl-text-color-secondary;
+  box-shadow: 0 2px 4px $dropdown-shadow-color;
+
+  &:hover {
+    padding: 8px 10px;
+    fill: currentColor;
+    z-index: 100;
+    height: auto;
+    width: auto;
+
+    .convdev-step-title {
+      max-height: 2em;
+      opacity: 1;
+      transition: opacity 0.2s;
+    }
+
+    svg {
+      transform: scale(1.5);
+      margin: $gl-btn-padding;
+    }
+  }
+
+  svg {
+    transition: transform 0.1s;
+    width: 30px;
+    height: 30px;
+    min-height: 30px;
+    min-width: 30px;
+  }
+}
+
+.convdev-step-title {
+  max-height: 0;
+  opacity: 0;
+  text-transform: uppercase;
+  margin: $gl-vert-padding 0 0;
+  text-align: center;
+  font-size: 12px;
+}
+
+.convdev-high-score {
+  color: $color-high-score;
+}
+
+.convdev-average-score {
+  color: $color-average-score;
+}
+
+.convdev-low-score {
+  color: $color-low-score;
+}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index f269d53093d..a44a8bce879 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -11,34 +11,7 @@
 }
 
 .environments-container {
-  .table-holder {
-    width: 100%;
-
-    @media (max-width: $screen-sm-max) {
-      overflow: auto;
-    }
-  }
-
-  .table.ci-table {
-    .environments-actions {
-      min-width: 300px;
-    }
-
-    .environments-commit,
-    .environments-actions {
-      width: 20%;
-    }
-
-    .environments-date {
-      width: 10%;
-    }
-
-    .environments-name,
-    .environments-deploy,
-    .environments-build {
-      width: 15%;
-    }
-
+  .ci-table {
     .deployment-column {
       > span {
         word-break: break-all;
@@ -150,6 +123,55 @@
   }
 }
 
+.gl-responsive-table-row {
+  .environments-actions {
+    @media (min-width: $screen-md-min) {
+      text-align: right;
+    }
+
+    @media (max-width: $screen-sm-max) {
+      background-color: $gray-normal;
+      align-self: stretch;
+      border-top: 1px solid $border-color;
+
+      .environment-action-buttons {
+        padding: 10px 5px;
+        display: flex;
+
+        .btn {
+          border-radius: 3px;
+        }
+
+        > .btn-group,
+        .external-url,
+        .btn {
+          flex: 1;
+          flex-basis: 28px;
+          margin: 0 5px;
+        }
+
+        .dropdown-new {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .branch-commit {
+    max-width: 100%;
+  }
+}
+
+.folder-row {
+  padding: 15px 0;
+  border-bottom: 1px solid $white-normal;
+
+  @media (max-width: $screen-sm-max) {
+    border-top: 1px solid $white-normal;
+    margin-top: 10px;
+  }
+}
+
 .prometheus-graph {
   text {
     fill: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index c2346f2f1c3..a321941e0c9 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -729,3 +729,34 @@
     }
   }
 }
+
+.confidential-issue-warning {
+  background-color: $gl-gray;
+  border-radius: 3px;
+  padding: $gl-btn-padding $gl-padding;
+  margin-top: $gl-padding-top;
+  font-size: 14px;
+  color: $white-light;
+
+  .fa {
+    margin-right: 8px;
+  }
+
+  a {
+    color: $white-light;
+    text-decoration: underline;
+  }
+
+  &.affix {
+    position: static;
+    width: initial;
+
+    @media (min-width: $screen-sm-min) {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 60px;
+      z-index: 200;
+      @include transition(all);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 875e47cdff3..aa307414737 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -103,26 +103,6 @@
   }
 }
 
-.confidential-issue-warning {
-  background-color: $gray-normal;
-  border-radius: 3px;
-  padding: 3px 12px;
-  margin: auto;
-  margin-top: 0;
-  text-align: center;
-  font-size: 12px;
-
-  @media (max-width: $screen-sm-max) {
-    // On smaller devices the warning becomes the fourth item in the list,
-    // rather than centering, and grows to span the full width of the
-    // comment area.
-    order: 4;
-    -webkit-order: 4;
-    margin: 6px auto;
-    width: 100%;
-  }
-}
-
 .discussion-form {
   padding: $gl-padding-top $gl-padding $gl-padding;
   background-color: $white-light;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index f956e3757bf..e622e5c3f4b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -38,9 +38,12 @@ ul.notes {
   }
 
   .discussion {
-    overflow: hidden;
     display: block;
     position: relative;
+
+    .diff-content {
+      overflow: visible;
+    }
   }
 
   > li {
@@ -443,6 +446,53 @@ ul.notes {
   .note-action-button {
     margin-left: 8px;
   }
+
+  .more-actions-toggle {
+    margin-left: 2px;
+  }
+}
+
+.more-actions {
+  display: inline;
+
+  .tooltip {
+    white-space: nowrap;
+  }
+}
+
+.more-actions-toggle {
+  padding: 0;
+  outline: none;
+
+  &:hover .icon,
+  &:focus .icon {
+    color: $blue-600;
+  }
+
+  .icon {
+    padding: 0 6px;
+  }
+}
+
+.more-actions-dropdown {
+  width: 180px;
+  min-width: 180px;
+  margin-top: $gl-btn-padding;
+
+  li > a,
+  li > .btn {
+    color: $gl-text-color;
+    padding: $gl-btn-padding;
+    width: 100%;
+    text-align: left;
+
+    &:hover,
+    &:focus {
+      color: $gl-text-color;
+      background-color: $blue-25;
+      border-radius: $border-radius-default;
+    }
+  }
 }
 
 .discussion-actions {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index cf2e565dd2d..58b458cd837 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -984,3 +984,11 @@
     width: 12px;
   }
 }
+
+.pipeline-header-container {
+  min-height: 55px;
+
+  .text-center {
+    padding-top: 12px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index fe084eb9397..c207159f606 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -287,6 +287,7 @@ table.u2f-registrations {
 
 .user-callout {
   margin: 0 auto;
+  max-width: $screen-lg-min;
 
   .bordered-box {
     border: 1px solid $blue-300;
@@ -295,14 +296,15 @@ table.u2f-registrations {
     position: relative;
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
   .landing {
-    margin-top: $gl-padding;
-    margin-bottom: $gl-padding;
+    padding: 32px;
 
     .close {
       position: absolute;
+      top: 20px;
       right: 20px;
       opacity: 1;
 
@@ -330,11 +332,20 @@ table.u2f-registrations {
         height: 110px;
         vertical-align: top;
       }
+
+      &.convdev {
+        margin: 0 0 0 30px;
+
+        svg {
+          height: 127px;
+        }
+      }
     }
 
     .user-callout-copy {
       display: inline-block;
       vertical-align: top;
+      max-width: 570px;
     }
   }
 
@@ -348,12 +359,20 @@ table.u2f-registrations {
     .landing {
       .svg-container,
       .user-callout-copy {
-        margin: 0;
+        margin: 0 auto;
         display: block;
 
         svg {
           height: 75px;
         }
+
+        &.convdev {
+          margin: $gl-padding auto 0;
+
+          svg {
+            height: 120px;
+          }
+        }
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 24ab2bedea2..a2f781a6a6e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -29,6 +29,20 @@
     & > .form-group {
       padding-left: 0;
     }
+
+    select option[disabled] {
+      display: none;
+    }
+  }
+
+  select {
+    background: transparent;
+    transition: background 2s ease-out;
+
+    &.highlight-changes {
+      background: $highlight-changes-color;
+      transition: none;
+    }
   }
 
   .help-block {
@@ -675,14 +689,16 @@ pre.light-well {
   }
 }
 
-.new_protected_branch {
+.new_protected_branch,
+.new-protected-tag {
   label {
     margin-top: 6px;
     font-weight: normal;
   }
 }
 
-.create-new-protected-branch-button {
+.create-new-protected-branch-button,
+.create-new-protected-tag-button {
   @include dropdown-link;
 
   width: 100%;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 3889deee21a..33b3c083fd2 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,3 +1,90 @@
+@keyframes expandMaxHeight {
+  0% {
+    max-height: 0;
+  }
+
+  99% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: none;
+  }
+}
+
+@keyframes collapseMaxHeight {
+  0% {
+    max-height: 100vh;
+  }
+
+  100% {
+    max-height: 0;
+  }
+}
+
+.settings {
+  overflow: hidden;
+  border-bottom: 1px solid $gray-darker;
+
+  &:first-of-type {
+    margin-top: 10px;
+  }
+}
+
+.settings-header {
+  position: relative;
+  padding: 20px 110px 10px 0;
+
+  h4 {
+    margin-top: 0;
+  }
+
+  button {
+    position: absolute;
+    top: 20px;
+    right: 6px;
+    min-width: 80px;
+  }
+}
+
+.settings-content {
+  max-height: 1px;
+  overflow-y: scroll;
+  margin-right: -20px;
+  padding-right: 130px;
+  animation: collapseMaxHeight 300ms ease-out;
+
+  &.expanded {
+    max-height: none;
+    overflow-y: visible;
+    animation: expandMaxHeight 300ms ease-in;
+  }
+
+  &.no-animate {
+    animation: none;
+  }
+
+  @media(max-width: $screen-sm-max) {
+    padding-right: 20px;
+  }
+
+  &::before {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  &::after {
+    content: ' ';
+    display: block;
+    height: 1px;
+    overflow: hidden;
+    margin-top: 20px;
+  }
+}
+
 .settings-list-icon {
   color: $gl-text-color-secondary;
   font-size: $settings-icon-size;