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.
1509 lines
27 KiB
1509 lines
27 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Sidebar layouts |
|
* |
|
* Styles for sidebar components, main navigation and sidebar itself |
|
* |
|
* Version: 1.2 |
|
* Latest update: Nov 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 z-index |
|
&-main { |
|
z-index: 99; |
|
} |
|
|
|
// Secondary z-index |
|
&-secondary { |
|
z-index: 98; |
|
} |
|
|
|
// Opposite z-index |
|
&-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; |
|
padding-bottom: (@line-height-computed - @navigation-padding-base-vertical); |
|
} |
|
|
|
|
|
|
|
// 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: @navigation-padding-base-vertical @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 level nav 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: @navigation-dark-color; |
|
display: block; |
|
.transition(~"background 0.15s linear, color 0.15s linear"); // Add minor animation to all level links |
|
|
|
// Hover state |
|
&:hover, |
|
&:focus { |
|
background-color: @navigation-dark-hover-bg; |
|
color: @navigation-dark-hover-color; |
|
} |
|
|
|
// 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: (@line-height-computed / 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: @navigation-dark-active-color; |
|
} |
|
|
|
// Make all texts white |
|
> [class*=text-] { |
|
color: @navigation-dark-active-color; |
|
} |
|
|
|
// No color dependency - make all labela and badges white |
|
.label, |
|
.badge { |
|
background-color: transparent; |
|
border-color: transparent; |
|
color: @navigation-dark-active-color; |
|
.transition(background-color ease-in-out 0.2s); |
|
} |
|
} |
|
} |
|
|
|
// 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: @content-padding-small @content-padding-large; |
|
padding-left: (@content-padding-large + @content-padding-base + @icon-font-size); |
|
min-height: (@line-height-computed + @content-padding-large); |
|
} |
|
} |
|
|
|
// 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; |
|
} |
|
} |
|
} |
|
|
|
// Scrollspy navigation |
|
&.nav { |
|
> .active > .hidden-ul { |
|
display: block; |
|
} |
|
|
|
// Display children lists |
|
@media (max-width: @grid-float-breakpoint-max) { |
|
> li > .hidden-ul { |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
// Labels and badges |
|
.label, |
|
.badge { |
|
float: right; |
|
} |
|
} |
|
|
|
// Navigation in light sidebar |
|
.sidebar-default { |
|
.navigation { |
|
|
|
// All levels |
|
li { |
|
> a { |
|
color: @navigation-light-color; |
|
|
|
&:hover, |
|
&:focus { |
|
background-color: @navigation-light-hover-bg; |
|
} |
|
} |
|
|
|
// Active state |
|
&.active { |
|
> a { |
|
&, |
|
&:hover, |
|
&:focus { |
|
background-color: @navigation-light-active-bg; |
|
color: @navigation-light-active-color; |
|
} |
|
|
|
// Make all texts dark |
|
> [class*=text-] { |
|
color: @navigation-light-active-color; |
|
} |
|
} |
|
} |
|
|
|
// Disabled state |
|
&.disabled { |
|
> a { |
|
&, |
|
&:hover, |
|
&:focus { |
|
background-color: transparent; |
|
} |
|
} |
|
} |
|
|
|
// Transparent labels |
|
.label-transparent { |
|
color: @text-color; |
|
} |
|
} |
|
|
|
// Child levels |
|
> li { |
|
ul { |
|
background-color: transparent; |
|
} |
|
|
|
// Active state colors |
|
&.active { |
|
> a { |
|
&, |
|
&:hover, |
|
&:focus { |
|
background-color: @navigation-light-active-bg; |
|
color: @navigation-light-active-color; |
|
} |
|
|
|
// Make transparent labels white |
|
.label-transparent { |
|
color: @navigation-light-active-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// |
|
// Navigation options |
|
// |
|
|
|
// Navigation with right icons |
|
.navigation-icons-right { |
|
> li { |
|
> a { |
|
&, |
|
&.has-ul { |
|
padding-right: @navigation-padding-base-horizontal; |
|
} |
|
|
|
// Reverse horizontal margin for icon |
|
> i { |
|
float: right; |
|
margin-right: 0; |
|
margin-left: @content-padding-base; |
|
} |
|
} |
|
|
|
// 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%); |
|
} |
|
|
|
// 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); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 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); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 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 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; |
|
} |
|
} |
|
|
|
// In light sidebar |
|
&.sidebar-default .sidebar-content { |
|
width: @sidebar-base-width - 1; // Exclude 1px border here |
|
} |
|
} |
|
|
|
// 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; |
|
.transition(bottom ease-in-out 0.15s); |
|
|
|
> .sidebar { |
|
max-height: 100%; |
|
overflow-y: auto; |
|
} |
|
} |
|
|
|
// Avoid footer overlap |
|
&.fixed-sidebar-space { |
|
bottom: (@line-height-computed * 4); |
|
|
|
// If footer is navbar |
|
.navbar-bottom & { |
|
bottom: ((@line-height-computed * 2) + @navbar-height); |
|
} |
|
.navbar-bottom-lg & { |
|
bottom: ((@line-height-computed * 2) + @navbar-height-large); |
|
} |
|
.navbar-bottom-sm & { |
|
bottom: ((@line-height-computed * 2) + @navbar-height-small); |
|
} |
|
.navbar-bottom-xs & { |
|
bottom: ((@line-height-computed * 2) + @navbar-height-mini); |
|
} |
|
} |
|
|
|
// Add top spacing if navbar is fixed |
|
.navbar-fixed & { |
|
top: (@navbar-height + (@line-height-computed * 2)); |
|
} |
|
.navbar-fixed-lg & { |
|
top: (@navbar-height-large + (@line-height-computed * 2)); |
|
} |
|
.navbar-fixed-sm & { |
|
top: (@navbar-height-small + (@line-height-computed * 2)); |
|
} |
|
.navbar-fixed-xs & { |
|
top: (@navbar-height-mini + (@line-height-computed * 2)); |
|
} |
|
} |
|
} |
|
|
|
// 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 { |
|
|
|
// Works only in 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; |
|
margin-top: 0; |
|
padding-top: @content-padding-small + ((@line-height-computed - @icon-font-size) / 2) + (@font-size-base - @font-size-mini); |
|
padding-bottom: @content-padding-small + ((@line-height-computed - @icon-font-size) / 2) + (@font-size-base - @font-size-mini); |
|
|
|
|
|
// Stack items |
|
> li { |
|
display: block; |
|
margin-left: 0; |
|
|
|
// Add vertical spacing |
|
+ li { |
|
margin-top: (@content-padding-large / 2); |
|
} |
|
} |
|
} |
|
|
|
// H6 heading |
|
&.h6 { |
|
.icons-list { |
|
padding-top: @content-padding-large + (((@headings-line-height * @font-size-h6) - @icon-font-size) / 2); |
|
padding-bottom: @content-padding-large + (((@headings-line-height * @font-size-h6) - @icon-font-size) / 2); |
|
} |
|
} |
|
|
|
// H5 heading |
|
&.h5 { |
|
.icons-list { |
|
padding-top: @content-padding-large + (((@headings-line-height * @font-size-h5) - @icon-font-size) / 2); |
|
padding-bottom: @content-padding-large + (((@headings-line-height * @font-size-h5) - @icon-font-size) / 2); |
|
} |
|
} |
|
} |
|
|
|
// Main navigation |
|
.navigation { |
|
|
|
// 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-label-bg; |
|
border: 1px solid @navigation-dark-active-border; |
|
padding: (@navigation-padding-base-vertical - 1) @navigation-padding-base-horizontal; |
|
width: @sidebar-base-width; |
|
text-align: left; |
|
color: @navigation-dark-active-label-color; |
|
cursor: pointer; |
|
.border-right-radius(@border-radius-base); |
|
|
|
// Label/badge |
|
.label, |
|
.badge { |
|
background-color: transparent; |
|
border-color: transparent; |
|
color: @navigation-dark-active-label-color; |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
} |
|
|
|
// 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; |
|
cursor: default; |
|
} |
|
} |
|
|
|
// 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; |
|
} |
|
} |
|
|
|
// 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; |
|
} |
|
} |
|
} |
|
|
|
// Navigation sizing in mini sidebar |
|
.sidebar-main { |
|
|
|
// Large |
|
.navigation-lg > li > ul { |
|
top: (@line-height-computed + (@navigation-padding-large-vertical * 2)); |
|
} |
|
|
|
// Small |
|
.navigation-sm > li > ul { |
|
top: (@line-height-computed + (@navigation-padding-small-vertical * 2)); |
|
} |
|
|
|
// Mini |
|
.navigation-xs > li > ul { |
|
top: (@line-height-computed + (@navigation-padding-mini-vertical * 2)); |
|
} |
|
} |
|
|
|
// Inside light sidebar |
|
.sidebar-main { |
|
&.sidebar-default { |
|
.navigation { |
|
> li { |
|
> a > span { |
|
background-color: @navigation-light-active-bg; |
|
border-color: @navigation-light-active-border; |
|
color: @navigation-light-active-label-color; |
|
|
|
// Label/badge |
|
.label, |
|
.badge { |
|
color: @navigation-light-active-label-color; |
|
} |
|
} |
|
|
|
> 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 { |
|
border-width: 0 0 1px 0; |
|
|
|
// Desktop view setup |
|
@media (min-width: @grid-float-breakpoint) { |
|
border-width: 1px; |
|
|
|
> 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; |
|
} |
|
} |
|
|
|
// Opened dropdown link |
|
> .open { |
|
> a { |
|
color: #fff; |
|
} |
|
|
|
&:not(.active) > a { |
|
background-color: fade(#000, 20%); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Tabs in default sidebar |
|
.sidebar-default { |
|
|
|
// Tabs base |
|
.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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Fix dropdown positions because of the border in light sidebar |
|
.nav-justified { |
|
@media (min-width: @grid-float-breakpoint) { |
|
> li:first-child { |
|
.dropdown-menu:not(.dropdown-menu-right) { |
|
left: -1px; |
|
} |
|
} |
|
|
|
> li:last-child { |
|
.dropdown-menu-right { |
|
right: -1px; |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|