4 //Changes the color and the hovering properties of the navbar
5 .navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
6 background-color: @color;
19 background: @hover-bg;
23 //Add color to the sidebar toggle button
28 background: @hover-bg;
33 //Logo color variation
34 .logo-variant(@bg-color; @color: #fff; @border-bottom-color: transparent; @border-bottom-width: 0) {
35 background-color: @bg-color;
37 border-bottom: @border-bottom-width solid @border-bottom-color;
40 background-color: darken(@bg-color, 1%);
44 //Box solid color variantion creator
45 .box-solid-variant(@color; @text-color: #fff) {
46 border: 1px solid @color;
50 background-color: @color;
59 .direct-chat-variant(@bg-color; @color: #fff) {
60 .right > .direct-chat-text {
61 background: @bg-color;
62 border-color: @bg-color;
66 border-left-color: @bg-color;
71 //border radius creator
72 .border-radius(@radius) {
73 border-radius: @radius;
76 //Different radius each side
77 .border-radius(@top-left;
85 border-top-left-radius: @top-left
87 border-top-right-radius: @top-right
89 border-bottom-right-radius: @bottom-right
91 border-bottom-left-radius: @bottom-left
96 .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
98 background: -webkit-gradient(linear,
101 color-stop(0, @start),
102 color-stop(1, @stop));
103 background: -ms-linear-gradient(bottom,
106 background: -moz-linear-gradient(center bottom,
109 background: -o-linear-gradient(@stop,
111 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
118 .skin-dark-sidebar(@link-hover-border-color) {
119 // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
123 background-color: @sidebar-dark-bg;
125 //User Panel (resides in the sidebar)
127 > .info, > .info > a {
131 //Sidebar Menu. First level links
135 color: lighten(@sidebar-dark-bg, 20%);
136 background: darken(@sidebar-dark-bg, 4%);
140 border-left: 3px solid transparent;
142 //Hover and active states
143 &:hover > a, &.active > a {
144 color: @sidebar-dark-hover-color;
145 background: @sidebar-dark-hover-bg;
146 border-left-color: @link-hover-border-color;
148 //First Level Submenu
151 background: @sidebar-dark-submenu-bg;
154 //All links within the sidebar menu
156 color: @sidebar-dark-color;
158 text-decoration: none;
165 color: @sidebar-dark-submenu-color;
167 &.active > a, > a:hover {
168 color: @sidebar-dark-submenu-hover-color;
172 //The sidebar search form
175 border: 1px solid lighten(@sidebar-dark-bg, 10%);
177 input[type="text"], .btn {
179 background-color: lighten(@sidebar-dark-bg, 10%);
180 border: 1px solid transparent;
182 //.transition(all @transition-speed @transition-fn);
186 .border-radius(2px, 0, 2px, 0);
188 &:focus + .input-group-btn .btn {
189 background-color: #fff;
192 &:focus + .input-group-btn .btn {
193 border-left-color: #fff;
199 .border-radius(0, 2px, 0, 2px);
204 //Light Sidebar Mixin
205 .skin-light-sidebar(@icon-active-color) {
206 // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
210 background-color: @sidebar-light-bg;
214 border-left: 1px solid @gray;
216 //User Panel (resides in the sidebar)
218 > .info, > .info > a {
219 color: @sidebar-light-color;
222 //Sidebar Menu. First level links
224 .transition(border-left-color .3s ease);
225 //border-left: 3px solid transparent;
228 color: lighten(@sidebar-light-color, 25%);
229 background: @sidebar-light-bg;
233 border-left: 3px solid transparent;
236 //Hover and active states
239 color: @sidebar-light-hover-color;
240 background: @sidebar-light-hover-bg;
246 border-left-color: @icon-active-color;
251 //First Level Submenu
253 background: @sidebar-light-submenu-bg;
256 //All links within the sidebar menu
258 color: @sidebar-light-color;
260 text-decoration: none;
267 color: @sidebar-light-submenu-color;
271 color: @sidebar-light-submenu-hover-color;
278 //The sidebar search form
281 border: 1px solid @gray; //darken(@sidebar-light-bg, 5%);
286 background-color: #fff; //darken(@sidebar-light-bg, 3%);
287 border: 1px solid transparent;
289 //.transition(all @transition-speed @transition-fn);
293 .border-radius(2px, 0, 2px, 0);
295 &:focus + .input-group-btn .btn {
296 background-color: #fff;
299 &:focus + .input-group-btn .btn {
300 border-left-color: #fff;
305 .border-radius(0, 2px, 0, 2px);
308 @media (min-width: @screen-sm-min) {
309 &.sidebar-mini.sidebar-collapse {
310 .sidebar-menu > li > .treeview-menu {
311 border-left: 1px solid @gray;