/* ------------------------------------------------------------------------------ * * # Sidebar layouts * * Styles for sidebar components, main navigation and sidebar itself * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Sidebar base // ------------------------------ // Base .sidebar { background-color: @sidebar-dark-bg; color: #fff; position: relative; width: 100%; display: none; // For desktop only @media (min-width: @grid-float-breakpoint) { display: table-cell; vertical-align: top; width: @sidebar-base-width; } // Main sidebar &-main { z-index: 99; } // Secondary sidebar &-secondary { z-index: 98; } // Opposite sidebar &-opposite { display: none; z-index: 97; @media (min-width: @grid-float-breakpoint) { .sidebar-opposite-visible & { display: table-cell; } } } // Add 1px border if both sidebars are dark &:not(.sidebar-default) + &:not(.sidebar-default) { border-left: 1px solid fade(#fff, 10%) } } // Light sidebar .sidebar-default { background-color: @sidebar-light-bg; color: @text-color; border-bottom: 1px solid @panel-default-border; // For desktop only @media (min-width: @grid-float-breakpoint) { border-bottom: 0; border-right: 1px solid @panel-default-border; .content-wrapper + & { border-left: 1px solid @panel-default-border; } } } // Sidebar content .sidebar-content { position: relative; } // Sidebar togglers // ------------------------------ // Toggle sidebar visibility according to the class name .sidebar-all-hidden .sidebar-main, .sidebar-all-hidden .sidebar-secondary, .sidebar-main-hidden .sidebar-main, .sidebar-detached-hidden .sidebar-detached > .sidebar, .sidebar-secondary-hidden .sidebar-secondary { display: none; } // Toggle sidebars on mobile @media (max-width: @grid-float-breakpoint-max) { .sidebar-mobile-main .sidebar-main, .sidebar-mobile-secondary .sidebar-secondary, .sidebar-mobile-opposite .sidebar-opposite, .sidebar-mobile-detached .sidebar-detached > .sidebar { display: block; } } // Sidebar content // ------------------------------ // Title .category-title { position: relative; margin: 0; padding: @content-padding-small @content-padding-large; padding-right: (@content-padding-large + @content-padding-small + @icon-font-size); border-bottom: 1px solid fade(#fff, 10%); // Small titles > span { display: block; margin-top: (@font-size-base - @font-size-mini); text-transform: uppercase; font-weight: 500; font-size: @font-size-mini; line-height: @line-height-mini; } // Single icon > i { position: absolute; right: @content-padding-large; top: 50%; margin-top: -(@icon-font-size / 2); } // List of icons .icons-list { position: absolute; right: @content-padding-large; top: 50%; margin-top: -(@icon-font-size / 2); } // In light sidebar .sidebar-default & { border-bottom-color: @panel-default-border; } } // Content .category-content { position: relative; padding: @content-padding-large; } // Default sidebar navigation // ------------------------------ // Basic nav .navigation { margin: 0; padding: (@line-height-computed / 2) 0; list-style: none; position: relative; // Add top space to the nav inside category content .sidebar-user + .sidebar-category & { padding-top: 0; } // Hide child nav levels .hidden-ul { display: none; } // All items li { position: relative; // Add 1px spacing between items + li { margin-top: 1px; } // Add extra space for categories + .navigation-header { margin-top: (@line-height-computed / 2); } // All level links a { color: fade(#fff, 75%); display: block; @transition: background 0.15s linear, color 0.15s linear; .transition(@transition); // Add minor animation to all level links // Hover state &:hover, &:focus { background-color: fade(#000, 10%); color: #fff; } // Left icons > i { float: left; top: 0; margin-top: 2px; margin-right: @content-padding-base; .transition(opacity 0.2s ease-in-out); &.pull-right { margin-right: 0; margin-left: @content-padding-base; } } } // Disabled state &.disabled { > a { &, &:hover, &:focus { color: inherit; background-color: transparent; cursor: @cursor-disabled; .opacity(0.3); } } } // Direction arrows > .has-ul { position: relative; padding-right: (@content-padding-large + @icon-font-size); // Arrow icons &:after { content: "\e9c7"; font-family: "icomoon"; font-size: @icon-font-size; display: block; position: absolute; top: 50%; margin-top: -(@icon-font-size / 2); right: @content-padding-large; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .rotate(0deg); .transition(-webkit-transform 0.2s ease-in-out); } } &.active > .has-ul:after { .rotate(90deg); } // Divider &.navigation-divider { margin: (@list-spacing * 2) 0; height: 1px; background-color: fade(#fff, 10%); // In light sidebar .sidebar-default & { background-color: @gray-lighter; } } } // First level items > li { // Links > a { padding: @navigation-padding-base-vertical @navigation-padding-base-horizontal; min-height: (@line-height-computed + (@navigation-padding-base-vertical * 2)); font-weight: 500; } // Active state links &.active { // Set color for active link > a { &, &:hover, &:focus { background-color: @navigation-dark-active-bg; color: #fff; } // Make all texts white > [class*=text-] { color: #fff; } } } // All child lists ul { list-style: none; margin: 0; padding: 0; background-color: fade(#000, 15%); .box-shadow(0 1px 0 fade(#fff, 5%)); // Nav items li { a { padding: 10px @content-padding-large; padding-left: (@content-padding-large + @content-padding-base + @icon-font-size); min-height: (@line-height-computed + 20); } } // Nav headers .navigation-header { padding-left: (@content-padding-large + @content-padding-base + @icon-font-size); } } // Child list > ul { // Child list items > li { // Third level > ul { > li > a, > .navigation-header { padding-left: ((@content-padding-large * 2) + @content-padding-base + @icon-font-size); } // Fourth level > li > ul { > li > a, .navigation-header { padding-left: ((@content-padding-large * 3) + @content-padding-base + @icon-font-size); } } } } // All child list items li { // Add extra vertical space &:first-child { padding-top: (@line-height-computed / 2); } &:last-child { padding-bottom: (@line-height-computed / 2); } // Active link has darker color &.active { > a { &, &:hover, &:focus { background-color: fade(#000, 20%); color: #fff; } } } } } } // Navigation header .navigation-header { min-height: (@content-padding-small + @line-height-computed); padding: @content-padding-small @content-padding-large; border-bottom: 0; text-transform: uppercase; font-size: @font-size-mini; line-height: @line-height-mini; // Text label > span { display: block; margin-top: (@font-size-base - @font-size-mini); } // Hide icon divider by default > i { display: none; } > i.pull-right { margin-top: ((@line-height-computed - @icon-font-size) / 2); } // Text and link styles &, & a { color: fade(#fff, 50%); font-weight: 400; } // Link states and elements a { &:hover, &:focus { color: #fff; } i { float: none; margin: 0; } } // In default sidebar .sidebar-default & { &, a { color: @text-muted; } a:hover, a:focus { color: @text-color; } } } // Labels and badges .label, .badge { float: right; margin-top: 1px; } } // Navigation in light sidebar .sidebar-default { .navigation { // All levels li { > a { color: @text-color; &:hover, &:focus { background-color: @dropdown-link-hover-bg; } } // Active state &.active { > a { &, &:hover, &:focus { background-color: @dropdown-link-hover-bg; color: @text-color; } } } // Disabled state &.disabled { > a { &, &:hover, &:focus { background-color: transparent; } } } } // Child levels > li { ul { background-color: transparent; } // Active state colors &.active { > a { &, &:hover, &:focus { background-color: @navigation-light-active-bg; color: #fff; } } } } } } // // Navigation options // // Navigation with right icons .navigation-icons-right { > li { > a { &, &.has-ul { padding-right: @navigation-padding-base-horizontal; } > i { float: right; margin-right: 0; } } // Hide arrows > a.has-ul:after, &.active > .has-ul:after { content: none; } } } // Bordered navigation .navigation-bordered { > li { border-top: 1px solid fade(#fff, 5%); // Last item border &:last-child { border-bottom: 1px solid fade(#fff, 5%); } // Headers &.navigation-header { background-color: fade(#000, 10%); padding-top: @navigation-padding-base-vertical; padding-bottom: @navigation-padding-base-vertical; line-height: 1; } // Remove 1px spacing + li { margin-top: 0; } // Remove box shadow ul { .box-shadow(none); } } // Remove extra space in categories li + .navigation-header { margin-top: 0; } // In light sidebar .sidebar-default & { > li { border-top: 1px solid @gray-lighter; // Darker headers background &.navigation-header { background-color: #fafafa; } } } } // Navigation sizing // ------------------------------ // Large .navigation-lg { > li { > a { &, & > span { padding-top: @navigation-padding-large-vertical; padding-bottom: @navigation-padding-large-vertical; min-height: (@line-height-computed + (@navigation-padding-large-vertical * 2)); } } ul { li { a { padding-top: @navigation-padding-large-vertical - 4; padding-bottom: @navigation-padding-large-vertical - 4; min-height: ((@line-height-computed + (@navigation-padding-large-vertical * 2)) - 8); } } } .sidebar-xs .sidebar-main & { > ul { top: (@line-height-computed + (@navigation-padding-large-vertical * 2)); } } } } // Small .navigation-sm { > li { > a { &, & > span { padding-top: @navigation-padding-small-vertical; padding-bottom: @navigation-padding-small-vertical; min-height: (@line-height-computed + (@navigation-padding-small-vertical * 2)); } } ul { li { a { padding-top: @navigation-padding-small-vertical - 4; padding-bottom: @navigation-padding-small-vertical - 4; min-height: ((@line-height-computed + (@navigation-padding-small-vertical * 2)) - 8); } } } .sidebar-xs .sidebar-main & { > ul { top: (@line-height-computed + (@navigation-padding-small-vertical * 2)); } } } } // Mini .navigation-xs { > li { > a { &, & > span { padding-top: @navigation-padding-mini-vertical; padding-bottom: @navigation-padding-mini-vertical; min-height: (@line-height-computed + (@navigation-padding-mini-vertical * 2)); } } ul { li { a { padding-top: @navigation-padding-mini-vertical - 2; padding-bottom: @navigation-padding-mini-vertical - 2; min-height: ((@line-height-computed + (@navigation-padding-mini-vertical * 2)) - 4); } } } .sidebar-xs .sidebar-main & { > ul { top: (@line-height-computed + (@navigation-padding-mini-vertical * 2)); } } } } // Sidebar layouts // ------------------------------ // // Fixed sidebar // // Sidebar is hidden on navbar breakpoint @media (min-width: @grid-float-breakpoint) { // Fixed sidebar .sidebar-fixed { .sidebar-content { position: fixed; width: @sidebar-base-width; max-height: 100%; overflow: auto; top: @navbar-height + 2; bottom: @navbar-height + 2; margin-bottom: -(@navbar-height + 2); } // In mini sidebar .sidebar-xs &.sidebar-main { .sidebar-content { width: @sidebar-mini-width; } } } // Expanded mini sidebar .sidebar-fixed-expanded { // Works only with main sidebar .sidebar-fixed.sidebar-main { position: fixed; display: block; height: 100%; z-index: (@zindex-navbar + 1); // Sidebar content .sidebar-content { position: fixed; } // Mini sidebar .sidebar-xs & { width: @sidebar-base-width; } } // Add left padding to content when expanded .content-wrapper { padding-left: @sidebar-mini-width; } } } // Remove top edge .sidebar-xs-indicator .sidebar-fixed .sidebar-content { top: 0!important; } // // Detached sidebar // // Positioning @media (min-width: @grid-float-breakpoint) { // If on the left side .has-detached-left { .container-detached { float: right; margin-left: -(@sidebar-base-width); width: 100%; } .content-detached { margin-left: (@sidebar-base-width + @grid-gutter-width); } .sidebar-detached { float: left; } } // If on the right side .has-detached-right { .container-detached { float: left; margin-right: -(@sidebar-base-width); width: 100%; } .content-detached { margin-right: (@sidebar-base-width + @grid-gutter-width); } .sidebar-detached { float: right; &.affix { right: @grid-gutter-width; } } } // If hidden .sidebar-detached-hidden { .container-detached { float: none; margin: 0; } .content-detached { margin: 0; } .sidebar-detached { float: none; } } } // Basic detached sidebar .sidebar-detached { // Main navigation for scrollspy .navigation.nav { > .active > .hidden-ul { display: block; } // Display children lists @media (max-width: @grid-float-breakpoint-max) { > li > .hidden-ul { display: block; } } } // Remove fixed position on mobiles &.affix { position: static; } // Setup desktop view @media (min-width: @grid-float-breakpoint) { display: block; position: relative; margin-bottom: 0; // Light sidebar > .sidebar-default { border: 1px solid @panel-default-border; .box-shadow(0 1px 1px fade(#000, 5%)); } // Display sidebar as a block element > .sidebar { margin-bottom: 0; display: block; border-radius: @border-radius-base; } // Add fixed position on desktops &.affix { position: fixed; top: @line-height-computed; bottom: @line-height-computed; > .sidebar { max-height: 100%; overflow-y: auto; } } // Avoid footer overlap &.fixed-sidebar-space { bottom: (@line-height-computed * 3); } } } // With separate categories .sidebar-separate { @media (min-width: @grid-float-breakpoint) { background-color: transparent; // Make categories as separate widgets .sidebar-category { background-color: @sidebar-dark-bg; border-radius: @border-radius-base; margin-bottom: @line-height-computed; } // In light sidebar &.sidebar-default { background-color: transparent; border: 0; .box-shadow(none); // Make categories white .sidebar-category { background-color: @sidebar-light-bg; border: 1px solid @panel-default-border; .box-shadow(0 1px 1px fade(#000, 5%)); } } } } // // Mini sidebar // // Mini sidebar has smaller width only on desktops @media (min-width: @grid-float-breakpoint) { .sidebar-xs { // Inside main sidebar .sidebar-main { width: @sidebar-mini-width; // Categories .sidebar-category { display: none; } .sidebar-category-visible { display: block; } // Category title .category-title { padding: 0; // Icons > i { padding: ((@content-padding-small + @icon-font-size) / 2) 0; float: none; display: block; top: 0; } // Text label > span { display: none; } // List of icons .icons-list { position: static; text-align: center; padding-top: @content-padding-small; padding-bottom: @content-padding-small; margin-top: (((@line-height-computed - @icon-font-size) / 2) + 1); margin-bottom: (((@line-height-computed - @icon-font-size) / 2) + 1); // Stack items > li { display: block; margin-left: 0; // Add vertical spacing + li { margin-top: (@content-padding-large / 2); } } } } // Main navigation .navigation-main { // Navigation items > li { > a { display: block; text-align: center; padding-left: 0; padding-right: 0; // Add colored title > span { display: none; position: absolute; top: 0; right: -(@sidebar-base-width); background-color: @navigation-dark-active-bg; border-color: @navigation-dark-active-bg; padding: inherit; padding-left: @content-padding-large; padding-right: @content-padding-large; width: @sidebar-base-width; text-align: left; color: #fff; .border-right-radius(@border-radius-base); // Arrow &:after { @arrow-size: 5px; // Use inline variable content: ""; width: 0; height: 0; border-right: @arrow-size solid; border-top: @arrow-size solid transparent; border-bottom: @arrow-size solid transparent; border-right-color: inherit; position: absolute; left: -(@arrow-size); top: 50%; margin-top: -@arrow-size; } } // Icon > i { margin: 2px 0; display: block; float: none; } } // If has children &, &.active { > .has-ul:after { content: none; } } .has-ul { > span { border-radius: 0 @border-radius-base 0 0; } } // Hide active list &.active { > ul { display: none!important; } } // Disabled state &.disabled { &:hover { > ul, > a > span { display: none!important; } } } // Make things on hover &:hover { // Display list on hover > ul { display: block!important; } // Display title on hover > a { > span { display: block; cursor: default; } } // Keep item highlighted on hover (dark sidebar) &:not(.active) > a { background-color: fade(#000, 10%); color: #fff; } } // Children list > ul { position: absolute; right: -(@sidebar-base-width); top: @line-height-computed + 24; width: @sidebar-base-width; display: none; background-color: @sidebar-dark-bg; border-left: 1px solid fade(#fff, 10%); border-radius: 0 0 @border-radius-base 0; > li { > a { padding-left: @content-padding-large; padding-right: @content-padding-large; } > ul > li { > a { padding-left: (@content-padding-large * 1.5); } > ul > li { > a { padding-left: (@content-padding-large * 3); } } } } } } // Navigation header > .navigation-header { padding: 0; text-align: center; // Icons > i { display: block; top: 0; padding: ((@content-padding-small + @icon-font-size) / 2) 0; } // Hide text label > span { display: none; } } } // Sidebar user block .sidebar-user { .category-content { padding-left: 0; padding-right: 0; } .media-left, .media-right { padding: 0; text-align: center; display: block; > img { max-width: 100%; height: auto!important; } > .img-sm { margin-top: 1px; margin-bottom: 1px; } > .img-xs { margin-top: 3px; margin-bottom: 3px; } } // Hide main content .media-body, .media-right { display: none; } } } // Inside light sidebar .sidebar-default { .navigation-main { > li { > a > span { background-color: @navigation-light-active-bg; border-color: @navigation-light-active-bg; } > ul { background-color: @sidebar-light-bg; border: 1px solid @panel-default-border; border-top: 0; } // Keep item highlighted on hover (light sidebar) &:hover { &:not(.active) > a { background-color: @dropdown-link-hover-bg; color: @text-color; } } } } } } } // Sidebar components // ------------------------------ .sidebar { // Change columns gutter width .row { margin-left: -5px; margin-right: -5px; [class*=col-] { padding-left: 5px; padding-right: 5px; } } // Flat colorpicker .sp-container { @media (max-width: @grid-float-breakpoint-max) { display: block; width: (@sidebar-base-width - (@content-padding-large * 2)); margin-left: auto; margin-right: auto; } } .sp-flat .sp-picker-container { display: block; width: (@sidebar-base-width - (@content-padding-large * 2) - 2); } // Panel group .panel-group .panel { border-radius: 0; border-width: 0 0 1px 0; &:first-child { border-top-width: 1px; } & + .panel { margin-top: 0; } } // Bordered media list .media-list-bordered { > li { border-top: 0; border-bottom: 1px solid @gray-lighter; } } // Update components for dark sidebar only &:not(.sidebar-default) { .media { // Mute white color .text-muted, .media-annotation { color: fade(#fff, 80%) } // Make links white .media-left, .media-body, .media-right { > a { color: #fff; } } // Change hover background color .media-link { &:hover, &:focus { background-color: fade(#000, 10%); } } // Change badge border color .media-badge { border-color: @sidebar-dark-bg; } } .media-list-bordered { > li { border-color: fade(#fff, 10%); } } } // Sidebar thumbnails .thumbnail { margin-bottom: (@line-height-computed / 2); &:last-child { margin-bottom: 0; } .zoom-image i { font-size: @icon-font-size; margin-top: -(@icon-font-size / 2); margin-left: -(@icon-font-size / 2); } } // Checkboxes and radios .sidebar-category { .checkbox, .radio { margin-top: 0; &:last-child { margin-bottom: 0; } } } // Forms .form-group:last-child { margin-bottom: 0; } } // // Tabs // // Basic styles .sidebar { .nav-tabs { @media (min-width: @grid-float-breakpoint) { > li { > a { border-bottom-color: fade(#fff, 10%); background-color: fade(#000, 20%); color: fade(#fff, 60%); border-top: 0; border-radius: 0; &:hover, &:focus { color: #fff; border-bottom-color: fade(#fff, 10%); } } } // Active state colors > .active { > a, > a:hover, > a:focus { border-top: 0; border-bottom: 0; background-color: transparent; border-color: fade(#fff, 10%); color: #fff; } // Remove horizontal borders &:first-child > a { border-left-color: transparent!important; } &:last-child > a { border-right-color: transparent!important; } } // Fix right dropdown position because of the border .dropdown-menu-right { right: -1px; } // Opened dropdown link > .open { > a { color: #fff; } &:not(.active) > a { background-color: fade(#000, 20%); } } } } } // Tabs in default sidebar .sidebar-default { .nav-tabs { @media (min-width: @grid-float-breakpoint) { > li { > a { background-color: #fafafa; border-bottom-color: @panel-default-border; color: @text-muted; &:hover, &:focus { color: @text-color; border-bottom-color: @panel-default-border; } } } // Active state colors > .active { > a, > a:hover, > a:focus { border-color: @panel-default-border; color: @text-color; } } // Opened dropdown link > .open { > a { border-bottom-color: @panel-default-border; color: @text-color; } &:not(.active) > a { background-color: #fafafa; } } } } }