From 3e5bf5dd58bfeb8fe80e51ac15a2ef53db741362 Mon Sep 17 00:00:00 2001
From: Lily Doo <doomwyte@gmail.com>
Date: Mon, 5 Nov 2018 15:49:49 -0800
Subject: [PATCH] replace file tab span border with ::before (#7234)

---
 src/components/Editor/Tab.js   |  1 -
 src/components/Editor/Tabs.css | 49 +++++++++++++++++-----------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/Editor/Tab.js b/src/components/Editor/Tab.js
index 554a0f8c59..89af987116 100644
--- a/src/components/Editor/Tab.js
+++ b/src/components/Editor/Tab.js
@@ -192,7 +192,6 @@ class Tab extends PureComponent<Props> {
         onContextMenu={e => this.onTabContextMenu(e, sourceId)}
         title={getFileURL(source)}
       >
-        <span className="source-tab-line" />
         <SourceIcon
           source={source}
           shouldHide={icon => ["file", "javascript"].includes(icon)}
diff --git a/src/components/Editor/Tabs.css b/src/components/Editor/Tabs.css
index 21ad7ac027..975b63e5cb 100644
--- a/src/components/Editor/Tabs.css
+++ b/src/components/Editor/Tabs.css
@@ -53,6 +53,19 @@
   font-size: 12px;
 }
 
+.source-tab::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: transparent;
+  transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
+  opacity: 0;
+  transform: scaleX(0);
+}
+
 .source-tab:first-child {
   margin-inline-start: 0;
 }
@@ -61,6 +74,12 @@
   background: linear-gradient(var(--theme-toolbar-hover) 28px, transparent 1px);
 }
 
+.source-tab:not(.active):hover::before {
+  background: var(--tab-line-hover-color);
+  opacity: 1;
+  transform: scaleX(1);
+}
+
 .source-tab.active {
   color: var(--theme-toolbar-selected-color);
   border-bottom-color: transparent;
@@ -69,6 +88,12 @@
   background-color: var(--theme-body-background);
 }
 
+.source-tab.active::before {
+  background: var(--tab-line-selected-color);
+  opacity: 1;
+  transform: scaleX(1);
+}
+
 .theme-dark .source-tab.active {
   color: var(--theme-toolbar-selected-color);
 }
@@ -151,27 +176,3 @@ html[dir="rtl"] img.moreTabs {
 .source-tab:hover .close-btn {
   visibility: visible;
 }
-
-.source-tab-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: transparent;
-  transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.source-tab:not(.active):hover .source-tab-line {
-  background: var(--tab-line-hover-color);
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-.source-tab.active .source-tab-line {
-  background: var(--tab-line-selected-color);
-  opacity: 1;
-  transform: scaleX(1);
-}