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

package/build/styles/styles/less/forms/checkbox-radio.css

@@ -6,13 +6,12 @@
 .radio > label,
 .checkbox > label {
   position: relative;
-  padding-left: 48px;
+  padding-inline-start: 48px;
 }
 [dir="rtl"] .radio > label,
 [dir="rtl"] .checkbox > label {
-  padding-right: 48px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 48px;
+  padding-inline-start: initial;
 }
 .radio > label input[type="radio"],
 .checkbox > label input[type="radio"],
@@ -20,24 +19,23 @@
 .checkbox > label input[type="checkbox"] {
   display: block;
   position: absolute;
-  top: 13px;
-  left: 40px;
+  inset-block-start: 13px;
+  inset-inline-start: 40px;
 }
 [dir="rtl"] .radio > label input[type="radio"],
 [dir="rtl"] .checkbox > label input[type="radio"],
 [dir="rtl"] .radio > label input[type="checkbox"],
 [dir="rtl"] .checkbox > label input[type="checkbox"] {
-  right: 40px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 40px;
+  inset-inline-start: initial;
 }
 .tw-checkbox-button {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   background: #ffffff;
   background: var(--color-background-screen);
-  width: 22px;
-  height: 22px;
+  inline-size: 22px;
+  block-size: 22px;
   border-radius: 3px;
   display: inline-block;
   padding: 0;
@@ -52,8 +50,8 @@
 }
 .tw-checkbox-button .tw-checkbox-check,
 .tw-checkbox-button .np-tw-checkbox-indeterminate {
-  width: 20px;
-  height: 20px;
+  inline-size: 20px;
+  block-size: 20px;
   margin: 0;
   display: none;
   color: #ffffff;
@@ -182,8 +180,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: var(--color-interactive-negative-active);
 }
 .tw-radio-button {
-  width: 24px;
-  height: 24px;
+  inline-size: 24px;
+  block-size: 24px;
   border-radius: 50%;
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
@@ -200,14 +198,14 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   position: relative;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 .tw-radio-button .tw-radio-check {
   border-radius: 50%;
   text-align: center;
-  width: 12px;
-  height: 12px;
+  inline-size: 12px;
+  block-size: 12px;
   display: block;
   opacity: 0;
   transition: all 0.15s ease-in-out;
@@ -262,8 +260,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .tw-radio-button:checked .tw-radio-check,
 .np-theme-personal .tw-radio-button.checked .tw-radio-check {
   background-color: var(--color-interactive-primary);
-  max-height: 12px;
-  max-width: 12px;
+  max-block-size: 12px;
+  max-inline-size: 12px;
 }
 .radio.has-error .tw-radio-button,
 .tw-radio-button.has-error {
@@ -279,23 +277,21 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio .tw-radio-button {
   position: absolute;
-  left: 13px;
-  top: 11px;
+  inset-inline-start: 13px;
+  inset-block-start: 11px;
 }
 [dir="rtl"] .radio .tw-radio-button {
-  right: 13px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 13px;
+  inset-inline-start: initial;
 }
 .checkbox .tw-checkbox-button {
   position: absolute;
-  left: 14px;
-  top: 12px;
+  inset-inline-start: 14px;
+  inset-block-start: 12px;
 }
 [dir="rtl"] .checkbox .tw-checkbox-button {
-  right: 14px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 14px;
+  inset-inline-start: initial;
 }
 .form-inline .tw-checkbox-button,
 .form-inline .tw-radio-button {
@@ -303,16 +299,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .form-horizontal .checkbox,
 .form-horizontal .radio {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 .form-horizontal .checkbox > label,
 .form-horizontal .radio > label {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .np-radio.radio,
 .np-checkbox.checkbox {
-  min-width: -moz-fit-content;
-  min-width: fit-content;
+  min-inline-size: -moz-fit-content;
+  min-inline-size: fit-content;
 }
 .np-radio.radio .np-radio-button,
 .np-checkbox.checkbox .np-radio-button,
@@ -331,20 +327,24 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding: 8px 16px   ;
-  padding: var(--size-8) var(--size-16)   ;
+  padding-block: 8px 16px   ;
+  padding-block: var(--size-8);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
 }
 [dir="rtl"] .np-radio.radio > label,
 [dir="rtl"] .np-checkbox.checkbox > label {
-  padding: 8px 16px   ;
-  padding: var(--size-8) var(--size-16)   ;
+  padding-block: 8px 16px   ;
+  padding-block: var(--size-8);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
 }
 .np-radio.radio > label .np-checkbox__text,
 .np-checkbox.checkbox > label .np-checkbox__text,
 .np-radio.radio > label .np-radio__text,
 .np-checkbox.checkbox > label .np-radio__text {
   display: block;
-  padding-top: 1px;
+  padding-block-start: 1px;
 }
 :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
@@ -356,7 +356,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   font-size: var(--font-size-16);
   line-height: 1.25rem;
   line-height: var(--line-height-20);
-  padding-top: 3px;
+  padding-block-start: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
 .np-theme-personal .np-checkbox.checkbox > label {