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