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