Files
2026-03-14 09:49:00 +00:00

135 lines
2.6 KiB
Plaintext

//
// RTL Navbars
// --------------------------------------------------
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
@media (min-width: @grid-float-breakpoint) {
float: right;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
}
// Brand/project name
.navbar-brand {
float: right;
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
margin-right: -@navbar-padding-horizontal;
margin-left: auto;
}
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: auto;
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a,
.dropdown-header {
padding: 5px 25px 5px 15px;
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: right;
> li {
float: right;
}
}
}
@media (min-width: @grid-float-breakpoint) {
.navbar-left {
&.flip {
float: right !important;
}
}
.navbar-right {
&:last-child {
margin-left: -@navbar-padding-horizontal;
margin-right: auto;
}
&.flip {
float: left !important;
margin-left: -@navbar-padding-horizontal;
margin-right: auto;
}
.dropdown-menu {
left: 0;
right: auto;
}
}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
@media (min-width: @grid-float-breakpoint) {
float: right;
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-left: 0;
margin-right: auto;
}
}
}