philomena/assets/css/common/_header.scss

.header {
  background: $header_color;
}

.header__force-right {
  margin-left: auto;
}

[data-notification-count="0"] {
  display: none !important;
}

.fa-search-button {
  padding: 0 0.5rem;
}

.fa-unread-icon {
  color: $unread_message_color;
}

// For text preceded by an icon
.fa__text {
  padding-left: 6px;
}

.header__navigation {
  display: flex;
  flex-wrap: wrap;
}

a.header__link {
  display: inline-block;
  padding: 0 $header_spacing;
  line-height: $header_height;
  font-size: $header_font_size;
  color: $text_light_color;
  background: $header_color;
  flex-shrink: 0;
}

a.header__link:hover, .header__dropdown:hover > a {
  cursor: pointer;
  background-color: $header_hover_color;
}

.header__input, .header__input:focus {
  padding: 0 $header_field_spacing;
  border: none;
  height: $header_field_height;

  background: $header_field_color;
  color: $text_light_color;
  -webkit-text-fill-color: $text_light_color;

  text-overflow: ellipsis;

  /* reset rounded borders on iOS/Safari */
  border-radius: 0;
}

span.header__counter {
  @include number-wrap($header_hover_color);
}

select.header__input, select.header__input:focus {
  /* in case of <select>, a mere border-radius: 0; rule is not sufficient */
  appearance: none;
  /* setting "appearance: none;" removes dropdown arrow; the solution is to create a custom one:
   * (based on http://stackoverflow.com/a/28274325) the first two items create left and right triangles
   * that match up to create an arrow, the third one specifies dropdown background */
  background: linear-gradient(45deg, transparent 50%, $text_light_color 50%) calc(100% - 15px) 12px / 5px 5px no-repeat,
              linear-gradient(135deg, $text_light_color 50%, transparent 50%) calc(100% - 10px) 12px / 5px 5px no-repeat;
  background-color: $header_field_color;
  /* prevent the custom arrow from overlapping the content */
  padding-right: 25px;
  &:hover {
    cursor: pointer;
    background-color: $header_field_hover_color;
  }

  /* Remove dropdown arrow in IE11 - not needed in Edge */
  &::-ms-expand {
    display: none;
  }

  & option, & optgroup {
    background-color: $header_field_color;
  }

  &:hover option, &:hover optgroup {
    background-color: $header_field_hover_color;
  }
}

.header__input--search {
  width: 18vw;
  max-width: 300px;
}

/* fix webkit's invisible coloring of the search bar */
.header__input--search:-webkit-autofill,
.header__input--search:-webkit-autofill:hover,
.header__input--search:-webkit-autofill:focus {
  -webkit-text-fill-color: $text_light_color;
  box-shadow: 0 0 0 1000px $header_field_color inset;
  border: none;
}

.header__search__button, .header__search__button:visited {
  border: none;
  // Chrome loves extra padding for some reason
  padding-top: 0;
  padding-bottom: 0;
  line-height: $header_field_height;

  font-size: 1.25em;

  background: $header_field_color;
  color: $text_light_color;

  &:hover {
    cursor: pointer;
    background: $header_field_hover_color;
  }
}

.header__filter-form {
  max-width: 15em; /* prevent long filter names from causing overflow */
  margin: $header_field_vertical_spacing $header_field_spacing;
}

a.header__link-user {
  display: flex;
  padding: $header_field_vertical_spacing $header_field_spacing;
}

span.header__link-user__dropdown-arrow {
  padding: 0 9px;
  background: linear-gradient(45deg, transparent 50%, $text_light_color 50%) calc(100% - 5px) 12px / 5px 5px no-repeat,
              linear-gradient(135deg, $text_light_color 50%, transparent 50%) calc(100%) 12px / 5px 5px no-repeat;
  background-color: $header_color;
}

span.header__link-user__dropdown-arrow:hover,
.header__dropdown:hover span.header__link-user__dropdown-arrow {
  background-color: $header_hover_color;
}

.header--secondary {
  background: $header_secondary_color;
  line-height: $header_sub_height;

  a {
    line-height: $header_sub_height;
    color: $foreground_color;
    background: $header_secondary_color;
  }

  a:hover, .header__dropdown:hover > a {
    background-color: $header_secondary_hover_color;
  }

  div {
    height: $header_sub_height;
  }

  span.header__counter {
    @include number-wrap($header_secondary_hover_color);
  }

}

span.header__counter__admin {
  @include number-wrap($header_admin_hover_color);
}

.header--secondary__admin-links {
  margin-right: $header_spacing;
  background: $header_admin_color;

  a {
    background: $header_admin_color;
  }
  a:hover {
    background: $header_admin_hover_color;
  }
}

/* Flash notices */

.flash {
  line-height: $header_field_height;
}

.flash--site-notice {
  background: $site_notice_color;
  color: $text_light_color;
  a, a:active, a:visited {
    text-decoration: underline;
    color: $site_notice_link_color;
  }
  a:hover {
    color: $site_notice_link_hover_color;
  }
}

.flash--warning {
  color: $foreground_color;
  background: $warning_light_color;
}

.flash--success {
  color: $foreground_color;
  background: $success_light_color;
}

/* Mobile layout */

@media (max-width: $min_px_width_for_desktop_layout) {
  .header > div {
    height: auto;
  }

  .header__search {
    width: 100%;
    order: 1; /* sets the item to be displayed after .header__row__right, i.e. on a new line */
  }

  .header__input--search {
    width: 100% !important;
    max-width: 100% !important;
  }

  select.header__input, select.header__input:focus {
    /* Using an absolute max-width resolves an issue with
     * Chrome on small viewports, where a long filter
     * name would cause a new row to be added. */
    max-width: 100px;
  }

  .header--secondary__admin-links {
    margin: 0;
  }

  .flash {
    padding: 0 6px;
  }

  span.header__counter__admin {
    margin-left: 1vw;
    padding: 0 1vw;
  }
}

/* Desktop layout */

@media (min-width: $min_px_width_for_desktop_layout) {
  .header > div, .flash {
    box-sizing: border-box;
  }

  .flash {
    width: 100%;
    padding-left: $layout_side_margin;
    padding-right: $layout_side_margin;
  }

  .layout--center-aligned {
    .header > div {
      padding-left: $centered_layout_side_margin;
      padding-right: $centered_layout_side_margin;
    }

    .flash {
      padding-left: $centered_layout_side_margin + $header_spacing;
      padding-right: $centered_layout_side_margin + $header_spacing;
    }
  }
}

@media (max-width: $max_px_width_for_limited_desktop_layout) and (min-width: $min_px_width_for_desktop_layout) {
  .header > div {
    height: auto;
  }
}