@transferwise/components 46.159.1 → 46.160.0

package/src/styles/less/modals.css

@@ -5,10 +5,10 @@
   display: none;
   overflow: hidden;
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: 1050;
   -webkit-overflow-scrolling: touch;
   outline: 0;
@@ -26,7 +26,7 @@
 }
 .modal-dialog {
   position: relative;
-  width: auto;
+  inline-size: auto;
   margin: 16px;
   margin: var(--size-16);
 }
@@ -52,10 +52,10 @@
 }
 .modal-backdrop {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: 1040;
   background-color: #37517e;
 }
@@ -77,13 +77,14 @@
 }
 .modal-header {
   padding: 24px;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-  min-height: calc(24px + 24px);
-  min-height: calc(24px + var(--size-24));
+  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 {
-  margin-top: -2px;
+  margin-block-start: -2px;
 }
 .modal-title {
   margin: 0;
@@ -95,53 +96,37 @@
   padding: 24px;
 }
 .modal-footer {
-  padding: 16px 24px;
-  padding: var(--size-16) 24px;
-  text-align: right;
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-}
-[dir="rtl"] .modal-footer {
-  text-align: left;
+  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-left: 8px;
-  margin-left: var(--size-8);
-  margin-bottom: 0;
-}
-[dir="rtl"] .modal-footer .btn + .btn {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-start: 8px;
+  margin-inline-start: var(--size-8);
+  margin-block-end: 0;
 }
 .modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
-}
-[dir="rtl"] .modal-footer .btn-group .btn + .btn {
-  margin-right: -1px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-start: -1px;
 }
 .modal-footer .btn-block + .btn-block {
-  margin-left: 0;
-}
-[dir="rtl"] .modal-footer .btn-block + .btn-block {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-start: 0;
 }
 .modal-scrollbar-measure {
   position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
+  inset-block-start: -9999px;
+  inline-size: 50px;
+  block-size: 50px;
   overflow: scroll;
 }
 @media (min-width: 600px) {
   .modal-dialog {
-    width: 564px;
-    margin: 32px auto;
+    inline-size: 564px;
+    margin-block: 32px;
+    margin-inline: auto;
   }
   .modal-content {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
@@ -152,34 +137,39 @@
     box-shadow: none;
   }
   .modal-header {
-    padding: 28px 32px;
-    min-height: calc(28px + 24px);
-    min-height: calc(28px + var(--size-24));
+    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: 16px 32px;
-    padding: var(--size-16) 32px;
+    padding-block: 16px;
+    padding-block: var(--size-16);
+    padding-inline: 32px;
   }
 }
 @media (min-width: 600px) {
   .modal-sm,
   .modal-lg {
-    width: auto;
-    margin: 32px 24px;
+    inline-size: auto;
+    margin-block: 32px;
+    margin-inline: 24px;
   }
 }
 @media (min-width: 320.02px) {
   .modal-sm {
-    width: 300px;
-    margin: 32px auto;
+    inline-size: 300px;
+    margin-block: 32px;
+    margin-inline: auto;
   }
 }
 @media (min-width: 840px) {
   .modal-lg {
-    width: 824px;
-    margin: 32px auto;
+    inline-size: 824px;
+    margin-block: 32px;
+    margin-inline: auto;
   }
 }