@transferwise/components 0.0.0-experimental-1bc70dc → 0.0.0-experimental-cbe4279

package/src/neptune-css/less/navs.less

@@ -0,0 +1,339 @@
+@import (reference)  "../variables/neptune-tokens.less";
+@import (reference) "../variables/legacy-variables.less";
+
+// mixins
+@import (reference) "./mixins/_nav-divider.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;
+      color: var(--color-content-primary);
+      font-weight: var(--font-weight-regular);
+      font-size: var(--font-size-16);
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: var(--color-content-accent-hover);
+      }
+
+      &:active {
+        color: var(--color-content-accent-active);
+      }
+    }
+  }
+
+  > .active > a {
+    color: var(--color-content-accent);
+    font-weight: var(--font-weight-semi-bold);
+
+    &:hover,
+    &:focus {
+      color: var(--color-content-accent-hover);
+    }
+
+    &:active {
+      color: var(--color-content-accent-active);
+    }
+  }
+
+  // Disabled state sets text to gray and nukes hover/tab effects
+
+  > .disabled > a {
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  // Open dropdowns
+
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: var(--color-background-neutral);
+    }
+  }
+
+  // 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: @color-navy-content-primary;
+  }
+
+  > li.active > a {
+    background-color: @color-navy-background-screen;
+  }
+}
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+
+.nav-tabs {
+  border-bottom: 1px solid var(--color-border-neutral);
+
+  > li {
+    .float(left);
+
+    // Make the list-items overlay the bottom border
+
+    margin-bottom: -1px;
+
+    // Actual tabs (as links)
+    > a {
+      .margin(right, 2px);
+
+      line-height: var(--line-height-body);
+      //border: 1px solid transparent;
+      //border-radius: @border-radius-base @border-radius-base 0 0;
+      border-bottom: 3px solid transparent;
+      font-size: var(--font-size-16);
+    }
+  }
+
+  > .active > a {
+    border-bottom: 3px solid var(--color-border-neutral);
+
+    &:hover,
+    &:focus {
+      color: var(--color-content-accent);
+      cursor: default;
+    }
+  }
+}
+
+// Pills
+// -------------------------
+
+.nav-pills {
+  > li {
+    .float(left);
+
+    font-size: var(--font-size-14);
+
+    // Links rendered as pills
+    > a {
+      font-size: var(--font-size-14);
+    }
+  }
+}
+
+// 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, var(--color-interactive-accent));
+        .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: var(--line-height-body);
+  }
+}
+
+@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 var(--color-border-neutral);
+      border-radius: @border-radius-base;
+    }
+  }
+
+  > .active > a {
+    &,
+    &:hover,
+    &:focus {
+      border: 1px solid var(--color-border-neutral);
+      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/neptune-css/less/neptune-addons.less

@@ -0,0 +1,4 @@
+@import "./addons/_background-utilities.less";
+@import "./addons/_display-utilities.less";
+@import "./addons/_spacing-utilities.less";
+@import "./addons/_border.less";

package/src/neptune-css/less/neptune-core.less

@@ -0,0 +1,4 @@
+@import "./core/_fonts.less";
+@import "./core/_scaffolding.less";
+@import "./core/_typography.less";
+@import "./core/_typography-utilities.less";

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

@@ -0,0 +1,84 @@
+@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;
+    #fff;
+  );;
+
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPjx0aXRsZT5pY19mYWNlYm9va19kZWZhdWx0PC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48cGF0aCBkPSJNMjIuNTgyIDBoLTIxLjI2M2MtLjcyOSAwLTEuMzE5LjU5MS0xLjMxOSAxLjMxOXYyMS4yNjNjMCAuNzI5LjU5IDEuMzE5IDEuMzE5IDEuMzE5aDExLjQ0N3YtOS4yNTZoLTMuMTE1di0zLjYwN2gzLjExNXYtMi42NmMwLTMuMDg3IDEuODg2LTQuNzY4IDQuNjM5LTQuNzY4IDEuMzE5IDAgMi40NTMuMDk4IDIuNzgzLjE0MnYzLjIyNmwtMS45MS4wMDFjLTEuNDk4IDAtMS43ODguNzEyLTEuNzg4IDEuNzU2djIuMzAzaDMuNTcybC0uNDY1IDMuNjA3aC0zLjEwN3Y5LjI1Nmg2LjA5MWMuNzI5IDAgMS4zMTktLjU5MSAxLjMxOS0xLjMxOXYtMjEuMjYzYzAtLjcyOS0uNTkxLTEuMzE5LTEuMzE5LTEuMzE5IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBmaWxsPSIjM0I1OTk4Ii8+PC9zdmc+);
+
+  &:hover,
+  &:focus {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPjx0aXRsZT5pY19mYWNlYm9va19ob3ZlcjwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+PHBhdGggZD0iTTIyLjU4MiAwaC0yMS4yNjNjLS43MjkgMC0xLjMxOS41OTEtMS4zMTkgMS4zMTl2MjEuMjYzYzAgLjcyOS41OSAxLjMxOSAxLjMxOSAxLjMxOWgxMS40NDd2LTkuMjU2aC0zLjExNXYtMy42MDdoMy4xMTV2LTIuNjZjMC0zLjA4NyAxLjg4Ni00Ljc2OCA0LjYzOS00Ljc2OCAxLjMxOSAwIDIuNDUzLjA5OCAyLjc4My4xNDJ2My4yMjZsLTEuOTEuMDAxYy0xLjQ5OCAwLTEuNzg4LjcxMi0xLjc4OCAxLjc1NnYyLjMwM2gzLjU3MmwtLjQ2NSAzLjYwN2gtMy4xMDd2OS4yNTZoNi4wOTFjLjcyOSAwIDEuMzE5LS41OTEgMS4zMTktMS4zMTl2LTIxLjI2M2MwLS43MjktLjU5MS0xLjMxOS0xLjMxOS0xLjMxOSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
+  }
+}
+
+.btn-google {
+  .button-outline (
+    @btn-google;
+    @btn-google-active;
+    #fff;
+  );;
+
+  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+);
+
+  &:hover,
+  &:focus {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5nb29nbGUtYWN0aXZlPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBhdGggZD0iTTIzLjE4MTgxODIsOS44MTgxODE4MiBMMTIsOS44MTgxODE4MiBMMTIsMTQuNDU0NTQ1NSBMMTguNDM2MzYzNiwxNC40NTQ1NDU1IEMxNy44MzYzNjM2LDE3LjQgMTUuMzI3MjcyNywxOS4wOTA5MDkxIDEyLDE5LjA5MDkwOTEgQzguMDcyNzI3MjcsMTkuMDkwOTA5MSA0LjkwOTA5MDkxLDE1LjkyNzI3MjcgNC45MDkwOTA5MSwxMiBDNC45MDkwOTA5MSw4LjA3MjcyNzI3IDguMDcyNzI3MjcsNC45MDkwOTA5MSAxMiw0LjkwOTA5MDkxIEMxMy42OTA5MDkxLDQuOTA5MDkwOTEgMTUuMjE4MTgxOCw1LjUwOTA5MDkxIDE2LjQxODE4MTgsNi40OTA5MDkwOSBMMTkuOTA5MDkwOSwzIEMxNy43ODE4MTgyLDEuMTQ1NDU0NTUgMTUuMDU0NTQ1NSwwIDEyLDAgQzUuMzQ1NDU0NTUsMCAwLDUuMzQ1NDU0NTUgMCwxMiBDMCwxOC42NTQ1NDU1IDUuMzQ1NDU0NTUsMjQgMTIsMjQgQzE4LDI0IDIzLjQ1NDU0NTUsMTkuNjM2MzYzNiAyMy40NTQ1NDU1LDEyIEMyMy40NTQ1NDU1LDExLjI5MDkwOTEgMjMuMzQ1NDU0NSwxMC41MjcyNzI3IDIzLjE4MTgxODIsOS44MTgxODE4MiBaIiBpZD0icGF0aC0xIj48L3BhdGg+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IkxvZy1pbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iZ29vZ2xlLWFjdGl2ZSI+ICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgICAgIDwvbWFzaz4gICAgICAgICAgICA8dXNlIGlkPSJhIiBmaWxsPSIjRkZGRkZGIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
+  }
+}
+
+.btn-facebook,
+.btn-google {
+  @social-icon-position-x: 11px;
+  @social-icon-position-x-lg: 14px;
+  @btn-horizontal-padding: 44px;
+  @btn-horizontal-padding-lg: 50px;
+
+  background-position: @social-icon-position-x center;
+  background-repeat: no-repeat;
+  .padding(left, @btn-horizontal-padding);
+
+  &.btn-lg {
+    background-position-x: @social-icon-position-x-lg;
+    .padding(left, @btn-horizontal-padding-lg);
+  }
+
+  &.btn-block {
+    .padding(right, @btn-horizontal-padding);
+
+    &.btn-lg {
+      .padding(right, @btn-horizontal-padding-lg);
+    }
+  }
+
+  [dir="rtl"] & {
+    background-position-x: calc(100% - @social-icon-position-x);
+
+    &,
+    &.btn-lg {
+      padding-left: @btn-padding-horizontal;
+    }
+
+    &.btn-block {
+      padding-right: @btn-horizontal-padding;
+      padding-left: @btn-horizontal-padding;
+    }
+
+    &.btn-lg {
+      background-position-x: calc(100% - @social-icon-position-x-lg);
+      &.btn-block {
+        padding-right: @btn-horizontal-padding-lg;
+        padding-left: @btn-horizontal-padding-lg;
+      }
+    }
+  }
+}
+
+/* stylelint-enable */

package/src/neptune-css/less/neptune.bundle.less

@@ -0,0 +1,65 @@
+@import "@transferwise/neptune-tokens/tokens.css";
+@import '@transferwise/neptune-tokens/themes/personal/tokens.css';
+@import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
+@import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
+@import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
+@import '@transferwise/neptune-tokens/themes/platform/tokens.css';
+@import '@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css';
+@import '@transferwise/neptune-tokens/themes/business/tokens.css';
+@import '@transferwise/neptune-tokens/themes/business--dark/tokens.css';
+@import '@transferwise/neptune-tokens/themes/business--forest-green/tokens.css';
+@import '@transferwise/neptune-tokens/themes/business--bright-green/tokens.css';
+
+@import './core/viewport-themes.less';
+
+@import "./core/_fonts.less";
+@import "./core/_scaffolding.less";
+@import "./core/_typography.less";
+@import "./core/_typography-utilities.less";
+@import "./addons/_background-utilities.less";
+@import "./addons/_display-utilities.less";
+@import "./addons/_spacing-utilities.less";
+@import "./addons/_border.less";
+
+// Components
+@import "./components/_component-animations.less";
+@import "./accordion.less";
+@import "./alerts.less";
+@import "./background.less";
+@import "./badge.less";
+@import "./border-radius.less";
+@import "./breadcrumbs.less";
+@import "./buttons.less";
+@import "./button-groups.less";
+@import "./input-groups.less";
+@import "./circles.less";
+@import "./column-layout.less";
+@import "./currency-flags.less";
+@import "./decision.less";
+@import "./dropdowns.less";
+@import "./droppable.less";
+@import "./flex.less";
+@import "./footer.less";
+@import "./grid.less";
+@import "./link-callout.less";
+@import "./list-group.less";
+@import "./navs.less";
+@import "./navbar.less";
+@import "./select.less";
+@import "./close.less";
+@import "./loaders.less";
+@import "./media.less";
+@import "./modals.less";
+@import "./panels.less";
+@import "./popovers.less";
+@import "./process.less";
+@import "./progress-bars.less";
+@import "./ring.less";
+@import "./sequences.less";
+@import "./table.less";
+@import "./tooltip.less";
+@import "./tick.less";
+@import "./utilities.less";
+@import "./wells.less";
+
+@import "./neptune-social-media.less";