Takumon/mean-blog

.toolbar {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);

  &__app-logo {
    width: 42px;
    margin-right: 42px;
    box-shadow: 0 0 4px -2px white;
    transition: all 0.3s ease;
    outline: 0;


    &:hover {
      cursor: pointer;
      opacity: 0.7;
      box-shadow: 0 0 6px 0px white;
    }
  }

  &__tab {
    border-bottom: 0;
  }

  &__title {
    font-weight: 300;
  }

  &__spacer {
    flex: 1 1 auto;
  }

  &__btn {
    margin-right: 12px;
    $parent: &;

    &_color_white {
      @extend #{$parent};
      background: #475ab7;
    }
  }
}


.navbar {

  &__link {
    opacity: 1;
    color: #e6e8f5;
    height: 63px;
    line-height: 63px;
    font-size: 16px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;

    i {
      margin-right: 4px;
    }
  }
}


.menu-btn {
  width: 36px;
  height: 36px;
  margin: auto 12px;

  &__icon {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: white;
    image-rendering: -webkit-optimize-contrast;
    cursor: pointer;

    &:hover {
      opacity: 0.6;
    }
    &:focus {
      outline: 0;
    }
  }

  &__menu {

    &__description {
      border-bottom: #e4e4e4 1px solid;
    }

    &__username {
      font-weight: bold;
    }
  }
}

.content {
  width: 100%;
  margin: auto;
  box-sizing: border-box;

  &__progressbar {
    width: 100%;
  }
}