navbar.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. //
  2. // Navbars (Redux)
  3. // --------------------------------------------------
  4. // COMMON STYLES
  5. // -------------
  6. // Inner for background effects
  7. // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
  8. .navbar-inner {
  9. border: 0;
  10. .no-background;
  11. .reset-filter();
  12. .border-radius(0);
  13. .box-shadow(none);
  14. }
  15. // NAVIGATION
  16. // ----------
  17. // Links
  18. .navbar .nav > li > a {
  19. border-bottom: 2px solid transparent;
  20. color: @navbarLinkColor;
  21. font-size: 14px;
  22. line-height: 1.4;
  23. margin: 0 18px;
  24. max-width: 180px;
  25. min-width: 20px;
  26. overflow: hidden;
  27. padding: 13px 0 10px 0;
  28. text-overflow: ellipsis;
  29. vertical-align: top;
  30. white-space: nowrap;
  31. text-shadow: none;
  32. }
  33. .navbar .nav > li > a:hover,
  34. .navbar .nav > li > a:focus {
  35. border-color: @navbarBorder;
  36. color: @navbarLinkColorHover;
  37. }
  38. .navbar .nav > .active > a,
  39. .navbar .nav > .active > a:hover,
  40. .navbar .nav > .active > a:focus {
  41. border-color: @navbarBorder;
  42. color: @navbarLinkColorHover;
  43. font-weight: bold;
  44. text-decoration: none;
  45. .box-shadow(none);
  46. .transition(border-color 0.218s ease 0s);
  47. }
  48. .navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
  49. .box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.15));
  50. }
  51. // Navbar search
  52. // -------------------------
  53. .navbar-search {
  54. margin-top: 3px;
  55. .search-query {
  56. padding: 2px 14px;
  57. .border-radius(@inputBorderRadius); // redeclare because of specificity of the type attribute
  58. }
  59. }
  60. // Inverted navbar
  61. // -------------------------
  62. .navbar-inverse {
  63. .navbar-inner {
  64. .no-background;
  65. // background-color: @white;
  66. // border-color: @navbarInverseBorder;
  67. }
  68. .brand,
  69. .nav > li > a {
  70. text-shadow: none;
  71. }
  72. .brand {
  73. &:hover,
  74. &:focus {
  75. color: @navbarInverseLinkColorHover;
  76. }
  77. }
  78. // Navbar search
  79. .navbar-search {
  80. .search-query {
  81. .box-shadow(none);
  82. .placeholder(@grayLight);
  83. // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
  84. &:focus,
  85. &.focused {
  86. .box-shadow(0 1px 1px rgba(0,0,0,.1));
  87. }
  88. }
  89. }
  90. }
  91. // Navbar Buttons
  92. // -------------------------
  93. .navbar .nav > li > a.btn {
  94. border: 1px solid rgba(0, 0, 0, 0.1);
  95. font-size: 13px;
  96. line-height: 29px;
  97. margin-bottom: 10px;
  98. margin-top: 13px;
  99. padding: 0 8px;
  100. }