@transferwise/components 0.0.0-experimental-c1f5b0b → 0.0.0-experimental-fe160ab

package/src/styles/less/modals.css

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