form.css 25 KB

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