@transferwise/components 0.0.0-experimental-8cc553f → 0.0.0-experimental-769973c

package/build/styles/css/panels.css

@@ -1,9 +1,9 @@
 .panel {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
   background-color: transparent;
   border: 0;
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-inline-start: -16px;
+  margin-inline-end: -16px;
 }
 .panel-body {
   padding: 16px;
@@ -11,14 +11,15 @@
   background-color: var(--color-background-screen);
 }
 .panel-heading {
-  padding: 16px 16px 8px 16px;
+  padding-block: 16px 8px;
+  padding-inline: 16px 16px;
 }
 .panel-heading > .dropdown .dropdown-toggle {
   color: inherit;
 }
 .panel-title {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
   line-height: calc(1.2 + 8px);
   line-height: calc(var(--line-height-title) + 8px);
 }
@@ -31,12 +32,13 @@
 }
 @media (min-width: 576px) {
   .panel {
-    margin-bottom: 24px;
-    margin-left: -24px;
-    margin-right: -24px;
+    margin-block-end: 24px;
+    margin-inline-start: -24px;
+    margin-inline-end: -24px;
   }
   .panel-heading {
-    padding: 16px 24px 8px 24px;
+    padding-block: 16px 8px;
+    padding-inline: 24px 24px;
   }
   .panel-body {
     padding: 24px;
@@ -47,16 +49,17 @@
 }
 @media (min-width: 768px) {
   .panel {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .panel-heading {
-    padding: 16px 0 8px 0;
+    padding-block: 16px 8px;
+    padding-inline: 0 0;
   }
 }
 @media (min-width: 992px) {
   .panel {
-    margin-bottom: 32px;
+    margin-block-end: 32px;
     border-radius: 3px;
   }
   .panel-body {
@@ -72,53 +75,53 @@
     line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
-    margin-top: 8px;
+    margin-block-start: 8px;
   }
 }
 .panel > .list-group,
 .panel > .panel-collapse > .list-group {
-  margin-bottom: 0;
-  border-left: 0;
-  border-right: 0;
+  margin-block-end: 0;
+  border-inline-start: 0;
+  border-inline-end: 0;
 }
 .panel > .list-group .list-group-item,
 .panel > .panel-collapse > .list-group .list-group-item {
   border-radius: 0;
 }
 .panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
 }
 .panel-list-group {
-  margin-bottom: 0;
-  border-left: 0;
-  border-right: 0;
+  margin-block-end: 0;
+  border-inline-start: 0;
+  border-inline-end: 0;
 }
 .list-group + .panel-footer {
-  border-top-width: 0;
+  border-block-start-width: 0;
 }
 .panel > .table,
 .panel > .table-responsive > .table,
 .panel > .panel-collapse > .table {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .panel > .table caption,
 .panel > .table-responsive > .table caption,
 .panel > .panel-collapse > .table caption {
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-inline-start: 32px;
+  padding-inline-end: 32px;
 }
 .panel > .table:first-child,
 .panel > .table-responsive:first-child > .table:first-child {
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
+  border-start-end-radius: 2px;
+  border-start-start-radius: 2px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
 }
 [dir="rtl"] .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
 [dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
@@ -128,7 +131,7 @@
 [dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
 [dir="rtl"] .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
 [dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-right-radius: 2px;
+  border-start-end-radius: 2px;
 }
 html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
@@ -138,7 +141,7 @@ html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first
 html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
 html:not([dir="rtl"]) .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-left-radius: 2px;
+  border-start-start-radius: 2px;
 }
 [dir="rtl"] .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
 [dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
@@ -148,7 +151,7 @@ html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-chil
 [dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
 [dir="rtl"] .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
 [dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-left-radius: 2px;
+  border-start-start-radius: 2px;
 }
 html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
@@ -158,19 +161,19 @@ html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first
 html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
 html:not([dir="rtl"]) .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-right-radius: 2px;
+  border-start-end-radius: 2px;
 }
 .panel > .table:last-child,
 .panel > .table-responsive:last-child > .table:last-child {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-end-end-radius: 2px;
+  border-end-start-radius: 2px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
 }
 [dir="rtl"] .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
 [dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
@@ -180,7 +183,7 @@ html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-chil
 [dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
 [dir="rtl"] .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
 [dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-right-radius: 2px;
+  border-end-end-radius: 2px;
 }
 html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
@@ -190,7 +193,7 @@ html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-ch
 html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
 html:not([dir="rtl"]) .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-left-radius: 2px;
+  border-end-start-radius: 2px;
 }
 [dir="rtl"] .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
 [dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
@@ -200,7 +203,7 @@ html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child
 [dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
 [dir="rtl"] .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
 [dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-left-radius: 2px;
+  border-end-start-radius: 2px;
 }
 html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
@@ -210,17 +213,17 @@ html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-ch
 html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
 html:not([dir="rtl"]) .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-right-radius: 2px;
+  border-end-end-radius: 2px;
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive,
 .panel > .table + .panel-body,
 .panel > .table-responsive + .panel-body {
-  border-top: 1px solid #f2f5f7;
+  border-block-start: 1px solid #f2f5f7;
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
-  border-top: 0;
+  border-block-start: 0;
 }
 .panel > .table-bordered,
 .panel > .table-responsive > .table-bordered {
@@ -238,7 +241,7 @@ html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child
 [dir="rtl"] .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
 [dir="rtl"] .panel > .table-bordered > tfoot > tr > td:first-child,
 [dir="rtl"] .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
-  border-right: 0  ;
+  border-inline-end: 0  ;
 }
 html:not([dir="rtl"]) .panel > .table-bordered > thead > tr > th:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
@@ -252,7 +255,7 @@ html:not([dir="rtl"]) .panel > .table-bordered > tbody > tr > td:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
 html:not([dir="rtl"]) .panel > .table-bordered > tfoot > tr > td:first-child,
 html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
-  border-left: 0  ;
+  border-inline-start: 0  ;
 }
 [dir="rtl"] .panel > .table-bordered > thead > tr > th:last-child,
 [dir="rtl"] .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
@@ -266,7 +269,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 [dir="rtl"] .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
 [dir="rtl"] .panel > .table-bordered > tfoot > tr > td:last-child,
 [dir="rtl"] .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
-  border-left: 0  ;
+  border-inline-start: 0  ;
 }
 html:not([dir="rtl"]) .panel > .table-bordered > thead > tr > th:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
@@ -280,7 +283,7 @@ html:not([dir="rtl"]) .panel > .table-bordered > tbody > tr > td:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
 html:not([dir="rtl"]) .panel > .table-bordered > tfoot > tr > td:last-child,
 html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
-  border-right: 0  ;
+  border-inline-end: 0  ;
 }
 .panel > .table-bordered > thead > tr:first-child > td,
 .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
@@ -290,7 +293,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
 .panel > .table-bordered > tbody > tr:first-child > th,
 .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .panel > .table-bordered > tbody > tr:last-child > td,
 .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
@@ -300,99 +303,93 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
 .panel > .table-bordered > tfoot > tr:last-child > th,
 .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .panel > .table-responsive {
   border: 0;
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .panel > .table tr > :first-child,
 .panel > .table-responsive tr > :first-child {
-  padding-left: 16px;
+  padding-inline-start: 16px;
 }
 [dir="rtl"] .panel > .table tr > :first-child,
 [dir="rtl"] .panel > .table-responsive tr > :first-child {
-  padding-right: 16px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 16px;
+  padding-inline-start: initial;
 }
 .panel > .table tr > :last-child,
 .panel > .table-responsive tr > :last-child {
-  padding-right: 16px;
+  padding-inline-end: 16px;
 }
 [dir="rtl"] .panel > .table tr > :last-child,
 [dir="rtl"] .panel > .table-responsive tr > :last-child {
-  padding-left: 16px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 16px;
+  padding-inline-end: initial;
 }
 @media (min-width: 768px) {
   .panel > .table tr > :first-child,
   .panel > .table-responsive tr > :first-child {
-    padding-left: 24px;
+    padding-inline-start: 24px;
   }
   [dir="rtl"] .panel > .table tr > :first-child,
   [dir="rtl"] .panel > .table-responsive tr > :first-child {
-    padding-right: 24px;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 24px;
+    padding-inline-start: initial;
   }
   .panel > .table tr > :last-child,
   .panel > .table-responsive tr > :last-child {
-    padding-right: 24px;
+    padding-inline-end: 24px;
   }
   [dir="rtl"] .panel > .table tr > :last-child,
   [dir="rtl"] .panel > .table-responsive tr > :last-child {
-    padding-left: 24px;
-    padding-right: 0;
-    padding-right: initial;
+    padding-inline-start: 24px;
+    padding-inline-end: initial;
   }
 }
 @media (min-width: 992px) {
   .panel > .table tr > :first-child,
   .panel > .table-responsive tr > :first-child {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   [dir="rtl"] .panel > .table tr > :first-child,
   [dir="rtl"] .panel > .table-responsive tr > :first-child {
-    padding-right: 32px;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 32px;
+    padding-inline-start: initial;
   }
   .panel > .table tr > :last-child,
   .panel > .table-responsive tr > :last-child {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
   [dir="rtl"] .panel > .table tr > :last-child,
   [dir="rtl"] .panel > .table-responsive tr > :last-child {
-    padding-left: 32px;
-    padding-right: 0;
-    padding-right: initial;
+    padding-inline-start: 32px;
+    padding-inline-end: initial;
   }
 }
 .panel-group {
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
 }
 .panel-group .panel {
-  margin-bottom: 0;
+  margin-block-end: 0;
   border-radius: 3px;
 }
 .panel-group .panel + .panel {
-  margin-top: 8px;
+  margin-block-start: 8px;
 }
 .panel-group .panel-heading {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .panel-group .panel-heading + .panel-collapse > .panel-body,
 .panel-group .panel-heading + .panel-collapse > .list-group {
-  border-top: 1px solid #FFF;
+  border-block-start: 1px solid #FFF;
 }
 .panel-group .panel-footer {
-  border-top: 0;
+  border-block-start: 0;
 }
 .panel-group .panel-footer + .panel-collapse .panel-body {
-  border-bottom: 1px solid #FFF;
+  border-block-end: 1px solid #FFF;
 }
 .panel-default {
   border-color: #e2e6e8 !important;
@@ -402,14 +399,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #e2e6e8;
 }
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #e2e6e8;
+  border-block-start-color: #e2e6e8;
 }
 .panel-default > .panel-heading .badge {
   color: #fff;
   background-color: #4a5860;
 }
 .panel-default > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #e2e6e8;
+  border-block-end-color: #e2e6e8;
 }
 .panel-primary {
   border-color: #37517e !important;
@@ -419,14 +416,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #37517e;
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #37517e;
+  border-block-start-color: #37517e;
 }
 .panel-primary > .panel-heading .badge {
   color: #fff;
   background-color: #fff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #37517e;
+  border-block-end-color: #37517e;
 }
 .panel-success {
   border-color: #2ED06E !important;
@@ -436,14 +433,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #2ED06E;
 }
 .panel-success > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #2ED06E;
+  border-block-start-color: #2ED06E;
 }
 .panel-success > .panel-heading .badge {
   color: #FFF;
   background-color: #1B7940;
 }
 .panel-success > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #2ED06E;
+  border-block-end-color: #2ED06E;
 }
 .panel-info {
   border-color: #00b9ff !important;
@@ -453,14 +450,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #00b9ff;
 }
 .panel-info > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #00b9ff;
+  border-block-start-color: #00b9ff;
 }
 .panel-info > .panel-heading .badge {
   color: #FFF;
   background-color: #00a4df;
 }
 .panel-info > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #00b9ff;
+  border-block-end-color: #00b9ff;
 }
 .panel-warning {
   border-color: #FFA600 !important;
@@ -470,14 +467,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #FFA600;
 }
 .panel-warning > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #FFA600;
+  border-block-start-color: #FFA600;
 }
 .panel-warning > .panel-heading .badge {
   color: #FFF;
   background-color: #9E5F00;
 }
 .panel-warning > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #FFA600;
+  border-block-end-color: #FFA600;
 }
 .panel-danger {
   border-color: #F53636 !important;
@@ -487,21 +484,21 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #F53636;
 }
 .panel-danger > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #F53636;
+  border-block-start-color: #F53636;
 }
 .panel-danger > .panel-heading .badge {
   color: #FFF;
   background-color: #C22E2E;
 }
 .panel-danger > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #F53636;
+  border-block-end-color: #F53636;
 }
 .panel ul:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .panel-group .panel {
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   border: 1px solid #e2e6e8;
 }
 .panel-group .panel-heading,
@@ -517,12 +514,13 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 @media (min-width: 992px) {
   .panel-group .panel .panel-heading,
   .panel-group .panel .panel-footer {
-    padding: 24px 32px;
+    padding-block: 24px;
+    padding-inline: 32px;
   }
 }
 @media (min-width: 768px) {
   .panel {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
 }