navbar.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. //
  2. // Admin Navbar
  3. // --------------------------------------------------
  4. .navbars-container {
  5. border-bottom: @navbar-border;
  6. .navbar {
  7. border-bottom: none;
  8. margin-bottom: 0px;
  9. .navbar-brand {
  10. background: url('../img/mred.png');
  11. background-size: cover;
  12. background-repeat: no-repeat;
  13. border-radius: 4px;
  14. width: @navbar-height - 16;
  15. height: @navbar-height - 16;
  16. margin-top: 8px;
  17. }
  18. .fa, .glyphicon {
  19. position: relative;
  20. bottom: (@font-size-base - @font-size-large) / 2;
  21. font-size: @font-size-large;
  22. }
  23. .user-nav {
  24. .navbar-text {
  25. color: @text-color;
  26. }
  27. img {
  28. border-radius: @border-radius-base;
  29. height: 26px;
  30. margin: -6px 0px;
  31. position: relative;
  32. bottom: 1px;
  33. }
  34. .logout {
  35. &:link, &:visited {
  36. background-color: @navbar-default-bg;
  37. border-radius: @border-radius-base;
  38. display: inline-block;
  39. margin: -8px 0px;
  40. margin-right: 8px;
  41. margin-left: @line-height-computed / 2;
  42. padding-top: 5px;
  43. width: 31px;
  44. height: 31px;
  45. color: @navbar-default-link-color;
  46. text-align: center;
  47. }
  48. &:hover {
  49. background-color: @navbar-default-link-color;
  50. color: @navbar-default-bg;
  51. }
  52. &:active {
  53. background-color: @body-bg;
  54. color: @navbar-default-bg;
  55. }
  56. }
  57. }
  58. }
  59. }
  60. /* Big displays */
  61. @media (min-width: @screen-sm-min) {
  62. .navbars-container {
  63. .navbar-brand {
  64. position: relative;
  65. left: @line-height-computed;
  66. margin-right: @line-height-computed * 1.5;
  67. }
  68. /* Bolden active links */
  69. .navbar {
  70. li.active {
  71. a {
  72. font-weight: bold;
  73. }
  74. }
  75. }
  76. /* Put fancy blue bar under active link */
  77. .navbar:last-child {
  78. li.active {
  79. a:link, a:active, a:visited, a:hover {
  80. border-bottom: 3px solid @brand-primary;
  81. margin-bottom: -3px;
  82. }
  83. }
  84. }
  85. .navbar-inverse {
  86. li {
  87. a:hover {
  88. border-bottom: 3px solid fadeOut(@navbar-inverse-link-active-color, 50%);
  89. margin-bottom: -3px;
  90. }
  91. }
  92. }
  93. }
  94. }