]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* claro/form/Common.css */ |
2 | /*========================= common css =========================*/ | |
3 | /* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ | |
1354d172 AD |
4 | .claro .dijitTextBox, .claro .dijitInputInner { |
5 | color: #000000; | |
6 | } | |
f0cfe83e | 7 | .claro .dijitValidationTextBoxError .dijitValidationContainer { |
81bea17a | 8 | background-color: #d46464; |
1354d172 | 9 | background-image: url("../form/images/error.png"); |
81bea17a AD |
10 | background-position: top center; |
11 | border: solid #d46464 0; | |
81bea17a | 12 | width: 9px; |
2f01fe57 | 13 | } |
f0cfe83e AD |
14 | .claro .dijitTextBoxError .dijitValidationContainer { |
15 | border-left-width: 1px; | |
16 | } | |
17 | .claro .dijitValidationTextBoxError .dijitValidationIcon { | |
81bea17a AD |
18 | width: 0; |
19 | background-color: transparent !important; | |
20 | /* so the INPUT doesn't obscure the border in rtl+a11y */ | |
21 | ||
22 | } | |
23 | /* Padding for the input area of TextBox based widgets, and corresponding padding for the | |
24 | * down arrow button and the placeholder. placeholder is explicitly listed because | |
25 | * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField | |
26 | * won't affect it | |
27 | */ | |
28 | .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { | |
29 | padding: 2px; | |
2f01fe57 | 30 | } |
f0cfe83e | 31 | .claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField { |
81bea17a AD |
32 | padding: 1px 2px; |
33 | } | |
34 | .dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { | |
35 | padding: 1px; | |
2f01fe57 | 36 | } |
f0cfe83e AD |
37 | .claro .dijitSelect, |
38 | .claro .dijitSelect .dijitButtonContents, | |
39 | .claro .dijitTextBox, | |
40 | .claro .dijitTextBox .dijitButtonNode { | |
81bea17a AD |
41 | /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ |
42 | ||
43 | border-color: #b5bcc7; | |
44 | -webkit-transition-property: background-color, border; | |
45 | -moz-transition-property: background-color, border; | |
46 | transition-property: background-color, border; | |
47 | -webkit-transition-duration: 0.35s; | |
48 | -moz-transition-duration: 0.35s; | |
49 | transition-duration: 0.35s; | |
2f01fe57 | 50 | } |
f0cfe83e | 51 | .claro .dijitSelect, .claro .dijitTextBox { |
81bea17a | 52 | background-color: #ffffff; |
2f01fe57 | 53 | } |
81bea17a | 54 | /* hover */ |
f0cfe83e AD |
55 | .claro .dijitSelectHover, |
56 | .claro .dijitSelectHover .dijitButtonContents, | |
57 | .claro .dijitTextBoxHover, | |
58 | .claro .dijitTextBoxHover .dijitButtonNode { | |
1354d172 | 59 | border-color: #759dc0; |
81bea17a AD |
60 | -webkit-transition-duration: 0.25s; |
61 | -moz-transition-duration: 0.25s; | |
62 | transition-duration: 0.25s; | |
2f01fe57 AD |
63 | } |
64 | .claro .dijitTextBoxHover { | |
1354d172 | 65 | background-color: #e5f2fe; |
f0cfe83e AD |
66 | background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); |
67 | background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); | |
68 | background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); | |
69 | background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); | |
2f01fe57 | 70 | } |
81bea17a | 71 | /* error state */ |
f0cfe83e AD |
72 | .claro .dijitSelectError, |
73 | .claro .dijitSelectError .dijitButtonContents, | |
74 | .claro .dijitTextBoxError, | |
75 | .claro .dijitTextBoxError .dijitButtonNode { | |
81bea17a | 76 | border-color: #d46464; |
2f01fe57 | 77 | } |
81bea17a | 78 | /* focused state */ |
f0cfe83e AD |
79 | .claro .dijitSelectFocused, |
80 | .claro .dijitSelectFocused .dijitButtonContents, | |
81 | .claro .dijitTextBoxFocused, | |
82 | .claro .dijitTextBoxFocused .dijitButtonNode { | |
1354d172 | 83 | border-color: #759dc0; |
81bea17a AD |
84 | -webkit-transition-duration: 0.1s; |
85 | -moz-transition-duration: 0.1s; | |
86 | transition-duration: 0.1s; | |
2f01fe57 AD |
87 | } |
88 | .claro .dijitTextBoxFocused { | |
81bea17a | 89 | background-color: #ffffff; |
f0cfe83e AD |
90 | background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); |
91 | background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); | |
92 | background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); | |
93 | background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); | |
2f01fe57 AD |
94 | } |
95 | .claro .dijitTextBoxFocused .dijitInputContainer { | |
81bea17a | 96 | background: #ffffff; |
2f01fe57 | 97 | } |
f0cfe83e AD |
98 | .claro .dijitSelectErrorFocused, |
99 | .claro .dijitSelectErrorFocused .dijitButtonContents, | |
100 | .claro .dijitTextBoxErrorFocused, | |
101 | .claro .dijitTextBoxErrorFocused .dijitButtonNode { | |
1354d172 | 102 | border-color: #ce5050; |
2f01fe57 | 103 | } |
81bea17a | 104 | /* disabled state */ |
f0cfe83e AD |
105 | .claro .dijitSelectDisabled, |
106 | .claro .dijitSelectDisabled .dijitButtonContents, | |
107 | .claro .dijitTextBoxDisabled, | |
108 | .claro .dijitTextBoxDisabled .dijitButtonNode { | |
81bea17a | 109 | border-color: #d3d3d3; |
2f01fe57 | 110 | } |
f0cfe83e | 111 | .claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { |
81bea17a AD |
112 | background-color: #efefef; |
113 | background-image: none; | |
1354d172 | 114 | } |
f0cfe83e | 115 | .claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { |
81bea17a | 116 | color: #818181; |
2f01fe57 | 117 | } |
f0cfe83e | 118 | .dj_webkit .claro .dijitDisabled input { |
1354d172 AD |
119 | /* because WebKit lightens disabled input/textarea no matter what color you specify */ |
120 | ||
121 | color: #757575; | |
122 | } | |
123 | .dj_webkit .claro textarea.dijitTextAreaDisabled { | |
124 | /* because WebKit lightens disabled input/textarea no matter what color you specify */ | |
125 | ||
126 | color: #1b1b1b; | |
127 | } | |
81bea17a AD |
128 | /*========================= for special widgets =========================*/ |
129 | /* Input boxes with an arrow (for a drop down) */ | |
f0cfe83e | 130 | .claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner { |
1354d172 | 131 | background-image: url("../form/images/commonFormArrows.png"); |
81bea17a AD |
132 | background-position: -35px 53%; |
133 | background-repeat: no-repeat; | |
134 | margin: 0; | |
135 | width: 16px; | |
f0cfe83e AD |
136 | } |
137 | .claro .dijitComboBox .dijitArrowButtonInner { | |
81bea17a | 138 | border: 1px solid #ffffff; |
2f01fe57 | 139 | } |
81bea17a AD |
140 | .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { |
141 | border: none; | |
2f01fe57 | 142 | } |
81bea17a AD |
143 | .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { |
144 | border: none; | |
2f01fe57 | 145 | } |
81bea17a AD |
146 | /* Add 1px vertical padding to the <input> where user types and the validation icon, |
147 | to match the 1px border on arrow button */ | |
f0cfe83e | 148 | .claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer { |
81bea17a | 149 | padding: 1px 0; |
2f01fe57 AD |
150 | } |
151 | .claro .dijitComboBox .dijitButtonNode { | |
81bea17a | 152 | background-color: #efefef; |
f0cfe83e | 153 | background-image: url("../images/standardGradient.png"); |
81bea17a | 154 | background-repeat: repeat-x; |
f0cfe83e AD |
155 | background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); |
156 | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
157 | background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
158 | background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); | |
159 | _background-image: none; | |
81bea17a AD |
160 | } |
161 | /* Arrow "hover" effect: | |
162 | * The arrow button should change color whenever the mouse is in a position such that clicking it | |
163 | * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow | |
164 | * button, depending on the openOnClick setting for the widget. | |
165 | */ | |
166 | .claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover { | |
167 | background-color: #abd6ff; | |
168 | } | |
169 | .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { | |
170 | background-position: -70px 53%; | |
171 | } | |
172 | /* Arrow Button change when drop down is open */ | |
173 | .claro .dijitComboBox .dijitHasDropDownOpen { | |
1354d172 | 174 | background-color: #7dbdfa; |
f0cfe83e AD |
175 | background-image: url("../images/activeGradient.png"); |
176 | background-repeat: repeat-x; | |
177 | background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
178 | background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
179 | background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
180 | background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); | |
181 | _background-image: none; | |
81bea17a AD |
182 | padding: 1px; |
183 | } | |
f0cfe83e AD |
184 | .dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { |
185 | padding: 1px 0; | |
186 | } | |
81bea17a AD |
187 | .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { |
188 | background-position: -70px 53%; | |
189 | border: 0 none; | |
190 | } | |
191 | /* disabled state */ | |
2f01fe57 | 192 | .claro div.dijitComboBoxDisabled .dijitArrowButtonInner { |
81bea17a AD |
193 | /* specific selector set to override background-position setting from Button.js |
194 | * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ | |
195 | ||
196 | background-position: 0 50%; | |
197 | background-color: #efefef; | |
2f01fe57 | 198 | } |
81bea17a AD |
199 | /*========================= hacks for browsers =========================*/ |
200 | /* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ | |
2f01fe57 | 201 | .dj_ff3 .claro .dijitInputField input[type="hidden"] { |
81bea17a AD |
202 | display: none; |
203 | height: 0; | |
204 | width: 0; | |
2f01fe57 | 205 | } |
81bea17a AD |
206 | .dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { |
207 | width: 18px; | |
2f01fe57 | 208 | } |
81bea17a AD |
209 | .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { |
210 | width: 16px; | |
2f01fe57 | 211 | } |