Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / util / _splitter.scss
1 @mixin extjs-splitter {
2     .#{$prefix}splitter {
3         .#{$prefix}collapse-el {
4             position: absolute;
5
6             cursor: pointer;
7
8             background-color: transparent;
9             background-repeat: no-repeat !important;
10         }
11     }
12
13     .#{$prefix}layout-split-left,
14     .#{$prefix}layout-split-right {
15         top: 50%;
16
17         margin-top: -17px;
18
19         width: 5px;
20         height: 35px;
21     }
22
23     .#{$prefix}layout-split-top,
24     .#{$prefix}layout-split-bottom {
25         left: 50%;
26
27         width: 35px;
28         height: 5px;
29
30         margin-left: -17px;
31     }
32
33     .#{$prefix}layout-split-left {
34         background: no-repeat top right;
35         @include theme-background-image($theme-name, 'util/splitter/mini-left.gif');
36     }
37
38     .#{$prefix}layout-split-right {
39         background: no-repeat top left;
40         @include theme-background-image($theme-name, 'util/splitter/mini-right.gif');
41     }
42
43     .#{$prefix}layout-split-top {
44         background: no-repeat top left;
45         @include theme-background-image($theme-name, 'util/splitter/mini-top.gif');
46     }
47
48     .#{$prefix}layout-split-bottom {
49         background: no-repeat top left;
50         @include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
51     }
52
53     .#{$prefix}splitter-collapsed {
54         .#{$prefix}layout-split-left {
55             background: no-repeat top left;
56             @include theme-background-image($theme-name, 'util/splitter/mini-right.gif');
57         }
58
59         .#{$prefix}layout-split-right {
60             background: no-repeat top right;
61             @include theme-background-image($theme-name, 'util/splitter/mini-left.gif');
62         }
63
64         .#{$prefix}layout-split-top {
65             background: no-repeat top left;
66             @include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
67         }
68
69         .#{$prefix}layout-split-bottom {
70             background: no-repeat top left;
71             @include theme-background-image($theme-name, 'util/splitter/mini-top.gif');
72         }
73     }
74
75     .#{$prefix}splitter-horizontal {
76         cursor: e-resize;
77         cursor: row-resize;
78         font-size:1px;
79     }
80     .#{$prefix}splitter-vertical {
81         cursor: e-resize;
82         cursor: col-resize;
83         font-size:1px;
84     }
85     .#{$prefix}splitter-collapsed {
86         cursor: default;
87     }
88
89     .#{$prefix}splitter-active {
90         z-index: 4;
91         font-size:1px;
92         background-color: rgb(180, 180, 180);
93         @include opacity(0.8);
94     }
95     .#{$prefix}splitter-active {
96         .#{$prefix}collapse-el {
97             @include opacity(0.3);
98         }
99     }
100
101     .#{$prefix}proxy-el {
102         position: absolute;
103         background: rgb(180, 180, 180);
104         @include opacity(0.8);
105     }
106 }