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.

993 lines
23 KiB

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