Subversion Repositories wimsdev

Rev

Rev 15468 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /** themes/_css - forms.css */
  2. /**  Somes styles designed to display fields in forms, tableless **/
  3. /* Currently used in exam and documents properties **/
  4.  
  5. /*form{
  6.     line-height: 2em;
  7. }*/
  8.  
  9. /* corrects attributes color:inherit from normalize.css */
  10. input, textarea {
  11.   color: black;
  12. }
  13. input[disabled], textarea[disabled] {
  14.   color: #444;
  15.   background-color: #DFDFDF;
  16. }
  17.  
  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{
  20.   padding: 2px;
  21. }
  22.  
  23.  
  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;
  38.   max-width: 100%;
  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.  
  53. .help-text {
  54.   margin-top: 0;
  55.   font-size: .8125rem;
  56.   font-style: italic;
  57.   color: #0a0a0a; }
  58.  
  59.  
  60. /* don't glue labels to their associated input */
  61. input[type="radio"]+label, input[type="checkbox"]+label{
  62.   padding-left: .3em;
  63. }
  64.  
  65. fieldset>ul{
  66.   margin: 0;
  67.   padding-left: 1.5em;
  68. }
  69. /* this is generaly a fieldset class */
  70. .property_fields{
  71.   /* Sadly, Safari don't handle flex on fieldsets yet (you have to add a div inside)...*/
  72.   display: flex;
  73.   flex-flow: row wrap;
  74.   position: relative;
  75.   margin-top: 1em;
  76.   margin-bottom: 1em;
  77.   max-width: 900px;
  78.   padding: .5em 3px;
  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 */
  81. }
  82. /* If property_fields is flex, wimscenter must take the full width*/
  83. .property_fields .wimscenter{
  84.   width: 100%;
  85. }
  86.  
  87. /*.property_fields .field {
  88.         margin: auto;
  89. }*/
  90.  
  91. .property_fields .actions,
  92. .property_fields .wimsform{
  93.   padding: .5em;
  94.   margin-top: .5em;
  95. }
  96. .property_fields>fieldset{
  97.   margin-bottom: .5em;
  98. }
  99.  
  100. .field.box{
  101.   padding: .4em .4em .8em .4em; /*.4em seems max for Chrome 2-columns layout */
  102.   border: 1px solid #CFCFCF;
  103.   /*margin-bottom:1px;*/
  104.   line-height: 1.2em;
  105.   /* min height lets having an help button right float*/
  106.   min-height: 2em;
  107.   flex-grow: 1;
  108. }
  109.  
  110. .box_title{
  111.   margin-top: 0;
  112.   margin-bottom: .5em;
  113.   background-color: var(--wims_bgcolor);
  114.   padding: 2px;
  115. }
  116.  
  117. .property_fields p{
  118.   padding: 0 1em;
  119.   box-sizing: border-box;
  120. }
  121.  
  122. /*.box>div, .box>input, .box>textarea, .box>select{
  123.   margin-left:.3em;
  124. }*/
  125.  
  126. .property_fields .halfwidth{
  127.   /*display: inline-block;
  128.   vertical-align: middle;*/
  129.   float: left;
  130.   /*min-width: 380px;*/
  131.   /*min-height could be suppressed when all browsers will render well "flexbox"*/
  132.   min-height: 4em;
  133. }
  134.  
  135. .property_fields .field:nth-child(even){
  136.   background-color: #DFDFDF;
  137.   background-color: rgba(230,230,230,.4);
  138. }
  139.  
  140. .property_fields .field:nth-child(odd){
  141.   background-color: #EFEFEF;
  142.   background-color: rgba(255,255,255,.8);
  143. }
  144.  
  145. .formHelp{
  146.   font-size: 9pt;
  147.   color: #666;
  148. }
  149.  
  150. .property_fields legend{
  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;
  157. }
  158.  
  159. .field>label{
  160.   font-weight:bold;
  161.   font-size: .875rem;
  162.   line-height: 1.8;
  163.   display:inline-block;
  164.   vertical-align: middle;
  165. }
  166.  
  167. /*.property_fields .field>label{
  168.   min-width:10em;
  169. }*/
  170.  
  171. .property_fields select,.property_fields textarea{
  172.   vertical-align: middle;
  173. }
  174.  
  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),
  180. /*.field select,*/
  181. .field textarea{
  182.   width:100%;
  183. }
  184.  
  185.  
  186. .field input.small_input{
  187.   width:6em;
  188.   min-width:6em;
  189. }
  190.  
  191. input[type="color"]{
  192.   vertical-align: middle;
  193.   /* min size prevents Safari displaying a very small button */
  194.   min-width: 44px;
  195.   min-height: 23px;
  196. }
  197.  
  198. li.wims_formradio{
  199.   display: block;
  200. }
  201. .wims_formradio label {
  202.   min-width:0;
  203.   font-weight:normal;
  204. }
  205.  
  206. /** Styles for HTML 5 inputs (required or typed, like type="number")*/
  207. input:not([type="submit"]):not([type="button"]), textarea{
  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;
  212. }
  213. input:required:not(.noicon), textarea:required:not(.noicon){
  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;
  217. }
  218. /* invalid required inputs */
  219. input:invalid, textarea:invalid, .required_invalid_legend {
  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);
  223. }
  224. /* invalid inputs, with focus  */
  225. input:focus:invalid, textarea:focus:invalid, .required_invalid_focus_legend {
  226.   background-image: url("../../../gifs/svg/thumb_down_red.svg");
  227. }
  228. /* valid required inputs (dont show the green check on all valid, only required ones) */
  229. input:required:focus:valid, textarea:required:focus:valid, .required_valid_legend {
  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);
  233. }
  234. /* noicon css class disable the required icon */
  235. input.noicon,
  236. input.noicon:required,
  237. input.noicon:required:focus,
  238. textarea.noicon:required,
  239. textarea.noicon:required:focus{
  240.   background-image:none;
  241. }
  242.  
  243. .property_fields pre,
  244. .property_fields code,
  245. .property_fields .wims_scrollable{
  246.   width: 100%;
  247. }
  248.  
  249. /* Small screens */
  250. @media only screen and (max-width: 40em) {
  251.   .property_fields .halfwidth, .halfwidth{
  252.     width: 100%;
  253.     display: block;
  254.     min-width: 0;
  255.   }
  256.   /* prevent inputs from being larger than screen*/
  257.   /*.box input:not([type="button"]):not([type="color"]),.box select,.box textarea{
  258.     width:75%;
  259.   }*/
  260.   .property_fields pre,
  261.   .property_fields code,
  262.   .property_fields .wims_scrollable,
  263.   .property_fields .canvas_div{
  264.     max-width: 21em;
  265.   }
  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) {
  270.   .property_fields .halfwidth{
  271.     min-width: 310px;
  272.   }
  273.   .property_fields pre,
  274.   .property_fields code,
  275.   .property_fields .wims_scrollable,
  276.   .property_fields .canvas_div{
  277.     max-width: 32em;
  278.   }
  279. } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
  280.  
  281. /* Large screens */
  282. @media only screen and (min-width: 64.063em) {
  283.   .property_fields pre,
  284.   .property_fields code,
  285.   .property_fields .wims_scrollable,
  286.   .property_fields .canvas_div{
  287.     max-width: 784px;
  288.   }
  289. } /* min-width 1025px, large screens */
  290.  
  291.