@transferwise/components 46.159.2 → 46.160.1

package/src/styles/less/neptune-core.css

@@ -156,10 +156,10 @@ sup {
   vertical-align: baseline;
 }
 sub {
-  bottom: -0.25em;
+  inset-block-end: -0.25em;
 }
 sup {
-  top: -0.5em;
+  inset-block-start: -0.5em;
 }
 /*
 Tabular data
@@ -219,7 +219,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 */
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
+  block-size: auto;
 }
 /**
 1. Correct the odd appearance in Chrome and Safari.
@@ -459,80 +459,40 @@ textarea::placeholder {
 }
 ol,
 ul {
-  margin: 0 0 24px;
-  margin: 0 0 var(--size-24);
-  padding: 0 0 0 calc(48px - 10px);
-  padding: 0 0 0 calc(var(--size-48) - var(--size-10));
-}
-[dir="rtl"] ol,
-[dir="rtl"] ul {
-  padding: 0 calc(48px - 10px) 0 0;
-  padding: 0 calc(var(--size-48) - var(--size-10)) 0 0;
+  margin-block: 0 24px;
+  margin-block: 0 var(--size-24);
+  margin-inline: 0;
+  padding-block: 0 0;
+  padding-inline: calc(48px - 10px) 0;
+  padding-inline: calc(var(--size-48) - var(--size-10)) 0;
 }
 ol ol,
 ul ol,
 ol ul,
 ul ul {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .list-unstyled {
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style: none;
 }
-[dir="rtl"] .list-unstyled {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
-}
 .list-inline {
-  margin-left: calc(4px * -1);
-  margin-left: calc(var(--size-4) * -1);
-  padding-left: 0;
+  margin-inline-start: calc(4px * -1);
+  margin-inline-start: calc(var(--size-4) * -1);
+  padding-inline-start: 0;
   list-style: none;
 }
-[dir="rtl"] .list-inline {
-  margin-right: calc(4px * -1);
-  margin-right: calc(var(--size-4) * -1);
-  margin-left: 0;
-  margin-left: initial;
-}
-[dir="rtl"] .list-inline {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
-}
 .list-inline > li {
   display: inline-block;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-left: 4px;
-  padding-left: var(--size-4);
-}
-[dir="rtl"] .list-inline > li {
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 0;
-  padding-right: initial;
-}
-[dir="rtl"] .list-inline > li {
-  padding-right: 4px;
-  padding-right: var(--size-4);
-  padding-left: 0;
-  padding-left: initial;
-}
-[dir="rtl"] .list-inline > li {
-  border-left: 1px solid rgba(0,0,0,0.10196);
-  border-left: 1px solid var(--color-border-neutral);
-}
-html:not([dir="rtl"]) .list-inline > li {
-  border-right: 1px solid rgba(0,0,0,0.10196);
-  border-right: 1px solid var(--color-border-neutral);
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+  padding-inline-start: 4px;
+  padding-inline-start: var(--size-4);
+  border-inline-end: 1px solid rgba(0,0,0,0.10196);
+  border-inline-end: 1px solid var(--color-border-neutral);
 }
-[dir="rtl"] .list-inline > li:last-child {
-  border-left: 0  ;
-}
-html:not([dir="rtl"]) .list-inline > li:last-child {
-  border-right: 0  ;
+.list-inline > li:last-child {
+  border-inline-end: 0  ;
 }
 dt,
 dd {
@@ -544,15 +504,15 @@ dt {
   font-size: var(--font-size-14);
 }
 dd {
-  margin-bottom: 16px;
-  margin-bottom: var(--size-16);
+  margin-block-end: 16px;
+  margin-block-end: var(--size-16);
   color: #37517e;
   color: var(--color-content-primary);
 }
 @media (min-width: 600px) {
   dd {
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
   }
 }
 /* Deprecated - use the Neptune Web DefinitionList component */
@@ -566,32 +526,18 @@ dd {
 }
 @media (min-width: 600px) {
   .dl-horizontal dt {
-    float: left;
-    clear: left;
-    width: 156px;
+    float: inline-start;
+    clear: inline-start;
+    inline-size: 156px;
     overflow: hidden;
     white-space: nowrap;
-    text-align: left;
+    text-align: start;
     text-overflow: ellipsis;
   }
-  [dir="rtl"] .dl-horizontal dt {
-    float: right;
-  }
-  [dir="rtl"] .dl-horizontal dt {
-    clear: right;
-  }
-  [dir="rtl"] .dl-horizontal dt {
-    text-align: right;
-  }
   .dl-horizontal dd {
-    margin-bottom: 8px;
-    margin-bottom: var(--size-8);
-    margin-left: 180px;
-  }
-  [dir="rtl"] .dl-horizontal dd {
-    margin-right: 180px;
-    margin-left: 0;
-    margin-left: initial;
+    margin-block-end: 8px;
+    margin-block-end: var(--size-8);
+    margin-inline-start: 180px;
   }
 }
 /* Deprecated - use the Neptune Web DefinitionList component */
@@ -604,32 +550,33 @@ dd {
 }
 .dl-horizontal-item dd {
   flex: 1 1 auto;
-  text-align: right;
+  text-align: end;
   word-break: break-all;
 }
-[dir="rtl"] .dl-horizontal-item dd {
-  text-align: left;
-}
 hr {
-  margin: 16px auto;
-  margin: var(--size-16) auto;
+  margin-block: 16px;
+  margin-block: var(--size-16);
+  margin-inline: auto;
   border: 0;
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
+  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);
 }
 .bg-primary hr {
-  border-top: 1px solid rgba(255,255,255,0.10196);
+  border-block-start: 1px solid rgba(255,255,255,0.10196);
 }
 @media (min-width: 600px) {
   hr {
-    margin: 24px auto;
-    margin: var(--size-24) auto;
+    margin-block: 24px;
+    margin-block: var(--size-24);
+    margin-inline: auto;
   }
 }
 @media (min-width: 1160px) {
   hr {
-    margin: 32px auto;
-    margin: var(--size-32) auto;
+    margin-block: 32px;
+    margin-block: var(--size-32);
+    margin-inline: auto;
   }
 }
 table {
@@ -646,8 +593,8 @@ object {
 }
 img,
 video {
-  max-width: 100%;
-  height: auto;
+  max-inline-size: 100%;
+  block-size: auto;
   vertical-align: middle;
 }
 .img-rounded {
@@ -665,8 +612,8 @@ video {
 }
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
@@ -676,8 +623,8 @@ video {
 .sr-only-focusable:active,
 .sr-only-focusable:focus {
   position: static;
-  width: auto;
-  height: auto;
+  inline-size: auto;
+  block-size: auto;
   margin: 0;
   overflow: visible;
   clip: auto;
@@ -913,8 +860,8 @@ h6 + ol:not(.list-unstyled),
 .np-text-title-subsection + ol:not(.list-unstyled),
 .np-text-title-body + ol:not(.list-unstyled),
 .np-text-title-group + ol:not(.list-unstyled) {
-  margin-top: 8px;
-  margin-top: var(--size-8);
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
 }
 /* DEPRECATED: use .np-text-title-screen instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -922,8 +869,7 @@ h6 + ol:not(.list-unstyled),
 .title-1,
 h1,
 .np-text-title-screen {
-  margin-bottom: 0;
-  margin-bottom: initial;
+  margin-block-end: initial;
   font-size: 1.875rem;
   font-size: var(--font-size-30);
   font-weight: 600;
@@ -937,8 +883,7 @@ h1,
 .title-2,
 h2,
 .np-text-title-section {
-  margin-bottom: 0;
-  margin-bottom: initial;
+  margin-block-end: initial;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   font-size: 1.625rem;
@@ -952,8 +897,7 @@ h2,
 .title-3,
 h3,
 .np-text-title-subsection {
-  margin-bottom: 0;
-  margin-bottom: initial;
+  margin-block-end: initial;
   font-size: 1.375rem;
   font-size: var(--font-size-22);
   font-weight: 600;
@@ -991,8 +935,8 @@ h6,
 }
 /* DEPRECATED: use .np-text-title-body instead */
 .lead {
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
   font-size: 1.25rem;
   font-size: var(--font-size-20);
   line-height: 1.2;
@@ -1593,76 +1537,77 @@ a,
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-1 {
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 3.73333333rem;
 }
 @media (min-width: 840px) {
   .display-1 {
-    margin-bottom: 8px;
-    margin-bottom: var(--size-8);
+    margin-block-end: 8px;
+    margin-block-end: var(--size-8);
     font-size: 6.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-2 {
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 3.73333333rem;
 }
 @media (min-width: 840px) {
   .display-2 {
-    margin-bottom: 16px;
-    margin-bottom: var(--size-16);
+    margin-block-end: 16px;
+    margin-block-end: var(--size-16);
     font-size: 5.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-3 {
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
+  margin-block-end: 8px;
+  margin-block-end: var(--size-8);
   font-size: 2.8rem;
 }
 @media (min-width: 840px) {
   .display-3 {
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     font-size: 4.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-4 {
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
+  margin-block-end: 4px;
+  margin-block-end: var(--size-4);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 1.86666667rem;
 }
 @media (min-width: 840px) {
   .display-4 {
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     font-size: 3.5rem;
   }
 }
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-5 {
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
+  margin-block-end: 4px;
+  margin-block-end: var(--size-4);
   /* stylelint-disable-next-line number-max-precision */
   font-size: 1.86666667rem;
 }
 @media (min-width: 840px) {
   .display-5 {
-    margin-bottom: 8px;
-    margin-bottom: var(--size-8);
+    margin-block-end: 8px;
+    margin-block-end: var(--size-8);
     font-size: 2.625rem;
   }
 }
 p {
-  margin: 0 0 16px;
-  margin: 0 0 var(--size-16);
+  margin-block: 0 16px;
+  margin-block: 0 var(--size-16);
+  margin-inline: 0;
 }
 p + h1,
 p + h2,
@@ -1686,9 +1631,9 @@ p + .np-text-title-section,
 p + .np-text-title-subsection,
 p + .np-text-title-body,
 p + .np-text-title-group {
-  margin-top: 0;
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
+  margin-block-start: 0;
+  margin-block-end: 8px;
+  margin-block-end: var(--size-8);
 }
 .control-1,
 .control-2 {
@@ -1710,34 +1655,30 @@ mark,
   background-color: var(--color-background-warning);
 }
 address {
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
   font-style: normal;
 }
 blockquote {
-  margin: 16px 0;
-  margin: var(--size-16) 0;
-  padding: 0 16px 0 calc(16px - 2px);
-  padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
+  margin-block: 16px;
+  margin-block: var(--size-16);
+  margin-inline: 0;
+  padding-block: 0 0;
+  padding-inline: calc(16px - 2px) 16px;
+  padding-inline: calc(var(--size-16) - 2px) var(--size-16);
   font-size: 1rem;
   font-size: var(--font-size-16);
-}
-[dir="rtl"] blockquote {
-  border-right: 2px solid #0097c7;
-  border-right: 2px solid var(--color-content-accent);
-}
-html:not([dir="rtl"]) blockquote {
-  border-left: 2px solid #0097c7;
-  border-left: 2px solid var(--color-content-accent);
+  border-inline-start: 2px solid #0097c7;
+  border-inline-start: 2px solid var(--color-content-accent);
 }
 blockquote p {
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
+  margin-block-end: 8px;
+  margin-block-end: var(--size-8);
 }
 blockquote p:last-child,
 blockquote ol:last-child,
 blockquote ul:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 blockquote footer {
   display: block;
@@ -1766,36 +1707,12 @@ blockquote footer::before {
   }
 }
 .blockquote-reverse {
-  padding-right: 22px;
-  padding-left: 0;
-  text-align: right;
-}
-[dir="rtl"] .blockquote-reverse {
-  padding-left: 22px;
-  padding-right: 0;
-  padding-right: initial;
-}
-[dir="rtl"] .blockquote-reverse {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
-}
-[dir="rtl"] .blockquote-reverse {
-  text-align: left;
-}
-[dir="rtl"] .blockquote-reverse {
-  border-left: 2px solid #0097c7;
-  border-left: 2px solid var(--color-content-accent);
-}
-html:not([dir="rtl"]) .blockquote-reverse {
-  border-right: 2px solid #0097c7;
-  border-right: 2px solid var(--color-content-accent);
-}
-[dir="rtl"] .blockquote-reverse {
-  border-right: 0  ;
-}
-html:not([dir="rtl"]) .blockquote-reverse {
-  border-left: 0  ;
+  padding-inline-end: 22px;
+  padding-inline-start: 0;
+  text-align: end;
+  border-inline-end: 2px solid #0097c7;
+  border-inline-end: 2px solid var(--color-content-accent);
+  border-inline-start: 0  ;
 }
 .blockquote-reverse footer::before {
   content: "";
@@ -1810,8 +1727,9 @@ kbd {
   border-radius: var(--radius-small);
 }
 pre {
-  margin: 0 0 24px;
-  margin: 0 0 var(--size-24);
+  margin-block: 0 24px;
+  margin-block: 0 var(--size-24);
+  margin-inline: 0;
   padding: 16px;
   padding: var(--size-16);
   overflow: auto;
@@ -1834,8 +1752,9 @@ pre code {
   border-radius: 0;
 }
 code {
-  padding: 2px 4px;
-  padding: 2px var(--size-4);
+  padding-block: 2px;
+  padding-inline: 4px;
+  padding-inline: var(--size-4);
   font-size: 90%;
   color: #5d7079;
   color: var(--color-content-secondary);
@@ -1843,8 +1762,9 @@ code {
   background-color: var(--color-background-neutral);
 }
 kbd {
-  padding: 2px 4px;
-  padding: 2px var(--size-4);
+  padding-block: 2px;
+  padding-inline: 4px;
+  padding-inline: var(--size-4);
   font-size: 90%;
   color: #fff;
   background-color: #333;
@@ -1856,16 +1776,10 @@ kbd kbd {
   font-size: 100%;
 }
 .text-xs-left {
-  text-align: left;
-}
-[dir="rtl"] .text-xs-left {
-  text-align: right;
+  text-align: start;
 }
 .text-xs-right {
-  text-align: right;
-}
-[dir="rtl"] .text-xs-right {
-  text-align: left;
+  text-align: end;
 }
 .text-xs-center {
   text-align: center;
@@ -1878,16 +1792,10 @@ kbd kbd {
 }
 @media (min-width: 600px) {
   .text-sm-left {
-    text-align: left;
-  }
-  [dir="rtl"] .text-sm-left {
-    text-align: right;
+    text-align: start;
   }
   .text-sm-right {
-    text-align: right;
-  }
-  [dir="rtl"] .text-sm-right {
-    text-align: left;
+    text-align: end;
   }
   .text-sm-center {
     text-align: center;
@@ -1901,16 +1809,10 @@ kbd kbd {
 }
 @media (min-width: 840px) {
   .text-md-left {
-    text-align: left;
-  }
-  [dir="rtl"] .text-md-left {
-    text-align: right;
+    text-align: start;
   }
   .text-md-right {
-    text-align: right;
-  }
-  [dir="rtl"] .text-md-right {
-    text-align: left;
+    text-align: end;
   }
   .text-md-center {
     text-align: center;
@@ -1925,19 +1827,11 @@ kbd kbd {
 @media (min-width: 1160px) {
   .text-lg-left,
   .text-xl-left {
-    text-align: left;
-  }
-  [dir="rtl"] .text-lg-left,
-  [dir="rtl"] .text-xl-left {
-    text-align: right;
+    text-align: start;
   }
   .text-lg-right,
   .text-xl-right {
-    text-align: right;
-  }
-  [dir="rtl"] .text-lg-right,
-  [dir="rtl"] .text-xl-right {
-    text-align: left;
+    text-align: end;
   }
   .text-lg-center,
   .text-xl-center {
@@ -1978,7 +1872,7 @@ kbd kbd {
   overflow: hidden;
 }
 .text-max-width {
-  max-width: 600px;
+  max-inline-size: 600px;
 }
 .text-word-break {
   word-break: break-all;

package/src/styles/less/neptune-social-media.css

@@ -78,44 +78,20 @@
 .btn-google {
   background-position: 11px center;
   background-repeat: no-repeat;
-  padding-left: 44px;
-}
-[dir="rtl"] .btn-facebook,
-[dir="rtl"] .btn-google {
-  padding-right: 44px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-start: 44px;
 }
 .btn-facebook.btn-lg,
 .btn-google.btn-lg {
   background-position-x: 14px;
-  padding-left: 50px;
-}
-[dir="rtl"] .btn-facebook.btn-lg,
-[dir="rtl"] .btn-google.btn-lg {
-  padding-right: 50px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-start: 50px;
 }
 .btn-facebook.btn-block,
 .btn-google.btn-block {
-  padding-right: 44px;
-}
-[dir="rtl"] .btn-facebook.btn-block,
-[dir="rtl"] .btn-google.btn-block {
-  padding-left: 44px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-end: 44px;
 }
 .btn-facebook.btn-block.btn-lg,
 .btn-google.btn-block.btn-lg {
-  padding-right: 50px;
-}
-[dir="rtl"] .btn-facebook.btn-block.btn-lg,
-[dir="rtl"] .btn-google.btn-block.btn-lg {
-  padding-left: 50px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-end: 50px;
 }
 [dir="rtl"] .btn-facebook,
 [dir="rtl"] .btn-google {
@@ -125,12 +101,12 @@
 [dir="rtl"] .btn-google,
 [dir="rtl"] .btn-facebook.btn-lg,
 [dir="rtl"] .btn-google.btn-lg {
-  padding-left: 24px;
+  padding-inline-start: 24px;
 }
 [dir="rtl"] .btn-facebook.btn-block,
 [dir="rtl"] .btn-google.btn-block {
-  padding-right: 44px;
-  padding-left: 44px;
+  padding-inline-end: 44px;
+  padding-inline-start: 44px;
 }
 [dir="rtl"] .btn-facebook.btn-lg,
 [dir="rtl"] .btn-google.btn-lg {
@@ -138,7 +114,7 @@
 }
 [dir="rtl"] .btn-facebook.btn-lg.btn-block,
 [dir="rtl"] .btn-google.btn-lg.btn-block {
-  padding-right: 50px;
-  padding-left: 50px;
+  padding-inline-end: 50px;
+  padding-inline-start: 50px;
 }
 /* stylelint-enable */