Rev 15468 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 15468 | Rev 16837 | ||
---|---|---|---|
Line 6... | Line 6... | ||
6 | line-height: 2em; |
6 | line-height: 2em; |
7 | }*/ |
7 | }*/ |
8 | 8 | ||
9 | /* corrects attributes color:inherit from normalize.css */ |
9 | /* corrects attributes color:inherit from normalize.css */ |
10 | input, textarea { |
10 | input, textarea { |
11 | color:black; |
11 | color: black; |
12 | } |
12 | } |
13 | input[disabled], textarea[disabled] { |
13 | input[disabled], textarea[disabled] { |
14 | color:#444; |
14 | color: #444; |
15 | background-color:#DFDFDF; |
15 | background-color: #DFDFDF; |
16 | } |
16 | } |
17 | 17 | ||
18 | sup input:not([type="color"]), .wims_mathml .msup textarea, .wims_mathml msup textarea, |
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{ |
19 | sub input:not([type="color"]), .wims_mathml .msub textarea, .wims_mathml msub textarea{ |
20 | padding:2px; |
20 | padding: 2px; |
21 | } |
21 | } |
22 | 22 | ||
23 | 23 | ||
24 | /***** Foundation 6 input styles *****/ |
24 | /***** Foundation 6 input styles *****/ |
25 | 25 | ||
Line 50... | Line 50... | ||
50 | transition: box-shadow .5s, border-color .25s ease-in-out; |
50 | transition: box-shadow .5s, border-color .25s ease-in-out; |
51 | } |
51 | } |
52 | 52 | ||
53 | .help-text { |
53 | .help-text { |
54 | margin-top: 0; |
54 | margin-top: 0; |
55 | font-size: |
55 | font-size: .8125rem; |
56 | font-style: italic; |
56 | font-style: italic; |
57 | color: #0a0a0a; } |
57 | color: #0a0a0a; } |
58 | 58 | ||
59 | 59 | ||
60 | /* don't glue labels to their associated input */ |
60 | /* don't glue labels to their associated input */ |
Line 67... | Line 67... | ||
67 | padding-left: 1.5em; |
67 | padding-left: 1.5em; |
68 | } |
68 | } |
69 | /* this is generaly a fieldset class */ |
69 | /* this is generaly a fieldset class */ |
70 | .property_fields{ |
70 | .property_fields{ |
71 | /* Sadly, Safari don't handle flex on fieldsets yet (you have to add a div inside)...*/ |
71 | /* Sadly, Safari don't handle flex on fieldsets yet (you have to add a div inside)...*/ |
72 | display:flex; |
72 | display: flex; |
73 | flex-flow: row wrap; |
73 | flex-flow: row wrap; |
74 | position: relative; |
74 | position: relative; |
75 | margin-top:1em; |
75 | margin-top: 1em; |
76 | margin-bottom:1em; |
76 | margin-bottom: 1em; |
77 | max-width:900px; |
77 | max-width: 900px; |
78 | padding:.5em 3px; |
78 | padding: .5em 3px; |
79 | /*Background-image is here to lighten background color */ |
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 */ |
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 */ |
81 | } |
81 | } |
82 | /* If property_fields is flex, wimscenter must take the full width*/ |
82 | /* If property_fields is flex, wimscenter must take the full width*/ |
83 | .property_fields .wimscenter{ |
83 | .property_fields .wimscenter{ |
84 | width:100%; |
84 | width: 100%; |
85 | } |
85 | } |
86 | 86 | ||
87 | /*.property_fields .field { |
87 | /*.property_fields .field { |
88 | margin: auto; |
88 | margin: auto; |
89 | }*/ |
89 | }*/ |
90 | 90 | ||
91 | .property_fields .actions, |
91 | .property_fields .actions, |
92 | .property_fields .wimsform{ |
92 | .property_fields .wimsform{ |
93 | padding:.5em; |
93 | padding: .5em; |
94 | margin-top:.5em; |
94 | margin-top: .5em; |
95 | } |
95 | } |
96 | .property_fields>fieldset{ |
96 | .property_fields>fieldset{ |
97 | margin-bottom:.5em; |
97 | margin-bottom: .5em; |
98 | } |
98 | } |
99 | 99 | ||
100 | .field.box{ |
100 | .field.box{ |
101 | padding: .4em .4em .8em .4em; /*.4em seems max for Chrome 2-columns layout */ |
101 | padding: .4em .4em .8em .4em; /*.4em seems max for Chrome 2-columns layout */ |
102 | border:1px solid #CFCFCF; |
102 | border: 1px solid #CFCFCF; |
103 | /*margin-bottom:1px;*/ |
103 | /*margin-bottom:1px;*/ |
104 | line-height:1.2em; |
104 | line-height: 1.2em; |
105 | /* min height lets having an help button right float*/ |
105 | /* min height lets having an help button right float*/ |
106 | min-height:2em; |
106 | min-height: 2em; |
107 | flex-grow: 1; |
107 | flex-grow: 1; |
108 | } |
108 | } |
109 | 109 | ||
110 | .box_title{ |
110 | .box_title{ |
111 | margin-top:0; |
111 | margin-top: 0; |
112 | margin-bottom: .5em; |
112 | margin-bottom: .5em; |
113 | background-color: var(--wims_bgcolor); |
113 | background-color: var(--wims_bgcolor); |
114 | padding: 2px; |
114 | padding: 2px; |
115 | } |
115 | } |
116 | 116 | ||
117 | .property_fields p{ |
117 | .property_fields p{ |
118 | padding:0 1em; |
118 | padding: 0 1em; |
119 | box-sizing: border-box; |
119 | box-sizing: border-box; |
120 | } |
120 | } |
121 | 121 | ||
122 | /*.box>div, .box>input, .box>textarea, .box>select{ |
122 | /*.box>div, .box>input, .box>textarea, .box>select{ |
123 | margin-left:.3em; |
123 | margin-left:.3em; |
124 | }*/ |
124 | }*/ |
125 | 125 | ||
126 | .property_fields .halfwidth{ |
126 | .property_fields .halfwidth{ |
127 | /*display: inline-block; |
127 | /*display: inline-block; |
128 | vertical-align: middle;*/ |
128 | vertical-align: middle;*/ |
129 | float:left; |
129 | float: left; |
130 | /*min-width: 380px;*/ |
130 | /*min-width: 380px;*/ |
131 | /*min-height could be suppressed when all browsers will render well "flexbox"*/ |
131 | /*min-height could be suppressed when all browsers will render well "flexbox"*/ |
132 | min-height:4em; |
132 | min-height: 4em; |
133 | } |
133 | } |
134 | 134 | ||
135 | .property_fields .field:nth-child(even){ |
135 | .property_fields .field:nth-child(even){ |
136 | background-color: #DFDFDF; |
136 | background-color: #DFDFDF; |
137 | background-color: rgba(230,230,230,.4); |
137 | background-color: rgba(230,230,230,.4); |
Line 142... | Line 142... | ||
142 | background-color: rgba(255,255,255,.8); |
142 | background-color: rgba(255,255,255,.8); |
143 | } |
143 | } |
144 | 144 | ||
145 | .formHelp{ |
145 | .formHelp{ |
146 | font-size: 9pt; |
146 | font-size: 9pt; |
147 | color:#666; |
147 | color: #666; |
148 | } |
148 | } |
149 | 149 | ||
150 | .property_fields legend{ |
150 | .property_fields legend{ |
151 | font-size: 1.2em; |
151 | font-size: 1.2em; |
152 | font-weight: bold; |
152 | font-weight: bold; |
Line 159... | Line 159... | ||
159 | .field>label{ |
159 | .field>label{ |
160 | font-weight:bold; |
160 | font-weight:bold; |
161 | font-size: .875rem; |
161 | font-size: .875rem; |
162 | line-height: 1.8; |
162 | line-height: 1.8; |
163 | display:inline-block; |
163 | display:inline-block; |
164 | vertical-align: middle; |
164 | vertical-align: middle; |
165 | } |
165 | } |
166 | 166 | ||
167 | /*.property_fields .field>label{ |
167 | /*.property_fields .field>label{ |
168 | min-width:10em; |
168 | min-width:10em; |
169 | }*/ |
169 | }*/ |
170 | 170 | ||
171 | .property_fields select,.property_fields textarea{ |
171 | .property_fields select,.property_fields textarea{ |
172 | vertical-align: middle; |
172 | vertical-align: middle; |
173 | } |
173 | } |
174 | 174 | ||
175 | .field input[type="text"]:not(.inline), |
175 | .field input[type="text"]:not(.inline), |
176 | .field input[type="password"]:not(.inline), |
176 | .field input[type="password"]:not(.inline), |
177 | .field input[type="email"]:not(.inline), |
177 | .field input[type="email"]:not(.inline), |
178 | .field input[type="number"]:not(.inline), |
178 | .field input[type="number"]:not(.inline), |
Line 184... | Line 184... | ||
184 | 184 | ||
185 | 185 | ||
186 | .field input.small_input{ |
186 | .field input.small_input{ |
187 | width:6em; |
187 | width:6em; |
188 | min-width:6em; |
188 | min-width:6em; |
189 | } |
189 | } |
190 | 190 | ||
191 | input[type="color"]{ |
191 | input[type="color"]{ |
192 | vertical-align: middle; |
192 | vertical-align: middle; |
193 | /* min size prevents Safari displaying a very small button */ |
193 | /* min size prevents Safari displaying a very small button */ |
194 | min-width: 44px; |
194 | min-width: 44px; |
195 | min-height: 23px; |
195 | min-height: 23px; |
Line 238... | Line 238... | ||
238 | textarea.noicon:required, |
238 | textarea.noicon:required, |
239 | textarea.noicon:required:focus{ |
239 | textarea.noicon:required:focus{ |
240 | background-image:none; |
240 | background-image:none; |
241 | } |
241 | } |
242 | 242 | ||
- | 243 | .property_fields pre, |
|
- | 244 | .property_fields code, |
|
- | 245 | .property_fields .wims_scrollable{ |
|
- | 246 | width: 100%; |
|
- | 247 | } |
|
243 | 248 | ||
244 | /* Small screens */ |
249 | /* Small screens */ |
245 | @media only screen and (max-width: 40em) { |
250 | @media only screen and (max-width: 40em) { |
246 | .property_fields .halfwidth, .halfwidth{ |
251 | .property_fields .halfwidth, .halfwidth{ |
247 | width:100%; |
252 | width: 100%; |
248 | display:block; |
253 | display: block; |
249 | min-width: 0; |
254 | min-width: 0; |
250 | } |
255 | } |
251 | /* prevent inputs from being larger than screen*/ |
256 | /* prevent inputs from being larger than screen*/ |
252 | /*.box input:not([type="button"]):not([type="color"]),.box select,.box textarea{ |
257 | /*.box input:not([type="button"]):not([type="color"]),.box select,.box textarea{ |
253 | width:75%; |
258 | width:75%; |
254 | }*/ |
259 | }*/ |
255 | .property_fields pre |
260 | .property_fields pre, |
- | 261 | .property_fields code, |
|
- | 262 | .property_fields .wims_scrollable, |
|
- | 263 | .property_fields .canvas_div{ |
|
256 | max-width: |
264 | max-width: 21em; |
257 | } |
265 | } |
258 | } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ |
266 | } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ |
259 | 267 | ||
260 | /* Medium screens */ |
268 | /* Medium screens */ |
261 | @media only screen and (min-width: 40.063em) and (max-width: 64em) { |
269 | @media only screen and (min-width: 40.063em) and (max-width: 64em) { |
262 | .property_fields .halfwidth{ |
270 | .property_fields .halfwidth{ |
263 | min-width: 310px; |
271 | min-width: 310px; |
264 | } |
272 | } |
265 | .property_fields pre |
273 | .property_fields pre, |
- | 274 | .property_fields code, |
|
- | 275 | .property_fields .wims_scrollable, |
|
- | 276 | .property_fields .canvas_div{ |
|
266 | max-width: |
277 | max-width: 32em; |
267 | } |
278 | } |
268 | } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ |
279 | } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ |
269 | 280 | ||
270 | /* Large screens */ |
281 | /* Large screens */ |
271 | @media only screen and (min-width: 64.063em) { |
282 | @media only screen and (min-width: 64.063em) { |
272 | .property_fields pre |
283 | .property_fields pre, |
- | 284 | .property_fields code, |
|
- | 285 | .property_fields .wims_scrollable, |
|
- | 286 | .property_fields .canvas_div{ |
|
273 | max-width: |
287 | max-width: 784px; |
274 | } |
288 | } |
275 | } /* min-width 1025px, large screens */ |
289 | } /* min-width 1025px, large screens */ |
276 | 290 |