header2.scss

/* Despite being in /shared/, this styling is currently only used for the Pegasus
 * header.
 */

@import 'color';

#pageheader2-wrapper {
  padding-top: 0;

  .pageheader-translucent {
    background-color: $teal !important;
  }

  #pageheader {
    width: 100%;
    background-color: $teal;
    height: 50px;
    margin: 0 0 40px 0;

    .content {
      width: 100%;
      padding: 0 10px;
      overflow: visible;
      box-sizing: border-box;
    }

    #left {
      float: left;
      margin: 0;

      .rtl & {
        position: absolute;
        left: 0;
        right: 0;
        padding-right: 300px;
      }
    }

    #logo-wrapper {
      display: inline-block;
      padding: 4px 0 4px 16px;
      float: left;

      #logo {
        width: 42px;
        height: 42px;
      }

      #logo-uk {
        width: 364px;
        height: 87px;
        display: block;
      }
    }

    #right {
      right: 16px;
      position: absolute;
    }

    #headerlinks {
      float: left;
      position: relative;
      padding-left: 6px;

      .rtl & {
        float: right;
      }

      .headerlink {
        display: inline-block;
        font-size: 14px;
        margin: 14px 0 0 30px;
        font-family: 'Gotham 4r', sans-serif;
        color: $white;
        text-decoration: none;

        &:link, &:visited {
          color: $white;
          text-decoration: none;
        }

        &:hover, &:active {
          color: $white;
          border-bottom: solid 2px $orange;
        }

        .rtl & {
          float: right;
        }
      }
    }

    .learnoption:hover {
      text-decoration: underline;
    }

    #sign_in_or_user {
      margin: 5px 0 0 0;

      .button-signin {
        margin-top: -3px;
        background-color: transparent;
        border: 2px solid $white;
        color: $white;
      }
    }
  }

  .user_menu {
    color: $white;
    background-color: transparent;
    border: 2px solid $white;
    margin-top: -4px;
    height: 38px;
    user-select: none;

    .user_name {
      font-family: 'Gotham 4r', sans-serif;
      max-width: 120px;
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      float: left;
    }

    .user_options {
      position: absolute;
      top: 55px;
      right: 55px;
    }

    .user_menu_arrow_down,
    .user_menu_arrow_up {
      font-size: 25px;
    }

    .user_menu_arrow_up {
      margin-top: -3px;
    }

    .user_menu_arrow_down {
      margin-top: -2px;
    }
  }

  #hamburger {
    padding-top: 4px;
    padding-left: 20px;

    .hide-responsive-menu {
      top: 55px;
    }
  }
}