anthonymidili/Bullhorn

View on GitHub
app/assets/stylesheets/top_bar.scss

Summary

Maintainability
Test Coverage
nav.navbar {
  background-color: var(--topbar-background);
  margin-bottom: 20px;
  
  span.inline {
    display: inline-block;
    vertical-align: middle;
    h1 {
      margin-bottom: 0;
    }
  }

  .topbar-logo {
    h1 {
      color: var(--topbar-logo);
      &::before {
        font-weight: bold !important;
      }
    }
    img, svg {
      margin-left: 4px;
      height: 50px;
      width: 50px;
      fill: var(--topbar-logo);
    }
    &:hover {
      h1 {
        color: var(--topbar-logo-hover);
      }
      img, svg {
        fill: var(--topbar-logo-hover);
      }
    }
  }

  .navbar-toggler {
    color: var(--toggler-color);
    border: 2px solid var(--toggler-color);
    .toggler-icon {
      color: var(--toggler-icon-color);
    }
  }
  
  .nav-items-right {
    margin-left: auto;
    a, button {
      border-radius: 8px;
      color: var(--topbar-text) !important;
      &:hover {
        background-color: var(--topbar-background-hover) !important;
        color: var(--topbar-text-hover) !important;
        &::after {
          border-color: var(--topbar-text-hover) transparent transparent !important;
        }
      }
      &::after {
        color: var(--topbar-text-hover) !important;
        border-color: var(--topbar-text) transparent transparent !important;
      }
    }

    .btn-group {
      width: 100%;
      display: block !important;
    }

    .dropdown.with-button.nav-link {
      padding: var(--bs-nav-link-padding-y);
      button {
        text-align: left;
        border: unset;
        background: unset;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
      }
      &:hover {
        border-radius: 8px;
        background-color: var(--topbar-background-hover) !important;
        color: var(--topbar-text-hover) !important;
        &::after {
          border-color: var(--topbar-text-hover) transparent transparent !important;
        }
      }
    }
  }

  .nav-link {
    @include media-breakpoint-down(lg) {
      padding-left: 1rem !important;
    }
  }
}

.sub_top_bar {
  background-color: var(--subbar-background);
  margin-top: -20px;
  margin-bottom: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-top: 1px solid var(--subbar-border);
  border-bottom: 1px solid var(--subbar-border);
  a {
    margin: 0 10px 0 10px;
    &.dropdown-item { 
      margin: unset;
     }
    color: var(--subbar-text);
    &:hover {
      color: var(--subbar-text-hover);
    }
  }
}

.dropdown-menu {
  z-index: 1030;
}