style tabs as per design

Author: rosieyohannan

ui/src/css/tabs.css

@@ -9,32 +9,43 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  border-bottom: 1px solid var(--color-vapor);
 }
 
 .tablist > ul li {
   align-items: center;
   background-color: #fff;
   cursor: pointer;
   display: flex;
-  font-weight: bold;
+  font-weight: 400;
   line-height: 1.5;
-  padding: 0.25em 1em;
+  padding: 1em 1px;
+  margin-right: 1.5em;
   position: relative;
 }
 
+.tablist > ul li.is-selected {
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-accent-green);
+}
+
+.tablist > ul li p {
+  font-weight: inherit;
+}
+
 .tablist > ul li:focus-visible {
   outline: none;
 }
 
-.tablist.ulist,
-.tablist.ulist > ul li {
+.tablist.ulist {
   margin: 0;
 }
 
-.tablist.ulist > ul li + li {
-  margin-left: 0.25em;
+.tablist.ulist > ul li {
+  margin: 0 1.5em 0 0;
 }
 
+/* Disabled to allow borders to show
 .tabs .tablist li::after {
   content: "";
   display: block;
@@ -44,14 +55,14 @@
   left: 0;
   right: 0;
 }
+*/
 
 .tabs.is-loading .tablist li:not(:first-child),
 .tabs:not(.is-loading) .tablist li:not(.is-selected) {
-  background-color: #f5f5f5;
+  background-color: transparent;
 }
 
-.tabs.is-loading .tablist li:first-child::after,
-.tabs:not(.is-loading) .tablist li.is-selected::after {
+.tabs.is-loading .tablist li:first-child::after {
   background-color: #fff;
 }
 
@@ -69,21 +80,7 @@
 
 .tabpanel {
   background-color: #fff;
-  padding: 1.25em;
-}
-
-.tablist > ul li {
-  border: 1px solid #dcdcdc;
-  border-radius: 8px 8px 0 0;
-}
-
-.tabpanel {
-  border: 1px solid #dcdcdc;
-  border-radius: 0 0 8px 8px;
-}
-
-.tablist > ul li {
-  border-bottom: 0;
+  padding: 1.25em 0;
 }
 
 .tabs.is-loading .tabpanel + .tabpanel,