Subversion Repositories wimsdev

/** themes/_css - forms.css */

/**  Somes styles designed to display fields in forms, tableless **/

/* Currently used in exam and documents properties **/

/*form{

    line-height: 2em;

}*/

/* corrects attributes color:inherit from normalize.css */

input, textarea {

  color: black;

}

input[disabled], textarea[disabled] {

  color: #444;

  background-color: #DFDFDF;

}

sup input:not([type="color"]), .wims_mathml .msup textarea, .wims_mathml msup textarea,

sub input:not([type="color"]), .wims_mathml .msub textarea, .wims_mathml msub textarea{

  padding: 2px;

}

/***** Foundation 6 input styles *****/

input:not([type]), [type="text"], [type="password"], [type="date"], [type="datetime"],

 [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"],

 [type="search"], [type="tel"], [type="time"], [type="color"], [type="url"], textarea {

  border: 1px solid #cacaca;

  box-sizing: border-box;

}

/* everything but color */

input:not([type]), [type="text"], [type="password"], [type="date"], [type="datetime"],

 [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"],

 [type="search"], [type="tel"], [type="time"], [type="url"], textarea {

  padding: .5rem;

  max-width: 100%;

}

input:not([type]):focus, [type='text']:focus, [type='password']:focus,

 [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus,

 [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus,

 [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus,

 [type='color']:focus, textarea:focus {

  outline: none;

  border: 1px solid #8a8a8a;

  background-color: #fefefe;

  box-shadow: 0 0 5px #cacaca;

  transition: box-shadow .5s, border-color .25s ease-in-out;

}

.help-text {

  margin-top: 0;

  font-size: .8125rem;

  font-style: italic;

  color: #0a0a0a; }

/* don't glue labels to their associated input */

input[type="radio"]+label, input[type="checkbox"]+label{

  padding-left: .3em;

}

fieldset>ul{

  margin: 0;

  padding-left: 1.5em;

}

/* this is generaly a fieldset class */

.property_fields{

  /* Sadly, Safari don't handle flex on fieldsets yet (you have to add a div inside)...*/

  display: flex;

  flex-flow: row wrap;

  position: relative;

  margin-top: 1em;

  margin-bottom: 1em;

  max-width: 900px;

  padding: .5em 3px;

  /*Background-image is here to lighten background color */

  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 */

}

/* If property_fields is flex, wimscenter must take the full width*/

.property_fields .wimscenter{

  width: 100%;

}

/*.property_fields .field {

        margin: auto;

}*/

.property_fields .actions,

.property_fields .wimsform{

  padding: .5em;

  margin-top: .5em;

}

.property_fields>fieldset{

  margin-bottom: .5em;

}

.field.box{

  padding: .4em .4em .8em .4em; /*.4em seems max for Chrome 2-columns layout */

  border: 1px solid #CFCFCF;

  /*margin-bottom:1px;*/

  line-height: 1.2em;

  /* min height lets having an help button right float*/

  min-height: 2em;

  flex-grow: 1;

}

.box_title{

  margin-top: 0;

  margin-bottom: .5em;

  background-color: var(--wims_bgcolor);

  padding: 2px;

}

.property_fields p{

  padding: 0 1em;

  box-sizing: border-box;

}

/*.box>div, .box>input, .box>textarea, .box>select{

  margin-left:.3em;

}*/

.property_fields .halfwidth{

  /*display: inline-block;

  vertical-align: middle;*/

  float: left;

  /*min-width: 380px;*/

  /*min-height could be suppressed when all browsers will render well "flexbox"*/

  min-height: 4em;

}

.property_fields .field:nth-child(even){

  background-color: #DFDFDF;

  background-color: rgba(230,230,230,.4);

}

.property_fields .field:nth-child(odd){

  background-color: #EFEFEF;

  background-color: rgba(255,255,255,.8);

}

.formHelp{

  font-size: 9pt;

  color: #666;

}

.property_fields legend{

  font-size: 1.2em;

  font-weight: bold;

  padding: 0 .5em;

  margin-left:1em;

  border:1px solid #BBB;

  border-radius:5px;

}

.field label{

  font-weight:bold;

  font-size: .875rem;

  line-height: 1.8;

  display:inline-block;

  vertical-align: middle;

}

/*.property_fields .field>label{

  min-width:10em;

}*/

.property_fields select,.property_fields textarea{

  vertical-align: middle;

}

.field input[type="text"]:not(.inline),

.field input[type="password"]:not(.inline),

.field input[type="email"]:not(.inline),

.field input[type="number"]:not(.inline),

.field input[type="url"]:not(.inline),

/*.field select,*/

.field textarea{

  width:100%;

}

.field input.small_input{

  width:6em;

  min-width:6em;

}

input[type="color"]{

  vertical-align: middle;

  /* min size prevents Safari displaying a very small button */

  min-width: 44px;

  min-height: 23px;

}

li.wims_formradio{

  display: block;

}

.wims_formradio label {

  min-width:0;

  font-weight:normal;

}

/** Styles for HTML 5 inputs (required or typed, like type="number")*/

input:not([type="submit"]):not([type="button"]), textarea{

  background-repeat: no-repeat;

  /* 92% lets some browsers display control buttons like for the type="number" input */

  background-position-x: 92%;

  background-position-y: 3px;

}

input:required:not(.noicon), textarea:required:not(.noicon){

  /* The padding is more precise than the 92%, but we apply it only for required inputs */

  padding-right: 1em;

  background-position-x: right;

}

/* invalid required inputs */

input:invalid, textarea:invalid, .required_invalid_legend {

  background-image: url("../../../gifs/svg/exclamation_mark_red.svg");

  background-size: 1em;

  box-shadow: 0 0 1px rgba(200, 0, 0, .85);

}

/* invalid inputs, with focus  */

input:focus:invalid, textarea:focus:invalid, .required_invalid_focus_legend {

  background-image: url("../../../gifs/svg/thumb_down_red.svg");

}

/* valid required inputs (dont show the green check on all valid, only required ones) */

input:required:focus:valid, textarea:required:focus:valid, .required_valid_legend {

  background-image: url("../../../gifs/svg/yes_check_green.svg");

  background-size: .9em;

  box-shadow: 0 0 1px rgba(0, 200, 0, .85);

}

/* noicon css class disable the required icon */

input.noicon,

input.noicon:required,

input.noicon:required:focus,

textarea.noicon:required,

textarea.noicon:required:focus{

  background-image:none;

}

.property_fields pre,

.property_fields code,

.property_fields .wims_scrollable{

  width: 100%;

}

/* Small screens */

@media only screen and (max-width: 40em) {

  .property_fields .halfwidth, .halfwidth{

    width: 100%;

    display: block;

    min-width: 0;

  }

  /* prevent inputs from being larger than screen*/

  /*.box input:not([type="button"]):not([type="color"]),.box select,.box textarea{

    width:75%;

  }*/

  .property_fields pre,

  .property_fields code,

  .property_fields .wims_scrollable,

  .property_fields .canvas_div{

    max-width: 21em;

  }

} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {

  .property_fields .halfwidth{

    min-width: 310px;

  }

  .property_fields pre,

  .property_fields code,

  .property_fields .wims_scrollable,

  .property_fields .canvas_div{

    max-width: 32em;

  }

} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens */

@media only screen and (min-width: 64.063em) {

  .property_fields pre,

  .property_fields code,

  .property_fields .wims_scrollable,

  .property_fields .canvas_div{

    max-width: 784px;

  }

} /* min-width 1025px, large screens */