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.

503 lines
11 KiB

9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*!
  2. * # Semantic UI 2.1.0 - Input
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. /*--------------------
  15. Inputs
  16. ---------------------*/
  17. .ui.input {
  18. position: relative;
  19. font-weight: normal;
  20. font-style: normal;
  21. display: -webkit-inline-box;
  22. display: -webkit-inline-flex;
  23. display: -ms-inline-flexbox;
  24. display: inline-flex;
  25. color: rgba(0, 0, 0, 0.87);
  26. }
  27. .ui.input input {
  28. margin: 0em;
  29. max-width: 100%;
  30. -webkit-box-flex: 1;
  31. -webkit-flex: 1 0 auto;
  32. -ms-flex: 1 0 auto;
  33. flex: 1 0 auto;
  34. outline: none;
  35. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  36. text-align: left;
  37. line-height: 1.2142em;
  38. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  39. padding: 0.67861429em 1em;
  40. background: #ffffff;
  41. border: 1px solid rgba(34, 36, 38, 0.15);
  42. color: rgba(0, 0, 0, 0.87);
  43. border-radius: 0.28571429rem;
  44. -webkit-transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  45. transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  46. box-shadow: none;
  47. }
  48. /*--------------------
  49. Placeholder
  50. ---------------------*/
  51. /* browsers require these rules separate */
  52. .ui.input input::-webkit-input-placeholder {
  53. color: rgba(0, 0, 0, 0.4);
  54. }
  55. .ui.input input::-moz-placeholder {
  56. color: rgba(0, 0, 0, 0.4);
  57. }
  58. .ui.input input::-ms-input-placeholder {
  59. color: rgba(0, 0, 0, 0.4);
  60. }
  61. /*******************************
  62. States
  63. *******************************/
  64. /*--------------------
  65. Disabled
  66. ---------------------*/
  67. .ui.disabled.input,
  68. .ui.input input[disabled] {
  69. opacity: 0.45;
  70. }
  71. .ui.disabled.input input {
  72. pointer-events: none;
  73. }
  74. /*--------------------
  75. Active
  76. ---------------------*/
  77. .ui.input input:active,
  78. .ui.input.down input {
  79. border-color: rgba(0, 0, 0, 0.3);
  80. background: #fafafa;
  81. color: rgba(0, 0, 0, 0.87);
  82. box-shadow: none;
  83. }
  84. /*--------------------
  85. Loading
  86. ---------------------*/
  87. .ui.loading.loading.input > i.icon:before {
  88. position: absolute;
  89. content: '';
  90. top: 50%;
  91. left: 50%;
  92. margin: -0.64285714em 0em 0em -0.64285714em;
  93. width: 1.28571429em;
  94. height: 1.28571429em;
  95. border-radius: 500rem;
  96. border: 0.2em solid rgba(0, 0, 0, 0.1);
  97. }
  98. .ui.loading.loading.input > i.icon:after {
  99. position: absolute;
  100. content: '';
  101. top: 50%;
  102. left: 50%;
  103. margin: -0.64285714em 0em 0em -0.64285714em;
  104. width: 1.28571429em;
  105. height: 1.28571429em;
  106. -webkit-animation: button-spin 0.6s linear;
  107. animation: button-spin 0.6s linear;
  108. -webkit-animation-iteration-count: infinite;
  109. animation-iteration-count: infinite;
  110. border-radius: 500rem;
  111. border-color: #767676 transparent transparent;
  112. border-style: solid;
  113. border-width: 0.2em;
  114. box-shadow: 0px 0px 0px 1px transparent;
  115. }
  116. /*--------------------
  117. Focus
  118. ---------------------*/
  119. .ui.input.focus input,
  120. .ui.input input:focus {
  121. border-color: rgba(34, 36, 38, 0.35);
  122. background: #ffffff;
  123. color: rgba(0, 0, 0, 0.8);
  124. box-shadow: none;
  125. }
  126. .ui.input.focus input::-webkit-input-placeholder,
  127. .ui.input input:focus input::-webkit-input-placeholder {
  128. color: rgba(0, 0, 0, 0.87);
  129. }
  130. .ui.input.focus input::-moz-placeholder,
  131. .ui.input input:focus input::-moz-placeholder {
  132. color: rgba(0, 0, 0, 0.87);
  133. }
  134. .ui.input.focus input::-ms-input-placeholder,
  135. .ui.input input:focus input::-ms-input-placeholder {
  136. color: rgba(0, 0, 0, 0.87);
  137. }
  138. /*--------------------
  139. Error
  140. ---------------------*/
  141. .ui.input.error input {
  142. background-color: #fff6f6;
  143. border-color: #e0b4b4;
  144. color: #9f3a38;
  145. box-shadow: none;
  146. }
  147. /* Error Placeholder */
  148. .ui.input.error input::-webkit-input-placeholder {
  149. color: #e7bdbc;
  150. }
  151. .ui.input.error input::-moz-placeholder {
  152. color: #e7bdbc;
  153. }
  154. .ui.input.error input::-ms-input-placeholder {
  155. color: #e7bdbc;
  156. }
  157. /* Focused Error Placeholder */
  158. .ui.input.error input:focus::-webkit-input-placeholder {
  159. color: #da9796;
  160. }
  161. .ui.input.error input:focus::-moz-placeholder {
  162. color: #da9796;
  163. }
  164. .ui.input.error input:focus::-ms-input-placeholder {
  165. color: #da9796;
  166. }
  167. /*******************************
  168. Variations
  169. *******************************/
  170. /*--------------------
  171. Transparent
  172. ---------------------*/
  173. .ui.transparent.input input {
  174. border-color: transparent !important;
  175. background-color: transparent !important;
  176. padding: 0em !important;
  177. box-shadow: none !important;
  178. }
  179. /* Transparent Icon */
  180. .ui.transparent.icon.input > i.icon {
  181. width: 1.1em;
  182. }
  183. .ui.transparent.icon.input > input {
  184. padding-left: 0em !important;
  185. padding-right: 2em !important;
  186. }
  187. .ui.transparent[class*="left icon"].input > input {
  188. padding-left: 2em !important;
  189. padding-right: 0em !important;
  190. }
  191. /* Transparent Inverted */
  192. .ui.transparent.inverted.input {
  193. color: #ffffff;
  194. }
  195. .ui.transparent.inverted.input input {
  196. color: inherit;
  197. }
  198. .ui.transparent.inverted.input input::-webkit-input-placeholder {
  199. color: rgba(255, 255, 255, 0.5);
  200. }
  201. .ui.transparent.inverted.input input::-moz-placeholder {
  202. color: rgba(255, 255, 255, 0.5);
  203. }
  204. .ui.transparent.inverted.input input::-ms-input-placeholder {
  205. color: rgba(255, 255, 255, 0.5);
  206. }
  207. /*--------------------
  208. Icon
  209. ---------------------*/
  210. .ui.icon.input > i.icon {
  211. cursor: default;
  212. position: absolute;
  213. line-height: 1;
  214. text-align: center;
  215. top: 0px;
  216. right: 0px;
  217. margin: 0em;
  218. height: 100%;
  219. width: 2.67142857em;
  220. opacity: 0.5;
  221. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  222. -webkit-transition: opacity 0.3s ease;
  223. transition: opacity 0.3s ease;
  224. }
  225. .ui.icon.input > i.icon:not(.link) {
  226. pointer-events: none;
  227. }
  228. .ui.icon.input input {
  229. padding-right: 2.67142857em !important;
  230. }
  231. .ui.icon.input > i.icon:before,
  232. .ui.icon.input > i.icon:after {
  233. left: 0;
  234. position: absolute;
  235. text-align: center;
  236. top: 50%;
  237. width: 100%;
  238. margin-top: -0.5em;
  239. }
  240. .ui.icon.input > i.link.icon {
  241. cursor: pointer;
  242. }
  243. .ui.icon.input > i.circular.icon {
  244. top: 0.35em;
  245. right: 0.5em;
  246. }
  247. /* Left Icon Input */
  248. .ui[class*="left icon"].input > i.icon {
  249. right: auto;
  250. left: 1px;
  251. border-radius: 0.28571429rem 0em 0em 0.28571429rem;
  252. }
  253. .ui[class*="left icon"].input > i.circular.icon {
  254. right: auto;
  255. left: 0.5em;
  256. }
  257. .ui[class*="left icon"].input > input {
  258. padding-left: 2.67142857em !important;
  259. padding-right: 1em !important;
  260. }
  261. /* Focus */
  262. .ui.icon.input > input:focus ~ i.icon {
  263. opacity: 1;
  264. }
  265. /*--------------------
  266. Labeled
  267. ---------------------*/
  268. /* Adjacent Label */
  269. .ui.labeled.input > .label {
  270. -webkit-box-flex: 0;
  271. -webkit-flex: 0 0 auto;
  272. -ms-flex: 0 0 auto;
  273. flex: 0 0 auto;
  274. margin: 0;
  275. font-size: 1em;
  276. }
  277. .ui.labeled.input > .label:not(.corner) {
  278. padding-top: 0.78571429em;
  279. padding-bottom: 0.78571429em;
  280. }
  281. /* Regular Label on Left */
  282. .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
  283. /*border-left: none;*/
  284. border-top-left-radius: 0px;
  285. border-bottom-left-radius: 0px;
  286. }
  287. .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
  288. border-right: none;
  289. border-top-right-radius: 0px;
  290. border-bottom-right-radius: 0px;
  291. }
  292. /* Regular Label on Right */
  293. .ui[class*="right labeled"].input > input {
  294. /*border-right: none;*/
  295. border-top-right-radius: 0px !important;
  296. border-bottom-right-radius: 0px !important;
  297. }
  298. .ui[class*="right labeled"].input > .label {
  299. border-left: none;
  300. border-top-left-radius: 0px;
  301. border-bottom-left-radius: 0px;
  302. }
  303. /* Corner Label */
  304. .ui.labeled.input .corner.label {
  305. top: 1px;
  306. right: 1px;
  307. font-size: 0.64285714em;
  308. border-radius: 0em 0.28571429rem 0em 0em;
  309. }
  310. /* Spacing with corner label */
  311. .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input {
  312. padding-right: 2.5em !important;
  313. }
  314. .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
  315. padding-right: 3.25em !important;
  316. }
  317. .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
  318. margin-right: 1.25em;
  319. }
  320. /* Left Labeled */
  321. .ui[class*="left corner labeled"].labeled.input input {
  322. padding-left: 2.5em !important;
  323. }
  324. .ui[class*="left corner labeled"].icon.input > input {
  325. padding-left: 3.25em !important;
  326. }
  327. .ui[class*="left corner labeled"].icon.input > .icon {
  328. margin-left: 1.25em;
  329. }
  330. /* Corner Label Position */
  331. .ui.input > .ui.corner.label {
  332. top: 1px;
  333. right: 1px;
  334. }
  335. .ui.input > .ui.left.corner.label {
  336. right: auto;
  337. left: 1px;
  338. }
  339. /*--------------------
  340. Action
  341. ---------------------*/
  342. .ui.action.input > .button,
  343. .ui.action.input > .buttons {
  344. display: -webkit-box;
  345. display: -webkit-flex;
  346. display: -ms-flexbox;
  347. display: flex;
  348. -webkit-box-align: center;
  349. -webkit-align-items: center;
  350. -ms-flex-align: center;
  351. align-items: center;
  352. -webkit-box-flex: 0;
  353. -webkit-flex: 0 0 auto;
  354. -ms-flex: 0 0 auto;
  355. flex: 0 0 auto;
  356. }
  357. .ui.action.input > .button,
  358. .ui.action.input > .buttons > .button {
  359. padding-top: 0.78571429em;
  360. padding-bottom: 0.78571429em;
  361. margin: 0;
  362. }
  363. /* Button on Right */
  364. .ui.action.input:not([class*="left action"]) > input {
  365. border-right: none;
  366. border-top-right-radius: 0px !important;
  367. border-bottom-right-radius: 0px !important;
  368. }
  369. .ui.action.input:not([class*="left action"]) > .dropdown,
  370. .ui.action.input:not([class*="left action"]) > .button,
  371. .ui.action.input:not([class*="left action"]) > .buttons > .button {
  372. border-radius: 0px;
  373. }
  374. .ui.action.input:not([class*="left action"]) > .dropdown:last-child,
  375. .ui.action.input:not([class*="left action"]) > .button:last-child,
  376. .ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
  377. border-radius: 0px 0.28571429rem 0.28571429rem 0px;
  378. }
  379. /* Button on Left */
  380. .ui[class*="left action"].input > .dropdown,
  381. .ui[class*="left action"].input > .button,
  382. .ui[class*="left action"].input > .buttons > .button {
  383. border-radius: 0px;
  384. }
  385. .ui[class*="left action"].input > .dropdown:first-child,
  386. .ui[class*="left action"].input > .button:first-child,
  387. .ui[class*="left action"].input > .buttons:first-child > .button {
  388. border-radius: 0.28571429rem 0px 0px 0.28571429rem;
  389. }
  390. .ui[class*="left action"].input > input {
  391. border-left: none;
  392. border-top-left-radius: 0px !important;
  393. border-bottom-left-radius: 0px !important;
  394. }
  395. /*--------------------
  396. Inverted
  397. ---------------------*/
  398. /* Standard */
  399. .ui.inverted.input input {
  400. border: none;
  401. }
  402. /*--------------------
  403. Fluid
  404. ---------------------*/
  405. .ui.fluid.input {
  406. display: -webkit-box;
  407. display: -webkit-flex;
  408. display: -ms-flexbox;
  409. display: flex;
  410. }
  411. .ui.fluid.input > input {
  412. width: 0px !important;
  413. }
  414. /*--------------------
  415. Size
  416. ---------------------*/
  417. .ui.mini.input {
  418. font-size: 0.71428571em;
  419. }
  420. .ui.small.input {
  421. font-size: 0.92857143em;
  422. }
  423. .ui.input {
  424. font-size: 1em;
  425. }
  426. .ui.large.input {
  427. font-size: 1.14285714em;
  428. }
  429. .ui.big.input {
  430. font-size: 1.28571429em;
  431. }
  432. .ui.huge.input {
  433. font-size: 1.42857143em;
  434. }
  435. .ui.massive.input {
  436. font-size: 1.71428571em;
  437. }
  438. /*******************************
  439. Theme Overrides
  440. *******************************/
  441. /*******************************
  442. Site Overrides
  443. *******************************/