Rev 16837 | Details | Compare with Previous | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
6283 | obado | 1 | /** themes/_css - forms.css */ |
2 | /** Somes styles designed to display fields in forms, tableless **/ |
||
7242 | obado | 3 | /* Currently used in exam and documents properties **/ |
6283 | obado | 4 | |
7242 | obado | 5 | /*form{ |
7075 | obado | 6 | line-height: 2em; |
7242 | obado | 7 | }*/ |
7075 | obado | 8 | |
9051 | obado | 9 | /* corrects attributes color:inherit from normalize.css */ |
9040 | obado | 10 | input, textarea { |
16837 | obado | 11 | color: black; |
9040 | obado | 12 | } |
9077 | obado | 13 | input[disabled], textarea[disabled] { |
16837 | obado | 14 | color: #444; |
15 | background-color: #DFDFDF; |
||
9077 | obado | 16 | } |
11654 | obado | 17 | |
14405 | obado | 18 | sup input:not([type="color"]), .wims_mathml .msup textarea, .wims_mathml msup textarea, |
19 | sub input:not([type="color"]), .wims_mathml .msub textarea, .wims_mathml msub textarea{ |
||
16837 | obado | 20 | padding: 2px; |
14405 | obado | 21 | } |
13692 | obado | 22 | |
14405 | obado | 23 | |
13692 | obado | 24 | /***** Foundation 6 input styles *****/ |
25 | |||
26 | input:not([type]), [type="text"], [type="password"], [type="date"], [type="datetime"], |
||
27 | [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], |
||
28 | [type="search"], [type="tel"], [type="time"], [type="color"], [type="url"], textarea { |
||
29 | border: 1px solid #cacaca; |
||
30 | box-sizing: border-box; |
||
31 | } |
||
32 | |||
33 | /* everything but color */ |
||
34 | input:not([type]), [type="text"], [type="password"], [type="date"], [type="datetime"], |
||
35 | [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], |
||
36 | [type="search"], [type="tel"], [type="time"], [type="url"], textarea { |
||
37 | padding: .5rem; |
||
15468 | obado | 38 | max-width: 100%; |
13692 | obado | 39 | } |
40 | |||
41 | input:not([type]):focus, [type='text']:focus, [type='password']:focus, |
||
42 | [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, |
||
43 | [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, |
||
44 | [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, |
||
45 | [type='color']:focus, textarea:focus { |
||
46 | outline: none; |
||
47 | border: 1px solid #8a8a8a; |
||
48 | background-color: #fefefe; |
||
49 | box-shadow: 0 0 5px #cacaca; |
||
50 | transition: box-shadow .5s, border-color .25s ease-in-out; |
||
51 | } |
||
52 | |||
15468 | obado | 53 | .help-text { |
54 | margin-top: 0; |
||
16837 | obado | 55 | font-size: .8125rem; |
15468 | obado | 56 | font-style: italic; |
57 | color: #0a0a0a; } |
||
13692 | obado | 58 | |
59 | |||
11654 | obado | 60 | /* don't glue labels to their associated input */ |
61 | input[type="radio"]+label, input[type="checkbox"]+label{ |
||
13330 | obado | 62 | padding-left: .3em; |
9077 | obado | 63 | } |
9040 | obado | 64 | |
13330 | obado | 65 | fieldset>ul{ |
66 | margin: 0; |
||
67 | padding-left: 1.5em; |
||
68 | } |
||
7242 | obado | 69 | /* this is generaly a fieldset class */ |
70 | .property_fields{ |
||
13975 | obado | 71 | /* Sadly, Safari don't handle flex on fieldsets yet (you have to add a div inside)...*/ |
16837 | obado | 72 | display: flex; |
13975 | obado | 73 | flex-flow: row wrap; |
13330 | obado | 74 | position: relative; |
16837 | obado | 75 | margin-top: 1em; |
76 | margin-bottom: 1em; |
||
77 | max-width: 900px; |
||
78 | padding: .5em 3px; |
||
13330 | obado | 79 | /*Background-image is here to lighten background color */ |
80 | background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255, 255, 255, 0.9) 48%,rgba(255,255,255,0.4) 100%); /* W3C */ |
||
6283 | obado | 81 | } |
13975 | obado | 82 | /* If property_fields is flex, wimscenter must take the full width*/ |
11517 | obado | 83 | .property_fields .wimscenter{ |
16837 | obado | 84 | width: 100%; |
13975 | obado | 85 | } |
6283 | obado | 86 | |
7888 | obado | 87 | /*.property_fields .field { |
88 | margin: auto; |
||
89 | }*/ |
||
6283 | obado | 90 | |
9040 | obado | 91 | .property_fields .actions, |
92 | .property_fields .wimsform{ |
||
16837 | obado | 93 | padding: .5em; |
94 | margin-top: .5em; |
||
7519 | obado | 95 | } |
11687 | obado | 96 | .property_fields>fieldset{ |
16837 | obado | 97 | margin-bottom: .5em; |
11687 | obado | 98 | } |
7519 | obado | 99 | |
11654 | obado | 100 | .field.box{ |
13692 | obado | 101 | padding: .4em .4em .8em .4em; /*.4em seems max for Chrome 2-columns layout */ |
16837 | obado | 102 | border: 1px solid #CFCFCF; |
13330 | obado | 103 | /*margin-bottom:1px;*/ |
16837 | obado | 104 | line-height: 1.2em; |
13330 | obado | 105 | /* min height lets having an help button right float*/ |
16837 | obado | 106 | min-height: 2em; |
13975 | obado | 107 | flex-grow: 1; |
6283 | obado | 108 | } |
13975 | obado | 109 | |
13991 | obado | 110 | .box_title{ |
16837 | obado | 111 | margin-top: 0; |
13991 | obado | 112 | margin-bottom: .5em; |
113 | background-color: var(--wims_bgcolor); |
||
114 | padding: 2px; |
||
115 | } |
||
13975 | obado | 116 | |
9040 | obado | 117 | .property_fields p{ |
16837 | obado | 118 | padding: 0 1em; |
15468 | obado | 119 | box-sizing: border-box; |
9040 | obado | 120 | } |
6283 | obado | 121 | |
13692 | obado | 122 | /*.box>div, .box>input, .box>textarea, .box>select{ |
13330 | obado | 123 | margin-left:.3em; |
13692 | obado | 124 | }*/ |
6283 | obado | 125 | |
7509 | obado | 126 | .property_fields .halfwidth{ |
13330 | obado | 127 | /*display: inline-block; |
128 | vertical-align: middle;*/ |
||
16837 | obado | 129 | float: left; |
13330 | obado | 130 | /*min-width: 380px;*/ |
13440 | obado | 131 | /*min-height could be suppressed when all browsers will render well "flexbox"*/ |
16837 | obado | 132 | min-height: 4em; |
7509 | obado | 133 | } |
6283 | obado | 134 | |
7245 | obado | 135 | .property_fields .field:nth-child(even){ |
136 | background-color: #DFDFDF; |
||
11693 | obado | 137 | background-color: rgba(230,230,230,.4); |
6283 | obado | 138 | } |
139 | |||
7245 | obado | 140 | .property_fields .field:nth-child(odd){ |
141 | background-color: #EFEFEF; |
||
10883 | obado | 142 | background-color: rgba(255,255,255,.8); |
6283 | obado | 143 | } |
7075 | obado | 144 | |
145 | .formHelp{ |
||
13330 | obado | 146 | font-size: 9pt; |
16837 | obado | 147 | color: #666; |
6284 | obado | 148 | } |
7075 | obado | 149 | |
7245 | obado | 150 | .property_fields legend{ |
13330 | obado | 151 | font-size: 1.2em; |
152 | font-weight: bold; |
||
153 | padding: 0 .5em; |
||
154 | margin-left:1em; |
||
155 | border:1px solid #BBB; |
||
156 | border-radius:5px; |
||
7075 | obado | 157 | } |
7509 | obado | 158 | |
16885 | obado | 159 | .field label{ |
13330 | obado | 160 | font-weight:bold; |
13692 | obado | 161 | font-size: .875rem; |
162 | line-height: 1.8; |
||
13330 | obado | 163 | display:inline-block; |
164 | vertical-align: middle; |
||
7509 | obado | 165 | } |
13692 | obado | 166 | |
10946 | obado | 167 | /*.property_fields .field>label{ |
13330 | obado | 168 | min-width:10em; |
10946 | obado | 169 | }*/ |
7509 | obado | 170 | |
12583 | obado | 171 | .property_fields select,.property_fields textarea{ |
13330 | obado | 172 | vertical-align: middle; |
7539 | obado | 173 | } |
174 | |||
13696 | obado | 175 | .field input[type="text"]:not(.inline), |
176 | .field input[type="password"]:not(.inline), |
||
177 | .field input[type="email"]:not(.inline), |
||
178 | .field input[type="number"]:not(.inline), |
||
179 | .field input[type="url"]:not(.inline), |
||
13695 | obado | 180 | /*.field select,*/ |
12583 | obado | 181 | .field textarea{ |
13692 | obado | 182 | width:100%; |
12583 | obado | 183 | } |
7539 | obado | 184 | |
185 | |||
7971 | obado | 186 | .field input.small_input{ |
13330 | obado | 187 | width:6em; |
188 | min-width:6em; |
||
7971 | obado | 189 | } |
190 | |||
7521 | obado | 191 | input[type="color"]{ |
13330 | obado | 192 | vertical-align: middle; |
193 | /* min size prevents Safari displaying a very small button */ |
||
194 | min-width: 44px; |
||
195 | min-height: 23px; |
||
7521 | obado | 196 | } |
7509 | obado | 197 | |
9040 | obado | 198 | li.wims_formradio{ |
13330 | obado | 199 | display: block; |
9040 | obado | 200 | } |
7517 | bpr | 201 | .wims_formradio label { |
7531 | bpr | 202 | min-width:0; |
203 | font-weight:normal; |
||
7517 | bpr | 204 | } |
7888 | obado | 205 | |
11687 | obado | 206 | /** Styles for HTML 5 inputs (required or typed, like type="number")*/ |
12723 | obado | 207 | input:not([type="submit"]):not([type="button"]), textarea{ |
13330 | obado | 208 | background-repeat: no-repeat; |
209 | /* 92% lets some browsers display control buttons like for the type="number" input */ |
||
210 | background-position-x: 92%; |
||
211 | background-position-y: 3px; |
||
11687 | obado | 212 | } |
11641 | obado | 213 | input:required:not(.noicon), textarea:required:not(.noicon){ |
13330 | obado | 214 | /* The padding is more precise than the 92%, but we apply it only for required inputs */ |
215 | padding-right: 1em; |
||
216 | background-position-x: right; |
||
11517 | obado | 217 | } |
218 | /* invalid required inputs */ |
||
219 | input:invalid, textarea:invalid, .required_invalid_legend { |
||
13330 | obado | 220 | background-image: url("../../../gifs/svg/exclamation_mark_red.svg"); |
221 | background-size: 1em; |
||
222 | box-shadow: 0 0 1px rgba(200, 0, 0, .85); |
||
11517 | obado | 223 | } |
11687 | obado | 224 | /* invalid inputs, with focus */ |
11517 | obado | 225 | input:focus:invalid, textarea:focus:invalid, .required_invalid_focus_legend { |
13330 | obado | 226 | background-image: url("../../../gifs/svg/thumb_down_red.svg"); |
11517 | obado | 227 | } |
11687 | obado | 228 | /* valid required inputs (dont show the green check on all valid, only required ones) */ |
11517 | obado | 229 | input:required:focus:valid, textarea:required:focus:valid, .required_valid_legend { |
13330 | obado | 230 | background-image: url("../../../gifs/svg/yes_check_green.svg"); |
231 | background-size: .9em; |
||
232 | box-shadow: 0 0 1px rgba(0, 200, 0, .85); |
||
11517 | obado | 233 | } |
234 | /* noicon css class disable the required icon */ |
||
11687 | obado | 235 | input.noicon, |
236 | input.noicon:required, |
||
237 | input.noicon:required:focus, |
||
238 | textarea.noicon:required, |
||
239 | textarea.noicon:required:focus{ |
||
13330 | obado | 240 | background-image:none; |
11517 | obado | 241 | } |
7888 | obado | 242 | |
16837 | obado | 243 | .property_fields pre, |
244 | .property_fields code, |
||
245 | .property_fields .wims_scrollable{ |
||
246 | width: 100%; |
||
247 | } |
||
7888 | obado | 248 | |
249 | /* Small screens */ |
||
250 | @media only screen and (max-width: 40em) { |
||
13330 | obado | 251 | .property_fields .halfwidth, .halfwidth{ |
16837 | obado | 252 | width: 100%; |
253 | display: block; |
||
13330 | obado | 254 | min-width: 0; |
255 | } |
||
256 | /* prevent inputs from being larger than screen*/ |
||
13692 | obado | 257 | /*.box input:not([type="button"]):not([type="color"]),.box select,.box textarea{ |
13330 | obado | 258 | width:75%; |
13692 | obado | 259 | }*/ |
16837 | obado | 260 | .property_fields pre, |
261 | .property_fields code, |
||
262 | .property_fields .wims_scrollable, |
||
263 | .property_fields .canvas_div{ |
||
264 | max-width: 21em; |
||
13330 | obado | 265 | } |
7888 | obado | 266 | } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ |
267 | |||
268 | /* Medium screens */ |
||
269 | @media only screen and (min-width: 40.063em) and (max-width: 64em) { |
||
13330 | obado | 270 | .property_fields .halfwidth{ |
271 | min-width: 310px; |
||
272 | } |
||
16837 | obado | 273 | .property_fields pre, |
274 | .property_fields code, |
||
275 | .property_fields .wims_scrollable, |
||
276 | .property_fields .canvas_div{ |
||
277 | max-width: 32em; |
||
13330 | obado | 278 | } |
7888 | obado | 279 | } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ |
280 | |||
281 | /* Large screens */ |
||
12583 | obado | 282 | @media only screen and (min-width: 64.063em) { |
16837 | obado | 283 | .property_fields pre, |
284 | .property_fields code, |
||
285 | .property_fields .wims_scrollable, |
||
286 | .property_fields .canvas_div{ |
||
287 | max-width: 784px; |
||
13330 | obado | 288 | } |
12583 | obado | 289 | } /* min-width 1025px, large screens */ |
7888 | obado | 290 |