github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/form.css (about) 1 /*! 2 * # Semantic UI x.x - Form 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Elements 15 *******************************/ 16 17 18 /*-------------------- 19 Form 20 ---------------------*/ 21 22 .ui.form { 23 position: relative; 24 max-width: 100%; 25 } 26 27 /*-------------------- 28 Content 29 ---------------------*/ 30 31 .ui.form > p { 32 margin: 1em 0em; 33 } 34 35 /*-------------------- 36 Field 37 ---------------------*/ 38 39 .ui.form .fields .field, 40 .ui.form .field { 41 clear: both; 42 margin: 0em 0em 1em; 43 } 44 .ui.form .fields:last-child, 45 .ui.form .field:last-child { 46 margin-bottom: 0em; 47 } 48 49 /*-------------------- 50 Labels 51 ---------------------*/ 52 53 .ui.form .field > label { 54 display: block; 55 margin: 0em 0em 0.2857rem 0em; 56 color: rgba(0, 0, 0, 0.8); 57 font-size: 0.9285em; 58 font-weight: bold; 59 text-transform: none; 60 } 61 .ui.form .grouped.fields > label { 62 margin: 0em 0em 0.2857rem 0em; 63 color: rgba(0, 0, 0, 0.8); 64 font-size: 0.9285em; 65 font-weight: bold; 66 text-transform: none; 67 } 68 .ui.form .inline.fields > label { 69 display: inline-block; 70 vertical-align: middle; 71 margin: 0em 1em 0em 0em; 72 color: rgba(0, 0, 0, 0.8); 73 font-size: 0.9285em; 74 font-weight: bold; 75 text-transform: none; 76 } 77 78 /*-------------------- 79 Standard Inputs 80 ---------------------*/ 81 82 .ui.form textarea, 83 .ui.form input:not([type]), 84 .ui.form input[type="date"], 85 .ui.form input[type="datetime-local"], 86 .ui.form input[type="email"], 87 .ui.form input[type="number"], 88 .ui.form input[type="password"], 89 .ui.form input[type="search"], 90 .ui.form input[type="tel"], 91 .ui.form input[type="time"], 92 .ui.form input[type="text"], 93 .ui.form input[type="url"], 94 .ui.form .ui.input { 95 width: 100%; 96 vertical-align: top; 97 } 98 .ui.form input:not([type]), 99 .ui.form input[type="date"], 100 .ui.form input[type="datetime-local"], 101 .ui.form input[type="email"], 102 .ui.form input[type="number"], 103 .ui.form input[type="password"], 104 .ui.form input[type="search"], 105 .ui.form input[type="tel"], 106 .ui.form input[type="time"], 107 .ui.form input[type="text"], 108 .ui.form input[type="url"] { 109 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 110 margin: 0em; 111 outline: none; 112 -webkit-appearance: none; 113 tap-highlight-color: rgba(255, 255, 255, 0); 114 line-height: 1.2142em; 115 padding: 0.67861em 1em; 116 font-size: 1em; 117 background: #ffffff; 118 border: 1px solid rgba(39, 41, 43, 0.15); 119 color: rgba(0, 0, 0, 0.8); 120 border-radius: 0.2857rem; 121 box-shadow: 0em 0em 0em 0em transparent inset; 122 -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 123 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 124 } 125 .ui.textarea, 126 .ui.form textarea { 127 margin: 0em; 128 -webkit-appearance: none; 129 tap-highlight-color: rgba(255, 255, 255, 0); 130 padding: 0.78571em 1em; 131 background: #ffffff; 132 border: 1px solid rgba(39, 41, 43, 0.15); 133 outline: none; 134 color: rgba(0, 0, 0, 0.8); 135 border-radius: 0.2857rem; 136 box-shadow: 0em 0em 0em 0em transparent inset; 137 -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 138 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 139 font-size: 1em; 140 height: 12em; 141 min-height: 8em; 142 max-height: 24em; 143 line-height: 1.2857; 144 resize: vertical; 145 } 146 .ui.form textarea, 147 .ui.form input[type="checkbox"] { 148 vertical-align: top; 149 } 150 151 /*-------------------------- 152 Input w/ attached Button 153 ---------------------------*/ 154 155 .ui.form input.attached { 156 width: auto; 157 } 158 159 /*-------------------- 160 Basic Select 161 ---------------------*/ 162 163 .ui.form select { 164 display: block; 165 height: auto; 166 width: 100%; 167 background: #ffffff; 168 border: 1px solid rgba(39, 41, 43, 0.15); 169 border-radius: 0.2857rem; 170 box-shadow: 0em 0em 0em 0em transparent inset; 171 padding: 0.62em 1em; 172 color: rgba(0, 0, 0, 0.8); 173 -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 174 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 175 } 176 177 /*-------------------- 178 Dropdown 179 ---------------------*/ 180 181 .ui.form .field > .selection.dropdown { 182 width: 100%; 183 } 184 .ui.form .field > .selection.dropdown > .dropdown.icon { 185 float: right; 186 } 187 .ui.form .inline.field > .selection.dropdown { 188 width: auto; 189 } 190 .ui.form .inline.field > .selection.dropdown > .dropdown.icon { 191 float: none; 192 } 193 194 /*-------------------- 195 Dividers 196 ---------------------*/ 197 198 .ui.form .divider { 199 clear: both; 200 margin: 1em 0em; 201 } 202 203 /*-------------------- 204 Types of Messages 205 ---------------------*/ 206 207 .ui.form .success.message, 208 .ui.form .warning.message, 209 .ui.form .error.message { 210 display: none; 211 } 212 213 /* Assumptions */ 214 .ui.form .message:first-child { 215 margin-top: 0px; 216 } 217 218 /*-------------------- 219 Validation Prompt 220 ---------------------*/ 221 222 .ui.form .field .prompt.label { 223 white-space: nowrap; 224 } 225 .ui.form .inline.field .prompt { 226 margin: -0.5em 0em -0.5em 1em; 227 } 228 .ui.form .inline.field .prompt:before { 229 margin-top: -0.3em; 230 bottom: auto; 231 right: auto; 232 top: 50%; 233 left: 0em; 234 } 235 236 237 /******************************* 238 States 239 *******************************/ 240 241 242 /*-------------------- 243 Placeholder 244 ---------------------*/ 245 246 247 /* browsers require these rules separate */ 248 .ui.form ::-webkit-input-placeholder { 249 color: rgba(140, 140, 140, 0.8); 250 } 251 .ui.form ::-moz-placeholder { 252 color: rgba(140, 140, 140, 0.8); 253 } 254 .ui.form :focus::-webkit-input-placeholder { 255 color: rgba(89, 89, 89, 0.8); 256 } 257 .ui.form :focus::-moz-placeholder { 258 color: rgba(89, 89, 89, 0.8); 259 } 260 261 /* Error Placeholder */ 262 .ui.form .error ::-webkit-input-placeholder { 263 color: #e38585; 264 } 265 .ui.form .error ::-moz-placeholder { 266 color: #e38585; 267 } 268 .ui.form .error :focus::-webkit-input-placeholder { 269 color: #de7171; 270 } 271 .ui.form .error :focus::-moz-placeholder { 272 color: #de7171; 273 } 274 275 /*-------------------- 276 Focus 277 ---------------------*/ 278 279 .ui.form input:not([type]):focus, 280 .ui.form input[type="date"]:focus, 281 .ui.form input[type="datetime-local"]:focus, 282 .ui.form input[type="email"]:focus, 283 .ui.form input[type="number"]:focus, 284 .ui.form input[type="password"]:focus, 285 .ui.form input[type="search"]:focus, 286 .ui.form input[type="tel"]:focus, 287 .ui.form input[type="time"]:focus, 288 .ui.form input[type="text"]:focus, 289 .ui.form input[type="url"]:focus { 290 color: rgba(0, 0, 0, 0.85); 291 border-color: rgba(39, 41, 43, 0.3); 292 border-radius: 0em 0.2857rem 0.2857rem 0em; 293 background: #ffffff; 294 box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset; 295 } 296 .ui.form textarea:focus { 297 color: rgba(0, 0, 0, 0.85); 298 border-color: rgba(39, 41, 43, 0.3); 299 border-radius: 0em 0.2857rem 0.2857rem 0em; 300 background: #ffffff; 301 box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset; 302 -webkit-appearance: none; 303 } 304 305 /*-------------------- 306 Success 307 ---------------------*/ 308 309 310 /* On Form */ 311 .ui.form.success .success.message { 312 display: block; 313 } 314 315 /*-------------------- 316 Error 317 ---------------------*/ 318 319 320 /* On Form */ 321 .ui.form.warning .warning.message { 322 display: block; 323 } 324 325 /*-------------------- 326 Warning 327 ---------------------*/ 328 329 330 /* On Form */ 331 .ui.form.error .error.message { 332 display: block; 333 } 334 335 /* On Field(s) */ 336 .ui.form .fields.error .field label, 337 .ui.form .field.error label, 338 .ui.form .fields.error .field .input, 339 .ui.form .field.error .input { 340 color: #d95c5c; 341 } 342 .ui.form .fields.error .field .corner.label, 343 .ui.form .field.error .corner.label { 344 border-color: #d95c5c; 345 color: #ffffff; 346 } 347 .ui.form .fields.error .field textarea, 348 .ui.form .fields.error .field select, 349 .ui.form .fields.error .field input:not([type]), 350 .ui.form .fields.error .field input[type="date"], 351 .ui.form .fields.error .field input[type="datetime-local"], 352 .ui.form .fields.error .field input[type="email"], 353 .ui.form .fields.error .field input[type="number"], 354 .ui.form .fields.error .field input[type="password"], 355 .ui.form .fields.error .field input[type="search"], 356 .ui.form .fields.error .field input[type="tel"], 357 .ui.form .fields.error .field input[type="time"], 358 .ui.form .fields.error .field input[type="text"], 359 .ui.form .fields.error .field input[type="url"], 360 .ui.form .field.error textarea, 361 .ui.form .field.error select, 362 .ui.form .field.error input:not([type]), 363 .ui.form .field.error input[type="date"], 364 .ui.form .field.error input[type="datetime-local"], 365 .ui.form .field.error input[type="email"], 366 .ui.form .field.error input[type="number"], 367 .ui.form .field.error input[type="password"], 368 .ui.form .field.error input[type="search"], 369 .ui.form .field.error input[type="tel"], 370 .ui.form .field.error input[type="time"], 371 .ui.form .field.error input[type="text"], 372 .ui.form .field.error input[type="url"] { 373 background: #fff0f0; 374 border-color: #dbb1b1; 375 color: #d95c5c; 376 border-radius: 0em 0.2857rem 0.2857rem 0em; 377 box-shadow: 2px 0em 0em 0em #d95c5c inset; 378 } 379 .ui.form .field.error textarea:focus, 380 .ui.form .field.error select:focus, 381 .ui.form .field.error input:not([type]):focus, 382 .ui.form .field.error input[type="date"]:focus, 383 .ui.form .field.error input[type="datetime-local"]:focus, 384 .ui.form .field.error input[type="email"]:focus, 385 .ui.form .field.error input[type="number"]:focus, 386 .ui.form .field.error input[type="password"]:focus, 387 .ui.form .field.error input[type="search"]:focus, 388 .ui.form .field.error input[type="tel"]:focus, 389 .ui.form .field.error input[type="time"]:focus, 390 .ui.form .field.error input[type="text"]:focus, 391 .ui.form .field.error input[type="url"]:focus { 392 background: #fff0f0; 393 border-color: #dbb1b1; 394 color: #dc6868; 395 -webkit-appearance: none; 396 box-shadow: 2px 0em 0em 0em #dc6868 inset; 397 } 398 399 /* Preserve Native Select Stylings */ 400 .ui.form .field.error select { 401 -webkit-appearance: menulist-button; 402 } 403 404 /*------------------ 405 Dropdown Error 406 --------------------*/ 407 408 .ui.form .fields.error .field .ui.dropdown, 409 .ui.form .fields.error .field .ui.dropdown .item, 410 .ui.form .field.error .ui.dropdown, 411 .ui.form .field.error .ui.dropdown .text, 412 .ui.form .field.error .ui.dropdown .item { 413 background: #fff0f0; 414 color: #d95c5c; 415 } 416 .ui.form .fields.error .field .ui.dropdown, 417 .ui.form .field.error .ui.dropdown { 418 border-color: #dbb1b1 !important; 419 } 420 .ui.form .fields.error .field .ui.dropdown:hover, 421 .ui.form .field.error .ui.dropdown:hover { 422 border-color: #dbb1b1 !important; 423 } 424 .ui.form .fields.error .field .ui.dropdown:hover .menu, 425 .ui.form .field.error .ui.dropdown:hover .menu { 426 border-color: #dbb1b1; 427 } 428 429 /* Hover */ 430 .ui.form .fields.error .field .ui.dropdown .menu .item:hover, 431 .ui.form .field.error .ui.dropdown .menu .item:hover { 432 background-color: #fbe7e7; 433 } 434 435 /* Active */ 436 .ui.form .fields.error .field .ui.dropdown .menu .active.item, 437 .ui.form .field.error .ui.dropdown .menu .active.item { 438 background-color: #fdcfcf !important; 439 } 440 441 /*-------------------- 442 Checkbox Error 443 ---------------------*/ 444 445 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, 446 .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, 447 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, 448 .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { 449 color: #d95c5c; 450 } 451 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, 452 .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, 453 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, 454 .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { 455 background: #fff0f0; 456 border-color: #dbb1b1; 457 } 458 .ui.form .fields.error .field .checkbox label:after, 459 .ui.form .field.error .checkbox label:after, 460 .ui.form .fields.error .field .checkbox .box:after, 461 .ui.form .field.error .checkbox .box:after { 462 color: #d95c5c; 463 } 464 465 /*-------------------- 466 Disabled 467 ---------------------*/ 468 469 .ui.form .field :disabled, 470 .ui.form .field.disabled { 471 opacity: 0.5; 472 } 473 .ui.form .field.disabled label { 474 opacity: 0.5; 475 } 476 .ui.form .field.disabled :disabled { 477 opacity: 1; 478 } 479 480 /*-------------- 481 Loading 482 ---------------*/ 483 484 .ui.loading.form { 485 position: relative; 486 cursor: default; 487 point-events: none; 488 text-shadow: none !important; 489 color: transparent !important; 490 -webkit-transition: all 0s linear; 491 transition: all 0s linear; 492 z-index: 100; 493 } 494 .ui.loading.form:before { 495 position: absolute; 496 content: ''; 497 top: 0%; 498 left: 0%; 499 background: rgba(255, 255, 255, 0.8); 500 width: 100%; 501 height: 100%; 502 z-index: 100; 503 } 504 .ui.loading.form:after { 505 position: absolute; 506 content: ''; 507 top: 50%; 508 left: 50%; 509 margin: -1.5em 0em 0em -1.5em; 510 width: 3em; 511 height: 3em; 512 -webkit-animation: form-spin 0.6s linear; 513 animation: form-spin 0.6s linear; 514 -webkit-animation-iteration-count: infinite; 515 animation-iteration-count: infinite; 516 border-radius: 500rem; 517 border-color: #aaaaaa rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); 518 border-style: solid; 519 border-width: 0.2em; 520 box-shadow: 0px 0px 0px 1px transparent; 521 visibility: visible; 522 z-index: 101; 523 } 524 @-webkit-keyframes form-spin { 525 from { 526 -webkit-transform: rotate(0deg); 527 transform: rotate(0deg); 528 } 529 to { 530 -webkit-transform: rotate(360deg); 531 transform: rotate(360deg); 532 } 533 } 534 @keyframes form-spin { 535 from { 536 -webkit-transform: rotate(0deg); 537 transform: rotate(0deg); 538 } 539 to { 540 -webkit-transform: rotate(360deg); 541 transform: rotate(360deg); 542 } 543 } 544 545 546 /******************************* 547 Element Types 548 *******************************/ 549 550 551 /*-------------------- 552 Required Field 553 ---------------------*/ 554 555 .ui.form .required.fields:not(.grouped) > .field > label:after, 556 .ui.form .required.fields.grouped > label:after, 557 .ui.form .required.field > label:after, 558 .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, 559 .ui.form .required.field > .checkbox:after { 560 margin: -0.2em 0em 0em 0.2em; 561 content: '*'; 562 color: #d95c5c; 563 } 564 .ui.form .required.fields:not(.grouped) > .field > label:after, 565 .ui.form .required.fields.grouped > label:after, 566 .ui.form .required.field > label:after { 567 display: inline-block; 568 vertical-align: top; 569 } 570 .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, 571 .ui.form .required.field > .checkbox:after { 572 position: absolute; 573 top: 0%; 574 left: 100%; 575 } 576 577 578 /******************************* 579 Variations 580 *******************************/ 581 582 583 /*-------------------- 584 Inverted Colors 585 ---------------------*/ 586 587 .ui.inverted.form label, 588 .ui.form .inverted.segment label, 589 .ui.form .inverted.segment .ui.checkbox label, 590 .ui.form .inverted.segment .ui.checkbox .box, 591 .ui.inverted.form .ui.checkbox label, 592 .ui.inverted.form .ui.checkbox .box { 593 color: #ffffff; 594 } 595 596 /*-------------------- 597 Field Groups 598 ---------------------*/ 599 600 601 /* Grouped Vertically */ 602 .ui.form .grouped.fields { 603 margin: 0em 0em 1em; 604 } 605 .ui.form .grouped.fields:last-child { 606 margin-bottom: 0em; 607 } 608 .ui.form .grouped.fields > label { 609 font-size: 0.9285em; 610 } 611 .ui.form .grouped.fields .field { 612 display: block; 613 float: none; 614 margin: 0.5em 0em; 615 padding: 0em; 616 } 617 618 /*-------------------- 619 Fields 620 ---------------------*/ 621 622 623 /* Split fields */ 624 .ui.form .fields { 625 clear: both; 626 } 627 .ui.form .fields:after { 628 content: ' '; 629 display: block; 630 clear: both; 631 visibility: hidden; 632 line-height: 0; 633 height: 0; 634 } 635 .ui.form .fields > .field { 636 clear: none; 637 float: left; 638 padding-left: 0.5em; 639 padding-right: 0.5em; 640 } 641 .ui.form .fields > .field:first-child { 642 border-left: none; 643 box-shadow: none; 644 } 645 646 /* Other Combinations */ 647 .ui.form .two.fields > .fields, 648 .ui.form .two.fields > .field { 649 width: 50%; 650 } 651 .ui.form .three.fields > .fields, 652 .ui.form .three.fields > .field { 653 width: 33.33333333%; 654 } 655 .ui.form .four.fields > .fields, 656 .ui.form .four.fields > .field { 657 width: 25%; 658 } 659 .ui.form .five.fields > .fields, 660 .ui.form .five.fields > .field { 661 width: 20%; 662 } 663 .ui.form .six.fields > .fields, 664 .ui.form .six.fields > .field { 665 width: 16.66666667%; 666 } 667 .ui.form .seven.fields > .fields, 668 .ui.form .seven.fields > .field { 669 width: 14.28571429%; 670 } 671 .ui.form .eight.fields > .fields, 672 .ui.form .eight.fields > .field { 673 width: 12.5%; 674 } 675 .ui.form .nine.fields > .fields, 676 .ui.form .nine.fields > .field { 677 width: 11.11111111%; 678 } 679 .ui.form .ten.fields > .fields, 680 .ui.form .ten.fields > .field { 681 width: 10%; 682 } 683 684 /* Swap to full width on mobile */ 685 @media only screen and (max-width: 767px) { 686 .ui.form .two.fields > .fields, 687 .ui.form .two.fields > .field, 688 .ui.form .three.fields > .fields, 689 .ui.form .three.fields > .field, 690 .ui.form .four.fields > .fields, 691 .ui.form .four.fields > .field, 692 .ui.form .five.fields > .fields, 693 .ui.form .five.fields > .field, 694 .ui.form .six.fields > .fields, 695 .ui.form .six.fields > .field, 696 .ui.form .seven.fields > .fields, 697 .ui.form .seven.fields > .field, 698 .ui.form .eight.fields > .fields, 699 .ui.form .eight.fields > .field, 700 .ui.form .nine.fields > .fields, 701 .ui.form .nine.fields > .field, 702 .ui.form .ten.fields > .fields, 703 .ui.form .ten.fields > .field { 704 width: 100% !important; 705 margin: 0em 0em 1em; 706 padding-left: 0%; 707 padding-right: 0%; 708 } 709 } 710 .ui.form .fields .field:first-child { 711 padding-left: 0%; 712 } 713 .ui.form .fields .field:last-child { 714 padding-right: 0%; 715 } 716 717 /* Sizing Combinations */ 718 .ui.form .fields .wide.field { 719 width: 6.25%; 720 padding-left: 0.5em; 721 padding-right: 0.5em; 722 } 723 .ui.form .fields .wide.field:first-child { 724 padding-left: 0%; 725 } 726 .ui.form .fields .wide.field:last-child { 727 padding-right: 0%; 728 } 729 .ui.form .one.wide.field { 730 width: 6.25% !important; 731 } 732 .ui.form .two.wide.field { 733 width: 12.5% !important; 734 } 735 .ui.form .three.wide.field { 736 width: 18.75% !important; 737 } 738 .ui.form .four.wide.field { 739 width: 25% !important; 740 } 741 .ui.form .five.wide.field { 742 width: 31.25% !important; 743 } 744 .ui.form .six.wide.field { 745 width: 37.5% !important; 746 } 747 .ui.form .seven.wide.field { 748 width: 43.75% !important; 749 } 750 .ui.form .eight.wide.field { 751 width: 50% !important; 752 } 753 .ui.form .nine.wide.field { 754 width: 56.25% !important; 755 } 756 .ui.form .ten.wide.field { 757 width: 62.5% !important; 758 } 759 .ui.form .eleven.wide.field { 760 width: 68.75% !important; 761 } 762 .ui.form .twelve.wide.field { 763 width: 75% !important; 764 } 765 .ui.form .thirteen.wide.field { 766 width: 81.25% !important; 767 } 768 .ui.form .fourteen.wide.field { 769 width: 87.5% !important; 770 } 771 .ui.form .fifteen.wide.field { 772 width: 93.75% !important; 773 } 774 .ui.form .sixteen.wide.field { 775 width: 100% !important; 776 } 777 778 /* Swap to full width on mobile */ 779 @media only screen and (max-width: 767px) { 780 .ui.form .two.fields > .fields, 781 .ui.form .two.fields > .field, 782 .ui.form .three.fields > .fields, 783 .ui.form .three.fields > .field, 784 .ui.form .four.fields > .fields, 785 .ui.form .four.fields > .field, 786 .ui.form .five.fields > .fields, 787 .ui.form .five.fields > .field, 788 .ui.form .fields > .two.wide.field, 789 .ui.form .fields > .three.wide.field, 790 .ui.form .fields > .four.wide.field, 791 .ui.form .fields > .five.wide.field, 792 .ui.form .fields > .six.wide.field, 793 .ui.form .fields > .seven.wide.field, 794 .ui.form .fields > .eight.wide.field, 795 .ui.form .fields > .nine.wide.field, 796 .ui.form .fields > .ten.wide.field, 797 .ui.form .fields > .eleven.wide.field, 798 .ui.form .fields > .twelve.wide.field, 799 .ui.form .fields > .thirteen.wide.field, 800 .ui.form .fields > .fourteen.wide.field, 801 .ui.form .fields > .fifteen.wide.field, 802 .ui.form .fields > .sixteen.wide.field { 803 width: 100% !important; 804 margin: 0em 0em 1em; 805 padding-left: 0%; 806 padding-right: 0%; 807 } 808 } 809 810 /*-------------------- 811 Inline Fields 812 ---------------------*/ 813 814 .ui.form .inline.fields { 815 margin: 0em 0em 1em; 816 } 817 .ui.form .inline.fields .field { 818 display: inline-block; 819 float: none; 820 margin: 0em 1em 0em 0em; 821 padding: 0em; 822 } 823 .ui.form .inline.fields .field > label, 824 .ui.form .inline.fields .field > p, 825 .ui.form .inline.fields .field > input, 826 .ui.form .inline.fields .field > .ui.input, 827 .ui.form .inline.field > label, 828 .ui.form .inline.field > p, 829 .ui.form .inline.field > input, 830 .ui.form .inline.field > .ui.input { 831 display: inline-block; 832 width: auto; 833 margin-top: 0em; 834 margin-bottom: 0em; 835 vertical-align: middle; 836 font-size: 0.9285em; 837 } 838 .ui.form .inline.fields .field > input, 839 .ui.form .inline.fields .field > .ui.input, 840 .ui.form .inline.field > input, 841 .ui.form .inline.field > .ui.input { 842 font-size: 0.9285em; 843 } 844 .ui.form .inline.fields .field > .ui.checkbox label { 845 padding-left: 1.75em; 846 } 847 848 /* Label */ 849 .ui.form .inline.fields .field > :first-child, 850 .ui.form .inline.field > :first-child { 851 margin: 0em 0.2857rem 0em 0em; 852 } 853 .ui.form .inline.fields .field > :only-child, 854 .ui.form .inline.field > :only-child { 855 margin: 0em; 856 } 857 858 /*-------------------- 859 Sizes 860 ---------------------*/ 861 862 863 /* Standard */ 864 .ui.small.form { 865 font-size: 0.875em; 866 } 867 868 /* Medium */ 869 .ui.form { 870 font-size: auto; 871 } 872 873 /* Large */ 874 .ui.large.form { 875 font-size: 1.125em; 876 } 877 878 /* Huge */ 879 .ui.huge.form { 880 font-size: 1.2em; 881 } 882 883 884 /******************************* 885 Theme Overrides 886 *******************************/ 887 888 889 890 /******************************* 891 Site Overrides 892 *******************************/ 893