Sidebar.scss

@import "../styles/colors.scss";
@import "../styles/fonts.scss";

.full-width .Sidebar {
  left: -260px;
  box-shadow: none !important;
}

.Sidebar {
  background-color: #3756a0;
  display: flex;
  flex-direction: column;
  font-family: $font-alt;
  font-size: 15px;
  width: 260px;
  position: fixed;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  transition: all 0.3s ease;

  .form-control, .input-group-addon {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #ffffff;
  }

  .input-group-addon {
    padding: 0;
  }

  ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
  }

  a, a &:visited {
    color: #FFFFFF !important;
  }

  i {
    color: #FFFFFF;
  }

  .Sidebar__unreadCount {
    display: inline-block;
    height: 1.5em;
    min-width: 1.5em;
    float: right;
    padding: 2px;
    text-align: center;
    border-radius: 1.5em;
    background-color: rgba(black, 0.2);
  }

  .list-selector {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0 10px;

    li {
      width: 25%;
      float: left;
      text-align: center;

      a.active {
        opacity: 1 !important;
      }

      span, a {
        display: block;
        height: 56px;
        line-height: 52px;
        opacity: 0.6;
      }
    }
  }

  .sidebar-content {
    flex-grow: 1;
    overflow-y: auto;

    ul ul {
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);

      li a, .menu-row {
        display: block;
        line-height: 1.8em;
        font-size: 16px;
        margin: 0 20px;
        opacity: 0.6;
      }

      &:hover {
        opacity: 1;
      }

      .Sidebar__search {
        margin: 0 20px;
      }
    }

    ul {
      font-family: $font-primary;
      clear: both;
      background-color: rgba(255, 255, 255, 0.05);
      list-style-type: none;

      a.active {
        opacity: 1 !important;
      }
    }
  }

  .title a {
    display: block;
    padding-left: 20px;
    height: 58px;
    line-height: 54px;
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  a.login {
    font-size: 18px;
    overflow: hidden;
    display: inline-block;
    padding: 10px 15px;
  }

  .hide-sidebar {
    position: absolute;
    right: 0;
    top: 0;
  }

  ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
    background: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 992px) {
  .main-panel {
    width: 100% !important;
  }

  .Sidebar {
    background-color: $background-color;
    z-index: 999 !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) !important;
  }
}