replace file tab span border with ::before (#7234)

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)}

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);
-}