Subversion Repositories wimsdev

Rev

Rev 10946 | Rev 11519 | 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. /* corrects margin from normalize.css */
  18. input[type="radio"],input[type="checkbox"]{
  19.     margin-right: 5px;
  20. }
  21.  
  22.  
  23. /* this is generaly a fieldset class */
  24. .property_fields{
  25.     position: relative;
  26.     margin-top:1em;
  27.     margin-bottom:1em;
  28.     max-width:900px;
  29.     padding:.5em 3px;
  30.     /*Background-image is here to lighten background color */
  31.     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 */
  32. }
  33.  
  34. /*.property_fields .field {
  35.         margin: auto;
  36. }*/
  37.  
  38. .property_fields .actions,
  39. .property_fields .wimsform{
  40.     padding:.5em;
  41.     margin-top:.5em;
  42. }
  43.  
  44. .property_fields .box{
  45.     padding: .4em; /*.4em seems max for Chrome 2-columns layout */
  46.     border:1px solid #CFCFCF;
  47.     /*margin-bottom:1px;*/
  48.     line-height:1.2em;
  49. }
  50. .property_fields p{
  51.     padding:0 1em;
  52. }
  53.  
  54. .box>div, .box>input, .box>textarea, .box>select{
  55.     margin-left:1em;
  56. }
  57.  
  58. .property_fields .halfwidth{
  59.     /*display: inline-block;
  60.     vertical-align: middle;*/
  61.     float:left;
  62.     /*min-width: 380px;*/
  63.     /*min-height could be suppressed when all browsers will render welle "flexbox"*/
  64.     min-height:4em;
  65. }
  66.  
  67. .property_fields .field:nth-child(even){
  68.   background-color: #DFDFDF;
  69.   background-color: rgba(240,240,240,.4);
  70. }
  71.  
  72. .property_fields .field:nth-child(odd){
  73.   background-color: #EFEFEF;
  74.   background-color: rgba(255,255,255,.8);
  75. }
  76.  
  77. .formHelp{
  78.     font-size: 9pt;
  79.     color:#666;
  80. }
  81.  
  82. .property_fields legend{
  83.     font-size: 1.2em;
  84.     font-weight: bold;
  85.     text-shadow: -1px -1px #000;
  86.     padding: 0 .5em;
  87.     margin-left:1em;
  88.     border:1px solid #BBB;
  89.     border-radius:5px;
  90. }
  91.  
  92. .property_fields label{
  93.     font-weight:bold;
  94.     display:inline-block;
  95.     vertical-align: middle;
  96. }
  97. /*.property_fields .field>label{
  98.     min-width:10em;
  99. }*/
  100.  
  101. .property_fields select{
  102.     vertical-align: middle;
  103. }
  104.  
  105. .property_fields input[type="text"]{
  106.     min-width:50%;
  107. }
  108.  
  109. .fullwidth input[type="text"],
  110. .fullwidth select{
  111.     width:95%;
  112. }
  113.  
  114. .field textarea{
  115.     min-width:80%;
  116. }
  117.  
  118. .fullwidth textarea{
  119.     width:96%;
  120. }
  121.  
  122. .field input.small_input{
  123.     width:6em;
  124.     min-width:6em;
  125. }
  126.  
  127. input[type="color"]{
  128.     vertical-align: bottom;
  129. }
  130.  
  131. li.wims_formradio{
  132.     display: block;
  133. }
  134. .wims_formradio label {
  135.   min-width:0;
  136.   font-weight:normal;
  137. }
  138.  
  139.  
  140.  
  141. /* Small screens */
  142. @media only screen and (max-width: 40em) {
  143.     .property_fields .halfwidth, .halfwidth{
  144.         width:100%;
  145.         display:block;
  146.         min-width: 0;
  147.     }
  148. } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
  149.  
  150. /* Medium screens */
  151. @media only screen and (min-width: 40.063em) and (max-width: 64em) {
  152.     .property_fields .halfwidth{
  153.         min-width: 310px;
  154.     }
  155. } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
  156.  
  157. /* Large screens */
  158. @media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
  159.  
  160.