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.

218 lines
3.8 KiB

  1. .ui.input {
  2. display: inline-block;
  3. position: relative;
  4. color: rgba(0,0,0,.7);
  5. }
  6. .ui.input input {
  7. width: 100%;
  8. font-family: "Helvetica Neue",Helvetica,Arial;
  9. margin: 0;
  10. padding: .85em 1.2em;
  11. font-size: .875em;
  12. background-color: #FFF;
  13. border: 1px solid rgba(0,0,0,.15);
  14. outline: 0;
  15. color: rgba(0,0,0,.7);
  16. border-radius: .3125em;
  17. -webkit-transition: background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;
  18. transition: background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;
  19. -webkit-tap-highlight-color: rgba(255,255,255,0);
  20. -moz-box-sizing: border-box;
  21. -ms-box-sizing: border-box;
  22. box-sizing: border-box;
  23. }
  24. .ui.input::-web inputkit-input-placeholder {
  25. color: #E0E0E0;
  26. }
  27. .ui.input::-moz input-placeholder {
  28. color: #E0E0E0;
  29. }
  30. .ui.input input:active,
  31. .ui.input.down input {
  32. border-color: rgba(0,0,0,.3);
  33. background-color: #FAFAFA;
  34. }
  35. .ui.loading.input>.icon {
  36. background: url(../images/loader-mini.gif) no-repeat 50% 50%;
  37. }
  38. .ui.loading.input>.icon:before,
  39. .ui.loading.input>.icon:after {
  40. display: none;
  41. }
  42. .ui.input.focus input,
  43. .ui.input input:focus {
  44. border-color: rgba(0,0,0,.2);
  45. color: rgba(0,0,0,.85);
  46. }
  47. .ui.input.focus input input::-webkit-input-placeholder,
  48. .ui.input input:focus input::-webkit-input-placeholder {
  49. color: #AAA;
  50. }
  51. .ui.input.focus input input::-moz-placeholder,
  52. .ui.input input:focus input::-moz-placeholder {
  53. color: #AAA;
  54. }
  55. .ui.input.error input {
  56. background-color: snow;
  57. border-color: #E7BEBE;
  58. color: #D95C5C;
  59. }
  60. .ui.input.error input ::-webkit-input-placeholder {
  61. color: rgba(255,80,80,.4);
  62. }
  63. .ui.input.error input ::-moz-placeholder {
  64. color: rgba(255,80,80,.4);
  65. }
  66. .ui.input.error input :focus::-webkit-input-placeholder {
  67. color: rgba(255,80,80,.7);
  68. }
  69. .ui.input.error input :focus::-moz-placeholder {
  70. color: rgba(255,80,80,.7);
  71. }
  72. .ui.transparent.input input {
  73. border: 0;
  74. background-color: transparent;
  75. }
  76. .ui.icon.input>.icon {
  77. cursor: default;
  78. position: absolute;
  79. opacity: .5;
  80. top: 0;
  81. left: 0;
  82. margin: 0;
  83. width: 2.6em;
  84. height: 100%;
  85. padding-top: .82em;
  86. text-align: center;
  87. border-radius: .3125em 0 0 .3125em;
  88. -moz-box-sizing: border-box;
  89. -ms-box-sizing: border-box;
  90. box-sizing: border-box;
  91. -webkit-transition: opacity .3s ease-out;
  92. transition: opacity .3s ease-out;
  93. }
  94. .ui.icon.input>.link.icon {
  95. cursor: pointer;
  96. }
  97. .ui.icon.input input {
  98. padding-left: 3em!important;
  99. }
  100. .ui.icon.input>.circular.icon {
  101. top: .35em;
  102. left: .5em;
  103. }
  104. .ui.left.icon.input>.icon {
  105. left: auto;
  106. right: 1px;
  107. border-radius: 0 .3125em .3125em 0;
  108. }
  109. .ui.left.icon.input>.circular.icon {
  110. left: auto;
  111. right: .5em;
  112. }
  113. .ui.left.icon.input>input {
  114. padding-right: 3em!important;
  115. padding-left: 1.2em!important;
  116. }
  117. .ui.icon.input>input:focus~.icon {
  118. opacity: 1;
  119. }
  120. .ui.labeled.input .corner.label {
  121. top: 1px;
  122. left: 1px;
  123. border-top-left-radius: .3125em;
  124. }
  125. .ui.labeled.input input {
  126. padding-left: 2.5em!important;
  127. }
  128. .ui.labeled.icon.input:not(.left)>input {
  129. padding-left: 3.25em!important;
  130. }
  131. .ui.labeled.icon.input:not(.left)>.icon {
  132. margin-left: .75em;
  133. }
  134. .ui.action.input {
  135. display: table;
  136. }
  137. .ui.action.input>input {
  138. display: table-cell;
  139. border-top-left-radius: 0!important;
  140. border-bottom-left-radius: 0!important;
  141. border-left: 0;
  142. }
  143. .ui.action.input>.button {
  144. display: table-cell;
  145. border-top-right-radius: 0;
  146. border-bottom-right-radius: 0;
  147. white-space: nowrap;
  148. }
  149. .ui.action.input>.button>.icon {
  150. display: inline;
  151. vertical-align: top;
  152. }
  153. .ui.fluid.input {
  154. display: block;
  155. }
  156. .ui.mini.input {
  157. font-size: .8125rem;
  158. }
  159. .ui.tiny.input {
  160. font-size: .875rem;
  161. }
  162. .ui.small.input {
  163. font-size: .875rem;
  164. }
  165. .ui.input {
  166. font-size: 1rem;
  167. }
  168. .ui.large.input {
  169. font-size: 1.125rem;
  170. }
  171. .ui.big.input {
  172. font-size: 1.25rem;
  173. }
  174. .ui.huge.input {
  175. font-size: 1.375rem;
  176. }
  177. .ui.massive.input {
  178. font-size: 1.5rem;
  179. }