Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / themes / stylesheets / ext4 / default / widgets / _panel.scss
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         .#{$prefix}ie {
15             .#{$prefix}panel-header,
16             .#{$prefix}panel-header-tl,
17             .#{$prefix}panel-header-tc,
18             .#{$prefix}panel-header-tr,
19             .#{$prefix}panel-header-ml,
20             .#{$prefix}panel-header-mc,
21             .#{$prefix}panel-header-mr,
22             .#{$prefix}panel-header-bl,
23             .#{$prefix}panel-header-bc,
24             .#{$prefix}panel-header-br {
25                 zoom: 1;
26             }
27         }
28         // Fix for IE8 clipping. EXTJSIV-1553
29         .#{$prefix}ie8 {
30             td.#{$prefix}frame-mc {
31                 vertical-align: top;
32             }
33         }
34     }
35     
36     //panel header
37     .#{$prefix}panel-header {
38         padding: $panel-header-padding;
39     }
40     
41     .#{$prefix}panel-header-icon,
42     .#{$prefix}window-header-icon {
43         width:16px;
44         height:16px;
45         background-repeat:no-repeat;
46         background-position:0 0;
47         vertical-align:middle;
48         margin-right:4px;
49         margin-top:-1px;
50         margin-bottom:-1px;
51     }
52     
53     .#{$prefix}panel-header-draggable,
54     .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
55     .#{$prefix}window-header-draggable,
56     .#{$prefix}window-header-draggable .#{$prefix}window-header-text{
57         cursor: move;
58     }
59
60     // A ghost is just a Panel. The only extra it needs is opacity.
61     // TODO: Make opacity a variable
62     .#{$prefix}panel-ghost, .#{$prefix}window-ghost {
63         @include opacity(0.65);
64         cursor: move;
65     }
66
67     .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
68         .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
69             width: 100%;
70         }
71     }
72
73     .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
74         .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
75             height: 100%;
76         }
77     }
78
79     // Vertical headers must be inline blocks so that they acquire width from the content
80     .#{$prefix}panel-header-vertical, .#{$prefix}panel-header-vertical .#{$prefix}panel-header-body,
81     .#{$prefix}btn-group-header-vertical, .#{$prefix}btn-group-header-vertical .#{$prefix}btn-group-header-body,
82     .#{$prefix}window-header-vertical, .#{$prefix}window-header-vertical .#{$prefix}window-header-body {
83         display: -moz-inline-stack;
84         display: inline-block;
85     }
86
87     .#{$prefix}panel-header-text {
88         @include no-select;
89         white-space: nowrap;
90     }
91
92     .#{$prefix}panel-header-left,
93     .#{$prefix}panel-header-right {
94         .#{$prefix}vml-base {
95             left: -3px !important;
96         }
97     }
98
99     //panel body
100     .#{$prefix}panel-body {
101         overflow: hidden;
102         position: relative;
103         
104         font-size: $panel-body-font-size;
105     }
106
107     .#{$prefix}panel-header-vertical {
108         .#{$prefix}surface {
109             margin-top: 2px;
110         }
111     }
112     
113     .#{$prefix}panel-header-plain-vertical {
114         .#{$prefix}surface {
115             margin-top: 0;
116         }
117     }
118     
119         
120     .#{$prefix}panel-collapsed {
121         .#{$prefix}panel-header-collapsed-border-top {
122             border-bottom-width: $panel-header-border-width !important;
123         }
124         .#{$prefix}panel-header-collapsed-border-right {
125             border-left-width: $panel-header-border-width !important;
126         }
127         .#{$prefix}panel-header-collapsed-border-bottom {
128             border-top-width: $panel-header-border-width !important;
129         }
130         .#{$prefix}panel-header-collapsed-border-left {
131             border-right-width: $panel-header-border-width !important;
132         }
133     }
134
135     @if not $supports-gradients or $compile-all {
136         .#{$prefix}nlg .#{$prefix}panel-header-vertical {
137             .#{$prefix}frame-mc {
138                 background-repeat: repeat-y;
139             }
140         }
141     }
142
143     @if $include-panel-uis == true {
144         @include extjs-panel-ui(
145             'default',
146
147             $ui-base-color: $panel-base-color,
148             $ui-border-width: $panel-border-width,
149             $ui-border-color: $panel-border-color,
150             $ui-border-radius: $panel-border-radius,
151             
152             $ui-header-color: $panel-header-color,
153             $ui-header-font-size: $panel-header-font-size,
154             $ui-header-font-weight: $panel-header-font-weight,
155             $ui-header-border-color: $panel-header-border-color,
156             $ui-header-background-color: $panel-header-background-color,
157             $ui-header-background-gradient: $panel-header-background-gradient,
158
159             $ui-body-color: $panel-body-color,
160             $ui-body-border-color: $panel-body-border-color,
161             $ui-body-border-width: 1px,
162             $ui-body-background-color: $panel-body-background-color
163         );
164         
165         @include extjs-panel-ui(
166             'default-framed',
167
168             $ui-base-color: $panel-base-color,
169             $ui-border-width: $panel-frame-border-width,
170             $ui-border-color: $panel-frame-border-color,
171             $ui-border-radius: $panel-frame-border-radius,
172
173             $ui-header-color: $panel-header-color,
174             $ui-header-font-size: $panel-header-font-size,
175             $ui-header-font-weight: $panel-header-font-weight,
176             $ui-header-border-color: $panel-frame-border-color,
177             $ui-header-background-color: $panel-header-background-color,
178             $ui-header-background-gradient: $panel-header-background-gradient,
179
180             $ui-body-color: $panel-body-color,
181             $ui-body-border-color: $panel-body-border-color,
182             $ui-body-border-width: 0,
183             $ui-body-background-color: $panel-frame-background-color
184         );
185     }
186
187     .x-panel-header-plain,
188     .x-panel-body-plain {
189         border: 0;
190         padding: 0;
191     }
192 }
193
194 /**
195   * @class Ext.Panel
196   * Used to create a visual theme for an Ext.Panel
197   */
198 @mixin extjs-panel-ui(
199     $ui-label,
200
201     $ui-base-color: null,
202
203     $ui-border-color: null,
204     $ui-border-radius: null,
205     $ui-border-width: 0,
206
207     $ui-header-color: null,
208     $ui-header-font-family: $panel-header-font-family,
209     $ui-header-font-size: $panel-header-font-size,
210     $ui-header-font-weight: $panel-header-font-weight,
211     $ui-header-border-color: $ui-border-color,
212     $ui-header-background-color: null,
213     $ui-header-background-gradient: matte,
214     $ui-header-inner-border-color: null,
215
216     $ui-body-color: null,
217     $ui-body-border-color: null,
218     $ui-body-border-width: null,
219     $ui-body-border-style: solid,
220     $ui-body-background-color: null,
221     $ui-body-font-size: null,
222     $ui-body-font-weight: null
223 ){
224     @if $ui-base-color != null {
225         @if $ui-border-color == null { $ui-border-color: $ui-base-color; }
226
227         @if $ui-header-color == null { $ui-header-color: #fff; }
228         @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); }
229     }
230     
231     @if $ui-header-inner-border-color == null and $ui-header-background-color != null {
232         $ui-header-inner-border-color: lighten($ui-header-background-color, 10);
233     }
234
235     .#{$prefix}panel-#{$ui-label} {
236         @if $ui-border-color != null { border-color: $ui-border-color; }
237     }
238
239     // header
240     .#{$prefix}panel-header-#{$ui-label} {
241         @if $ui-header-font-size != null { font-size: $ui-header-font-size; }
242         line-height: $panel-header-line-height;
243
244         @if $ui-header-border-color != null {
245             border-color: $ui-header-border-color;
246             border-width: $panel-header-border-width;
247             border-style: $panel-header-border-style;
248         }
249
250         @if $supports-gradients or $compile-all {
251             @if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); }
252
253             @if $panel-header-inner-border and $ui-header-inner-border-color != null {
254                 @include inner-border(
255                     $width: $panel-header-inner-border-width,
256                     $color: $ui-header-inner-border-color
257                 );
258             }
259         }
260     }
261     
262     // header background images
263     @if $ui-header-background-color != null and $ui-header-background-gradient != null {
264         @if not $supports-gradients or $compile-all {
265             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top {
266                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
267             }
268             
269             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
270                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
271             }
272
273             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
274                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
275             }
276
277             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
278                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
279             }
280         }
281     }
282     
283     // header text
284     .#{$prefix}panel-header-text-#{$ui-label} {
285         @if $ui-header-color != null { color: $ui-header-color; }
286
287         @if $ui-header-font-size != null {   font-size: $ui-header-font-size; }
288         @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
289         @if $ui-header-font-family != null { font-family: $ui-header-font-family; }
290     }
291
292     // body
293     .#{$prefix}panel-body-#{$ui-label} {
294         @if $ui-body-background-color != null { background: $ui-body-background-color; }
295         @if $ui-body-border-color != null {     border-color: $ui-body-border-color; }
296         @if $ui-body-color != null {            color: $ui-body-color; }
297         @if $ui-body-font-size != null {        font-size: $ui-body-font-size; }
298         @if $ui-body-font-weight != null {      font-size: $ui-body-font-weight; }
299         
300         @if $ui-body-border-width != null {
301             border-width: $ui-body-border-width;
302             @if $ui-body-border-style != null { border-style: $ui-body-border-style; }
303         }
304     }
305     
306     .#{$prefix}panel-collapsed {
307         .#{$prefix}window-header-#{$ui-label},
308         .#{$prefix}panel-header-#{$ui-label} {
309             @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
310         }
311     }
312
313     .#{$prefix}panel-header-#{$ui-label}-vertical {
314         @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
315     }
316
317     @if $ui-base-color != null {
318         @if $supports-gradients or $compile-all {
319             .#{$prefix}panel-header-#{$ui-label}-left,
320             .#{$prefix}panel-header-#{$ui-label}-right {
321                 @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
322             }
323         }
324     }
325
326     @if $ui-border-radius != null {
327         @include x-frame(
328             'panel',
329             $ui: '#{$ui-label}',
330
331             /* Radius, width, padding and background-color */
332             $border-radius   : $ui-border-radius,
333             $border-width    : $ui-border-width,
334             $padding         : $panel-frame-padding,
335             $background-color: $ui-body-background-color
336         );
337
338
339         @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);
340         @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);
341         @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);
342         @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);
343         
344         .#{$prefix}panel-header-#{$ui-label}-top {
345             @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
346         }
347
348         .#{$prefix}panel-header-#{$ui-label}-right {
349             @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color);
350         }
351
352         .#{$prefix}panel-header-#{$ui-label}-bottom {
353             @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color);
354         }
355
356         .#{$prefix}panel-header-#{$ui-label}-left {
357             @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
358         }
359     } @else {
360         .#{$prefix}panel-collapsed {
361             .#{$prefix}panel-header-#{$ui-label}-top {
362                 @include border-bottom-radius($ui-border-radius);
363             }
364
365             .#{$prefix}panel-header-#{$ui-label}-right {
366                 @include border-left-radius($ui-border-radius);
367             }
368
369             .#{$prefix}panel-header-#{$ui-label}-bottom {
370                 @include border-top-radius($ui-border-radius);
371             }
372
373             .#{$prefix}panel-header-#{$ui-label}-left {
374                 @include border-right-radius($ui-border-radius);
375             }
376         }
377         
378         .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
379             background-position: top right;
380         }
381         
382         .#{$prefix}panel-header-#{$ui-label}-top {
383             @include inner-border(1px 0 0 0, $ui-header-inner-border-color);
384         }
385
386         .#{$prefix}panel-header-#{$ui-label}-right {
387             @include inner-border(0 1px 0 0, $ui-header-inner-border-color);
388         }
389
390         .#{$prefix}panel-header-#{$ui-label}-bottom {
391             @include inner-border(0 0 1px, $ui-header-inner-border-color);
392         }
393
394         .#{$prefix}panel-header-#{$ui-label}-left {
395             @include inner-border(0 0 0 1px, $ui-header-inner-border-color);
396         }
397     }
398     
399     .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
400         background-position: bottom left;
401     }
402     
403     @if $ui-border-radius != null {
404         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
405             border-bottom-width: 1px !important;
406         }
407
408         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right {
409             border-left-width: 1px !important;
410         }
411
412         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom {
413             border-top-width: 1px !important;
414         }
415
416         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left {
417             border-right-width: 1px !important;
418         }
419         
420         .#{$prefix}panel-header-#{$ui-label}-collapsed {
421             @include border-radius($ui-border-radius);
422         }
423         
424         @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);
425         @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);
426         @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);
427         @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);
428     }
429     
430     //background positioning of images
431     .#{$prefix}panel-header-#{$ui-label}-right-tc,
432     .#{$prefix}panel-header-#{$ui-label}-right-mc,
433     .#{$prefix}panel-header-#{$ui-label}-right-bc {
434         background-position: right 0;
435     }
436     
437     .#{$prefix}panel-header-#{$ui-label}-bottom-tc,
438     .#{$prefix}panel-header-#{$ui-label}-bottom-mc,
439     .#{$prefix}panel-header-#{$ui-label}-bottom-bc {
440         background-position: 0 bottom;
441     }
442 }