@transferwise/components 46.159.1 → 46.160.0

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

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

package/src/styles/less/loaders.css

@@ -1,15 +1,15 @@
 .loader {
   position: relative;
   display: inline-block;
-  height: 160px;
-  width: 160px;
+  block-size: 160px;
+  inline-size: 160px;
 }
 .loader .loader-flag {
-  top: 58px;
-  left: 52px;
+  inset-block-start: 58px;
+  inset-inline-start: 52px;
   position: relative;
-  height: 52px;
-  width: 52px;
+  block-size: 52px;
+  inline-size: 52px;
 }
 .loader .loader-flag-stroke {
   animation: loaderStroke 3.5s infinite;
@@ -17,21 +17,21 @@
 .loader .loader-flag-fill {
   display: block;
   position: absolute;
-  top: 1px;
+  inset-block-start: 1px;
   opacity: 1;
   animation: loaderFill 3.5s infinite;
 }
 .loader .loader-spinner {
-  width: 160px;
-  height: 160px;
+  inline-size: 160px;
+  block-size: 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 {
-  width: 52px;
-  height: 52px;
+  inline-size: 52px;
+  block-size: 52px;
 }
 /* Animations */
 @keyframes loaderStroke {

package/src/styles/less/media.css

@@ -6,7 +6,7 @@
   flex: 1;
 }
 .media-body > *:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .media-middle {
   align-self: center;
@@ -20,54 +20,30 @@
 }
 /* Alignment */
 .media-right {
-  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;
+  padding-inline-start: 16px;
+  padding-inline-start: var(--size-16);
 }
 .media-left {
-  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;
+  padding-inline-end: 16px;
+  padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
-    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;
+    padding-inline-start: 32px;
+    padding-inline-start: var(--size-32);
   }
 }
 /* Headings */
 .media-heading {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 /* Media list variation */
 .media-list {
-  padding-left: 0;
+  padding-inline-start: 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-IE-friendly.less

@@ -1,3 +1,4 @@
+// @deprecated Use _logical-properties-modern-browsers.less instead.
 // Mixin to support Logical properties/values for IE
 
 // CSS property: float: Flow-relative values inline-start

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

@@ -1,4 +1,3 @@
-
 // Mixin to support Logical properties/values for modern browsers
 
 // Custom property for the cases which doesn't exist a logical value. (Translations, linear-gradients)
@@ -17,20 +16,10 @@
 
 .float(@direction) {
   & when (@direction = left) {
-    [dir="rtl"] & {
-      float: right;
-    }
-
-    float: @direction;
     float: inline-start;
   }
 
   & when (@direction = right) {
-    [dir="rtl"] & {
-      float: left;
-    }
-
-    float: @direction;
     float: inline-end;
   }
 }
@@ -39,20 +28,10 @@
 
 .clear(@direction) {
   & when (@direction = left) {
-    [dir="rtl"] & {
-      clear: right;
-    }
-
-    clear: @direction;
     clear: inline-start;
   }
 
   & when (@direction = right) {
-    [dir="rtl"] & {
-      clear: left;
-    }
-
-    clear: @direction;
     clear: inline-end;
   }
 }
@@ -71,7 +50,27 @@
 
 // CSS Logical Properties: https://caniuse.com/css-logical-props
 
-.padding(@direction, @value) {
+.padding(@direction, @value, @oppositeValue: ~"") {
+  & when (@direction = left) {
+    padding-inline-start: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        padding-inline-end: @oppositeValue;
+      }
+    }
+  }
+
+  & when (@direction = right) {
+    padding-inline-end: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        padding-inline-start: @oppositeValue;
+      }
+    }
+  }
+}
+
+.padding-for-spacing(@direction, @value) {
   & when (@direction = left) {
     padding-inline-start: @value;
   }
@@ -85,25 +84,45 @@
 // Use for single value shorthand 'padding: var(--foo);' -> '.padding-shorthand(var(--foo))'
 // Use for multiple value shorthand 'padding: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' -> '.padding-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
 
-.padding-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
-  [dir="rtl"] & {
-    padding: @value1 @value4 @value3 @value2;
+.padding-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
+  & when (@value2 = ~"") {
+    padding: @value1;
   }
-
-  html:not([dir="rtl"]) & {
-    padding: @value1 @value2 @value3 @value4;
+  & when not (@value2 = ~"") {
+    padding-block: @value1 @value3;
+    padding-inline: @value4 @value2;
   }
 }
 
 // CSS Logical Properties: https://caniuse.com/css-logical-props
 
-.margin(@direction, @value) {
+.margin(@direction, @value, @oppositeValue: ~"") {
   & when (@direction = left) {
     margin-inline-start: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        margin-inline-end: @oppositeValue;
+      }
+    }
   }
 
   & when (@direction = right) {
-    padding-inline-end: @value;
+    margin-inline-end: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        margin-inline-start: @oppositeValue;
+      }
+    }
+  }
+}
+
+.margin-for-spacing(@direction, @value) {
+  & when (@direction = left) {
+    margin-inline-start: @value;
+  }
+
+  & when (@direction = right) {
+    margin-inline-end: @value;
   }
 }
 
@@ -111,29 +130,39 @@
 // Use for single value shorthand 'margin: var(--foo);' -> '.margin-shorthand(var(--foo))'
 // Use for multiple value shorthand 'margin: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' -> '.margin-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
 
-.margin-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
-  [dir="rtl"] & {
-    margin: @value1 @value4 @value3 @value2;
+.margin-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
+  & when (@value2 = ~"") {
+    margin: @value1;
   }
-
-  html:not([dir="rtl"]) & {
-    margin: @value1 @value2 @value3 @value4;
+  & when not (@value2 = ~"") {
+    margin-block: @value1 @value3;
+    margin-inline: @value4 @value2;
   }
 }
 
 // CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
 
-.left(@value) {
+.left(@value, @oppositeValue: ~"") {
   inset-inline-start: @value;
+  & when not (@oppositeValue = ~"") {
+    [dir="rtl"] & {
+      inset-inline-end: @oppositeValue;
+    }
+  }
 }
 
-.right(@value) {
+.right(@value, @oppositeValue: ~"") {
   inset-inline-end: @value;
+  & when not (@oppositeValue = ~"") {
+    [dir="rtl"] & {
+      inset-inline-start: @oppositeValue;
+    }
+  }
 }
 
 // CSS property: border-inline-start https://caniuse.com/mdn-css_properties_border-inline-start
 
-.border(@direction, @size, @style: ~'', @color: ~'') {
+.border(@direction, @size, @style: ~"", @color: ~"") {
   & when (@direction = left) {
     border-inline-start: @size @style @color;
   }
@@ -193,7 +222,7 @@
 
 // Background position
 
-.background-position(@direction, @vertical-direction: ~'') {
+.background-position(@direction, @vertical-direction: ~"") {
   & when (@direction = left) {
     background-position: var(--left) @vertical-direction;
   }
@@ -215,9 +244,19 @@
   }
 }
 
+// Rotations
+
+.rotate(@deg) {
+  [dir="rtl"] & {
+    transform: rotate(@deg * -1);
+  }
+
+  transform: rotate(@deg);
+}
+
 // Horizontal translations
 
-.translateX(@value, @transform2: ~'', @transform3: ~'') {
+.translateX(@value, @transform2: ~"", @transform3: ~"") {
   [dir="rtl"] & {
     transform: translateX(@value * -1) @transform2 @transform3;
   }

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

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