input.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. /*!
  2. * # Fomantic-UI - Input
  3. * http://github.com/fomantic/Fomantic-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: 0;
  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 0 0 -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 0 0 -0.64285714em;
  106. width: 1.28571429em;
  107. height: 1.28571429em;
  108. -webkit-animation: loader 0.6s infinite linear;
  109. animation: loader 0.6s infinite linear;
  110. border: 0.2em solid #767676;
  111. border-radius: 500rem;
  112. -webkit-box-shadow: 0 0 0 1px transparent;
  113. box-shadow: 0 0 0 1px transparent;
  114. }
  115. /*--------------------
  116. Focus
  117. ---------------------*/
  118. .ui.input.focus > input,
  119. .ui.input > input:focus {
  120. border-color: #85B7D9;
  121. background: #FFFFFF;
  122. color: rgba(0, 0, 0, 0.8);
  123. -webkit-box-shadow: none;
  124. box-shadow: none;
  125. }
  126. .ui.input.focus > input::-webkit-input-placeholder,
  127. .ui.input > input:focus::-webkit-input-placeholder {
  128. color: rgba(115, 115, 115, 0.87);
  129. }
  130. .ui.input.focus > input::-moz-placeholder,
  131. .ui.input > input:focus::-moz-placeholder {
  132. color: rgba(115, 115, 115, 0.87);
  133. }
  134. .ui.input.focus > input:-ms-input-placeholder,
  135. .ui.input > input:focus:-ms-input-placeholder {
  136. color: rgba(115, 115, 115, 0.87);
  137. }
  138. /*--------------------
  139. States
  140. ---------------------*/
  141. .ui.input.error > input {
  142. background-color: #FFF6F6;
  143. border-color: #E0B4B4;
  144. color: #9F3A38;
  145. -webkit-box-shadow: none;
  146. box-shadow: none;
  147. }
  148. /* Placeholder */
  149. .ui.input.error > input::-webkit-input-placeholder {
  150. color: #e7bdbc;
  151. }
  152. .ui.input.error > input::-moz-placeholder {
  153. color: #e7bdbc;
  154. }
  155. .ui.input.error > input:-ms-input-placeholder {
  156. color: #e7bdbc !important;
  157. }
  158. /* Focused Placeholder */
  159. .ui.input.error > input:focus::-webkit-input-placeholder {
  160. color: #da9796;
  161. }
  162. .ui.input.error > input:focus::-moz-placeholder {
  163. color: #da9796;
  164. }
  165. .ui.input.error > input:focus:-ms-input-placeholder {
  166. color: #da9796 !important;
  167. }
  168. .ui.input.info > input {
  169. background-color: #F8FFFF;
  170. border-color: #A9D5DE;
  171. color: #276F86;
  172. -webkit-box-shadow: none;
  173. box-shadow: none;
  174. }
  175. /* Placeholder */
  176. .ui.input.info > input::-webkit-input-placeholder {
  177. color: #98cfe1;
  178. }
  179. .ui.input.info > input::-moz-placeholder {
  180. color: #98cfe1;
  181. }
  182. .ui.input.info > input:-ms-input-placeholder {
  183. color: #98cfe1 !important;
  184. }
  185. /* Focused Placeholder */
  186. .ui.input.info > input:focus::-webkit-input-placeholder {
  187. color: #70bdd6;
  188. }
  189. .ui.input.info > input:focus::-moz-placeholder {
  190. color: #70bdd6;
  191. }
  192. .ui.input.info > input:focus:-ms-input-placeholder {
  193. color: #70bdd6 !important;
  194. }
  195. .ui.input.success > input {
  196. background-color: #FCFFF5;
  197. border-color: #A3C293;
  198. color: #2C662D;
  199. -webkit-box-shadow: none;
  200. box-shadow: none;
  201. }
  202. /* Placeholder */
  203. .ui.input.success > input::-webkit-input-placeholder {
  204. color: #8fcf90;
  205. }
  206. .ui.input.success > input::-moz-placeholder {
  207. color: #8fcf90;
  208. }
  209. .ui.input.success > input:-ms-input-placeholder {
  210. color: #8fcf90 !important;
  211. }
  212. /* Focused Placeholder */
  213. .ui.input.success > input:focus::-webkit-input-placeholder {
  214. color: #6cbf6d;
  215. }
  216. .ui.input.success > input:focus::-moz-placeholder {
  217. color: #6cbf6d;
  218. }
  219. .ui.input.success > input:focus:-ms-input-placeholder {
  220. color: #6cbf6d !important;
  221. }
  222. .ui.input.warning > input {
  223. background-color: #FFFAF3;
  224. border-color: #C9BA9B;
  225. color: #573A08;
  226. -webkit-box-shadow: none;
  227. box-shadow: none;
  228. }
  229. /* Placeholder */
  230. .ui.input.warning > input::-webkit-input-placeholder {
  231. color: #edad3e;
  232. }
  233. .ui.input.warning > input::-moz-placeholder {
  234. color: #edad3e;
  235. }
  236. .ui.input.warning > input:-ms-input-placeholder {
  237. color: #edad3e !important;
  238. }
  239. /* Focused Placeholder */
  240. .ui.input.warning > input:focus::-webkit-input-placeholder {
  241. color: #e39715;
  242. }
  243. .ui.input.warning > input:focus::-moz-placeholder {
  244. color: #e39715;
  245. }
  246. .ui.input.warning > input:focus:-ms-input-placeholder {
  247. color: #e39715 !important;
  248. }
  249. /*******************************
  250. Variations
  251. *******************************/
  252. /*--------------------
  253. Transparent
  254. ---------------------*/
  255. .ui.transparent.input > textarea,
  256. .ui.transparent.input > input {
  257. border-color: transparent !important;
  258. background-color: transparent !important;
  259. padding: 0;
  260. -webkit-box-shadow: none !important;
  261. box-shadow: none !important;
  262. border-radius: 0 !important;
  263. }
  264. .field .ui.transparent.input > textarea {
  265. padding: 0.67857143em 1em;
  266. }
  267. /* Transparent Icon */
  268. :not(.field) > .ui.transparent.icon.input > i.icon {
  269. width: 1.1em;
  270. }
  271. :not(.field) > .ui.ui.ui.transparent.icon.input > input {
  272. padding-left: 0;
  273. padding-right: 2em;
  274. }
  275. :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input {
  276. padding-left: 2em;
  277. padding-right: 0;
  278. }
  279. /* Transparent Inverted */
  280. .ui.transparent.inverted.input {
  281. color: #FFFFFF;
  282. }
  283. .ui.ui.transparent.inverted.input > textarea,
  284. .ui.ui.transparent.inverted.input > input {
  285. color: inherit;
  286. }
  287. .ui.transparent.inverted.input > input::-webkit-input-placeholder {
  288. color: rgba(255, 255, 255, 0.5);
  289. }
  290. .ui.transparent.inverted.input > input::-moz-placeholder {
  291. color: rgba(255, 255, 255, 0.5);
  292. }
  293. .ui.transparent.inverted.input > input:-ms-input-placeholder {
  294. color: rgba(255, 255, 255, 0.5);
  295. }
  296. /*--------------------
  297. Icon
  298. ---------------------*/
  299. .ui.icon.input > i.icon {
  300. cursor: default;
  301. position: absolute;
  302. line-height: 1;
  303. text-align: center;
  304. top: 0;
  305. right: 0;
  306. margin: 0;
  307. height: 100%;
  308. width: 2.67142857em;
  309. opacity: 0.5;
  310. border-radius: 0 0.28571429rem 0.28571429rem 0;
  311. -webkit-transition: opacity 0.3s ease;
  312. transition: opacity 0.3s ease;
  313. }
  314. .ui.icon.input > i.icon:not(.link) {
  315. pointer-events: none;
  316. }
  317. .ui.ui.ui.ui.icon.input > textarea,
  318. .ui.ui.ui.ui.icon.input > input {
  319. padding-right: 2.67142857em;
  320. }
  321. .ui.icon.input > i.icon:before,
  322. .ui.icon.input > i.icon:after {
  323. left: 0;
  324. position: absolute;
  325. text-align: center;
  326. top: 50%;
  327. width: 100%;
  328. margin-top: -0.5em;
  329. }
  330. .ui.icon.input > i.link.icon {
  331. cursor: pointer;
  332. }
  333. .ui.icon.input > i.circular.icon {
  334. top: 0.35em;
  335. right: 0.5em;
  336. }
  337. /* Left Icon Input */
  338. .ui[class*="left icon"].input > i.icon {
  339. right: auto;
  340. left: 1px;
  341. border-radius: 0.28571429rem 0 0 0.28571429rem;
  342. }
  343. .ui[class*="left icon"].input > i.circular.icon {
  344. right: auto;
  345. left: 0.5em;
  346. }
  347. .ui.ui.ui.ui[class*="left icon"].input > textarea,
  348. .ui.ui.ui.ui[class*="left icon"].input > input {
  349. padding-left: 2.67142857em;
  350. padding-right: 1em;
  351. }
  352. /* Focus */
  353. .ui.icon.input > textarea:focus ~ i.icon,
  354. .ui.icon.input > input:focus ~ i.icon {
  355. opacity: 1;
  356. }
  357. /*--------------------
  358. Labeled
  359. ---------------------*/
  360. /* Adjacent Label */
  361. .ui.labeled.input > .label {
  362. -webkit-box-flex: 0;
  363. -ms-flex: 0 0 auto;
  364. flex: 0 0 auto;
  365. margin: 0;
  366. font-size: 1em;
  367. }
  368. .ui.labeled.input > .label:not(.corner) {
  369. padding-top: 0.78571429em;
  370. padding-bottom: 0.78571429em;
  371. }
  372. /* Regular Label on Left */
  373. .ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
  374. border-top-right-radius: 0;
  375. border-bottom-right-radius: 0;
  376. }
  377. .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
  378. border-top-left-radius: 0;
  379. border-bottom-left-radius: 0;
  380. border-left-color: transparent;
  381. }
  382. .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
  383. border-left-color: #85B7D9;
  384. }
  385. /* Regular Label on Right */
  386. .ui[class*="right labeled"].input > input {
  387. border-top-right-radius: 0 !important;
  388. border-bottom-right-radius: 0 !important;
  389. border-right-color: transparent !important;
  390. }
  391. .ui[class*="right labeled"].input > input + .label {
  392. border-top-left-radius: 0;
  393. border-bottom-left-radius: 0;
  394. }
  395. .ui[class*="right labeled"].input > input:focus {
  396. border-right-color: #85B7D9 !important;
  397. }
  398. /* Corner Label */
  399. .ui.labeled.input .corner.label {
  400. top: 1px;
  401. right: 1px;
  402. font-size: 0.64285714em;
  403. border-radius: 0 0.28571429rem 0 0;
  404. }
  405. /* Spacing with corner label */
  406. .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
  407. .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
  408. padding-right: 2.5em !important;
  409. }
  410. .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
  411. .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
  412. padding-right: 3.25em !important;
  413. }
  414. .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
  415. margin-right: 1.25em;
  416. }
  417. /* Left Labeled */
  418. .ui[class*="left corner labeled"].labeled.input > textarea,
  419. .ui[class*="left corner labeled"].labeled.input > input {
  420. padding-left: 2.5em !important;
  421. }
  422. .ui[class*="left corner labeled"].icon.input > textarea,
  423. .ui[class*="left corner labeled"].icon.input > input {
  424. padding-left: 3.25em !important;
  425. }
  426. .ui[class*="left corner labeled"].icon.input > .icon {
  427. margin-left: 1.25em;
  428. }
  429. .ui.icon.input > textarea ~ .icon {
  430. height: 3em;
  431. }
  432. :not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
  433. height: 1.3em;
  434. }
  435. /* Corner Label Position */
  436. .ui.input > .ui.corner.label {
  437. top: 1px;
  438. right: 1px;
  439. }
  440. .ui.input > .ui.left.corner.label {
  441. right: auto;
  442. left: 1px;
  443. }
  444. /* Labeled and action input states */
  445. .ui.form > .field.error > .ui.action.input > .ui.button,
  446. .ui.form > .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
  447. .ui.action.input.error > .ui.button,
  448. .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label {
  449. border-top: 1px solid #E0B4B4;
  450. border-bottom: 1px solid #E0B4B4;
  451. }
  452. .ui.form > .field.error > .ui.left.action.input > .ui.button,
  453. .ui.form > .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
  454. .ui.left.action.input.error > .ui.button,
  455. .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label {
  456. border-left: 1px solid #E0B4B4;
  457. }
  458. .ui.form > .field.error > .ui.action.input:not(.left) > input + .ui.button,
  459. .ui.form > .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
  460. .ui.action.input.error:not(.left) > input + .ui.button,
  461. .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label {
  462. border-right: 1px solid #E0B4B4;
  463. }
  464. .ui.form > .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
  465. .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child {
  466. border-left: 1px solid #E0B4B4;
  467. }
  468. .ui.form > .field.info > .ui.action.input > .ui.button,
  469. .ui.form > .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
  470. .ui.action.input.info > .ui.button,
  471. .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label {
  472. border-top: 1px solid #A9D5DE;
  473. border-bottom: 1px solid #A9D5DE;
  474. }
  475. .ui.form > .field.info > .ui.left.action.input > .ui.button,
  476. .ui.form > .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
  477. .ui.left.action.input.info > .ui.button,
  478. .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label {
  479. border-left: 1px solid #A9D5DE;
  480. }
  481. .ui.form > .field.info > .ui.action.input:not(.left) > input + .ui.button,
  482. .ui.form > .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
  483. .ui.action.input.info:not(.left) > input + .ui.button,
  484. .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label {
  485. border-right: 1px solid #A9D5DE;
  486. }
  487. .ui.form > .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
  488. .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child {
  489. border-left: 1px solid #A9D5DE;
  490. }
  491. .ui.form > .field.success > .ui.action.input > .ui.button,
  492. .ui.form > .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
  493. .ui.action.input.success > .ui.button,
  494. .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label {
  495. border-top: 1px solid #A3C293;
  496. border-bottom: 1px solid #A3C293;
  497. }
  498. .ui.form > .field.success > .ui.left.action.input > .ui.button,
  499. .ui.form > .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
  500. .ui.left.action.input.success > .ui.button,
  501. .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label {
  502. border-left: 1px solid #A3C293;
  503. }
  504. .ui.form > .field.success > .ui.action.input:not(.left) > input + .ui.button,
  505. .ui.form > .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
  506. .ui.action.input.success:not(.left) > input + .ui.button,
  507. .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label {
  508. border-right: 1px solid #A3C293;
  509. }
  510. .ui.form > .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
  511. .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child {
  512. border-left: 1px solid #A3C293;
  513. }
  514. .ui.form > .field.warning > .ui.action.input > .ui.button,
  515. .ui.form > .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
  516. .ui.action.input.warning > .ui.button,
  517. .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label {
  518. border-top: 1px solid #C9BA9B;
  519. border-bottom: 1px solid #C9BA9B;
  520. }
  521. .ui.form > .field.warning > .ui.left.action.input > .ui.button,
  522. .ui.form > .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
  523. .ui.left.action.input.warning > .ui.button,
  524. .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label {
  525. border-left: 1px solid #C9BA9B;
  526. }
  527. .ui.form > .field.warning > .ui.action.input:not(.left) > input + .ui.button,
  528. .ui.form > .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
  529. .ui.action.input.warning:not(.left) > input + .ui.button,
  530. .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label {
  531. border-right: 1px solid #C9BA9B;
  532. }
  533. .ui.form > .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
  534. .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child {
  535. border-left: 1px solid #C9BA9B;
  536. }
  537. /*--------------------
  538. Action
  539. ---------------------*/
  540. .ui.action.input > .button,
  541. .ui.action.input > .buttons {
  542. display: -webkit-box;
  543. display: -ms-flexbox;
  544. display: flex;
  545. -webkit-box-align: center;
  546. -ms-flex-align: center;
  547. align-items: center;
  548. -webkit-box-flex: 0;
  549. -ms-flex: 0 0 auto;
  550. flex: 0 0 auto;
  551. }
  552. .ui.action.input > .button,
  553. .ui.action.input > .buttons > .button {
  554. padding-top: 0.78571429em;
  555. padding-bottom: 0.78571429em;
  556. margin: 0;
  557. }
  558. /* Input when ui Left*/
  559. .ui[class*="left action"].input > input {
  560. border-top-left-radius: 0;
  561. border-bottom-left-radius: 0;
  562. border-left-color: transparent;
  563. }
  564. /* Input when ui Right*/
  565. .ui.action.input:not([class*="left action"]) > input {
  566. border-top-right-radius: 0;
  567. border-bottom-right-radius: 0;
  568. border-right-color: transparent;
  569. }
  570. /* Button and Dropdown */
  571. .ui.action.input > .dropdown:first-child,
  572. .ui.action.input > .button:first-child,
  573. .ui.action.input > .buttons:first-child > .button {
  574. border-radius: 0.28571429rem 0 0 0.28571429rem;
  575. }
  576. .ui.action.input > .dropdown:not(:first-child),
  577. .ui.action.input > .button:not(:first-child),
  578. .ui.action.input > .buttons:not(:first-child) > .button {
  579. border-radius: 0;
  580. }
  581. .ui.action.input > .dropdown:last-child,
  582. .ui.action.input > .button:last-child,
  583. .ui.action.input > .buttons:last-child > .button {
  584. border-radius: 0 0.28571429rem 0.28571429rem 0;
  585. }
  586. /* Input Focus */
  587. .ui.action.input:not([class*="left action"]) > input:focus {
  588. border-right-color: #85B7D9;
  589. }
  590. .ui.ui[class*="left action"].input > input:focus {
  591. border-left-color: #85B7D9;
  592. }
  593. /*--------------------
  594. Inverted
  595. ---------------------*/
  596. /* Standard */
  597. .ui.inverted.input > input {
  598. border: none;
  599. }
  600. /*--------------------
  601. Fluid
  602. ---------------------*/
  603. .ui.fluid.input {
  604. display: -webkit-box;
  605. display: -ms-flexbox;
  606. display: flex;
  607. }
  608. .ui.fluid.input > input {
  609. width: 0 !important;
  610. }
  611. /*--------------------
  612. Size
  613. ---------------------*/
  614. .ui.input {
  615. font-size: 1em;
  616. }
  617. .ui.mini.input {
  618. font-size: 0.78571429em;
  619. }
  620. .ui.tiny.input {
  621. font-size: 0.85714286em;
  622. }
  623. .ui.small.input {
  624. font-size: 0.92857143em;
  625. }
  626. .ui.large.input {
  627. font-size: 1.14285714em;
  628. }
  629. .ui.big.input {
  630. font-size: 1.28571429em;
  631. }
  632. .ui.huge.input {
  633. font-size: 1.42857143em;
  634. }
  635. .ui.massive.input {
  636. font-size: 1.71428571em;
  637. }
  638. /*******************************
  639. Theme Overrides
  640. *******************************/
  641. /*******************************
  642. Site Overrides
  643. *******************************/