1 | /**
|
---|
2 | * @class Ext.Panel
|
---|
3 | * Used to create the base structure of an Ext.Panel
|
---|
4 | */
|
---|
5 | @mixin extjs-panel {
|
---|
6 | .#{$prefix}panel,
|
---|
7 | .#{$prefix}plain {
|
---|
8 | overflow: hidden;
|
---|
9 | position: relative;
|
---|
10 | }
|
---|
11 |
|
---|
12 | @if $include-ie {
|
---|
13 | // Workaround for disappearing right edge in IE6
|
---|
14 | // @tag iezoomhack
|
---|
15 | // .#{$prefix}ie {
|
---|
16 | // .#{$prefix}panel-header,
|
---|
17 | // .#{$prefix}panel-header-tl,
|
---|
18 | // .#{$prefix}panel-header-tc,
|
---|
19 | // .#{$prefix}panel-header-tr,
|
---|
20 | // .#{$prefix}panel-header-ml,
|
---|
21 | // .#{$prefix}panel-header-mc,
|
---|
22 | // .#{$prefix}panel-header-mr,
|
---|
23 | // .#{$prefix}panel-header-bl,
|
---|
24 | // .#{$prefix}panel-header-bc,
|
---|
25 | // .#{$prefix}panel-header-br {
|
---|
26 | // zoom: 1;
|
---|
27 | // }
|
---|
28 | // }
|
---|
29 | // Fix for IE8 clipping. EXTJSIV-1553
|
---|
30 | .#{$prefix}ie8 {
|
---|
31 | td.#{$prefix}frame-mc {
|
---|
32 | vertical-align: top;
|
---|
33 | }
|
---|
34 | }
|
---|
35 | }
|
---|
36 |
|
---|
37 | .#{$prefix}panel {
|
---|
38 | @include border-bottom-radius($panel-body-radius);
|
---|
39 | border: 0 solid $stroke-color;
|
---|
40 |
|
---|
41 | background-color: $content-color;
|
---|
42 | @include border-radius($panel-border-radius);
|
---|
43 | @include background-clip(padding-box); // Used to improve jaggies of overlapping border-radius
|
---|
44 | }
|
---|
45 |
|
---|
46 | .#{$prefix}panel-default.#{$prefix}tab-panel {
|
---|
47 | @include border-radius(0);
|
---|
48 | }
|
---|
49 |
|
---|
50 | //panel header
|
---|
51 | .#{$prefix}panel-header {
|
---|
52 | padding: $panel-header-padding;
|
---|
53 | border: 0 solid $neutral-color;
|
---|
54 | border-bottom-width: 0;
|
---|
55 |
|
---|
56 | .#{$prefix}panel-header-body,
|
---|
57 | .#{$prefix}panel-header-body > .x-box-inner {
|
---|
58 | overflow: visible;
|
---|
59 | }
|
---|
60 | }
|
---|
61 |
|
---|
62 | .#{$prefix}panel-header-icon,
|
---|
63 | .#{$prefix}window-header-icon {
|
---|
64 | width:16px;
|
---|
65 | height:16px;
|
---|
66 | background-repeat:no-repeat;
|
---|
67 | background-position:0 0;
|
---|
68 | vertical-align:middle;
|
---|
69 | margin-right:4px;
|
---|
70 | margin-top:-1px;
|
---|
71 | margin-bottom:-1px;
|
---|
72 | }
|
---|
73 |
|
---|
74 | .#{$prefix}panel-header-draggable,
|
---|
75 | .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
|
---|
76 | .#{$prefix}window-header-draggable,
|
---|
77 | .#{$prefix}window-header-draggable .#{$prefix}window-header-text{
|
---|
78 | cursor: move;
|
---|
79 | }
|
---|
80 |
|
---|
81 | // A ghost is just a Panel. The only extra it needs is opacity.
|
---|
82 | // TODO: Make opacity a variable
|
---|
83 | .#{$prefix}panel-ghost, .#{$prefix}window-ghost {
|
---|
84 | @include opacity(0.65);
|
---|
85 | cursor: move;
|
---|
86 | }
|
---|
87 |
|
---|
88 | .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
|
---|
89 | .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
|
---|
90 | width: 100%;
|
---|
91 | }
|
---|
92 | }
|
---|
93 |
|
---|
94 | .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
|
---|
95 | .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
|
---|
96 | height: 100%;
|
---|
97 | }
|
---|
98 | }
|
---|
99 |
|
---|
100 | .#{$prefix}panel-header-text-container {
|
---|
101 | @extend .overflow-ellipsis;
|
---|
102 | }
|
---|
103 |
|
---|
104 | .#{$prefix}panel-header-text {
|
---|
105 | @extend .no-select;
|
---|
106 | }
|
---|
107 |
|
---|
108 | .#{$prefix}panel-header-left,
|
---|
109 | .#{$prefix}panel-header-right {
|
---|
110 | .#{$prefix}vml-base {
|
---|
111 | left: -3px !important;
|
---|
112 | }
|
---|
113 | }
|
---|
114 |
|
---|
115 | //panel body
|
---|
116 | .#{$prefix}panel-body {
|
---|
117 | overflow: hidden;
|
---|
118 | position: relative;
|
---|
119 | @include background-clip(padding-box);
|
---|
120 | }
|
---|
121 |
|
---|
122 | // Framed panel
|
---|
123 |
|
---|
124 | .#{$prefix}panel-default-framed {
|
---|
125 | padding: $panel-frame-padding;
|
---|
126 | .#{$prefix}panel-body {
|
---|
127 | @include border-radius($panel-body-radius);
|
---|
128 | border: 0;
|
---|
129 | }
|
---|
130 | }
|
---|
131 |
|
---|
132 | .#{$prefix}panel-hasheader-top,
|
---|
133 | .#{$prefix}window-hasheader-top {
|
---|
134 | padding-top: 0 !important;
|
---|
135 | }
|
---|
136 |
|
---|
137 | .#{$prefix}panel-hasheader-bottom,
|
---|
138 | .#{$prefix}window-hasheader-bottom {
|
---|
139 | padding-bottom: 0 !important;
|
---|
140 | }
|
---|
141 |
|
---|
142 | .#{$prefix}panel-hasheader-left,
|
---|
143 | .#{$prefix}window-hasheader-left {
|
---|
144 | padding-left: 0 !important;
|
---|
145 | }
|
---|
146 |
|
---|
147 | .#{$prefix}panel-hasheader-right,
|
---|
148 | .#{$prefix}window-hasheader-right {
|
---|
149 | padding-right: 0 !important;
|
---|
150 | }
|
---|
151 |
|
---|
152 | // Vertical/horizontal headers
|
---|
153 |
|
---|
154 | .#{$prefix}panel-header-vertical .#{$prefix}surface {
|
---|
155 | margin-top: 2px;
|
---|
156 | }
|
---|
157 |
|
---|
158 | .#{$prefix}panel-header-plain-vertical .#{$prefix}surface {
|
---|
159 | margin-top: 0;
|
---|
160 | }
|
---|
161 |
|
---|
162 | // .#{$prefix}panel-collapsed {
|
---|
163 | // .#{$prefix}panel-header-collapsed-border-top {
|
---|
164 | // border-bottom-width: 1px !important;
|
---|
165 | // }
|
---|
166 | // .#{$prefix}panel-header-collapsed-border-right {
|
---|
167 | // border-left-width: 1px !important;
|
---|
168 | // }
|
---|
169 | // .#{$prefix}panel-header-collapsed-border-bottom {
|
---|
170 | // border-top-width: 1px !important;
|
---|
171 | // }
|
---|
172 | // .#{$prefix}panel-header-collapsed-border-left {
|
---|
173 | // border-right-width: 1px !important;
|
---|
174 | // }
|
---|
175 | // }
|
---|
176 |
|
---|
177 | @if not $supports-gradients or $compile-all {
|
---|
178 | .#{$prefix}nlg .#{$prefix}panel-header-vertical {
|
---|
179 | .#{$prefix}frame-mc {
|
---|
180 | background-repeat: repeat-y;
|
---|
181 | }
|
---|
182 | }
|
---|
183 | }
|
---|
184 |
|
---|
185 | @if $include-panel-uis == true {
|
---|
186 | @include extjs-panel-ui(
|
---|
187 | 'default',
|
---|
188 |
|
---|
189 | $ui-base-color: $panel-base-color,
|
---|
190 |
|
---|
191 | $ui-border-width: $panel-border-width,
|
---|
192 | $ui-border-color: $panel-border-color,
|
---|
193 | $ui-border-radius: $panel-border-radius,
|
---|
194 |
|
---|
195 | $ui-header-color: $panel-header-color,
|
---|
196 | $ui-header-font-size: $panel-header-font-size,
|
---|
197 | $ui-header-font-weight: $panel-header-font-weight,
|
---|
198 | $ui-header-border-color: $panel-header-border-color,
|
---|
199 | $ui-header-border-width: $panel-header-border-width,
|
---|
200 | $ui-header-background-color: $panel-header-background-color,
|
---|
201 | $ui-header-background-gradient: $panel-header-background-gradient,
|
---|
202 |
|
---|
203 | $ui-body-color: $panel-body-color,
|
---|
204 | $ui-body-border-width: $panel-body-border-width,
|
---|
205 | $ui-body-border-color: $panel-body-border-color,
|
---|
206 | $ui-body-background-color: $panel-body-background-color
|
---|
207 | );
|
---|
208 |
|
---|
209 | @include extjs-panel-ui(
|
---|
210 | 'default-framed',
|
---|
211 |
|
---|
212 | $ui-base-color: $panel-base-color,
|
---|
213 |
|
---|
214 | $ui-border-width: $panel-frame-border-width,
|
---|
215 | $ui-border-color: $panel-frame-border-color,
|
---|
216 | $ui-border-radius: $panel-frame-border-radius,
|
---|
217 |
|
---|
218 | $ui-header-color: $panel-header-color,
|
---|
219 | $ui-header-font-size: $panel-header-font-size,
|
---|
220 | $ui-header-font-weight: $panel-header-font-weight,
|
---|
221 | $ui-header-border-color: $panel-frame-border-color,
|
---|
222 | $ui-header-background-color: $panel-header-background-color,
|
---|
223 | $ui-header-background-gradient: $panel-header-background-gradient,
|
---|
224 |
|
---|
225 | $ui-body-color: $panel-frame-body-color,
|
---|
226 | $ui-body-border-color: $panel-body-border-color,
|
---|
227 | $ui-body-background-color: $panel-body-background-color
|
---|
228 | );
|
---|
229 | }
|
---|
230 |
|
---|
231 | .#{$prefix}panel-header-plain,
|
---|
232 | .#{$prefix}panel-body-plain {
|
---|
233 | border: 0;
|
---|
234 | padding: 0;
|
---|
235 | }
|
---|
236 | }
|
---|
237 |
|
---|
238 | /**
|
---|
239 | * @class Ext.Panel
|
---|
240 | * Used to create a visual theme for an Ext.Panel
|
---|
241 | */
|
---|
242 | @mixin extjs-panel-ui(
|
---|
243 | $ui-label,
|
---|
244 |
|
---|
245 | $ui-base-color: null,
|
---|
246 |
|
---|
247 | $ui-border-color: null,
|
---|
248 | $ui-border-radius: null,
|
---|
249 | $ui-border-width: 0,
|
---|
250 |
|
---|
251 | $ui-header-color: null,
|
---|
252 | $ui-header-font-family: $panel-header-font-family,
|
---|
253 | $ui-header-font-size: $panel-header-font-size,
|
---|
254 | $ui-header-font-weight: $panel-header-font-weight,
|
---|
255 | $ui-header-border-width: $panel-header-border-width,
|
---|
256 | $ui-header-border-color: $ui-border-color,
|
---|
257 | $ui-header-background-color: null,
|
---|
258 | $ui-header-background-gradient: matte,
|
---|
259 | $ui-header-inner-border-color: null,
|
---|
260 |
|
---|
261 | $ui-body-color: null,
|
---|
262 | $ui-body-border-color: null,
|
---|
263 | $ui-body-border-width: null,
|
---|
264 | $ui-body-border-style: solid,
|
---|
265 | $ui-body-background-color: null,
|
---|
266 | $ui-body-font-size: null,
|
---|
267 | $ui-body-font-weight: null
|
---|
268 | ){
|
---|
269 | @if $ui-base-color != null {
|
---|
270 | @if $ui-border-color == null { $ui-border-color: $ui-base-color; }
|
---|
271 |
|
---|
272 | @if $ui-header-color == null { $ui-header-color: #fff; }
|
---|
273 | @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); }
|
---|
274 | }
|
---|
275 |
|
---|
276 | @if $ui-header-inner-border-color == null and $ui-header-background-color != null {
|
---|
277 | $ui-header-inner-border-color: lighten($ui-header-background-color, 10);
|
---|
278 | }
|
---|
279 |
|
---|
280 | .#{$prefix}panel-#{$ui-label} {
|
---|
281 | @if $ui-border-color != null { border-color: $ui-border-color; }
|
---|
282 | background: $ui-base-color;
|
---|
283 |
|
---|
284 | @if $ui-border-radius != null {
|
---|
285 | @include border-radius($ui-border-radius);
|
---|
286 | }
|
---|
287 |
|
---|
288 | @if $ui-header-border-width != null {
|
---|
289 | .#{$prefix}panel-header-collapsed-border-top {
|
---|
290 | border-bottom-width: $ui-header-border-width !important;
|
---|
291 | }
|
---|
292 | .#{$prefix}panel-header-collapsed-border-right {
|
---|
293 | border-left-width: $ui-header-border-width !important;
|
---|
294 | }
|
---|
295 | .#{$prefix}panel-header-collapsed-border-bottom {
|
---|
296 | border-top-width: $ui-header-border-width !important;
|
---|
297 | }
|
---|
298 | .#{$prefix}panel-header-collapsed-border-left {
|
---|
299 | border-right-width: $ui-header-border-width !important;
|
---|
300 | }
|
---|
301 | }
|
---|
302 | }
|
---|
303 |
|
---|
304 | // header
|
---|
305 | .#{$prefix}panel-header-#{$ui-label} {
|
---|
306 | .#{$prefix}panel-header-text-container {
|
---|
307 | @if $ui-header-font-size != null { font-size: $ui-header-font-size; }
|
---|
308 | // @if $include-panel-highlights {
|
---|
309 | // @include inset-by-background($panel-header-background-color);
|
---|
310 | // }
|
---|
311 | line-height: 1.2em;
|
---|
312 | @extend .bigtext;
|
---|
313 | }
|
---|
314 |
|
---|
315 | @if $ui-header-border-color != null {
|
---|
316 | border-color: $ui-header-border-color;
|
---|
317 | border-width: $panel-border-width;
|
---|
318 | border-style: $panel-header-border-style;
|
---|
319 | }
|
---|
320 |
|
---|
321 | @if $ui-header-border-width != null {
|
---|
322 | border-width: $ui-header-border-width;
|
---|
323 | }
|
---|
324 |
|
---|
325 | @if $supports-gradients or $compile-all {
|
---|
326 | // @if $ui-header-background-color != null { @include background-gradient(linear-gradient(top, $ui-header-background-color, $ui-header-background-color)); }
|
---|
327 | @if $ui-header-background-color != null { @include background-image(linear-gradient(top, lighten($ui-header-background-color, 5%), $ui-header-background-color 100%)); }
|
---|
328 |
|
---|
329 | @if $panel-header-inner-border and $ui-header-inner-border-color != null {
|
---|
330 | // @include inner-border(
|
---|
331 | // $width: $panel-header-inner-border-width,
|
---|
332 | // $color: $ui-header-inner-border-color
|
---|
333 | // );
|
---|
334 | }
|
---|
335 | }
|
---|
336 | }
|
---|
337 |
|
---|
338 | // header background images
|
---|
339 | // @todo add these back in
|
---|
340 | // @if $ui-header-background-color != null and $ui-header-background-gradient != null {
|
---|
341 | // @if not $supports-gradients or $compile-all {
|
---|
342 | // .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top {
|
---|
343 | // background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
|
---|
344 | // }
|
---|
345 |
|
---|
346 | // .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
347 | // background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
|
---|
348 | // }
|
---|
349 |
|
---|
350 | // .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
|
---|
351 | // background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
|
---|
352 | // }
|
---|
353 |
|
---|
354 | // .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
355 | // background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
|
---|
356 | // }
|
---|
357 | // }
|
---|
358 | // }
|
---|
359 |
|
---|
360 | // header text
|
---|
361 | .#{$prefix}panel-header-#{$ui-label} .#{$prefix}panel-header-text-container {
|
---|
362 | @if $ui-header-color != null { color: $ui-header-color; }
|
---|
363 | @if $ui-header-font-size != null { font-size: $ui-header-font-size; }
|
---|
364 | @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
|
---|
365 | @if $ui-header-font-family != null { font-family: $ui-header-font-family; }
|
---|
366 | }
|
---|
367 |
|
---|
368 | // body
|
---|
369 | .#{$prefix}panel-body-#{$ui-label} {
|
---|
370 | @if $ui-body-background-color != null { background: $ui-body-background-color; }
|
---|
371 | @if $ui-body-border-width != null { margin: $ui-body-border-width; }
|
---|
372 | @if $ui-body-color != null { color: $ui-body-color; }
|
---|
373 | @if $ui-body-font-size != null { font-size: $ui-body-font-size; }
|
---|
374 | @if $ui-body-font-weight != null { font-size: $ui-body-font-weight; }
|
---|
375 | }
|
---|
376 |
|
---|
377 | .#{$prefix}panel-collapsed {
|
---|
378 | .#{$prefix}window-header-#{$ui-label},
|
---|
379 | .#{$prefix}panel-header-#{$ui-label} {
|
---|
380 | @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
|
---|
381 | }
|
---|
382 | }
|
---|
383 |
|
---|
384 | .#{$prefix}panel-header-#{$ui-label}-vertical {
|
---|
385 | @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
|
---|
386 | }
|
---|
387 |
|
---|
388 | // @if $ui-base-color != null {
|
---|
389 | // @if $supports-gradients or $compile-all {
|
---|
390 | // .#{$prefix}panel-header-#{$ui-label}-left,
|
---|
391 | // .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
392 | // @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
|
---|
393 | // }
|
---|
394 | // }
|
---|
395 | // }
|
---|
396 |
|
---|
397 | @if $ui-border-radius != null {
|
---|
398 | // @include x-frame(
|
---|
399 | // 'panel',
|
---|
400 | // $ui: '#{$ui-label}',
|
---|
401 |
|
---|
402 | // /* Radius, width, padding and background-color */
|
---|
403 | // $border-radius : $ui-border-radius,
|
---|
404 | // $border-width : $ui-border-width,
|
---|
405 | // $padding : $panel-frame-padding,
|
---|
406 | // $background-color: $ui-base-color
|
---|
407 | // );
|
---|
408 |
|
---|
409 |
|
---|
410 | // @include x-frame('panel-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
---|
411 | // @include x-frame('panel-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
---|
412 | // @include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
---|
413 | // @include x-frame('panel-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
---|
414 |
|
---|
415 | .#{$prefix}panel-header-#{$ui-label}-top {
|
---|
416 | @include border-top-radius($ui-border-radius);
|
---|
417 | // @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
|
---|
418 | }
|
---|
419 |
|
---|
420 | // .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
421 | // @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color);
|
---|
422 | // }
|
---|
423 |
|
---|
424 | // .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
425 | // @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color);
|
---|
426 | // }
|
---|
427 |
|
---|
428 | // .#{$prefix}panel-header-#{$ui-label}-left {
|
---|
429 | // @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
|
---|
430 | // }
|
---|
431 |
|
---|
432 | .#{$prefix}panel-collapsed {
|
---|
433 | .#{$prefix}panel-header-#{$ui-label}-top {
|
---|
434 | @include border-bottom-radius($ui-border-radius);
|
---|
435 | }
|
---|
436 |
|
---|
437 | .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
438 | @include border-left-radius($ui-border-radius);
|
---|
439 | }
|
---|
440 |
|
---|
441 | .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
442 | @include border-top-radius($ui-border-radius);
|
---|
443 | }
|
---|
444 |
|
---|
445 | .#{$prefix}panel-header-#{$ui-label}-left {
|
---|
446 | @include border-right-radius($ui-border-radius);
|
---|
447 | }
|
---|
448 | }
|
---|
449 |
|
---|
450 | } @else {
|
---|
451 | // .#{$prefix}panel-collapsed {
|
---|
452 | // .#{$prefix}panel-header-#{$ui-label}-top {
|
---|
453 | // @include border-bottom-radius($ui-border-radius);
|
---|
454 | // }
|
---|
455 |
|
---|
456 | // .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
457 | // @include border-left-radius($ui-border-radius);
|
---|
458 | // }
|
---|
459 |
|
---|
460 | // .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
461 | // @include border-top-radius($ui-border-radius);
|
---|
462 | // }
|
---|
463 |
|
---|
464 | // .#{$prefix}panel-header-#{$ui-label}-left {
|
---|
465 | // @include border-right-radius($ui-border-radius);
|
---|
466 | // }
|
---|
467 | // }
|
---|
468 |
|
---|
469 | .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
470 | // background-position: top right;
|
---|
471 | }
|
---|
472 |
|
---|
473 | // .#{$prefix}panel-header-#{$ui-label}-top {
|
---|
474 | // @include inner-border(1px 0 0 0, $ui-header-inner-border-color);
|
---|
475 | // }
|
---|
476 |
|
---|
477 | // .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
478 | // @include inner-border(0 1px 0 0, $ui-header-inner-border-color);
|
---|
479 | // }
|
---|
480 |
|
---|
481 | // .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
482 | // @include inner-border(0 0 1px, $ui-header-inner-border-color);
|
---|
483 | // }
|
---|
484 |
|
---|
485 | // .#{$prefix}panel-header-#{$ui-label}-left {
|
---|
486 | // @include inner-border(0 0 0 1px, $ui-header-inner-border-color);
|
---|
487 | // }
|
---|
488 | }
|
---|
489 |
|
---|
490 | .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
491 | background-position: bottom left;
|
---|
492 | }
|
---|
493 |
|
---|
494 | @if $ui-border-radius != null {
|
---|
495 |
|
---|
496 | // Why does adding a border radius require a border?
|
---|
497 |
|
---|
498 | // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
|
---|
499 | // border-bottom-width: 1px !important;
|
---|
500 | // }
|
---|
501 |
|
---|
502 | // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right {
|
---|
503 | // border-left-width: 1px !important;
|
---|
504 | // }
|
---|
505 |
|
---|
506 | // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom {
|
---|
507 | // border-top-width: 1px !important;
|
---|
508 | // }
|
---|
509 |
|
---|
510 | // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left {
|
---|
511 | // border-right-width: 1px !important;
|
---|
512 | // }
|
---|
513 |
|
---|
514 | .#{$prefix}panel-header-#{$ui-label}-collapsed {
|
---|
515 | @include border-radius($ui-border-radius);
|
---|
516 | }
|
---|
517 |
|
---|
518 |
|
---|
519 | // These
|
---|
520 | // @tag deleted
|
---|
521 | // @include x-frame('panel-header', '#{$ui-label}-collapsed-top', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
---|
522 | // @include x-frame('panel-header', '#{$ui-label}-collapsed-right', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
---|
523 | // @include x-frame('panel-header', '#{$ui-label}-collapsed-bottom', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
---|
524 | // @include x-frame('panel-header', '#{$ui-label}-collapsed-left', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
---|
525 | }
|
---|
526 |
|
---|
527 | //background positioning of images
|
---|
528 | // @tag deleted
|
---|
529 | // .#{$prefix}panel-header-#{$ui-label}-right-tc,
|
---|
530 | // .#{$prefix}panel-header-#{$ui-label}-right-mc,
|
---|
531 | // .#{$prefix}panel-header-#{$ui-label}-right-bc {
|
---|
532 | // background-position: right 0;
|
---|
533 | // }
|
---|
534 |
|
---|
535 | // .#{$prefix}panel-header-#{$ui-label}-bottom-tc,
|
---|
536 | // .#{$prefix}panel-header-#{$ui-label}-bottom-mc,
|
---|
537 | // .#{$prefix}panel-header-#{$ui-label}-bottom-bc {
|
---|
538 | // background-position: 0 bottom;
|
---|
539 | // }
|
---|
540 | } |
---|