_navbar.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. .grw-navbar {
  2. top: -$grw-navbar-height !important;
  3. z-index: $grw-navbar-z-index !important;
  4. max-height: $grw-navbar-height + $grw-navbar-border-width;
  5. border-top: 0;
  6. border-right: 0;
  7. border-bottom: $grw-navbar-border-width solid;
  8. border-left: 0;
  9. .grw-app-title {
  10. @include variable-font-size(24px);
  11. }
  12. .grw-navbar-search {
  13. position: absolute;
  14. left: 50%;
  15. transform: translate(-50%, 0%);
  16. }
  17. .nav-link,
  18. .nav-item.confidential {
  19. display: flex;
  20. align-items: center;
  21. min-height: $grw-navbar-height;
  22. padding: 0 1rem;
  23. }
  24. .nav-link {
  25. &:hover {
  26. background: rgba(0, 0, 0, 0.1);
  27. }
  28. &:focus {
  29. background: rgba(0, 0, 0, 0);
  30. }
  31. }
  32. .nav-item.confidential {
  33. :not(i) {
  34. @include variable-font-size(14px);
  35. }
  36. @include media-breakpoint-only(md) {
  37. max-width: 100px;
  38. }
  39. max-width: 120px;
  40. max-height: $grw-navbar-height;
  41. overflow: hidden;
  42. background: rgba(0, 0, 0, 0.2);
  43. }
  44. .grw-personal-dropdown {
  45. .dropdown-menu {
  46. min-width: 15rem;
  47. .grw-email-sm {
  48. font-size: 0.75em;
  49. }
  50. .grw-icon-container svg {
  51. width: 18px;
  52. height: 18px;
  53. }
  54. }
  55. }
  56. .grw-notification-dropdown {
  57. .dropdown-menu {
  58. max-width: 70vw;
  59. }
  60. }
  61. }
  62. .grw-navbar-bottom {
  63. height: $grw-navbar-bottom-height;
  64. // apply transition
  65. transition-property: bottom;
  66. @include apply-navigation-transition();
  67. &.grw-navbar-bottom-drawer-opened {
  68. bottom: -$grw-navbar-bottom-height;
  69. }
  70. }
  71. .grw-custom-nav-tab,
  72. .grw-custom-nav-dropdown {
  73. svg {
  74. width: 17px;
  75. height: 17px;
  76. margin-right: 5px;
  77. vertical-align: text-bottom;
  78. }
  79. }
  80. .grw-custom-nav-tab {
  81. .nav-title {
  82. flex-wrap: nowrap;
  83. }
  84. .nav-link {
  85. padding: 1rem 1.5rem;
  86. }
  87. .grw-nav-slide-hr {
  88. border-top: 0rem;
  89. border-bottom: 3px solid;
  90. transition: 0.3s ease-in-out;
  91. }
  92. }
  93. .grw-notification-badge {
  94. position: absolute;
  95. top: 6px;
  96. right: 3.5px;
  97. }