Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / themes / stylesheets / ext4 / default / util / _resizable.scss
1 @mixin extjs-resizable {
2     .#{$prefix}resizable-handle {
3         position: absolute;
4         
5         z-index: 100;
6         
7         font-size: 1px;
8         line-height: 6px;
9         
10         overflow: hidden;
11             
12         zoom: 1;
13         
14         @include opacity(0);
15         
16         background-color: #fff;
17     }
18
19     .#{$prefix}resizable-handle-east {
20         width: 6px;
21         height: 100%;
22         
23         right: 0;
24         top: 0;
25     }
26     
27     .#{$prefix}resizable-over {
28         .#{$prefix}resizable-handle-east {
29             cursor: e-resize;
30         }
31     }
32     
33     .#{$prefix}resizable-handle-south {
34         width: 100%;
35         height: 6px;
36         
37         left: 0;
38         bottom: 0;
39     }
40     
41     .#{$prefix}resizable-over {
42         .#{$prefix}resizable-handle-south {
43             cursor: s-resize;
44         }
45     }
46     
47     .#{$prefix}resizable-handle-west {
48         width: 6px;
49         height: 100%;
50         
51         left: 0;
52         top: 0;
53     }
54     
55     .#{$prefix}resizable-over {
56         .#{$prefix}resizable-handle-west {
57             cursor: w-resize;
58         }
59     }
60
61     .#{$prefix}resizable-handle-north {
62         width: 100%;
63         height: 6px;
64         
65         left: 0;
66         top: 0;
67     }
68     
69     .#{$prefix}resizable-over {
70         .#{$prefix}resizable-handle-north {
71             cursor: n-resize;
72         }
73     }
74
75     .#{$prefix}resizable-handle-southeast {
76         width: 6px;
77         height: 6px;
78         
79         right: 0;
80         bottom: 0;
81         
82         z-index: 101;
83     }
84     
85     .#{$prefix}resizable-over {
86         .#{$prefix}resizable-handle-southeast {
87             cursor: se-resize;
88         }
89     }
90
91     .#{$prefix}resizable-handle-northwest {
92         width: 6px;
93         height: 6px;
94         
95         left: 0;
96         top: 0;
97         
98         z-index: 101;
99     }
100     
101     .#{$prefix}resizable-over {
102         .#{$prefix}resizable-handle-northwest {
103             cursor: nw-resize;
104         }
105     }
106
107     .#{$prefix}resizable-handle-northeast {
108         width: 6px;
109         height: 6px;
110         
111         right: 0;
112         top: 0;
113         
114         z-index: 101;
115     }
116     
117     .#{$prefix}resizable-over {
118         .#{$prefix}resizable-handle-northeast {
119             cursor: ne-resize;
120         }
121     }
122
123     .#{$prefix}resizable-handle-southwest {
124         width: 6px;
125         height: 6px;
126         
127         left: 0;
128         bottom: 0;
129         
130         z-index: 101;
131     }
132     
133     .#{$prefix}resizable-over {
134         .#{$prefix}resizable-handle-southwest {
135             cursor: sw-resize;
136         }
137     }
138     
139     /*IE rounding error*/
140     .#{$prefix}ie {
141         .#{$prefix}resizable-handle-east {
142             margin-right: -1px; /*IE rounding error*/
143         }
144         
145         .#{$prefix}resizable-handle-south {
146             margin-bottom: -1px;
147         }
148     }
149
150     .#{$prefix}resizable-over .#{$prefix}resizable-handle, .#{$prefix}resizable-pinned .#{$prefix}resizable-handle{
151         @include opacity(1);
152     }
153
154     .#{$prefix}window .#{$prefix}window-handle {
155         @include opacity(0);
156     }
157
158     .#{$prefix}window-collapsed .#{$prefix}window-handle {
159         display: none;
160     }
161
162     .#{$prefix}resizable-proxy {
163         border: 1px dashed #3b5a82;
164         position: absolute;
165         left: 0;
166         top: 0;
167         overflow: hidden;
168         z-index: 50000;
169     }
170
171     .#{$prefix}resizable-overlay {
172         position: absolute;
173         left: 0;
174         top: 0;
175         
176         width: 100%;
177         height: 100%;
178         
179         display: none;
180         
181         z-index: 200000;
182         
183         background-color: #fff;
184             
185         @include opacity(0);
186     }
187     
188     .#{$prefix}resizable-over,
189     .#{$prefix}resizable-pinned {
190         .#{$prefix}resizable-handle-east,
191         .#{$prefix}resizable-handle-west {
192                 background-position: left;
193                 @include theme-background-image($theme-name, 'sizer/e-handle.gif');
194         }
195         
196         .#{$prefix}resizable-handle-south,
197         .#{$prefix}resizable-handle-north {
198             background-position: top;
199             @include theme-background-image($theme-name, 'sizer/s-handle.gif');
200         }
201         
202         .#{$prefix}resizable-handle-southeast {
203             background-position: top left;
204             @include theme-background-image($theme-name, 'sizer/se-handle.gif');
205         }
206         
207         .#{$prefix}resizable-handle-northwest {
208             background-position: bottom right;
209             @include theme-background-image($theme-name, 'sizer/nw-handle.gif');
210         }
211         
212         .#{$prefix}resizable-handle-northeast {
213             background-position: bottom left;
214             @include theme-background-image($theme-name, 'sizer/ne-handle.gif');
215         }
216
217         .#{$prefix}resizable-handle-southwest {
218             background-position: top right;
219             @include theme-background-image($theme-name, 'sizer/sw-handle.gif');
220         }
221     }
222 }