www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/bartik/css/components/form.css

   1 /**
   2  * @file
   3  * Visual styles for Bartik's forms.
   4  */
   5
   6 /* Password field. */
   7 .password-field {
   8   margin: 0;
   9 }
  10
  11 /* Form elements. */
  12 form {
  13   margin: 0;
  14   padding: 0;
  15 }
  16 fieldset {
  17   margin: 1em 0;
  18   min-width: 0;
  19 }
  20 /**
  21  * We've temporarily added this Firefox specific rule here to fix fieldset
  22  * widths.
  23  * @todo remove once this Mozilla bug is fixed.
  24  * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622
  25  */
  26 @media (min--moz-device-pixel-ratio: 0) {
  27   fieldset {
  28     display: table-cell;
  29   }
  30 }
  31 details,
  32 fieldset,
  33 .filter-wrapper {
  34   border-radius: 4px;
  35 }
  36 .filter-wrapper {
  37   border-top-left-radius: 0;
  38   border-top-right-radius: 0;
  39 }
  40 .filter-help a {
  41   font-size: 0.857em;
  42 }
  43 .filter-wrapper .form-item label {
  44   margin-right: 10px; /* LTR */
  45 }
  46 [dir="rtl"] .filter-wrapper .form-item label {
  47   margin-left: 10px;
  48   margin-right: 0;
  49 }
  50 summary {
  51   background: #dbdbdb;
  52   color: #3b3b3b;
  53   text-shadow: 0 1px 0 #fff;
  54 }
  55 details summary a {
  56   color: #3b3b3b;
  57 }
  58 details summary a:hover,
  59 details summary a:active,
  60 details summary a:focus {
  61   color: #000;
  62 }
  63 details .details-description {
  64   font-style: italic;
  65 }
  66 label {
  67   display: table;
  68   font-weight: bold;
  69 }
  70 label[for] {
  71   cursor: pointer;
  72 }
  73 input,
  74 textarea,
  75 select {
  76   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  77 }
  78 input {
  79   margin: 2px 0;
  80   padding: 4px;
  81   /* Keep form elements from overflowing their containers. */
  82   max-width: 100%;
  83   box-sizing: border-box;
  84 }
  85 input,
  86 textarea {
  87   font-size: 0.929em;
  88 }
  89
  90 /**
  91  * Make the font slightly bigger in mobile
  92  * @todo: check the correct font-size
  93  */
  94 @media screen and (max-width: 60em) { /* 920px */
  95   input,
  96   textarea {
  97     font-size: 16px;
  98   }
  99 }
 100 textarea {
 101   line-height: 1.5;
 102 }
 103 textarea.form-textarea {
 104   padding: 4px;
 105 }
 106 input.form-text,
 107 input.form-tel,
 108 input.form-email,
 109 input.form-url,
 110 input.form-search,
 111 input.form-file,
 112 input.form-number,
 113 input.form-color,
 114 textarea.form-textarea {
 115   border: 1px solid #ccc;
 116   color: #3b3b3b;
 117 }
 118 input.form-submit:hover,
 119 input.form-submit:focus {
 120   background: #dedede;
 121 }
 122 .password-suggestions ul li {
 123   margin-left: 1.2em; /* LTR */
 124 }
 125 [dir="rtl"] .password-suggestions ul li {
 126   margin-right: 1.2em;
 127   margin-left: 0;
 128 }
 129 .form-item label,
 130 .form-wrapper .label {
 131   font-size: 0.929em;
 132 }
 133 .form-wrapper .field-multiple-table .label {
 134   font-size: inherit;
 135 }
 136 .form-type-radio label,
 137 .form-type-checkbox label {
 138   margin-left: 4px; /* LTR */
 139 }
 140 [dir="rtl"] .form-type-radio label,
 141 [dir="rtl"] .form-type-checkbox label {
 142   margin-right: 4px;
 143   margin-left: 0;
 144 }
 145 .form-type-radio .description,
 146 .form-type-checkbox .description {
 147   margin-left: 2px; /* LTR */
 148 }
 149 [dir="rtl"] .form-type-radio .description,
 150 [dir="rtl"] .form-type-checkbox .description {
 151   margin-right: 2px;
 152   margin-left: 0;
 153 }
 154 .form-actions {
 155   padding-top: 10px;
 156 }
 157
 158 /* Node Form */
 159 #edit-body {
 160   margin-bottom: 2em;
 161 }
 162 .node-form label,
 163 .node-form .description,
 164 .node-form .form-wrapper .label {
 165   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 166 }
 167 .node-form .form-wrapper .field-multiple-table .label {
 168   font-family: inherit;
 169 }
 170 .node-form .form-wrapper {
 171   margin-bottom: 2em;
 172 }
 173 .node-form .entity-content-form-footer,
 174 .node-form .field--name-status {
 175   margin-bottom: 0;
 176 }
 177 .node-form .form-actions {
 178   padding-top: 0;
 179   margin-top: 0;
 180 }
 181
 182 /* Contact Form */
 183 .contact-form #edit-name {
 184   width: 75%;
 185   border-radius: 4px;
 186 }
 187 .contact-form #edit-mail {
 188   width: 75%;
 189   border-radius: 4px;
 190 }
 191 .contact-form #edit-subject {
 192   width: 75%;
 193   border-radius: 4px;
 194 }
 195 .contact-form #edit-message {
 196   width: 76.3%;
 197   border-top-left-radius: 4px;
 198   border-top-right-radius: 4px;
 199 }
 200
 201 /* Disabled form elements */
 202 .form-disabled input,
 203 .form-disabled select,
 204 .form-disabled textarea {
 205   background: #ededed;
 206   border-color: #bbb;
 207   color: #717171;
 208 }
 209 .form-disabled label {
 210   color: #717171;
 211 }
 212
 213 /* Comment form */
 214 .comment-form label {
 215   float: left; /* LTR */
 216   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 217   font-size: 0.929em;
 218   width: 120px;
 219 }
 220 [dir="rtl"] .comment-form label {
 221   float: right;
 222 }
 223 .comment-form input,
 224 .comment-form .form-select {
 225   margin: 0;
 226   border-radius: 4px;
 227 }
 228 .comment-form .form-type-textarea label {
 229   float: none;
 230 }
 231 .comment-form .form-item,
 232 .comment-form .form-radios,
 233 .comment-form .form-type-checkbox,
 234 .comment-form .form-select {
 235   margin-bottom: 10px;
 236   overflow: hidden;
 237 }
 238 .comment-form .form-type-checkbox,
 239 .comment-form .form-radios {
 240   margin-left: 120px; /* LTR */
 241 }
 242 [dir="rtl"] .comment-form .form-type-checkbox,
 243 [dir="rtl"] .comment-form .form-radios,
 244 [dir="rtl"] .comment-form .form-item .description {
 245   margin-left: 0;
 246   margin-right: 120px;
 247 }
 248 .comment-form .form-type-checkbox label,
 249 .comment-form .form-radios label {
 250   float: none;
 251   margin-top: 0;
 252 }
 253 .comment-form input.form-file {
 254   width: auto;
 255 }
 256 .layout-no-sidebars .comment-form .form-text {
 257   width: 800px;
 258 }
 259 .layout-one-sidebar .comment-form .form-text {
 260   width: 500px;
 261 }
 262 .layout-two-sidebars .comment-form .form-text {
 263   width: 320px;
 264 }
 265 .comment-form .form-item .description {
 266   font-size: 0.786em;
 267   line-height: 1.2;
 268   margin-left: 120px; /* LTR */
 269 }
 270 .comment-form .form-textarea {
 271   border-top-left-radius: 4px;
 272   border-top-right-radius: 4px;
 273 }
 274 .comment-form details.filter-wrapper .details-wrapper,
 275 .comment-form .text-format-wrapper .form-item {
 276   margin-top: 0;
 277   margin-bottom: 0;
 278 }
 279 .filter-wrapper label {
 280   width: auto;
 281   float: none;
 282 }
 283 .filter-wrapper .form-select {
 284   min-width: 120px;
 285 }
 286 .comment-form details.filter-wrapper .tips {
 287   font-size: 0.786em;
 288 }
 289 #comment-body-add-more-wrapper .form-type-textarea label {
 290   margin-bottom: 0.4em;
 291 }
 292 #edit-actions input {
 293   margin-right: 0.6em; /* LTR */
 294 }
 295 [dir="rtl"] #edit-actions input {
 296   margin-left: 0.6em;
 297   margin-right: 0;
 298 }
 299
 300 /* Form error styles. */
 301 .form-item textarea.error + .cke {
 302   border: 2px solid red;
 303 }
 304
 305 /* Form error message styles. */
 306 .form-item--error-message {
 307   color: #e32700;
 308 }
 309
 310 /**
 311  * Improve form element usability on narrow devices.
 312  */
 313 @media all and (max-width: 600px) {
 314   .form-actions .button {
 315     float: none;
 316     margin: 10px 0 0;
 317     padding-bottom: 6px;
 318     width: 100%;
 319     display: block;
 320     box-sizing: border-box;
 321     -webkit-box-sizing: border-box;
 322     -moz-box-sizing: border-box;
 323   }
 324
 325   .js .dropbutton .dropbutton-action > input,
 326   .js .dropbutton .dropbutton-action > a,
 327   .js .dropbutton .dropbutton-action > button {
 328     text-align: center;
 329     padding-left: 3em;
 330   }
 331 }