Only apply bottom border to inactive tabs

microsoft · Sep 16, 2020 · 6b583ac · 6b583ac
1 parent f0fed35
commit 6b583ac
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
@@ -126,7 +126,7 @@ export class TabsTitleControl extends TitleControl {
  // on: multiple rows with flex side-by-side
  this.tabsAndActionsContainer = document.createElement('div');
  this.tabsAndActionsContainer.classList.add('tabs-and-actions-container');
- this.tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
+ this.tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
  this.titleContainer.appendChild(this.tabsAndActionsContainer);
 
  // Tabs Container
@@ -540,7 +540,7 @@ export class TabsTitleControl extends TitleControl {
  private updateMultiLineTabs(): void {
  const tabsAndActionsContainer = assertIsDefined(this.tabsAndActionsContainer);
 
- this.tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
+ tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
  }
 
  updateStyles(): void {
@@ -1051,7 +1051,6 @@ export class TabsTitleControl extends TitleControl {
  // Borders / Outline
  const borderRightColor = ((isTabLastSticky ? this.getColor(TAB_LAST_PINNED_BORDER) : undefined) || this.getColor(TAB_BORDER) || this.getColor(contrastBorder));
  tabContainer.style.borderRight = borderRightColor ? `1px solid ${borderRightColor}` : '';
- tabContainer.style.borderBottom = borderRightColor && this.accessor.partOptions.multiLineTabs ? `1px solid ${borderRightColor}` : ''; // bottom border when wrapping multi-line
  tabContainer.style.outlineColor = this.getColor(activeContrastBorder) || '';
 
  // Settings
@@ -1190,6 +1189,10 @@ export class TabsTitleControl extends TitleControl {
  tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
  tabContainer.style.boxShadow = '';
 
+ // bottom border when wrapping multi-line
+ const borderBottom = this.getColor(TAB_BORDER) || this.getColor(contrastBorder);
+ tabContainer.style.borderBottom = borderBottom && this.accessor.partOptions.multiLineTabs ? `1px solid ${borderBottom}` : '';
+
  // Label
  tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
  }