@transferwise/components 46.130.3 → 46.131.1

package/src/styles/less/navbar.less

@@ -0,0 +1,1442 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) '../variables/neptune-tokens.less';
+@import (reference) "./mixins/_nav-vertical-align.less";
+@import (reference) "./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 "close.less";
+
+
+// stylelint-disable
+
+//
+// Navbars
+// --------------------------------------------------
+
+// Wrapper and base class
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+  position: relative;
+  font-size: var(--font-size-14);
+  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
+  margin-bottom: @navbar-margin-bottom;
+  border: 0 solid transparent;
+  transition: border-top-width 0s linear;
+
+  // Prevent floats from breaking the navbar
+
+  &:extend(.clearfix all);
+
+  @media (--screen-md) {
+    border-radius: @navbar-border-radius;
+
+    .container,
+    .container-fluid {
+      border: 0 solid transparent;
+    }
+  }
+}
+
+// Navbar heading
+//
+// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
+// styling of responsive aspects.
+.navbar-header {
+  &:extend(.clearfix all);
+
+  @media (--screen-md) {
+    .float(left);
+  }
+}
+
+// Navbar collapse (body)
+//
+// Group your navbar content into this for easy collapsing and expanding across
+// various device sizes. By default, this content is collapsed when <768px, but
+// will expand past that for a horizontal display.
+//
+// To start (on mobile devices) the navbar links, forms, and buttons are stacked
+// vertically and include a `max-height` to overflow in case you have too much
+// content for the user's viewport.
+
+.navbar-collapse {
+  overflow-x: visible;
+  &:extend(.clearfix all);
+
+  -webkit-overflow-scrolling: touch;
+
+  @media (--screen-md) {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+
+    &.collapse {
+      display: block !important;
+      padding-bottom: 0; // Override default setting
+    }
+
+    // Undo the collapse side padding for navbars with containers to ensure
+    // alignment of right-aligned contents.
+
+    .navbar.affix &,
+    .navbar-fixed-top &,
+    .navbar-static-top &,
+    .navbar-fixed-bottom & {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+// Both navbar header and collapse
+//
+// When a container is present, change the behavior of the header and collapse.
+
+.container,
+.container-fluid {
+
+  > .navbar-header,
+  > .navbar-collapse {
+
+    @media (--screen-md) {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}
+
+//
+// Navbar alignment options
+//
+// Display the navbar across the entirety of the page or fixed it to the top or
+// bottom of the page.
+
+// Static top (unfixed, but 100% wide) navbar
+
+.navbar-static-top {
+  z-index: @zindex-navbar;
+  margin-bottom: 0;
+
+  @media (--screen-md) {
+    border-radius: 0;
+
+    .container,
+    .container-fluid {
+      border-width: 0;
+      margin-bottom: -1px;
+    }
+  }
+}
+
+// Fix the top/bottom navbars when screen real estate supports it
+
+.navbar.affix,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right:0;
+  left:0;
+  z-index: @zindex-navbar-fixed;
+  backface-visibility: hidden;
+  background-color: @color-navy-background-elevated;
+
+  .navbar-nav > li {
+    > a,
+    .navbar-title,
+    .navbar-text {
+      color: var(--color-background-screen);
+
+      @media (--screen-sm-max) {
+        color: var(--color-content-primary);
+      }
+    }
+    &.active {
+      > a {
+        color: var(--color-content-accent-active);
+      }
+    }
+  }
+
+  // Undo the rounded corners
+
+  @media (--screen-md) {
+    border-radius: 0;
+  }
+}
+
+.navbar.affix {
+  top: (-1 * @navbar-height);
+  border-top-width: @navbar-height;
+  transition: border-top-width 0.2s ease-out, background-color 0.2s ease-out;
+}
+
+.navbar-fixed-top {
+  top: 0;
+
+  .container,
+  .container-fluid {
+    margin-bottom: -1px;
+  }
+}
+
+.navbar-fixed-bottom {
+  bottom: 0;
+  margin-bottom: 0; // override .navbar defaults
+
+  .container,
+  .container-fluid {
+    margin-top: -1px;
+  }
+}
+
+// Brand/project name
+
+.navbar-brand {
+  .float(left);
+
+  padding: @navbar-padding-vertical @navbar-padding-horizontal
+    (@navbar-padding-vertical - 3px);
+  font-size: var(--size-16); // Was 18px
+  line-height: @navbar-line-height;
+  margin-top: 12px;
+  .margin(right, 10px);
+
+  height: (@spacer * 3);
+  width: 118px;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  > img {
+    display: block;
+  }
+}
+
+// Navbar toggle
+//
+// Custom button for toggling the `.navbar-collapse`, powered by the collapse
+// JavaScript plugin.
+
+.navbar-toggle {
+  position: relative;
+  .float(left);
+
+  padding: 9px 0;
+  .navbar-vertical-align(34px);
+
+  background-color: transparent;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 0;
+  .margin(right, 12px);
+
+  // We remove the `outline` here, but later compensate by attaching `:hover`
+  // styles to `:focus`.
+
+  &:focus {
+    outline: 0;
+  }
+
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--line-height-body);
+  margin-bottom: 8px;
+  color: @color-navy-content-primary;
+
+  .icon-bar:first-child {
+    margin-top: 1px;
+  }
+
+  // Bars
+
+  .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+    background-color: var(--color-content-accent);
+  }
+
+  .icon-bar + .icon-bar {
+    margin-top: 4px;
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--color-content-accent-hover);
+
+    .icon-bar {
+      background-color: var(--color-content-accent-hover);
+    }
+  }
+
+  @media (--screen-md) {
+    display: none;
+  }
+}
+
+// Navbar nav links
+//
+// Builds on top of the `.nav` components with its own modifier class to make
+// the nav the full height of the horizontal nav (above 768px).
+
+.navbar-nav {
+  > li {
+    > a,
+    > button {
+      padding: @navbar-padding;
+      line-height: @navbar-line-height;
+      outline-offset: -1px;
+      transition: color ease @transition-duration;
+
+      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+        .padding(left, @padding-small-horizontal);
+
+        .padding(right, @padding-small-horizontal);
+      }
+
+      &.dropdown-toggle {
+        height: (@navbar-line-height + (2 * @navbar-padding-vertical));
+        border: 0;
+        background: none;
+        line-height: @navbar-line-height;
+        width: 100%;
+        .text-align(left);
+
+        color: var(--color-content-accent);
+
+        &:active,
+        &:focus {
+          border-bottom-color: transparent;
+          outline: 0;
+          color: var(--color-content-accent-active);
+        }
+
+        @media (--screen-md) {
+          .navbar-inverse & {
+            color: @color-navy-content-primary;
+          }
+
+          &:hover {
+            border-bottom-color: transparent;
+            outline: 0;
+            color: var(--color-content-accent-hover);
+          }
+        }
+
+        .caret {
+          .margin(left, (@spacer / 2));
+        }
+      }
+
+      &.navbar-title-link {
+        @media (--screen-md) {
+          font-size: var(--font-size-20);
+        }
+      }
+    }
+  }
+
+  > li.divider {
+    display: none;
+  }
+
+  @media (max-width: @grid-float-breakpoint-max) {
+    > li {
+      > a,
+      > button {
+        font-size: var(--font-size-16);
+        padding: @navbar-padding-mobile;
+        -webkit-touch-callout: none; // When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.
+      }
+    }
+
+    // Dropdowns get custom display when collapsed
+
+    .navbar-collapse-flatten {
+      .dropdown-toggle {
+        display: none;
+      }
+
+      .dropdown-menu {
+        position: static;
+        margin-top: 0;
+        background-color: transparent;
+        border: 0;
+        display: block;
+        float: none;
+        width: 100%;
+        box-shadow: none;
+        padding: @padding-large-vertical 0;
+
+        > li > a {
+          padding: @navbar-padding-mobile;
+        }
+      }
+    }
+
+    > li.divider {
+      display: block;
+      .nav-divider(var(--color-interactive-secondary));
+    }
+
+    > li > a {
+      color: var(--color-content-accent);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:hover,
+      &:focus {
+        color: var(--color-content-accent-hover);
+      }
+
+      &:active {
+        color: var(--color-content-accent-active);
+      }
+    }
+  }
+
+  // Uncollapse the nav
+
+  @media (--screen-md) {
+    .float(left);
+
+    > li {
+      .float(left);
+
+      > a {
+        padding-bottom: (@navbar-padding-vertical - 2px);
+        font-size: var(--font-size-14);
+      }
+    }
+  }
+}
+
+// Navbar form
+//
+// Extension of the `.form-inline` with some extra flavor for optimum display in
+// our navbars.
+
+.navbar-form {
+  padding: 8px @navbar-padding-horizontal;
+
+  .form-group {
+    @media (max-width: @grid-float-breakpoint-max) {
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // Undo 100% width for pull classes
+
+  @media (--screen-md) {
+    width: auto;
+    border: 0;
+    margin-left: 0;
+    margin-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    box-shadow: none;
+
+    // Vertically center in expanded, horizontal navbar
+
+    margin-top: 12px;
+    margin-bottom: 12px;
+
+    // Mixin behavior for optimum display
+
+    .form-inline();
+  }
+
+  @media (max-width: @grid-float-breakpoint) {
+    border-bottom: 1px solid var(--color-border-neutral);
+  }
+}
+
+// Dropdown menus
+
+// Menu position and menu arrows
+
+.navbar-nav {
+  > li {
+    > .dropdown-menu {
+      margin-top: @navbar-height;
+      .arrow-pointer(@dropdown-arrow-width);
+
+      > li > a {
+        font-size: var(--font-size-14);
+
+        @media (max-width: @grid-float-breakpoint) {
+          position: relative;
+          -webkit-touch-callout: none; // When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.
+
+          .badge {
+            position: absolute;
+            top: (@spacer * 2);
+            .right(0);
+
+            padding: 5px;
+            text-indent: @navbar-collapse-max-width;
+            width: @spacer;
+            min-width: @spacer;
+            height: @spacer;
+          }
+        }
+      }
+
+      > .active > a {
+        color: var(--color-content-accent-active);
+        background-color: transparent;
+        font-weight: var(--font-weight-bold);
+
+        &:hover,
+        &:focus {
+          background-color: var(--color-background-neutral);
+        }
+      }
+    }
+
+    @media (max-width: @screen-sm-min) {
+      > .dropdown-menu-overlay {
+        margin-top: 0;
+      }
+    }
+
+    //show dropdowns in other states
+
+    &.dropdown {
+      &:active,
+      &:focus,
+      &:focus-within,
+      &.focus-within {
+        > a,
+        > button {
+          color: var(--color-content-accent-active);
+        }
+
+        .dropdown-menu {
+          .dropdown-menu-open();
+        }
+      }
+
+      &:hover {
+        @media (--screen-md) {
+          .dropdown-menu {
+            .dropdown-menu-open();
+          }
+        }
+      }
+    }
+  }
+}
+
+//Dropdown arrows
+
+.navbar-right,
+.pull-xs-right {
+  li > .dropdown-menu {
+    &::before {
+      .right(calc((@dropdown-arrow-width * 2) + (@dropdown-arrow-width / 2)));
+
+      .left(auto);
+
+      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+        .right((@dropdown-arrow-width * 2));
+      }
+    }
+  }
+
+  &.dropdown-menu-center {
+    &::before {
+      .right(auto);
+
+      .left(50%);
+
+      .margin(left, (@dropdown-arrow-width / -2));
+    }
+  }
+}
+
+// Menu position and menu caret support for dropups via extra dropup class
+
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+  margin-bottom: 0;
+}
+
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+  .navbar-vertical-align(@input-height-small);
+
+  &.btn-sm {
+    .navbar-vertical-align(@input-height-small);
+  }
+
+  &.btn-xs {
+    .navbar-vertical-align(22);
+  }
+
+  font-weight: var(--font-weight-semi-bold);
+
+  @media (max-width: @grid-float-breakpoint-max) {
+    display: block;
+  }
+}
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+  .navbar-vertical-align(@size-24);
+
+  @media (--screen-md) {
+    .float(left);
+    margin-left: @navbar-padding-horizontal;
+    margin-right: @navbar-padding-horizontal;
+  }
+}
+
+// Component alignment
+//
+// Repurpose the pull utilities as their own navbar utilities to avoid specificity
+// issues with parents and chaining. Only do this when the navbar is uncollapsed
+// though so that navbar contents properly stack and align in mobile.
+//
+// Declared after the navbar components to ensure more specificity on the margins.
+
+@media (--screen-md) {
+  .navbar-left {
+    .pull-xs-left();
+  }
+
+  .navbar-right {
+
+    .pull-xs-right();
+
+    ~ .navbar-right {
+      .margin(right, 0);
+    }
+  }
+}
+
+// Alternate navbars
+// --------------------------------------------------
+
+// Default navbar
+
+.navbar-default {
+  background-color: transparent;
+
+  .container,
+  .container-fluid {
+    border-color: var(--color-border-neutral);
+  }
+
+  .navbar-brand {
+    color: @color-navy-content-primary;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+
+  .navbar-text {
+    color: var(--color-content-primary);
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: var(--color-content-primary);
+
+      @media (--screen-md) {
+        border-bottom: 3px solid transparent;
+      }
+
+      &:hover,
+      &:focus {
+        color: var(--color-content-accent-hover);
+        background-color: transparent;
+      }
+    }
+
+    > .active {
+      > a,
+      > .dropdown-toggle {
+
+        font-weight: var(--font-weight-bold);
+        &,
+        &:hover,
+        &:focus {
+          color: var(--color-content-accent-active);
+          background-color: transparent;
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  // Dropdown menu items
+
+  .navbar-nav {
+    // Remove background color from open dropdown
+
+    > .open > a {
+      &,
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: transparent;
+        color: var(--color-content-accent-active);
+      }
+    }
+
+    @media (max-width: @grid-float-breakpoint-max) {
+      // Dropdowns get custom display when collapsed
+
+      .open .dropdown-menu {
+        > li > a {
+          color: var(--color-content-accent);
+
+          &:hover,
+          &:focus,
+          &:focus-within {
+            color: var(--color-content-accent-hover);
+            background-color: transparent;
+          }
+        }
+
+        > .active > a {
+          font-weight: var(--font-weight-bold);
+          &,
+          &:hover,
+          &:focus {
+            color: var(--color-content-accent-active);
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  // Links in navbars
+  //
+  // Add a class to ensure links outside the navbar nav are colored correctly.
+
+  .navbar-link {
+    color: var(--color-content-accent);
+
+    &:hover {
+      color: var(--color-content-accent-hover);
+    }
+  }
+
+  .btn-link {
+    color: var(--color-content-accent);
+
+    &:hover,
+    &:focus {
+      color: var(--color-content-accent-hover);
+    }
+  }
+}
+
+// Inverse navbar
+
+.navbar-inverse {
+  background-color: transparent;
+
+  .container,
+  .container-fluid {
+    border-color: var(--color-border-neutral);
+  }
+
+  .navbar-brand {
+    color: var(--color-content-primary);
+
+    &:hover,
+    &:focus {
+      color: var(--color-content-primary);
+      background-color: transparent;
+    }
+  }
+
+  .navbar-text {
+    color: @color-navy-content-primary;
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: @color-navy-content-primary;
+
+      @media (--screen-md) {
+        border-bottom: 3px solid transparent;
+      }
+
+      &:hover,
+      &:focus {
+        color: var(--color-content-accent-hover);
+        background-color: transparent;
+      }
+    }
+
+    > .active {
+      > a,
+      > .dropdown-toggle {
+        color: var(--color-content-accent-active);
+        font-weight: var(--font-weight-bold);
+        &,
+        &:hover,
+        &:focus {
+          color: var(--color-content-accent-hover);
+          background-color: transparent;
+          border-color: transparent;
+        }
+      }
+    }
+
+    > .open > a,
+    .dropdown:focus-within > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: transparent;
+        color: var(--color-content-accent-hover);
+      }
+    }
+
+    @media (max-width: @grid-float-breakpoint-max) {
+      > li > a {
+        color: var(--color-content-primary);
+      }
+    }
+  }
+
+  .navbar-link {
+    color: @color-navy-content-primary;
+
+    &:hover {
+      color: var(--color-content-accent-hover);
+    }
+  }
+
+  .btn-link {
+    color: @color-navy-content-primary;
+
+    &:hover,
+    &:focus {
+      color: var(--color-content-accent-hover);
+    }
+  }
+}
+
+.navbar .navbar-brand,
+.navbar-inverse .navbar-brand {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  color: transparent;
+
+  &:hover,
+  &:focus {
+    color: transparent;
+  }
+}
+
+.navbar .flag, .navbar .fast-flag {
+  height: 24px;
+  width: 24px;
+  margin-top: 16px;
+  .margin(right, 8px);
+
+  .float(left);
+}
+
+.navbar .logo-text {
+  height: 20px;
+  width: 104px;
+  margin-top: 16.5px;
+  .margin(right, 8px);
+
+  .float(left);
+}
+
+.cover {
+  display: none;
+}
+
+@media (max-width: @grid-float-breakpoint-max) {
+  .navbar-collapse {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100% !important;
+
+    // Backwards compatibility if collapse-panel missing
+
+    background-color: var(--color-background-screen);
+    top: (@navbar-height - 2px);
+    padding: 8px;
+
+    .open,
+    .dropdown:focus-within,
+    .dropdown.focus-within {
+      border-bottom: none;
+
+      > a {
+        color: var(--color-content-accent);
+      }
+
+      .caret {
+        transform: rotate(-180deg);
+      }
+    }
+
+    &.navbar-collapse-with-panel {
+      top: 0;
+      padding: 0;
+      background-color: transparent;
+    }
+
+    .navbar-collapse-panel {
+      position: fixed;
+      height: 100%;
+      top: 0;
+      overflow-y: scroll;
+      padding: 8px;
+      background-color: var(--color-background-screen);
+      color: var(--color-content-primary) !important;
+      width: @navbar-collapse-max-width;
+      max-width: @navbar-collapse-max-width !important;
+      transition: transform 0.35s ease;
+      transform: translateX(-@navbar-collapse-max-width);
+    }
+
+    .navbar-nav {
+      > li {
+        border-bottom: 1px solid var(--color-border-neutral);
+      }
+    }
+
+    .dropdown-menu {
+      position: relative;
+      width: 100%;
+      box-shadow: none;
+      padding: 0;
+      padding-bottom: @padding-large-vertical;
+      float: none;
+      margin-top: 0 !important;
+      border-bottom: 1px solid var(--color-border-neutral);
+
+      &::before {
+        display: none;
+      }
+
+      .dropdown-header {
+        padding: @navbar-padding-mobile;
+      }
+    }
+
+    .navbar-toggle {
+      .left(280px);
+
+      opacity: 0;
+      transition: opacity 0.35s ease;
+      display: inline-block;
+      position: absolute;
+      top: 4px;
+
+      &.close {
+        margin-top: 0;
+        padding: 9px 0;
+      }
+    }
+
+    // Only show toggle after animation finished
+
+    &.in {
+      .navbar-toggle {
+        opacity: 1;
+      }
+    }
+
+    .cover {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: @color-navy-background-screen;
+      opacity: 0;
+      transition: opacity 0.35s ease;
+    }
+
+    &.in,
+    &[aria-expanded='true'] {
+      .cover {
+        opacity: 0.9;
+      }
+
+      .navbar-collapse-panel {
+        transform: translateX(0);
+      }
+    }
+
+    .navbar-btn.btn-group {
+      display: flex;
+
+      .btn {
+        display: block;
+        width: 100%;
+        .text-align(left);
+
+        + .dropdown-toggle {
+          flex: 0;
+        }
+      }
+
+      .dropdown-menu {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.navbar .profile-name {
+  .np-theme-light & {
+    padding-bottom: 3px;
+  }
+
+  .caret {
+    vertical-align: top;
+    line-height: @navbar-line-height;
+  }
+
+  .text-ellipses,
+  .text-ellipsis,
+  .truncate {
+    max-width: 75px;
+    display: inline-block;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    .text-ellipses,
+    .text-ellipsis,
+    .truncate {
+      max-width: 125px;
+    }
+  }
+
+  @media (min-width: @screen-xl-min) {
+    .text-ellipses,
+    .text-ellipsis,
+    .truncate {
+      max-width: 220px;
+    }
+  }
+}
+
+.navbar[data-spy~='affix'] + * {
+  margin-top: 0;
+}
+
+.navbar[data-spy~='affix'].affix + * {
+  margin-top: @navbar-height;
+}
+
+@media (min-width: @screen-md-min) {
+  .navbar + .jumbotron,
+  .navbar + .jumbotron-image,
+  .navbar + .jumbotron-image-inverse,
+  .jumbotron-image-adjacent-to-navbar {
+    margin-top: (-1 * @navbar-height - 2px);
+  }
+
+  .navbar.affix + .jumbotron,
+  .navbar.affix + .jumbotron-image,
+  .navbar.affix + .jumbotron-image-inverse {
+    margin-top: 0;
+  }
+}
+
+.navbar + .jumbotron,
+.navbar + .jumbotron-image > .jumbotron,
+.navbar + .jumbotron-image-inverse > .jumbotron,
+.jumbotron-image-adjacent-to-navbar > .jumbotron {
+  padding-bottom: 64px;
+
+  @media (min-width: @screen-md-min) {
+    padding-top: 140px;
+    padding-bottom: 104px;
+  }
+}
+
+.navbar {
+  > .container .navbar-brand,
+  > .container-fluid .navbar-brand {
+    .margin(left, 0);
+  }
+}
+
+@media (max-width: @screen-sm-max) {
+  .navbar-static-top {
+    background-color: @color-navy-background-elevated;
+    border-bottom-color: transparent;
+  }
+}
+
+.navbar-title {
+  .float(left);
+  font-size: var(--font-size-20);
+  line-height: var(--line-height-title);
+  margin-top: 12px;
+  margin-bottom: 12px;
+  font-weight: var(--font-weight-bold);
+}
+
+.navbar-subtitle {
+  font-size: var(--font-size-14);
+  margin-bottom: 8px;
+}
+
+.navbar-title,
+.navbar-subtitle {
+  color: @color-navy-content-primary;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  width: 75%;
+
+  @media (min-width: @screen-lg-min) {
+    color: var(--color-content-primary);
+    width: 100%;
+  }
+}
+
+.navbar-logo {
+  width: 127px;
+  height: 22px;
+  margin-top: 13px;
+  margin-bottom: 21px;
+}
+
+@nav-toolbar-height: 64px;
+
+.nav-toolbar {
+  padding-top: 16px;
+  margin-top: -16px;
+  padding-bottom: 0;
+  background-color: @color-navy-background-elevated;
+  border-bottom: 1px solid var(--color-border-neutral);
+
+  @media (min-width: @screen-lg-min) {
+    margin-top: 0;
+    background-color: var(--color-background-screen);
+
+    &.affix {
+      top: 0;
+      z-index: @zindex-navbar;
+      margin-top: 0;
+      border-top: 0;
+      position: fixed;
+      backface-visibility: hidden;
+
+      + .container,
+      + .container-fluid {
+        margin-top: @nav-toolbar-height !important;
+      }
+    }
+  }
+
+  @media (max-width: @screen-md-max) {
+    &.affix {
+      // we have a global affix rule which would be breaking to remove
+
+      position: relative !important;
+
+      + .container,
+      + .container-fluid {
+        margin-top: 0 !important;
+      }
+    }
+
+    .btn-info:not(.disabled, :disabled),
+    .btn-warning:not(.disabled, :disabled),
+    .btn-danger:not(.disabled, :disabled) {
+      color: var(--color-content-accent);
+      border-color: var(--color-interactive-accent);
+    }
+
+    .btn-info:not(.disabled, :disabled):hover,
+    .btn-warning:not(.disabled, :disabled):hover,
+    .btn-danger:not(.disabled, :disabled):hover {
+      color: @color-navy-content-primary;
+    }
+
+    .form-control,
+    .input-group,
+    .btn-input,
+    .input-group-addon {
+      border-color: #ffffff;
+    }
+  }
+
+  h1 {
+    line-height: var(--line-height-title);
+  }
+
+  .close {
+    text-decoration: none;
+    height: 32px;
+  }
+}
+
+.nav-toolbar--compact {
+  @media (min-width: @screen-lg-min) {
+    padding-top: 0;
+  }
+}
+
+@media (min-width: @screen-lg-min) {
+  .column-layout .nav-toolbar.affix {
+    // Use comment to allow older LESS compilers to work.
+
+    width: ~'calc(100% - @{column-width})';
+  }
+}
+
+// TODO this is a hack with no docs
+
+.simple-nav {
+  background-color: @color-navy-background-elevated;
+
+  .navbar-nav > li > a {
+    padding-top: (@navbar-padding-vertical + 4px);
+    padding-bottom: (@navbar-padding-vertical + 1px);
+  }
+
+  .navbar-header {
+    padding-top: 4px;
+    width: ~'calc(100% - 140px)';
+
+    @media (min-width: @screen-md-min) {
+      width: ~'calc(100% - 340px)';
+    }
+  }
+
+  .navbar-nav > li > a.dropdown-toggle {
+    height: @nav-toolbar-height;
+  }
+
+  > .navbar-right li > a {
+    // HACK - better to make things only collapse if inside collapse
+
+    .float(right);
+  }
+}
+
+@media (min-width: @screen-sm-min) {
+  .simple-nav .navbar-nav > li > a {
+    font-size: var(--font-size-16) !important;
+  }
+}
+
+@media (min-width: @screen-lg-min) {
+  .simple-nav {
+    background-color: var(--color-background-screen);
+    border-bottom: 1px solid var(--color-border-neutral);
+  }
+}
+
+@media (max-width: @screen-md-max) {
+  .simple-nav .navbar-nav > li > a {
+    color: @color-navy-content-primary;
+
+    &:not(.disabled, :disabled):focus,
+    &:not(.disabled, :disabled):hover,
+    &:not(.disabled, :disabled):active {
+      color: var(--color-content-accent-hover);
+    }
+  }
+}
+
+.simple-nav .profile-name .text-ellipses,
+.simple-nav .profile-name .text-ellipsis,
+.simple-nav .profile-name .truncate {
+  max-width: 240px;
+}
+
+//Public-nav
+
+.tw-public-navigation-item-content__icon {
+  vertical-align: middle;
+}
+
+.tw-public-navigation-item-content__text {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 164px;
+}
+
+// Secondary navigation
+
+@media (--screen-md) {
+  .subnav {
+    height: (
+      @navbar-secondary-height * 2
+    ) !important; //this line is necessary until we solve the style="height:0;" in navbar-collapse added when closing the mobile menu
+    position: relative;
+    min-height: @navbar-secondary-height;
+
+    &::before {
+      content: '';
+      background-color: transparent;
+      width: 100%;
+      height: @navbar-secondary-height;
+      position: absolute;
+      top: @navbar-secondary-height;
+      border-top: var(--color-border-neutral) solid 1px;
+      .left(0);
+    }
+
+    &.navbar-inverse {
+      &::before {
+        background-color: @color-navy-background-screen;
+        border-top: none;
+      }
+    }
+
+    .navbar-nav > li {
+      > a {
+        padding-top: (@navbar-secondary-padding-vertical + 1);
+      }
+
+      > button {
+        height: @navbar-secondary-height;
+      }
+    }
+
+    .navbar-btn,
+    .navbar-brand {
+      margin-top: (
+        @navbar-secondary-padding-vertical + @padding-small-vertical
+      );
+    }
+  }
+
+  .subnav-menu {
+    position: absolute;
+    top: @navbar-secondary-height;
+  }
+}
+
+/* stylelint-enable */
+.form-inline {
+  // Kick in the inline
+  @media (min-width: @screen-sm-min) {
+    // Inline-block all the things for "inline"
+    .form-group {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // In navbar-form, allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
+      vertical-align: middle;
+    }
+
+    // Make static controls behave like regular ones
+    .form-control-static {
+      display: inline-block;
+    }
+
+    .input-group {
+      display: inline-table;
+      vertical-align: middle;
+
+      .input-group-addon,
+      .input-group-btn,
+      .form-control {
+        width: auto;
+      }
+    }
+
+    // Input groups need that 100% width though
+    .input-group > .form-control {
+      width: 100%;
+    }
+
+    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
+    .control-label {
+      margin-bottom: 0;
+      vertical-align: calc(-2px);
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match.
+    .radio,
+    .checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      vertical-align: middle;
+
+      label {
+        .padding(left, 0);
+      }
+    }
+
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      position: relative;
+      .margin(left, 0);
+    }
+
+    // Re-override the feedback icon.
+    .has-feedback .form-control-feedback {
+      top: 0;
+    }
+  }
+}
+
+// Extracted form 'tranferwise.less'
+.nav,
+.navbar,
+.pager,
+.dropdown-menu {
+  a {
+    text-decoration: none;
+  }
+}
+
+.tw-public-navigation-item-content__text.text-ellipsis,
+.tw-public-navigation-item-content__text.text-ellipses,
+.tw-public-navigation-item-content__text.truncate {
+  display: inline-block;
+}
+
+.navbar-background--inverse {
+  background-color: @color-navy-background-elevated;
+}