1
0

form.css 27 KB

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