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

package/src/less/navbar.less

@@ -1,25 +1,21 @@
 // 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) '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';
+@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';
 
 // Extracted form 'forms.less'
 
@@ -76,14 +72,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.
@@ -108,5 +104,5 @@
 }
 
 .navbar-background--inverse {
-  background-color: @brand-primary;
+  background-color: var(--color-base-navy-light);
 }

package/src/less/navs.less

@@ -1,9 +1,354 @@
 // TODO: remove bootstrap dependencies
 
-// variables
 @import (reference) '../variables/legacy-variables.less';
 
 // mixins
 @import (reference) 'bootstrap/less/mixins/nav-divider.less';
-@import (reference) 'bootstrap/less/mixins/border-radius.less';
-@import 'bootstrap/less/navs.less';
+@import (reference) './mixins/_border-radius.less';
+@import (reference) './mixins/_logical-properties.less';
+
+//
+// Navs
+// --------------------------------------------------
+
+// Base class
+// --------------------------------------------------
+
+.nav {
+  margin-bottom: 0;
+  .padding(left, 0); // Override default ul/ol
+
+  list-style: none;
+  &:extend(.clearfix all);
+
+  > li {
+    position: relative;
+    display: block;
+
+    > a {
+      position: relative;
+      display: block;
+      outline-offset: -1px;
+      padding: @nav-link-padding;
+      font-weight: @font-weight-normal;
+      font-size: @font-size-base;
+      color: @nav-link-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: @nav-link-hover-color;
+      }
+
+      &:active {
+        color: @nav-link-active-color;
+      }
+    }
+  }
+
+  > .active > a {
+    font-weight: @font-weight-semi-bold;
+    color: @nav-active-link-color;
+
+    &:hover,
+    &:focus {
+      color: @nav-active-link-hover-color;
+    }
+
+    &:active {
+      color: @nav-active-link-active-color;
+    }
+  }
+
+  // Disabled state sets text to gray and nukes hover/tab effects
+
+  > .disabled > a {
+    color: @nav-disabled-link-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: @nav-disabled-link-hover-color;
+      text-decoration: none;
+      background-color: transparent;
+      cursor: @cursor-default;
+    }
+  }
+
+  // Open dropdowns
+
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: @nav-link-hover-bg;
+    }
+  }
+
+  // Nav dividers (deprecated with v3.0.1)
+  //
+  // This should have been removed in v3 with the dropping of `.nav-list`, but
+  // we missed it. We don't currently support this anywhere, but in the interest
+  // of maintaining backward compatibility in case you use it, it's deprecated.
+
+  .nav-divider {
+    .nav-divider();
+  }
+
+  // Prevent IE8 from misplacing imgs
+  //
+  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+
+  > li > a > img {
+    max-width: none;
+  }
+}
+
+.nav-inverse {
+  > li > a {
+    color: @nav-inverse-link-color;
+
+    &:hover,
+    &:focus {
+      color: @nav-inverse-link-hover-color;
+    }
+
+    &:active {
+      color: @nav-inverse-link-active-color;
+    }
+  }
+
+  > li.active > a {
+    background-color: @nav-inverse-link-active-bg;
+  }
+}
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+
+.nav-tabs {
+  border-bottom: 1px solid @nav-tabs-border-color;
+
+  > li {
+    .float(left);
+
+    // Make the list-items overlay the bottom border
+
+    margin-bottom: -1px;
+
+    // Actual tabs (as links)
+    > a {
+      .margin(right, 2px);
+
+      line-height: @line-height-base;
+      //border: 1px solid transparent;
+      //border-radius: @border-radius-base @border-radius-base 0 0;
+      border-bottom: 3px solid transparent;
+      font-size: @nav-tabs-font-size;
+    }
+  }
+
+  > .active > a {
+    border-bottom: 3px solid @nav-tabs-active-hover-border-color;
+
+    &:hover,
+    &:focus {
+      color: @link-color;
+      cursor: default;
+    }
+  }
+}
+
+// Pills
+// -------------------------
+
+.nav-pills {
+  > li {
+    .float(left);
+
+    font-size: @nav-pills-font-size;
+
+    // Links rendered as pills
+    > a {
+      font-size: @nav-pills-font-size;
+    }
+  }
+}
+
+// Stacked pills
+
+.nav-stacked {
+  > li {
+    float: none;
+
+    > a {
+      .border(left, 3px, solid, transparent);
+
+      .padding(left, 21px);
+
+      .padding(right, var(--size-24));
+
+      transition: color 0.2s ease-in-out;
+
+      &:active {
+        transition: none;
+      }
+
+      @media (--screen-lg) {
+        .padding(right, var(--size-32));
+
+        .padding(left, 29px) !important;
+      }
+    }
+
+    + li {
+      .margin(left, 0); // no need for this gap between nav items
+    }
+
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        .border(left, 3px, solid, @brand-light-blue);
+        .padding(left, 21px);
+      }
+    }
+  }
+}
+
+// Nav variations
+// --------------------------------------------------
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+  width: 100%;
+
+  > li {
+    float: none;
+    display: table-cell;
+    vertical-align: top;
+    width: 1%;
+    text-align: center;
+
+    > a {
+      text-align: center;
+    }
+  }
+
+  > .dropdown .dropdown-menu {
+    top: auto;
+    .left(auto);
+  }
+
+  &.nav-pills > li > a {
+    padding: 0 var(--size-4);
+    line-height: 20px;
+  }
+}
+
+@media (--screen-md) {
+  // Not using RTL mixin here because left/right values as equal
+
+  .nav-justified-2-p-x {
+    padding-right: percentage((1 / (2 * 2)));
+    padding-left: percentage((1 / (2 * 2)));
+  }
+
+  .nav-justified-3-p-x {
+    padding-right: percentage((1 / (3 * 2)));
+    padding-left: percentage((1 / (3 * 2)));
+  }
+
+  .nav-justified-4-p-x {
+    padding-right: percentage((1 / (4 * 2)));
+    padding-left: percentage((1 / (4 * 2)));
+  }
+
+  .nav-justified-5-p-x {
+    padding-right: percentage((1 / (5 * 2)));
+    padding-left: percentage((1 / (5 * 2)));
+  }
+
+  .nav-justified-6-p-x {
+    padding-right: percentage((1 / (6 * 2)));
+    padding-left: percentage((1 / (6 * 2)));
+  }
+
+  .nav-justified-7-p-x {
+    padding-right: percentage((1 / (7 * 2)));
+    padding-left: percentage((1 / (7 * 2)));
+  }
+
+  .nav-justified-8-p-x {
+    padding-right: percentage((1 / (8 * 2)));
+    padding-left: percentage((1 / (8 * 2)));
+  }
+}
+
+// Move borders to anchors instead of bottom of list
+//
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
+
+.nav-tabs-justified {
+  border-bottom: 0;
+
+  > li {
+    float: none;
+    display: table-cell;
+    width: 1%;
+    text-align: center;
+    vertical-align: top;
+
+    > a {
+      // Override margin from .nav-tabs
+
+      margin-right: 0;
+      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
+      border-radius: @border-radius-base;
+    }
+  }
+
+  > .active > a {
+    &,
+    &:hover,
+    &:focus {
+      border: 1px solid @nav-tabs-justified-link-border-color;
+      border-bottom: 0;
+    }
+  }
+}
+
+// Tabbable tabs
+// -------------------------
+
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+
+  > .active {
+    display: block;
+  }
+}
+
+// Dropdowns
+// -------------------------
+
+// Specific dropdowns
+
+.nav-tabs .dropdown-menu {
+
+  // make dropdown border overlap tab border
+
+  margin-top: -1px;
+
+  // Remove the top rounded corners here since there is a hard edge above the menu
+
+  .border-top-radius(0);
+}

package/src/less/neptune-social-media.less

@@ -1,12 +1,15 @@
 @import (reference) '../variables/legacy-variables.less';
 @import (reference) './mixins/_buttons.less';
+@import (reference) './mixins/_logical-properties.less';
+
+// stylelint-disable
 
 .btn-facebook {
   .button-outline (
     @btn-facebook;
     @btn-facebook-active;
     @brand-white;
-  );
+  );;
 
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPjx0aXRsZT5pY19mYWNlYm9va19kZWZhdWx0PC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48cGF0aCBkPSJNMjIuNTgyIDBoLTIxLjI2M2MtLjcyOSAwLTEuMzE5LjU5MS0xLjMxOSAxLjMxOXYyMS4yNjNjMCAuNzI5LjU5IDEuMzE5IDEuMzE5IDEuMzE5aDExLjQ0N3YtOS4yNTZoLTMuMTE1di0zLjYwN2gzLjExNXYtMi42NmMwLTMuMDg3IDEuODg2LTQuNzY4IDQuNjM5LTQuNzY4IDEuMzE5IDAgMi40NTMuMDk4IDIuNzgzLjE0MnYzLjIyNmwtMS45MS4wMDFjLTEuNDk4IDAtMS43ODguNzEyLTEuNzg4IDEuNzU2djIuMzAzaDMuNTcybC0uNDY1IDMuNjA3aC0zLjEwN3Y5LjI1Nmg2LjA5MWMuNzI5IDAgMS4zMTktLjU5MSAxLjMxOS0xLjMxOXYtMjEuMjYzYzAtLjcyOS0uNTkxLTEuMzE5LTEuMzE5LTEuMzE5IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBmaWxsPSIjM0I1OTk4Ii8+PC9zdmc+);
 
@@ -21,7 +24,7 @@
     @btn-google;
     @btn-google-active;
     @brand-white;
-  );
+  );;
 
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5nb29nbGUtbm9ybWFsPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBhdGggZD0iTTIzLjE4MTgxODIsOS44MTgxODE4MiBMMTIsOS44MTgxODE4MiBMMTIsMTQuNDU0NTQ1NSBMMTguNDM2MzYzNiwxNC40NTQ1NDU1IEMxNy44MzYzNjM2LDE3LjQgMTUuMzI3MjcyNywxOS4wOTA5MDkxIDEyLDE5LjA5MDkwOTEgQzguMDcyNzI3MjcsMTkuMDkwOTA5MSA0LjkwOTA5MDkxLDE1LjkyNzI3MjcgNC45MDkwOTA5MSwxMiBDNC45MDkwOTA5MSw4LjA3MjcyNzI3IDguMDcyNzI3MjcsNC45MDkwOTA5MSAxMiw0LjkwOTA5MDkxIEMxMy42OTA5MDkxLDQuOTA5MDkwOTEgMTUuMjE4MTgxOCw1LjUwOTA5MDkxIDE2LjQxODE4MTgsNi40OTA5MDkwOSBMMTkuOTA5MDkwOSwzIEMxNy43ODE4MTgyLDEuMTQ1NDU0NTUgMTUuMDU0NTQ1NSwwIDEyLDAgQzUuMzQ1NDU0NTUsMCAwLDUuMzQ1NDU0NTUgMCwxMiBDMCwxOC42NTQ1NDU1IDUuMzQ1NDU0NTUsMjQgMTIsMjQgQzE4LDI0IDIzLjQ1NDU0NTUsMTkuNjM2MzYzNiAyMy40NTQ1NDU1LDEyIEMyMy40NTQ1NDU1LDExLjI5MDkwOTEgMjMuMzQ1NDU0NSwxMC41MjcyNzI3IDIzLjE4MTgxODIsOS44MTgxODE4MiBaIiBpZD0icGF0aC0xIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNMjMuMTgxODE4Miw5LjgxODE4MTgyIEwxMiw5LjgxODE4MTgyIEwxMiwxNC40NTQ1NDU1IEwxOC40MzYzNjM2LDE0LjQ1NDU0NTUgQzE3LjgzNjM2MzYsMTcuNCAxNS4zMjcyNzI3LDE5LjA5MDkwOTEgMTIsMTkuMDkwOTA5MSBDOC4wNzI3MjcyNywxOS4wOTA5MDkxIDQuOTA5MDkwOTEsMTUuOTI3MjcyNyA0LjkwOTA5MDkxLDEyIEM0LjkwOTA5MDkxLDguMDcyNzI3MjcgOC4wNzI3MjcyNyw0LjkwOTA5MDkxIDEyLDQuOTA5MDkwOTEgQzEzLjY5MDkwOTEsNC45MDkwOTA5MSAxNS4yMTgxODE4LDUuNTA5MDkwOTEgMTYuNDE4MTgxOCw2LjQ5MDkwOTA5IEwxOS45MDkwOTA5LDMgQzE3Ljc4MTgxODIsMS4xNDU0NTQ1NSAxNS4wNTQ1NDU1LDAgMTIsMCBDNS4zNDU0NTQ1NSwwIDAsNS4zNDU0NTQ1NSAwLDEyIEMwLDE4LjY1NDU0NTUgNS4zNDU0NTQ1NSwyNCAxMiwyNCBDMTgsMjQgMjMuNDU0NTQ1NSwxOS42MzYzNjM2IDIzLjQ1NDU0NTUsMTIgQzIzLjQ1NDU0NTUsMTEuMjkwOTA5MSAyMy4zNDU0NTQ1LDEwLjUyNzI3MjcgMjMuMTgxODE4Miw5LjgxODE4MTgyIFoiIGlkPSJwYXRoLTMiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0yMy4xODE4MTgyLDkuODE4MTgxODIgTDEyLDkuODE4MTgxODIgTDEyLDE0LjQ1NDU0NTUgTDE4LjQzNjM2MzYsMTQuNDU0NTQ1NSBDMTcuODM2MzYzNiwxNy40IDE1LjMyNzI3MjcsMTkuMDkwOTA5MSAxMiwxOS4wOTA5MDkxIEM4LjA3MjcyNzI3LDE5LjA5MDkwOTEgNC45MDkwOTA5MSwxNS45MjcyNzI3IDQuOTA5MDkwOTEsMTIgQzQuOTA5MDkwOTEsOC4wNzI3MjcyNyA4LjA3MjcyNzI3LDQuOTA5MDkwOTEgMTIsNC45MDkwOTA5MSBDMTMuNjkwOTA5MSw0LjkwOTA5MDkxIDE1LjIxODE4MTgsNS41MDkwOTA5MSAxNi40MTgxODE4LDYuNDkwOTA5MDkgTDE5LjkwOTA5MDksMyBDMTcuNzgxODE4MiwxLjE0NTQ1NDU1IDE1LjA1NDU0NTUsMCAxMiwwIEM1LjM0NTQ1NDU1LDAgMCw1LjM0NTQ1NDU1IDAsMTIgQzAsMTguNjU0NTQ1NSA1LjM0NTQ1NDU1LDI0IDEyLDI0IEMxOCwyNCAyMy40NTQ1NDU1LDE5LjYzNjM2MzYgMjMuNDU0NTQ1NSwxMiBDMjMuNDU0NTQ1NSwxMS4yOTA5MDkxIDIzLjM0NTQ1NDUsMTAuNTI3MjcyNyAyMy4xODE4MTgyLDkuODE4MTgxODIgWiIgaWQ9InBhdGgtNSI+PC9wYXRoPiAgICAgICAgPHBhdGggZD0iTTIzLjE4MTgxODIsOS44MTgxODE4MiBMMTIsOS44MTgxODE4MiBMMTIsMTQuNDU0NTQ1NSBMMTguNDM2MzYzNiwxNC40NTQ1NDU1IEMxNy44MzYzNjM2LDE3LjQgMTUuMzI3MjcyNywxOS4wOTA5MDkxIDEyLDE5LjA5MDkwOTEgQzguMDcyNzI3MjcsMTkuMDkwOTA5MSA0LjkwOTA5MDkxLDE1LjkyNzI3MjcgNC45MDkwOTA5MSwxMiBDNC45MDkwOTA5MSw4LjA3MjcyNzI3IDguMDcyNzI3MjcsNC45MDkwOTA5MSAxMiw0LjkwOTA5MDkxIEMxMy42OTA5MDkxLDQuOTA5MDkwOTEgMTUuMjE4MTgxOCw1LjUwOTA5MDkxIDE2LjQxODE4MTgsNi40OTA5MDkwOSBMMTkuOTA5MDkwOSwzIEMxNy43ODE4MTgyLDEuMTQ1NDU0NTUgMTUuMDU0NTQ1NSwwIDEyLDAgQzUuMzQ1NDU0NTUsMCAwLDUuMzQ1NDU0NTUgMCwxMiBDMCwxOC42NTQ1NDU1IDUuMzQ1NDU0NTUsMjQgMTIsMjQgQzE4LDI0IDIzLjQ1NDU0NTUsMTkuNjM2MzYzNiAyMy40NTQ1NDU1LDEyIEMyMy40NTQ1NDU1LDExLjI5MDkwOTEgMjMuMzQ1NDU0NSwxMC41MjcyNzI3IDIzLjE4MTgxODIsOS44MTgxODE4MiBaIiBpZD0icGF0aC03Ij48L3BhdGg+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IkxvZy1pbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iZ29vZ2xlLW5vcm1hbCI+ICAgICAgICAgICAgPGcgaWQ9Ikdvb2dsZV8tRy1fTG9nbyI+ICAgICAgICAgICAgICAgIDxnIGlkPSJDbGlwcGVkIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImEiPjwvZz4gICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iI0ZCQkMwNSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI21hc2stMikiIHBvaW50cz0iLTEuMDkwOTA5MDkgMTkuMDkwOTA5MSAtMS4wOTA5MDkwOSA0LjkwOTA5MDkxIDguMTgxODE4MTggMTIiPjwvcG9seWdvbj4gICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcHBlZCI+ICAgICAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay00IiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0zIj48L3VzZT4gICAgICAgICAgICAgICAgICAgIDwvbWFzaz4gICAgICAgICAgICAgICAgICAgIDxnIGlkPSJhIj48L2c+ICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNFQTQzMzUiIGZpbGwtcnVsZT0ibm9uemVybyIgbWFzaz0idXJsKCNtYXNrLTQpIiBwb2ludHM9Ii0xLjA5MDkwOTA5IDQuOTA5MDkwOTEgOC4xODE4MTgxOCAxMiAxMiA4LjY3MjcyNzI3IDI1LjA5MDkwOTEgNi41NDU0NTQ1NSAyNS4wOTA5MDkxIC0xLjA5MDkwOTA5IC0xLjA5MDkwOTA5IC0xLjA5MDkwOTA5Ij48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDwvZz4gICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXBwZWQiPiAgICAgICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stNiIgZmlsbD0id2hpdGUiPiAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+ICAgICAgICAgICAgICAgICAgICA8L21hc2s+ICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iYSI+PC9nPiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG1hc2s9InVybCgjbWFzay02KSIgcG9pbnRzPSItMS4wOTA5MDkwOSAxOS4wOTA5MDkxIDE1LjI3MjcyNzMgNi41NDU0NTQ1NSAxOS41ODE4MTgyIDcuMDkwOTA5MDkgMjUuMDkwOTA5MSAtMS4wOTA5MDkwOSAyNS4wOTA5MDkxIDI1LjA5MDkwOTEgLTEuMDkwOTA5MDkgMjUuMDkwOTA5MSI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgICAgIDxnIGlkPSJDbGlwcGVkIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTgiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTciPjwvdXNlPiAgICAgICAgICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImEiPjwvZz4gICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzQyODVGNCIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI21hc2stOCkiIHBvaW50cz0iMjUuMDkwOTA5MSAyNS4wOTA5MDkxIDguMTgxODE4MTggMTIgNiAxMC4zNjM2MzY0IDI1LjA5MDkwOTEgNC45MDkwOTA5MSI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
 
@@ -35,18 +38,20 @@
 .btn-google {
   background-position: 11px center;
   background-repeat: no-repeat;
-  padding-left: 44px;
+  .padding(left, 44px);
 
   &.btn-lg {
     background-position: 14px center;
-    padding-left: 50px;
+    .padding(left, 50px);
   }
 
   &.btn-block {
-    padding-right: 44px;
+    .padding(right, 44px);
 
     &.btn-lg {
-      padding-right: 50px;
+      .padding(right, 50px);
     }
   }
 }
+
+/* stylelint-enable */

package/src/less/neptune.bundle.less

@@ -1,4 +1,4 @@
-@import '@transferwise/neptune-tokens/tokens.css';
+@import '@transferwise/neptune-tokens/themes/default/tokens.css';
 @import './neptune-core.less';
 @import './neptune-addons.less';
 
@@ -16,6 +16,7 @@
 @import './column-layout.less';
 @import './currency-flags.less';
 @import './decision.less';
+@import './dropdowns.less';
 @import './droppable.less';
 @import './flex.less';
 @import './footer.less';