@transferwise/components 0.0.0-experimental-57e70f3 → 0.0.0-experimental-09066ec

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

@@ -1,1442 +0,0 @@
-@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;
-}