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

9 files changed, 105 insertions, 36 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index d222fc4aefe..13174687e5d 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -193,7 +193,7 @@ a {
       background-size: cover;
       background-image: linear-gradient(to right,
       $gray-100 0%,
-      $gray-50 20%,
+      $gray-10 20%,
       $gray-100 40%,
       $gray-100 100%);
       height: 10px;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ecf2097dc87..f47d0cab31f 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -507,6 +507,10 @@
   opacity: 1 !important;
   cursor: default !important;
 
+  &.cursor-not-allowed {
+    cursor: not-allowed !important;
+  }
+
   i {
     color: $gl-text-color-disabled !important;
   }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 320bd4adaaa..93361c21642 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -392,6 +392,10 @@ img.emoji {
 }
 
 /** COMMON CLASSES **/
+/**
+  🚨 Do not use these classes — they are deprecated and being removed. 🚨
+  See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
+**/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-2 { margin-top: 2px; }
 .prepend-top-4 { margin-top: $gl-padding-4; }
@@ -434,6 +438,7 @@ img.emoji {
 .append-bottom-20 { margin-bottom: 20px; }
 .append-bottom-default { margin-bottom: $gl-padding; }
 .prepend-bottom-32 { margin-bottom: 32px; }
+.ml-10 { margin-left: 4.5rem; }
 .inline { display: inline-block; }
 .center { text-align: center; }
 .block { display: block; }
@@ -490,7 +495,8 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 
-  Instead, if you need a spacing class, add it below using the following values.
+  Instead, if you need a spacing class, please use one from Gitlab UI —
+  https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale.
     $gl-spacing-scale-0: 0;
     $gl-spacing-scale-1: 2px;
     $gl-spacing-scale-2: 4px;
@@ -505,21 +511,38 @@ img.emoji {
     $gl-spacing-scale-11: 64px;
     $gl-spacing-scale-12: 80px;
     $gl-spacing-scale-13: 96px;
-
-  E.g., a padding top of 96px can be added using:
-  .gl-shim-pt-13 {
-    padding-top: 96px;
-  }
-
-  Please use -shim- so it can be differentiated from the old scale classes.
-  These will be replaced when the Gitlab UI utilities are included.
 **/
 @each $index, $padding in $spacing-scale {
-  #{'.gl-p-#{$index}'} { padding: $padding; }
-  #{'.gl-pl-#{$index}'} { padding-left: $padding; }
-  #{'.gl-pr-#{$index}'} { padding-right: $padding; }
-  #{'.gl-pt-#{$index}'} { padding-top: $padding; }
-  #{'.gl-pb-#{$index}'} { padding-bottom: $padding; }
+  #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; }
+  #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; }
+  #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; }
+  #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; }
+  #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; }
+}
+
+/**
+  The zero-indexed classes will not change and do not need to be updated.
+  These can be removed when the Gitlab UI class include is merged.
+**/
+
+.gl-p-0 {
+  padding: 0;
+}
+
+.gl-pl-0 {
+  padding-left: 0;
+}
+
+.gl-pr-0 {
+  padding-right: 0;
+}
+
+.gl-pt-0 {
+  padding-top: 0;
+}
+
+.gl-pb-0 {
+  padding-bottom: 0;
 }
 
 /**
@@ -610,15 +633,13 @@ img.emoji {
   }
 }
 
-.gl-font-size-small { font-size: $gl-font-size-small; }
-.gl-font-size-large { font-size: $gl-font-size-large; }
+.gl-font-sm { font-size: $gl-font-size-small; }
+.gl-font-lg { font-size: $gl-font-size-large; }
+.gl-font-base { font-size: $gl-font-size-14; }
 
 .gl-line-height-24 { line-height: $gl-line-height-24; }
 
 .gl-font-size-0 { font-size: 0; }
-.gl-font-size-12 { font-size: $gl-font-size-12; }
-.gl-font-size-14 { font-size: $gl-font-size-14; }
-.gl-font-size-16 { font-size: $gl-font-size-16; }
 .gl-font-size-28 { font-size: $gl-font-size-28; }
 .gl-font-size-42 { font-size: $gl-font-size-42; }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index f746d7e6f69..1df9818a877 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -317,13 +317,6 @@
     }
   }
 
-  // Temporary fix to ensure tick is aligned
-  // Follow up Issue to remove after the GlNewDropdownItem component is fixed
-  // > https://gitlab.com/gitlab-org/gitlab/-/issues/213948
-  li:not(.gl-new-dropdown-item) .dropdown-item {
-    @include dropdown-link;
-  }
-
   .divider {
     height: 1px;
     margin: #{$grid-size / 2} 0;
@@ -384,6 +377,10 @@
   }
 }
 
+.dropdown-item {
+  @include dropdown-link;
+}
+
 .droplab-dropdown {
   .dropdown-toggle > i {
     pointer-events: none;
@@ -1032,6 +1029,16 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 }
 
 .labels-select-wrapper {
+  &.is-standalone {
+    .labels-select-dropdown-contents {
+      max-height: 350px;
+
+      .dropdown-content {
+        height: 250px;
+      }
+    }
+  }
+
   .labels-select-dropdown-contents {
     min-height: $dropdown-min-height;
     max-height: 330px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a0a020ec548..2c7e9428ef1 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -553,6 +553,7 @@
       vertical-align: text-top;
     }
 
+    a.upgrade-plan-link gl-emoji,
     a.ci-minutes-emoji gl-emoji,
     a.trial-link gl-emoji {
       font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 79f203091f2..bd262b65dc3 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -146,11 +146,13 @@
       display: inline-block;
       position: relative;
 
-      /* Medium devices (desktops, 992px and up) */
-      @include media-breakpoint-up(md) { width: 200px; }
+      &:not[type='checkbox'] {
+        /* Medium devices (desktops, 992px and up) */
+        @include media-breakpoint-up(md) { width: 200px; }
 
-      /* Large devices (large desktops, 1200px and up) */
-      @include media-breakpoint-up(lg) { width: 250px; }
+        /* Large devices (large desktops, 1200px and up) */
+        @include media-breakpoint-up(lg) { width: 250px; }
+      }
     }
 
     @include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 514bd090e28..5739f048e86 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -4,6 +4,21 @@
 }
 
 table {
+  /*
+  * TODO
+  * This is a temporary workaround until we fix the neutral
+  * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570
+  *
+  * The overwrites here affected the security dashboard tables, when removing
+  * this code, table-th-transparent and original-text-color classes should
+  * be removed there.
+  *
+  * Remove this code as soon as this happens
+  */
+  &.gl-table {
+    @include gl-text-gray-700;
+  }
+
   &.table {
     margin-bottom: $gl-padding;
 
@@ -32,8 +47,7 @@ table {
       }
 
       th {
-        background-color: $gray-light;
-        font-weight: $gl-font-weight-normal;
+        @include gl-bg-gray-100;
         border-bottom: 0;
 
         &.wide {
@@ -44,6 +58,11 @@ table {
           background: none;
           color: $gl-text-color-secondary;
         }
+
+        &.original-gl-th {
+          @include gl-text-gray-700;
+          border-bottom: 1px solid $cycle-analytics-light-gray;
+        }
       }
 
       td {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 816dbc6931c..1afcbc6d514 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -86,7 +86,7 @@
     line-height: 10px;
     color: $gl-gray-700;
     vertical-align: middle;
-    background-color: $gray-50;
+    background-color: $gray-10;
     border-width: 1px;
     border-style: solid;
     border-color: $gray-200 $gray-200 $gray-400;
@@ -533,6 +533,17 @@
       margin: 0;
       font-size: $gl-font-size-small;
     }
+
+    ul.dropdown-menu {
+      margin-top: 4px;
+      margin-bottom: 24px;
+      padding: 8px 0;
+
+      li {
+        margin: 0;
+        padding: 0 1px;
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c23623005b0..ac4d431ea57 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -163,7 +163,8 @@ $red-800: #8b2615;
 $red-900: #711e11;
 $red-950: #4b140b;
 
-$gray-50: #fafafa;
+$gray-10: #fafafa;
+$gray-50: #f0f0f0;
 $gray-100: #f2f2f2;
 $gray-200: #dfdfdf;
 $gray-300: #ccc;
@@ -232,6 +233,7 @@ $reds: (
 );
 
 $grays: (
+  '10': $gray-10,
   '50': $gray-50,
   '100': $gray-100,
   '200': $gray-200,
@@ -398,6 +400,7 @@ $tooltip-font-size: 12px;
  * Padding
  */
 $gl-padding-4: 4px;
+$gl-padding-6: 6px;
 $gl-padding-8: 8px;
 $gl-padding-12: 12px;
 $gl-padding: 16px;
@@ -447,6 +450,7 @@ $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;
 $home-panel-avatar-mobile-size: 24px;
 $gl-line-height: 16px;
+$gl-line-height-18: 18px;
 $gl-line-height-20: 20px;
 $gl-line-height-24: 24px;
 $gl-line-height-14: 14px;
@@ -697,7 +701,7 @@ $logs-p-color: #333;
 */
 $input-height: 34px;
 $input-danger-bg: #f2dede;
-$input-group-addon-bg: $gray-50;
+$input-group-addon-bg: $gray-10;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
 $input-short-width: 200px;