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.

433 lines
8.8 KiB

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
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
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://beta.semantic-ui.com/
  5. *
  6. * Copyright 2014 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. display: inline-block;
  19. position: relative;
  20. color: rgba(0, 0, 0, 0.8);
  21. }
  22. .ui.input input {
  23. margin: 0em;
  24. width: 100%;
  25. outline: none;
  26. text-align: left;
  27. line-height: 1.2em;
  28. font-family: "Helvetica Neue", "Helvetica", Arial;
  29. padding: 0.7em 1em;
  30. background: #ffffff;
  31. border: 1px solid rgba(0, 0, 0, 0.15);
  32. color: rgba(0, 0, 0, 0.8);
  33. border-radius: 0.2857rem;
  34. -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
  35. transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
  36. box-shadow: none;
  37. box-sizing: border-box;
  38. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  39. }
  40. /*--------------------
  41. Placeholder
  42. ---------------------*/
  43. /* browsers require these rules separate */
  44. .ui.input input::-webkit-input-placeholder {
  45. color: rgba(0, 0, 0, 0.4);
  46. }
  47. .ui.input input::-moz-placeholder {
  48. color: rgba(0, 0, 0, 0.4);
  49. }
  50. /*******************************
  51. States
  52. *******************************/
  53. /*--------------------
  54. Active
  55. ---------------------*/
  56. .ui.input input:active,
  57. .ui.input.down input {
  58. border-color: rgba(0, 0, 0, 0.3);
  59. background: #fafafa;
  60. color: rgba(0, 0, 0, 0.8);
  61. box-shadow: none;
  62. }
  63. /*--------------------
  64. Loading
  65. ---------------------*/
  66. .ui.loading.loading.input > .icon:before {
  67. position: absolute;
  68. content: '';
  69. top: 50%;
  70. left: 50%;
  71. margin: -0.64285em 0em 0em -0.64285em;
  72. width: 1.2857em;
  73. height: 1.2857em;
  74. border-radius: 500rem;
  75. border: 0.2em solid rgba(0, 0, 0, 0.1);
  76. }
  77. .ui.loading.loading.input > .icon:after {
  78. position: absolute;
  79. content: '';
  80. top: 50%;
  81. left: 50%;
  82. margin: -0.64285em 0em 0em -0.64285em;
  83. width: 1.2857em;
  84. height: 1.2857em;
  85. -webkit-animation: button-spin 0.6s linear;
  86. animation: button-spin 0.6s linear;
  87. -webkit-animation-iteration-count: infinite;
  88. animation-iteration-count: infinite;
  89. border-radius: 500rem;
  90. border-color: #aaaaaa transparent transparent;
  91. border-style: solid;
  92. border-width: 0.2em;
  93. box-shadow: 0px 0px 0px 1px transparent;
  94. }
  95. /*--------------------
  96. Focus
  97. ---------------------*/
  98. .ui.input.focus input,
  99. .ui.input input:focus {
  100. border-color: rgba(39, 41, 43, 0.3);
  101. background: '';
  102. color: rgba(0, 0, 0, 0.8);
  103. box-shadow: none;
  104. }
  105. .ui.input.focus input input::-webkit-input-placeholder,
  106. .ui.input input:focus input::-webkit-input-placeholder {
  107. color: rgba(0, 0, 0, 0.8);
  108. }
  109. .ui.input.focus input input::-moz-placeholder,
  110. .ui.input input:focus input::-moz-placeholder {
  111. color: rgba(0, 0, 0, 0.8);
  112. }
  113. /*--------------------
  114. Error
  115. ---------------------*/
  116. .ui.input.error input {
  117. background-color: #fff0f0;
  118. border-color: #dbb1b1;
  119. color: #d95c5c;
  120. box-shadow: none;
  121. }
  122. /* Error Placeholder */
  123. .ui.input.error input ::-webkit-input-placeholder {
  124. color: rgba(255, 80, 80, 0.4);
  125. }
  126. .ui.input.error input ::-moz-placeholder {
  127. color: rgba(255, 80, 80, 0.4);
  128. }
  129. /* Focused Error Placeholder */
  130. .ui.input.error input :focus::-webkit-input-placeholder {
  131. color: rgba(255, 80, 80, 0.7);
  132. }
  133. .ui.input.error input :focus::-moz-placeholder {
  134. color: rgba(255, 80, 80, 0.7);
  135. }
  136. /*******************************
  137. Variations
  138. *******************************/
  139. /*--------------------
  140. Transparent
  141. ---------------------*/
  142. .ui.transparent.input input {
  143. border-color: transparent;
  144. background-color: transparent;
  145. padding: 0em;
  146. }
  147. /*--------------------
  148. Icon
  149. ---------------------*/
  150. .ui.icon.input > .icon {
  151. cursor: default;
  152. position: absolute;
  153. opacity: 0.5;
  154. top: 0px;
  155. right: 0px;
  156. margin: 0em;
  157. width: 2.85em;
  158. height: 100%;
  159. text-align: center;
  160. border-radius: 0em 0.2857rem 0.2857rem 0em;
  161. box-sizing: border-box;
  162. -webkit-transition: opacity 0.3s ease;
  163. transition: opacity 0.3s ease;
  164. }
  165. .ui.icon.input > .icon:before,
  166. .ui.icon.input > .icon:after {
  167. left: 0;
  168. position: absolute;
  169. text-align: center;
  170. top: 50%;
  171. width: 100%;
  172. margin-top: -0.5em;
  173. }
  174. .ui.icon.input > .link.icon {
  175. cursor: pointer;
  176. }
  177. .ui.icon.input input {
  178. padding-right: 2.85em !important;
  179. }
  180. .ui.icon.input > .circular.icon {
  181. top: 0.35em;
  182. right: 0.5em;
  183. }
  184. /* Left Icon Input */
  185. .ui[class*="left icon"].input > .icon {
  186. right: auto;
  187. left: 1px;
  188. border-radius: 0.2857rem 0em 0em 0.2857rem;
  189. }
  190. .ui[class*="left icon"].input > .circular.icon {
  191. right: auto;
  192. left: 0.5em;
  193. }
  194. .ui[class*="left icon"].input > input {
  195. padding-left: 2.85em !important;
  196. padding-right: 1em !important;
  197. }
  198. /* Transparent Icon */
  199. .ui.transparent.icon.input > .icon {
  200. width: 1.25em;
  201. }
  202. .ui.transparent.icon.input > input {
  203. padding-left: 0em !important;
  204. padding-right: 1.75em !important;
  205. }
  206. .ui.transparent[class*="left icon"].input > input {
  207. padding-left: 0em !important;
  208. padding-left: 1.75em !important;
  209. }
  210. /* Focus */
  211. .ui.icon.input > input:focus ~ .icon {
  212. opacity: 1;
  213. }
  214. /*--------------------
  215. Labeled
  216. ---------------------*/
  217. /* Adjacent Label */
  218. .ui.labeled.input {
  219. display: table;
  220. }
  221. .ui.labeled.input > input {
  222. display: table-cell;
  223. vertical-align: top;
  224. }
  225. .ui.labeled.input > .label {
  226. display: table-cell;
  227. vertical-align: middle;
  228. white-space: nowrap;
  229. font-size: 1em;
  230. }
  231. .ui.labeled.input > .label > .icon {
  232. display: inline;
  233. vertical-align: top;
  234. }
  235. /* Fluid Labeled */
  236. .ui.fluid.labeled.input {
  237. display: table;
  238. width: 100%;
  239. }
  240. .ui.fluid.labeled.input > .label {
  241. width: 0.01%;
  242. }
  243. /* Label on Left */
  244. .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
  245. border-left: none;
  246. border-top-left-radius: 0px;
  247. border-bottom-left-radius: 0px;
  248. }
  249. .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
  250. border-top-right-radius: 0px;
  251. border-bottom-right-radius: 0px;
  252. }
  253. /* Label on Right */
  254. .ui[class*="right labeled"].input > input {
  255. border-right: none;
  256. border-top-right-radius: 0px !important;
  257. border-bottom-right-radius: 0px !important;
  258. }
  259. .ui[class*="right labeled"].input > .label {
  260. border-top-left-radius: 0px;
  261. border-bottom-left-radius: 0px;
  262. }
  263. /* Corner Label */
  264. .ui.labeled.input .corner.label {
  265. top: 1px;
  266. right: 1px;
  267. font-size: 0.75em;
  268. border-radius: 0em 0.2857rem 0em 0em;
  269. }
  270. .ui.labeled.input input {
  271. padding-right: 2.5em !important;
  272. }
  273. /* Spacing with corner label */
  274. .ui[class*="corner labeled"].input {
  275. display: inline-block;
  276. }
  277. .ui[class*="corner labeled"].input > input {
  278. display: block;
  279. }
  280. .ui[class*="corner labeled"].icon.input:not(.left) > input {
  281. padding-right: 3.25em !important;
  282. }
  283. .ui[class*="corner labeled"].icon.input:not(.left) > .icon {
  284. margin-right: 1.25em;
  285. }
  286. /*--------------------
  287. Action
  288. ---------------------*/
  289. .ui.action.input {
  290. display: table;
  291. }
  292. .ui.action.input > input {
  293. display: table-cell;
  294. vertical-align: top;
  295. }
  296. .ui.action.input > .button,
  297. .ui.action.input > .buttons {
  298. display: table-cell;
  299. vertical-align: middle;
  300. white-space: nowrap;
  301. }
  302. .ui.action.input > .button > .icon,
  303. .ui.action.input > .buttons > .button > .icon {
  304. display: inline;
  305. vertical-align: top;
  306. }
  307. .ui.fluid.action.input {
  308. display: table;
  309. width: 100%;
  310. }
  311. .ui.fluid.action.input > .button {
  312. width: 0.01%;
  313. }
  314. /* Button on Right */
  315. .ui.action.input:not([class*="left action"]) > input {
  316. border-right: none;
  317. border-top-right-radius: 0px !important;
  318. border-bottom-right-radius: 0px !important;
  319. }
  320. .ui.action.input:not([class*="left action"]) > .button,
  321. .ui.action.input:not([class*="left action"]) > .buttons {
  322. border-top-left-radius: 0px;
  323. border-bottom-left-radius: 0px;
  324. }
  325. /* Button on Left */
  326. .ui[class*="left action"].input > .button,
  327. .ui[class*="left action"].input > .buttons {
  328. border-top-right-radius: 0px;
  329. border-bottom-right-radius: 0px;
  330. }
  331. .ui[class*="left action"].input > input {
  332. border-left: none;
  333. border-top-left-radius: 0px;
  334. border-bottom-left-radius: 0px;
  335. }
  336. /*--------------------
  337. Inverted
  338. ---------------------*/
  339. .ui.inverted.input input {
  340. border: none;
  341. }
  342. /*--------------------
  343. Fluid
  344. ---------------------*/
  345. .ui.fluid.input {
  346. display: block;
  347. }
  348. /*--------------------
  349. Size
  350. ---------------------*/
  351. .ui.mini.input {
  352. font-size: 0.8125rem;
  353. }
  354. .ui.small.input {
  355. font-size: 0.875rem;
  356. }
  357. .ui.input {
  358. font-size: 1rem;
  359. }
  360. .ui.large.input {
  361. font-size: 1.125rem;
  362. }
  363. .ui.big.input {
  364. font-size: 1.25rem;
  365. }
  366. .ui.huge.input {
  367. font-size: 1.375rem;
  368. }
  369. .ui.massive.input {
  370. font-size: 1.5rem;
  371. }
  372. /*******************************
  373. Theme Overrides
  374. *******************************/
  375. /*******************************
  376. Site Overrides
  377. *******************************/