/* ------------------------------------------------------------------------------ * * # Breadcrumb component * * Overrides for breadcrumb bootstrap component * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Basic styles // ------------------------- // Base .breadcrumb { border-radius: 0; margin-bottom: 0; // Breadcrumb item > li { position: relative; // Links > a { color: @breadcrumb-color; // Mute on hover &:hover, &:focus { .opacity(0.85); } } // Icons i { display: inline-block; font-size: @font-size-small; } // Dropdown menus > .dropdown-menu { margin-top: 0; margin-left: 5px; } &:first-child > .dropdown-menu { margin-left: 0; } > .dropdown-menu-right { margin-left: 0; margin-right: -10px; } &:hover > .dropdown-menu { display: block; } // Location text &.location-text { margin-right: @element-horizontal-spacing; & + li { &:before { content: none; } > .dropdown-menu { margin-left: 0; } } } } // Setup mobile view @media (max-width: @screen-xs-max) { // Inside headings .heading-elements & { padding-top: 0; padding-bottom: 0; } // Disable absolute positioning > li { position: static; // Make dropdown full width .dropdown-menu { width: 100%; margin: 0; border-radius: 0; border-width: 1px 0; > li { position: static; } } } // Submenu .dropdown-submenu > .dropdown-menu { position: static; } } } // Breadcrumb inside page title .page-title { .breadcrumb { float: none; display: block; margin: 0; padding-top: 3px; padding-bottom: 0; &:first-child { padding-top: 0; padding-bottom: 3px; } // Mute links > li { > a, + li:before { color: @color-grey-500; } } // Add left spacing if title has icon &.position-right { margin-left: (@icon-font-size + @element-horizontal-spacing + 5); } } } // Transparent breadcrumb .page-header-content { // Breadcrumb > .breadcrumb { padding-top: 0; padding-bottom: (@breadcrumb-padding-vertical * 2); &:first-child { padding-bottom: 0; padding-top: (@breadcrumb-padding-vertical * 2); } } } // Divider styles // ------------------------- // Dash .breadcrumb-dash > li + li:before { content: '\2013\00a0'; } // Arrow .breadcrumb-arrow > li + li:before { content: '\2192\00a0'; } // Arrows .breadcrumb-arrows > li + li:before { content: '\00bb\00a0'; } // Caret .breadcrumb-caret > li + li:before { content: '\203A\00a0'; } // Breadcrumb line // ------------------------- // Base .breadcrumb-line { background-color: @navbar-default-bg; border-bottom: 1px solid @page-header-border-color; position: relative; // Clearing floats &:after { content: ''; display: table; clear: both; } // Add border if placed after page header content .page-header-content + & { border-bottom-width: 0; border-top: 1px solid @page-header-border-color; } // If after page header content in transparent header .page-header-transparent .page-header-content + & { border-bottom-width: 1px; margin-bottom: @line-height-computed; } // Breadcrumb .breadcrumb { margin-left: @grid-gutter-width; margin-right: ((@grid-gutter-width * 2) + @icon-font-size); @media (min-width: @screen-sm) { float: left; margin-right: 0; } } // Z-index correction for mobiles @media (max-width: @grid-float-breakpoint-max) { z-index: (@zindex-navbar - 2); } } // Inside transparent page header .page-header-transparent { // Breadcrumb line .breadcrumb-line { background-color: #fff; } // As a component .breadcrumb-line-component { margin-left: @grid-gutter-width; margin-right: @grid-gutter-width; padding-right: 0; > .breadcrumb-elements { margin-right: 0; } } } // Line with custom bg color .breadcrumb-line[class*=bg-] { // Inherit colors a, i { color: inherit; } // Breadcrumb .breadcrumb { > .active, > li + li:before { color: fade(#fff, 75%); } } // Breadcrumb elements .breadcrumb-elements { border-top-color: fade(#fff, 10%); > li > a { color: #fff; } } } // As a component .breadcrumb-line-component { border: 1px solid @panel-inner-border; margin-bottom: @line-height-computed; border-radius: @border-radius-base; background-color: @panel-bg; .box-shadow(0 1px 1px fade(#000, 5%)); // Inside page header (all levels) .page-header & { margin-left: @grid-gutter-width; margin-right: @grid-gutter-width; background-color: @navbar-default-bg; } // Inside page header (1st level) .page-header > & { border-width: 1px; &:first-child { margin-top: @line-height-computed; margin-bottom: 0; } } // Breadcrumb .breadcrumb { margin-left: @content-padding-base; } // Breadcrumb elements .breadcrumb-elements { margin-right: 0; > li:last-child > .dropdown-menu-right { right: -1px; } } } // Breadrumb elements // ------------------------------ .breadcrumb-elements { text-align: center; margin: 0; padding: 0; list-style: none; border-top: 1px solid @page-header-border-color; font-size: 0; // Clearing floats &:after { content: ''; display: table; clear: both; } // Items > li { display: inline-block; position: static; font-size: @font-size-base; // Links > a { display: block; padding: @breadcrumb-padding-vertical @content-padding-base; color: @breadcrumb-color; } // Mute on hover &.open > a, > a:hover, > a:focus { .opacity(0.75); } } // Dropdown menu .dropdown-menu { margin-top: 0; .border-top-radius(0); // Mobile view @media (max-width: @screen-xs-max) { left: 0; right: 0; border-width: 1px 0; border-radius: 0; > li > a { padding-left: @content-padding-base; padding-right: @content-padding-base; } } } // Dropup menu .dropup > .dropdown-menu { margin-bottom: 0; .border-bottom-radius(0); } // Collapse button [data-toggle="collapse"] { display: block; position: absolute; top: 0; right: @grid-gutter-width; } // Desktop view @media (min-width: @grid-float-breakpoint) { float: right; margin-right: @grid-gutter-width; text-align: inherit; border-top: 0; &.collapse { display: block; visibility: visible; } > li { float: left; } > li, > li .btn-group { position: relative; } [data-toggle="collapse"] { display: none; } } // Mobile view @media (max-width: @grid-float-breakpoint-max) { background-color: inherit; text-align: center; position: absolute; top: 50%; right: @grid-gutter-width; height: @input-height-base; margin-top: -(@input-height-base / 2); } }