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.

967 lines
22 KiB

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