]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | //AdminLTE mixins |
2 | //=============== | |
3 | ||
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; | |
7 | //Navbar links | |
8 | .nav > li > a { | |
9 | color: @font-color; | |
10 | } | |
11 | ||
12 | .nav > li > a:hover, | |
13 | .nav > li > a:active, | |
14 | .nav > li > a:focus, | |
15 | .nav .open > a, | |
16 | .nav .open > a:hover, | |
17 | .nav .open > a:focus, | |
18 | .nav > .active > a { | |
19 | background: @hover-bg; | |
20 | color: @hover-color; | |
21 | } | |
22 | ||
23 | //Add color to the sidebar toggle button | |
24 | .sidebar-toggle { | |
25 | color: @font-color; | |
26 | &:hover { | |
27 | color: @hover-color; | |
28 | background: @hover-bg; | |
29 | } | |
30 | } | |
31 | } | |
32 | ||
33 | //Logo color variation | |
34 | .logo-variant(@bg-color; @color: #fff; @border-bottom-color: transparent; @border-bottom-width: 0) { | |
35 | background-color: @bg-color; | |
36 | color: @color; | |
37 | border-bottom: @border-bottom-width solid @border-bottom-color; | |
38 | ||
39 | &:hover { | |
40 | background-color: darken(@bg-color, 1%); | |
41 | } | |
42 | } | |
43 | ||
44 | //Box solid color variantion creator | |
45 | .box-solid-variant(@color; @text-color: #fff) { | |
46 | border: 1px solid @color; | |
47 | > .box-header { | |
48 | color: @text-color; | |
49 | background: @color; | |
50 | background-color: @color; | |
51 | a, | |
52 | .btn { | |
53 | color: @text-color; | |
54 | } | |
55 | } | |
56 | } | |
57 | ||
58 | //Direct Chat Variant | |
59 | .direct-chat-variant(@bg-color; @color: #fff) { | |
60 | .right > .direct-chat-text { | |
61 | background: @bg-color; | |
62 | border-color: @bg-color; | |
63 | color: @color; | |
64 | &:after, | |
65 | &:before { | |
66 | border-left-color: @bg-color; | |
67 | } | |
68 | } | |
69 | } | |
70 | ||
71 | //border radius creator | |
72 | .border-radius(@radius) { | |
73 | border-radius: @radius; | |
74 | } | |
75 | ||
76 | //Different radius each side | |
77 | .border-radius(@top-left; | |
78 | @top-right | |
79 | ; | |
80 | @bottom-left | |
81 | ; | |
82 | @bottom-right | |
83 | ) | |
84 | { | |
85 | border-top-left-radius: @top-left | |
86 | ; | |
87 | border-top-right-radius: @top-right | |
88 | ; | |
89 | border-bottom-right-radius: @bottom-right | |
90 | ; | |
91 | border-bottom-left-radius: @bottom-left | |
92 | ; | |
93 | } | |
94 | ||
95 | //Gradient background | |
96 | .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { | |
97 | background: @color; | |
98 | background: -webkit-gradient(linear, | |
99 | left bottom, | |
100 | left top, | |
101 | color-stop(0, @start), | |
102 | color-stop(1, @stop)); | |
103 | background: -ms-linear-gradient(bottom, | |
104 | @start, | |
105 | @stop); | |
106 | background: -moz-linear-gradient(center bottom, | |
107 | @start 0%, | |
108 | @stop 100%); | |
109 | background: -o-linear-gradient(@stop, | |
110 | @start); | |
111 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); | |
112 | } | |
113 | ||
114 | //Added 2.1.0 | |
115 | //Skins Mixins | |
116 | ||
117 | //Dark Sidebar Mixin | |
118 | .skin-dark-sidebar(@link-hover-border-color) { | |
119 | // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color) | |
120 | .wrapper, | |
121 | .main-sidebar, | |
122 | .left-side { | |
123 | background-color: @sidebar-dark-bg; | |
124 | } | |
125 | //User Panel (resides in the sidebar) | |
126 | .user-panel { | |
127 | > .info, > .info > a { | |
128 | color: #fff; | |
129 | } | |
130 | } | |
131 | //Sidebar Menu. First level links | |
132 | .sidebar-menu > li { | |
133 | //Section Headning | |
134 | &.header { | |
135 | color: lighten(@sidebar-dark-bg, 20%); | |
136 | background: darken(@sidebar-dark-bg, 4%); | |
137 | } | |
138 | //links | |
139 | > a { | |
140 | border-left: 3px solid transparent; | |
141 | } | |
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; | |
147 | } | |
148 | //First Level Submenu | |
149 | > .treeview-menu { | |
150 | margin: 0 1px; | |
151 | background: @sidebar-dark-submenu-bg; | |
152 | } | |
153 | } | |
154 | //All links within the sidebar menu | |
155 | .sidebar a { | |
156 | color: @sidebar-dark-color; | |
157 | &:hover { | |
158 | text-decoration: none; | |
159 | } | |
160 | } | |
161 | //All submenus | |
162 | .treeview-menu { | |
163 | > li { | |
164 | > a { | |
165 | color: @sidebar-dark-submenu-color; | |
166 | } | |
167 | &.active > a, > a:hover { | |
168 | color: @sidebar-dark-submenu-hover-color; | |
169 | } | |
170 | } | |
171 | } | |
172 | //The sidebar search form | |
173 | .sidebar-form { | |
174 | .border-radius(3px); | |
175 | border: 1px solid lighten(@sidebar-dark-bg, 10%); | |
176 | margin: 10px 10px; | |
177 | input[type="text"], .btn { | |
178 | box-shadow: none; | |
179 | background-color: lighten(@sidebar-dark-bg, 10%); | |
180 | border: 1px solid transparent; | |
181 | height: 35px; | |
182 | //.transition(all @transition-speed @transition-fn); | |
183 | } | |
184 | input[type="text"] { | |
185 | color: #666; | |
186 | .border-radius(2px, 0, 2px, 0); | |
187 | &:focus, | |
188 | &:focus + .input-group-btn .btn { | |
189 | background-color: #fff; | |
190 | color: #666; | |
191 | } | |
192 | &:focus + .input-group-btn .btn { | |
193 | border-left-color: #fff; | |
194 | ||
195 | } | |
196 | } | |
197 | .btn { | |
198 | color: #999; | |
199 | .border-radius(0, 2px, 0, 2px); | |
200 | } | |
201 | } | |
202 | } | |
203 | ||
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) | |
207 | .wrapper, | |
208 | .main-sidebar, | |
209 | .left-side { | |
210 | background-color: @sidebar-light-bg; | |
211 | } | |
212 | .content-wrapper, | |
213 | .main-footer { | |
214 | border-left: 1px solid @gray; | |
215 | } | |
216 | //User Panel (resides in the sidebar) | |
217 | .user-panel { | |
218 | > .info, > .info > a { | |
219 | color: @sidebar-light-color; | |
220 | } | |
221 | } | |
222 | //Sidebar Menu. First level links | |
223 | .sidebar-menu > li { | |
224 | .transition(border-left-color .3s ease); | |
225 | //border-left: 3px solid transparent; | |
226 | //Section Headning | |
227 | &.header { | |
228 | color: lighten(@sidebar-light-color, 25%); | |
229 | background: @sidebar-light-bg; | |
230 | } | |
231 | //links | |
232 | > a { | |
233 | border-left: 3px solid transparent; | |
234 | font-weight: 600; | |
235 | } | |
236 | //Hover and active states | |
237 | &:hover > a, | |
238 | &.active > a { | |
239 | color: @sidebar-light-hover-color; | |
240 | background: @sidebar-light-hover-bg; | |
241 | } | |
242 | &:hover > a { | |
243 | ||
244 | } | |
245 | &.active { | |
246 | border-left-color: @icon-active-color; | |
247 | > a { | |
248 | font-weight: 600; | |
249 | } | |
250 | } | |
251 | //First Level Submenu | |
252 | > .treeview-menu { | |
253 | background: @sidebar-light-submenu-bg; | |
254 | } | |
255 | } | |
256 | //All links within the sidebar menu | |
257 | .sidebar a { | |
258 | color: @sidebar-light-color; | |
259 | &:hover { | |
260 | text-decoration: none; | |
261 | } | |
262 | } | |
263 | //All submenus | |
264 | .treeview-menu { | |
265 | > li { | |
266 | > a { | |
267 | color: @sidebar-light-submenu-color; | |
268 | } | |
269 | &.active > a, | |
270 | > a:hover { | |
271 | color: @sidebar-light-submenu-hover-color; | |
272 | } | |
273 | &.active > a { | |
274 | font-weight: 600; | |
275 | } | |
276 | } | |
277 | } | |
278 | //The sidebar search form | |
279 | .sidebar-form { | |
280 | .border-radius(3px); | |
281 | border: 1px solid @gray; //darken(@sidebar-light-bg, 5%); | |
282 | margin: 10px 10px; | |
283 | input[type="text"], | |
284 | .btn { | |
285 | box-shadow: none; | |
286 | background-color: #fff; //darken(@sidebar-light-bg, 3%); | |
287 | border: 1px solid transparent; | |
288 | height: 35px; | |
289 | //.transition(all @transition-speed @transition-fn); | |
290 | } | |
291 | input[type="text"] { | |
292 | color: #666; | |
293 | .border-radius(2px, 0, 2px, 0); | |
294 | &:focus, | |
295 | &:focus + .input-group-btn .btn { | |
296 | background-color: #fff; | |
297 | color: #666; | |
298 | } | |
299 | &:focus + .input-group-btn .btn { | |
300 | border-left-color: #fff; | |
301 | } | |
302 | } | |
303 | .btn { | |
304 | color: #999; | |
305 | .border-radius(0, 2px, 0, 2px); | |
306 | } | |
307 | } | |
308 | @media (min-width: @screen-sm-min) { | |
309 | &.sidebar-mini.sidebar-collapse { | |
310 | .sidebar-menu > li > .treeview-menu { | |
311 | border-left: 1px solid @gray; | |
312 | } | |
313 | } | |
314 | } | |
315 | } |