coriolis-web/src/components/Header/Header.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

$brand-color: #FFF;

.root {
  color: #fff;
  background: #000 url('./headerBackground.png');
  height: 64px;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
  .bannerTitle {
    margin: 0;
    font-weight: $weight-light;
    font-size: 32px;
    line-height: 32px;
    color: #FFFFFF;
    letter-spacing: -0.81px;
    min-width: $wizard-content-width;
    padding: 16px 32px;
  }

  .menuIcon {
    width: 20px;
    height: 16px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 1001;
    float: left;
    margin-left: 24px;
    margin-top: 8px;
    span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: #FFF;
      border-radius: 1px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
      &:nth-child(1) {
        top: 0px;
      }
      &:nth-child(2), &:nth-child(3) {
        top: 8px;
      }
      &:nth-child(4) {
        top: 16px;
      }
    }

    &:global(.open) {
      span {
        &:nth-child(1) {
          top: 6px;
          width: 0%;
          left: 50%;
        }
        &:nth-child(2) {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
        }
        &:nth-child(3) {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
        &:nth-child(4) {
          top: 12px;
          width: 0%;
          left: 50%;
        }
      }
    }
  }
}

.sideMenu {
  width: 224px;
  position: absolute;
  left: -224px;
  background-color: #000;
  background-image: url('../../public/images/star-bg.jpg');
  transition: left $animation-swift-out;
  ul {
    margin-top: 88px;
    list-style: none;
    li {
      margin-bottom: 24px;
      list-style-image: none;
      a {
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: -0.27px;
        cursor: pointer;
        &:hover {
          color :$blue;
        }
      }

    }
  }
  &:global(.open) {
    left: 0;
  }
}

.container {
  margin: 0 auto;
  padding: 16px 0;
  max-width: $max-content-width
}

.brand {
  color: color($brand-color lightness(+10%));
  text-decoration: none;
  font-size: 1.75em; /* ~28px */
  background-size: 7%;
  display: inline-block;
  margin-left: 24px;
  position: relative;
  z-index: 10;
  float: left;
  :global(.logo) {
    width: 160px;
    height: 32px;
  }
}
.userIcon {
  float: right;
  margin-right: 16px;
}
.brandTxt {
  margin-left: 10px;
}

.nav {
  float: right;
  margin-top: 6px;
}

.banner {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}


.bannerDesc {
  padding: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 1.25em;
  margin: 0;
}