input.css 12 KB

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