npm - @transferwise/components - Versions diffs - 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19 - Mend

@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2038) hide show

package/src/styles/less/navbar.less CHANGED Viewed

@@ -29,7 +29,7 @@
 .navbar {
   position: relative;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   margin-bottom: @navbar-margin-bottom;
   border: 0 solid transparent;
@@ -250,9 +250,9 @@
     outline: 0;
   }
-  font-size: var(--wds-font-size-body-large);
-  font-weight: var(--wds-font-weight-title-body);
-  line-height: var(--wds-line-height-body-large);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--line-height-body);
   margin-bottom: 8px;
   color: @color-navy-content-primary;
@@ -344,7 +344,7 @@
       &.navbar-title-link {
         @media (--screen-md) {
-          font-size: var(--wds-font-size-title-body);
+          font-size: var(--font-size-20);
         }
       }
     }
@@ -358,7 +358,7 @@
     > li {
       > a,
       > button {
-        font-size: var(--wds-font-size-body-large);
+        font-size: var(--font-size-16);
         padding: @navbar-padding-mobile;
         -webkit-touch-callout: none; // When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.
       }
@@ -420,7 +420,7 @@
       > a {
         padding-bottom: (@navbar-padding-vertical - 2px);
-        font-size: var(--wds-font-size-body);
+        font-size: var(--font-size-14);
       }
     }
   }
@@ -481,7 +481,7 @@
       .arrow-pointer(@dropdown-arrow-width);
       > li > a {
-        font-size: var(--wds-font-size-body);
+        font-size: var(--font-size-14);
         @media (max-width: @grid-float-breakpoint) {
           position: relative;
@@ -504,7 +504,7 @@
       > .active > a {
         color: var(--color-content-accent-active);
         background-color: transparent;
-        font-weight: var(--wds-font-weight-title-body);
+        font-weight: var(--font-weight-bold);
         &:hover,
         &:focus {
@@ -595,7 +595,7 @@
     .navbar-vertical-align(22);
   }
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
   @media (max-width: @grid-float-breakpoint-max) {
     display: block;
@@ -684,7 +684,7 @@
       > a,
       > .dropdown-toggle {
-        font-weight: var(--wds-font-weight-title-body);
+        font-weight: var(--font-weight-bold);
         &,
         &:hover,
         &:focus {
@@ -727,7 +727,7 @@
         }
         > .active > a {
-          font-weight: var(--wds-font-weight-title-body);
+          font-weight: var(--font-weight-bold);
           &,
           &:hover,
           &:focus {
@@ -804,7 +804,7 @@
       > a,
       > .dropdown-toggle {
         color: var(--color-content-accent-active);
-        font-weight: var(--wds-font-weight-title-body);
+        font-weight: var(--font-weight-bold);
         &,
         &:hover,
         &:focus {
@@ -1105,15 +1105,15 @@
 .navbar-title {
   .float(left);
-  font-size: var(--wds-font-size-title-body);
-  line-height: var(--wds-line-height-title-body);
+  font-size: var(--font-size-20);
+  line-height: var(--line-height-title);
   margin-top: 12px;
   margin-bottom: 12px;
-  font-weight: var(--wds-line-height-title-body);
+  font-weight: var(--font-weight-bold);
 }
 .navbar-subtitle {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   margin-bottom: 8px;
 }
@@ -1201,7 +1201,7 @@
   }
   h1 {
-    line-height: var(--wds-line-height-title-section);
+    line-height: var(--line-height-title);
   }
   .close {
@@ -1256,7 +1256,7 @@
 @media (min-width: @screen-sm-min) {
   .simple-nav .navbar-nav > li > a {
-    font-size: var(--wds-font-size-body-large) !important;
+    font-size: var(--font-size-16) !important;
   }
 }

package/src/styles/less/navs.css CHANGED Viewed

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

package/src/styles/less/navs.less CHANGED Viewed

@@ -30,8 +30,8 @@
       outline-offset: -1px;
       padding: @nav-link-padding;
       color: var(--color-content-primary);
-      font-weight: var(--wds-font-weight-body-regular);
-      font-size: var(--wds-font-size-body-large);
+      font-weight: var(--font-weight-regular);
+      font-size: var(--font-size-16);
       &:hover,
       &:focus {
@@ -47,7 +47,7 @@
   > .active > a {
     color: var(--color-content-accent);
-    font-weight: var(--wds-font-weight-title-body);
+    font-weight: var(--font-weight-semi-bold);
     &:hover,
     &:focus {
@@ -127,11 +127,11 @@
     > a {
       .margin(right, 2px);
-      line-height: var(--wds-line-height-body-large);
+      line-height: var(--line-height-body);
       //border: 1px solid transparent;
       //border-radius: @border-radius-base @border-radius-base 0 0;
       border-bottom: 3px solid transparent;
-      font-size: var(--wds-font-size-body-large);
+      font-size: var(--font-size-16);
     }
   }
@@ -153,11 +153,11 @@
   > li {
     .float(left);
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     // Links rendered as pills
     > a {
-      font-size: var(--wds-font-size-body);
+      font-size: var(--font-size-14);
     }
   }
 }
@@ -231,7 +231,7 @@
   &.nav-pills > li > a {
     padding: 0 var(--size-4);
-    line-height: var(--wds-line-height-body-large);
+    line-height: var(--line-height-body);
   }
 }