From fe0f45efe016cb87d4e0236b70dc6c7c33440289 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 11 Jun 2024 06:35:39 -0700
Subject: [PATCH] Merge pull request #18814 from
 overleaf/mf-new-plans-table-fading-border-radius-plans-tab

[web] Implement gradient border on new plans page table

GitOrigin-RevId: 6ce3047fcd54c1aa3776029d82f16b81484fd03b
---
 .../app/plans/plans-new-design.less           | 51 +++++++++++++++++--
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
index 415ed0868e..774fa11f65 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -70,19 +70,62 @@
         &:focus {
           background-color: unset;
           border: 1px solid var(--emerald-green);
-          border-bottom-color: white;
         }
 
         &:hover {
           background-color: var(--neutral-20);
         }
+
+        // tab navigation focus style
+        &:focus-visible {
+          // https://stackoverflow.com/a/38571103
+          outline: auto 2px Highlight; // firefox
+          outline: auto 5px -webkit-focus-ring-color;
+          background-color: white;
+        }
       }
 
       &.active {
         .plans-new-tab-link {
-          border: 1px solid var(--emerald-green);
-          color: var(--emerald-green);
-          border-bottom-color: white;
+          border: 1px solid white;
+          position: relative;
+
+          // remove the border on tab focus
+          &:focus-visible {
+            &::before {
+              content: unset;
+            }
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            background: border-box
+              linear-gradient(
+                to bottom,
+                @emerald-green 0%,
+                @neutral-20 85%,
+                @neutral-20 100%
+              );
+            -webkit-mask:
+              linear-gradient(white 0 0) padding-box,
+              linear-gradient(white 0 0);
+            mask:
+              linear-gradient(white 0 0) padding-box,
+              linear-gradient(white 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            border-top-right-radius: 8px;
+            border-top-left-radius: 8px;
+            border: 1px solid transparent;
+            border-bottom: 1px solid white;
+
+            // make the border overlap with the .plans-new-tab-link border
+            top: 0;
+            bottom: -2px;
+            left: -1px;
+            right: -1px;
+          }
 
           &:hover {
             background-color: unset;