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.

517 lines
12 KiB

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