]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* claro/form/Common.css */ |
2 | ||
3 | /*========================= common css =========================*/ | |
4 | ||
5 | @import "../variables"; | |
6 | ||
7 | /* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ | |
8 | ||
1354d172 AD |
9 | .claro .dijitTextBox, |
10 | .claro .dijitInputInner { | |
11 | // .dijitInputInner selector needed for ValidationTextBox on IE6 because <input> doesn't inherit | |
12 | // the color setting from the ancestor div.dijitTextBox | |
13 | color: @text-color; | |
14 | } | |
15 | ||
f0cfe83e | 16 | .claro .dijitValidationTextBoxError .dijitValidationContainer { |
81bea17a | 17 | background-color: @erroricon-background-color; |
1354d172 | 18 | background-image: url("../@{image-form-error}"); |
81bea17a AD |
19 | background-position: top center; |
20 | border: solid @erroricon-background-color 0; | |
81bea17a AD |
21 | width: 9px; |
22 | } | |
f0cfe83e AD |
23 | |
24 | .claro .dijitTextBoxError .dijitValidationContainer { | |
25 | border-left-width: 1px; | |
26 | } | |
27 | ||
28 | .claro .dijitValidationTextBoxError .dijitValidationIcon { | |
81bea17a | 29 | width: 0; |
6887a0f5 | 30 | background-color: transparent; /* so the INPUT doesn't obscure the border in rtl+a11y */ |
81bea17a AD |
31 | } |
32 | ||
33 | /* Padding for the input area of TextBox based widgets, and corresponding padding for the | |
34 | * down arrow button and the placeholder. placeholder is explicitly listed because | |
35 | * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField | |
36 | * won't affect it | |
37 | */ | |
38 | .claro .dijitTextArea, | |
39 | .claro .dijitInputField .dijitPlaceHolder { | |
40 | padding: @textbox-padding; | |
41 | } | |
f0cfe83e AD |
42 | |
43 | .claro .dijitSelect .dijitInputField, | |
81bea17a AD |
44 | .claro .dijitTextBox .dijitInputField { |
45 | // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below. | |
46 | // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right, | |
47 | // although that varies by so compensate for that too. | |
48 | padding: @textbox-padding - 1px @textbox-padding; | |
49 | } | |
f0cfe83e | 50 | |
81bea17a AD |
51 | .dj_gecko .claro .dijitTextBox .dijitInputInner, |
52 | .dj_webkit .claro .dijitTextBox .dijitInputInner { | |
53 | // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right, | |
54 | // so compensate for that too. | |
6887a0f5 AK |
55 | padding-left: @textbox-padding - 1px; |
56 | padding-right: @textbox-padding - 1px; | |
81bea17a AD |
57 | } |
58 | ||
f0cfe83e AD |
59 | .claro .dijitSelect, |
60 | .claro .dijitSelect .dijitButtonContents, | |
81bea17a AD |
61 | .claro .dijitTextBox, |
62 | .claro .dijitTextBox .dijitButtonNode { | |
63 | /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ | |
64 | border-color: @border-color; | |
65 | .transition-property(background-color, border); | |
66 | .transition-duration(.35s); | |
67 | } | |
f0cfe83e AD |
68 | |
69 | .claro .dijitSelect, | |
81bea17a AD |
70 | .claro .dijitTextBox { |
71 | background-color: @textbox-background-color; | |
72 | } | |
73 | ||
74 | /* hover */ | |
f0cfe83e AD |
75 | .claro .dijitSelectHover, |
76 | .claro .dijitSelectHover .dijitButtonContents, | |
81bea17a AD |
77 | .claro .dijitTextBoxHover, |
78 | .claro .dijitTextBoxHover .dijitButtonNode { | |
79 | border-color: @hovered-border-color; | |
80 | .transition-duration(.25s); | |
81 | } | |
f0cfe83e | 82 | |
81bea17a AD |
83 | .claro .dijitTextBoxHover { |
84 | background-color: @textbox-hovered-background-color; | |
f0cfe83e | 85 | .textbox-background-image; |
81bea17a AD |
86 | } |
87 | ||
88 | /* error state */ | |
f0cfe83e AD |
89 | .claro .dijitSelectError, |
90 | .claro .dijitSelectError .dijitButtonContents, | |
81bea17a AD |
91 | .claro .dijitTextBoxError, |
92 | .claro .dijitTextBoxError .dijitButtonNode { | |
93 | border-color: @error-border-color; | |
94 | } | |
81bea17a AD |
95 | |
96 | /* focused state */ | |
f0cfe83e AD |
97 | .claro .dijitSelectFocused, |
98 | .claro .dijitSelectFocused .dijitButtonContents, | |
81bea17a AD |
99 | .claro .dijitTextBoxFocused, |
100 | .claro .dijitTextBoxFocused .dijitButtonNode { | |
101 | border-color:@focused-border-color; | |
102 | .transition-duration(.1s); | |
103 | } | |
f0cfe83e | 104 | |
81bea17a AD |
105 | .claro .dijitTextBoxFocused { |
106 | background-color: @textbox-focused-background-color; | |
f0cfe83e | 107 | .textbox-background-image; |
81bea17a AD |
108 | } |
109 | .claro .dijitTextBoxFocused .dijitInputContainer { | |
110 | background: @textbox-focused-background-color; | |
111 | } | |
112 | ||
f0cfe83e AD |
113 | .claro .dijitSelectErrorFocused, |
114 | .claro .dijitSelectErrorFocused .dijitButtonContents, | |
81bea17a AD |
115 | .claro .dijitTextBoxErrorFocused, |
116 | .claro .dijitTextBoxErrorFocused .dijitButtonNode { | |
117 | border-color: @error-focused-border-color; | |
118 | } | |
119 | ||
120 | /* disabled state */ | |
f0cfe83e AD |
121 | .claro .dijitSelectDisabled, |
122 | .claro .dijitSelectDisabled .dijitButtonContents, | |
81bea17a AD |
123 | .claro .dijitTextBoxDisabled, |
124 | .claro .dijitTextBoxDisabled .dijitButtonNode { | |
125 | border-color: @disabled-border-color; | |
126 | } | |
f0cfe83e AD |
127 | |
128 | .claro .dijitSelectDisabled, | |
81bea17a AD |
129 | .claro .dijitTextBoxDisabled, |
130 | .claro .dijitTextBoxDisabled .dijitInputContainer { | |
131 | background-color: @textbox-disabled-background-color; | |
132 | background-image: none; | |
1354d172 | 133 | } |
f0cfe83e AD |
134 | |
135 | .claro .dijitSelectDisabled, | |
1354d172 AD |
136 | .claro .dijitTextBoxDisabled, |
137 | .claro .dijitTextBoxDisabled .dijitInputInner { | |
81bea17a AD |
138 | color: @disabled-text-color; |
139 | } | |
f0cfe83e AD |
140 | |
141 | .dj_webkit .claro .dijitDisabled input { | |
1354d172 AD |
142 | /* because WebKit lightens disabled input/textarea no matter what color you specify */ |
143 | color: darken(@disabled-text-color, 5%) | |
144 | } | |
f0cfe83e | 145 | |
1354d172 AD |
146 | .dj_webkit .claro textarea.dijitTextAreaDisabled { |
147 | /* because WebKit lightens disabled input/textarea no matter what color you specify */ | |
148 | color: darken(@disabled-text-color, 40%) | |
149 | } | |
81bea17a AD |
150 | |
151 | /*========================= for special widgets =========================*/ | |
152 | ||
153 | /* Input boxes with an arrow (for a drop down) */ | |
154 | ||
f0cfe83e | 155 | .claro .dijitSelect .dijitArrowButtonInner, |
81bea17a | 156 | .claro .dijitComboBox .dijitArrowButtonInner { |
1354d172 | 157 | background-image: url("../@{image-form-common-arrows}"); |
81bea17a AD |
158 | background-position:-35px 53%; |
159 | background-repeat: no-repeat; | |
160 | margin: 0; | |
161 | width:16px; | |
f0cfe83e AD |
162 | } |
163 | ||
164 | .claro .dijitComboBox .dijitArrowButtonInner { | |
81bea17a AD |
165 | border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button |
166 | } | |
167 | ||
168 | .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { | |
169 | border: none; | |
170 | } | |
171 | ||
172 | .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { | |
173 | border: none; | |
174 | } | |
175 | ||
176 | /* Add 1px vertical padding to the <input> where user types and the validation icon, | |
177 | to match the 1px border on arrow button */ | |
f0cfe83e | 178 | .claro .dijitSelectLabel, |
81bea17a | 179 | .claro .dijitTextBox .dijitInputInner, |
f0cfe83e | 180 | .claro .dijitValidationTextBox .dijitValidationContainer { |
81bea17a AD |
181 | padding: 1px 0; |
182 | } | |
183 | ||
184 | .claro .dijitComboBox .dijitButtonNode { | |
185 | background-color: @arrowbutton-background-color; | |
f0cfe83e | 186 | .standard-gradient("../"); |
81bea17a AD |
187 | } |
188 | ||
189 | /* Arrow "hover" effect: | |
190 | * The arrow button should change color whenever the mouse is in a position such that clicking it | |
191 | * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow | |
192 | * button, depending on the openOnClick setting for the widget. | |
193 | */ | |
194 | .claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, | |
6887a0f5 AK |
195 | .claro .dijitComboBox .dijitDownArrowButtonHover, |
196 | .claro .dijitComboBoxFocused .dijitArrowButton { | |
81bea17a AD |
197 | background-color:@arrowbutton-hovered-background-color; |
198 | } | |
f0cfe83e | 199 | |
81bea17a AD |
200 | .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, |
201 | .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { | |
202 | background-position:-70px 53%; | |
203 | } | |
204 | ||
205 | /* Arrow Button change when drop down is open */ | |
206 | .claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node | |
207 | background-color: @pressed-background-color; | |
f0cfe83e | 208 | .active-gradient("../"); |
81bea17a AD |
209 | padding: 1px; // Since no border on arrow button (see rule below) |
210 | } | |
f0cfe83e AD |
211 | |
212 | .dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { | |
213 | padding: 1px 0; | |
214 | } | |
215 | ||
81bea17a AD |
216 | .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { |
217 | background-position:-70px 53%; | |
218 | border: 0 none; | |
219 | } | |
220 | ||
221 | /* disabled state */ | |
222 | .claro div.dijitComboBoxDisabled .dijitArrowButtonInner { | |
223 | /* specific selector set to override background-position setting from Button.js | |
224 | * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ | |
225 | background-position:0 50%; | |
226 | background-color:@disabled-background-color; | |
227 | } | |
228 | ||
229 | /*========================= hacks for browsers =========================*/ | |
230 | /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ | |
231 | .dj_ff3 .claro .dijitInputField input[type="hidden"] { | |
232 | display: none; | |
233 | height: 0; | |
234 | width: 0; | |
235 | } | |
236 | ||
81bea17a AD |
237 | .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { |
238 | width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border) | |
239 | } | |
f0cfe83e | 240 | |
81bea17a AD |
241 | .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { |
242 | width:16px; // when no border, then back to 16px just like content-box sizing | |
1354d172 | 243 | } |