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.

563 lines
11 KiB

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