source: branches/testFACT++branch/dim/WebDID/ext-4.1.1a/resources/themes/stylesheets/neptune/default/widgets/_panel.scss

Last change on this file was 14939, checked in by tbretz, 12 years ago
Added WebDID from v20r5
File size: 19.5 KB
Line 
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}
Note: See TracBrowser for help on using the repository browser.