Merge branch '251109-gl-tabs-ide' into 'master'

Resolve "Migrate tab styles in _ide_theme_overrides.scss"

See merge request gitlab-org/gitlab!51933

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -5,7 +5,7 @@
   $bs-input-focus-border: #80bdff;
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
-  a:not(.btn):not(.gl-tab-nav-item),
+  a:not(.btn),
   .gl-button.btn-link,
   .gl-button.btn-link:hover,
   .gl-button.btn-link:focus,
@@ -34,6 +34,7 @@
   .ide-pipeline .top-bar .controllers .controllers-buttons,
   .controllers-buttons svg,
   .nav-links li a.active,
+  .gl-tabs-nav li a.gl-tab-nav-item-active,
   .md-area.is-focused {
     color: var(--ide-text-color, $gl-text-color);
   }
@@ -44,13 +45,15 @@
   }
 
   .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .gl-tabs-nav li a,
   .dropdown-menu-inner-content,
   .file-row .file-row-icon svg,
   .file-row:hover .file-row-icon svg {
     color: var(--ide-text-color-secondary, $gl-text-color-secondary);
   }
 
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) {
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar),
+  .gl-tabs-nav li {
     &:hover a,
     &.active a,
     a:hover,
@@ -61,6 +64,10 @@
         border-color: var(--ide-input-border, $gray-darkest);
       }
     }
+
+    a.gl-tab-nav-item-active {
+      box-shadow: inset 0 -2px 0 0 var(--ide-input-border, $gray-darkest);
+    }
   }
 
   .drag-handle:hover {
@@ -142,6 +149,7 @@
   .md table:not(.code) tbody td,
   .md table:not(.code) tr th,
   .nav-links:not(.quick-links),
+  .gl-tabs-nav,
   .common-note-form .md-area.is-focused .nav-links {
     border-color: var(--ide-border-color-alt, $white-dark);
   }
@@ -175,6 +183,10 @@
       border-color: var(--ide-highlight-accent, $gl-text-color);
     }
 
+    .gl-tabs-nav li a.gl-tab-nav-item-active {
+      box-shadow: inset 0 -2px 0 0 var(--ide-highlight-accent, $gl-text-color);
+    }
+
     // for other themes, suppress different avatar default colors for simplicity
     .avatar-container {
       &,
@@ -304,6 +316,11 @@
       border-color: var(--ide-dropdown-hover-background, $border-color);
     }
 
+    .gl-tabs-nav {
+      background-color: var(--ide-dropdown-hover-background, $white);
+      box-shadow: inset 0 -2px 0 0 var(--ide-dropdown-hover-background, $border-color);
+    }
+
     .divider {
       background-color: var(--ide-dropdown-hover-background, $gray-100);
       border-color: var(--ide-dropdown-hover-background, $gray-100);

app/assets/stylesheets/page_bundles/ide.scss

@@ -97,7 +97,8 @@ $ide-commit-header-height: 48px;
     border-right: 1px solid var(--ide-border-color, $white-dark);
     border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
-    &.active {
+    &.active,
+    .gl-tab-nav-item-active {
       background-color: var(--ide-highlight-background, $white);
       border-bottom-color: transparent;
     }
@@ -114,6 +115,42 @@ $ide-commit-header-height: 48px;
       }
     }
   }
+
+  .gl-tab-content {
+    padding: 0;
+  }
+
+  .gl-tabs-nav {
+    border-width: 0;
+
+    li {
+      padding: 0 !important;
+      background: transparent !important;
+      border: 0 !important;
+
+      a {
+        display: flex;
+        align-items: center;
+        padding: $grid-size $gl-padding !important;
+        box-shadow: none !important;
+        font-weight: normal !important;
+
+        background-color: var(--ide-background-hover, $gray-normal);
+        border-right: 1px solid var(--ide-border-color, $white-dark);
+        border-bottom: 1px solid var(--ide-border-color, $white-dark);
+
+        &.gl-tab-nav-item-active {
+          background-color: var(--ide-highlight-background, $white);
+          border-color: var(--ide-border-color, $white-dark);
+          border-bottom-color: transparent;
+        }
+
+        .multi-file-tab-close svg {
+          top: 0;
+        }
+      }
+    }
+  }
 }
 
 .multi-file-tab {
@@ -634,7 +671,8 @@ $ide-commit-header-height: 48px;
     height: 100%;
   }
 
-  .nav-links {
+  .nav-links,
+  .gl-tabs-nav {
     height: 30px;
   }
 
@@ -976,17 +1014,25 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-nav-form {
-  .nav-links li {
+  .nav-links li,
+  .gl-tabs-nav li {
     width: 50%;
     padding-left: 0;
     padding-right: 0;
 
     a {
       text-align: center;
+      font-size: 14px;
+      line-height: 30px;
 
-      &:not(.active) {
+      &:not(.active),
+      &:not(.gl-tab-nav-item-active) {
         background-color: var(--ide-dropdown-background, $gray-light);
       }
+
+      &.gl-tab-nav-item-active {
+        font-weight: bold;
+      }
     }
   }