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.

318 lines
5.6 KiB

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