services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss

/*!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
// :host {
//   display: block;
// }

.nav-bar {
  min-height: 48px;
  height: 48px;
  background-color: #222;
  border-color: #080808;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  border-radius: 0;

  .menu-area {
    display: flex;
    align-items: center;

    .navbar-logo {
      width: 85px;
      align-self: center;
      margin-left: 10px;

      img {
        display: block;
        width: 100%;
      }
    }
  }

  .control-area {
    @extend .menu-area;

    .statusbar {
      display: flex;
      width: 50px;
      height: 46px;
      text-decoration: none;
      justify-content: center;
      color: #f9fafb;
      cursor: pointer;

      span {
        align-self: center;
        font-size: 18px;
      }

      .ok {
        color: #81b44a;

        &:hover {
          color: #618738;
        }
      }

      .warning {
        color: #f7b500;

        &:hover {
          color: #bd8d0a;
        }
      }

      .error {
        color: #ef5c4b;

        &:hover {
          color: #bd4146;
        }
      }

      .meta {
        color: #c7d4d6;

        &:hover {
          color: #fff;
        }
      }
    }

    .btn-logout {
      height: 46px;
      padding: 0 28px;
      background: #383838;
      color: #cfdae6;
      border: 0;
      border-radius: 0;
      font-size: 14px;
      cursor: pointer;
      min-width: 280px;
      text-align: left;

      .user-name {
        color: #36afd5;
      }

      &:hover .user-name {
        color: #3392b0;
      }

      &:hover {
        background: #323030;
      }
    }
  }
}

.app-info {
  padding: 15px;

  p {
    strong {
      color: #455c74;
      font-size: 14px;
      font-weight: 600;
      width: 120px;
      display: inline-block;
    }

    .helper_instruction {
      font-size: 14px;

      i {
        vertical-align: bottom;
      }
    }

    span {
      width: 180px;
      display: inline-block;
      vertical-align: bottom;
    }
  }

  .commit {
    cursor: pointer;
  }
}

a.nav-item {
  display: block;
  position: relative;
  height: 56px;
  padding: 5px 10px;
  line-height: 48px;
  font-family: "Open Sans", sans-serif;
  transition: all .45s ease-in-out;
  text-decoration: none;
  font-size: 14px;
  overflow: hidden;
  color: #577289 !important;
  outline: none;

  span {
    vertical-align: middle;
  }

  i {
    vertical-align: middle;
    padding-left: 8px;
  }

  &:not(.has-children):hover i,
  &:not(.has-children):hover span {
    background: none !important;
    color: #36afd5 !important;
  }
  &:not(.has-children):hover #swager-bgr{
    fill: #36afd5;
  }

  &:not(:last-child)::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: calc(50% - 200px/2);
    height: 1px;
    width: 200px;
    display: block;
    background: #edf1f5;
  }

  &.active {
    color: #36afd5 !important;
    svg #swager-bgr {
      fill: #36afd5;
    }
  }

  &.has-children {
    height: auto;
  }

  .sub-nav-item {
    display: block;
    transition: all .45s ease-in-out;

    i {
      vertical-align: middle;
      padding-left: 8px;
    }

    &:hover {
      background: none !important;
      color: #36afd5 !important;
    }

    &.active {
      color: #36afd5 !important;
    }
  }
}

.ok,
.warning,
.error,
.user-name,
.meta {
  transition: all .35s ease-in-out;
}

.hamburger {
  border: none;
  padding: 0;
  background: none;
  outline: none;
  width: 60px;
  height: 46px;
  cursor: pointer;
  border-radius: 0;
  transition: all .45s ease-in-out;

  .line {
    width: 22px;
    height: 2px;
    display: block;
    margin: 4px auto;
    border-radius: 1px;
    background-color: #ecf0f1;
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;

    &:nth-child(2) {
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
  }

  &:hover {
    background: #36afd5;
  }

  &:hover .line:nth-child(1),
  &:hover .line:nth-child(3) {
    width: 18px;
  }

  &:hover .line:nth-child(2) {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    opacity: 0;
  }
}

.hamburger:hover .line:nth-child(1) {
  -webkit-transform: translateY(8px) translateX(-6px) rotate(45deg);
  -ms-transform: translateY(8px) translateX(-6px) rotate(45deg);
  -o-transform: translateY(8px) translateX(-6px) rotate(45deg);
  transform: translateY(8px) translateX(-6px) rotate(45deg);
}

.hamburger:hover .line:nth-child(3) {
  -webkit-transform: translateY(-4px) translateX(6px) rotate(-45deg);
  -ms-transform: translateY(-4px) translateX(6px) rotate(-45deg);
  -o-transform: translateY(-4px) translateX(6px) rotate(-45deg);
  transform: translateY(-4px) translateX(6px) rotate(-45deg);
}

mat-sidenav {

  mat-nav-list {
    height: 100%;

    nav {
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      svg {
        width: 37px;
        padding: 0 2px 0 5px;
        vertical-align: middle;
      }
    }
  }
}

mat-sidenav-content {
  &.mat-drawer-content {
    transition: all 0.35s ease-out;
  }

  .fade-animation {
    display: block;
    max-height: 100%;
  }
}

.blue{
  color: #35afd5;
}