]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Component: Control sidebar. By default, this is the right sidebar. | |
3 | */ | |
4 | //The sidebar's background control class | |
5 | //This is a hack to make the background visible while scrolling | |
6 | .control-sidebar-bg { | |
7 | position: fixed; | |
8 | z-index: 1000; | |
9 | bottom: 0; | |
10 | } | |
11 | ||
12 | //Transitions | |
13 | .control-sidebar-bg, | |
14 | .control-sidebar { | |
15 | top: 0; | |
16 | right: -@control-sidebar-width; | |
17 | width: @control-sidebar-width; | |
18 | .transition(right @transition-speed ease-in-out); | |
19 | } | |
20 | ||
21 | //The sidebar | |
22 | .control-sidebar { | |
23 | position: absolute; | |
24 | padding-top: @navbar-height; | |
25 | z-index: 1010; | |
26 | //Fix position after header collapse | |
27 | @media (max-width: @screen-sm) { | |
28 | padding-top: @navbar-height + 50; | |
29 | } | |
30 | //Tab panes | |
31 | > .tab-content { | |
32 | padding: 10px 15px; | |
33 | } | |
34 | //Open state with slide over content effect | |
35 | &.control-sidebar-open { | |
36 | &, | |
37 | + .control-sidebar-bg { | |
38 | right: 0; | |
39 | } | |
40 | } | |
41 | } | |
42 | ||
43 | //Open without slide over content | |
44 | .control-sidebar-open { | |
45 | .control-sidebar-bg, | |
46 | .control-sidebar { | |
47 | right: 0; | |
48 | } | |
49 | @media (min-width: @screen-sm) { | |
50 | .content-wrapper, | |
51 | .right-side, | |
52 | .main-footer { | |
53 | margin-right: @control-sidebar-width; | |
54 | } | |
55 | } | |
56 | } | |
57 | ||
58 | //Control sidebar tabs | |
59 | .nav-tabs.control-sidebar-tabs { | |
60 | > li { | |
61 | &:first-of-type > a { | |
62 | &, | |
63 | &:hover, | |
64 | &:focus { | |
65 | border-left-width: 0; | |
66 | } | |
67 | } | |
68 | > a { | |
69 | .border-radius(0); | |
70 | ||
71 | //Hover and active states | |
72 | &, | |
73 | &:hover { | |
74 | border-top: none; | |
75 | border-right: none; | |
76 | border-left: 1px solid transparent; | |
77 | border-bottom: 1px solid transparent; | |
78 | } | |
79 | .icon { | |
80 | font-size: 16px; | |
81 | } | |
82 | } | |
83 | //Active state | |
84 | &.active { | |
85 | > a { | |
86 | &, | |
87 | &:hover, | |
88 | &:focus, | |
89 | &:active { | |
90 | border-top: none; | |
91 | border-right: none; | |
92 | border-bottom: none; | |
93 | } | |
94 | } | |
95 | } | |
96 | } | |
97 | //Remove responsiveness on small screens | |
98 | @media (max-width: @screen-sm) { | |
99 | display: table; | |
100 | > li { | |
101 | display: table-cell; | |
102 | } | |
103 | } | |
104 | } | |
105 | ||
106 | //Headings in the sidebar content | |
107 | .control-sidebar-heading { | |
108 | font-weight: 400; | |
109 | font-size: 16px; | |
110 | padding: 10px 0; | |
111 | margin-bottom: 10px; | |
112 | } | |
113 | ||
114 | //Subheadings | |
115 | .control-sidebar-subheading { | |
116 | display: block; | |
117 | font-weight: 400; | |
118 | font-size: 14px; | |
119 | } | |
120 | ||
121 | //Control Sidebar Menu | |
122 | .control-sidebar-menu { | |
123 | list-style: none; | |
124 | padding: 0; | |
125 | margin: 0 -15px; | |
126 | > li > a { | |
127 | .clearfix(); | |
128 | display: block; | |
129 | padding: 10px 15px; | |
130 | > .control-sidebar-subheading { | |
131 | margin-top: 0; | |
132 | } | |
133 | } | |
134 | .menu-icon { | |
135 | float: left; | |
136 | width: 35px; | |
137 | height: 35px; | |
138 | border-radius: 50%; | |
139 | text-align: center; | |
140 | line-height: 35px; | |
141 | } | |
142 | .menu-info { | |
143 | margin-left: 45px; | |
144 | margin-top: 3px; | |
145 | > .control-sidebar-subheading { | |
146 | margin: 0; | |
147 | } | |
148 | > p { | |
149 | margin: 0; | |
150 | font-size: 11px; | |
151 | } | |
152 | } | |
153 | .progress { | |
154 | margin: 0; | |
155 | } | |
156 | } | |
157 | ||
158 | //Dark skin | |
159 | .control-sidebar-dark { | |
160 | color: @sidebar-dark-color; | |
161 | // Background | |
162 | &, | |
163 | + .control-sidebar-bg { | |
164 | background: @sidebar-dark-bg; | |
165 | } | |
166 | // Sidebar tabs | |
167 | .nav-tabs.control-sidebar-tabs { | |
168 | border-bottom: darken(@sidebar-dark-bg, 3%); | |
169 | > li { | |
170 | > a { | |
171 | background: darken(@sidebar-dark-bg, 5%); | |
172 | color: @sidebar-dark-color; | |
173 | //Hover and active states | |
174 | &, | |
175 | &:hover, | |
176 | &:focus { | |
177 | border-left-color: darken(@sidebar-dark-bg, 7%); | |
178 | border-bottom-color: darken(@sidebar-dark-bg, 7%); | |
179 | } | |
180 | &:hover, | |
181 | &:focus, | |
182 | &:active { | |
183 | background: darken(@sidebar-dark-bg, 3%); | |
184 | } | |
185 | &:hover { | |
186 | color: #fff; | |
187 | } | |
188 | } | |
189 | //Active state | |
190 | &.active { | |
191 | > a { | |
192 | &, | |
193 | &:hover, | |
194 | &:focus, | |
195 | &:active { | |
196 | background: @sidebar-dark-bg; | |
197 | color: #fff; | |
198 | } | |
199 | } | |
200 | } | |
201 | } | |
202 | } | |
203 | //Heading & subheading | |
204 | .control-sidebar-heading, | |
205 | .control-sidebar-subheading { | |
206 | color: #fff; | |
207 | } | |
208 | //Sidebar list | |
209 | .control-sidebar-menu { | |
210 | > li { | |
211 | > a { | |
212 | &:hover { | |
213 | background: @sidebar-dark-hover-bg; | |
214 | } | |
215 | .menu-info { | |
216 | > p { | |
217 | color: @sidebar-dark-color; | |
218 | } | |
219 | } | |
220 | } | |
221 | } | |
222 | } | |
223 | } | |
224 | ||
225 | //Light skin | |
226 | .control-sidebar-light { | |
227 | color: lighten(@sidebar-light-color, 10%); | |
228 | // Background | |
229 | &, | |
230 | + .control-sidebar-bg { | |
231 | background: @sidebar-light-bg; | |
232 | border-left: 1px solid @gray; | |
233 | } | |
234 | // Sidebar tabs | |
235 | .nav-tabs.control-sidebar-tabs { | |
236 | border-bottom: @gray; | |
237 | > li { | |
238 | > a { | |
239 | background: darken(@sidebar-light-bg, 5%); | |
240 | color: @sidebar-light-color; | |
241 | //Hover and active states | |
242 | &, | |
243 | &:hover, | |
244 | &:focus { | |
245 | border-left-color: @gray; | |
246 | border-bottom-color: @gray; | |
247 | } | |
248 | &:hover, | |
249 | &:focus, | |
250 | &:active { | |
251 | background: darken(@sidebar-light-bg, 3%); | |
252 | } | |
253 | } | |
254 | //Active state | |
255 | &.active { | |
256 | > a { | |
257 | &, | |
258 | &:hover, | |
259 | &:focus, | |
260 | &:active { | |
261 | background: @sidebar-light-bg; | |
262 | color: #111; | |
263 | } | |
264 | } | |
265 | } | |
266 | } | |
267 | } | |
268 | //Heading & subheading | |
269 | .control-sidebar-heading, | |
270 | .control-sidebar-subheading { | |
271 | color: #111; | |
272 | } | |
273 | //Sidebar list | |
274 | .control-sidebar-menu { | |
275 | margin-left: -14px; | |
276 | > li { | |
277 | > a { | |
278 | &:hover { | |
279 | background: @sidebar-light-hover-bg; | |
280 | } | |
281 | .menu-info { | |
282 | > p { | |
283 | color: lighten(@sidebar-light-color, 10%); | |
284 | } | |
285 | } | |
286 | } | |
287 | } | |
288 | } | |
289 | } |