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.

1036 lines
26 KiB

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