2 * Component: Control sidebar. By default, this is the right sidebar.
4 //The sidebar's background control class
5 //This is a hack to make the background visible while scrolling
16 right: -@control-sidebar-width;
17 width: @control-sidebar-width;
18 .transition(right @transition-speed ease-in-out);
24 padding-top: @navbar-height;
26 //Fix position after header collapse
27 @media (max-width: @screen-sm) {
28 padding-top: @navbar-height + 50;
34 //Open state with slide over content effect
35 &.control-sidebar-open {
37 + .control-sidebar-bg {
43 //Open without slide over content
44 .control-sidebar-open {
49 @media (min-width: @screen-sm) {
53 margin-right: @control-sidebar-width;
58 //Control sidebar tabs
59 .nav-tabs.control-sidebar-tabs {
71 //Hover and active states
76 border-left: 1px solid transparent;
77 border-bottom: 1px solid transparent;
97 //Remove responsiveness on small screens
98 @media (max-width: @screen-sm) {
106 //Headings in the sidebar content
107 .control-sidebar-heading {
115 .control-sidebar-subheading {
121 //Control Sidebar Menu
122 .control-sidebar-menu {
130 > .control-sidebar-subheading {
145 > .control-sidebar-subheading {
159 .control-sidebar-dark {
160 color: @sidebar-dark-color;
163 + .control-sidebar-bg {
164 background: @sidebar-dark-bg;
167 .nav-tabs.control-sidebar-tabs {
168 border-bottom: darken(@sidebar-dark-bg, 3%);
171 background: darken(@sidebar-dark-bg, 5%);
172 color: @sidebar-dark-color;
173 //Hover and active states
177 border-left-color: darken(@sidebar-dark-bg, 7%);
178 border-bottom-color: darken(@sidebar-dark-bg, 7%);
183 background: darken(@sidebar-dark-bg, 3%);
196 background: @sidebar-dark-bg;
203 //Heading & subheading
204 .control-sidebar-heading,
205 .control-sidebar-subheading {
209 .control-sidebar-menu {
213 background: @sidebar-dark-hover-bg;
217 color: @sidebar-dark-color;
226 .control-sidebar-light {
227 color: lighten(@sidebar-light-color, 10%);
230 + .control-sidebar-bg {
231 background: @sidebar-light-bg;
232 border-left: 1px solid @gray;
235 .nav-tabs.control-sidebar-tabs {
236 border-bottom: @gray;
239 background: darken(@sidebar-light-bg, 5%);
240 color: @sidebar-light-color;
241 //Hover and active states
245 border-left-color: @gray;
246 border-bottom-color: @gray;
251 background: darken(@sidebar-light-bg, 3%);
261 background: @sidebar-light-bg;
268 //Heading & subheading
269 .control-sidebar-heading,
270 .control-sidebar-subheading {
274 .control-sidebar-menu {
279 background: @sidebar-light-hover-bg;
283 color: lighten(@sidebar-light-color, 10%);