You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

998 lines
25 KiB

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