Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _qtip.scss
1 @mixin extjs-qtip {
2     .#{$prefix}tip {
3         position: absolute;
4         overflow: visible; /*pointer needs to be able to stick out*/
5         border-color: $tip-border-color;
6
7         .#{$prefix}tip-header {
8             .#{$prefix}box-item {
9                 padding: $tip-header-padding;
10             }
11
12             .#{$prefix}tool {
13                 padding: 0px 1px 0 0 !important;
14             }
15         }
16     }
17     
18     @include x-frame(
19         $cls: 'tip',
20         $border-radius: $tip-border-radius,
21         $border-width: $tip-border-width,
22         $background-color: $tip-background-color,
23         $background-gradient: $tip-background-gradient,
24         $table: true
25     );
26
27     .#{$prefix}tip-header-text {
28         @include no-select;
29
30         color: $tip-header-color;
31         font-size: $tip-header-font-size;
32         font-weight: $tip-header-font-weight;
33     }
34
35     .#{$prefix}tip-header-draggable {
36         .#{$prefix}tip-header-text {
37             cursor: move;
38         }
39     }
40
41     // Tip is a Panel. It uses dock layout. Body style must be the same
42     .#{$prefix}tip-body,
43     .#{$prefix}form-invalid-tip-body {
44         overflow: hidden;
45         position: relative;
46         padding: $tip-body-padding;
47     }
48
49     .#{$prefix}tip-header,
50     .#{$prefix}tip-body,
51     .#{$prefix}form-invalid-tip-body {
52         color: $tip-body-color;
53         font-size: $tip-body-font-size;
54         font-weight: $tip-body-font-weight;
55         a {
56             color: $tip-body-link-color;
57         }
58     }
59
60     .#{$prefix}tip-anchor {
61         position: absolute;
62
63         overflow: hidden;
64
65         height: 0;
66         width: 0;
67
68         border-style: solid;
69         border-width: 5px;
70         border-color: $tip-border-color;
71
72         zoom: 1;
73     }
74
75     .#{$prefix}border-box .#{$prefix}tip-anchor {
76         width: 10px;
77         height: 10px;
78     }
79
80     .#{$prefix}tip-anchor-top {
81         border-top-color: transparent;
82         border-left-color: transparent;
83         border-right-color: transparent;
84
85         @if $include_ie {
86             _border-top-color: pink;
87             _border-left-color: pink;
88             _border-right-color: pink;
89             _filter: chroma(color=pink);
90         }
91     }
92
93     .#{$prefix}tip-anchor-bottom {
94         border-bottom-color: transparent;
95         border-left-color: transparent;
96         border-right-color: transparent;
97         
98         @if $include_ie {
99             _border-bottom-color: pink;
100             _border-left-color: pink;
101             _border-right-color: pink;
102             _filter: chroma(color=pink);
103         }
104     }
105     
106     .#{$prefix}tip-anchor-left {
107         border-top-color: transparent;
108         border-bottom-color: transparent;
109         border-left-color: transparent;
110         
111         @if $include-ie {
112             _border-top-color: pink;
113             _border-bottom-color: pink;
114             _border-left-color: pink;
115             _filter: chroma(color=pink);
116         }
117     }
118     
119     .#{$prefix}tip-anchor-right {
120         border-top-color: transparent;
121         border-bottom-color: transparent;
122         border-right-color: transparent;
123         
124         @if $include-ie {
125             _border-top-color: pink;
126             _border-bottom-color: pink;
127             _border-right-color: pink;
128             _filter: chroma(color=pink);
129         }
130     }
131     
132     //error qtip
133     .#{$prefix}form-invalid-tip {
134         border-color: $tip-error-border-color;
135         
136         @include inner-border(
137             $width: 1px,
138             $color: $tip-error-inner-border-color
139         );
140     }
141
142     .#{$prefix}form-invalid-tip-body {
143         background: theme-image($theme-name, 'form/exclamation.gif') 1px 1px no-repeat;
144         padding-left: 22px;
145
146         li {
147             margin-bottom: 4px;
148             &.last {
149                 margin-bottom: 0;
150             }
151         }
152     }
153
154     @include x-frame(
155         $cls: 'form-invalid-tip',
156         $ui: 'default',
157         $border-radius: $tip-error-border-radius,
158         $border-width: $tip-error-border-width,
159         $background-color: $tip-error-background-color,
160         $background-gradient: $tip-background-gradient,
161         $table: true
162     );
163     
164     @include x-frame(
165         $cls: 'form-invalid-tip-header',
166         $ui: 'default',
167         $border-radius: $tip-error-border-radius,
168         $border-width: $tip-error-border-width,
169         $background-color: $tip-error-background-color,
170         $background-gradient: $tip-background-gradient
171     );
172 }