@transferwise/neptune-css 0.0.0-experimental-b8acfbb → 0.0.0-experimental-9513a35

package/dist/css/navs.css

@@ -13,28 +13,37 @@
   outline-offset: -1px;
   padding-block: 9px 7px;
   padding-inline: 24px;
+  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: var(--wds-font-weight-body-regular);
-  font-size: var(--wds-font-size-body-large);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .nav > li > a:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .nav > .active > a {
+  color: #0097c7;
   color: var(--color-content-accent);
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
 }
 .nav > .active > a:hover,
 .nav > .active > a:focus {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .nav > .active > a:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .nav > .disabled > a:hover,
@@ -46,6 +55,7 @@
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .nav .nav-divider {
@@ -64,6 +74,8 @@
   background-color: #2e4369;
 }
 .nav-tabs {
+  border-block-end: 1px solid rgba(0,0,0,0.10196);
+  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
 .nav-tabs > li {
@@ -72,24 +84,31 @@
 }
 .nav-tabs > li > a {
   margin-inline-end: 2px;
-  line-height: var(--wds-line-height-body-large);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
   border-block-end: 3px solid transparent;
-  font-size: var(--wds-font-size-body-large);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
 }
 .nav-tabs > .active > a {
+  border-block-end: 3px solid rgba(0,0,0,0.10196);
+  border-block-end: 3px solid #0000001a;
   border-block-end: 3px solid var(--color-border-neutral);
 }
 .nav-tabs > .active > a:hover,
 .nav-tabs > .active > a:focus {
+  color: #0097c7;
   color: var(--color-content-accent);
   cursor: default;
 }
 .nav-pills > li {
   float: inline-start;
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
 }
 .nav-pills > li > a {
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
 }
 .nav-stacked > li {
   float: none;
@@ -97,6 +116,7 @@
 .nav-stacked > li > a {
   border-inline-start: 3px solid transparent;
   padding-inline-start: 21px;
+  padding-inline-end: 24px;
   padding-inline-end: var(--size-24);
   transition: color 0.2s ease-in-out;
 }
@@ -105,6 +125,7 @@
 }
 @media (min-width: 1160px) {
   .nav-stacked > li > a {
+    padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
     padding-inline-start: 29px !important;
   }
@@ -115,6 +136,7 @@
 .nav-stacked > li.active > a,
 .nav-stacked > li.active > a:hover,
 .nav-stacked > li.active > a:focus {
+  border-inline-start: 3px solid #00a2dd;
   border-inline-start: 3px solid var(--color-interactive-accent);
   padding-inline-start: 21px;
 }
@@ -137,8 +159,10 @@
 }
 .nav-justified.nav-pills > li > a {
   padding-block: 0;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
-  line-height: var(--wds-line-height-body-large);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
 }
 @media (min-width: 840px) {
   .nav-justified-2-p-x {
@@ -182,12 +206,15 @@
 }
 .nav-tabs-justified > li > a {
   margin-inline-end: 0;
+  border-block-end: 1px solid rgba(0,0,0,0.10196);
+  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
   border-radius: 3px;
 }
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
   border-block-end: 0;
 }