navbar-rtl.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. //
  2. // RTL Navbars
  3. // --------------------------------------------------
  4. // Navbar heading
  5. //
  6. // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
  7. // styling of responsive aspects.
  8. .navbar-header {
  9. @media (min-width: @grid-float-breakpoint) {
  10. float: right;
  11. }
  12. }
  13. // Navbar collapse (body)
  14. //
  15. // Group your navbar content into this for easy collapsing and expanding across
  16. // various device sizes. By default, this content is collapsed when <768px, but
  17. // will expand past that for a horizontal display.
  18. //
  19. // To start (on mobile devices) the navbar links, forms, and buttons are stacked
  20. // vertically and include a `max-height` to overflow in case you have too much
  21. // content for the user's viewport.
  22. .navbar-collapse {
  23. padding-right: @navbar-padding-horizontal;
  24. padding-left: @navbar-padding-horizontal;
  25. }
  26. // Brand/project name
  27. .navbar-brand {
  28. float: right;
  29. @media (min-width: @grid-float-breakpoint) {
  30. .navbar > .container &,
  31. .navbar > .container-fluid & {
  32. margin-right: -@navbar-padding-horizontal;
  33. margin-left: auto;
  34. }
  35. }
  36. }
  37. // Navbar toggle
  38. //
  39. // Custom button for toggling the `.navbar-collapse`, powered by the collapse
  40. // JavaScript plugin.
  41. .navbar-toggle {
  42. float: left;
  43. margin-left: @navbar-padding-horizontal;
  44. margin-right: auto;
  45. }
  46. // Navbar nav links
  47. //
  48. // Builds on top of the `.nav` components with its own modifier class to make
  49. // the nav the full height of the horizontal nav (above 768px).
  50. .navbar-nav {
  51. @media (max-width: @grid-float-breakpoint-max) {
  52. // Dropdowns get custom display when collapsed
  53. .open .dropdown-menu {
  54. > li > a,
  55. .dropdown-header {
  56. padding: 5px 25px 5px 15px;
  57. }
  58. }
  59. }
  60. // Uncollapse the nav
  61. @media (min-width: @grid-float-breakpoint) {
  62. float: right;
  63. > li {
  64. float: right;
  65. }
  66. }
  67. }
  68. @media (min-width: @grid-float-breakpoint) {
  69. .navbar-left {
  70. &.flip {
  71. float: right !important;
  72. }
  73. }
  74. .navbar-right {
  75. &:last-child {
  76. margin-left: -@navbar-padding-horizontal;
  77. margin-right: auto;
  78. }
  79. &.flip {
  80. float: left !important;
  81. margin-left: -@navbar-padding-horizontal;
  82. margin-right: auto;
  83. }
  84. .dropdown-menu {
  85. left: 0;
  86. right: auto;
  87. }
  88. }
  89. }
  90. // Text in navbars
  91. //
  92. // Add a class to make any element properly align itself vertically within the navbars.
  93. .navbar-text {
  94. @media (min-width: @grid-float-breakpoint) {
  95. float: right;
  96. // Outdent the form if last child to line up with content down the page
  97. &.navbar-right:last-child {
  98. margin-left: 0;
  99. margin-right: auto;
  100. }
  101. }
  102. }