Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / themes / stylesheets / ext4 / default / widgets / _window.scss
1 @mixin extjs-window {
2     .#{$prefix}window {
3         outline: none;
4         
5         .#{$prefix}window-wrap {
6             position: relative;
7
8             .#{$prefix}window-body {
9                 overflow: hidden;
10             }
11         }
12     }
13     
14     .#{$prefix}window-body {
15         position: relative;
16         border-style: $window-body-border-style;
17     }
18
19     //maximized window
20     .#{$prefix}window-maximized {
21         .#{$prefix}window-wrap {
22             .#{$prefix}window-header {
23                 @include important-no-border-radius;
24             }
25         }
26     }
27     
28     // collapsed window header styles
29     .#{$prefix}window-collapsed {
30         .#{$prefix}window-header-vertical {
31             @include border-radius(5px);
32         }
33         .#{$prefix}window-header-horizontal {
34             @include border-radius(5px);
35         }
36
37         // Padding changes for collapsed headers.
38         .#{$prefix}window-header-left {
39             padding-right: 5px !important;
40         }
41         
42         .#{$prefix}window-header-right {
43             padding-left: 5px !important;
44         }
45         
46         .#{$prefix}window-header-top {
47             padding-bottom: 5px !important;
48         }
49         
50         .#{$prefix}window-header-bottom {
51             padding-top: 5px !important;
52         }
53     }
54     
55     .#{$prefix}window-header-left,
56     .#{$prefix}window-header-right {
57         .#{$prefix}vml-base {
58             left: -3px !important;
59         }
60     }
61
62     .#{$prefix}window-header-text {
63         @include no-select;
64         white-space: nowrap;
65         display: block;
66     }
67     
68     @include extjs-window-ui(
69         'default',
70         
71         $ui-border-radius: $window-border-radius,
72         $ui-border-color: $window-border-color,
73         $ui-inner-border-color: $window-inner-border-color,
74
75         $ui-header-color: $window-header-color,
76
77         $ui-body-border-color: $window-body-border-color,
78         $ui-body-background-color: $window-body-background-color,
79         $ui-body-color: $window-body-color,
80
81         $ui-background-color: $window-background-color
82     );
83     
84     .#{$prefix}window-body-plain {
85         background: transparent;
86     }
87 }
88
89 /**
90   * @class Ext.Window
91   * Used to create a visual theme for an Ext.Panel
92   */
93 @mixin extjs-window-ui(
94     $ui-label,
95     
96     $ui-padding: null,
97     $ui-border-radius: null,
98     $ui-border-color: null,
99     $ui-inner-border-color: null,
100     
101     $ui-header-color: null,
102     $ui-header-font-size: $window-header-font-size,
103     $ui-header-font-weight: $window-header-font-weight,
104     
105     $ui-body-border-color: null,
106     $ui-body-background-color: null,
107     $ui-body-color: null,
108     
109     $ui-background-color: null
110 ){
111     $ui-header-text-height: round($ui-header-font-size * 1.46); // 11px / 16px
112     
113     .#{$prefix}window-#{$ui-label} {
114         @if $ui-border-color != null { border-color: $ui-border-color; }
115         @if $ui-border-radius != null { @include border-radius($ui-border-radius); }
116         
117         @if $ui-inner-border-color != null { @include inner-border($window-inner-border-width, $ui-inner-border-color); }
118     }
119     
120     @if $ui-border-radius != null {
121         @include x-frame(
122             'window',
123             $ui-label,
124         
125             $border-radius: $ui-border-radius,
126             $border-width: $window-border-width,
127             $padding: $ui-padding,
128             $background-color: $ui-background-color
129         );
130     }
131     
132     .#{$prefix}window-body-#{$ui-label} {
133         @if $ui-body-border-color !=null {
134             border-color: $ui-body-border-color;
135             border-width: $window-body-border-width;
136         }
137         
138         @if $ui-body-background-color != null { background: $ui-body-background-color; }
139         @if $ui-body-color != null { color: $ui-body-color; }
140     }
141     
142     .#{$prefix}window-header-#{$ui-label} {
143         @if $ui-border-color != null { border-color: $ui-border-color; }
144         zoom:1;
145     }
146     
147     .#{$prefix}window-header-text-#{$ui-label} {
148         @if $ui-header-color != null { color: $ui-header-color; }
149         @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
150         
151         line-height: $ui-header-text-height;
152         
153         font-family: $font-family;
154         font-size: $ui-header-font-size;
155     }
156     
157     @if $ui-border-radius != null {
158         @include x-frame('window-header', '#{$ui-label}-top',    top($ui-border-radius) right($ui-border-radius) 0 0, $window-border-width, 5px 5px 0, $ui-background-color);
159         @include x-frame('window-header', '#{$ui-label}-right',  0 right($ui-border-radius) bottom($ui-border-radius) 0, $window-border-width, 5px 5px 5px 0, $ui-background-color);
160         @include x-frame('window-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $window-border-width, 0 5px 5px, $ui-background-color);
161         @include x-frame('window-header', '#{$ui-label}-left',   top($ui-border-radius) 0 0 left($ui-border-radius), $window-border-width, 5px 0px 5px 5px, $ui-background-color);
162     }
163     
164     .#{$prefix}window-header-#{$ui-label}-top {
165         @include inner-border(1px 1px 0, $ui-inner-border-color);
166     }
167
168     .#{$prefix}window-header-#{$ui-label}-right {
169         @include inner-border(1px 1px 1px 0, $ui-inner-border-color);
170     }
171
172     .#{$prefix}window-header-#{$ui-label}-bottom {
173         @include inner-border(0px 1px 1px, $ui-inner-border-color);
174     }
175
176     .#{$prefix}window-header-#{$ui-label}-left {
177         @include inner-border(1px 0 1px 1px, $ui-inner-border-color);
178     }
179 }