@transferwise/components 0.0.0-experimental-9b6c3f8 → 0.0.0-experimental-0c7c46a

package/src/styles/less/forms/bootstrap-forms.less

@@ -1,11 +1,11 @@
-@import (reference) "../../variables/legacy-variables.less";
-@import (reference) "../../variables/neptune-tokens.less";
-@import (reference) "../mixins/_arrows.less";
-@import (reference) "../mixins/_grid.less";
-@import (reference) "../mixins/_forms.less";
-@import (reference) "../mixins/_tab-focus.less";
-@import (reference) "../mixins/_logical-properties.less";
-@import (reference) "../core/_typography.less";
+@import (reference) '../../variables/legacy-variables.less';
+@import (reference) '../../variables/neptune-tokens.less';
+@import (reference) '../mixins/_arrows.less';
+@import (reference) '../mixins/_grid.less';
+@import (reference) '../mixins/_forms.less';
+@import (reference) '../mixins/_tab-focus.less';
+@import (reference) '../mixins/_logical-properties.less';
+@import (reference) '../core/_typography.less';
 
 //
 // Forms
@@ -54,34 +54,34 @@ label,
 // address browser inconsistencies.
 
 // Override content-box in Normalize (* isn't specific enough)
-input[type="search"] {
+input[type='search'] {
   box-sizing: border-box;
 }
 
-input[type="number"] {
+input[type='number'] {
   appearance: textfield;
 }
 
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
 // Position radios and checkboxes better
-input[type="radio"],
-input[type="checkbox"] {
+input[type='radio'],
+input[type='checkbox'] {
   margin: 4px 0 0;
   margin-top: 1px;
   line-height: normal;
 }
 
-input[type="file"] {
+input[type='file'] {
   display: block;
 }
 
 // Make range inputs behave like textual form controls
-input[type="range"] {
+input[type='range'] {
   display: block;
   width: 100%;
 }
@@ -93,9 +93,9 @@ select[size] {
 }
 
 // Focus for file, radio, and checkbox
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
+input[type='file']:focus,
+input[type='radio']:focus,
+input[type='checkbox']:focus {
   .tab-focus();
 }
 
@@ -145,7 +145,7 @@ output {
     var(--input-padding),
     @input-border-radius
   );
-  .wds-text-body-large;
+  .np-text-body-large;
 
   // Remove iOS drop shadow
   background-clip: padding-box;
@@ -197,7 +197,7 @@ output {
 // be added to `.form-control` as it's not specific enough. For details, see
 // https://github.com/twbs/bootstrap/issues/11586.
 
-input[type="search"] {
+input[type='search'] {
   appearance: none;
 }
 
@@ -209,10 +209,10 @@ input[type="search"] {
 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
 
 @media screen and (min-device-pixel-ratio: 0) {
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="month"] {
+  input[type='date'],
+  input[type='time'],
+  input[type='datetime-local'],
+  input[type='month'] {
     line-height: var(--input-height-base);
 
     &.input-sm,
@@ -248,7 +248,7 @@ input[type="search"] {
   }
 }
 
-.row-equal-height > [class*="col-"] > .form-group {
+.row-equal-height > [class*='col-'] > .form-group {
   width: 100%;
 }
 
@@ -275,10 +275,10 @@ input[type="search"] {
   margin-top: (@padding-base-vertical * 1.5);
 }
 
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
+.radio input[type='radio'],
+.radio-inline input[type='radio'],
+.checkbox input[type='checkbox'],
+.checkbox-inline input[type='checkbox'] {
   position: absolute;
   .margin(left, -20px);
 
@@ -313,8 +313,8 @@ input[type="search"] {
 // Some special care is needed because <label>s don't inherit their parent's `cursor`.
 //
 // Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"] {
+input[type='radio'],
+input[type='checkbox'] {
   &[disabled],
   &.disabled,
   fieldset[disabled] & {
@@ -380,7 +380,7 @@ input[type="password"] {
   );
   font-size: 14px;
   line-height: 24px;
-  .wds-text-body-default();
+  .np-text-body-default();
 }
 
 .form-group-sm,
@@ -418,7 +418,7 @@ input[type="password"] {
     var(--input-padding-large);
     @input-border-radius-large
   );
-  .wds-text-body-large;
+  .np-text-body-large;
 }
 
 .form-group-lg {
@@ -533,9 +533,7 @@ input[type="password"] {
   border-style: solid;
   border-radius: var(--radius-small);
   padding: 4px 16px 3px;
-  transition:
-    border-color 0.15s ease-in-out,
-    background-color 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
   a {
     color: inherit;
@@ -703,8 +701,8 @@ input[type="password"] {
       }
     }
 
-    .radio input[type="radio"],
-    .checkbox input[type="checkbox"] {
+    .radio input[type='radio'],
+    .checkbox input[type='checkbox'] {
       position: relative;
       .margin(left, 0);
     }
@@ -790,7 +788,7 @@ input[type="password"] {
   }
 }
 
-@import "checkbox-radio.less";
+@import 'checkbox-radio.less';
 
 .input-group .input-group-btn + input {
   .border(left, 0, solid, transparent);
@@ -828,7 +826,7 @@ input[type="password"] {
 
   .margin(right, -6px);
 
-  [class*="col-"] {
+  [class*='col-'] {
     .padding(left, 6px);
 
     .padding(right, 6px);
@@ -836,7 +834,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-xs-max) {
-  .form-group .row [class*="col-sm-"] {
+  .form-group .row [class*='col-sm-'] {
     margin-bottom: 0;
 
     .btn-input {
@@ -846,7 +844,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-sm-max) {
-  .form-group .row [class*="col-md-"] {
+  .form-group .row [class*='col-md-'] {
     margin-bottom: 0;
 
     .form-control,
@@ -857,7 +855,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-md-max) {
-  .form-group .row [class*="col-lg-"] {
+  .form-group .row [class*='col-lg-'] {
     margin-bottom: 0;
 
     .form-control,
@@ -868,7 +866,7 @@ input[type="password"] {
 }
 
 @media (max-width: @screen-lg-max) {
-  .form-group .row [class*="col-xl-"] {
+  .form-group .row [class*='col-xl-'] {
     margin-bottom: 0;
 
     .form-control,
@@ -897,9 +895,7 @@ input[type="password"] {
     background-color: var(--color-background-screen);
     border: 1px solid var(--color-interactive-secondary);
     border-radius: @border-radius-base;
-    transition:
-      border 0.15s ease-in-out,
-      background-color 0.15s ease-in-out;
+    transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
     .np-theme-personal & {
       border-radius: var(--radius-small);
@@ -930,8 +926,7 @@ input[type="password"] {
       small,
       .small,
       .body-2,
-      .np-text-body-default,
-      .wds-text-body-default {
+      .np-text-body-default {
         display: block;
         color: var(--color-content-secondary);
       }
@@ -1026,7 +1021,7 @@ input[type="password"] {
 .form-control-placeholder {
   text-overflow: ellipsis;
   overflow: hidden;
-  .wds-text-body-large;
+  .np-text-body-large;
   display: block;
   width: 100%;
   color: var(--color-content-tertiary);
@@ -1130,32 +1125,26 @@ input[type="password"] {
 
     .checkbox:hover .tw-checkbox-button,
     .radio:not(.disabled):hover .tw-radio-button,
-    .tw-checkbox-button:not(.disabled, :disabled):hover,
-    input[type="checkbox"]:hover + .tw-checkbox-button,
-    input[type="radio"]:not(.disabled, :disabled):hover + .tw-radio-button,
-    input[type="checkbox"]:not(.disabled, :disabled):hover + .tw-checkbox-button {
+    .tw-checkbox-button:not(.disabled,:disabled):hover,
+    input[type=checkbox]:hover+.tw-checkbox-button,
+    input[type=radio]:not(.disabled,:disabled):hover+.tw-radio-button,
+    input[type=checkbox]:not(.disabled,:disabled):hover+.tw-checkbox-button {
       box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
     }
 
     .tw-checkbox-button.checked,
     .tw-checkbox-button:checked,
-    input[type="checkbox"]:checked + .tw-checkbox-button,
+    input[type=checkbox]:checked+.tw-checkbox-button,
     .tw-checkbox-button.checked:hover,
     .tw-checkbox-button:checked:hover,
-    input[type="checkbox"]:not(.disabled, :disabled):checked:hover + .tw-checkbox-button {
+    input[type=checkbox]:not(.disabled,:disabled):checked:hover+.tw-checkbox-button {
       box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
       background: var(--color-sentiment-negative);
     }
 
-    .checkbox > label:not(.disabled, :disabled):active input[type="checkbox"] + .tw-checkbox-button,
-    .checkbox
-      > label:not(.disabled, :disabled):focus-visible
-      input[type="checkbox"]
-      + .tw-checkbox-button,
-    .checkbox
-      > label:not(.disabled, :disabled):has(:focus-visible)
-      input[type="checkbox"]
-      + .tw-checkbox-button {
+    .checkbox>label:not(.disabled,:disabled):active input[type=checkbox]+.tw-checkbox-button,
+    .checkbox>label:not(.disabled,:disabled):focus-visible input[type=checkbox]+.tw-checkbox-button,
+    .checkbox>label:not(.disabled,:disabled):has(:focus-visible) input[type=checkbox]+.tw-checkbox-button {
       box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
     }
   }
@@ -1164,9 +1153,7 @@ input[type="password"] {
   .tw-checkbox-button {
     background-color: unset;
     color: unset;
-    transition:
-      background-color 0.3s ease-in-out,
-      box-shadow 0.3s ease-in-out;
+    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   }
 
   .btn-input:hover,
@@ -1183,7 +1170,7 @@ input[type="password"] {
   }
 
   .form-group .np-upload-input label {
-    margin-bottom: 0;
+      margin-bottom: 0;
   }
 
   .form-group .alert:before,