_navbar.scss 1.7 KB

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