@transferwise/neptune-css 0.0.0-experimental-526a2be → 0.0.0-experimental-26ff56b

package/dist/css/link-callout.css

@@ -1,6 +1,5 @@
 .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,23 +2,17 @@
   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: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   transition: all ease 0.15s;
 }
 .panel-group .list-group-item {
@@ -38,76 +32,25 @@
 }
 .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] {
@@ -118,13 +61,9 @@ 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,98 +92,75 @@ 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) {
@@ -254,18 +170,15 @@ 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,17 +20,14 @@
 }
 /* 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,14 +27,11 @@
 .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);
@@ -47,7 +44,6 @@
   box-shadow: none;
 }
 .np-theme-personal .modal-content {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .modal-backdrop {
@@ -77,10 +73,7 @@
 }
 .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 {
@@ -88,24 +81,19 @@
 }
 .modal-title {
   margin: 0;
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  line-height: var(--wds-line-height-title-section);
 }
 .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;
 }
@@ -139,14 +127,12 @@
   .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;
   }