src/app/app.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.
 */

.navigation {
  position: fixed;
  width: 50px;
  top: 0;
  bottom: 0;
  background: #292e34;
  color: #b8bec4;
  font-size: 16px;
  z-index: 1;
  -webkit-transition: width 0.8s ease;
  -moz-transition: width 0.8s ease;
  -o-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-font-smoothing: antialiased;
}

.navigation.open {
  width: 250px;
  font-size: 16px;
  -webkit-transition: width 0.8s ease;
  -moz-transition: width 0.8s ease;
  -o-transition: width 0.8s ease;
  transition: width 0.8s ease;
}

.navigation.open a > .fa {
  font-size: 16px;
}

.navigation + .wrapper {
  margin-left: 50px;
  -webkit-transition: margin-left 0.8s ease;
  -moz-transition: margin-left 0.8s ease;
  -o-transition: margin-left 0.8s ease;
  transition: margin-left 0.8s ease;
  -webkit-font-smoothing: antialiased;
}

.navigation.open + .wrapper {
  margin-left: 250px;
  -webkit-transition: margin-left 0.8s ease;
  -moz-transition: margin-left 0.8s ease;
  -o-transition: margin-left 0.8s ease;
  transition: margin-left 0.8s ease;
  -webkit-font-smoothing: antialiased;
}

.logo {
  padding: 15px 10px 15px 4px;
  white-space: nowrap;
  color: #fff;
  background: #313d54;
  height: 60px;
  overflow: hidden;
  -webkit-transition: padding-left 0.8s ease, padding-top 0.8s ease;
  -moz-transition: padding-left 0.8s ease, padding-top 0.8s ease;
  -o-transition: padding-left 0.8s ease, padding-top 0.8s ease;
  transition: padding-left 0.8s ease, padding-top 0.8s ease;
  -webkit-font-smoothing: antialiased;
}

.logo a {
  text-decoration: none;
}

.open .logo {
  padding-left: 14px;
  padding-top: 12px;
}

.logo img {
  float: left;
  width: 38px;
  -webkit-transition: width 0.8s ease;
  -moz-transition: width 0.8s ease;
  -o-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-font-smoothing: antialiased;
}

.open .logo img {
  width: 50px;
}

.logo div {
  margin-left: 58px;
  margin-top: 10px;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
}

.open .logo div {
  display: block;
}

.text-md {
  font-size: 16px;
}

.text-semibold {
  font-weight: 500;
}

.navigation a .fa-caret-right {
  position: absolute;
  left: 0px;
  display: none;
}

.navigation .fa {
  min-width: 1em;
}

.navigation .fa + span {
  margin-left: 20px;
  flex: 1;
}

ul.navigation-primary {
  overflow-y: auto;
  height: calc(100vh - 110px);
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.navigation > ul {
  margin-top: 10px;
  &:first-of-type {
    margin-top: 0;
  }
}

.navigation li:hover > a {
  color: #fff;
  background: #4d5258;
}

.navigation li a {
  display: flex;
  padding: 15px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  color: #fff;
  -webkit-transition: padding 0.8s ease;
  -moz-transition: padding 0.8s ease;
  -o-transition: padding 0.8s ease;
  transition: padding 0.8s ease;
  -webkit-font-smoothing: antialiased;
}

.navigation.open li a {
  padding-left: 25px;
}

.navigation li.active > a,
.navigation li.active:hover > a {
  color: #fff;
  background: #4d5258;
}

.navigation li.active > a > .fa-caret-right {
  display: inline-block;
  font-size: 20px;
}

.expander {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #292e34;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.expander .fa-angle-double-left,
.open .expander .fa-angle-double-right {
  display: none;
  padding-right: 20px;
}

.expander .fa-angle-double-right,
.open .expander .fa-angle-double-left {
  display: inline-block;
  padding-right: 14px;
}

.container-fluid {
  padding-top: 61px;
}

.header {
  height: 61px;
  background: #fff;
  padding: 0 20px;
  border-bottom: 1px solid #e3e3e3;
  position: fixed;
  left: 50px;
  right: 0;
  top: 0;
  z-index: 100;
  -webkit-transition: left 0.8s ease;
  -moz-transition: left 0.8s ease;
  -o-transition: left 0.8s ease;
  transition: left 0.8s ease;
}

.navigation.open + * .header {
  left: 250px;
}

.breadcrumb-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-menu > .menu-trigger {
  background: transparent;
  font-size: 14px;
  color: #666;
  border: 1px solid #666;
  outline: none;
  cursor: pointer;

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

ul.breadcrumb {
  font-size: 20px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.breadcrumb > li {
  margin-right: 5px;
  margin-top: 18px;
  margin-bottom: 20px;
}

ul.breadcrumb a {
  text-decoration: none;
  color: #666;
}

ul.breadcrumb a:after {
  content: '/';
  margin-left: 5px;
  display: inline-block;
  text-decoration: none;
  color: #666;
}

ul.breadcrumb li:last-of-type a:after {
  content: '';
}

ul.breadcrumb a.back:after {
  content: '';
  margin-left: 0;
}

.content-wrapper {
  padding: 20px;
}