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

package/dist/css/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/dist/css/list-group.css

@@ -2,17 +2,23 @@
   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 {
@@ -32,25 +38,76 @@
 }
 .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) {
+  .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-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] {
@@ -61,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 {
@@ -92,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) {
@@ -170,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/dist/css/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/dist/css/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;
   }