Add latest changes from gitlab-org/gitlab@13-4-stable-ee

6 files changed, 320 insertions, 14 deletions

diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 0b847902525..57053c7f0cb 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -19,14 +19,6 @@
     display: none;
   }
 
-  .monaco-editor .selected-text {
-    z-index: 1;
-  }
-
-  .monaco-editor .view-lines {
-    z-index: 2;
-  }
-
   .is-readonly .editor.original {
     .view-lines {
       cursor: default;
@@ -98,11 +90,11 @@
     }
 
     .char-insert {
-      background-color: $line-added-dark;
+      background-color: $line-added-dark-transparent;
     }
 
     .char-delete {
-      background-color: $line-removed-dark;
+      background-color: $line-removed-dark-transparent;
     }
 
     .line-numbers {
@@ -111,11 +103,11 @@
 
     .view-overlays {
       .line-insert {
-        background-color: $line-added;
+        background-color: $line-added-transparent;
       }
 
       .line-delete {
-        background-color: $line-removed;
+        background-color: $line-removed-transparent;
       }
     }
 
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index dfd7fd355a4..1e239877428 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -84,7 +84,8 @@
     color: var(--ide-input-border, $gl-text-color-tertiary);
   }
 
-  .dropdown-input .fa {
+  .dropdown-input .fa,
+  .dropdown-input .dropdown-input-clear {
     color: var(--ide-input-border, $dropdown-input-fa-color);
   }
 
diff --git a/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss
new file mode 100644
index 00000000000..0e8ea5e2d52
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss
@@ -0,0 +1,21 @@
+/**
+  This file contains only imports of Bootstrap, GitLab UI and GitLab mixins,
+  variables and functions, in the correct order.
+
+  It is meant to be used in page_bundles, but SHOULD NOT introduce any
+  styles of it's own. We actually check in CI that compiling _this_ file doesn't
+  result in any additional styles.
+
+  See: scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js
+ */
+@import 'framework/variables';
+@import 'framework/variables_overrides';
+@import 'framework/mixins';
+
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+@import '@gitlab/ui/src/scss/functions';
+@import '@gitlab/ui/src/scss/variables';
+@import '@gitlab/ui/src/scss/utility-mixins/index';
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 36587ecde3d..71e74297ee8 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px;
   max-width: 24px;
   padding: 0;
   margin: 0 ($grid-size / 2);
-  color: var(--ide-text-color-secondary, $gl-gray-light);
+  color: var(--ide-text-color-secondary, $gray-600);
 
   &:first-child {
     margin-left: 0;
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
new file mode 100644
index 00000000000..83d16f29d49
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -0,0 +1,33 @@
+@import 'framework/variables';
+
+$atlaskit-border-color: #dfe1e6;
+
+.ac-content {
+  margin: 20px;
+
+  .subscription-form {
+    margin-bottom: 20px;
+
+    .field-group-input {
+      display: flex;
+      padding-top: $gl-padding-4;
+
+      .ak-button {
+        height: auto;
+        margin-left: $btn-margin-5;
+      }
+    }
+  }
+}
+
+.subscriptions {
+  tbody {
+    tr {
+      border-bottom: 1px solid $atlaskit-border-color;
+    }
+
+    td {
+      padding: $gl-padding-8;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
new file mode 100644
index 00000000000..3eec5b53a30
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -0,0 +1,259 @@
+@import 'mixins_and_variables_and_functions';
+
+/**
+ * Dashboard Todos
+ *
+ */
+
+.todos-list > .todo {
+  // workaround because we cannot use border-collapse
+  border-top: 1px solid transparent;
+  display: flex;
+  flex-direction: row;
+
+  &:hover {
+    background-color: var(--blue-50, $blue-50);
+    border-color: var(--blue-200, $blue-200);
+    cursor: pointer;
+  }
+
+  // overwrite border style of .content-list
+  &:last-child {
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      border-color: var(--blue-200, $blue-200);
+    }
+  }
+
+  .todo-avatar,
+  .todo-actions {
+    @include transition(opacity);
+    flex: 0 0 auto;
+  }
+
+  .todo-actions {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin-left: 10px;
+    min-width: 55px;
+  }
+
+  .todo-item {
+    flex: 0 1 100%;
+    min-width: 0;
+  }
+
+  &.todo-pending.done-reversible {
+    &:hover {
+      border-color: var(--border-color, $border-color);
+      background-color: var(--gray-50, $gray-50);
+      border-top: 1px solid transparent;
+
+      .todo-avatar,
+      .todo-item {
+        opacity: 0.6;
+      }
+    }
+
+    .todo-avatar,
+    .todo-item {
+      opacity: 0.2;
+    }
+
+    .btn {
+      background-color: var(--gray-50, $gray-50);
+    }
+  }
+}
+
+.todo-item {
+  @include transition(opacity);
+
+  .todo-title {
+    > .title-item {
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .todo-label {
+      flex: 0 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .status-box {
+    margin: 0;
+    float: none;
+    display: inline-block;
+    font-weight: $gl-font-weight-normal;
+    padding: 0 5px;
+    line-height: inherit;
+    font-size: 14px;
+  }
+
+  .todo-label,
+  .todo-project {
+    a {
+      font-weight: $gl-font-weight-normal;
+      color: var(--blue-600, $blue-600);
+    }
+  }
+
+  .todo-body {
+    .badge.badge-pill,
+    p {
+      color: var(--gl-text-color, $gl-text-color);
+    }
+
+    .md {
+      color: $gl-grayish-blue;
+      font-size: $gl-font-size;
+    }
+
+    code {
+      white-space: pre-wrap;
+    }
+
+    pre {
+      border: 0;
+      background: var(--gray-50, $gray-50);
+      border-radius: 0;
+      color: var(--gray-500, $gray-500);
+      margin: 0 20px;
+      overflow: hidden;
+    }
+
+    .note-image-attach {
+      margin-top: 4px;
+      margin-left: 0;
+      max-width: 200px;
+      float: none;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .gl-label-scoped {
+    --label-inset-border: inset 0 0 0 1px currentColor;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .todos-filters {
+    .filter-categories {
+      width: 75%;
+
+      .filter-item {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .container-fluid .todos-list-container {
+    margin: 0 (-$gl-padding);
+  }
+
+  .todo {
+    .avatar {
+      display: none;
+    }
+  }
+
+  .todo-item {
+    .todo-title {
+      margin-bottom: 10px;
+
+      .todo-label {
+        white-space: normal;
+      }
+    }
+
+    .todo-body {
+      margin: 0;
+      border-left: 2px solid var(--border-color, $border-color);
+      padding-left: 10px;
+    }
+  }
+
+  .todos-filters {
+    .filter-categories {
+      width: auto;
+    }
+
+    .dropdown-menu-toggle {
+      width: 100%;
+    }
+
+    .dropdown-menu-toggle-sort {
+      width: auto;
+    }
+  }
+}
+
+.todos-empty {
+  display: flex;
+  flex-direction: column;
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include media-breakpoint-up(sm) {
+    flex-direction: row;
+    padding-top: 80px;
+  }
+}
+
+.todos-empty-content {
+  align-self: center;
+  max-width: 480px;
+  margin-right: 20px;
+}
+
+.todos-empty-hero {
+  width: 200px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include media-breakpoint-up(sm) {
+    width: 300px;
+    margin-right: 0;
+    order: 2;
+  }
+}
+
+.todos-all-done {
+  padding-top: 20px;
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 50px;
+  }
+
+  > svg {
+    display: block;
+    max-width: 300px;
+    margin: 0 auto 20px;
+  }
+
+  p {
+    max-width: 470px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  a {
+    font-weight: $gl-font-weight-bold;
+  }
+}