@transferwise/components 46.159.1 → 46.160.0

package/src/styles/less/flex.css

@@ -399,198 +399,102 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
-  margin-right: calc(-1 * 16px);
-  margin-right: calc(-1 * var(--size-16));
-  margin-left: calc(-1 * 16px);
-  margin-left: calc(-1 * var(--size-16));
-}
-[dir="rtl"] .flex__inner {
-  margin-left: calc(-1 * 16px);
-  margin-left: calc(-1 * var(--size-16));
-  margin-right: 0;
-  margin-right: initial;
-}
-[dir="rtl"] .flex__inner {
-  margin-right: calc(-1 * 16px);
-  margin-right: calc(-1 * var(--size-16));
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: calc(-1 * 16px);
+  margin-inline-end: calc(-1 * var(--size-16));
+  margin-inline-start: calc(-1 * 16px);
+  margin-inline-start: calc(-1 * var(--size-16));
 }
 @media (min-width: 600px) {
   .flex__inner {
-    margin-right: calc(-1 * 24px);
-    margin-right: calc(-1 * var(--size-24));
-    margin-left: calc(-1 * 24px);
-    margin-left: calc(-1 * var(--size-24));
-  }
-  [dir="rtl"] .flex__inner {
-    margin-left: calc(-1 * 24px);
-    margin-left: calc(-1 * var(--size-24));
-    margin-right: 0;
-    margin-right: initial;
-  }
-  [dir="rtl"] .flex__inner {
-    margin-right: calc(-1 * 24px);
-    margin-right: calc(-1 * var(--size-24));
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: calc(-1 * 24px);
+    margin-inline-end: calc(-1 * var(--size-24));
+    margin-inline-start: calc(-1 * 24px);
+    margin-inline-start: calc(-1 * var(--size-24));
   }
 }
 @media (min-width: 840px) {
   .flex__inner {
-    margin-right: calc(-1 * 32px);
-    margin-right: calc(-1 * var(--size-32));
-    margin-left: calc(-1 * 32px);
-    margin-left: calc(-1 * var(--size-32));
-  }
-  [dir="rtl"] .flex__inner {
-    margin-left: calc(-1 * 32px);
-    margin-left: calc(-1 * var(--size-32));
-    margin-right: 0;
-    margin-right: initial;
-  }
-  [dir="rtl"] .flex__inner {
-    margin-right: calc(-1 * 32px);
-    margin-right: calc(-1 * var(--size-32));
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: calc(-1 * 32px);
+    margin-inline-end: calc(-1 * var(--size-32));
+    margin-inline-start: calc(-1 * 32px);
+    margin-inline-start: calc(-1 * var(--size-32));
   }
 }
 @media (min-width: 1160px) {
   .flex__inner {
-    margin-right: calc(-1 * 48px);
-    margin-right: calc(-1 * var(--size-48));
-    margin-left: calc(-1 * 48px);
-    margin-left: calc(-1 * var(--size-48));
-  }
-  [dir="rtl"] .flex__inner {
-    margin-left: calc(-1 * 48px);
-    margin-left: calc(-1 * var(--size-48));
-    margin-right: 0;
-    margin-right: initial;
-  }
-  [dir="rtl"] .flex__inner {
-    margin-right: calc(-1 * 48px);
-    margin-right: calc(-1 * var(--size-48));
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-end: calc(-1 * 48px);
+    margin-inline-end: calc(-1 * var(--size-48));
+    margin-inline-start: calc(-1 * 48px);
+    margin-inline-start: calc(-1 * var(--size-48));
   }
 }
 .flex__item {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-[dir="rtl"] .flex__item {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-  padding-right: 0;
-  padding-right: initial;
-}
-[dir="rtl"] .flex__item {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 16px;
+  padding-inline-end: var(--size-16);
+  padding-inline-start: 16px;
+  padding-inline-start: var(--size-16);
 }
 @media (min-width: 600px) {
   .flex__item {
-    padding-right: 24px;
-    padding-right: var(--size-24);
-    padding-left: 24px;
-    padding-left: var(--size-24);
-  }
-  [dir="rtl"] .flex__item {
-    padding-left: 24px;
-    padding-left: var(--size-24);
-    padding-right: 0;
-    padding-right: initial;
-  }
-  [dir="rtl"] .flex__item {
-    padding-right: 24px;
-    padding-right: var(--size-24);
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 24px;
+    padding-inline-end: var(--size-24);
+    padding-inline-start: 24px;
+    padding-inline-start: var(--size-24);
   }
 }
 @media (min-width: 840px) {
   .flex__item {
-    padding-right: 32px;
-    padding-right: var(--size-32);
-    padding-left: 32px;
-    padding-left: var(--size-32);
-  }
-  [dir="rtl"] .flex__item {
-    padding-left: 32px;
-    padding-left: var(--size-32);
-    padding-right: 0;
-    padding-right: initial;
-  }
-  [dir="rtl"] .flex__item {
-    padding-right: 32px;
-    padding-right: var(--size-32);
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 32px;
+    padding-inline-end: var(--size-32);
+    padding-inline-start: 32px;
+    padding-inline-start: var(--size-32);
   }
 }
 @media (min-width: 1160px) {
   .flex__item {
-    padding-right: 48px;
-    padding-right: var(--size-48);
-    padding-left: 48px;
-    padding-left: var(--size-48);
-  }
-  [dir="rtl"] .flex__item {
-    padding-left: 48px;
-    padding-left: var(--size-48);
-    padding-right: 0;
-    padding-right: initial;
-  }
-  [dir="rtl"] .flex__item {
-    padding-right: 48px;
-    padding-right: var(--size-48);
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 48px;
+    padding-inline-end: var(--size-48);
+    padding-inline-start: 48px;
+    padding-inline-start: var(--size-48);
   }
 }
 .flex__item--4 {
   flex: 0 0 calc(100% / 3);
-  max-width: calc(100% / 3);
+  max-inline-size: calc(100% / 3);
 }
 @media (max-width: 839.98px) {
   .flex__item--4--md {
     flex: 0 0 calc(100% / 3);
-    max-width: calc(100% / 3);
+    max-inline-size: calc(100% / 3);
   }
 }
 .flex__item--8 {
   flex: 0 0 calc(100% / 1.5);
-  max-width: calc(100% / 1.5);
+  max-inline-size: calc(100% / 1.5);
 }
 @media (max-width: 839.98px) {
   .flex__item--8--md {
     flex: 0 0 calc(100% / 1.5);
-    max-width: calc(100% / 1.5);
+    max-inline-size: calc(100% / 1.5);
   }
 }
 .flex__item--6 {
   flex: 0 0 50%;
-  max-width: 50%;
+  max-inline-size: 50%;
 }
 @media (max-width: 839.98px) {
   .flex__item--6--md {
     flex: 0 0 50%;
-    max-width: 50%;
+    max-inline-size: 50%;
   }
 }
 .flex__item--12 {
   flex: 0 0 100%;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 @media (max-width: 839.98px) {
   .flex__item--12--md {
     flex: 0 0 100%;
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 }

package/src/styles/less/footer.css

@@ -7,25 +7,25 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  padding-top: calc(8px * 10);
-  padding-top: calc(var(--size-8) * 10);
-  padding-bottom: calc(8px * 10);
-  padding-bottom: calc(var(--size-8) * 10);
+  padding-block-start: calc(8px * 10);
+  padding-block-start: calc(var(--size-8) * 10);
+  padding-block-end: calc(8px * 10);
+  padding-block-end: calc(var(--size-8) * 10);
 }
 @media (min-width: 600px) {
   .footer {
-    padding-top: calc(8px * 15);
-    padding-top: calc(var(--size-8) * 15);
-    padding-bottom: calc(8px * 15);
-    padding-bottom: calc(var(--size-8) * 15);
+    padding-block-start: calc(8px * 15);
+    padding-block-start: calc(var(--size-8) * 15);
+    padding-block-end: calc(8px * 15);
+    padding-block-end: calc(var(--size-8) * 15);
   }
 }
 @media (min-width: 1160px) {
   .footer {
-    padding-top: calc(8px * 20);
-    padding-top: calc(var(--size-8) * 20);
-    padding-bottom: calc(8px * 20);
-    padding-bottom: calc(var(--size-8) * 20);
+    padding-block-start: calc(8px * 20);
+    padding-block-start: calc(var(--size-8) * 20);
+    padding-block-end: calc(8px * 20);
+    padding-block-end: calc(var(--size-8) * 20);
   }
 }
 .footer .footer-link,
@@ -66,9 +66,10 @@
   color: transparent;
 }
 .footer .icon {
-  margin: 0 5px;
+  margin-block: 0;
+  margin-inline: 5px;
   font-size: 32px !important;
-  width: 24px;
+  inline-size: 24px;
 }
 .footer .link-icon {
   -webkit-text-decoration: none;