frontend/app/assets/stylesheets/archivesspace/header.scss
.global-header {
  .navbar {
    .container {
      padding-right: 0;
    }
  }
  .navbar-default {
    @include border-radius(0 0 4px 4px);
    @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.15));
  }
}

.global-header-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: start;
  padding: 0;
}
@media (min-width: 768px) {
  .global-header-nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

// header customisations

.navbar-wrapper {
  display: flex;
  padding: 1rem;
  background-color: $gray-100;
}

.navbar-nav {
  > li:last-child {
    position: static; // Ensures toolbar tooltips are aligned properly on display
  }
}

.header-logo {
  max-width: 300px;
}

.navbar .navbar-brand {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 30px rgba(255, 255, 255, 0.125);
  color: black;
  font-weight: bold;
}

.navbar .brand:hover {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 30px rgba(255, 255, 255, 0.125);
}

// support input appended to navbar search field
.navbar .input-append,
.navbar .input-prepend {
  margin-bottom: 0;
}

.navbar-search .input-append input {
  float: left;
}

.navbar .input-append .btn-group {
  display: inline-block;
  padding: 0;
  margin-top: 0;
}

.navbar .input-append .btn.last {
  @include border-radius(0 3px 3px 0);
}

.navbar .input-prepend .btn {
  margin-right: -1px;
}

// Fix for login on mobile
.collapsing,
.collapse.in {
  display: block;
  width: 100%;
}

.navbar-login > li {
  float: left;
}

.user-container .popover {
  min-width: 120px;
}

.repo-container {
  .inset-label-append {
    float: left;
  }

  .popover {
    width: 120%;
  }
}

.repository-label {
  display: block;
}

.user-label > span,
.repository-label > span {
  margin-right: 5px;
}

.repository-label.empty {
  background-color: #f99;
  padding: 0 0 0 5px;
  @include border-radius(4px);
}

.dropdown-menu {
  .boring-link {
    display: inline;
    padding: 0;
    clear: none;
    font-weight: normal;
    line-height: $baseLineHeight;
    color: $linkColor;
    white-space: normal;
  }
}

.repository-header.col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

.repository-header .navbar-default {
  background-color: transparent;
  @include border-radius(4px 4px 0 0);

  .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
}

header .inset-label {
  min-width: 100px;
}

// select-a-repository popover
.select-a-repository {
  ul {
    padding: 15px;
    width: 160%;
  }

  .btn-primary {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .global-header,
  .repository-header {
    padding: 0;
  }
}

/* inset label */
.inset-label {
  padding: 0 10px;
  display: inline-block;
  margin: 5px 0 -5px !important;
  @include box-shadow(
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.15)
  );
  #font {
    @include sans-serif(13px, normal, 30px);
  }

  margin-bottom: 0;
  background-color: #e9e9e9;
  overflow: hidden;
  max-width: 200px;
  @include border-radius(4px);
}

.repo-container .inset-label,
.user-container .inset-label {
  @include box-shadow('inset -2px 0px 3px #CCC');
  @include border-radius(4px 0 0 4px);

  float: left;
}

.repo-container .inset-btn-group,
.user-container .inset-btn-group {
  float: left;
  .btn {
    @include border-radius(0 4px 4px 0);
  }
}

.btn-group .inset-label {
  @include border-radius(4px 0 0 4px);
}

.record-pane .inset-label {
  margin: 0 !important;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
}

// Browser Warning
.browser-warning {
  margin-bottom: 0;

  .container {
    text-align: center;
  }
}

.navbar {
  .btn-collapse-login {
    display: none;
  }
}

@media (min-width: 768px) {
  .login-dropdown .dropdown-menu {
    min-width: 220px;
  }
}

@media (max-width: 979px) {
  .navbar {
    .btn-collapse-login {
      display: block;
    }
  }
  .login-dropdown {
    .session-actions.dropdown-toggle {
      display: none;
    }
    .dropdown-menu {
      display: block !important;
    }
  }

  // When on a mobile device, disable the bootstrap
  // backdrop as it breaks the dropdown menus
  // See http://stackoverflow.com/questions/17435359/bootstrap-collapsed-menu-links-not-working-on-mobile-devices
  .dropdown-backdrop {
    display: none !important;
  }
}
