You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1957 lines
46 KiB
1957 lines
46 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
*
|
||
|
* # Navbar component
|
||
|
*
|
||
|
* Overrides for navbar bootstrap component
|
||
|
*
|
||
|
* Version: 1.3
|
||
|
* Latest update: Aug 10, 2016
|
||
|
*
|
||
|
* ---------------------------------------------------------------------------- */
|
||
|
|
||
|
|
||
|
// Basic styles
|
||
|
// -------------------------
|
||
|
|
||
|
// Base
|
||
|
.navbar {
|
||
|
margin-bottom: 0;
|
||
|
border-width: 1px 0;
|
||
|
padding-left: 0;
|
||
|
padding-right: 0;
|
||
|
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
padding-left: @navbar-padding-horizontal;
|
||
|
padding-right: @navbar-padding-horizontal;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Navbar as a stand alone component
|
||
|
.navbar-component {
|
||
|
border-radius: @border-radius-base;
|
||
|
margin-bottom: @line-height-computed;
|
||
|
border-width: 1px;
|
||
|
|
||
|
// Inside page header
|
||
|
.page-header & {
|
||
|
margin-left: @grid-gutter-width;
|
||
|
margin-right: @grid-gutter-width;
|
||
|
}
|
||
|
|
||
|
// Default navbar
|
||
|
&.navbar-default {
|
||
|
border-color: @panel-default-border;
|
||
|
background-color: @panel-bg;
|
||
|
}
|
||
|
|
||
|
// First child border radius
|
||
|
> .navbar:first-child,
|
||
|
> .navbar-collapse:first-child > .navbar:first-child {
|
||
|
.border-top-radius(@border-radius-base);
|
||
|
}
|
||
|
|
||
|
// Last child border radius
|
||
|
> .navbar:last-child,
|
||
|
> .navbar-collapse:last-child > .navbar:last-child {
|
||
|
.border-bottom-radius(@border-radius-base);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Navbar with affix component
|
||
|
.affix {
|
||
|
&.navbar,
|
||
|
&.navbar-collapse {
|
||
|
z-index: @zindex-navbar-fixed;
|
||
|
top: 0;
|
||
|
width: 100%;
|
||
|
|
||
|
// Make it static on mobile
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
position: static;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar header
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-header {
|
||
|
min-width: @sidebar-base-width;
|
||
|
|
||
|
// Inside nav collapse
|
||
|
.navbar-collapse > & {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
|
||
|
// Mobile nav
|
||
|
.navbar-nav {
|
||
|
float: right;
|
||
|
margin-right: (@navbar-padding-horizontal - @content-padding-base);
|
||
|
|
||
|
> li {
|
||
|
float: left;
|
||
|
|
||
|
> a {
|
||
|
padding-left: @content-padding-base;
|
||
|
padding-right: @content-padding-base;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Mobile view setup
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
.navbar-nav > li + li {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
.navbar-collapse > & {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Desktop view setup
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
margin-left: -(@navbar-padding-horizontal);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar collapse (body)
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-collapse {
|
||
|
text-align: center; // Make elements centered on mobiles
|
||
|
padding-left: 0;
|
||
|
padding-right: 0;
|
||
|
|
||
|
// Remove animation since it's buggy on mobile
|
||
|
&.collapsing {
|
||
|
.transition-duration(0.00000001s);
|
||
|
}
|
||
|
|
||
|
// Remove top border in second navbar
|
||
|
.navbar + & {
|
||
|
border-top: 0;
|
||
|
}
|
||
|
|
||
|
// Desktop view setup
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
text-align: left;
|
||
|
margin-left: -(@navbar-padding-horizontal);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Highlighted navbar header
|
||
|
// -------------------------
|
||
|
|
||
|
.header-highlight {
|
||
|
|
||
|
// Header
|
||
|
.navbar-header {
|
||
|
border-top: 1px solid transparent;
|
||
|
border-bottom: 1px solid transparent;
|
||
|
margin-top: -1px;
|
||
|
margin-bottom: -1px;
|
||
|
|
||
|
// Darken header
|
||
|
&:not([class*=bg-]) {
|
||
|
background-color: @sidebar-dark-bg;
|
||
|
@header-box-shadow: 0 0 0 1000px fade(#000, 10%) inset, 0 -1px 0 fade(#fff, 10%) inset;
|
||
|
.box-shadow(@header-box-shadow);
|
||
|
}
|
||
|
|
||
|
// Make links in navbar header as in inverse navbar
|
||
|
> .navbar-nav {
|
||
|
> li > a {
|
||
|
color: @navbar-inverse-link-color;
|
||
|
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
color: @navbar-inverse-link-hover-color;
|
||
|
background-color: @navbar-inverse-link-hover-bg;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Desktop view setup
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
|
||
|
// In mini sidebar
|
||
|
.sidebar-xs & {
|
||
|
min-width: 0;
|
||
|
width: @sidebar-mini-width;
|
||
|
padding-left: 0;
|
||
|
|
||
|
// Change logo
|
||
|
.navbar-brand {
|
||
|
padding-left: 0;
|
||
|
padding-right: 0;
|
||
|
background: url(../images/logo_icon_light.png) no-repeat center center;
|
||
|
background-size: auto 16px;
|
||
|
float: none;
|
||
|
display: block;
|
||
|
|
||
|
> img {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Hide if main sidebar is hidden
|
||
|
.sidebar-main-hidden &,
|
||
|
.sidebar-all-hidden & {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// If fixed sidebar is mini, when expanded
|
||
|
.sidebar-fixed-expanded & {
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
.navbar-collapse {
|
||
|
margin-left: @sidebar-mini-width - 20;
|
||
|
}
|
||
|
|
||
|
// Make header fixed as sidebar
|
||
|
.navbar-header {
|
||
|
position: fixed;
|
||
|
z-index: 99;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
// Fixed navbar setup
|
||
|
// -------------------------
|
||
|
|
||
|
// Make navbars static on mobile
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
.navbar-fixed-top {
|
||
|
position: static;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Fixed navbar vertical spacing
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
|
||
|
//
|
||
|
// Single navbar
|
||
|
//
|
||
|
|
||
|
// Top
|
||
|
.navbar-top-lg {
|
||
|
padding-top: @navbar-height-large + 2;
|
||
|
|
||
|
// Sticky fixed sidebar
|
||
|
.sidebar-fixed.affix {
|
||
|
top: @navbar-height-large + @line-height-computed + 2;
|
||
|
}
|
||
|
}
|
||
|
.navbar-top {
|
||
|
padding-top: @navbar-height + 2;
|
||
|
|
||
|
// Sticky fixed sidebar
|
||
|
.sidebar-fixed.affix {
|
||
|
top: @navbar-height + @line-height-computed + 2;
|
||
|
}
|
||
|
}
|
||
|
.navbar-top-sm {
|
||
|
padding-top: @navbar-height-small + 2;
|
||
|
|
||
|
// Sticky fixed sidebar
|
||
|
.sidebar-fixed.affix {
|
||
|
top: @navbar-height-small + @line-height-computed + 2;
|
||
|
}
|
||
|
}
|
||
|
.navbar-top-xs {
|
||
|
padding-top: @navbar-height-mini + 2;
|
||
|
|
||
|
// Sticky fixed sidebar
|
||
|
.sidebar-fixed.affix {
|
||
|
top: @navbar-height-mini + @line-height-computed + 2;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
//
|
||
|
// Multiple navbars
|
||
|
//
|
||
|
|
||
|
// Top navbars. Double navbar height
|
||
|
.navbar-top-lg-lg {
|
||
|
padding-top: @navbar-height-large + @navbar-height-large + 4;
|
||
|
}
|
||
|
.navbar-top-lg-md,
|
||
|
.navbar-top-md-lg {
|
||
|
padding-top: @navbar-height + @navbar-height-large + 4;
|
||
|
}
|
||
|
.navbar-top-lg-sm,
|
||
|
.navbar-top-md-md,
|
||
|
.navbar-top-sm-lg {
|
||
|
padding-top: @navbar-height + @navbar-height + 4;
|
||
|
}
|
||
|
.navbar-top-lg-xs,
|
||
|
.navbar-top-md-sm,
|
||
|
.navbar-top-sm-md,
|
||
|
.navbar-top-xs-lg {
|
||
|
padding-top: @navbar-height + @navbar-height-small + 4;
|
||
|
}
|
||
|
.navbar-top-md-xs,
|
||
|
.navbar-top-sm-sm,
|
||
|
.navbar-top-xs-md {
|
||
|
padding-top: @navbar-height + @navbar-height-mini + 4;
|
||
|
}
|
||
|
.navbar-top-sm-xs,
|
||
|
.navbar-top-xs-sm {
|
||
|
padding-top: @navbar-height-small + @navbar-height-mini + 4;
|
||
|
}
|
||
|
.navbar-top-xs-xs {
|
||
|
padding-top: @navbar-height-mini + @navbar-height-mini + 4;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Bottom
|
||
|
.navbar-bottom-lg {
|
||
|
padding-bottom: @navbar-height-large + 2;
|
||
|
}
|
||
|
.navbar-bottom {
|
||
|
padding-bottom: @navbar-height + 2;
|
||
|
}
|
||
|
.navbar-bottom-sm {
|
||
|
padding-bottom: @navbar-height-small + 2;
|
||
|
}
|
||
|
.navbar-bottom-xs {
|
||
|
padding-bottom: @navbar-height-mini + 2;
|
||
|
}
|
||
|
|
||
|
// Bottom navbars. Double navbar height vertical borders
|
||
|
.navbar-bottom-lg-lg {
|
||
|
padding-bottom: @navbar-height-large + @navbar-height-large + 4;
|
||
|
}
|
||
|
.navbar-bottom-lg-md,
|
||
|
.navbar-bottom-md-lg {
|
||
|
padding-bottom: @navbar-height + @navbar-height-large + 4;
|
||
|
}
|
||
|
.navbar-bottom-lg-sm,
|
||
|
.navbar-bottom-md-md,
|
||
|
.navbar-bottom-sm-lg {
|
||
|
padding-bottom: @navbar-height + @navbar-height + 4;
|
||
|
}
|
||
|
.navbar-bottom-lg-xs,
|
||
|
.navbar-bottom-md-sm,
|
||
|
.navbar-bottom-sm-md,
|
||
|
.navbar-bottom-xs-lg {
|
||
|
padding-bottom: @navbar-height + @navbar-height-small + 4;
|
||
|
}
|
||
|
.navbar-bottom-md-xs,
|
||
|
.navbar-bottom-sm-sm,
|
||
|
.navbar-bottom-xs-md {
|
||
|
padding-bottom: @navbar-height + @navbar-height-mini + 4;
|
||
|
}
|
||
|
.navbar-bottom-sm-xs,
|
||
|
.navbar-bottom-xs-sm {
|
||
|
padding-bottom: @navbar-height-small + @navbar-height-mini + 4;
|
||
|
}
|
||
|
.navbar-bottom-xs-xs {
|
||
|
padding-bottom: @navbar-height-mini + @navbar-height-mini + 4;
|
||
|
}
|
||
|
|
||
|
|
||
|
// Brand/project name
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-brand {
|
||
|
|
||
|
// Logo, change according to your logo size
|
||
|
> img {
|
||
|
margin-top: 2px;
|
||
|
height: 16px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar nav links
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-nav {
|
||
|
margin: 0;
|
||
|
text-align: left;
|
||
|
|
||
|
// Links
|
||
|
> li > a {
|
||
|
padding-top: @navbar-padding-vertical;
|
||
|
padding-bottom: @navbar-padding-vertical;
|
||
|
|
||
|
|
||
|
//
|
||
|
// Labels and badges
|
||
|
//
|
||
|
|
||
|
// Right absolute
|
||
|
> .label,
|
||
|
> .badge {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
}
|
||
|
|
||
|
// Status mark
|
||
|
> .status-mark {
|
||
|
position: absolute;
|
||
|
top: 8px;
|
||
|
right: 8px;
|
||
|
}
|
||
|
// Left alignment
|
||
|
> .status-mark-left {
|
||
|
right: auto;
|
||
|
left: 8px;
|
||
|
}
|
||
|
|
||
|
// Left absolute
|
||
|
> .label-left,
|
||
|
> .badge-left {
|
||
|
right: auto;
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
// Inline
|
||
|
> .label-inline,
|
||
|
> .badge-inline,
|
||
|
> .status-mark-inline {
|
||
|
position: static;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Language switch images
|
||
|
.language-switch a > img {
|
||
|
position: relative;
|
||
|
top: -1px;
|
||
|
}
|
||
|
|
||
|
// User dropdown
|
||
|
> .dropdown-user {
|
||
|
> a {
|
||
|
|
||
|
// Set vertical padding
|
||
|
&,
|
||
|
> span {
|
||
|
padding-top: (@navbar-padding-vertical / 2);
|
||
|
padding-bottom: (@navbar-padding-vertical / 2);
|
||
|
}
|
||
|
|
||
|
// User name
|
||
|
> span {
|
||
|
display: inline-block;
|
||
|
padding-left: @element-horizontal-spacing;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// User image
|
||
|
img {
|
||
|
max-height: (@navbar-padding-vertical * 2) + 4;
|
||
|
margin-top: -((@navbar-padding-vertical / 2) - 4);
|
||
|
border-radius: 50%;
|
||
|
|
||
|
// Change image size in large navbar
|
||
|
.navbar-lg & {
|
||
|
max-height: (@navbar-padding-vertical-large * 2) + 4;
|
||
|
margin-top: -((@navbar-padding-vertical-large / 2) - 4);
|
||
|
}
|
||
|
|
||
|
// Change image size in small navbar
|
||
|
.navbar-sm & {
|
||
|
max-height: (@navbar-padding-vertical-small * 2) + 4;
|
||
|
margin-top: -((@navbar-padding-vertical-small / 2) - 4);
|
||
|
}
|
||
|
|
||
|
// Change image size in mini navbar
|
||
|
.navbar-xs & {
|
||
|
max-height: (@navbar-padding-vertical-mini * 2) + 4;
|
||
|
margin-top: -((@navbar-padding-vertical-mini / 2) - 4);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Make dropdown menu static on mobile
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
border-bottom: 1px solid fade(#fff, 10%);
|
||
|
|
||
|
// Dropdowns get custom display when collapsed
|
||
|
.open .dropdown-menu {
|
||
|
|
||
|
// Make paddings identical
|
||
|
> li > a,
|
||
|
.dropdown-header {
|
||
|
padding: (@padding-base-vertical + 1) @navbar-padding-horizontal;
|
||
|
}
|
||
|
|
||
|
// Dropdown submenu
|
||
|
> .dropdown-submenu {
|
||
|
|
||
|
// Add some space for children levels
|
||
|
> ul > li {
|
||
|
> a {
|
||
|
padding-left: (@navbar-padding-horizontal * 2);
|
||
|
}
|
||
|
|
||
|
> ul > li {
|
||
|
> a {
|
||
|
padding-left: (@navbar-padding-horizontal * 3);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Add 1px top separation
|
||
|
> li + li {
|
||
|
margin-top: 1px;
|
||
|
}
|
||
|
|
||
|
// Stick labels, badges and caret to the right
|
||
|
> li > a {
|
||
|
padding-left: @navbar-padding-horizontal;
|
||
|
padding-right: @navbar-padding-horizontal;
|
||
|
|
||
|
// Caret
|
||
|
.caret {
|
||
|
float: right;
|
||
|
margin-top: ((@line-height-computed - @icon-font-size) / 2);
|
||
|
margin-left: 5px;
|
||
|
}
|
||
|
|
||
|
// Labels and badges
|
||
|
.label,
|
||
|
.badge {
|
||
|
position: static;
|
||
|
float: right;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Caret in user dropdown
|
||
|
> .dropdown-user .caret {
|
||
|
margin-top: (@icon-font-size / 2);
|
||
|
}
|
||
|
|
||
|
// Add border if inside default navbar
|
||
|
.navbar-default & {
|
||
|
border-bottom: 1px solid @navbar-default-border;
|
||
|
}
|
||
|
|
||
|
// Remove border from the last nav
|
||
|
&:last-child {
|
||
|
border-bottom: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Uncollapse the nav
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
margin-left: @navbar-padding-horizontal;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar form
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-form {
|
||
|
padding: @navbar-padding-vertical @navbar-padding-horizontal;
|
||
|
margin-left: 0;
|
||
|
margin-right: 0;
|
||
|
border-top: 0;
|
||
|
.box-shadow(none);
|
||
|
|
||
|
// Remove border from the last child
|
||
|
&:last-child {
|
||
|
border-bottom: 0;
|
||
|
}
|
||
|
|
||
|
// Form group row
|
||
|
.form-group {
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
margin-bottom: (@line-height-computed / 2);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
//
|
||
|
// Elements sizing
|
||
|
//
|
||
|
|
||
|
// Small elements sizing
|
||
|
.input-sm,
|
||
|
.input-group-sm,
|
||
|
.btn-sm,
|
||
|
.select-sm,
|
||
|
.uploader-sm {
|
||
|
margin-top: (@input-height-base - @input-height-small) / 2;
|
||
|
margin-bottom: (@input-height-base - @input-height-small) / 2;
|
||
|
}
|
||
|
.input-sm + .form-control-feedback {
|
||
|
top: (@input-height-base - @input-height-small) / 2;
|
||
|
}
|
||
|
|
||
|
// Mini elements sizing
|
||
|
.input-xs,
|
||
|
.input-group-xs,
|
||
|
.btn-xs,
|
||
|
.select-xs,
|
||
|
.uploader-xs {
|
||
|
margin-top: (@input-height-base - @input-height-mini) / 2;
|
||
|
margin-bottom: (@input-height-base - @input-height-mini) / 2;
|
||
|
}
|
||
|
.input-xs + .form-control-feedback {
|
||
|
top: (@input-height-base - @input-height-mini) / 2;
|
||
|
}
|
||
|
|
||
|
// Navbar sizing vertical padding correction
|
||
|
.navbar-lg & {
|
||
|
.navbar-large-vertical-align(@input-height-base);
|
||
|
}
|
||
|
.navbar-sm & {
|
||
|
.navbar-small-vertical-align(@input-height-base);
|
||
|
}
|
||
|
.navbar-xs & {
|
||
|
.navbar-mini-vertical-align(@input-height-base);
|
||
|
}
|
||
|
|
||
|
|
||
|
// Checkboxes, radios, toggles
|
||
|
.checkbox-switchery[class*=switchery-] {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
.checkbox-inline.switchery-double {
|
||
|
padding-left: 0;
|
||
|
}
|
||
|
|
||
|
|
||
|
// Desktop view setup
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
padding: 0;
|
||
|
|
||
|
// Set min width
|
||
|
.form-control {
|
||
|
min-width: 200px;
|
||
|
}
|
||
|
|
||
|
// Single file uploader
|
||
|
.uploader {
|
||
|
width: 200px;
|
||
|
}
|
||
|
|
||
|
// Add left margin to form rows
|
||
|
.form-group {
|
||
|
margin-left: @navbar-padding-horizontal;
|
||
|
}
|
||
|
|
||
|
// Inline controls
|
||
|
.checkbox-inline,
|
||
|
.radio-inline {
|
||
|
margin-top: ((@input-height-base - @line-height-computed) / 2); // ((base input height - line height in px) / 2)
|
||
|
margin-bottom: ((@input-height-base - @line-height-computed) / 2);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Remove margins
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
margin: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Dropdown menus
|
||
|
// -------------------------
|
||
|
|
||
|
// Menu position and menu carets
|
||
|
.navbar-nav > li > .dropdown-menu {
|
||
|
margin-top: 1px;
|
||
|
border-top-width: 0;
|
||
|
|
||
|
// Media list
|
||
|
.media-list {
|
||
|
max-height: @navbar-collapse-max-height;
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Menu position and menu caret support for dropups via extra dropup class
|
||
|
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||
|
margin-top: 0;
|
||
|
margin-bottom: 1px;
|
||
|
border-top-width: 1px;
|
||
|
border-bottom-width: 0;
|
||
|
.border-top-radius(@border-radius-base);
|
||
|
}
|
||
|
|
||
|
|
||
|
// Buttons in navbars
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-btn {
|
||
|
margin-left: @navbar-padding-horizontal;
|
||
|
|
||
|
// Remove left spacing in multiple buttons
|
||
|
+ & {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
|
||
|
// Sizing
|
||
|
&,
|
||
|
.navbar-sm &.btn-sm,
|
||
|
.navbar-xs &.btn-xs {
|
||
|
.navbar-vertical-align(@input-height-base);
|
||
|
}
|
||
|
.navbar-lg & {
|
||
|
.navbar-large-vertical-align(@input-height-base);
|
||
|
}
|
||
|
.navbar-sm &,
|
||
|
.navbar-xs &.btn-sm {
|
||
|
.navbar-small-vertical-align(@input-height-base);
|
||
|
}
|
||
|
.navbar-xs & {
|
||
|
.navbar-mini-vertical-align(@input-height-base);
|
||
|
}
|
||
|
|
||
|
&.btn-sm,
|
||
|
.navbar-sm &.btn-xs {
|
||
|
.navbar-vertical-align(@input-height-small);
|
||
|
}
|
||
|
&.btn-xs,
|
||
|
.navbar-lg &.btn-sm {
|
||
|
.navbar-vertical-align(@input-height-mini);
|
||
|
}
|
||
|
.navbar-lg &.btn-xs {
|
||
|
.navbar-large-vertical-align(@input-height-mini);
|
||
|
}
|
||
|
|
||
|
// Add margin to buttons on desktop
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
&,
|
||
|
&.btn-sm,
|
||
|
&.btn-xs {
|
||
|
margin: @navbar-padding-vertical @navbar-padding-horizontal;
|
||
|
}
|
||
|
|
||
|
& + & {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Text in navbars
|
||
|
// -------------------------
|
||
|
|
||
|
.navbar-text {
|
||
|
margin: 0;
|
||
|
padding: @navbar-padding-vertical @navbar-padding-horizontal;
|
||
|
|
||
|
// Last text doesn't have border
|
||
|
&:last-child {
|
||
|
border-bottom: 0;
|
||
|
}
|
||
|
|
||
|
|
||
|
//
|
||
|
// Additional sizing
|
||
|
//
|
||
|
|
||
|
// Large
|
||
|
.navbar-lg & {
|
||
|
padding-top: ((@navbar-height-large - @line-height-computed) / 2);
|
||
|
padding-bottom: ((@navbar-height-large - @line-height-computed) / 2);
|
||
|
}
|
||
|
|
||
|
// Small
|
||
|
.navbar-sm & {
|
||
|
padding-top: ((@navbar-height-small - @line-height-computed) / 2);
|
||
|
padding-bottom: ((@navbar-height-small - @line-height-computed) / 2);
|
||
|
}
|
||
|
|
||
|
// Mini
|
||
|
.navbar-xs & {
|
||
|
padding-top: ((@navbar-height-mini - @line-height-computed) / 2);
|
||
|
padding-bottom: ((@navbar-height-mini - @line-height-computed) / 2);
|
||
|
}
|
||
|
|
||
|
// Setup desktop view
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
padding-right: 0;
|
||
|
|
||
|
+ .navbar-nav {
|
||
|
margin-left: @content-padding-base;
|
||
|
}
|
||
|
|
||
|
.navbar-header + &:first-child {
|
||
|
padding-left: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Component alignment
|
||
|
// -------------------------
|
||
|
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
.navbar-right {
|
||
|
margin-right: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Alternate navbars
|
||
|
// -------------------------
|
||
|
|
||
|
// Default navbar
|
||
|
.navbar-default {
|
||
|
border-top-color: transparent;
|
||
|
|
||
|
// Add class for darken default navbar
|
||
|
&.navbar-default-secondary {
|
||
|
background-color: darken(@navbar-default-bg, 1%);
|
||
|
}
|
||
|
|
||
|
// After page header content
|
||
|
.page-header-content + & {
|
||
|
border-top-color: @navbar-default-border;
|
||
|
}
|
||
|
|
||
|
// Bottom position
|
||
|
&.navbar-fixed-bottom {
|
||
|
border-top-color: @navbar-default-border;
|
||
|
border-bottom-color: @navbar-default-bg;
|
||
|
}
|
||
|
|
||
|
// Add top border to the first navbar
|
||
|
.navbar-fixed-bottom > &:first-child {
|
||
|
border-top-color: @navbar-default-border;
|
||
|
}
|
||
|
|
||
|
// Dropdown menu items
|
||
|
.navbar-nav {
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// Dropdowns get custom display when collapsed
|
||
|
.open .dropdown-menu {
|
||
|
color: @text-color;
|
||
|
background-color: transparent;
|
||
|
border-bottom: 1px solid @navbar-default-border;
|
||
|
}
|
||
|
|
||
|
// Borders in dropdowns first level only
|
||
|
.open > .dropdown-menu {
|
||
|
border-top: 1px solid @navbar-default-border;
|
||
|
}
|
||
|
|
||
|
// Remove bottom borders from last childs
|
||
|
.open:last-child .dropdown-menu {
|
||
|
border-bottom: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Links in navbars
|
||
|
.navbar-link {
|
||
|
color: @link-color;
|
||
|
|
||
|
// Link hover state
|
||
|
&:hover {
|
||
|
color: @link-hover-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// Active submenu link color in solid menu
|
||
|
.dropdown-menu[class*=bg-] {
|
||
|
|
||
|
// Make labels/badges colored
|
||
|
.label,
|
||
|
.badge {
|
||
|
color: #fff;
|
||
|
background-color: @brand-primary;
|
||
|
border-color: transparent;
|
||
|
}
|
||
|
|
||
|
// Correct divider bg color
|
||
|
> .divider {
|
||
|
background-color: @dropdown-divider-bg;
|
||
|
}
|
||
|
|
||
|
// Submenu links
|
||
|
.dropdown-submenu {
|
||
|
&:hover > a,
|
||
|
&:focus > a {
|
||
|
background-color: @dropdown-link-hover-bg;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Remove border from table
|
||
|
.dropdown-menu {
|
||
|
.table-responsive {
|
||
|
border-width: 0;
|
||
|
}
|
||
|
|
||
|
.dropdown-content-heading + .table-responsive {
|
||
|
border-top-width: 1px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Toggle button in alt navbars
|
||
|
.navbar-text:not([data-toggle="collapse"]) {
|
||
|
border-bottom: 1px solid @navbar-default-border;
|
||
|
}
|
||
|
> .navbar-nav > li > a {
|
||
|
&:not(.collapsed),
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: #fcfcfc;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Inverse navbar
|
||
|
.navbar-inverse {
|
||
|
border-bottom-color: fade(#fff, 10%);
|
||
|
color: @navbar-inverse-color;
|
||
|
|
||
|
// Navbar collapse
|
||
|
.navbar-collapse {
|
||
|
border-color: fade(#000, 20%);
|
||
|
}
|
||
|
|
||
|
// Navbar form
|
||
|
.navbar-form {
|
||
|
border-color: fade(#fff, 10%);
|
||
|
}
|
||
|
|
||
|
// Nav dropdowns
|
||
|
.navbar-nav {
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// Dropdowns get custom display
|
||
|
.open .dropdown-menu {
|
||
|
color: @navbar-inverse-link-color;
|
||
|
background-color: fade(#000, 10%);
|
||
|
border-bottom: 1px solid fade(#fff, 10%);
|
||
|
|
||
|
// Muted and annotation texts
|
||
|
.text-muted,
|
||
|
.media-annotation {
|
||
|
color: fade(#fff, 80%)
|
||
|
}
|
||
|
|
||
|
// Linked media list colors
|
||
|
.media-list-linked {
|
||
|
> li {
|
||
|
border-top-color: fade(#fff, 10%);
|
||
|
}
|
||
|
|
||
|
// Media link
|
||
|
.media-link {
|
||
|
color: @navbar-inverse-link-color;
|
||
|
|
||
|
// Hover/focus state
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: fade(#000, 10%);
|
||
|
color: @navbar-inverse-link-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Links color
|
||
|
a:not(.label-flat):not(.badge-flat):not(.disabled > a) {
|
||
|
color: @navbar-inverse-link-color;
|
||
|
}
|
||
|
|
||
|
// Divider
|
||
|
.divider {
|
||
|
background-color: fade(#fff, 10%);
|
||
|
}
|
||
|
|
||
|
// Dropdown menu header
|
||
|
> .dropdown-header {
|
||
|
color: fade(#fff, 60%);
|
||
|
}
|
||
|
|
||
|
// Dropdown submenu adaptation
|
||
|
> .dropdown-submenu {
|
||
|
&:hover > a,
|
||
|
&:focus > a {
|
||
|
color: @navbar-inverse-link-hover-color;
|
||
|
background-color: @navbar-inverse-link-hover-bg;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Borders in dropdowns first level only
|
||
|
.open > .dropdown-menu {
|
||
|
border-top: 1px solid fade(#fff, 10%);
|
||
|
}
|
||
|
|
||
|
// Remove bottom borders from last childs
|
||
|
.open:last-child .dropdown-menu {
|
||
|
border-bottom: 0;
|
||
|
}
|
||
|
|
||
|
// Make labels and badges white
|
||
|
.label,
|
||
|
.badge {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: #fff;
|
||
|
border-color: #fff;
|
||
|
color: @dropdown-link-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Make checkboxes and radios white
|
||
|
.checker,
|
||
|
.choice {
|
||
|
> span {
|
||
|
border-color: #fff;
|
||
|
color: #fff;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Make tabs transparent
|
||
|
.nav-tabs {
|
||
|
background-color: transparent;
|
||
|
border: 0;
|
||
|
|
||
|
> li > a {
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// Add darker bg to collapse
|
||
|
.navbar-collapse {
|
||
|
background-color: fade(#000, 5%);
|
||
|
}
|
||
|
|
||
|
// Add bottom border to navbar text
|
||
|
.navbar-text {
|
||
|
border-bottom: 1px solid fade(#fff, 10%);
|
||
|
}
|
||
|
|
||
|
// Change links background color
|
||
|
> .navbar-nav > li > a:not(.collapsed) {
|
||
|
background-color: fade(#000, 10%);
|
||
|
}
|
||
|
|
||
|
// Adapt component colors to collapsed navbar
|
||
|
.dropdown-menu {
|
||
|
|
||
|
// Links
|
||
|
.media-body a,
|
||
|
.table a {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
// Tables
|
||
|
.table-responsive {
|
||
|
border-width: 0 0 1px 0;
|
||
|
border-color: fade(#fff, 10%);
|
||
|
}
|
||
|
.dropdown-content-heading + .table-responsive {
|
||
|
border-top-width: 1px;
|
||
|
}
|
||
|
.table {
|
||
|
th,
|
||
|
td {
|
||
|
border-color: fade(#fff, 10%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Make flat elements white
|
||
|
.label-flat,
|
||
|
.badge-flat,
|
||
|
.btn-flat {
|
||
|
border-color: #fff;
|
||
|
color: #fff;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar sizing
|
||
|
// ------------------------------
|
||
|
|
||
|
// Large
|
||
|
.navbar-lg {
|
||
|
min-height: @navbar-height-large;
|
||
|
|
||
|
// Brand
|
||
|
.navbar-brand {
|
||
|
height: @navbar-height-large;
|
||
|
padding-top: @navbar-padding-vertical-large;
|
||
|
padding-bottom: @navbar-padding-vertical-large;
|
||
|
}
|
||
|
|
||
|
// Nav
|
||
|
.navbar-nav {
|
||
|
|
||
|
// Items
|
||
|
> li > a {
|
||
|
padding-top: @navbar-padding-vertical-large;
|
||
|
padding-bottom: @navbar-padding-vertical-large;
|
||
|
}
|
||
|
|
||
|
// User dropdown
|
||
|
> .dropdown-user {
|
||
|
> a {
|
||
|
&,
|
||
|
> span {
|
||
|
padding-top: @navbar-padding-vertical-large / 2;
|
||
|
padding-bottom: @navbar-padding-vertical-large / 2;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Small
|
||
|
.navbar-sm {
|
||
|
min-height: @navbar-height-small;
|
||
|
|
||
|
// Brand
|
||
|
.navbar-brand {
|
||
|
height: @navbar-height-small;
|
||
|
padding-top: @navbar-padding-vertical-small;
|
||
|
padding-bottom: @navbar-padding-vertical-small;
|
||
|
}
|
||
|
|
||
|
// Nav
|
||
|
.navbar-nav {
|
||
|
|
||
|
// Items
|
||
|
> li > a {
|
||
|
padding-top: @navbar-padding-vertical-small;
|
||
|
padding-bottom: @navbar-padding-vertical-small;
|
||
|
}
|
||
|
|
||
|
// User dropdown
|
||
|
> .dropdown-user {
|
||
|
> a {
|
||
|
&,
|
||
|
> span {
|
||
|
padding-top: @navbar-padding-vertical-small / 2;
|
||
|
padding-bottom: @navbar-padding-vertical-small / 2;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Mini
|
||
|
.navbar-xs {
|
||
|
min-height: @navbar-height-mini;
|
||
|
|
||
|
// Brand
|
||
|
.navbar-brand {
|
||
|
height: @navbar-height-mini;
|
||
|
padding-top: @navbar-padding-vertical-mini;
|
||
|
padding-bottom: @navbar-padding-vertical-mini;
|
||
|
}
|
||
|
|
||
|
// Nav
|
||
|
.navbar-nav {
|
||
|
|
||
|
// Items
|
||
|
> li > a {
|
||
|
padding-top: @navbar-padding-vertical-mini;
|
||
|
padding-bottom: @navbar-padding-vertical-mini;
|
||
|
}
|
||
|
|
||
|
// User dropdown
|
||
|
> .dropdown-user {
|
||
|
> a {
|
||
|
&,
|
||
|
> span {
|
||
|
padding-top: @navbar-padding-vertical-mini / 2;
|
||
|
padding-bottom: @navbar-padding-vertical-mini / 2;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Mega menu
|
||
|
// ------------------------------
|
||
|
|
||
|
// Base
|
||
|
.mega-menu {
|
||
|
|
||
|
// Disable direct absolute positioning
|
||
|
.nav & {
|
||
|
position: static;
|
||
|
}
|
||
|
|
||
|
// Remove left positioning
|
||
|
.dropdown-menu {
|
||
|
left: auto;
|
||
|
}
|
||
|
|
||
|
// Full width menu
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
&.mega-menu-wide > .dropdown-menu {
|
||
|
left: @grid-gutter-width;
|
||
|
right: @grid-gutter-width;
|
||
|
|
||
|
.layout-boxed & {
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Mega menu header
|
||
|
.dropdown-content-heading {
|
||
|
padding: @content-padding-large;
|
||
|
font-size: @font-size-small;
|
||
|
text-transform: uppercase;
|
||
|
font-weight: 500;
|
||
|
|
||
|
// Remove top padding if body placed after padding
|
||
|
& + .dropdown-menu-body {
|
||
|
padding-top: 0;
|
||
|
}
|
||
|
|
||
|
// Remove top padding from the next dropdown header
|
||
|
& + .dropdown-header {
|
||
|
padding-top: 0!important;
|
||
|
}
|
||
|
|
||
|
// If inside usual dropdown, padding correction
|
||
|
ul.dropdown-menu & {
|
||
|
padding-left: @content-padding-base;
|
||
|
padding-right: @content-padding-base;
|
||
|
|
||
|
&:first-child {
|
||
|
padding-top: (@content-padding-large - @list-spacing);
|
||
|
padding-bottom: (@content-padding-large - @list-spacing);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Display icons list always on the right side
|
||
|
.icons-list {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
// Add top border to the table inside dropdown
|
||
|
& + .table-responsive {
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
border-top: 1px solid @dropdown-border;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Mega menu footer
|
||
|
.dropdown-content-footer {
|
||
|
background-color: @panel-footer-bg;
|
||
|
color: @text-color;
|
||
|
border-top: 1px solid @dropdown-border;
|
||
|
.border-bottom-radius(@border-radius-base);
|
||
|
|
||
|
// Links
|
||
|
a {
|
||
|
display: block;
|
||
|
padding: @padding-base-vertical;
|
||
|
text-align: center;
|
||
|
color: @text-color;
|
||
|
|
||
|
// Hover/focus states
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: @dropdown-link-hover-bg;
|
||
|
}
|
||
|
|
||
|
// Remove top edge from the icon
|
||
|
> i.display-block {
|
||
|
top: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// In inversed navbar
|
||
|
.navbar-inverse & {
|
||
|
background-color: fade(#000, 10%);
|
||
|
color: #fff;
|
||
|
border-color: transparent;
|
||
|
border-radius: 0;
|
||
|
|
||
|
// Links should be white
|
||
|
a {
|
||
|
color: #fff;
|
||
|
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: fade(#000, 10%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Mega menu content
|
||
|
.dropdown-content-body {
|
||
|
padding: @panel-body-padding;
|
||
|
|
||
|
.dropdown-content-heading + & {
|
||
|
padding-top: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Remove vertical padding from content dropdown
|
||
|
.dropdown-content {
|
||
|
&:not(ul) {
|
||
|
padding-top: 0;
|
||
|
padding-bottom: 0;
|
||
|
}
|
||
|
|
||
|
// Prevent wrap in inline form
|
||
|
.form-inline {
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Mega menu list
|
||
|
// ------------------------------
|
||
|
|
||
|
// Base
|
||
|
.menu-list {
|
||
|
margin: 0 0 @line-height-computed 0;
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
overflow: hidden;
|
||
|
|
||
|
@media (min-width: @screen-lg-min) {
|
||
|
[class*=col-lg-] & {
|
||
|
margin-bottom: (@padding-base-vertical + 1);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: @screen-md-min) {
|
||
|
[class*=col-md-] & {
|
||
|
margin-bottom: (@padding-base-vertical + 1);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: @screen-sm-min) {
|
||
|
[class*=col-sm-] & {
|
||
|
margin-bottom: (@padding-base-vertical + 1);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: @screen-xs-min) {
|
||
|
[class*=col-xs-] & {
|
||
|
margin-bottom: (@padding-base-vertical + 1);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Children lists
|
||
|
ul {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
list-style: none;
|
||
|
position: absolute;
|
||
|
display: none;
|
||
|
left: 110%;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
// Menu item
|
||
|
li {
|
||
|
position: relative;
|
||
|
margin-top: 1px;
|
||
|
|
||
|
&:first-child {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
// Link
|
||
|
> a {
|
||
|
display: block;
|
||
|
color: @dropdown-link-color;
|
||
|
padding: (@padding-base-vertical + 1) @padding-base-horizontal;
|
||
|
border-radius: @border-radius-base;
|
||
|
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: @dropdown-link-hover-bg;
|
||
|
}
|
||
|
|
||
|
> i {
|
||
|
margin-right: @content-padding-small;
|
||
|
}
|
||
|
|
||
|
> .label,
|
||
|
> .badge {
|
||
|
float: right;
|
||
|
margin-left: @element-horizontal-spacing;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Active item
|
||
|
&.active > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
color: @dropdown-link-active-color;
|
||
|
background-color: @dropdown-link-active-bg;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Disabled item
|
||
|
&.disabled {
|
||
|
> a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: transparent;
|
||
|
color: @dropdown-link-disabled-color;
|
||
|
cursor: @cursor-disabled;
|
||
|
}
|
||
|
|
||
|
// Mute elements
|
||
|
> .label,
|
||
|
> .badge,
|
||
|
> img {
|
||
|
.opacity(0.8);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
li {
|
||
|
|
||
|
// Link
|
||
|
> a {
|
||
|
color: #fff;
|
||
|
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: fade(#000, 10%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Active state
|
||
|
&.active > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: fade(#000, 10%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Disabled state
|
||
|
&.disabled > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: transparent;
|
||
|
color: fade(#fff, 60%);
|
||
|
cursor: @cursor-disabled;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// List items in default navbar
|
||
|
.navbar-default & {
|
||
|
li {
|
||
|
|
||
|
// Link
|
||
|
> a {
|
||
|
color: @dropdown-link-color;
|
||
|
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: @dropdown-link-hover-bg;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Active state
|
||
|
&.active > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
color: @dropdown-link-active-color;
|
||
|
background-color: @dropdown-link-active-bg;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Disabled state
|
||
|
&.disabled > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: transparent;
|
||
|
color: @dropdown-link-disabled-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Setup desktop view
|
||
|
@media (min-width: @grid-float-breakpoint) {
|
||
|
overflow-y: auto;
|
||
|
max-height: @navbar-collapse-max-height;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Drill down menu
|
||
|
.dd-wrapper {
|
||
|
|
||
|
// Menu
|
||
|
.dd-menu {
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
// Header
|
||
|
.dd-header {
|
||
|
h6 {
|
||
|
.label,
|
||
|
.badge {
|
||
|
margin-left: @element-horizontal-spacing;
|
||
|
}
|
||
|
|
||
|
> i {
|
||
|
margin-right: @element-horizontal-spacing;
|
||
|
}
|
||
|
|
||
|
&:first-child {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Display child lists
|
||
|
.dd-parent .active-ul + ul {
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
// "Back" link
|
||
|
.link-back {
|
||
|
display: block;
|
||
|
padding: (@padding-base-vertical + 1) 0;
|
||
|
border-radius: @border-radius-base;
|
||
|
margin-bottom: (@line-height-computed / 2);
|
||
|
font-size: @font-size-small;
|
||
|
text-transform: uppercase;
|
||
|
line-height: @line-height-small;
|
||
|
|
||
|
// Arrow icon
|
||
|
&:before {
|
||
|
content: '\ede7';
|
||
|
font-family: 'icomoon';
|
||
|
font-size: @icon-font-size;
|
||
|
line-height: 1;
|
||
|
position: relative;
|
||
|
top: -1px;
|
||
|
vertical-align: middle;
|
||
|
margin-right: @element-horizontal-spacing;
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
-moz-osx-font-smoothing: grayscale;
|
||
|
}
|
||
|
|
||
|
// Hide default icon and use custom instead
|
||
|
.dd-icon,
|
||
|
i {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// Base and default navbar
|
||
|
.navbar & {
|
||
|
padding: @line-height-computed 0;
|
||
|
text-align: center;
|
||
|
margin-top: -(@line-height-computed / 2);
|
||
|
margin-bottom: @line-height-computed;
|
||
|
border-bottom: 1px solid @gray-lighter;
|
||
|
}
|
||
|
|
||
|
// Inverse navbar
|
||
|
.navbar-inverse & {
|
||
|
color: #fff;
|
||
|
border-bottom-color: fade(#fff, 10%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Arrow icons
|
||
|
.dd-icon {
|
||
|
float: right;
|
||
|
margin-top: ((@line-height-computed - @icon-font-size) / 2);
|
||
|
|
||
|
// "Right" arrow and base
|
||
|
&:after {
|
||
|
content: '\e9c7';
|
||
|
font-family: 'icomoon';
|
||
|
font-size: @icon-font-size;
|
||
|
line-height: 1;
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
-moz-osx-font-smoothing: grayscale;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Use another icon in header
|
||
|
.dd-header .dd-icon:after {
|
||
|
content: '\e9c5';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Mega menu list heading
|
||
|
.menu-heading {
|
||
|
display: block;
|
||
|
font-size: @font-size-small;
|
||
|
text-transform: uppercase;
|
||
|
font-weight: 500;
|
||
|
margin-bottom: (@line-height-computed / 2);
|
||
|
padding-top: ((@line-height-computed - @font-size-small) / 2);
|
||
|
|
||
|
// Icons
|
||
|
> i {
|
||
|
float: left;
|
||
|
margin-right: @element-horizontal-spacing;
|
||
|
}
|
||
|
|
||
|
// Underlined heading
|
||
|
&.underlined {
|
||
|
padding-bottom: (@line-height-computed / 2);
|
||
|
border-bottom: 1px solid @gray-lighter;
|
||
|
}
|
||
|
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
color: #fff;
|
||
|
|
||
|
// Remove top margin in the first item
|
||
|
div:first-child > & {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
// In default navbar
|
||
|
.navbar-default & {
|
||
|
color: @dropdown-link-color;
|
||
|
}
|
||
|
|
||
|
// Underlined
|
||
|
&.underlined {
|
||
|
border-bottom-color: fade(#fff, 10%);
|
||
|
|
||
|
.navbar-default & {
|
||
|
border-bottom-color: @gray-lighter;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Tabs inside navbar dropdowns
|
||
|
// ------------------------------
|
||
|
|
||
|
.dropdown-menu {
|
||
|
.nav-tabs {
|
||
|
|
||
|
// Remove border radius
|
||
|
&,
|
||
|
> li > a {
|
||
|
border-radius: 0;
|
||
|
}
|
||
|
|
||
|
// Remove side borders from first and last tabs
|
||
|
> li,
|
||
|
> li.active {
|
||
|
&:first-child > a {
|
||
|
border-left: 0;
|
||
|
}
|
||
|
|
||
|
&:last-child > a {
|
||
|
border-right: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
margin-top: 0;
|
||
|
|
||
|
// Remove helper label
|
||
|
&:before {
|
||
|
content: none;
|
||
|
}
|
||
|
|
||
|
// List item
|
||
|
> li {
|
||
|
|
||
|
// Add 1px gap between items
|
||
|
& + li {
|
||
|
margin-top: 1px;
|
||
|
}
|
||
|
|
||
|
// Link
|
||
|
> a {
|
||
|
border: 0;
|
||
|
padding-left: @navbar-padding-horizontal;
|
||
|
padding-right: @navbar-padding-horizontal;
|
||
|
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
background-color: fade(#000, 10%)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Active state
|
||
|
&.active {
|
||
|
> a,
|
||
|
> a:hover,
|
||
|
> a:focus {
|
||
|
border: 0;
|
||
|
background-color: fade(#000, 10%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Common navbar styles
|
||
|
.navbar & {
|
||
|
border-top: 1px solid fade(#fff, 10%);
|
||
|
border-bottom: 1px solid fade(#fff, 10%);
|
||
|
|
||
|
> li {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
&.active > a {
|
||
|
border-color: transparent;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Inverse navbar
|
||
|
.navbar-inverse & {
|
||
|
> li {
|
||
|
> a {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
// Disabled state
|
||
|
&.disabled > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
color: fade(#fff, 60%);
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Default navbar
|
||
|
.navbar-default & {
|
||
|
border-top-color: @navbar-default-border;
|
||
|
border-bottom-color: @navbar-default-border;
|
||
|
border-left: 0;
|
||
|
border-right: 0;
|
||
|
|
||
|
// List item
|
||
|
> li {
|
||
|
|
||
|
// Links hover state
|
||
|
> a:hover,
|
||
|
> a:focus {
|
||
|
color: @navbar-default-color;
|
||
|
background-color: @navbar-default-link-hover-bg;
|
||
|
}
|
||
|
|
||
|
// Active state
|
||
|
&.active > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
color: @navbar-default-color;
|
||
|
background-color: @navbar-default-link-hover-bg;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Disabled state
|
||
|
&.disabled > a {
|
||
|
&,
|
||
|
&:hover,
|
||
|
&:focus {
|
||
|
color: @navbar-default-link-disabled-color;
|
||
|
background-color: @navbar-default-link-disabled-bg;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar progress bars
|
||
|
// ------------------------------
|
||
|
|
||
|
// Base
|
||
|
.navbar-progress {
|
||
|
float: left;
|
||
|
margin-left: @navbar-padding-horizontal;
|
||
|
|
||
|
// Progress bar
|
||
|
.progress {
|
||
|
width: 200px;
|
||
|
}
|
||
|
|
||
|
// Setup mobile view
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
margin: @navbar-padding-vertical @navbar-padding-horizontal;
|
||
|
float: none;
|
||
|
|
||
|
.progress {
|
||
|
margin-top: 0;
|
||
|
margin-bottom: 0;
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Sizing
|
||
|
.navbar-xs .navbar-progress .progress {
|
||
|
.navbar-mini-vertical-align(@progress-base-height);
|
||
|
}
|
||
|
.navbar-progress .progress,
|
||
|
.navbar-xs .navbar-progress .progress-sm {
|
||
|
.navbar-vertical-align(@progress-base-height);
|
||
|
}
|
||
|
.navbar-progress .progress-sm,
|
||
|
.navbar-xs .navbar-progress .progress-xs {
|
||
|
.navbar-mini-vertical-align(@progress-mini-height);
|
||
|
}
|
||
|
.navbar-progress .progress-xs,
|
||
|
.navbar-xs .navbar-progress .progress-xxs {
|
||
|
.navbar-mini-vertical-align(@progress-tiny-height);
|
||
|
}
|
||
|
.navbar-progress .progress-xxs {
|
||
|
.navbar-vertical-align(@progress-tiny-height);
|
||
|
}
|
||
|
.navbar-sm .navbar-progress .progress {
|
||
|
.navbar-small-vertical-align(@progress-base-height);
|
||
|
}
|
||
|
.navbar-lg .navbar-progress .progress,
|
||
|
.navbar-sm .navbar-progress .progress-sm {
|
||
|
.navbar-large-vertical-align(@progress-base-height);
|
||
|
}
|
||
|
.navbar-lg .navbar-progress .progress-sm,
|
||
|
.navbar-sm .navbar-progress .progress-xs {
|
||
|
.navbar-large-vertical-align(@progress-small-height);
|
||
|
}
|
||
|
.navbar-lg .navbar-progress .progress-xs,
|
||
|
.navbar-sm .navbar-progress .progress-xxs {
|
||
|
.navbar-large-vertical-align(@progress-mini-height);
|
||
|
}
|
||
|
.navbar-lg .navbar-progress .progress-xxs {
|
||
|
.navbar-large-vertical-align(@progress-tiny-height);
|
||
|
}
|
||
|
|
||
|
|
||
|
// Navbar inner dropdowns on mobiles
|
||
|
// ------------------------------
|
||
|
|
||
|
@media (max-width: @grid-float-breakpoint-max) {
|
||
|
|
||
|
// Common navbar dropdown
|
||
|
.navbar {
|
||
|
.btn-group,
|
||
|
.dropdown,
|
||
|
.input-group {
|
||
|
|
||
|
// Make dropdown full width with no borders
|
||
|
.dropdown-menu {
|
||
|
width: 100%;
|
||
|
border-width: 0 0 1px 0;
|
||
|
border-radius: 0;
|
||
|
|
||
|
> li > a {
|
||
|
padding-left: @navbar-padding-horizontal;
|
||
|
padding-right: @navbar-padding-horizontal;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Remove relative position from dropdown parents
|
||
|
.btn-group,
|
||
|
.input-group,
|
||
|
.form-group:not(.has-feedback),
|
||
|
.input-group-btn {
|
||
|
position: static;
|
||
|
}
|
||
|
|
||
|
// Make select2 select full width
|
||
|
.select2-container {
|
||
|
width: 100%!important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Bottom fixed navbar
|
||
|
.navbar-fixed-bottom {
|
||
|
.btn-group,
|
||
|
.dropdown,
|
||
|
.input-group {
|
||
|
.dropdown-menu {
|
||
|
border-width: 1px 0 0 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Revert for navbar component
|
||
|
.navbar-component {
|
||
|
.btn-group,
|
||
|
.dropdown,
|
||
|
.input-group {
|
||
|
.dropdown-menu {
|
||
|
border-width: 0 1px 1px 1px;
|
||
|
.border-bottom-radius(@border-radius-base);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Remove bottom spacing from tables
|
||
|
.table-responsive {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
}
|