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.

343 lines
6.6 KiB

  1. /*
  2. * # Semantic - Input
  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. Inputs
  16. ---------------------*/
  17. .ui.input {
  18. display: inline-block;
  19. position: relative;
  20. color: rgba(0, 0, 0, 0.7);
  21. }
  22. .ui.input input {
  23. width: 100%;
  24. font-family: "Helvetica Neue", "Helvetica", Arial;
  25. margin: 0em;
  26. padding: 0.85em 1.2em;
  27. font-size: 0.875em;
  28. background-color: #FFFFFF;
  29. border: 1px solid rgba(0, 0, 0, 0.15);
  30. outline: none;
  31. color: rgba(0, 0, 0, 0.7);
  32. -webkit-border-radius: 0.3125em;
  33. -moz-border-radius: 0.3125em;
  34. border-radius: 0.3125em;
  35. -webkit-transition:
  36. background-color 0.3s ease-out,
  37. box-shadow 0.2s ease,
  38. border-color 0.2s ease
  39. ;
  40. -moz-transition:
  41. background-color 0.3s ease-out,
  42. box-shadow 0.2s ease,
  43. border-color 0.2s ease
  44. ;
  45. -o-transition:
  46. background-color 0.3s ease-out,
  47. box-shadow 0.2s ease,
  48. border-color 0.2s ease
  49. ;
  50. -ms-transition:
  51. background-color 0.3s ease-out,
  52. box-shadow 0.2s ease,
  53. border-color 0.2s ease
  54. ;
  55. transition:
  56. background-color 0.3s ease-out,
  57. box-shadow 0.2s ease,
  58. border-color 0.2s ease
  59. ;
  60. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  61. -webkit-box-sizing: border-box;
  62. -moz-box-sizing: border-box;
  63. -ms-box-sizing: border-box;
  64. box-sizing: border-box;
  65. }
  66. /*--------------------
  67. Placeholder
  68. ---------------------*/
  69. /* browsers require these rules separate */
  70. .ui.input::-web inputkit-input-placeholder {
  71. color: #E0E0E0;
  72. }
  73. .ui.input::-moz input-placeholder {
  74. color: #E0E0E0;
  75. }
  76. /*******************************
  77. States
  78. *******************************/
  79. /*--------------------
  80. Active
  81. ---------------------*/
  82. .ui.input input:active,
  83. .ui.input.down input {
  84. border-color: rgba(0, 0, 0, 0.3);
  85. background-color: #FAFAFA;
  86. }
  87. /*--------------------
  88. Loading
  89. ---------------------*/
  90. .ui.loading.input > .icon {
  91. background: url(../images/loader-mini.gif) no-repeat 50% 50%;
  92. }
  93. .ui.loading.input > .icon:before,
  94. .ui.loading.input > .icon:after {
  95. display: none;
  96. }
  97. /*--------------------
  98. Focus
  99. ---------------------*/
  100. .ui.input.focus input,
  101. .ui.input input:focus {
  102. border-color: rgba(0, 0, 0, 0.2);
  103. color: rgba(0, 0, 0, 0.85);
  104. }
  105. .ui.input.focus input input::-webkit-input-placeholder,
  106. .ui.input input:focus input::-webkit-input-placeholder {
  107. color: #AAAAAA;
  108. }
  109. .ui.input.focus input input::-moz-placeholder,
  110. .ui.input input:focus input::-moz-placeholder {
  111. color: #AAAAAA;
  112. }
  113. /*--------------------
  114. Error
  115. ---------------------*/
  116. .ui.input.error input {
  117. background-color: #FFFAFA;
  118. border-color: #E7BEBE;
  119. color: #D95C5C;
  120. }
  121. /* Error Placeholder */
  122. .ui.input.error input ::-webkit-input-placeholder {
  123. color: rgba(255, 80, 80, 0.4);
  124. }
  125. .ui.input.error input ::-moz-placeholder {
  126. color: rgba(255, 80, 80, 0.4);
  127. }
  128. .ui.input.error input :focus::-webkit-input-placeholder {
  129. color: rgba(255, 80, 80, 0.7);
  130. }
  131. .ui.input.error input :focus::-moz-placeholder {
  132. color: rgba(255, 80, 80, 0.7);
  133. }
  134. /*******************************
  135. Variations
  136. *******************************/
  137. /*--------------------
  138. Transparent
  139. ---------------------*/
  140. .ui.transparent.input input {
  141. border: none;
  142. background-color: transparent;
  143. }
  144. /*--------------------
  145. Icon
  146. ---------------------*/
  147. .ui.icon.input > .icon {
  148. cursor: default;
  149. position: absolute;
  150. opacity: 0.5;
  151. top: 0px;
  152. left: 0px;
  153. margin: 0em;
  154. width: 2.6em;
  155. height: 100%;
  156. padding-top: 0.82em;
  157. text-align: center;
  158. -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
  159. -moz-border-radius: 0.3125em 0em 0em 0.3125em;
  160. border-radius: 0.3125em 0em 0em 0.3125em;
  161. -webkit-box-sizing: border-box;
  162. -moz-box-sizing: border-box;
  163. -ms-box-sizing: border-box;
  164. box-sizing: border-box;
  165. -webkit-transition: opacity 0.3s ease-out;
  166. -moz-transition: opacity 0.3s ease-out;
  167. -o-transition: opacity 0.3s ease-out;
  168. -ms-transition: opacity 0.3s ease-out;
  169. transition: opacity 0.3s ease-out;
  170. }
  171. .ui.icon.input > .link.icon {
  172. cursor: pointer;
  173. }
  174. .ui.icon.input input {
  175. padding-left: 3em !important;
  176. }
  177. .ui.icon.input > .circular.icon {
  178. top: 0.35em;
  179. left: 0.5em;
  180. }
  181. /* Left Side */
  182. .ui.left.icon.input > .icon {
  183. left: auto;
  184. right: 1px;
  185. -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  186. -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  187. border-radius: 0em 0.3125em 0.3125em 0em;
  188. }
  189. .ui.left.icon.input > .circular.icon {
  190. left: auto;
  191. right: 0.5em;
  192. }
  193. .ui.left.icon.input > input {
  194. padding-right: 3em !important;
  195. padding-left: 1.2em !important;
  196. }
  197. /* Focus */
  198. .ui.icon.input > input:focus ~ .icon {
  199. opacity: 1;
  200. }
  201. /*--------------------
  202. Labeled
  203. ---------------------*/
  204. .ui.labeled.input .corner.label {
  205. top: 1px;
  206. left: 1px;
  207. -webkit-border-top-left-radius: 0.3125em;
  208. -moz-border-top-left-radius: 0.3125em;
  209. border-top-left-radius: 0.3125em;
  210. }
  211. .ui.labeled.input input {
  212. padding-left: 2.5em !important;
  213. }
  214. /* Spacing with corner label */
  215. .ui.labeled.icon.input:not(.left) > input {
  216. padding-left: 3.25em !important;
  217. }
  218. .ui.labeled.icon.input:not(.left) > .icon {
  219. margin-left: 0.75em;
  220. }
  221. /*--------------------
  222. Action
  223. ---------------------*/
  224. .ui.action.input {
  225. display: table;
  226. }
  227. .ui.action.input > input {
  228. display: table-cell;
  229. border-top-left-radius: 0px !important;
  230. border-bottom-left-radius: 0px !important;
  231. border-left: none;
  232. }
  233. .ui.action.input > .button {
  234. display: table-cell;
  235. opacity: 0.9;
  236. border-top-right-radius: 0px;
  237. border-bottom-right-radius: 0px;
  238. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  239. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  240. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  241. white-space: nowrap;
  242. }
  243. .ui.action.input > .button > .icon {
  244. display: inline;
  245. }
  246. .ui.action.input > input:focus ~ .button {
  247. opacity: 1;
  248. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  249. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  250. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  251. }
  252. /*--------------------
  253. Fluid
  254. ---------------------*/
  255. .ui.fluid.input {
  256. display: block;
  257. }
  258. /*--------------------
  259. Size
  260. ---------------------*/
  261. .ui.mini.input {
  262. font-size: 0.8125rem;
  263. }
  264. .ui.tiny.input {
  265. font-size: 0.875rem;
  266. }
  267. .ui.small.input {
  268. font-size: 0.875rem;
  269. }
  270. .ui.input {
  271. font-size: 1rem;
  272. }
  273. .ui.large.input {
  274. font-size: 1.125rem;
  275. }
  276. .ui.big.input {
  277. font-size: 1.25rem;
  278. }
  279. .ui.huge.input {
  280. font-size: 1.375rem;
  281. }
  282. .ui.massive.input {
  283. font-size: 1.5rem;
  284. }