minor styles update

NickRimmer · Jul 15, 2023 · 2924644 · 2924644
1 parent 7a84cf2
commit 2924644
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/src/ui/tab-button/tab-button.styles.scss b/src/ui/tab-button/tab-button.styles.scss
@@ -1,7 +1,7 @@
 .plugin-request-navigator-tab-button {
   position: relative;
   color: var(--hl);
-  padding: 5px 16px 7px 14px;
+  padding: 7px 21px 8px 14px;
   background-color: var(--hl-xs);
   border-radius: 3px 3px 0 0;
   cursor: pointer;
@@ -13,7 +13,9 @@
   white-space: nowrap;
 
   .title {
-    transition: margin-left 0.05s ease-in-out, margin-right 0.05s ease-in-out;
+    transition:
+      margin-left 0.05s ease-in-out,
+      margin-right 0.05s ease-in-out;
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -51,15 +53,33 @@
     top: 0;
     bottom: 0;
     right: 0;
-    padding: 0 6px 0 4px;
+    padding: 0 7px 0 5px;
     display: flex;
     align-items: center;
     padding-top: 1px;
-    transition: color 0.1s ease-in-out, opacity 0.1s ease-in-out;
+    transition:
+      color 0.1s ease-in-out,
+      opacity 0.1s ease-in-out;
+
+    &:before {
+      $size: 8px;
+      content: "";
+      height: 100%;
+      width: $size;
+      position: absolute;
+      left: 0;
+      margin-left: -$size;
+      background: linear-gradient(90deg, transparent 0%, var(--hl-xs) 100%);
+      opacity: 0;
+    }
 
     &:hover {
       color: var(--color-font);
       background-color: var(--hl-xs);
+
+      &:before {
+        opacity: 1;
+      }
     }
   }
 
@@ -93,8 +113,16 @@
       opacity: 0;
     }
   }
+
+  &:has(.btn-close:hover) {
+    // .title {
+    color: var(--hl) !important;
+    // }
+  }
 }
 
 #plugin-request-navigator-hub .plugin-request-navigator-tab-button {
-  transition: color 0.1s ease-in-out, transform 0.2s ease-in-out;
+  transition:
+    color 0.1s ease-in-out,
+    transform 0.2s ease-in-out;
 }
diff --git a/src/ui/tab-button/tab-button.tsx b/src/ui/tab-button/tab-button.tsx
@@ -25,7 +25,9 @@ export const TabButton: FC<TabButtonProps> = (props) => {
         data-request-id={requestId}
         data-title={title}
       >
-        <div className='btn-close' onClick={onClickClose}><i className='fa-solid fa-xmark'></i></div>
+        <div className='btn-close' onClick={onClickClose}>
+          <i className='fa-solid fa-xmark'></i>
+        </div>
         <div className='title'>
           <span className={`method ${method.toLocaleLowerCase()}`}>{method.toUpperCase()}</span>
           <span>{children}</span>