@transferwise/neptune-css 10.0.6-beta.32 → 10.1.0

package/src/less/mixins/_grid.less

@@ -4,74 +4,64 @@
 
 // Centered container element
 .container-fixed(@gutter: @grid-gutter-width) {
-  .margin(right, auto);
-
-  .margin(left, auto);
-
-  .padding(left, (@gutter / 2));
-
-  .padding(right, (@gutter / 2));
-
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
   &:extend(.clearfix all);
 }
 
 // Creates a wrapper for a series of columns
 .make-row(@gutter: @grid-gutter-width) {
-  .margin(left, ceil((@gutter / -2)));
-
-  .margin(right, floor((@gutter / -2)));
-
+  margin-left: ceil((@gutter / -2));
+  margin-right: floor((@gutter / -2));
   &:extend(.clearfix all);
 }
 
 // Generate the extra small columns
 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  .float(left);
-
+  float: left;
   width: percentage((@columns / @grid-columns));
   min-height: 1px;
-  .padding(left, (@gutter / 2));
-
-  .padding(right, (@gutter / 2));
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
 }
 .make-xs-column-offset(@columns) {
-  .margin(left, percentage((@columns / @grid-columns)));
+  margin-left: percentage((@columns / @grid-columns));
 }
 .make-xs-column-push(@columns) {
-  .left(percentage((@columns / @grid-columns)));
+  left: percentage((@columns / @grid-columns));
 }
 .make-xs-column-pull(@columns) {
-  .right(percentage((@columns / @grid-columns)));
+  right: percentage((@columns / @grid-columns));
 }
 
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  .padding(left, (@gutter / 2));
-
-  .padding(right, (@gutter / 2));
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   @media (min-width: @screen-sm-min) {
-    .float(left);
-
+    float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-offset(@columns) {
   @media (min-width: @screen-sm-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
+    margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-push(@columns) {
   @media (min-width: @screen-sm-min) {
-    .left(percentage((@columns / @grid-columns)));
+    left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-pull(@columns) {
   @media (min-width: @screen-sm-min) {
-    .right(percentage((@columns / @grid-columns)));
+    right: percentage((@columns / @grid-columns));
   }
 }
 
@@ -79,29 +69,27 @@
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  .padding(left, (@gutter / 2));
-
-  .padding(right, (@gutter / 2));
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   @media (min-width: @screen-md-min) {
-    .float(left);
-
+    float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-offset(@columns) {
   @media (min-width: @screen-md-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
+    margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-push(@columns) {
   @media (min-width: @screen-md-min) {
-    .left(percentage((@columns / @grid-columns)));
+    left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-pull(@columns) {
   @media (min-width: @screen-md-min) {
-    .right(percentage((@columns / @grid-columns)));
+    right: percentage((@columns / @grid-columns));
   }
 }
 
@@ -109,29 +97,27 @@
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  .padding(left, (@gutter / 2));
-
-  .padding(right, (@gutter / 2));
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   @media (min-width: @screen-lg-min) {
-    .float(left);
-
+    float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-offset(@columns) {
   @media (min-width: @screen-lg-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
+    margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-push(@columns) {
   @media (min-width: @screen-lg-min) {
-    .left(percentage((@columns / @grid-columns)));
+    left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-pull(@columns) {
   @media (min-width: @screen-lg-min) {
-    .right(percentage((@columns / @grid-columns)));
+    right: percentage((@columns / @grid-columns));
   }
 }
 
@@ -139,28 +125,26 @@
 .make-xl-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  .padding(left, (@gutter / 2));
-
-  .padding(right, (@gutter / 2));
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   @media (min-width: @screen-xl-min) {
-    .float(left);
-
+    float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-xl-column-offset(@columns) {
   @media (min-width: @screen-xl-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
+    margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-xl-column-push(@columns) {
   @media (min-width: @screen-xl-min) {
-    .left(percentage((@columns / @grid-columns)));
+    left: percentage((@columns / @grid-columns));
   }
 }
 .make-xl-column-pull(@columns) {
   @media (min-width: @screen-xl-min) {
-    .right(percentage((@columns / @grid-columns)));
+    right: percentage((@columns / @grid-columns));
   }
 }

package/src/less/mixins/_spacing.less

@@ -1,5 +1,3 @@
-@import (reference) "_logical-properties.less";
-
 .spacing(@postfix, @spacer) {
   .spacing-global(@postfix, @spacer);
   .spacing-vertical(@postfix, @spacer);
@@ -8,19 +6,11 @@
 
 .spacing-global(@postfix, @spacer) {
   .m-a-@{postfix} {
-    margin-top: @spacer !important;
-    .margin(right, @spacer) !important;
-
-    margin-bottom: @spacer !important;
-    .margin(left, @spacer) !important;
+    margin: @spacer !important;
   }
 
   .p-a-@{postfix} {
-    padding-top: @spacer !important;
-    .padding(right, @spacer) !important;
-
-    padding-bottom: @spacer !important;
-    .padding(left, @spacer) !important;
+    padding: @spacer !important;
   }
 }
 
@@ -54,29 +44,29 @@
 
 .spacing-horizontal(@postfix, @spacer) {
   .m-l-@{postfix} {
-    .margin(left, @spacer) !important;
+    margin-left: @spacer !important;
   }
 
   .m-r-@{postfix} {
-    .margin(right, @spacer) !important;
+    margin-right: @spacer !important;
   }
 
   .m-x-@{postfix} {
-    .margin(left, @spacer) !important;
-    .margin(right, @spacer) !important;
+    margin-left: @spacer !important;
+    margin-right: @spacer !important;
   }
 
   .p-l-@{postfix} {
-    .padding(left, @spacer) !important;
+    padding-left: @spacer !important;
   }
 
   .p-r-@{postfix} {
-    .padding(right, @spacer) !important;
+    padding-right: @spacer !important;
   }
 
   .p-x-@{postfix} {
-    .padding(left, @spacer) !important;
-    .padding(right, @spacer) !important;
+    padding-left: @spacer !important;
+    padding-right: @spacer !important;
   }
 }
 

package/src/less/mixins/_table-row.less

@@ -34,7 +34,7 @@
     &.@{state}:hover > td,
     &:hover > .@{state},
     &.@{state}:hover > th {
-      background-color: @background;
+      background-color: darken(@background, 5%);
     }
   }
 }

package/src/less/mixins/_text-emphasis.less

@@ -16,18 +16,12 @@
   &.h1,
   &.h2,
   &.h3,
-  &.title-1,
-  &.title-2,
-  &.title-3,
   h1,
   h2,
   h3,
   .h1,
   .h2,
-  .h3,
-  .title-1,
-  .title-2,
-  .title-3 {
+  .h3 {
     color: @large-color !important;
   }
 }

package/src/less/modals.less

@@ -1,9 +1,8 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
+// TODO: remove bootstrap dependencies
 
-//
-// Modals
-// --------------------------------------------------
+@import (reference) '../variables/legacy-variables.less';
+@import 'bootstrap/less/mixins/vendor-prefixes.less';
+@import 'bootstrap/less/mixins/opacity.less';
 
 //
 // Styles for Angular UI modal
@@ -33,16 +32,14 @@
 
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
-
   outline: 0;
 
   // When fading in the modal, animate it to slide down
-
   &.fade .modal-dialog {
-    transform: translate(0, -25%);
-    transition: transform (~"0.3s ease-out");
+    .translate(0, -25%);
+    .transition-transform(~"0.3s ease-out");
   }
-  &.in .modal-dialog { transform: translate(0, 0); }
+  &.in .modal-dialog { .translate(0, 0); }
 }
 
 .modal-open .modal {
@@ -51,25 +48,23 @@
 }
 
 // Shell div to position the modal with bottom padding
-
 .modal-dialog {
   position: relative;
   width: auto;
-  margin: var(--size-16);
+  margin: 16px;
 }
 
 // Actual modal
-
 .modal-content {
   position: relative;
   background-color: @modal-content-bg;
+  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
   border: 1px solid @modal-content-border-color;
   border-radius: @border-radius-large;
-  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-  background-clip: padding-box;
+  .box-shadow(0 3px 9px rgba(0,0,0,0.5));
 
+  background-clip: padding-box;
   // Remove focus outline from opened modal
-
   outline: 0;
 }
 
@@ -81,36 +76,23 @@
   bottom: 0;
   left: 0;
   z-index: @zindex-modal-background;
-  background-color: @modal-backdrop-bg;
-
-  // Fade for backdrop
-
-  &.fade {
-    opacity: 0;
-  }
-
-  &.in {
-    opacity: @modal-backdrop-opacity;
-  }
+  // dimmer color
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 // Modal header
 // Top section of the modal w/ title and dismiss
-
 .modal-header {
   padding: @modal-inner-padding-collapse;
   border-bottom: 1px solid @modal-header-border-color;
   min-height: (@modal-inner-padding-collapse + @modal-title-line-height);
 }
-
 // Close icon
-
 .modal-header .close {
   margin-top: -2px;
 }
 
 // Title text within header
-
 .modal-title {
   margin: 0;
   line-height: @modal-title-line-height;
@@ -118,39 +100,30 @@
 
 // Modal body
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
-
 .modal-body {
   position: relative;
   padding: @modal-inner-padding-collapse;
 }
 
 // Footer (for actions)
-
 .modal-footer {
-  padding: var(--size-16) @modal-inner-padding-collapse;
-  .text-align(right); // right align buttons
-
+  padding: 16px @modal-inner-padding-collapse;
+  text-align: right; // right align buttons
   border-top: 1px solid @modal-footer-border-color;
   &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
-
   .btn + .btn {
-    .margin(left, var(--size-8));
-
+    margin-left: 8px;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }
-
   // but override that for button groups
-
   .btn-group .btn + .btn {
-    .margin(left, -1px);
+    margin-left: -1px;
   }
-
   // and override it for block buttons as well
-
   .btn-block + .btn-block {
-    .margin(left, 0);
+    margin-left: 0;
   }
 }
 
@@ -164,17 +137,15 @@
 }
 
 // Scale up the modal
-
-@media (--screen-sm) {
+@media (min-width: @screen-sm-min) {
   // Automatically set modal's width for larger viewports
-
   .modal-dialog {
     width: @modal-md;
     margin: (@padding-base-vertical * 4) auto;
   }
 
   .modal-content {
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+    .box-shadow(0 5px 15px rgba(0,0,0,0.5));
   }
 
   .modal-header {
@@ -187,13 +158,12 @@
   }
 
   .modal-footer {
-    padding: var(--size-16) @modal-inner-padding;
+    padding: 16px @modal-inner-padding;
   }
 }
 
 // Modal sizes
-
-@media (--screen-sm) {
+@media (min-width: @screen-sm-min) {
   .modal-sm,
   .modal-lg {
     width: auto;
@@ -208,7 +178,7 @@
   }
 }
 
-@media (--screen-md) {
+@media (min-width: @screen-md-min) {
   .modal-lg {
     width: @modal-lg;
     margin: (@padding-base-vertical * 4) auto;

package/src/less/navbar.less

@@ -1,21 +1,25 @@
 // TODO: remove bootstrap dependencies
 
+// variables
 @import (reference) '../variables/legacy-variables.less';
+
+// mixins
 @import (reference) 'bootstrap/less/mixins/nav-vertical-align.less';
 @import (reference) 'bootstrap/less/mixins/nav-divider.less';
-@import (reference) './mixins/_arrows.less';
-@import (reference) './mixins/_border-radius.less';
-@import (reference) './mixins/_clearfix.less';
-@import (reference) './mixins/_center-block.less';
-@import (reference) './mixins/_hide-text.less';
-@import (reference) './mixins/_grid.less';
-@import (reference) './mixins/_tab-focus.less';
-@import (reference) './mixins/_logical-properties.less';
-@import './addons/_utilities.less';
-@import 'dropdowns.less';
-@import 'navs.less';
-@import 'navbar-base.less';
-@import 'close.less';
+@import (reference) 'bootstrap/less/mixins/vendor-prefixes.less';
+@import (reference) 'bootstrap/less/mixins/arrows.less';
+@import (reference) 'bootstrap/less/mixins/border-radius.less';
+@import (reference) 'bootstrap/less/mixins/clearfix.less';
+@import (reference) 'bootstrap/less/mixins/reset-filter.less';
+@import (reference) 'bootstrap/less/mixins/center-block.less';
+@import (reference) 'bootstrap/less/mixins/hide-text.less';
+@import (reference) 'bootstrap/less/mixins/grid.less';
+@import (reference) 'bootstrap/less/mixins/tab-focus.less';
+@import 'bootstrap/less/utilities.less';
+@import 'bootstrap/less/dropdowns.less';
+@import 'bootstrap/less/navs.less';
+@import 'bootstrap/less/navbar.less';
+@import 'bootstrap/less/close.less';
 
 // Extracted form 'forms.less'
 
@@ -72,14 +76,14 @@
       vertical-align: middle;
 
       label {
-        .padding(left, 0);
+        padding-left: 0;
       }
     }
 
     .radio input[type='radio'],
     .checkbox input[type='checkbox'] {
       position: relative;
-      .margin(left, 0);
+      margin-left: 0;
     }
 
     // Re-override the feedback icon.
@@ -104,5 +108,5 @@
 }
 
 .navbar-background--inverse {
-  background-color: var(--color-base-navy-light);
+  background-color: @brand-primary;
 }