_navbar.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .grw-navbar {
  2. max-height: $grw-navbar-height + $grw-navbar-border-width;
  3. border-top: 0;
  4. border-right: 0;
  5. border-bottom: $grw-navbar-border-width solid;
  6. border-left: 0;
  7. .grw-app-title {
  8. @include variable-font-size(24px);
  9. }
  10. .grw-navbar-toggler {
  11. padding: 0.5rem;
  12. font-size: 1.5em;
  13. }
  14. .grw-navbar-search {
  15. position: absolute;
  16. left: 50%;
  17. transform: translate(-50%, 0%);
  18. }
  19. .nav-link,
  20. .nav-item.confidential {
  21. display: flex;
  22. align-items: center;
  23. min-height: $grw-navbar-height;
  24. padding: 0 1rem;
  25. }
  26. .nav-link {
  27. &:hover {
  28. background: rgba(0, 0, 0, 0.1);
  29. }
  30. &:focus {
  31. background: rgba(0, 0, 0, 0);
  32. }
  33. }
  34. .nav-item.confidential {
  35. :not(i) {
  36. @include variable-font-size(14px);
  37. }
  38. @include media-breakpoint-only(md) {
  39. max-width: 100px;
  40. }
  41. max-width: 120px;
  42. max-height: $grw-navbar-height;
  43. overflow: hidden;
  44. background: rgba(0, 0, 0, 0.2);
  45. }
  46. .grw-personal-dropdown {
  47. .grw-email-sm {
  48. font-size: 0.75em;
  49. }
  50. }
  51. }