@transferwise/neptune-css 10.0.6-beta.36 → 10.0.6-beta.38

package/src/less/forms/checkbox-radio.less

@@ -1,37 +1,27 @@
 @import (reference) '../../variables/legacy-variables.less';
 @import (reference) '../../variables/neptune-tokens.less';
+@import (reference) '../mixins/_logical-properties.less';
 
 .radio,
 .checkbox {
-  border-color: @input-border;
+  border-color: var(--color-interactive-secondary);
 
   > label {
     position: relative;
     padding-left: 48px;
 
-    &:active:hover {
-      border-color: @input-border-focus;
-
-      input[type='radio'],
-      input[type='checkbox'] {
-        + .input-replacement {
-          border-color: @input-border-focus;
-        }
-      }
-    }
-
     input[type='radio'],
     input[type='checkbox'] {
       display: block;
       position: absolute;
       top: 13px;
-      left: 40px;
+      .left(40px);
     }
   }
 }
 
 .tw-checkbox-button {
-  border: 1px solid @color-base-smoke-mid;
+  border: 1px solid var(--color-interactive-secondary);
   background: var(--color-background-screen);
   width: 22px;
   height: 22px;
@@ -54,7 +44,7 @@
   &:hover,
   input[type='checkbox']:hover + &,
   .checkbox:hover & {
-    border-color: @color-base-grey-light;
+    border-color: var(--color-interactive-secondary);
   }
 
   &:focus,
@@ -65,15 +55,15 @@
   &:active,
   &.active,
   input[type='checkbox']:active + & {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-secondary);
     outline: none;
   }
 
   &[checked],
   &.checked,
   input[type='checkbox']:checked + & {
-    border-color: var(--color-control-accent) !important;
-    background-color: var(--color-control-accent);
+    border-color: var(--color-interactive-accent) !important;
+    background-color: var(--color-interactive-accent);
 
     .tw-checkbox-check {
       display: inline-block;
@@ -83,55 +73,55 @@
   &[checked]:hover,
   &.checked:hover,
   input[type='checkbox']:not(:disabled):checked:hover + & {
-    border-color: var(--color-control-accent-hover) !important;
-    background-color: var(--color-control-accent-hover);
+    border-color: var(--color-interactive-accent-hover) !important;
+    background-color: var(--color-interactive-accent-hover);
   }
 
   &[checked]:active,
   &.checked:active,
   input[type='checkbox']:not(:disabled):checked:active + & {
-    border-color: var(--color-control-accent-active) !important;
-    background-color: var(--color-control-accent-active);
+    border-color: var(--color-interactive-accent-active) !important;
+    background-color: var(--color-interactive-accent-active);
   }
 
   &[disabled],
   input[type='checkbox']:disabled + & {
-    background-color: @color-base-smoke-fade;
-    border-color: @color-base-smoke-mid !important;
+    background-color: var(--color-background-neutral);
+    border-color: var(--color-interactive-disabled) !important;
     cursor: @cursor-disabled;
 
     .tw-checkbox-check {
-      color: var(--color-text-inactive);
+      color: var(--color-content-disabled);
     }
   }
 
   .checkbox.has-error &,
   &.has-error {
-    border-color: var(--color-control-negative) !important;
+    border-color: var(--color-interactive-negative) !important;
 
     &[checked],
     &.checked {
-      background-color: var(--color-control-negative);
+      background-color: var(--color-interactive-negative);
     }
 
     &[disabled] {
-      background-color: @color-base-smoke-fade;
+      background-color: var(--color-background-neutral);
     }
   }
 
   .checkbox.has-error input[type='checkbox']:checked + & {
-    border-color: var(--color-control-negative) !important;
-    background-color: var(--color-control-negative);
+    border-color: var(--color-interactive-negative) !important;
+    background-color: var(--color-interactive-negative);
   }
 
   .checkbox.has-error input[type='checkbox']:checked:hover + & {
-    border-color: var(--color-control-negative-hover) !important;
-    background-color: var(--color-control-negative-hover);
+    border-color: var(--color-interactive-negative-hover) !important;
+    background-color: var(--color-interactive-negative-hover);
   }
 
   .checkbox.has-error input[type='checkbox']:checked:active + & {
-    border-color: var(--color-control-negative-active) !important;
-    background-color: var(--color-control-negative-active);
+    border-color: var(--color-interactive-negative-active) !important;
+    background-color: var(--color-interactive-negative-active);
   }
 }
 
@@ -139,8 +129,8 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  border: 1px solid @input-border;
-  background: @input-bg;
+  border: 1px solid var(--color-interactive-secondary);
+  background: var(--color-background-screen);
   display: inline-block;
   padding: 0;
   vertical-align: middle;
@@ -151,58 +141,65 @@
     text-align: center;
     width: 0;
     height: 0;
-    margin: 0 0 0 11px;
+    margin: 0;
+    .margin(left, 11px);
+
     transition: all 0.15s ease-in-out;
   }
 
   .radio:hover &,
   &:hover {
-    border-color: @input-border-hover;
+    border-color: var(--color-interactive-secondary-hover);
   }
 
   &:focus,
   &.focus,
   &:active,
   &.active {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-secondary-active);
     outline: none;
   }
 
   &[checked],
   &.checked {
-    border-color: @input-border-focus !important;
+    border-color: var(--color-interactive-accent) !important;
 
     .tw-radio-check {
       width: 12px;
       height: 12px;
-      margin: 5px;
+      margin-top: 5px;
+      .margin(right, 5px);
+
+      .margin(left, 5px);
+
+      margin-bottom: 5px;
       display: block;
-      background-color: @input-border-focus;
+      background-color: var(--color-interactive-accent);
     }
   }
 
   &[disabled],
   &.disabled {
-    background-color: @input-bg-disabled;
-    border-color: @input-border-disabled !important;
+    background-color: var(--color-background-neutral);
+    border-color: var(--color-interactive-disabled) !important;
     cursor: @cursor-disabled;
 
     .tw-radio-check {
-      background-color: @input-border-disabled;
+      background-color: var(--color-interactive-disabled);
     }
   }
 
   .radio.has-error &,
   &.has-error {
-    border-color: @brand-red !important;
+    border-color: var(--color-interactive-negative) !important;
 
     &[checked] .tw-radio-check,
     &.checked .tw-radio-check {
-      background-color: @brand-red;
+      background-color: var(--color-interactive-negative);
     }
 
     &[disabled] .tw-radio-check {
-      background-color: @input-border-disabled;
+      background-color: var(--color-interactive-disabled);
     }
   }
 }
@@ -210,20 +207,22 @@
 .checkbox {
   &.disabled label,
   &.disabled label:hover {
-    border-color: @input-border-disabled;
-    color: @color-text-inactive !important;
+    border-color: var(--color-interactive-disabled);
+    color: var(--color-content-disabled) !important;
   }
 }
 
 .radio .tw-radio-button {
   position: absolute;
-  left: 13px;
+  .left(13px);
+
   top: 11px;
 }
 
 .checkbox .tw-checkbox-button {
   position: absolute;
-  left: 14px;
+  .left(14px);
+
   top: 12px;
 }
 

package/src/less/grid.less

@@ -2,6 +2,7 @@
 @import (reference) './mixins/_clearfix.less';
 @import (reference) './mixins/_grid.less';
 @import (reference) './mixins/_grid-framework.less';
+@import (reference) './mixins/_logical-properties.less';
 
 // Set the container width, and override it for fixed navbars in media queries.
 .container {
@@ -12,17 +13,17 @@
     max-width: @container-xl;
   }
 
-  padding-right: @spacing-1-mobile;
-  padding-left: @spacing-1-mobile;
+  .padding(right, @spacing-1-mobile);
+  .padding(left, @spacing-1-mobile);
 
   @media (min-width: @screen-sm-min) {
-    padding-right: @spacing-1-tablet;
-    padding-left: @spacing-1-tablet;
+    .padding(right, @spacing-1-tablet);
+    .padding(left, @spacing-1-tablet);
   }
 
   @media (min-width: @screen-lg-min) {
-    padding-right: @spacing-1-desktop;
-    padding-left: @spacing-1-desktop;
+    .padding(right, @spacing-1-desktop);
+    .padding(left, @spacing-1-desktop);
   }
 }
 
@@ -66,15 +67,15 @@
 
 @media (max-width: @screen-xs-max) {
   .container {
-    padding-right: @spacing-1-mobile;
-    padding-left: @spacing-1-mobile;
+    .padding(right, @spacing-1-mobile);
+    .padding(left, @spacing-1-mobile);
   }
 }
 
 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
   .container {
-    padding-right: @spacing-1-tablet;
-    padding-left: @spacing-1-tablet;
+    .padding(right, @spacing-1-tablet);
+    .padding(left, @spacing-1-tablet);
   }
 }
 
@@ -131,23 +132,23 @@
 // Make grid gutters smaller on mobile
 @media (max-width: @screen-xs-max) {
   .row {
-    margin-right: -8px;
-    margin-left: -8px;
+    .margin(right, -8px);
+    .margin(left, -8px);
   }
 
   [class*='col-'] {
-    padding-right: 8px;
-    padding-left: 8px;
+    .padding(right, 8px);
+    .padding(left, 8px);
   }
 }
 
 .make-grid-columns-wide(@gutter: @grid-gutter-width) {
-  margin-right: -@gutter / 2;
-  margin-left: -@gutter / 2;
+  .margin(right, -@gutter / 2);
+  .margin(left, -@gutter / 2);
 
   [class*='col-'] {
-    padding-right: @gutter / 2;
-    padding-left: @gutter / 2;
+    .padding(right, @gutter / 2);
+    .padding(left, @gutter / 2);
   }
 }
 
@@ -171,14 +172,14 @@
 
 .container--text {
   max-width: 700px;
-  margin-right: auto;
-  margin-left: auto;
+  .margin(right, auto);
+  .margin(left, auto);
 }
 
 .container--wide {
   max-width: 1500px;
-  margin-right: auto;
-  margin-left: auto;
+  .margin(right, auto);
+  .margin(left, auto);
 
   @media (min-width: @screen-xl-min) {
     max-width: 1500px;

package/src/less/input-groups.less

@@ -2,6 +2,7 @@
 @import './mixins/_border-radius.less';
 @import './mixins/_buttons.less';
 @import './mixins/_forms.less';
+@import (reference) './mixins/_logical-properties.less';
 
 .input-sm {
   .input-size(
@@ -26,69 +27,65 @@
   // Undo padding and float of grid classes
   &[class*="col-"] {
     float: none;
-    padding-left: 0;
-    padding-right: 0;
+    .padding(left, 0);
+
+    .padding(start, 0);
   }
 
   .form-control {
     // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
-    float: left;
+    .float(left);
+
     width: 100%;
     margin-bottom: 0;
 
     &:not(:first-child) {
-      border-left: 0;
+      .border(left, 0);
     }
 
     &:not(:last-child) {
-      border-right: 0;
+      .border(right, 0);
     }
 
-    border-color: @input-border;
+    border-color: var(--color-interactive-secondary);
 
     :hover& {
-      border-color: @input-border-hover;
+      border-color: var(--color-interactive-secondary-hover);
     }
 
+    &:active,
     &:focus {
-      border-color: @input-border-focus;
+      border-color: var(--color-interactive-accent-active);
     }
   }
 
   .input-group-addon + .form-control {
-    padding-left: 0;
+    .padding(left, 0);
   }
 
   .form-control + .input-group-addon {
-    padding-left: 0;
-  }
-
-  &:hover {
-    .input-group-addon,
-    .form-control,
-    .btn-input,
-    .bootstrap-select .btn-default {
-      border-color: @input-border-hover;
-    }
+    .padding(left, 0);
   }
 
+  &:active,
+  &:focus,
   .focus & {
     .input-group-addon,
     .form-control,
     .btn-input,
     .bootstrap-select .btn-default {
-      border-color: @input-border-focus;
+      border-color: var(--color-interactive-accent-active);
     }
   }
 
   &.disabled {
     .input-group-addon {
-      background-color: @input-bg-disabled;
-      border-color: @input-border-disabled;
+      background-color: var(--color-background-neutral);
+      border-color: var(--color-interactive-disabled);
     }
 
-    &:hover .input-group-addon {
-      border-color: @input-border-hover;
+    &:active .input-group-addon {
+      border-color: var(--color-interactive-secondary-active);
     }
   }
 }
@@ -144,10 +141,10 @@
   padding: @input-group-addon-padding;
   font-size: @input-group-addon-font-size;
   line-height: @input-line-height;
-  color: @input-group-color;
+  color: var(--color-content-secondary);
   text-align: center;
-  background-color: @input-group-addon-bg;
-  border: 1px solid @input-group-addon-border-color;
+  background-color: var(--color-background-screen);
+  border: 1px solid var(--color-interactive-secondary);
 
   // Sizing - over rule spacing from .input-group-sm/lg
   &.input-sm {
@@ -169,8 +166,8 @@
     vertical-align: middle;
     display: inline-block;
     margin-top: -2px;
-    margin-left: -4px;
-    margin-right: -5px;
+    .margin(left, -4px);
+    .margin(right, -5px);
   }
 
   a {
@@ -191,35 +188,39 @@
 
 .input-group .input-group-addon,
 .input-group .form-control {
-  border-left-width: 0;
-  border-right-width: 0;
+  .border-width(left,0);
+
+  .border-width(right,0);
+
   border-radius: 0;
 }
 
 .input-group .input-group-btn:first-child,
 .input-group .input-group-addon:first-child,
 .input-group .form-control:first-child {
-  border-left-width: 1px;
-  .border-left-radius(@border-radius-base);
+  .border-width(left, 1px);
+
+  .border-radius(left, @border-radius-base);
 }
 
 .input-group .input-group-btn:last-child,
 .input-group .input-group-addon:last-child,
 .input-group .form-control:last-child {
-  border-right-width: 1px;
-  .border-right-radius(@border-radius-base);
+  .border-width(right, 1px);
+
+  .border-radius(right, @border-radius-base);
 }
 
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
   > :first-child .btn,
   > :first-child .btn-group {
-    .border-right-radius(0);
+    .border-radius(right, 0);
   }
 
   > :last-child .btn,
   > :last-child .btn-group {
-    .border-left-radius(0);
+    .border-radius(left, 0);
   }
 }
 
@@ -238,7 +239,7 @@
     position: relative;
 
     + .btn {
-      margin-left: -1px;
+      .margin(left, -1px);
     }
     // Bring the "active" button to the front
     &:hover,
@@ -252,21 +253,20 @@
   &:first-child {
     > .btn,
     > .btn-group {
-      margin-right: -1px;
+      .margin(right, -1px);
     }
   }
 }
 
 // TODO deprecate
 .focus .input-group,
-.has-focus .input-group,
-.input-group:focus-within {
+.has-focus .input-group {
   .form-control,
   .input-group-addon {
-    border-color: @input-border-focus;
+    border-color: var(--color-interactive-secondary);
 
-    :hover& {
-      border-color: @input-border-focus;
+    &:hover {
+      border-color: var(--color-interactive-secondary-hover);
     }
   }
 }
@@ -274,10 +274,10 @@
 .has-error .input-group {
   .form-control,
   .input-group-addon {
-    border-color: @state-danger-text;
+    border-color: var(--color-interactive-negative);
 
-    :hover& {
-      border-color: @state-danger-text;
+    &:hover {
+      border-color: var(--color-interactive-negative-hover);
     }
   }
 }
@@ -285,6 +285,5 @@
 .dropdown-menu {
   .input-group-addon {
     border: 0;
-    color: @input-group-color;
   }
 }

package/src/less/link-callout.less

@@ -1,6 +1,9 @@
+@import (reference) './mixins/_logical-properties.less';
+
 .link-callout > .tw-icon-chevron-up {
   display: inline-block;
-  margin-left: 8px;
+  .margin(left, var(--size-8));
+
   pointer-events: none;
   transition: transform 0.2s ease-in-out;
   transform: rotate(+90deg);