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

package/src/styles/less/link-callout.css

@@ -1,11 +1,17 @@
 .link-callout > .tw-icon-chevron-up {
   display: inline-block;
-  margin-inline-start: 8px;
-  margin-inline-start: var(--size-8);
+  margin-left: 8px;
+  margin-left: var(--size-8);
   pointer-events: none;
   transition: transform 0.2s ease-in-out;
   transform: rotate(90deg);
 }
+[dir="rtl"] .link-callout > .tw-icon-chevron-up {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-left: 0;
+  margin-left: initial;
+}
 .link-callout:hover > .tw-icon-chevron-up,
 .link-callout:focus > .tw-icon-chevron-up,
 .callout-container:hover .link-callout > .tw-icon-chevron-up,

package/src/styles/less/list-group.css

@@ -1,43 +1,57 @@
 .list-group {
   list-style-type: none;
-  margin-block-end: 20px;
-  padding-inline-start: 0;
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid #0000001a;
-  border-inline-start: 1px solid var(--color-border-neutral);
-  border-inline-end: 1px solid rgba(0,0,0,0.10196);
-  border-inline-end: 1px solid #0000001a;
-  border-inline-end: 1px solid var(--color-border-neutral);
+  margin-bottom: 20px;
+  padding-left: 0;
+  border-left: 1px solid rgba(0,0,0,0.10196);
+  border-left: 1px solid var(--color-border-neutral);
+  border-right: 1px solid rgba(0,0,0,0.10196);
+  border-right: 1px solid var(--color-border-neutral);
+}
+[dir="rtl"] .list-group {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
 }
 .list-group-item {
   display: block;
-  padding-block: 16px 16px;
-  padding-inline: 14px 16px;
+  padding: 16px 16px 16px 14px;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  border-inline-start: 2px solid transparent;
-  margin-block-start: 1px;
+  margin-top: 1px;
   line-height: 1.5;
   line-height: var(--line-height-body);
   transition: all ease 0.15s;
 }
+[dir="rtl"] .list-group-item {
+  padding: 16px 14px 16px 16px;
+}
+[dir="rtl"] .list-group-item {
+  border-right: 2px solid transparent;
+}
+html:not([dir="rtl"]) .list-group-item {
+  border-left: 2px solid transparent;
+}
 .panel-group .list-group-item {
-  margin-block-start: 0;
+  margin-top: 0;
 }
 @media (min-width: 600px) {
   .list-group-item {
-    padding-block: 24px 24px;
-    padding-inline: 22px 24px;
+    padding: 24px 24px 24px 22px;
+  }
+  [dir="rtl"] .list-group-item {
+    padding: 24px 22px 24px 24px;
   }
 }
 @media (min-width: 1160px) {
   .list-group-item {
-    padding-block: 32px 32px;
-    padding-inline: 30px 32px;
+    padding: 32px 32px 32px 30px;
+  }
+  [dir="rtl"] .list-group-item {
+    padding: 32px 30px 32px 32px;
   }
 }
 .list-group-item-heading {
-  margin-block-end: 0;
+  margin-bottom: 0;
   margin: 0;
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -82,11 +96,11 @@
 .list-group-item-heading + p,
 .list-group-item-heading + ul:not(.list-unstyled),
 .list-group-item-heading + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
+  margin-top: 8px;
+  margin-top: var(--size-8);
 }
 .list-group-item-text {
-  margin-block-end: 0;
+  margin-bottom: 0;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -121,16 +135,16 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
   background-color: var(--color-background-elevated);
   box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
-  margin-block-start: 24px;
-  margin-block-start: var(--size-24);
-  margin-block-end: 24px;
-  margin-block-end: var(--size-24);
+  margin-top: 24px;
+  margin-top: var(--size-24);
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
 }
 .list-group-item.active:first-child {
-  margin-block-start: 1px;
+  margin-top: 1px;
 }
 .list-group-item.active:last-child {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .np-theme-personal--forest-green .list-group-item.active,
 .np-theme-personal--bright-green .list-group-item.active,
@@ -139,8 +153,8 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 @media (min-width: 840px) {
   .list-group-item.active {
-    margin-inline-start: -12px;
-    margin-inline-end: -12px;
+    margin-left: -12px;
+    margin-right: -12px;
   }
   .list-group-item .media-body {
     transition: padding ease 0.15s;
@@ -148,7 +162,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 .list-group-inactive .list-group-item {
   background-color: transparent;
-  margin-block-start: 0;
+  margin-top: 0;
 }
 .list-group-inactive .list-group-item:hover,
 .list-group-inactive .list-group-item.active {
@@ -163,12 +177,16 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
   }
 }
 .list-group-inactive .list-group-item.active {
-  margin-block-start: 24px;
-  margin-block-start: var(--size-24);
+  margin-top: 24px;
+  margin-top: var(--size-24);
 }
-.list-group-item-success {
-  border-inline-start: 3px solid #008026;
-  border-inline-start: 3px solid var(--color-content-positive);
+[dir="rtl"] .list-group-item-success {
+  border-right: 3px solid #008026;
+  border-right: 3px solid var(--color-content-positive);
+}
+html:not([dir="rtl"]) .list-group-item-success {
+  border-left: 3px solid #008026;
+  border-left: 3px solid var(--color-content-positive);
 }
 .list-group-item.list-group-item-success {
   background-color: #ffffff;
@@ -186,9 +204,13 @@ a.list-group-item-success:hover {
   color: #008026;
   color: var(--color-content-positive);
 }
-.list-group-item-info {
-  border-inline-start: 3px solid #0097c7;
-  border-inline-start: 3px solid var(--color-content-accent);
+[dir="rtl"] .list-group-item-info {
+  border-right: 3px solid #0097c7;
+  border-right: 3px solid var(--color-content-accent);
+}
+html:not([dir="rtl"]) .list-group-item-info {
+  border-left: 3px solid #0097c7;
+  border-left: 3px solid var(--color-content-accent);
 }
 .list-group-item.list-group-item-info {
   background-color: #ffffff;
@@ -206,9 +228,13 @@ a.list-group-item-info:hover {
   color: #0097c7;
   color: var(--color-content-accent);
 }
-.list-group-item-warning {
-  border-inline-start: 3px solid #9a6500;
-  border-inline-start: 3px solid var(--color-content-warning);
+[dir="rtl"] .list-group-item-warning {
+  border-right: 3px solid #9a6500;
+  border-right: 3px solid var(--color-content-warning);
+}
+html:not([dir="rtl"]) .list-group-item-warning {
+  border-left: 3px solid #9a6500;
+  border-left: 3px solid var(--color-content-warning);
 }
 .list-group-item.list-group-item-warning {
   background-color: #ffffff;
@@ -226,9 +252,13 @@ a.list-group-item-warning:hover {
   color: #9a6500;
   color: var(--color-content-warning);
 }
-.list-group-item-danger {
-  border-inline-start: 3px solid #cf2929;
-  border-inline-start: 3px solid var(--color-content-negative);
+[dir="rtl"] .list-group-item-danger {
+  border-right: 3px solid #cf2929;
+  border-right: 3px solid var(--color-content-negative);
+}
+html:not([dir="rtl"]) .list-group-item-danger {
+  border-left: 3px solid #cf2929;
+  border-left: 3px solid var(--color-content-negative);
 }
 .list-group-item.list-group-item-danger {
   background-color: #ffffff;
@@ -278,38 +308,43 @@ a.list-group-item-danger:hover {
 @media (max-width: 839.98px) {
   .list-group-slide-out .list-group-item .collapse {
     position: fixed;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: 100vw;
-    block-size: 100vh;
-    block-size: 100dvh;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
     margin: 0;
     overflow-y: auto;
     background-color: #fff;
     animation: listSlideOver 0.15s ease-out forwards;
     z-index: 3;
   }
+  [dir="rtl"] .list-group-slide-out .list-group-item .collapse {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
   .list-group-slide-out .list-group-item .collapse .media-left {
     display: none;
   }
   .list-group-slide-out .list-group-item .collapse .well {
     border-radius: 0;
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .list-group-slide-out .list-group-item.active,
   .list-group-slide-out .list-group-inactive .list-group-item.active {
-    margin-block-start: 1px;
-    margin-block-end: 0;
+    margin-top: 1px;
+    margin-bottom: 0;
     box-shadow: none !important;
   }
   .list-group-slide-out .list-group-item.active .collapse {
-    block-size: 100vh;
-    block-size: 100dvh;
+    height: 100vh;
+    height: 100dvh;
     overflow-y: auto;
-    padding-block-end: 72px;
+    padding-bottom: 72px;
   }
   .list-group-slide-out .list-group-item.active .collapse .well {
-    padding-block-end: 72px;
-    margin-block-end: -72px;
+    padding-bottom: 72px;
+    margin-bottom: -72px;
   }
 }

package/src/styles/less/loaders.css

@@ -1,15 +1,15 @@
 .loader {
   position: relative;
   display: inline-block;
-  block-size: 160px;
-  inline-size: 160px;
+  height: 160px;
+  width: 160px;
 }
 .loader .loader-flag {
-  inset-block-start: 58px;
-  inset-inline-start: 52px;
+  top: 58px;
+  left: 52px;
   position: relative;
-  block-size: 52px;
-  inline-size: 52px;
+  height: 52px;
+  width: 52px;
 }
 .loader .loader-flag-stroke {
   animation: loaderStroke 3.5s infinite;
@@ -17,21 +17,21 @@
 .loader .loader-flag-fill {
   display: block;
   position: absolute;
-  inset-block-start: 1px;
+  top: 1px;
   opacity: 1;
   animation: loaderFill 3.5s infinite;
 }
 .loader .loader-spinner {
-  inline-size: 160px;
-  block-size: 160px;
+  width: 160px;
+  height: 160px;
   position: absolute;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjU0IC01NCAxNjAgMTYwIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTA4LjY2MiIgeTE9IjUyLjE3NSIgeDI9IjEwNy42NjIiIHkyPSI1Mi4xNzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTYwIDAgMCAtODAgLTE3MTcyIDQxNjApIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMDk3YzciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDk3YzciIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTIxNCAyNmMwLTQ0LjItMzUuOC04MC04MC04MFM1NC0xOC4yIDU0IDI2aDJjMC00My4xIDM0LjktNzggNzgtNzhzNzggMzQuOSA3OCA3OGgyeiIvPjwvc3ZnPg==");
   animation: rotating 1.4s linear infinite;
 }
 .loader .loader-flag-fill,
 .loader .loader-flag-outline {
-  inline-size: 52px;
-  block-size: 52px;
+  width: 52px;
+  height: 52px;
 }
 /* Animations */
 @keyframes loaderStroke {

package/src/styles/less/media.css

@@ -6,7 +6,7 @@
   flex: 1;
 }
 .media-body > *:last-child {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .media-middle {
   align-self: center;
@@ -20,30 +20,54 @@
 }
 /* Alignment */
 .media-right {
-  padding-inline-start: 16px;
-  padding-inline-start: var(--size-16);
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+[dir="rtl"] .media-right {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  padding-left: 0;
+  padding-left: initial;
 }
 .media-left {
-  padding-inline-end: 16px;
-  padding-inline-end: var(--size-16);
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+[dir="rtl"] .media-left {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+  padding-right: 0;
+  padding-right: initial;
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
-    padding-inline-start: 32px;
-    padding-inline-start: var(--size-32);
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+  [dir="rtl"] .media-right,
+  [dir="rtl"] .media-left {
+    padding-right: 32px;
+    padding-right: var(--size-32);
+    padding-left: 0;
+    padding-left: initial;
   }
 }
 /* Headings */
 .media-heading {
-  margin-block-start: 0;
-  margin-block-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 /* Media list variation */
 .media-list {
-  padding-inline-start: 0;
+  padding-left: 0;
   list-style: none;
 }
+[dir="rtl"] .media-list {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
+}
 /* Fix text-ellipsis issue with text in dropdown */
 .dropdown-menu .media-body {
   overflow: hidden;

package/src/styles/less/mixins/_logical-properties.less

@@ -1,5 +1,5 @@
 // Custom support for logical properties/values. Select one of the options:
 
-@import "./_physical-properties.less";
-// @import './_logical-properties-IE-friendly.less';
+// @import '../mixins/_physical-properties.less';
+@import "./_logical-properties-IE-friendly.less";
 // @import '../mixins/_logical-properties-modern-browsers.less';

package/src/styles/less/mixins/_physical-properties.less

@@ -38,7 +38,7 @@
 
 // padding-left / padding-right
 
-.padding(@direction, @value, @oppositeValue: initial) {
+.padding(@direction, @value) {
   & when (@direction = left) {
     padding-left: @value;
   }
@@ -50,61 +50,29 @@
 
 // margin-left / margin-right
 
-.margin(@direction, @value, @oppositeValue: initial) {
+.margin(@direction, @value) {
   & when (@direction = left) {
     margin-left: @value;
   }
 
   & when (@direction = right) {
-    margin-right: @value;
-  }
-}
-
-.margin-for-spacing(@direction, @value) {
-  & when (@direction = left) {
-    margin-left: @value;
-  }
-
-  & when (@direction = right) {
-    margin-right: @value;
-  }
-}
-
-.padding-for-spacing(@direction, @value) {
-  & when (@direction = left) {
     padding-left: @value;
   }
-
-  & when (@direction = right) {
-    padding-right: @value;
-  }
-}
-
-.margin-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
-  margin: @value1 @value2 @value3 @value4;
-}
-
-.padding-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
-  padding: @value1 @value2 @value3 @value4;
-}
-
-.translateX(@value, @transform2: ~"", @transform3: ~"") {
-  transform: translateX(@value) @transform2 @transform3;
 }
 
 // left / right (positions)
 
-.left(@value, @oppositeValue: initial) {
+.left(@value) {
   left: @value;
 }
 
-.right(@value, @oppositeValue: initial) {
+.right(@value) {
   right: @value;
 }
 
 // border-left / border-right
 
-.border(@direction, @size, @style: ~"", @color: ~"") {
+.border(@direction, @size, @style: ~'', @color: ~'') {
   & when (@direction = left) {
     border-left: @size @style @color;
   }
@@ -140,43 +108,3 @@
     border-bottom-right-radius: @radius;
   }
 }
-
-// Border radius (directional top/bottom)
-
-.border-top-dir-radius(@direction, @radius) {
-  & when (@direction = left) {
-    border-top-left-radius: @radius;
-  }
-
-  & when (@direction = right) {
-    border-top-right-radius: @radius;
-  }
-}
-
-.border-bottom-dir-radius(@direction, @radius) {
-  & when (@direction = left) {
-    border-bottom-left-radius: @radius;
-  }
-
-  & when (@direction = right) {
-    border-bottom-right-radius: @radius;
-  }
-}
-
-// Background position
-
-.background-position(@direction, @vertical-direction: ~"") {
-  & when (@direction = left) {
-    background-position: left @vertical-direction;
-  }
-
-  & when (@direction = right) {
-    background-position: right @vertical-direction;
-  }
-}
-
-// Rotations
-
-.rotate(@deg) {
-  transform: rotate(@deg);
-}