sul-dlss/pre-assembly

View on GitHub
app/assets/stylesheets/sulHeader.scss

Summary

Maintainability
Test Coverage
$masthead-color: $stanford-white;
$navbar-dark-color: $stanford-cool-grey;
$navbar-background-color: $stanford-cool-grey;

.navbar {
  --bs-navbar-hover-color: rgba(255, 255, 255, 1);
  padding-top: 0.75rem;
}

.bg-navbar {
  background-color: $navbar-background-color;
}

header .h1 a {
  text-decoration: none;
}

header a {
  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
  }
}

.navbar-logo {
  background: transparent url("sul-logo-white.svg") no-repeat top left;
  background-size: 258px 41px;
  color: white!important;
  height: 41px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 258px;
}

header .topbar > .container,
header .topbar > .container-fluid {
  padding: 0;
}

.al-masthead {
  color: $masthead-color;

  .h1 {
    --al-masthead-title-size: 1.5rem;
    display: inline;
    font-weight: 600;
    padding-left: 0;

    // @include media-breakpoint-up(lg) {
    //   --al-masthead-title-size: 2rem;
    // }

    // @include media-breakpoint-up(xl) {
    //   --al-masthead-title-size: 2.25rem;
    // }
  }

  .navbar-nav {
    list-style-type: none;
    padding-left: 0;
    margin-right: 0.5rem;
    flex-direction: row;
    font-weight: 700;

    li.active a {
      color: $navbar-dark-color;
    }

    li {
      display: inline-block;
      position: relative;
      white-space: nowrap;
    }

    li:not(:last-child) {
      margin-right: 1rem;
    }

    li:not(:first-child)::before {
      content: "•";
      position: absolute;
      left: -1.165rem;
      top: 0.5rem;
    }
  }
}

.input-group {
  .search-btn {
    background-color: $navbar-dark-color;
    border-color: #dee2e6; // Border color of Blacklight inputs
    border-left: none;
    padding: 0;
    color: $stanford-palo-alto-dark;
    padding-right: 5px;

    .blacklight-icons {
      margin-top: 0.5rem;
    }

    &.btn:active {
      background-color: $stanford-palo-alto-light;
      border-color: $stanford-palo-alto-light;
    }
  }

  > .search-autocomplete-wrapper ul li:active {
    color: $stanford-black;
    background-color: var(--grey-lighter);
  }
}

.al-masthead ~ .navbar-search {
  border-top: none;
  background-color: $navbar-background-color;
  margin-bottom: 0;

  .input-group-text {
    background-color: $navbar-background-color;
    border: none;
    color: $navbar-dark-color;
    font-weight: 700;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .within-collection-dropdown {
    padding-right: 0.25rem;

    .input-group-text {
      padding-left: 0;
      padding-right: 1.25rem;
    }
  }

  .form-select {
    background-size: 1.125rem 1.125rem;
    padding-top: 0;
    padding-bottom: 0;

    // @include media-breakpoint-up(lg) {
    //   padding-right: 5rem;
    // }

    // @include media-breakpoint-up(xl) {
    //   padding-right: 8rem;
    // }
  }

  // Search field selector and full text search box input group
  .input-group:nth-of-type(2) {
    // @include media-breakpoint-up(lg) {
    //   min-width: 87%;
    // }
  }

  #search_field {
    margin-right: 0.825rem;
  }
}

.beta-banner {
  background-color: $stanford-illuminating;
  // These aren't official stanford colors
  // but no combination of official interactive colors
  // meet accessibility contrast requirements on this background.
  color: #000;
  a {
    color: #0065ad;
  }
}

.su-brand-bar__logo {
  color: $stanford-cardinal;
  display: inline-block;
  font-size: 1rem;
  font-family: $font-family-serif;
  font-weight: 400;
  font-variant-ligatures: discretionary-ligatures;
  font-feature-settings: "liga";
  margin-top: 0.125rem;
  white-space: nowrap;
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    color: $stanford-black;
    text-decoration: none;
  }
}