Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / resources / css / structure / toolbar.css
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 .x-toolbar{
8     border-style:solid;
9     border-width:0 0 1px 0;
10     display: block;
11         padding:2px;
12     background:repeat-x top left;
13     position:relative;
14     left:0;
15     top:0;
16     zoom:1;
17     overflow:hidden;
18 }
19
20 .x-toolbar-left {
21     width: 100%;
22 }
23
24 .x-toolbar .x-item-disabled .x-btn-icon {
25     opacity: .35;
26     -moz-opacity: .35;
27     filter: alpha(opacity=35);
28 }
29
30 .x-toolbar td {
31         vertical-align:middle;
32 }
33
34 .x-toolbar td,.x-toolbar span,.x-toolbar input,.x-toolbar div,.x-toolbar select,.x-toolbar label{
35         white-space: nowrap;
36 }
37
38 .x-toolbar .x-item-disabled {
39         cursor:default;
40         opacity:.6;
41         -moz-opacity:.6;
42         filter:alpha(opacity=60);
43 }
44
45 .x-toolbar .x-item-disabled * {
46         cursor:default;
47 }
48
49 .x-toolbar .x-toolbar-cell {
50     vertical-align:middle;
51 }
52
53 .x-toolbar .x-btn-tl, .x-toolbar .x-btn-tr, .x-toolbar .x-btn-tc, .x-toolbar .x-btn-ml, .x-toolbar .x-btn-mr,
54 .x-toolbar .x-btn-mc, .x-toolbar .x-btn-bl, .x-toolbar .x-btn-br, .x-toolbar .x-btn-bc
55 {
56         background-position: 500px 500px;
57 }
58
59 /* These rules are duplicated from button.css to give priority of x-toolbar rules above */
60 .x-toolbar .x-btn-over .x-btn-tl{
61         background-position: -6px 0;
62 }
63
64 .x-toolbar .x-btn-over .x-btn-tr{
65         background-position: -9px 0;
66 }
67
68 .x-toolbar .x-btn-over .x-btn-tc{
69         background-position: 0 -9px;
70 }
71
72 .x-toolbar .x-btn-over .x-btn-ml{
73         background-position: -6px -24px;
74 }
75
76 .x-toolbar .x-btn-over .x-btn-mr{
77         background-position: -9px -24px;
78 }
79
80 .x-toolbar .x-btn-over .x-btn-mc{
81         background-position: 0 -2168px;
82 }
83
84 .x-toolbar .x-btn-over .x-btn-bl{
85         background-position: -6px -3px;
86 }
87
88 .x-toolbar .x-btn-over .x-btn-br{
89         background-position: -9px -3px;
90 }
91
92 .x-toolbar .x-btn-over .x-btn-bc{
93         background-position: 0 -18px;
94 }
95
96 .x-toolbar .x-btn-click .x-btn-tl, .x-toolbar .x-btn-menu-active .x-btn-tl, .x-toolbar .x-btn-pressed .x-btn-tl{
97         background-position: -12px 0;
98 }
99
100 .x-toolbar .x-btn-click .x-btn-tr, .x-toolbar .x-btn-menu-active .x-btn-tr, .x-toolbar .x-btn-pressed .x-btn-tr{
101         background-position: -15px 0;
102 }
103
104 .x-toolbar .x-btn-click .x-btn-tc, .x-toolbar .x-btn-menu-active .x-btn-tc, .x-toolbar .x-btn-pressed .x-btn-tc{
105         background-position: 0 -12px;
106 }
107
108 .x-toolbar .x-btn-click .x-btn-ml, .x-toolbar .x-btn-menu-active .x-btn-ml, .x-toolbar .x-btn-pressed .x-btn-ml{
109         background-position: -12px -24px;
110 }
111
112 .x-toolbar .x-btn-click .x-btn-mr, .x-toolbar .x-btn-menu-active .x-btn-mr, .x-toolbar .x-btn-pressed .x-btn-mr{
113         background-position: -15px -24px;
114 }
115
116 .x-toolbar .x-btn-click .x-btn-mc, .x-toolbar .x-btn-menu-active .x-btn-mc, .x-toolbar .x-btn-pressed .x-btn-mc{
117         background-position: 0 -3240px;
118 }
119
120 .x-toolbar .x-btn-click .x-btn-bl, .x-toolbar .x-btn-menu-active .x-btn-bl, .x-toolbar .x-btn-pressed .x-btn-bl{
121         background-position: -12px -3px;
122 }
123
124 .x-toolbar .x-btn-click .x-btn-br, .x-toolbar .x-btn-menu-active .x-btn-br, .x-toolbar .x-btn-pressed .x-btn-br{
125         background-position: -15px -3px;
126 }
127
128 .x-toolbar .x-btn-click .x-btn-bc, .x-toolbar .x-btn-menu-active .x-btn-bc, .x-toolbar .x-btn-pressed .x-btn-bc{
129         background-position: 0 -21px;
130 }
131
132 .x-toolbar div.xtb-text{
133     padding:2px 2px 0;
134     line-height:16px;
135     display:block;
136 }
137
138 .x-toolbar .xtb-sep {
139         background-position: center;
140         background-repeat: no-repeat;
141         display: block;
142         font-size: 1px;
143         height: 16px;
144         width:4px;
145         overflow: hidden;
146         cursor:default;
147         margin: 0 2px 0;
148         border:0;
149 }
150
151 .x-toolbar .xtb-spacer {
152     width:2px;
153 }
154
155 /* Paging Toolbar */
156 .x-tbar-page-number{
157         width:30px;
158         height:14px;
159 }
160
161 .ext-ie .x-tbar-page-number{
162     margin-top: 2px;
163 }
164
165 .x-paging-info {
166     position:absolute;
167     top:5px;
168     right: 8px;
169 }
170
171 /* floating */
172 .x-toolbar-ct {
173     width:100%;
174 }
175
176 .x-toolbar-right td {
177     text-align: center;
178 }
179
180 .x-panel-tbar, .x-panel-bbar, .x-window-tbar, .x-window-bbar, .x-tab-panel-tbar, .x-tab-panel-bbar, .x-plain-tbar, .x-plain-bbar {
181     overflow:hidden;
182     zoom:1;
183 }
184
185 .x-toolbar-more .x-btn-small .x-btn-text{
186         height: 16px;
187         width: 12px;
188 }
189
190 .x-toolbar-more em.x-btn-arrow {
191     display:inline;
192     background-color:transparent;
193         padding-right:0;
194 }
195
196 .x-toolbar-more .x-btn-mc em.x-btn-arrow {
197     background-image: none;
198 }
199
200 div.x-toolbar-no-items {
201     color:gray !important;
202     padding:5px 10px !important;
203 }
204
205 /* fix ie toolbar form items */
206 .ext-border-box .x-toolbar-cell .x-form-text {
207     margin-bottom:-1px !important;
208 }
209
210 .ext-border-box .x-toolbar-cell .x-form-field-wrap .x-form-text {
211     margin:0 !important;
212 }
213
214 .ext-ie .x-toolbar-cell .x-form-field-wrap {
215     height:21px;
216 }
217
218 .ext-ie .x-toolbar-cell .x-form-text {
219     position:relative;
220     top:-1px;
221 }
222
223 .ext-strict .ext-ie8 .x-toolbar-cell .x-form-field-trigger-wrap .x-form-text, .ext-strict .ext-ie .x-toolbar-cell .x-form-text {
224     top: 0px;
225 }
226
227 .x-toolbar-right td .x-form-field-trigger-wrap{
228     text-align: left;
229 }
230
231 .x-toolbar-cell .x-form-checkbox, .x-toolbar-cell .x-form-radio{
232     margin-top: 5px;
233 }
234
235 .x-toolbar-cell .x-form-cb-label{
236     vertical-align: bottom;
237     top: 1px;
238 }
239
240 .ext-ie .x-toolbar-cell .x-form-checkbox, .ext-ie .x-toolbar-cell .x-form-radio{
241     margin-top: 4px;
242 }
243
244 .ext-ie .x-toolbar-cell .x-form-cb-label{
245     top: 0;
246 }