config/themes/default/grunt/scss/modules/_header.scss
$height_bar: 70px;
$top_spacing: 25px;

.header {
  border-bottom-width:1px;
  color:$color-text-secondary;
  overflow:hidden;

  @include breakpoint(small-and-down) {
    border:0 none;
  }
}

.header__logo,
.header__breadcrumb {
  overflow:hidden;
  padding:0 $gutter;

  @include breakpoint(small-and-down) {
    padding:0 $gutter-mobile;
  }
}

.header__logout {
  float:right;
  margin-top:$gutter - 5px;

  a {
    color:$color-text-secondary;

    &:hover {
      color:$color-text;
    }
  }

  @include breakpoint(small-and-down) {
    display:none;
  }
}

/* LOGO */
@include breakpoint(small-and-down) {
  .header__logo {
    display:none;
  }
}

.header__logo {
  overflow:hidden;

  #logo {
    float:left;
    padding-top: $gutter;

    a:hover { background-color: inherit; }

    a, img {
      display:block;
    }
  }
}

.header__logo {
  /*max-height: 83px;*/
  transition: 0.3s cubic-bezier(0.6, 0.69, 0.14, 1) margin-top;
}


/* header__breadcrumb, FOOTER: Common */
.header__breadcrumb,
.footer {
  overflow: hidden;
  width: 100%;
}

.breadcrumb, .footer {
  a, span {
    display: inline-block;
    padding: $top_spacing 0 0 0;
    height: $height_bar;
  }
}

/* header__breadcrumb */
.header__breadcrumb {
  min-height:$height_bar;
  position:relative;
  overflow:visible;
  background:$color-bg;

  @include breakpoint(small-and-down) {
    position:fixed;
    top:0;
    border-bottom-width:1px;
    border-color: rgba(0,0,0,0.1);
    background-clip: padding-box;
    z-index:$z-index__dropdown;
    height:$height_bar;
  }
}
@include breakpoint(small-and-down) {
  .header {
    height:$height_bar;
    overflow: hidden;
    width:100%;
  }
}

.header__breadcrumb,
.header__breadcrumb * {
  white-space: nowrap;
}



/* breadcrumb */
.breadcrumb {
  float: left;
  width:calc(100% - 120px);
  overflow:hidden;
  height:$height_bar;
  position:relative;

  &:after {
    content:'';
    position:absolute;
    right:0;
    top:0;
    bottom:1px;
    width:20px;
    background: linear-gradient(to left, #{$color-bg} 0%,rgba(255,255,255,0) 100%);
  }

  @include breakpoint(medium-and-down) {
    .breadcrumb__index,
    .breadcrumb__root,
    .breadcrumb__folder,
    .breadcrumb__slash {
      display:none;
    }

    .breadcrumb__root:last-child {
      display: inline-block;
      @include ellipsis();
    }

    *[data-trigger] {
      width:100%;

      * {
        vertical-align:middle;
      }

      em {
        display:inline-block;
        max-width:calc(100% - 32px);
        @include ellipsis();
      }
    }
  }

}



/* header__navigation */
.header__navigation {
  display:block;
  height:$height_bar;
  float:right;

  a, span {
    margin:20px 0;
    padding:0 25px;
    display:inline-block;
    height:$height_bar - 20px - 20px;
    line-height:$height_bar - 20px - 20px;

    &:first-child {
      border-right: 1px solid $color-border;
      padding-left:0;
    }

    &:last-child {
      padding-right:0;
    }
  }

  a i {
    opacity:0.4;
  }

  span i {
    opacity:0.1;
  }

  a:hover i,
  a.hover i {
    opacity:1;
  }
}

.collapseheader {
  display:block;
  text-align:center;
  margin-top:-20px;
  position:relative;
  height:20px;

  @include breakpoint(small-and-down) {
    display:none;
  }

  a.collapseheader__link {
    display:block;
    font:0/0 a;
    color:transparent;
    height:20px;
    width:46px;
    margin-left:auto;
    margin-right:auto;
    cursor:n-resize;

    &:after {
      content: "";
      width:26px;
      height:4px;
      background:#D8D8D8;
      border-radius:2px;
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-15px;
      margin-top:-2px;
    }

    &:hover {
      &:after {
        background:$color-text-tertiary;
      }
    }
  }
}

.header__hide .collapseheader a.collapseheader__link {
  cursor:s-resize;
}





.header__dropdown {
  display:none;

  position:absolute;
  top:$height_bar - 5px;
  left:$half-gutter;
  border-width:1px;
  border-top:0 none;
  background:$color-bg;
  z-index:$z-index__dropdown;
  border-radius:2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  background-clip: padding-box;

  a {
    display:block;
    border-top-width:1px;
    height:$height_bar - 20px;
    line-height:$height_bar - 20px;
    padding:0 50px 0 $half-gutter;
    @include ellipsis();
  }

  @include breakpoint(medium-and-down) {
    a:hover {
      color:$color-text-secondary;
    }
  }

  @include breakpoint(small-and-down) {
    left:0;
    right:0;
    top:$height_bar - 1px;
    border-left:0 none;
    border-right:0 none;
    position:fixed;

    a {
      padding:0 $gutter-mobile;
    }
  }
}

.header__active {
  .header__dropdown {
    display:block;

    @include breakpoint(xlarge-and-up) {
      display:none;
    }

    @include breakpoint(large) {
      display:none;
    }
  }

  @include breakpoint(medium-and-down) {
    .breadcrumb__current {
      color:$color-text-secondary;

      i {
        opacity:0.33;
      }
    }
  }
}

.breadcrumb__current {
  cursor:pointer;

  i {
    display:none;
  }

  @include breakpoint(medium-and-down) {
  color:$color-text;

    i {
      display:inline-block;
      opacity:1;
    }
  }

  @include breakpoint(medium-and-down) {
    &:hover {
      color:$color-text-secondary;

      i {
        opacity:0.33;
      }
    }
  }
}

body.page--login {
  height:100%;
  overflow:hidden;

  #content {
    margin:0;
  }

  .header__breadcrumb,
  .collapseheader {
    display:none;
  }

  .header {
    border:0 none;
    position:relative;
    z-index:$z-index__form + 1;
  }

  .footer__updatedsince {
    display:none;
  }
}

.page--browser {
  .header__logo {
    margin-top:0;
  }
}