Subversion Repositories wimsdev

Rev

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: 0.8125rem;
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:33em;
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:53em;
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:850px;
287
    max-width: 784px;
274
  }
288
  }
275
} /* min-width 1025px, large screens */
289
} /* min-width 1025px, large screens */
276
 
290