gistfile1.scss

// Header styles.
//
// - Main wrapper
// - Search box
// - Message center
// - Main nav
// - User wallet

// Main wrapper.

.header {
  $logo-width: $spacing-double * 8;
  $logo-height: $spacing-double * 2.5;
  $logo-margin: $spacing-base;

  @include position(fixed, 0 null null 0);
  background-color: $white;
  box-shadow: 0 $box-shadow-small $spacing-small rgba($black, .15);
  color: $gray-coal;
  width: 100%;
  z-index: map-get($z-index, header);

  @at-root #{&}__wrapper { border-bottom: 1px solid $gray-gainsboro; }

  @at-root {
    #{&}__main,
    #{&}__sub {
      @include outer-container;
      @include row();
    }
  }

  @at-root #{&}__focus { @include span-columns(9); }

  @at-root #{&}__sponsor {
    float: left;
    padding: $spacing-medium 0;
    width: ($logo-width + $logo-margin) * 3;
  }

  @at-root #{&}__sponsor-logo {
    margin-right: $logo-margin;
    max-height: $logo-height;
    max-width: $logo-width;
  }
}

// Search box.

.search-box {
  @at-root #{&}__prompt {
    float: right;
    padding-top: $spacing-medium * 2;

    a { color: $gray-coal; }
  }

  @at-root #{&}__form {
    padding-top: $spacing-medium;
  }

  // No other easy way to override default input bottom margin.
  // scss-lint:disable ImportantRule
  @at-root #{&}__input {
    $search-field-width: 85%;

    @include font-size(1.8, 1.8);
    background: none;
    border: 0;
    font-family: $proxima-reg;
    margin-bottom: 0 !important;
    width: $search-field-width !important;
  }
  // scss-lint:enable ImportantRule

  @at-root #{&}__button {
    margin-left: $spacing-small;
    padding: $spacing-medium - ceil($spacing-small / 2) $spacing-medium;
  }
}

// Message center.

.message-center {
  @include span-columns(3);
  background-color: $gray-light;
  box-sizing: border-box;
  min-height: $spacing-large * 2;
  padding: $spacing-base 0 0 $spacing-base;

  @at-root #{&}__photo {
    display: inline-block;
    position: relative;
  }

  @at-root #{&}__info {
    display: inline-block;
    vertical-align: middle;
  }

  @at-root #{&}__notification {
    @include position(absolute, ceil($spacing-small / 2) ceil($spacing-small / 2) null null);
    @include size($spacing-base);
    background-color: $red-main;
    border: 2px solid $white;
    border-radius: 100%;
  }

  @at-root #{&}__name {
    @include font-size(2.2, 2.2);
    cursor: pointer;
    display: inline-block;
    float: left;
    font-family: $proxima-light;
    margin-bottom: -$spacing-small;
    max-width: $spacing-medium * 6;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
<<<<<<< HEAD
=======
  }

  // We need to override those values in this particular case only.
  // scss-lint:disable ImportantRule
  @at-root #{&}__icon {
    float: left;
    line-height: 2.2rem !important;
    top: 0 !important;
>>>>>>> origin
  }
  // scss-lint:enable ImportantRule

  // We need to override those values in this particular case only.
  // scss-lint:disable ImportantRule
  @at-root #{&}__icon {
    float: left;
    line-height: 2.2rem !important;
    top: 0 !important;
  }
  // scss-lint:enable ImportantRule

  @at-root #{&}__signout { @include text-link(1.1, 1.1); }
}

// Main nav.

.main-nav {
  @include font-size(1.4);
  @include span-columns(9);

  @at-root #{&}__item {
    margin: 0 $spacing-medium * 2;
    &:first-child { margin-left: 0; }
  }

  @at-root #{&}__link--lead {
    padding-left: $spacing-medium;

    &:after { display: none; }
  }
}

.main-nav__link {
  color: $gray-coal;
  display: block;
  padding: $spacing-base 0;
  position: relative;

  &:after {
    @include position(absolute, null null 0 0);
    @include transition(all ease $transition-duration / 2);
    background-color: $gray-dark;
    content: '';
    height: 0;
    visibility: hidden;
    width: 100%;
  }

  @at-root #{&}--is-active,
  &:hover,
  &:focus {
    color: $gray-coal;

    &:after {
      height: 3px;
      visibility: visible;
    }
  }
}

// User wallet.

.user-wallet {
  @include font-size(1.4);
  @include span-columns(3);
  border-left: 1px solid $gray-smoke;
  box-sizing: border-box;
  line-height: .1rem;
  padding-left: $spacing-base;
<<<<<<< HEAD

  @at-root #{&}--indicator {
    line-height: 2.1rem;
  }

  @at-root #{&}__item {
    color: $blue-main;
    display: inline-block;
    font-family: $proxima-smbd;
    margin-left: $spacing-medium;
  }
}

.wallet-nav__link {
  color: $gray-coal;
  display: inline-block;
  padding: $spacing-base 0;
  position: relative;

  &:after {
    @include position(absolute, null null 0 0);
    @include transition(all ease $transition-duration / 2);
    background-color: $gray-dark;
    content: '';
    height: 0;
    visibility: hidden;
    width: 100%;
  }

  @at-root #{&}--is-active,

  &:hover,
  &:focus {
    color: $gray-coal;

    &:after {
      height: 3px;
      visibility: visible;
    }
=======

  @at-root #{&}__item {
    color: $blue-main;
    display: inline-block;
    font-family: $proxima-smbd;
    margin-left: $spacing-medium;
>>>>>>> origin
  }
}