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 @-moz-document url-prefix() {
  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 select.form-select {
 105   padding: 4px;
 106 }
 107 input.form-text,
 108 input.form-tel,
 109 input.form-email,
 110 input.form-url,
 111 input.form-search,
 112 input.form-file,
 113 input.form-number,
 114 input.form-color,
 115 textarea.form-textarea,
 116 select.form-select {
 117   border: 1px solid #ccc;
 118   color: #3b3b3b;
 119 }
 120 input.form-submit:hover,
 121 input.form-submit:focus {
 122   background: #dedede;
 123 }
 124 .password-suggestions ul li {
 125   margin-left: 1.2em; /* LTR */
 126 }
 127 [dir="rtl"] .password-suggestions ul li {
 128   margin-right: 1.2em;
 129   margin-left: 0;
 130 }
 131 .form-item label,
 132 .form-wrapper .label {
 133   font-size: 0.929em;
 134 }
 135 .form-wrapper .field-multiple-table .label {
 136   font-size: inherit;
 137 }
 138 .form-type-radio label,
 139 .form-type-checkbox label {
 140   margin-left: 4px; /* LTR */
 141 }
 142 [dir="rtl"] .form-type-radio label,
 143 [dir="rtl"] .form-type-checkbox label {
 144   margin-right: 4px;
 145   margin-left: 0;
 146 }
 147 .form-type-radio .description,
 148 .form-type-checkbox .description {
 149   margin-left: 2px; /* LTR */
 150 }
 151 [dir="rtl"] .form-type-radio .description,
 152 [dir="rtl"] .form-type-checkbox .description {
 153   margin-right: 2px;
 154   margin-left: 0;
 155 }
 156 .form-actions {
 157   padding-top: 10px;
 158 }
 159
 160 /* Node Form */
 161 #edit-body {
 162   margin-bottom: 2em;
 163 }
 164 .node-form label,
 165 .node-form .description,
 166 .node-form .form-wrapper .label {
 167   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 168 }
 169 .node-form .form-wrapper .field-multiple-table .label {
 170   font-family: inherit;
 171 }
 172 .node-form .form-wrapper {
 173   margin-bottom: 2em;
 174 }
 175
 176 /* Contact Form */
 177 .contact-form #edit-name {
 178   width: 75%;
 179   border-radius: 4px;
 180 }
 181 .contact-form #edit-mail {
 182   width: 75%;
 183   border-radius: 4px;
 184 }
 185 .contact-form #edit-subject {
 186   width: 75%;
 187   border-radius: 4px;
 188 }
 189 .contact-form #edit-message {
 190   width: 76.3%;
 191   border-top-left-radius: 4px;
 192   border-top-right-radius: 4px;
 193 }
 194
 195 /* Disabled form elements */
 196 .form-disabled input,
 197 .form-disabled select,
 198 .form-disabled textarea {
 199   background: #ededed;
 200   border-color: #bbb;
 201   color: #717171;
 202 }
 203 .form-disabled label {
 204   color: #717171;
 205 }
 206
 207 /* Comment form */
 208 .comment-form label {
 209   float: left; /* LTR */
 210   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 211   font-size: 0.929em;
 212   width: 120px;
 213 }
 214 [dir="rtl"] .comment-form label {
 215   float: right;
 216 }
 217 .comment-form input,
 218 .comment-form .form-select {
 219   margin: 0;
 220   border-radius: 4px;
 221 }
 222 .comment-form .form-type-textarea label {
 223   float: none;
 224 }
 225 .comment-form .form-item,
 226 .comment-form .form-radios,
 227 .comment-form .form-type-checkbox,
 228 .comment-form .form-select {
 229   margin-bottom: 10px;
 230   overflow: hidden;
 231 }
 232 .comment-form .form-type-checkbox,
 233 .comment-form .form-radios {
 234   margin-left: 120px; /* LTR */
 235 }
 236 [dir="rtl"] .comment-form .form-type-checkbox,
 237 [dir="rtl"] .comment-form .form-radios,
 238 [dir="rtl"] .comment-form .form-item .description {
 239   margin-left: 0;
 240   margin-right: 120px;
 241 }
 242 .comment-form .form-type-checkbox label,
 243 .comment-form .form-radios label {
 244   float: none;
 245   margin-top: 0;
 246 }
 247 .comment-form input.form-file {
 248   width: auto;
 249 }
 250 .layout-no-sidebars .comment-form .form-text {
 251   width: 800px;
 252 }
 253 .layout-one-sidebar .comment-form .form-text {
 254   width: 500px;
 255 }
 256 .layout-two-sidebars .comment-form .form-text {
 257   width: 320px;
 258 }
 259 .comment-form .form-item .description {
 260   font-size: 0.786em;
 261   line-height: 1.2;
 262   margin-left: 120px; /* LTR */
 263 }
 264 .comment-form .form-textarea {
 265   border-top-left-radius: 4px;
 266   border-top-right-radius: 4px;
 267 }
 268 .comment-form details.filter-wrapper .details-wrapper,
 269 .comment-form .text-format-wrapper .form-item {
 270   margin-top: 0;
 271   margin-bottom: 0;
 272 }
 273 .filter-wrapper label {
 274   width: auto;
 275   float: none;
 276 }
 277 .filter-wrapper .form-select {
 278   min-width: 120px;
 279 }
 280 .comment-form details.filter-wrapper .tips {
 281   font-size: 0.786em;
 282 }
 283 #comment-body-add-more-wrapper .form-type-textarea label {
 284   margin-bottom: 0.4em;
 285 }
 286 #edit-actions input {
 287   margin-right: 0.6em; /* LTR */
 288 }
 289 [dir="rtl"] #edit-actions input {
 290   margin-left: 0.6em;
 291   margin-right: 0;
 292 }
 293
 294 /* Form error styles. */
 295 .form-item textarea.error + .cke {
 296   border: 2px solid red;
 297 }
 298
 299 /* Form error message styles. */
 300 .form-item--error-message {
 301   color: #e32700;
 302 }
 303
 304 /**
 305  * Improve form element usability on narrow devices.
 306  */
 307 @media all and (max-width: 600px) {
 308   .form-actions .button {
 309     float: none;
 310     margin: 10px 0 0;
 311     padding-bottom: 6px;
 312     width: 100%;
 313     display: block;
 314     box-sizing: border-box;
 315     -webkit-box-sizing: border-box;
 316     -moz-box-sizing: border-box;
 317   }
 318
 319   .js .dropbutton .dropbutton-action > input, .js .dropbutton .dropbutton-action > a, .js .dropbutton .dropbutton-action > button {
 320     text-align: center;
 321     padding-left: 3em;
 322   }
 323 }