Merge branch 'master' into zj-auto-devops-table

11 files changed, 171 insertions, 151 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index e16fbbf43b5..68a51c5a461 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -16,6 +16,7 @@
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .append-right-5 { margin-right: 5px; }
+.append-right-8 { margin-right: 8px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 5871383a57b..1c40c7155c1 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -368,6 +368,10 @@
   transform: translateY(0);
 }
 
+.comment-type-dropdown.open .dropdown-menu {
+  display: block;
+}
+
 .filtered-search-box-input-container {
   .dropdown-menu,
   .dropdown-menu-nav {
@@ -729,6 +733,7 @@
   #{$selector}.dropdown-menu,
   #{$selector}.dropdown-menu-nav {
     li {
+      display: block;
       padding: 0 1px;
 
       &:hover {
@@ -748,9 +753,12 @@
       }
 
       a,
-      button {
+      button,
+      .menu-item {
         border-radius: 0;
         padding: 8px 16px;
+        text-align: left;
+        width: 100%;
 
         // make sure the text color is not overriden
         &.text-danger {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 26920869bec..01fffa717e9 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -591,9 +591,10 @@ $ui-dev-kit-example-border: #ddd;
 /*
 Pipeline Graph
 */
-$stage-hover-bg: #eaf3fc;
-$stage-hover-border: #d1e7fc;
-$action-icon-color: #d6d6d6;
+$stage-hover-bg: $gray-darker;
+$ci-action-icon-size: 22px;
+$pipeline-dropdown-line-height: 20px;
+$pipeline-dropdown-status-icon-size: 18px;
 
 /*
 Pipeline Schedules
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 54fa4109f8b..b711bd12c73 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -8,15 +8,23 @@ header.navbar-gitlab-new {
   border-bottom: 0;
 
   .header-content {
+    display: -webkit-flex;
+    display: flex;
     padding-left: 0;
 
     .title-container {
+      display: -webkit-flex;
+      display: flex;
+      -webkit-align-items: stretch;
       align-items: stretch;
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
       padding-top: 0;
       overflow: visible;
     }
 
     .title {
+      display: -webkit-flex;
       display: flex;
       padding-right: 0;
       color: currentColor;
@@ -27,6 +35,7 @@ header.navbar-gitlab-new {
       }
 
       > a {
+        display: -webkit-flex;
         display: flex;
         align-items: center;
         padding-right: $gl-padding;
@@ -177,6 +186,7 @@ header.navbar-gitlab-new {
 }
 
 .navbar-sub-nav {
+  display: -webkit-flex;
   display: flex;
   margin-bottom: 0;
   color: $indigo-200;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ab5a901da71..4b0b238a767 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -498,6 +498,7 @@
   color: $gray-darkest;
   display: block;
   margin: 16px 0 0;
+  font-size: 85%;
 
   .author_link {
     color: $gray-darkest;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index e2177f96aee..518bb270b88 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -250,6 +250,10 @@ ul.related-merge-requests > li {
   }
 }
 
+.discussion-reply-holder .note-edit-form {
+  display: block;
+}
+
 @media (min-width: $screen-sm-min) {
   .emoji-block .row {
     display: flex;
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 3fb02e9964f..b3bab082a35 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -55,6 +55,10 @@
       display: -webkit-flex;
       display: flex;
     }
+
+    .dropdown-menu.dropdown-menu-align-right {
+      margin-top: -2px;
+    }
   }
 
   .form-horizontal {
@@ -306,3 +310,7 @@
     }
   }
 }
+
+.member-form-control {
+  @include new-style-dropdown;
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 9d51c0b7a8a..d7f53a74825 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -174,17 +174,6 @@
     vertical-align: top;
   }
 
-  .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
-    display: flex;
-    align-items: center;
-
-    .ci-status-text,
-    .ci-status-icon {
-      top: 0;
-      margin-right: 10px;
-    }
-  }
-
   .normal {
     line-height: 28px;
   }
@@ -291,6 +280,7 @@
 
     .dropdown-toggle {
       .fa {
+        margin-left: 0;
         color: inherit;
       }
     }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 9558924bbcb..8932cff22a8 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -20,10 +20,6 @@
   }
 }
 
-.new-note {
-  display: none;
-}
-
 .new-note,
 .note-edit-form {
   .note-form-actions {
@@ -202,6 +198,10 @@
   .discussion-reply-holder {
     background-color: $white-light;
     padding: 10px 16px;
+
+    &.is-replying {
+      padding-bottom: $gl-padding;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index fbfe5d3c682..45f2aed1531 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -100,6 +100,20 @@ ul.notes {
       }
     }
 
+    .editing-spinner {
+      display: none;
+    }
+
+    &.is-requesting {
+      .note-timestamp {
+        display: none;
+      }
+
+      .editing-spinner {
+        display: inline-block;
+      }
+    }
+
     &.is-editing {
       .note-header,
       .note-text,
@@ -365,9 +379,7 @@ ul.notes {
 }
 
 .discussion-header,
-.note-header {
-  position: relative;
-
+.note-header-info {
   a {
     color: inherit;
 
@@ -402,6 +414,10 @@ ul.notes {
 .note-header-info {
   min-width: 0;
   padding-bottom: 8px;
+
+  &.discussion {
+    padding-bottom: 0;
+  }
 }
 
 .system-note .note-header-info {
@@ -453,6 +469,8 @@ ul.notes {
 }
 
 .note-actions {
+  @include new-style-dropdown;
+
   align-self: flex-start;
   flex-shrink: 0;
   display: inline-flex;
@@ -488,22 +506,6 @@ ul.notes {
 .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 {
@@ -814,10 +816,6 @@ ul.notes {
   }
 }
 
-.discussion-notes .flash-container {
-  margin-bottom: 0;
-}
-
 // Merge request notes in diffs
 .diff-file {
   // Diff is inline
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9071e1ca0c8..883f7b392c0 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -40,7 +40,7 @@
 
       .btn.btn-retry:hover,
       .btn.btn-retry:focus {
-        border-color: $gray-darkest;
+        border-color: $dropdown-toggle-active-border-color;
         background-color: $white-normal;
       }
 
@@ -206,8 +206,8 @@
 
 .stage-cell {
   .mini-pipeline-graph-dropdown-toggle svg {
-    height: 22px;
-    width: 22px;
+    height: $ci-action-icon-size;
+    width: $ci-action-icon-size;
     position: absolute;
     top: -1px;
     left: -1px;
@@ -219,7 +219,7 @@
     display: inline-block;
     position: relative;
     vertical-align: middle;
-    height: 22px;
+    height: $ci-action-icon-size;
     margin: 3px 0;
 
     + .stage-container {
@@ -308,7 +308,7 @@
 
   a {
     text-decoration: none;
-    color: $gl-text-color-secondary;
+    color: $gl-text-color;
   }
 
   svg {
@@ -432,7 +432,11 @@
     width: 186px;
     margin-bottom: 10px;
     white-space: normal;
-    color: $gl-text-color-secondary;
+
+    // ensure .build-content has hover style when action-icon is hovered
+    .ci-job-dropdown-container:hover .build-content {
+      @extend .build-content:hover;
+    }
 
     // Action Icons in big pipeline-graph nodes
     .ci-action-icon-container .ci-action-icon-wrapper {
@@ -445,11 +449,11 @@
 
       &:hover {
         background-color: $stage-hover-bg;
-        border: 1px solid $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
       }
 
       svg {
-        fill: $border-color;
+        fill: $gl-text-color-secondary;
         position: relative;
         left: -1px;
         top: -1px;
@@ -475,19 +479,10 @@
       background-color: transparent;
       border: none;
       padding: 0;
-      color: $gl-text-color-secondary;
 
       &:focus {
         outline: none;
       }
-
-      &:hover {
-        color: $gl-text-color;
-
-        .dropdown-counter-badge {
-          color: $gl-text-color;
-        }
-      }
     }
 
     .build-content {
@@ -502,8 +497,7 @@
     a.build-content:hover,
     button.build-content:hover {
       background-color: $stage-hover-bg;
-      border: 1px solid $stage-hover-border;
-      color: $gl-text-color;
+      border: 1px solid $dropdown-toggle-active-border-color;
     }
 
 
@@ -564,7 +558,6 @@
 
 // Triggers the dropdown in the big pipeline graph
 .dropdown-counter-badge {
-  color: $border-color;
   font-weight: 100;
   font-size: 15px;
   position: absolute;
@@ -606,8 +599,8 @@ button.mini-pipeline-graph-dropdown-toggle {
   background-color: $white-light;
   border-width: 1px;
   border-style: solid;
-  width: 22px;
-  height: 22px;
+  width: $ci-action-icon-size;
+  height: $ci-action-icon-size;
   margin: 0;
   padding: 0;
   transition: all 0.2s linear;
@@ -669,105 +662,119 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
+@include new-style-dropdown('.big-pipeline-graph-dropdown-menu');
+@include new-style-dropdown('.mini-pipeline-graph-dropdown-menu');
+
 // dropdown content for big and mini pipeline
 .big-pipeline-graph-dropdown-menu,
 .mini-pipeline-graph-dropdown-menu {
   width: 195px;
   max-width: 195px;
 
-  li {
-    padding: 2px 3px;
-  }
-
   .scrollable-menu {
     padding: 0;
     max-height: 245px;
     overflow: auto;
   }
 
-  // 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;
+  li {
+    position: relative;
 
-    &:hover,
-    &:focus {
-      background-color: $stage-hover-bg;
-      border: 1px solid transparent;
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
     }
 
-    svg {
-      width: 22px;
-      height: 22px;
-      left: -6px;
-      position: relative;
-      top: -3px;
-      fill: $action-icon-color;
-    }
+    // Action icon on the right
+    a.ci-action-icon-wrapper {
+      border-radius: 50%;
+      border: 1px solid $border-color;
+      width: $ci-action-icon-size;
+      height: $ci-action-icon-size;
+      padding: 2px 0 0 5px;
+      font-size: 12px;
+      background-color: $white-light;
+      position: absolute;
+      top: 50%;
+      right: $gl-padding;
+      margin-top: -#{$ci-action-icon-size / 2};
 
-    &:hover svg,
-    &:focus svg {
-      fill: $gl-text-color;
-    }
-  }
+      &:hover,
+      &:focus {
+        background-color: $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
+      }
 
-  // link to the build
-  .mini-pipeline-graph-dropdown-item {
-    padding: 3px 7px 4px;
-    clear: both;
-    font-weight: $gl-font-weight-normal;
-    line-height: 1.428571429;
-    white-space: nowrap;
-    margin: 0 5px;
-    border-radius: 3px;
+      svg {
+        fill: $gl-text-color-secondary;
+        width: $ci-action-icon-size;
+        height: $ci-action-icon-size;
+        left: -6px;
+        position: relative;
+        top: -3px;
+      }
 
-    // build name
-    .ci-build-text,
-    .ci-status-text {
-      font-weight: 200;
-      overflow: hidden;
+      &:hover svg,
+      &:focus svg {
+        fill: $gl-text-color;
+      }
+    }
+
+    // link to the build
+    .mini-pipeline-graph-dropdown-item {
+      padding: 3px 7px 4px;
+      align-items: center;
+      clear: both;
+      display: flex;
+      font-weight: normal;
+      line-height: $line-height-base;
       white-space: nowrap;
-      text-overflow: ellipsis;
-      max-width: 70%;
-      color: $gl-text-color-secondary;
-      margin-left: 2px;
-      display: inline-block;
-      top: 1px;
-      vertical-align: text-bottom;
-      position: relative;
+      border-radius: 3px;
 
-      @media (max-width: $screen-xs-max) {
-        max-width: 60%;
+      .ci-job-name-component {
+        align-items: center;
+        display: flex;
+        flex: 1;
       }
-    }
 
-    // status icon on the left
-    .ci-status-icon {
-      top: 3px;
-      position: relative;
+      // build name
+      .ci-build-text,
+      .ci-status-text {
+        font-weight: 200;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 70%;
+        margin-left: 2px;
+        display: inline-block;
 
-      > svg {
-        overflow: visible;
-        width: 18px;
-        height: 18px;
+        @media (max-width: $screen-xs-max) {
+          max-width: 60%;
+        }
       }
-    }
 
-    &:hover,
-    &:focus {
-      outline: none;
-      text-decoration: none;
-      color: $gl-text-color;
-      background-color: $stage-hover-bg;
+      .ci-status-icon {
+        @extend .append-right-8;
+
+        position: relative;
+
+        > svg {
+          width: $pipeline-dropdown-status-icon-size;
+          height: $pipeline-dropdown-status-icon-size;
+          margin: 3px 0;
+          position: relative;
+          overflow: visible;
+          display: block;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        outline: none;
+        text-decoration: none;
+        background-color: $stage-hover-bg;
+      }
     }
   }
 }
@@ -776,16 +783,9 @@ button.mini-pipeline-graph-dropdown-toggle {
 .big-pipeline-graph-dropdown-menu {
   width: 195px;
   min-width: 195px;
-  left: auto;
-  right: -195px;
-  top: -4px;
+  left: 100%;
+  top: -10px;
   box-shadow: 0 1px 5px $black-transparent;
-
-  .mini-pipeline-graph-dropdown-item {
-    .ci-status-icon {
-      top: -1px;
-    }
-  }
 }
 
 /**
@@ -806,15 +806,14 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 
   &::before {
-    left: -5px;
-    margin-top: -6px;
+    left: -6px;
+    margin-top: 3px;
     border-width: 7px 5px 7px 0;
     border-right-color: $border-color;
   }
 
   &::after {
-    left: -4px;
-    margin-top: -9px;
+    left: -5px;
     border-width: 10px 7px 10px 0;
     border-right-color: $white-light;
   }