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

package/build/styles/styles/less/link-callout.css

@@ -1,5 +1,6 @@
 .link-callout > .tw-icon-chevron-up {
   display: inline-block;
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
   pointer-events: none;
   transition: transform 0.2s ease-in-out;

package/build/styles/styles/less/list-group.css

@@ -1,44 +1,24 @@
-.list-group-item-heading {
-  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .list-group-item-heading {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .list-group-item-heading {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .list-group-item-heading {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .list-group-item-heading {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .list-group-item-heading {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.list-group {
+.list-group {
   list-style-type: none;
   margin-block-end: 20px;
   padding-inline-start: 0;
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid #0000001a;
   border-inline-start: 1px solid var(--color-border-neutral);
+  border-inline-end: 1px solid rgba(0,0,0,0.10196);
+  border-inline-end: 1px solid #0000001a;
   border-inline-end: 1px solid var(--color-border-neutral);
 }
 .list-group-item {
   display: block;
   padding-block: 16px 16px;
   padding-inline: 14px 16px;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-inline-start: 2px solid transparent;
   margin-block-start: 1px;
-  line-height: var(--wds-line-height-body-large);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
   transition: all ease 0.15s;
 }
 .panel-group .list-group-item {
@@ -59,7 +39,17 @@
 .list-group-item-heading {
   margin-block-end: 0;
   margin: 0;
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
   word-wrap: break-word;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -93,25 +83,31 @@
 .list-group-item-heading + p,
 .list-group-item-heading + ul:not(.list-unstyled),
 .list-group-item-heading + ol:not(.list-unstyled) {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .list-group-item-text {
   margin-block-end: 0;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 a.list-group-item {
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 a.list-group-item .list-group-item-heading {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 a.list-group-item:not(.disabled):not(:disabled):hover,
 a.list-group-item:not(.disabled):not(:disabled):focus {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #0084b3;
   color: var(--color-content-accent-hover);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .list-group-item[ng-click] {
@@ -122,9 +118,13 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 .list-group-item.active {
   z-index: 2;
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
+  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
+  margin-block-start: 24px;
   margin-block-start: var(--size-24);
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .list-group-item.active:first-child {
@@ -153,75 +153,98 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 .list-group-inactive .list-group-item:hover,
 .list-group-inactive .list-group-item.active {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 @media (min-width: 600px) {
   .list-group-inactive .list-group-item:hover .circle,
   .list-group-inactive .list-group-item.active .circle {
+    background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
   }
 }
 .list-group-inactive .list-group-item.active {
+  margin-block-start: 24px;
   margin-block-start: var(--size-24);
 }
 .list-group-item-success {
+  border-inline-start: 3px solid #008026;
   border-inline-start: 3px solid var(--color-content-positive);
 }
 .list-group-item.list-group-item-success {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-success .list-group-item-text {
+  color: #008026;
   color: var(--color-content-positive);
 }
 a.list-group-item-success {
+  color: #008026;
   color: var(--color-content-positive);
 }
 a.list-group-item-success:hover {
+  color: #008026;
   color: var(--color-content-positive);
 }
 .list-group-item-info {
+  border-inline-start: 3px solid #0097c7;
   border-inline-start: 3px solid var(--color-content-accent);
 }
 .list-group-item.list-group-item-info {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-info .list-group-item-text {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 a.list-group-item-info {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 a.list-group-item-info:hover {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 .list-group-item-warning {
+  border-inline-start: 3px solid #9a6500;
   border-inline-start: 3px solid var(--color-content-warning);
 }
 .list-group-item.list-group-item-warning {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-warning .list-group-item-text {
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 a.list-group-item-warning {
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 a.list-group-item-warning:hover {
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 .list-group-item-danger {
+  border-inline-start: 3px solid #cf2929;
   border-inline-start: 3px solid var(--color-content-negative);
 }
 .list-group-item.list-group-item-danger {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-danger .list-group-item-text {
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 a.list-group-item-danger {
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 a.list-group-item-danger:hover {
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 .list-group:hover .list-group-item:not(.active) {
@@ -231,15 +254,18 @@ a.list-group-item-danger:hover {
   opacity: 0.94;
 }
 .list-group:hover .list-group-item:hover {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group:hover .list-group-item:hover .media {
   opacity: 1;
 }
 .list-group-inactive:hover .list-group-item:not(.active) {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .list-group-inactive:hover .list-group-item:hover {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 @keyframes listSlideOver {

package/build/styles/styles/less/media.css

@@ -20,14 +20,17 @@
 }
 /* Alignment */
 .media-right {
+  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .media-left {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
+    padding-inline-start: 32px;
     padding-inline-start: var(--size-32);
   }
 }

package/build/styles/styles/less/modals.css

@@ -27,11 +27,14 @@
 .modal-dialog {
   position: relative;
   inline-size: auto;
+  margin: 16px;
   margin: var(--size-16);
 }
 .modal-content {
   position: relative;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border: 1px solid rgba(134,167,189,0.10196);
   border: 1px solid var(--color-background-neutral);
   border-radius: 3px;
   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
@@ -44,6 +47,7 @@
   box-shadow: none;
 }
 .np-theme-personal .modal-content {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .modal-backdrop {
@@ -73,7 +77,10 @@
 }
 .modal-header {
   padding: 24px;
+  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);
+  min-block-size: calc(24px + 24px);
   min-block-size: calc(24px + var(--size-24));
 }
 .modal-header .close {
@@ -81,19 +88,24 @@
 }
 .modal-title {
   margin: 0;
-  line-height: var(--wds-line-height-title-section);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 .modal-body {
   position: relative;
   padding: 24px;
 }
 .modal-footer {
+  padding-block: 16px;
   padding-block: var(--size-16);
   padding-inline: 24px;
   text-align: end;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .modal-footer .btn + .btn {
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
   margin-block-end: 0;
 }
@@ -127,12 +139,14 @@
   .modal-header {
     padding-block: 28px;
     padding-inline: 32px;
+    min-block-size: calc(28px + 24px);
     min-block-size: calc(28px + var(--size-24));
   }
   .modal-body {
     padding: 32px;
   }
   .modal-footer {
+    padding-block: 16px;
     padding-block: var(--size-16);
     padding-inline: 32px;
   }