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

   1 /**
   2  * Form elements.
   3  */
   4 form {
   5   margin: 0;
   6   padding: 0;
   7 }
   8 fieldset:not(.fieldgroup) {
   9   background-color: #fcfcfa;
  10   border-radius: 2px;
  11   margin: 1em 0;
  12   padding: 30px 18px 18px;
  13   min-width: 0;
  14   position: relative;
  15 }
  16 /**
  17  * We've temporarily added this Firefox specific rule here to fix fieldset
  18  * widths.
  19  * @todo remove once this Mozilla bug is fixed.
  20  * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622
  21  */
  22 @media (min--moz-device-pixel-ratio: 0) {
  23   fieldset:not(.fieldgroup) {
  24     display: table-cell;
  25   }
  26 }
  27 fieldset:not(.fieldgroup) > legend {
  28   font-size: 1em;
  29   font-weight: bold;
  30   letter-spacing: 0.08em;
  31   position: absolute;
  32   text-transform: uppercase;
  33   top: 10px;
  34 }
  35 .fieldgroup {
  36   min-width: 0;
  37 }
  38 /**
  39  * We've temporarily added this Firefox specific rule here to fix fieldset
  40  * widths.
  41  * @todo remove once this Mozilla bug is fixed.
  42  * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622
  43  */
  44 @media (min--moz-device-pixel-ratio: 0) {
  45   .fieldgroup {
  46     display: table-cell;
  47   }
  48 }
  49 .form-item {
  50   margin: 0.75em 0;
  51 }
  52 /**
  53  * When a table row has a single form item, prevent it from adding unnecessary
  54  * extra spacing. If it has multiple form items, allow spacing between them,
  55  * overriding Classy.
  56  */
  57 tr.odd .form-item,
  58 tr.even .form-item {
  59   margin-top: 0.75em;
  60   margin-bottom: 0.75em;
  61 }
  62 td > .form-item:only-child {
  63   margin-top: 0;
  64   margin-bottom: 0;
  65 }
  66 .form-type-checkbox {
  67   padding: 0;
  68 }
  69 label {
  70   display: table;
  71   margin: 0 0 0.1em;
  72   padding: 0;
  73   font-weight: bold;
  74 }
  75 label.error {
  76   color: #a51b00;
  77 }
  78 label[for] {
  79   cursor: pointer;
  80 }
  81 .form-item label.option {
  82   text-transform: none;
  83 }
  84 .form-item label.option input {
  85   vertical-align: middle;
  86 }
  87 .form-disabled label {
  88   color: #686868;
  89 }
  90 .form-disabled input.form-text,
  91 .form-disabled input.form-tel,
  92 .form-disabled input.form-email,
  93 .form-disabled input.form-url,
  94 .form-disabled input.form-search,
  95 .form-disabled input.form-number,
  96 .form-disabled input.form-color,
  97 .form-disabled input.form-file,
  98 .form-disabled textarea.form-textarea,
  99 .form-disabled select.form-select {
 100   border-color: #d4d4d4;
 101   background-color: hsla(0, 0%, 0%, 0.08);
 102   box-shadow: none;
 103 }
 104 .form-item input.error,
 105 .form-item textarea.error,
 106 .form-item select.error {
 107   border-width: 1px;
 108   border-color: #e62600;
 109   background-color: hsla(15, 75%, 97%, 1);
 110   box-shadow: inset 0 5px 5px -5px #b8b8b8;
 111   color: #a51b00;
 112 }
 113 .form-item textarea.error + .cke {
 114   border-width: 1px;
 115   border-color: #e62600;
 116 }
 117 .form-item input.error:focus,
 118 .form-item textarea.error:focus,
 119 .form-item select.error:focus {
 120   border-color: #e62600;
 121   outline: 0;
 122   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px 1px #e62600;
 123   background-color: #fcf4f2;
 124 }
 125 .form-required:after {
 126   background-size: 7px 7px;
 127   width: 7px;
 128   height: 7px;
 129 }
 130 .form-item--error-message {
 131   margin-top: 0.15em;
 132   color: #e32700;
 133 }
 134 .fieldset-wrapper > .form-item--error-message {
 135   margin-top: 0;
 136 }
 137 .text-format-wrapper .form-item--error-message {
 138   border: solid #ccc;
 139   border-width: 0 1px;
 140   margin: 0;
 141   padding: 0.25em 0.666em 0;
 142 }
 143
 144 /* Filter */
 145 ul.tips,
 146 div.description,
 147 .form-item .description {
 148   margin: 0.2em 0 0 0;
 149   color: #595959;
 150   font-size: 0.95em;
 151 }
 152 .form-item .description.error {
 153   margin-top: 0;
 154   color: #a51b00;
 155 }
 156
 157 ul.tips li {
 158   margin: 0.25em 0 0.25em 1.5em; /* LTR */
 159 }
 160 [dir="rtl"] ul.tips li {
 161   margin: 0.25em 1.5em 0.25em 0;
 162 }
 163 .form-type-radio .description,
 164 .form-type-checkbox .description {
 165   margin-left: 1.5em; /* LTR */
 166 }
 167 [dir="rtl"] .form-type-radio .description,
 168 [dir="rtl"] .form-type-checkbox .description {
 169   margin-left: 0;
 170   margin-right: 1.5em;
 171 }
 172 .form-text,
 173 .form-textarea {
 174   border-radius: 2px;
 175   font-size: 1em;
 176   line-height: normal;
 177 }
 178
 179 input.form-autocomplete,
 180 input.form-text,
 181 input.form-tel,
 182 input.form-email,
 183 input.form-url,
 184 input.form-search,
 185 input.form-number,
 186 input.form-color,
 187 input.form-file,
 188 input.form-date,
 189 input.form-time,
 190 textarea.form-textarea {
 191   box-sizing: border-box;
 192   padding: 0.3em 0.4em 0.3em 0.5em; /* LTR */
 193   max-width: 100%;
 194   border: 1px solid #b8b8b8;
 195   border-top-color: #999;
 196   border-radius: 2px;
 197   background: #fcfcfa;
 198   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
 199   font-size: 1em;
 200   color: #595959;
 201   -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 202   transition: border linear 0.2s, box-shadow linear 0.2s;
 203 }
 204 [dir="rtl"] textarea.form-textarea {
 205   padding: 0.3em 0.5em 0.3em 0.4em;
 206 }
 207 .form-text:focus,
 208 .form-tel:focus,
 209 .form-email:focus,
 210 .form-url:focus,
 211 .form-search:focus,
 212 .form-number:focus,
 213 .form-color:focus,
 214 .form-file:focus,
 215 .form-textarea:focus,
 216 .form-date:focus,
 217 .form-time:focus {
 218   border-color: #40b6ff;
 219   outline: 0;
 220   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
 221   background-color: #fff;
 222 }
 223
 224 .confirm-parent,
 225 .password-parent {
 226   overflow: visible;
 227   width: auto;
 228 }
 229
 230 .form-item-options-group-info-identifier,
 231 .form-item-pass .description {
 232   clear: both;
 233 }
 234
 235 /**
 236  * Limits extra long instances of select elements to the max width allowed
 237  * to avoid breaking layouts.
 238  */
 239 select {
 240   max-width: 100%;
 241 }
 242
 243 /**
 244  * Select elements - Webkit only
 245  */
 246 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 247   select {
 248     cursor: pointer;
 249     -webkit-appearance: none;
 250     padding: 1px 1.571em 1px 0.5em; /* LTR */
 251     border: 1px solid #a6a6a6;
 252     border-radius: 0.143em;
 253     background:
 254       url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
 255       -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
 256
 257     text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
 258     font-size: 0.875rem;
 259     -webkit-transition: all 0.1s;
 260     transition: all 0.1s;
 261     -webkit-font-smoothing: antialiased;
 262   }
 263   [dir="rtl"] select {
 264     padding: 1px 0.714em 1px 1.571em;
 265     background-position: 1% 63%, 0 0;
 266   }
 267   select:focus,
 268   select:hover {
 269     background-image:
 270       url(../../../../misc/icons/333333/caret-down.svg),
 271       -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
 272     color: #1a1a1a;
 273   }
 274   select:hover {
 275     box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
 276   }
 277 }
 278
 279 /**
 280  * Improve spacing of cancel link.
 281  */
 282 #edit-cancel {
 283   margin-left: 10px; /* LTR */
 284 }
 285 [dir="rtl"] #edit-cancel {
 286   margin-left: 0;
 287   margin-right: 10px;
 288 }
 289
 290 /**
 291  * Improve form element usability on narrow devices.
 292  */
 293 @media screen and (max-width: 600px) {
 294   input.form-autocomplete,
 295   input.form-text,
 296   input.form-tel,
 297   input.form-email,
 298   input.form-url,
 299   input.form-search,
 300   input.form-number,
 301   input.form-color,
 302   input.form-file,
 303   textarea.form-textarea {
 304     width: 100%;
 305     font-size: 1.2em;
 306     line-height: 1.2em;
 307   }
 308   input.form-number {
 309     width: auto;
 310   }
 311   .form-actions input,
 312   .form-wrapper input[type="submit"] {
 313     float: none;
 314     margin-left: 0;
 315     margin-right: 0;
 316     margin-top: 10px;
 317     padding-bottom: 6px;
 318     width: 100%;
 319   }
 320   .form-actions input:first-child,
 321   .form-wrapper input[type="submit"]:first-child {
 322     margin-top: 0;
 323   }
 324   details summary {
 325     overflow: hidden;
 326     text-overflow: ellipsis;
 327     white-space: nowrap;
 328     box-sizing: border-box;
 329   }
 330   .password-strength {
 331     width: 100%;
 332   }
 333   div.form-item div.password-suggestions {
 334     float: none;
 335   }
 336   #dblog-filter-form .form-actions {
 337     float: none;
 338     padding: 0;
 339   }
 340   #edit-cancel {
 341     display: block;
 342     margin: 10px 0 0 0;
 343   }
 344   select {
 345     width: 100%;
 346   }
 347 }
 348
 349 /* Exceptions */
 350 #diff-inline-form select,
 351 div.filter-options select {
 352   padding: 0;
 353 }