]>
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 AD |
29 | width: 0; |
30 | background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ | |
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. | |
55 | padding: @textbox-padding - 1px; | |
56 | } | |
57 | ||
f0cfe83e AD |
58 | .claro .dijitSelect, |
59 | .claro .dijitSelect .dijitButtonContents, | |
81bea17a AD |
60 | .claro .dijitTextBox, |
61 | .claro .dijitTextBox .dijitButtonNode { | |
62 | /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ | |
63 | border-color: @border-color; | |
64 | .transition-property(background-color, border); | |
65 | .transition-duration(.35s); | |
66 | } | |
f0cfe83e AD |
67 | |
68 | .claro .dijitSelect, | |
81bea17a AD |
69 | .claro .dijitTextBox { |
70 | background-color: @textbox-background-color; | |
71 | } | |
72 | ||
73 | /* hover */ | |
f0cfe83e AD |
74 | .claro .dijitSelectHover, |
75 | .claro .dijitSelectHover .dijitButtonContents, | |
81bea17a AD |
76 | .claro .dijitTextBoxHover, |
77 | .claro .dijitTextBoxHover .dijitButtonNode { | |
78 | border-color: @hovered-border-color; | |
79 | .transition-duration(.25s); | |
80 | } | |
f0cfe83e | 81 | |
81bea17a AD |
82 | .claro .dijitTextBoxHover { |
83 | background-color: @textbox-hovered-background-color; | |
f0cfe83e | 84 | .textbox-background-image; |
81bea17a AD |
85 | } |
86 | ||
87 | /* error state */ | |
f0cfe83e AD |
88 | .claro .dijitSelectError, |
89 | .claro .dijitSelectError .dijitButtonContents, | |
81bea17a AD |
90 | .claro .dijitTextBoxError, |
91 | .claro .dijitTextBoxError .dijitButtonNode { | |
92 | border-color: @error-border-color; | |
93 | } | |
81bea17a AD |
94 | |
95 | /* focused state */ | |
f0cfe83e AD |
96 | .claro .dijitSelectFocused, |
97 | .claro .dijitSelectFocused .dijitButtonContents, | |
81bea17a AD |
98 | .claro .dijitTextBoxFocused, |
99 | .claro .dijitTextBoxFocused .dijitButtonNode { | |
100 | border-color:@focused-border-color; | |
101 | .transition-duration(.1s); | |
102 | } | |
f0cfe83e | 103 | |
81bea17a AD |
104 | .claro .dijitTextBoxFocused { |
105 | background-color: @textbox-focused-background-color; | |
f0cfe83e | 106 | .textbox-background-image; |
81bea17a AD |
107 | } |
108 | .claro .dijitTextBoxFocused .dijitInputContainer { | |
109 | background: @textbox-focused-background-color; | |
110 | } | |
111 | ||
f0cfe83e AD |
112 | .claro .dijitSelectErrorFocused, |
113 | .claro .dijitSelectErrorFocused .dijitButtonContents, | |
81bea17a AD |
114 | .claro .dijitTextBoxErrorFocused, |
115 | .claro .dijitTextBoxErrorFocused .dijitButtonNode { | |
116 | border-color: @error-focused-border-color; | |
117 | } | |
118 | ||
119 | /* disabled state */ | |
f0cfe83e AD |
120 | .claro .dijitSelectDisabled, |
121 | .claro .dijitSelectDisabled .dijitButtonContents, | |
81bea17a AD |
122 | .claro .dijitTextBoxDisabled, |
123 | .claro .dijitTextBoxDisabled .dijitButtonNode { | |
124 | border-color: @disabled-border-color; | |
125 | } | |
f0cfe83e AD |
126 | |
127 | .claro .dijitSelectDisabled, | |
81bea17a AD |
128 | .claro .dijitTextBoxDisabled, |
129 | .claro .dijitTextBoxDisabled .dijitInputContainer { | |
130 | background-color: @textbox-disabled-background-color; | |
131 | background-image: none; | |
1354d172 | 132 | } |
f0cfe83e AD |
133 | |
134 | .claro .dijitSelectDisabled, | |
1354d172 AD |
135 | .claro .dijitTextBoxDisabled, |
136 | .claro .dijitTextBoxDisabled .dijitInputInner { | |
81bea17a AD |
137 | color: @disabled-text-color; |
138 | } | |
f0cfe83e AD |
139 | |
140 | .dj_webkit .claro .dijitDisabled input { | |
1354d172 AD |
141 | /* because WebKit lightens disabled input/textarea no matter what color you specify */ |
142 | color: darken(@disabled-text-color, 5%) | |
143 | } | |
f0cfe83e | 144 | |
1354d172 AD |
145 | .dj_webkit .claro textarea.dijitTextAreaDisabled { |
146 | /* because WebKit lightens disabled input/textarea no matter what color you specify */ | |
147 | color: darken(@disabled-text-color, 40%) | |
148 | } | |
81bea17a AD |
149 | |
150 | /*========================= for special widgets =========================*/ | |
151 | ||
152 | /* Input boxes with an arrow (for a drop down) */ | |
153 | ||
f0cfe83e | 154 | .claro .dijitSelect .dijitArrowButtonInner, |
81bea17a | 155 | .claro .dijitComboBox .dijitArrowButtonInner { |
1354d172 | 156 | background-image: url("../@{image-form-common-arrows}"); |
81bea17a AD |
157 | background-position:-35px 53%; |
158 | background-repeat: no-repeat; | |
159 | margin: 0; | |
160 | width:16px; | |
f0cfe83e AD |
161 | } |
162 | ||
163 | .claro .dijitComboBox .dijitArrowButtonInner { | |
81bea17a AD |
164 | border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button |
165 | } | |
166 | ||
167 | .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { | |
168 | border: none; | |
169 | } | |
170 | ||
171 | .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { | |
172 | border: none; | |
173 | } | |
174 | ||
175 | /* Add 1px vertical padding to the <input> where user types and the validation icon, | |
176 | to match the 1px border on arrow button */ | |
f0cfe83e | 177 | .claro .dijitSelectLabel, |
81bea17a | 178 | .claro .dijitTextBox .dijitInputInner, |
f0cfe83e | 179 | .claro .dijitValidationTextBox .dijitValidationContainer { |
81bea17a AD |
180 | padding: 1px 0; |
181 | } | |
182 | ||
183 | .claro .dijitComboBox .dijitButtonNode { | |
184 | background-color: @arrowbutton-background-color; | |
f0cfe83e | 185 | .standard-gradient("../"); |
81bea17a AD |
186 | } |
187 | ||
188 | /* Arrow "hover" effect: | |
189 | * The arrow button should change color whenever the mouse is in a position such that clicking it | |
190 | * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow | |
191 | * button, depending on the openOnClick setting for the widget. | |
192 | */ | |
193 | .claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, | |
194 | .claro .dijitComboBox .dijitDownArrowButtonHover { | |
195 | background-color:@arrowbutton-hovered-background-color; | |
196 | } | |
f0cfe83e | 197 | |
81bea17a AD |
198 | .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, |
199 | .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { | |
200 | background-position:-70px 53%; | |
201 | } | |
202 | ||
203 | /* Arrow Button change when drop down is open */ | |
204 | .claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node | |
205 | background-color: @pressed-background-color; | |
f0cfe83e | 206 | .active-gradient("../"); |
81bea17a AD |
207 | padding: 1px; // Since no border on arrow button (see rule below) |
208 | } | |
f0cfe83e AD |
209 | |
210 | .dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { | |
211 | padding: 1px 0; | |
212 | } | |
213 | ||
81bea17a AD |
214 | .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { |
215 | background-position:-70px 53%; | |
216 | border: 0 none; | |
217 | } | |
218 | ||
219 | /* disabled state */ | |
220 | .claro div.dijitComboBoxDisabled .dijitArrowButtonInner { | |
221 | /* specific selector set to override background-position setting from Button.js | |
222 | * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ | |
223 | background-position:0 50%; | |
224 | background-color:@disabled-background-color; | |
225 | } | |
226 | ||
227 | /*========================= hacks for browsers =========================*/ | |
228 | /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ | |
229 | .dj_ff3 .claro .dijitInputField input[type="hidden"] { | |
230 | display: none; | |
231 | height: 0; | |
232 | width: 0; | |
233 | } | |
234 | ||
81bea17a AD |
235 | .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { |
236 | width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border) | |
237 | } | |
f0cfe83e | 238 | |
81bea17a AD |
239 | .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { |
240 | width:16px; // when no border, then back to 16px just like content-box sizing | |
1354d172 | 241 | } |