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.

569 lines
11 KiB

  1. /*
  2. * # Semantic - Form
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. /*--------------------
  15. Form
  16. ---------------------*/
  17. .ui.form {
  18. position: relative;
  19. max-width: 100%;
  20. }
  21. .ui.form :first-child {
  22. margin-top: 0em;
  23. }
  24. .ui.form :last-child {
  25. margin-bottom: 0em;
  26. }
  27. /*--------------------
  28. Content
  29. ---------------------*/
  30. .ui.form > p {
  31. margin: 1em 0;
  32. }
  33. /*--------------------
  34. Field
  35. ---------------------*/
  36. .ui.form .field {
  37. clear: both;
  38. margin: 0em 0em 1em;
  39. }
  40. /*--------------------
  41. Labels
  42. ---------------------*/
  43. .ui.form .field > label {
  44. margin: 0em 0em 0.3em;
  45. display: block;
  46. color: #555555;
  47. font-size: 0.875em;
  48. }
  49. /*--------------------
  50. Standard Inputs
  51. ---------------------*/
  52. .ui.form textarea,
  53. .ui.form select,
  54. .ui.form input[type="text"],
  55. .ui.form input[type="email"],
  56. .ui.form input[type="date"],
  57. .ui.form input[type="password"],
  58. .ui.form input[type="number"],
  59. .ui.form input[type="tel"],
  60. .ui.form .ui.input {
  61. width: 100%;
  62. }
  63. .ui.form textarea,
  64. .ui.form select,
  65. .ui.form input[type="text"],
  66. .ui.form input[type="email"],
  67. .ui.form input[type="date"],
  68. .ui.form input[type="password"],
  69. .ui.form input[type="number"],
  70. .ui.form input[type="tel"]{
  71. margin: 0em;
  72. padding: 0.85em 1.2em;
  73. font-size: 0.875em;
  74. background-color: #FFFFFF;
  75. border: 1px solid rgba(0, 0, 0, 0.15);
  76. outline: none;
  77. color: rgba(0, 0, 0, 0.7);
  78. -webkit-border-radius: 0.3125em;
  79. -moz-border-radius: 0.3125em;
  80. border-radius: 0.3125em;
  81. -webkit-transition:
  82. background-color 0.3s ease-out,
  83. box-shadow 0.2s ease,
  84. border-color 0.2s ease
  85. ;
  86. -moz-transition:
  87. background-color 0.3s ease-out,
  88. box-shadow 0.2s ease,
  89. border-color 0.2s ease
  90. ;
  91. -o-transition:
  92. background-color 0.3s ease-out,
  93. box-shadow 0.2s ease,
  94. border-color 0.2s ease
  95. ;
  96. -ms-transition:
  97. background-color 0.3s ease-out,
  98. box-shadow 0.2s ease,
  99. border-color 0.2s ease
  100. ;
  101. transition:
  102. background-color 0.3s ease-out,
  103. box-shadow 0.2s ease,
  104. border-color 0.2s ease
  105. ;
  106. -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
  107. -moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
  108. box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
  109. -webkit-appearance: none;
  110. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  111. -webkit-box-sizing: border-box;
  112. -moz-box-sizing: border-box;
  113. -ms-box-sizing: border-box;
  114. box-sizing: border-box;
  115. }
  116. .ui.textarea,
  117. .ui.form textarea {
  118. line-height: 1.33;
  119. min-height: 8em;
  120. height: 12em;
  121. max-height: 24em;
  122. resize: vertical;
  123. }
  124. .ui.form textarea,
  125. .ui.form input[type="checkbox"] {
  126. vertical-align: top;
  127. }
  128. /*--------------------
  129. Dividers
  130. ---------------------*/
  131. .ui.form .divider {
  132. clear: both;
  133. margin: 1em 0em;
  134. }
  135. /*--------------------
  136. Types of Messages
  137. ---------------------*/
  138. .ui.form .info.message,
  139. .ui.form .warning.message,
  140. .ui.form .error.message {
  141. display: none;
  142. }
  143. /* Assumptions */
  144. .ui.form .message:first-child {
  145. margin-top: 0px;
  146. }
  147. /*--------------------
  148. Validation Prompt
  149. ---------------------*/
  150. .ui.form .field .prompt.label {
  151. white-space: nowrap;
  152. }
  153. .ui.form .inline.field .prompt {
  154. margin-top: 0em;
  155. margin-right: 1em;
  156. }
  157. .ui.form .inline.field .prompt:before {
  158. margin-top: -0.3em;
  159. bottom: auto;
  160. left: auto;
  161. top: 50%;
  162. right: 0em;
  163. }
  164. /*******************************
  165. States
  166. *******************************/
  167. /*--------------------
  168. Focus
  169. ---------------------*/
  170. .ui.form input[type="text"]:focus,
  171. .ui.form input[type="email"]:focus,
  172. .ui.form input[type="date"]:focus,
  173. .ui.form input[type="password"]:focus,
  174. .ui.form input[type="number"]:focus,
  175. .ui.form input[type="tel"]:focus,
  176. .ui.form textarea:focus,
  177. .ui.form select:focus{
  178. color: rgba(0, 0, 0, 0.85);
  179. border-color: rgba(0, 0, 0, 0.2);
  180. border-bottom-right-radius: 0;
  181. border-top-right-radius: 0;
  182. -webkit-appearance: none;
  183. -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
  184. -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
  185. box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
  186. }
  187. /*--------------------
  188. Error
  189. ---------------------*/
  190. /* On Form */
  191. .ui.form.warning .warning.message {
  192. display: block;
  193. }
  194. /*--------------------
  195. Warning
  196. ---------------------*/
  197. /* On Form */
  198. .ui.form.error .error.message {
  199. display: block;
  200. }
  201. /* On Field(s) */
  202. .ui.form .fields.error .field label,
  203. .ui.form .field.error label {
  204. color: #D95C5C;
  205. }
  206. .ui.form .fields.error .field textarea,
  207. .ui.form .fields.error .field input[type="text"],
  208. .ui.form .fields.error .field input[type="email"],
  209. .ui.form .fields.error .field input[type="date"],
  210. .ui.form .fields.error .field input[type="password"],
  211. .ui.form .fields.error .field input[type="number"],
  212. .ui.form .fields.error .field input[type="tel"],
  213. .ui.form .field.error textarea,
  214. .ui.form .field.error input[type="text"],
  215. .ui.form .field.error input[type="email"],
  216. .ui.form .field.error input[type="date"],
  217. .ui.form .field.error input[type="password"],
  218. .ui.form .field.error input[type="number"],
  219. .ui.form .field.error input[type="tel"]{
  220. background-color: #FFFAFA;
  221. border-color: #E7BEBE;
  222. border-right: none;
  223. color: #D95C5C;
  224. padding-right: 1.2em;
  225. border-bottom-right-radius: 0;
  226. border-top-right-radius: 0;
  227. -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
  228. -moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
  229. box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
  230. }
  231. .ui.form .field.error textarea:focus,
  232. .ui.form .field.error input[type="text"]:focus,
  233. .ui.form .field.error input[type="email"]:focus,
  234. .ui.form .field.error input[type="date"]:focus,
  235. .ui.form .field.error input[type="password"]:focus,
  236. .ui.form .field.error input[type="number"]:focus,
  237. .ui.form .field.error input[type="tel"]:focus{
  238. border-color: rgba(255, 80, 80, 1);
  239. color: rgba(255, 80, 80, 1);
  240. -webkit-appearance: none;
  241. -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
  242. -moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
  243. box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
  244. }
  245. /*--------------------
  246. Empty (Placeholder)
  247. ---------------------*/
  248. /* browsers require these rules separate */
  249. .ui.form ::-webkit-input-placeholder {
  250. color: #E0E0E0;
  251. }
  252. .ui.form ::-moz-placeholder {
  253. color: #E0E0E0;
  254. }
  255. .ui.form :focus::-webkit-input-placeholder {
  256. color: #AAAAAA;
  257. }
  258. .ui.form :focus::-moz-placeholder {
  259. color: #AAAAAA;
  260. }
  261. /* Error Placeholder */
  262. .ui.form .error ::-webkit-input-placeholder {
  263. color: rgba(255, 80, 80, 0.4);
  264. }
  265. .ui.form .error ::-moz-placeholder {
  266. color: rgba(255, 80, 80, 0.4);
  267. }
  268. .ui.form .error :focus::-webkit-input-placeholder {
  269. color: rgba(255, 80, 80, 0.7);
  270. }
  271. .ui.form .error :focus::-moz-placeholder {
  272. color: rgba(255, 80, 80, 0.7);
  273. }
  274. /*--------------------
  275. Disabled
  276. ---------------------*/
  277. .ui.form .field :disabled,
  278. .ui.form .field.disabled {
  279. opacity: 0.5;
  280. }
  281. .ui.form .field.disabled label {
  282. opacity: 0.5;
  283. }
  284. .ui.form .field.disabled :disabled {
  285. opacity: 1;
  286. }
  287. /*--------------------
  288. Loading State
  289. ---------------------*/
  290. /* On Form */
  291. .ui.form.loading {
  292. position: relative;
  293. }
  294. .ui.form.loading:after {
  295. position: absolute;
  296. top: 0%;
  297. right: 0%;
  298. content: '';
  299. width: 100%;
  300. height: 100%;
  301. background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
  302. visibility: visible;
  303. }
  304. /*******************************
  305. Variations
  306. *******************************/
  307. /*--------------------
  308. Fluid Width
  309. ---------------------*/
  310. .ui.form.fluid {
  311. width: 100%;
  312. -webkit-box-sizing: border-box;
  313. -moz-box-sizing: border-box;
  314. -ms-box-sizing: border-box;
  315. box-sizing: border-box;
  316. }
  317. /*--------------------------
  318. Input w/ attached Button
  319. ---------------------------*/
  320. .ui.form input.attached {
  321. width: auto;
  322. }
  323. /*--------------------
  324. Date Input
  325. ---------------------*/
  326. .ui.form .date.field > label {
  327. position: relative;
  328. }
  329. .ui.form .date.field > label:after {
  330. position: absolute;
  331. top: 2em;
  332. left: 0.5em;
  333. font-family: 'Icons';
  334. content: '\f133';
  335. font-size: 1.2em;
  336. font-weight: normal;
  337. color: #CCCCCC;
  338. }
  339. /*--------------------
  340. Inverted Colors
  341. ---------------------*/
  342. .ui.inverted.form label {
  343. color: #FFFFFF;
  344. }
  345. .ui.inverted.form .field.error textarea,
  346. .ui.inverted.form .field.error input[type="text"],
  347. .ui.inverted.form .field.error input[type="email"],
  348. .ui.inverted.form .field.error input[type="date"],
  349. .ui.inverted.form .field.error input[type="password"],
  350. .ui.inverted.form .field.error input[type="number"],
  351. .ui.inverted.form .field.error input[type="tel"]{
  352. background-color: #FFCCCC;
  353. }
  354. /*--------------------
  355. Field Groups
  356. ---------------------*/
  357. /* Grouped Vertically */
  358. .ui.form .grouped.fields {
  359. margin: 0em 0em 1em;
  360. }
  361. .ui.form .grouped.fields .field {
  362. display: block;
  363. float: none;
  364. margin: 0.5em 0em;
  365. padding: 0em;
  366. }
  367. /*--------------------
  368. Fields
  369. ---------------------*/
  370. /* Split fields */
  371. .ui.form .fields {
  372. clear: both;
  373. }
  374. .ui.form .fields:after {
  375. content: ' ';
  376. display: block;
  377. clear: both;
  378. visibility: hidden;
  379. line-height: 0;
  380. height: 0;
  381. }
  382. .ui.form .fields > .field {
  383. clear: none;
  384. float: right;
  385. -webkit-box-sizing: border-box;
  386. -moz-box-sizing: border-box;
  387. -ms-box-sizing: border-box;
  388. box-sizing: border-box;
  389. }
  390. .ui.form .fields > .field:first-child {
  391. border-right: none;
  392. box-shadow: none;
  393. }
  394. /* Other Combinations */
  395. .ui.form .two.fields > .fields,
  396. .ui.form .two.fields > .field {
  397. width: 50%;
  398. padding-right: 1%;
  399. padding-left: 1%;
  400. }
  401. .ui.form .three.fields > .fields,
  402. .ui.form .three.fields > .field {
  403. width: 33.333%;
  404. padding-right: 1%;
  405. padding-left: 1%;
  406. }
  407. .ui.form .four.fields > .fields,
  408. .ui.form .four.fields > .field {
  409. width: 25%;
  410. padding-right: 1%;
  411. padding-left: 1%;
  412. }
  413. .ui.form .five.fields > .fields,
  414. .ui.form .five.fields > .field {
  415. width: 20%;
  416. padding-right: 1%;
  417. padding-left: 1%;
  418. }
  419. .ui.form .fields .field:first-child {
  420. padding-right: 0%;
  421. }
  422. .ui.form .fields .field:last-child {
  423. padding-left: 0%;
  424. }
  425. /*--------------------
  426. Inline Fields
  427. ---------------------*/
  428. .ui.form .inline.fields .field {
  429. min-height: 1.3em;
  430. margin-left: 0.5em;
  431. }
  432. .ui.form .inline.fields .field > label,
  433. .ui.form .inline.fields .field > p,
  434. .ui.form .inline.fields .field > input,
  435. .ui.form .inline.field > label,
  436. .ui.form .inline.field > p,
  437. .ui.form .inline.field > input {
  438. display: inline-block;
  439. width: auto;
  440. margin-top: 0em;
  441. margin-bottom: 0em;
  442. vertical-align: middle;
  443. font-size: 1em;
  444. }
  445. .ui.form .inline.fields .field > input,
  446. .ui.form .inline.field > input {
  447. font-size: 0.875em;
  448. }
  449. .ui.form .inline.fields .field > :first-child,
  450. .ui.form .inline.field > :first-child {
  451. margin: 0em 0em 0em 0.5em;
  452. }
  453. .ui.form .inline.fields .field > :only-child,
  454. .ui.form .inline.field > :only-child {
  455. margin: 0em;
  456. }
  457. /*--------------------
  458. Sizes
  459. ---------------------*/
  460. /* Standard */
  461. .ui.small.form {
  462. font-size: 0.875em;
  463. }
  464. .ui.small.form textarea,
  465. .ui.small.form input[type="text"],
  466. .ui.small.form input[type="email"],
  467. .ui.small.form input[type="date"],
  468. .ui.small.form input[type="password"],
  469. .ui.small.form input[type="number"],
  470. .ui.small.form input[type="tel"],
  471. .ui.small.form label,
  472. .ui.small.form select{
  473. font-size: 1em;
  474. }
  475. /* Large */
  476. .ui.large.form {
  477. font-size: 1.125em;
  478. }