root / astakos / im / static / im / grnetstyles / less / forms.less @ 13858d75
History | View | Annotate | Download (9.2 kB)
1 | 13858d75 | Kostas Papadimitriou | /* Forms.less |
---|---|---|---|
2 | 13858d75 | Kostas Papadimitriou | * Base styles for various input types, form layouts, and states |
3 | 13858d75 | Kostas Papadimitriou | * ------------------------------------------------------------- */ |
4 | 13858d75 | Kostas Papadimitriou | |
5 | 13858d75 | Kostas Papadimitriou | |
6 | 13858d75 | Kostas Papadimitriou | // FORM STYLES |
7 | 13858d75 | Kostas Papadimitriou | // ----------- |
8 | 13858d75 | Kostas Papadimitriou | |
9 | 13858d75 | Kostas Papadimitriou | form { |
10 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
11 | 13858d75 | Kostas Papadimitriou | } |
12 | 13858d75 | Kostas Papadimitriou | |
13 | 13858d75 | Kostas Papadimitriou | // Groups of fields with labels on top (legends) |
14 | 13858d75 | Kostas Papadimitriou | fieldset { |
15 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
16 | 13858d75 | Kostas Papadimitriou | padding-top: @baseline; |
17 | 13858d75 | Kostas Papadimitriou | legend { |
18 | 13858d75 | Kostas Papadimitriou | display: block; |
19 | 13858d75 | Kostas Papadimitriou | padding-left: 150px; |
20 | 13858d75 | Kostas Papadimitriou | font-size: @basefont * 1.5; |
21 | 13858d75 | Kostas Papadimitriou | line-height: 1; |
22 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
23 | 13858d75 | Kostas Papadimitriou | *padding: 0 0 5px 145px; /* IE6-7 */ |
24 | 13858d75 | Kostas Papadimitriou | *line-height: 1.5; /* IE6-7 */ |
25 | 13858d75 | Kostas Papadimitriou | } |
26 | 13858d75 | Kostas Papadimitriou | } |
27 | 13858d75 | Kostas Papadimitriou | |
28 | 13858d75 | Kostas Papadimitriou | // Parent element that clears floats and wraps labels and fields together |
29 | 13858d75 | Kostas Papadimitriou | form .clearfix { |
30 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
31 | 13858d75 | Kostas Papadimitriou | .clearfix() |
32 | 13858d75 | Kostas Papadimitriou | } |
33 | 13858d75 | Kostas Papadimitriou | |
34 | 13858d75 | Kostas Papadimitriou | // Set font for forms |
35 | 13858d75 | Kostas Papadimitriou | label, |
36 | 13858d75 | Kostas Papadimitriou | input, |
37 | 13858d75 | Kostas Papadimitriou | select, |
38 | 13858d75 | Kostas Papadimitriou | textarea { |
39 | 13858d75 | Kostas Papadimitriou | #font > .sans-serif(normal,13px,normal); |
40 | 13858d75 | Kostas Papadimitriou | } |
41 | 13858d75 | Kostas Papadimitriou | |
42 | 13858d75 | Kostas Papadimitriou | // Float labels left |
43 | 13858d75 | Kostas Papadimitriou | label { |
44 | 13858d75 | Kostas Papadimitriou | padding-top: 6px; |
45 | 13858d75 | Kostas Papadimitriou | font-size: @basefont; |
46 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
47 | 13858d75 | Kostas Papadimitriou | float: left; |
48 | 13858d75 | Kostas Papadimitriou | width: 130px; |
49 | 13858d75 | Kostas Papadimitriou | text-align: right; |
50 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
51 | 13858d75 | Kostas Papadimitriou | } |
52 | 13858d75 | Kostas Papadimitriou | |
53 | 13858d75 | Kostas Papadimitriou | // Shift over the inside div to align all label's relevant content |
54 | 13858d75 | Kostas Papadimitriou | form .input { |
55 | 13858d75 | Kostas Papadimitriou | margin-left: 150px; |
56 | 13858d75 | Kostas Papadimitriou | } |
57 | 13858d75 | Kostas Papadimitriou | |
58 | 13858d75 | Kostas Papadimitriou | // Checkboxs and radio buttons |
59 | 13858d75 | Kostas Papadimitriou | input[type=checkbox], |
60 | 13858d75 | Kostas Papadimitriou | input[type=radio] { |
61 | 13858d75 | Kostas Papadimitriou | cursor: pointer; |
62 | 13858d75 | Kostas Papadimitriou | } |
63 | 13858d75 | Kostas Papadimitriou | |
64 | 13858d75 | Kostas Papadimitriou | // Inputs, Textareas, Selects |
65 | 13858d75 | Kostas Papadimitriou | input, |
66 | 13858d75 | Kostas Papadimitriou | textarea, |
67 | 13858d75 | Kostas Papadimitriou | select, |
68 | 13858d75 | Kostas Papadimitriou | .uneditable-input { |
69 | 13858d75 | Kostas Papadimitriou | display: inline-block; |
70 | 13858d75 | Kostas Papadimitriou | width: 210px; |
71 | 13858d75 | Kostas Papadimitriou | height: @baseline; |
72 | 13858d75 | Kostas Papadimitriou | padding: 4px; |
73 | 13858d75 | Kostas Papadimitriou | font-size: @basefont; |
74 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
75 | 13858d75 | Kostas Papadimitriou | color: @gray; |
76 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ccc; |
77 | 13858d75 | Kostas Papadimitriou | .border-radius(3px); |
78 | 13858d75 | Kostas Papadimitriou | } |
79 | 13858d75 | Kostas Papadimitriou | |
80 | 13858d75 | Kostas Papadimitriou | // remove padding from select |
81 | 13858d75 | Kostas Papadimitriou | select { |
82 | 13858d75 | Kostas Papadimitriou | padding: initial; |
83 | 13858d75 | Kostas Papadimitriou | } |
84 | 13858d75 | Kostas Papadimitriou | |
85 | 13858d75 | Kostas Papadimitriou | // mini reset for non-html5 file types |
86 | 13858d75 | Kostas Papadimitriou | input[type=checkbox], |
87 | 13858d75 | Kostas Papadimitriou | input[type=radio] { |
88 | 13858d75 | Kostas Papadimitriou | width: auto; |
89 | 13858d75 | Kostas Papadimitriou | height: auto; |
90 | 13858d75 | Kostas Papadimitriou | padding: 0; |
91 | 13858d75 | Kostas Papadimitriou | margin: 3px 0; |
92 | 13858d75 | Kostas Papadimitriou | *margin-top: 0; /* IE6-7 */ |
93 | 13858d75 | Kostas Papadimitriou | line-height: normal; |
94 | 13858d75 | Kostas Papadimitriou | border: none; |
95 | 13858d75 | Kostas Papadimitriou | } |
96 | 13858d75 | Kostas Papadimitriou | |
97 | 13858d75 | Kostas Papadimitriou | input[type=file] { |
98 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
99 | 13858d75 | Kostas Papadimitriou | padding: initial; |
100 | 13858d75 | Kostas Papadimitriou | border: initial; |
101 | 13858d75 | Kostas Papadimitriou | line-height: initial; |
102 | 13858d75 | Kostas Papadimitriou | .box-shadow(none); |
103 | 13858d75 | Kostas Papadimitriou | } |
104 | 13858d75 | Kostas Papadimitriou | |
105 | 13858d75 | Kostas Papadimitriou | input[type=button], |
106 | 13858d75 | Kostas Papadimitriou | input[type=reset], |
107 | 13858d75 | Kostas Papadimitriou | input[type=submit] { |
108 | 13858d75 | Kostas Papadimitriou | width: auto; |
109 | 13858d75 | Kostas Papadimitriou | height: auto; |
110 | 13858d75 | Kostas Papadimitriou | } |
111 | 13858d75 | Kostas Papadimitriou | |
112 | 13858d75 | Kostas Papadimitriou | select, |
113 | 13858d75 | Kostas Papadimitriou | input[type=file] { |
114 | 13858d75 | Kostas Papadimitriou | height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size |
115 | 13858d75 | Kostas Papadimitriou | *height: auto; // Reset for IE7 |
116 | 13858d75 | Kostas Papadimitriou | line-height: @baseline * 1.5; |
117 | 13858d75 | Kostas Papadimitriou | *margin-top: 4px; /* For IE7, add top margin to align select with labels */ |
118 | 13858d75 | Kostas Papadimitriou | } |
119 | 13858d75 | Kostas Papadimitriou | |
120 | 13858d75 | Kostas Papadimitriou | // Make multiple select elements height not fixed |
121 | 13858d75 | Kostas Papadimitriou | select[multiple] { |
122 | 13858d75 | Kostas Papadimitriou | height: inherit; |
123 | 13858d75 | Kostas Papadimitriou | background-color: @white; // Fixes Chromium bug of unreadable items |
124 | 13858d75 | Kostas Papadimitriou | } |
125 | 13858d75 | Kostas Papadimitriou | |
126 | 13858d75 | Kostas Papadimitriou | textarea { |
127 | 13858d75 | Kostas Papadimitriou | height: auto; |
128 | 13858d75 | Kostas Papadimitriou | } |
129 | 13858d75 | Kostas Papadimitriou | |
130 | 13858d75 | Kostas Papadimitriou | // For text that needs to appear as an input but should not be an input |
131 | 13858d75 | Kostas Papadimitriou | .uneditable-input { |
132 | 13858d75 | Kostas Papadimitriou | background-color: @white; |
133 | 13858d75 | Kostas Papadimitriou | display: block; |
134 | 13858d75 | Kostas Papadimitriou | border-color: #eee; |
135 | 13858d75 | Kostas Papadimitriou | .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); |
136 | 13858d75 | Kostas Papadimitriou | cursor: not-allowed; |
137 | 13858d75 | Kostas Papadimitriou | } |
138 | 13858d75 | Kostas Papadimitriou | |
139 | 13858d75 | Kostas Papadimitriou | // Placeholder text gets special styles; can't be bundled together though for some reason |
140 | 13858d75 | Kostas Papadimitriou | :-moz-placeholder { |
141 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
142 | 13858d75 | Kostas Papadimitriou | } |
143 | 13858d75 | Kostas Papadimitriou | ::-webkit-input-placeholder { |
144 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
145 | 13858d75 | Kostas Papadimitriou | } |
146 | 13858d75 | Kostas Papadimitriou | |
147 | 13858d75 | Kostas Papadimitriou | // Focus states |
148 | 13858d75 | Kostas Papadimitriou | input, |
149 | 13858d75 | Kostas Papadimitriou | textarea { |
150 | 13858d75 | Kostas Papadimitriou | @transition: border linear .2s, box-shadow linear .2s; |
151 | 13858d75 | Kostas Papadimitriou | .transition(@transition); |
152 | 13858d75 | Kostas Papadimitriou | .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); |
153 | 13858d75 | Kostas Papadimitriou | } |
154 | 13858d75 | Kostas Papadimitriou | input:focus, |
155 | 13858d75 | Kostas Papadimitriou | textarea:focus { |
156 | 13858d75 | Kostas Papadimitriou | outline: 0; |
157 | 13858d75 | Kostas Papadimitriou | border-color: rgba(82,168,236,.8); |
158 | 13858d75 | Kostas Papadimitriou | @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); |
159 | 13858d75 | Kostas Papadimitriou | .box-shadow(@shadow); |
160 | 13858d75 | Kostas Papadimitriou | } |
161 | 13858d75 | Kostas Papadimitriou | input[type=file]:focus, |
162 | 13858d75 | Kostas Papadimitriou | input[type=checkbox]:focus, |
163 | 13858d75 | Kostas Papadimitriou | select:focus { |
164 | 13858d75 | Kostas Papadimitriou | .box-shadow(none); // override for file inputs |
165 | 13858d75 | Kostas Papadimitriou | outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline |
166 | 13858d75 | Kostas Papadimitriou | } |
167 | 13858d75 | Kostas Papadimitriou | |
168 | 13858d75 | Kostas Papadimitriou | |
169 | 13858d75 | Kostas Papadimitriou | // FORM FIELD FEEDBACK STATES |
170 | 13858d75 | Kostas Papadimitriou | // -------------------------- |
171 | 13858d75 | Kostas Papadimitriou | |
172 | 13858d75 | Kostas Papadimitriou | // Mixin for form field states |
173 | 13858d75 | Kostas Papadimitriou | .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { |
174 | 13858d75 | Kostas Papadimitriou | // Set the text color |
175 | 13858d75 | Kostas Papadimitriou | > label, |
176 | 13858d75 | Kostas Papadimitriou | .help-block, |
177 | 13858d75 | Kostas Papadimitriou | .help-inline { |
178 | 13858d75 | Kostas Papadimitriou | color: @textColor; |
179 | 13858d75 | Kostas Papadimitriou | } |
180 | 13858d75 | Kostas Papadimitriou | // Style inputs accordingly |
181 | 13858d75 | Kostas Papadimitriou | input, |
182 | 13858d75 | Kostas Papadimitriou | textarea { |
183 | 13858d75 | Kostas Papadimitriou | color: @textColor; |
184 | 13858d75 | Kostas Papadimitriou | border-color: @borderColor; |
185 | 13858d75 | Kostas Papadimitriou | &:focus { |
186 | 13858d75 | Kostas Papadimitriou | border-color: darken(@borderColor, 10%); |
187 | 13858d75 | Kostas Papadimitriou | .box-shadow(0 0 6px lighten(@borderColor, 20%)); |
188 | 13858d75 | Kostas Papadimitriou | } |
189 | 13858d75 | Kostas Papadimitriou | } |
190 | 13858d75 | Kostas Papadimitriou | // Give a small background color for input-prepend/-append |
191 | 13858d75 | Kostas Papadimitriou | .input-prepend .add-on, |
192 | 13858d75 | Kostas Papadimitriou | .input-append .add-on { |
193 | 13858d75 | Kostas Papadimitriou | color: @textColor; |
194 | 13858d75 | Kostas Papadimitriou | background-color: @backgroundColor; |
195 | 13858d75 | Kostas Papadimitriou | border-color: @textColor; |
196 | 13858d75 | Kostas Papadimitriou | } |
197 | 13858d75 | Kostas Papadimitriou | } |
198 | 13858d75 | Kostas Papadimitriou | // Error |
199 | 13858d75 | Kostas Papadimitriou | form .clearfix.error { |
200 | 13858d75 | Kostas Papadimitriou | .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); |
201 | 13858d75 | Kostas Papadimitriou | } |
202 | 13858d75 | Kostas Papadimitriou | // Warning |
203 | 13858d75 | Kostas Papadimitriou | form .clearfix.warning { |
204 | 13858d75 | Kostas Papadimitriou | .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); |
205 | 13858d75 | Kostas Papadimitriou | } |
206 | 13858d75 | Kostas Papadimitriou | // Success |
207 | 13858d75 | Kostas Papadimitriou | form .clearfix.success { |
208 | 13858d75 | Kostas Papadimitriou | .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); |
209 | 13858d75 | Kostas Papadimitriou | } |
210 | 13858d75 | Kostas Papadimitriou | |
211 | 13858d75 | Kostas Papadimitriou | |
212 | 13858d75 | Kostas Papadimitriou | // Form element sizes |
213 | 13858d75 | Kostas Papadimitriou | // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes |
214 | 13858d75 | Kostas Papadimitriou | .input-mini, |
215 | 13858d75 | Kostas Papadimitriou | input.mini, |
216 | 13858d75 | Kostas Papadimitriou | textarea.mini, |
217 | 13858d75 | Kostas Papadimitriou | select.mini { |
218 | 13858d75 | Kostas Papadimitriou | width: 60px; |
219 | 13858d75 | Kostas Papadimitriou | } |
220 | 13858d75 | Kostas Papadimitriou | .input-small, |
221 | 13858d75 | Kostas Papadimitriou | input.small, |
222 | 13858d75 | Kostas Papadimitriou | textarea.small, |
223 | 13858d75 | Kostas Papadimitriou | select.small { |
224 | 13858d75 | Kostas Papadimitriou | width: 90px; |
225 | 13858d75 | Kostas Papadimitriou | } |
226 | 13858d75 | Kostas Papadimitriou | .input-medium, |
227 | 13858d75 | Kostas Papadimitriou | input.medium, |
228 | 13858d75 | Kostas Papadimitriou | textarea.medium, |
229 | 13858d75 | Kostas Papadimitriou | select.medium { |
230 | 13858d75 | Kostas Papadimitriou | width: 150px; |
231 | 13858d75 | Kostas Papadimitriou | } |
232 | 13858d75 | Kostas Papadimitriou | .input-large, |
233 | 13858d75 | Kostas Papadimitriou | input.large, |
234 | 13858d75 | Kostas Papadimitriou | textarea.large, |
235 | 13858d75 | Kostas Papadimitriou | select.large { |
236 | 13858d75 | Kostas Papadimitriou | width: 210px; |
237 | 13858d75 | Kostas Papadimitriou | } |
238 | 13858d75 | Kostas Papadimitriou | .input-xlarge, |
239 | 13858d75 | Kostas Papadimitriou | input.xlarge, |
240 | 13858d75 | Kostas Papadimitriou | textarea.xlarge, |
241 | 13858d75 | Kostas Papadimitriou | select.xlarge { |
242 | 13858d75 | Kostas Papadimitriou | width: 270px; |
243 | 13858d75 | Kostas Papadimitriou | } |
244 | 13858d75 | Kostas Papadimitriou | .input-xxlarge, |
245 | 13858d75 | Kostas Papadimitriou | input.xxlarge, |
246 | 13858d75 | Kostas Papadimitriou | textarea.xxlarge, |
247 | 13858d75 | Kostas Papadimitriou | select.xxlarge { |
248 | 13858d75 | Kostas Papadimitriou | width: 530px; |
249 | 13858d75 | Kostas Papadimitriou | } |
250 | 13858d75 | Kostas Papadimitriou | textarea.xxlarge { |
251 | 13858d75 | Kostas Papadimitriou | overflow-y: auto; |
252 | 13858d75 | Kostas Papadimitriou | } |
253 | 13858d75 | Kostas Papadimitriou | |
254 | 13858d75 | Kostas Papadimitriou | // Grid style input sizes |
255 | 13858d75 | Kostas Papadimitriou | // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border |
256 | 13858d75 | Kostas Papadimitriou | .formColumns(@columnSpan: 1) { |
257 | 13858d75 | Kostas Papadimitriou | display: inline-block; |
258 | 13858d75 | Kostas Papadimitriou | float: none; |
259 | 13858d75 | Kostas Papadimitriou | width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; |
260 | 13858d75 | Kostas Papadimitriou | margin-left: 0; |
261 | 13858d75 | Kostas Papadimitriou | } |
262 | 13858d75 | Kostas Papadimitriou | input, |
263 | 13858d75 | Kostas Papadimitriou | textarea { |
264 | 13858d75 | Kostas Papadimitriou | // Default columns |
265 | 13858d75 | Kostas Papadimitriou | &.span1 { .formColumns(1); } |
266 | 13858d75 | Kostas Papadimitriou | &.span2 { .formColumns(2); } |
267 | 13858d75 | Kostas Papadimitriou | &.span3 { .formColumns(3); } |
268 | 13858d75 | Kostas Papadimitriou | &.span4 { .formColumns(4); } |
269 | 13858d75 | Kostas Papadimitriou | &.span5 { .formColumns(5); } |
270 | 13858d75 | Kostas Papadimitriou | &.span6 { .formColumns(6); } |
271 | 13858d75 | Kostas Papadimitriou | &.span7 { .formColumns(7); } |
272 | 13858d75 | Kostas Papadimitriou | &.span8 { .formColumns(8); } |
273 | 13858d75 | Kostas Papadimitriou | &.span9 { .formColumns(9); } |
274 | 13858d75 | Kostas Papadimitriou | &.span10 { .formColumns(10); } |
275 | 13858d75 | Kostas Papadimitriou | &.span11 { .formColumns(11); } |
276 | 13858d75 | Kostas Papadimitriou | &.span12 { .formColumns(12); } |
277 | 13858d75 | Kostas Papadimitriou | &.span13 { .formColumns(13); } |
278 | 13858d75 | Kostas Papadimitriou | &.span14 { .formColumns(14); } |
279 | 13858d75 | Kostas Papadimitriou | &.span15 { .formColumns(15); } |
280 | 13858d75 | Kostas Papadimitriou | &.span16 { .formColumns(16); } |
281 | 13858d75 | Kostas Papadimitriou | } |
282 | 13858d75 | Kostas Papadimitriou | |
283 | 13858d75 | Kostas Papadimitriou | // Disabled and read-only inputs |
284 | 13858d75 | Kostas Papadimitriou | input[disabled], |
285 | 13858d75 | Kostas Papadimitriou | select[disabled], |
286 | 13858d75 | Kostas Papadimitriou | textarea[disabled], |
287 | 13858d75 | Kostas Papadimitriou | input[readonly], |
288 | 13858d75 | Kostas Papadimitriou | select[readonly], |
289 | 13858d75 | Kostas Papadimitriou | textarea[readonly] { |
290 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
291 | 13858d75 | Kostas Papadimitriou | border-color: #ddd; |
292 | 13858d75 | Kostas Papadimitriou | cursor: not-allowed; |
293 | 13858d75 | Kostas Papadimitriou | } |
294 | 13858d75 | Kostas Papadimitriou | |
295 | 13858d75 | Kostas Papadimitriou | // Actions (the buttons) |
296 | 13858d75 | Kostas Papadimitriou | .actions { |
297 | 13858d75 | Kostas Papadimitriou | background: #f5f5f5; |
298 | 13858d75 | Kostas Papadimitriou | margin-top: @baseline; |
299 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
300 | 13858d75 | Kostas Papadimitriou | padding: (@baseline - 1) 20px @baseline 150px; |
301 | 13858d75 | Kostas Papadimitriou | border-top: 1px solid #ddd; |
302 | 13858d75 | Kostas Papadimitriou | .border-radius(0 0 3px 3px); |
303 | 13858d75 | Kostas Papadimitriou | .secondary-action { |
304 | 13858d75 | Kostas Papadimitriou | float: right; |
305 | 13858d75 | Kostas Papadimitriou | a { |
306 | 13858d75 | Kostas Papadimitriou | line-height: 30px; |
307 | 13858d75 | Kostas Papadimitriou | &:hover { |
308 | 13858d75 | Kostas Papadimitriou | text-decoration: underline; |
309 | 13858d75 | Kostas Papadimitriou | } |
310 | 13858d75 | Kostas Papadimitriou | } |
311 | 13858d75 | Kostas Papadimitriou | } |
312 | 13858d75 | Kostas Papadimitriou | } |
313 | 13858d75 | Kostas Papadimitriou | |
314 | 13858d75 | Kostas Papadimitriou | // Help Text |
315 | 13858d75 | Kostas Papadimitriou | // TODO: Do we need to set basefont and baseline here? |
316 | 13858d75 | Kostas Papadimitriou | .help-inline, |
317 | 13858d75 | Kostas Papadimitriou | .help-block { |
318 | 13858d75 | Kostas Papadimitriou | font-size: @basefont; |
319 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
320 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
321 | 13858d75 | Kostas Papadimitriou | } |
322 | 13858d75 | Kostas Papadimitriou | .help-inline { |
323 | 13858d75 | Kostas Papadimitriou | padding-left: 5px; |
324 | 13858d75 | Kostas Papadimitriou | *position: relative; /* IE6-7 */ |
325 | 13858d75 | Kostas Papadimitriou | *top: -5px; /* IE6-7 */ |
326 | 13858d75 | Kostas Papadimitriou | } |
327 | 13858d75 | Kostas Papadimitriou | |
328 | 13858d75 | Kostas Papadimitriou | // Big blocks of help text |
329 | 13858d75 | Kostas Papadimitriou | .help-block { |
330 | 13858d75 | Kostas Papadimitriou | display: block; |
331 | 13858d75 | Kostas Papadimitriou | max-width: 600px; |
332 | 13858d75 | Kostas Papadimitriou | } |
333 | 13858d75 | Kostas Papadimitriou | |
334 | 13858d75 | Kostas Papadimitriou | // Inline Fields (input fields that appear as inline objects |
335 | 13858d75 | Kostas Papadimitriou | .inline-inputs { |
336 | 13858d75 | Kostas Papadimitriou | color: @gray; |
337 | 13858d75 | Kostas Papadimitriou | span { |
338 | 13858d75 | Kostas Papadimitriou | padding: 0 2px 0 1px; |
339 | 13858d75 | Kostas Papadimitriou | } |
340 | 13858d75 | Kostas Papadimitriou | } |
341 | 13858d75 | Kostas Papadimitriou | |
342 | 13858d75 | Kostas Papadimitriou | // Allow us to put symbols and text within the input field for a cleaner look |
343 | 13858d75 | Kostas Papadimitriou | .input-prepend, |
344 | 13858d75 | Kostas Papadimitriou | .input-append { |
345 | 13858d75 | Kostas Papadimitriou | input { |
346 | 13858d75 | Kostas Papadimitriou | .border-radius(0 3px 3px 0); |
347 | 13858d75 | Kostas Papadimitriou | } |
348 | 13858d75 | Kostas Papadimitriou | .add-on { |
349 | 13858d75 | Kostas Papadimitriou | position: relative; |
350 | 13858d75 | Kostas Papadimitriou | background: #f5f5f5; |
351 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ccc; |
352 | 13858d75 | Kostas Papadimitriou | z-index: 2; |
353 | 13858d75 | Kostas Papadimitriou | float: left; |
354 | 13858d75 | Kostas Papadimitriou | display: block; |
355 | 13858d75 | Kostas Papadimitriou | width: auto; |
356 | 13858d75 | Kostas Papadimitriou | min-width: 16px; |
357 | 13858d75 | Kostas Papadimitriou | height: 18px; |
358 | 13858d75 | Kostas Papadimitriou | padding: 4px 4px 4px 5px; |
359 | 13858d75 | Kostas Papadimitriou | margin-right: -1px; |
360 | 13858d75 | Kostas Papadimitriou | font-weight: normal; |
361 | 13858d75 | Kostas Papadimitriou | line-height: 18px; |
362 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
363 | 13858d75 | Kostas Papadimitriou | text-align: center; |
364 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 0 @white; |
365 | 13858d75 | Kostas Papadimitriou | .border-radius(3px 0 0 3px); |
366 | 13858d75 | Kostas Papadimitriou | } |
367 | 13858d75 | Kostas Papadimitriou | .active { |
368 | 13858d75 | Kostas Papadimitriou | background: lighten(@green, 30); |
369 | 13858d75 | Kostas Papadimitriou | border-color: @green; |
370 | 13858d75 | Kostas Papadimitriou | } |
371 | 13858d75 | Kostas Papadimitriou | } |
372 | 13858d75 | Kostas Papadimitriou | .input-prepend { |
373 | 13858d75 | Kostas Papadimitriou | .add-on { |
374 | 13858d75 | Kostas Papadimitriou | *margin-top: 1px; /* IE6-7 */ |
375 | 13858d75 | Kostas Papadimitriou | } |
376 | 13858d75 | Kostas Papadimitriou | } |
377 | 13858d75 | Kostas Papadimitriou | .input-append { |
378 | 13858d75 | Kostas Papadimitriou | input { |
379 | 13858d75 | Kostas Papadimitriou | float: left; |
380 | 13858d75 | Kostas Papadimitriou | .border-radius(3px 0 0 3px); |
381 | 13858d75 | Kostas Papadimitriou | } |
382 | 13858d75 | Kostas Papadimitriou | .add-on { |
383 | 13858d75 | Kostas Papadimitriou | .border-radius(0 3px 3px 0); |
384 | 13858d75 | Kostas Papadimitriou | margin-right: 0; |
385 | 13858d75 | Kostas Papadimitriou | margin-left: -1px; |
386 | 13858d75 | Kostas Papadimitriou | } |
387 | 13858d75 | Kostas Papadimitriou | } |
388 | 13858d75 | Kostas Papadimitriou | |
389 | 13858d75 | Kostas Papadimitriou | // Stacked options for forms (radio buttons or checkboxes) |
390 | 13858d75 | Kostas Papadimitriou | .inputs-list { |
391 | 13858d75 | Kostas Papadimitriou | margin: 0 0 5px; |
392 | 13858d75 | Kostas Papadimitriou | width: 100%; |
393 | 13858d75 | Kostas Papadimitriou | li { |
394 | 13858d75 | Kostas Papadimitriou | display: block; |
395 | 13858d75 | Kostas Papadimitriou | padding: 0; |
396 | 13858d75 | Kostas Papadimitriou | width: 100%; |
397 | 13858d75 | Kostas Papadimitriou | } |
398 | 13858d75 | Kostas Papadimitriou | label { |
399 | 13858d75 | Kostas Papadimitriou | display: block; |
400 | 13858d75 | Kostas Papadimitriou | float: none; |
401 | 13858d75 | Kostas Papadimitriou | width: auto; |
402 | 13858d75 | Kostas Papadimitriou | padding: 0; |
403 | 13858d75 | Kostas Papadimitriou | margin-left: 20px; |
404 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
405 | 13858d75 | Kostas Papadimitriou | text-align: left; |
406 | 13858d75 | Kostas Papadimitriou | white-space: normal; |
407 | 13858d75 | Kostas Papadimitriou | strong { |
408 | 13858d75 | Kostas Papadimitriou | color: @gray; |
409 | 13858d75 | Kostas Papadimitriou | } |
410 | 13858d75 | Kostas Papadimitriou | small { |
411 | 13858d75 | Kostas Papadimitriou | font-size: @basefont - 2; |
412 | 13858d75 | Kostas Papadimitriou | font-weight: normal; |
413 | 13858d75 | Kostas Papadimitriou | } |
414 | 13858d75 | Kostas Papadimitriou | } |
415 | 13858d75 | Kostas Papadimitriou | .inputs-list { |
416 | 13858d75 | Kostas Papadimitriou | margin-left: 25px; |
417 | 13858d75 | Kostas Papadimitriou | margin-bottom: 10px; |
418 | 13858d75 | Kostas Papadimitriou | padding-top: 0; |
419 | 13858d75 | Kostas Papadimitriou | } |
420 | 13858d75 | Kostas Papadimitriou | &:first-child { |
421 | 13858d75 | Kostas Papadimitriou | padding-top: 6px; |
422 | 13858d75 | Kostas Papadimitriou | } |
423 | 13858d75 | Kostas Papadimitriou | li + li { |
424 | 13858d75 | Kostas Papadimitriou | padding-top: 2px; |
425 | 13858d75 | Kostas Papadimitriou | } |
426 | 13858d75 | Kostas Papadimitriou | input[type=radio], |
427 | 13858d75 | Kostas Papadimitriou | input[type=checkbox] { |
428 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
429 | 13858d75 | Kostas Papadimitriou | margin-left: -20px; |
430 | 13858d75 | Kostas Papadimitriou | float: left; |
431 | 13858d75 | Kostas Papadimitriou | } |
432 | 13858d75 | Kostas Papadimitriou | } |
433 | 13858d75 | Kostas Papadimitriou | |
434 | 13858d75 | Kostas Papadimitriou | // Stacked forms |
435 | 13858d75 | Kostas Papadimitriou | .form-stacked { |
436 | 13858d75 | Kostas Papadimitriou | padding-left: 20px; |
437 | 13858d75 | Kostas Papadimitriou | fieldset { |
438 | 13858d75 | Kostas Papadimitriou | padding-top: @baseline / 2; |
439 | 13858d75 | Kostas Papadimitriou | } |
440 | 13858d75 | Kostas Papadimitriou | legend { |
441 | 13858d75 | Kostas Papadimitriou | padding-left: 0; |
442 | 13858d75 | Kostas Papadimitriou | } |
443 | 13858d75 | Kostas Papadimitriou | label { |
444 | 13858d75 | Kostas Papadimitriou | display: block; |
445 | 13858d75 | Kostas Papadimitriou | float: none; |
446 | 13858d75 | Kostas Papadimitriou | width: auto; |
447 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
448 | 13858d75 | Kostas Papadimitriou | text-align: left; |
449 | 13858d75 | Kostas Papadimitriou | line-height: 20px; |
450 | 13858d75 | Kostas Papadimitriou | padding-top: 0; |
451 | 13858d75 | Kostas Papadimitriou | } |
452 | 13858d75 | Kostas Papadimitriou | .clearfix { |
453 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline / 2; |
454 | 13858d75 | Kostas Papadimitriou | div.input { |
455 | 13858d75 | Kostas Papadimitriou | margin-left: 0; |
456 | 13858d75 | Kostas Papadimitriou | } |
457 | 13858d75 | Kostas Papadimitriou | } |
458 | 13858d75 | Kostas Papadimitriou | .inputs-list { |
459 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
460 | 13858d75 | Kostas Papadimitriou | li { |
461 | 13858d75 | Kostas Papadimitriou | padding-top: 0; |
462 | 13858d75 | Kostas Papadimitriou | label { |
463 | 13858d75 | Kostas Papadimitriou | font-weight: normal; |
464 | 13858d75 | Kostas Papadimitriou | padding-top: 0; |
465 | 13858d75 | Kostas Papadimitriou | } |
466 | 13858d75 | Kostas Papadimitriou | } |
467 | 13858d75 | Kostas Papadimitriou | } |
468 | 13858d75 | Kostas Papadimitriou | div.clearfix.error { |
469 | 13858d75 | Kostas Papadimitriou | padding-top: 10px; |
470 | 13858d75 | Kostas Papadimitriou | padding-bottom: 10px; |
471 | 13858d75 | Kostas Papadimitriou | padding-left: 10px; |
472 | 13858d75 | Kostas Papadimitriou | margin-top: 0; |
473 | 13858d75 | Kostas Papadimitriou | margin-left: -10px; |
474 | 13858d75 | Kostas Papadimitriou | } |
475 | 13858d75 | Kostas Papadimitriou | .actions { |
476 | 13858d75 | Kostas Papadimitriou | margin-left: -20px; |
477 | 13858d75 | Kostas Papadimitriou | padding-left: 20px; |
478 | 13858d75 | Kostas Papadimitriou | } |
479 | 13858d75 | Kostas Papadimitriou | } |