Subversion Repositories wimsdev

Rev

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