generator-aristos/app/templates/important/admin/admincss/modules/_admin-nav.css

create aristos cms fast with yeoman generator.

.admin-nav {
  padding: 10px;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  a {
    font-size: 0.95rem;
    font-variant: small-caps;
    display: flex;
    height: 22px;
    padding-left: 2px;
    align-items: center;
    color: $colorFour;
  }
  &__section-header {
    margin: 0;
    font-size: 0.8rem;
    font-variant: small-caps;
    text-align: left;
    color: $colorFive;
    border-top: 1px solid $colorFour;
    border-bottom: 1px solid $colorFour;
  }

  &__nav-item {
    width: 100%;
    list-style: none;
    margin: 2px;
    padding: 5px;
    position: relative;
    color: $colorFour;
    font-weight: 600;
    transition: background-color 0.4s ease-out;

    &:hover {
      background: $colorFive;
      transition: 0.4s;
      transition: background-color 0.4s ease-out;
    }

    &--success {
      &:hover {
        background: $hoverSuccess;
        transition: 0.4s;
        width: 100%;
        transition: background-color 0.4s ease-out;
      }
    }

    &--danger {
      &:hover {
        background: $hoverDanger;
        transition: 0.4s;
        width: 100%;
        transition: background-color 0.4s linear;
      }
    }
  }
  .side-dropdown {
    display: flex;
    transition: all 0.4s ease-out;
  }
  .side-hovered-item {
    visibility: hidden;
    position: absolute;
    right: -150px;
    background-color: $colorOne;
    padding: 5px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    border-right: 2px solid $colorFour;
    border-top: 2px solid $colorFour;
    border-bottom: 2px solid $colorFour;
    opacity: 0;
    transition: opacity 0.4s ease-out;
  }
 
  .side-dropdown:hover .side-hovered-item {
    visibility: visible;
    opacity: 1;
  }

  .is-current-link{
    background: pink
  }
}