navbar.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. //
  2. // Misago Navbar
  3. // --------------------------------------------------
  4. // Remove bottom margin from navbar
  5. .navbar {
  6. margin-bottom: 0px;
  7. }
  8. // Desktop navbar
  9. .navbar .navbar-full {
  10. // Brand
  11. .navbar-brand {
  12. &>* {
  13. display: inline-block;
  14. }
  15. img {
  16. height: 16px;
  17. }
  18. }
  19. // Force search widths
  20. .navbar-search {
  21. width: 400px;
  22. .form-control {
  23. width: 100%;
  24. }
  25. }
  26. // Pull Guest and User menus to right
  27. .nav-guest, .nav-user {
  28. float: right;
  29. .navbar-notification {
  30. padding-top: (@navbar-height - 28px) / 2;
  31. padding-bottom: (@navbar-height - 28px) / 2;
  32. position: relative;
  33. .material-icon {
  34. width: 28px;
  35. height: 28px;
  36. font-size: 28px;
  37. line-height: 28px;
  38. }
  39. .badge {
  40. background-color: @brand-danger;
  41. position: absolute;
  42. top: 6px;
  43. right: 6px;
  44. font-size: 9px;
  45. }
  46. }
  47. .navbar-btn {
  48. margin-left: @navbar-padding-horizontal;
  49. }
  50. }
  51. // User avatar size
  52. .nav-user .dropdown-toggle {
  53. padding: (@navbar-height - @navbar-avatar-size) / 2;
  54. img {
  55. width: @navbar-avatar-size;
  56. height: @navbar-avatar-size;
  57. }
  58. }
  59. }
  60. // Compact (mobile) navbar
  61. .navbar ul.navbar-compact-nav {
  62. border-collapse:collapse;
  63. display: table;
  64. margin: 0px;
  65. table-layout: fixed;
  66. width: 100%;
  67. &>li {
  68. display: table-cell;
  69. width: 100%;
  70. }
  71. &>li>a, &>li>button {
  72. background: none;
  73. border: none;
  74. display: block;
  75. padding-top: 13px;
  76. padding-bottom: 13px;
  77. width: 100%;
  78. color: @navbar-default-link-color;
  79. text-align: center;
  80. &:hover, &:focus {
  81. color: @navbar-default-link-hover-color;
  82. background-color: @navbar-default-link-hover-bg;
  83. }
  84. &>img {
  85. width: @navbar-compact-item-size;
  86. height: @navbar-compact-item-size;
  87. }
  88. }
  89. &>li>button {
  90. display: inline-block;
  91. }
  92. &>li>a>.material-icon {
  93. font-size: @navbar-compact-item-size;
  94. line-height: @navbar-compact-item-size;
  95. }
  96. }
  97. // Make navbar's height match compact nav
  98. @media (max-width: @grid-float-breakpoint) {
  99. .navbar.navbar-misago {
  100. min-height: auto;
  101. }
  102. }
  103. // Hide compact navbar above breakpoint
  104. .navbar-misago .navbar-desktop-nav {
  105. display: none;
  106. }
  107. @media (min-width: @grid-float-breakpoint) {
  108. .navbar-misago ul.navbar-compact-nav {
  109. display: none;
  110. }
  111. .navbar-misago .navbar-desktop-nav {
  112. display: block;
  113. }
  114. }