Plat Admin

input.css 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Colors
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Background
  20. -------------------------- */
  21. /* Border
  22. -------------------------- */
  23. /* Box-shadow
  24. -------------------------- */
  25. /* Fill
  26. -------------------------- */
  27. /* Font
  28. -------------------------- */
  29. /* Size
  30. -------------------------- */
  31. /* z-index
  32. -------------------------- */
  33. /* Disable base
  34. -------------------------- */
  35. /* Icon
  36. -------------------------- */
  37. /* Checkbox
  38. -------------------------- */
  39. /* Radio
  40. -------------------------- */
  41. /* Select
  42. -------------------------- */
  43. /* Alert
  44. -------------------------- */
  45. /* Message Box
  46. -------------------------- */
  47. /* Message
  48. -------------------------- */
  49. /* Notification
  50. -------------------------- */
  51. /* Input
  52. -------------------------- */
  53. /* Cascader
  54. -------------------------- */
  55. /* Group
  56. -------------------------- */
  57. /* Tab
  58. -------------------------- */
  59. /* Button
  60. -------------------------- */
  61. /* cascader
  62. -------------------------- */
  63. /* Switch
  64. -------------------------- */
  65. /* Dialog
  66. -------------------------- */
  67. /* Table
  68. -------------------------- */
  69. /* Pagination
  70. -------------------------- */
  71. /* Popover
  72. -------------------------- */
  73. /* Tooltip
  74. -------------------------- */
  75. /* Tag
  76. -------------------------- */
  77. /* Tree
  78. -------------------------- */
  79. /* Dropdown
  80. -------------------------- */
  81. /* Badge
  82. -------------------------- */
  83. /* Card
  84. --------------------------*/
  85. /* Slider
  86. --------------------------*/
  87. /* Steps
  88. --------------------------*/
  89. /* Menu
  90. --------------------------*/
  91. /* Rate
  92. --------------------------*/
  93. /* DatePicker
  94. --------------------------*/
  95. /* Loading
  96. --------------------------*/
  97. /* Scrollbar
  98. --------------------------*/
  99. /* Carousel
  100. --------------------------*/
  101. /* Collapse
  102. --------------------------*/
  103. /* Transfer
  104. --------------------------*/
  105. /* Header
  106. --------------------------*/
  107. /* Footer
  108. --------------------------*/
  109. /* Main
  110. --------------------------*/
  111. /* Break-point
  112. --------------------------*/
  113. /* Break-points
  114. -------------------------- */
  115. /* Scrollbar
  116. -------------------------- */
  117. /* Placeholder
  118. -------------------------- */
  119. /* BEM
  120. -------------------------- */
  121. /* Element Chalk Variables */
  122. /* Transition
  123. -------------------------- */
  124. /* Colors
  125. -------------------------- */
  126. /* 53a8ff */
  127. /* 66b1ff */
  128. /* 79bbff */
  129. /* 8cc5ff */
  130. /* a0cfff */
  131. /* b3d8ff */
  132. /* c6e2ff */
  133. /* d9ecff */
  134. /* ecf5ff */
  135. /* Link
  136. -------------------------- */
  137. /* Background
  138. -------------------------- */
  139. /* Border
  140. -------------------------- */
  141. /* Box-shadow
  142. -------------------------- */
  143. /* Fill
  144. -------------------------- */
  145. /* Font
  146. -------------------------- */
  147. /* Size
  148. -------------------------- */
  149. /* z-index
  150. -------------------------- */
  151. /* Disable base
  152. -------------------------- */
  153. /* Icon
  154. -------------------------- */
  155. /* Checkbox
  156. -------------------------- */
  157. /* Radio
  158. -------------------------- */
  159. /* Select
  160. -------------------------- */
  161. /* Alert
  162. -------------------------- */
  163. /* Message Box
  164. -------------------------- */
  165. /* Message
  166. -------------------------- */
  167. /* Notification
  168. -------------------------- */
  169. /* Input
  170. -------------------------- */
  171. /* Cascader
  172. -------------------------- */
  173. /* Group
  174. -------------------------- */
  175. /* Tab
  176. -------------------------- */
  177. /* Button
  178. -------------------------- */
  179. /* cascader
  180. -------------------------- */
  181. /* Switch
  182. -------------------------- */
  183. /* Dialog
  184. -------------------------- */
  185. /* Table
  186. -------------------------- */
  187. /* Pagination
  188. -------------------------- */
  189. /* Popover
  190. -------------------------- */
  191. /* Tooltip
  192. -------------------------- */
  193. /* Tag
  194. -------------------------- */
  195. /* Tree
  196. -------------------------- */
  197. /* Dropdown
  198. -------------------------- */
  199. /* Badge
  200. -------------------------- */
  201. /* Card
  202. --------------------------*/
  203. /* Slider
  204. --------------------------*/
  205. /* Steps
  206. --------------------------*/
  207. /* Menu
  208. --------------------------*/
  209. /* Rate
  210. --------------------------*/
  211. /* DatePicker
  212. --------------------------*/
  213. /* Loading
  214. --------------------------*/
  215. /* Scrollbar
  216. --------------------------*/
  217. /* Carousel
  218. --------------------------*/
  219. /* Collapse
  220. --------------------------*/
  221. /* Transfer
  222. --------------------------*/
  223. /* Header
  224. --------------------------*/
  225. /* Footer
  226. --------------------------*/
  227. /* Main
  228. --------------------------*/
  229. /* Break-point
  230. --------------------------*/
  231. .el-textarea {
  232. display: inline-block;
  233. width: 100%;
  234. vertical-align: bottom;
  235. font-size: 14px; }
  236. .el-textarea__inner {
  237. display: block;
  238. resize: vertical;
  239. padding: 5px 15px;
  240. line-height: 1.5;
  241. -webkit-box-sizing: border-box;
  242. box-sizing: border-box;
  243. width: 100%;
  244. font-size: inherit;
  245. color: #606266;
  246. background-color: #fff;
  247. background-image: none;
  248. border: 1px solid #dcdfe6;
  249. border-radius: 4px;
  250. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  251. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  252. .el-textarea__inner::-webkit-input-placeholder {
  253. color: #c0c4cc; }
  254. .el-textarea__inner::-ms-input-placeholder {
  255. color: #c0c4cc; }
  256. .el-textarea__inner::placeholder {
  257. color: #c0c4cc; }
  258. .el-textarea__inner:hover {
  259. border-color: #c0c4cc; }
  260. .el-textarea__inner:focus {
  261. outline: none;
  262. border-color: #1b73a5; }
  263. .el-textarea.is-disabled .el-textarea__inner {
  264. background-color: #f5f7fa;
  265. border-color: #e4e7ed;
  266. color: #c0c4cc;
  267. cursor: not-allowed; }
  268. .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  269. color: #c0c4cc; }
  270. .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  271. color: #c0c4cc; }
  272. .el-textarea.is-disabled .el-textarea__inner::placeholder {
  273. color: #c0c4cc; }
  274. .el-input {
  275. position: relative;
  276. font-size: 14px;
  277. display: inline-block;
  278. width: 100%; }
  279. .el-input::-webkit-scrollbar {
  280. z-index: 11;
  281. width: 6px; }
  282. .el-input::-webkit-scrollbar:horizontal {
  283. height: 6px; }
  284. .el-input::-webkit-scrollbar-thumb {
  285. border-radius: 5px;
  286. width: 6px;
  287. background: #b4bccc; }
  288. .el-input::-webkit-scrollbar-corner {
  289. background: #fff; }
  290. .el-input::-webkit-scrollbar-track {
  291. background: #fff; }
  292. .el-input::-webkit-scrollbar-track-piece {
  293. background: #fff;
  294. width: 6px; }
  295. .el-input .el-input__clear {
  296. color: #c0c4cc;
  297. font-size: 14px;
  298. line-height: 16px;
  299. cursor: pointer;
  300. -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  301. transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  302. .el-input .el-input__clear:hover {
  303. color: #909399; }
  304. .el-input__inner {
  305. -webkit-appearance: none;
  306. background-color: #fff;
  307. background-image: none;
  308. border-radius: 4px;
  309. border: 1px solid #dcdfe6;
  310. -webkit-box-sizing: border-box;
  311. box-sizing: border-box;
  312. color: #606266;
  313. display: inline-block;
  314. font-size: inherit;
  315. height: 40px;
  316. line-height: 40px;
  317. outline: none;
  318. padding: 0 15px;
  319. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  320. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  321. width: 100%; }
  322. .el-input__inner::-webkit-input-placeholder {
  323. color: #c0c4cc; }
  324. .el-input__inner::-ms-input-placeholder {
  325. color: #c0c4cc; }
  326. .el-input__inner::placeholder {
  327. color: #c0c4cc; }
  328. .el-input__inner:hover {
  329. border-color: #c0c4cc; }
  330. .el-input__inner:focus {
  331. outline: none;
  332. border-color: #1b73a5; }
  333. .el-input__suffix {
  334. position: absolute;
  335. height: 100%;
  336. right: 5px;
  337. top: 0;
  338. text-align: center;
  339. color: #c0c4cc;
  340. -webkit-transition: all .3s;
  341. transition: all .3s;
  342. pointer-events: none; }
  343. .el-input__suffix-inner {
  344. pointer-events: all; }
  345. .el-input__prefix {
  346. position: absolute;
  347. height: 100%;
  348. left: 5px;
  349. top: 0;
  350. text-align: center;
  351. color: #c0c4cc;
  352. -webkit-transition: all .3s;
  353. transition: all .3s; }
  354. .el-input__icon {
  355. height: 100%;
  356. width: 25px;
  357. text-align: center;
  358. -webkit-transition: all .3s;
  359. transition: all .3s;
  360. line-height: 40px; }
  361. .el-input__icon:after {
  362. content: '';
  363. height: 100%;
  364. width: 0;
  365. display: inline-block;
  366. vertical-align: middle; }
  367. .el-input__validateIcon {
  368. pointer-events: none; }
  369. .el-input.is-active .el-input__inner {
  370. outline: none;
  371. border-color: #1b73a5; }
  372. .el-input.is-disabled .el-input__inner {
  373. background-color: #f5f7fa;
  374. border-color: #e4e7ed;
  375. color: #c0c4cc;
  376. cursor: not-allowed; }
  377. .el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  378. color: #c0c4cc; }
  379. .el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  380. color: #c0c4cc; }
  381. .el-input.is-disabled .el-input__inner::placeholder {
  382. color: #c0c4cc; }
  383. .el-input.is-disabled .el-input__icon {
  384. cursor: not-allowed; }
  385. .el-input--suffix .el-input__inner {
  386. padding-right: 30px; }
  387. .el-input--prefix .el-input__inner {
  388. padding-left: 30px; }
  389. .el-input--medium {
  390. font-size: 14px; }
  391. .el-input--medium .el-input__inner {
  392. height: 36px;
  393. line-height: 36px; }
  394. .el-input--medium .el-input__icon {
  395. line-height: 36px; }
  396. .el-input--small {
  397. font-size: 13px; }
  398. .el-input--small .el-input__inner {
  399. height: 32px;
  400. line-height: 32px; }
  401. .el-input--small .el-input__icon {
  402. line-height: 32px; }
  403. .el-input--mini {
  404. font-size: 12px; }
  405. .el-input--mini .el-input__inner {
  406. height: 28px;
  407. line-height: 28px; }
  408. .el-input--mini .el-input__icon {
  409. line-height: 28px; }
  410. .el-input-group {
  411. line-height: normal;
  412. display: inline-table;
  413. width: 100%;
  414. border-collapse: separate;
  415. border-spacing: 0; }
  416. .el-input-group > .el-input__inner {
  417. vertical-align: middle;
  418. display: table-cell; }
  419. .el-input-group__append, .el-input-group__prepend {
  420. background-color: #f5f7fa;
  421. color: #909399;
  422. vertical-align: middle;
  423. display: table-cell;
  424. position: relative;
  425. border: 1px solid #dcdfe6;
  426. border-radius: 4px;
  427. padding: 0 20px;
  428. width: 1px;
  429. white-space: nowrap; }
  430. .el-input-group__append:focus, .el-input-group__prepend:focus {
  431. outline: none; }
  432. .el-input-group__append .el-select,
  433. .el-input-group__append .el-button, .el-input-group__prepend .el-select,
  434. .el-input-group__prepend .el-button {
  435. display: inline-block;
  436. margin: -10px -20px; }
  437. .el-input-group__append button.el-button,
  438. .el-input-group__append div.el-select .el-input__inner,
  439. .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button,
  440. .el-input-group__prepend div.el-select .el-input__inner,
  441. .el-input-group__prepend div.el-select:hover .el-input__inner {
  442. border-color: transparent;
  443. background-color: transparent;
  444. color: inherit;
  445. border-top: 0;
  446. border-bottom: 0; }
  447. .el-input-group__append .el-button,
  448. .el-input-group__append .el-input, .el-input-group__prepend .el-button,
  449. .el-input-group__prepend .el-input {
  450. font-size: inherit; }
  451. .el-input-group__prepend {
  452. border-right: 0;
  453. border-top-right-radius: 0;
  454. border-bottom-right-radius: 0; }
  455. .el-input-group__append {
  456. border-left: 0;
  457. border-top-left-radius: 0;
  458. border-bottom-left-radius: 0; }
  459. .el-input-group--prepend .el-input__inner {
  460. border-top-left-radius: 0;
  461. border-bottom-left-radius: 0; }
  462. .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
  463. border-color: transparent; }
  464. .el-input-group--append .el-input__inner {
  465. border-top-right-radius: 0;
  466. border-bottom-right-radius: 0; }
  467. .el-input-group--append .el-select .el-input.is-focus .el-input__inner {
  468. border-color: transparent; }
  469. /** disalbe default clear on IE */
  470. .el-input__inner::-ms-clear {
  471. display: none;
  472. width: 0;
  473. height: 0; }