collapsible.less 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. //the .navbar.navbar-collapse
  2. @media only screen and (max-width: @grid-float-breakpoint-max) {
  3. .navbar.navbar-collapse {
  4. max-height: none;
  5. }
  6. .navbar {
  7. .navbar-header, .navbar-collapse {
  8. margin-left: 0 !important;
  9. margin-right: 0 !important
  10. }
  11. }
  12. //.navbar.navbar-collapse .nav-brand
  13. .navbar.navbar-collapse .navbar-header {
  14. float: none !important;
  15. min-height: @navbar-min-height;
  16. }
  17. //will become hidden and a .navbar-toggle button toggles it
  18. .navbar.navbar-collapse .navbar-buttons {
  19. min-height: 0;//the above @navbar-min-height will interfere with CSS3 transition
  20. padding-left: 0;
  21. padding-right: 0;
  22. border: 1px solid @ace-nav-border;
  23. border-width: 1px 0 0;
  24. width: 100%;
  25. &.in {
  26. overflow: visible !important;
  27. }
  28. > .ace-nav {
  29. display: block;
  30. float: none !important;
  31. text-align: center;
  32. background-color: transparent !important;
  33. border-width:0;
  34. letter-spacing: -3px;
  35. > li {
  36. display: inline-block;
  37. float:none !important;
  38. text-align: left;
  39. letter-spacing: normal;
  40. &:first-child {
  41. border-left: 1px solid @ace-nav-border;
  42. }
  43. &:last-child {
  44. border-right: 1px solid @ace-nav-border;
  45. }
  46. }
  47. }
  48. }
  49. }
  50. .container > .navbar-buttons, .container-fluid > .navbar-buttons {
  51. padding-right: 0 !important;
  52. }
  53. //make fixed navbar-collapse smaller so scrollbars show all content when needed
  54. @media only screen and (max-height: 400px) {
  55. .navbar-fixed-top .navbar-collapse {
  56. max-height: 280px;
  57. }
  58. }
  59. @media only screen and (max-height: 360px) {
  60. .navbar-fixed-top .navbar-collapse {
  61. max-height: 240px;
  62. }
  63. }
  64. @media only screen and (max-height: 320px) {
  65. .navbar-fixed-top .navbar-collapse {
  66. max-height: 200px;
  67. }
  68. }
  69. @media only screen and (max-height: 280px) {
  70. .navbar-fixed-top .navbar-collapse {
  71. max-height: 160px;
  72. }
  73. }
  74. @media only screen and (max-height: 240px) {
  75. .navbar-fixed-top .navbar-collapse {
  76. max-height: 120px;
  77. }
  78. }