anthonymidili/Recipedia

$prefix: bs-;

.navbar {
  /* Background color are changed with a style attribute on the nav tag */
  margin-bottom: 20px;

  /* link colors */
  a {
    color: $yellow !important;
    span.info-text {
      color: #f6f6f6;
    }
    &:hover {
      color: $yellow-dark !important;
      span.info-text {
        color: #f27474;
      }
    }
  }

  .app-name {
    height: 64px;
    img {
      height: 64px;
    }
    margin-top: 15px;
    margin-bottom: 10px;
  }

  /* Push nav items right */
  .nav-items-right {
    margin-left: auto;
  }

  /* Enlarge the menu icon */
  .navbar-toggler {
    width: 100px;
    color: $yellow !important;
    border-color: rgba($yellow, 0.50) !important;
    border-width: 2px;
    &:hover {
      color: $yellow-dark !important;
    }

    .navbar-toggler-icon {
      width: 40px;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 237, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
      &:hover {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(231, 216, 21)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
      }
    }
  }

  .navbar-collapse {
    /* Add submenu background color when toggler icon not shown */
    @include media-breakpoint-down(lg) {
      background-color: lighten($topbar-background, 5%);
    }
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
  }

  /* submenu  */
  .dropdown-menu {
    background: $yellow !important;

    .dropdown-item {
      color: $topbar-background !important;
      &:hover {
        color: lighten($topbar-background, 20%) !important;
        background: $yellow !important;
      }
    }
  }
}