Mercurial > hg > isophonics-drupal-site

annotate core/themes/bartik/css/components/form.css @ 0:4c8ae668cc8c

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