style.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. /*font*/
  2. /*size*/
  3. /*icon*/
  4. /*color*/
  5. /*input/radio/checkbox*/
  6. /*popup*/
  7. /*table*/
  8. /*filter*/
  9. /*menu*/
  10. /*loading*/
  11. /*validate*/
  12. /*grid*/
  13. /*toolbar*/
  14. /*tooltip*/
  15. /*pager*/
  16. /*modal*/
  17. /*checkbox*/
  18. /*radio*/
  19. /*button*/
  20. /*input*/
  21. /*textarea*/
  22. /*form*/
  23. /*select*/
  24. /*switch*/
  25. /*pulldown*/
  26. .vxe-button {
  27. position: relative;
  28. text-align: center;
  29. background-color: #fff;
  30. outline: 0;
  31. font-size: 14px;
  32. max-width: 500px;
  33. overflow: hidden;
  34. text-overflow: ellipsis;
  35. white-space: nowrap;
  36. white-space: nowrap;
  37. -webkit-user-select: none;
  38. -moz-user-select: none;
  39. -ms-user-select: none;
  40. user-select: none;
  41. -webkit-appearance: none;
  42. -moz-appearance: none;
  43. appearance: none;
  44. -webkit-transition: border 0.2s ease-in-out;
  45. transition: border 0.2s ease-in-out; }
  46. .vxe-button.is--disabled {
  47. color: #BFBFBF; }
  48. .vxe-button.is--disabled .vxe-button--icon.vxe-icon--zoomin {
  49. border-color: #BFBFBF; }
  50. .vxe-button.is--disabled:not(.is--loading) {
  51. cursor: no-drop; }
  52. .vxe-button:not(.is--disabled) {
  53. color: #606266;
  54. cursor: pointer; }
  55. .vxe-button:not(.is--disabled) .vxe-button--icon.vxe-icon--zoomin {
  56. border-color: #606266; }
  57. .vxe-button.is--loading:before {
  58. content: "";
  59. position: absolute;
  60. left: -1px;
  61. top: -1px;
  62. right: -1px;
  63. bottom: -1px;
  64. border-radius: inherit;
  65. background-color: rgba(255, 255, 255, 0.35);
  66. pointer-events: none; }
  67. .vxe-button.type--text {
  68. text-decoration: none;
  69. border: 0;
  70. padding: 0.1em 0.5em;
  71. background-color: transparent; }
  72. .vxe-button.type--text:not(.is--disabled):focus {
  73. -webkit-box-shadow: 0 0 0.25em 0 #409eff;
  74. box-shadow: 0 0 0.25em 0 #409eff; }
  75. .vxe-button.type--text:not(.is--disabled):hover {
  76. color: #73b8ff; }
  77. .vxe-button.type--text.theme--primary {
  78. color: #409eff; }
  79. .vxe-button.type--text.theme--primary:not(.is--disabled):hover {
  80. color: #73b8ff; }
  81. .vxe-button.type--text.theme--primary.is--disabled {
  82. color: #a6d2ff; }
  83. .vxe-button.type--text.theme--success {
  84. color: #67c23a; }
  85. .vxe-button.type--text.theme--success:not(.is--disabled):hover {
  86. color: #85cf60; }
  87. .vxe-button.type--text.theme--success.is--disabled {
  88. color: #a3db87; }
  89. .vxe-button.type--text.theme--info {
  90. color: #909399; }
  91. .vxe-button.type--text.theme--info:not(.is--disabled):hover {
  92. color: #abadb1; }
  93. .vxe-button.type--text.theme--info.is--disabled {
  94. color: #c5c7ca; }
  95. .vxe-button.type--text.theme--warning {
  96. color: #e6a23c; }
  97. .vxe-button.type--text.theme--warning:not(.is--disabled):hover {
  98. color: #ecb869; }
  99. .vxe-button.type--text.theme--warning.is--disabled {
  100. color: #f2cd96; }
  101. .vxe-button.type--text.theme--danger {
  102. color: #f56c6c; }
  103. .vxe-button.type--text.theme--danger:not(.is--disabled):hover {
  104. color: #f89c9c; }
  105. .vxe-button.type--text.theme--danger.is--disabled {
  106. color: #fbcccc; }
  107. .vxe-button.type--text.theme--perfect {
  108. color: #f8f8f9; }
  109. .vxe-button.type--text.theme--perfect:not(.is--disabled):hover {
  110. color: white; }
  111. .vxe-button.type--text.theme--perfect.is--disabled {
  112. color: white; }
  113. .vxe-button.type--button {
  114. font-family: inherit;
  115. line-height: inherit;
  116. height: 34px;
  117. line-height: 1;
  118. border: 1px solid #dcdfe6; }
  119. .vxe-button.type--button.is--round {
  120. border-radius: 17px; }
  121. .vxe-button.type--button:not(.is--round) {
  122. border-radius: 4px; }
  123. .vxe-button.type--button.is--circle {
  124. padding: 0 0.5em;
  125. min-width: 34px;
  126. border-radius: 50%; }
  127. .vxe-button.type--button:not(.is--circle) {
  128. padding: 0 1em; }
  129. .vxe-button.type--button:not(.is--disabled):hover {
  130. color: #5faeff; }
  131. .vxe-button.type--button:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  132. border-color: #5faeff; }
  133. .vxe-button.type--button:not(.is--disabled):focus {
  134. border-color: #409eff;
  135. -webkit-box-shadow: 0 0 0.25em 0 #409eff;
  136. box-shadow: 0 0 0.25em 0 #409eff; }
  137. .vxe-button.type--button:not(.is--disabled):active {
  138. color: #3196ff;
  139. border-color: #3196ff;
  140. background-color: #f7f7f7; }
  141. .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomin {
  142. background-color: #f7f7f7; }
  143. .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomout:after {
  144. background-color: #f7f7f7; }
  145. .vxe-button.type--button.theme--primary {
  146. color: #fff; }
  147. .vxe-button.type--button.theme--primary .vxe-button--icon.vxe-icon--zoomin {
  148. border-color: #fff; }
  149. .vxe-button.type--button.theme--primary:not(.is--disabled) {
  150. border-color: #409eff;
  151. background-color: #409eff; }
  152. .vxe-button.type--button.theme--primary:not(.is--disabled):hover {
  153. color: #fff;
  154. background-color: #5faeff;
  155. border-color: #5faeff; }
  156. .vxe-button.type--button.theme--primary:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  157. border-color: #5faeff; }
  158. .vxe-button.type--button.theme--primary:not(.is--disabled):active {
  159. color: #fff;
  160. background-color: #3196ff;
  161. border-color: #3196ff; }
  162. .vxe-button.type--button.theme--primary:not(.is--disabled):active.vxe-icon--zoomin {
  163. background-color: #3196ff; }
  164. .vxe-button.type--button.theme--primary:not(.is--disabled):active.vxe-icon--zoomout:after {
  165. background-color: #3196ff; }
  166. .vxe-button.type--button.theme--primary.is--disabled {
  167. border-color: #a6d2ff;
  168. background-color: #a6d2ff; }
  169. .vxe-button.type--button.theme--primary.is--loading {
  170. border-color: #409eff;
  171. background-color: #409eff; }
  172. .vxe-button.type--button.theme--success {
  173. color: #fff; }
  174. .vxe-button.type--button.theme--success .vxe-button--icon.vxe-icon--zoomin {
  175. border-color: #fff; }
  176. .vxe-button.type--button.theme--success:not(.is--disabled) {
  177. border-color: #67c23a;
  178. background-color: #67c23a; }
  179. .vxe-button.type--button.theme--success:not(.is--disabled):hover {
  180. color: #fff;
  181. background-color: #79cb50;
  182. border-color: #79cb50; }
  183. .vxe-button.type--button.theme--success:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  184. border-color: #79cb50; }
  185. .vxe-button.type--button.theme--success:not(.is--disabled):active {
  186. color: #fff;
  187. background-color: #61b636;
  188. border-color: #61b636; }
  189. .vxe-button.type--button.theme--success:not(.is--disabled):active.vxe-icon--zoomin {
  190. background-color: #61b636; }
  191. .vxe-button.type--button.theme--success:not(.is--disabled):active.vxe-icon--zoomout:after {
  192. background-color: #61b636; }
  193. .vxe-button.type--button.theme--success.is--disabled {
  194. border-color: #a3db87;
  195. background-color: #a3db87; }
  196. .vxe-button.type--button.theme--success.is--loading {
  197. border-color: #67c23a;
  198. background-color: #67c23a; }
  199. .vxe-button.type--button.theme--info {
  200. color: #fff; }
  201. .vxe-button.type--button.theme--info .vxe-button--icon.vxe-icon--zoomin {
  202. border-color: #fff; }
  203. .vxe-button.type--button.theme--info:not(.is--disabled) {
  204. border-color: #909399;
  205. background-color: #909399; }
  206. .vxe-button.type--button.theme--info:not(.is--disabled):hover {
  207. color: #fff;
  208. background-color: #a0a3a8;
  209. border-color: #a0a3a8; }
  210. .vxe-button.type--button.theme--info:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  211. border-color: #a0a3a8; }
  212. .vxe-button.type--button.theme--info:not(.is--disabled):active {
  213. color: #fff;
  214. background-color: #888b92;
  215. border-color: #888b92; }
  216. .vxe-button.type--button.theme--info:not(.is--disabled):active.vxe-icon--zoomin {
  217. background-color: #888b92; }
  218. .vxe-button.type--button.theme--info:not(.is--disabled):active.vxe-icon--zoomout:after {
  219. background-color: #888b92; }
  220. .vxe-button.type--button.theme--info.is--disabled {
  221. border-color: #c5c7ca;
  222. background-color: #c5c7ca; }
  223. .vxe-button.type--button.theme--info.is--loading {
  224. border-color: #909399;
  225. background-color: #909399; }
  226. .vxe-button.type--button.theme--warning {
  227. color: #fff; }
  228. .vxe-button.type--button.theme--warning .vxe-button--icon.vxe-icon--zoomin {
  229. border-color: #fff; }
  230. .vxe-button.type--button.theme--warning:not(.is--disabled) {
  231. border-color: #e6a23c;
  232. background-color: #e6a23c; }
  233. .vxe-button.type--button.theme--warning:not(.is--disabled):hover {
  234. color: #fff;
  235. background-color: #e9af57;
  236. border-color: #e9af57; }
  237. .vxe-button.type--button.theme--warning:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  238. border-color: #e9af57; }
  239. .vxe-button.type--button.theme--warning:not(.is--disabled):active {
  240. color: #fff;
  241. background-color: #e49c2e;
  242. border-color: #e49c2e; }
  243. .vxe-button.type--button.theme--warning:not(.is--disabled):active.vxe-icon--zoomin {
  244. background-color: #e49c2e; }
  245. .vxe-button.type--button.theme--warning:not(.is--disabled):active.vxe-icon--zoomout:after {
  246. background-color: #e49c2e; }
  247. .vxe-button.type--button.theme--warning.is--disabled {
  248. border-color: #f2cd96;
  249. background-color: #f2cd96; }
  250. .vxe-button.type--button.theme--warning.is--loading {
  251. border-color: #e6a23c;
  252. background-color: #e6a23c; }
  253. .vxe-button.type--button.theme--danger {
  254. color: #fff; }
  255. .vxe-button.type--button.theme--danger .vxe-button--icon.vxe-icon--zoomin {
  256. border-color: #fff; }
  257. .vxe-button.type--button.theme--danger:not(.is--disabled) {
  258. border-color: #f56c6c;
  259. background-color: #f56c6c; }
  260. .vxe-button.type--button.theme--danger:not(.is--disabled):hover {
  261. color: #fff;
  262. background-color: #f78989;
  263. border-color: #f78989; }
  264. .vxe-button.type--button.theme--danger:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  265. border-color: #f78989; }
  266. .vxe-button.type--button.theme--danger:not(.is--disabled):active {
  267. color: #fff;
  268. background-color: #f45e5e;
  269. border-color: #f45e5e; }
  270. .vxe-button.type--button.theme--danger:not(.is--disabled):active.vxe-icon--zoomin {
  271. background-color: #f45e5e; }
  272. .vxe-button.type--button.theme--danger:not(.is--disabled):active.vxe-icon--zoomout:after {
  273. background-color: #f45e5e; }
  274. .vxe-button.type--button.theme--danger.is--disabled {
  275. border-color: #fbcccc;
  276. background-color: #fbcccc; }
  277. .vxe-button.type--button.theme--danger.is--loading {
  278. border-color: #f56c6c;
  279. background-color: #f56c6c; }
  280. .vxe-button.type--button.theme--perfect {
  281. color: #606266; }
  282. .vxe-button.type--button.theme--perfect .vxe-button--icon.vxe-icon--zoomin {
  283. border-color: #606266; }
  284. .vxe-button.type--button.theme--perfect:not(.is--disabled) {
  285. border-color: #f8f8f9;
  286. background-color: #f8f8f9; }
  287. .vxe-button.type--button.theme--perfect:not(.is--disabled):hover {
  288. color: #606266;
  289. background-color: white;
  290. border-color: white; }
  291. .vxe-button.type--button.theme--perfect:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
  292. border-color: white; }
  293. .vxe-button.type--button.theme--perfect:not(.is--disabled):active {
  294. color: #606266;
  295. background-color: #f0f0f2;
  296. border-color: #f0f0f2; }
  297. .vxe-button.type--button.theme--perfect:not(.is--disabled):active.vxe-icon--zoomin {
  298. background-color: #f0f0f2; }
  299. .vxe-button.type--button.theme--perfect:not(.is--disabled):active.vxe-icon--zoomout:after {
  300. background-color: #f0f0f2; }
  301. .vxe-button.type--button.theme--perfect.is--disabled {
  302. border-color: white;
  303. background-color: white; }
  304. .vxe-button.type--button.theme--perfect.is--loading {
  305. border-color: #f8f8f9;
  306. background-color: #f8f8f9; }
  307. .vxe-button.size--medium {
  308. font-size: 14px; }
  309. .vxe-button.size--medium.type--button {
  310. height: 32px; }
  311. .vxe-button.size--medium.type--button.is--circle {
  312. min-width: 32px; }
  313. .vxe-button.size--medium.type--button.is--round {
  314. border-radius: 16px; }
  315. .vxe-button.size--medium .vxe-button--loading-icon,
  316. .vxe-button.size--medium .vxe-button--icon {
  317. min-width: 14px; }
  318. .vxe-button.size--small {
  319. font-size: 13px; }
  320. .vxe-button.size--small.type--button {
  321. height: 30px; }
  322. .vxe-button.size--small.type--button.is--circle {
  323. min-width: 30px; }
  324. .vxe-button.size--small.type--button.is--round {
  325. border-radius: 15px; }
  326. .vxe-button.size--small .vxe-button--loading-icon,
  327. .vxe-button.size--small .vxe-button--icon {
  328. min-width: 13px; }
  329. .vxe-button.size--mini {
  330. font-size: 12px; }
  331. .vxe-button.size--mini.type--button {
  332. height: 28px; }
  333. .vxe-button.size--mini.type--button.is--circle {
  334. min-width: 28px; }
  335. .vxe-button.size--mini.type--button.is--round {
  336. border-radius: 14px; }
  337. .vxe-button.size--mini .vxe-button--loading-icon,
  338. .vxe-button.size--mini .vxe-button--icon {
  339. min-width: 12px; }
  340. .vxe-input + .vxe-button,
  341. .vxe-input + .vxe-button--dropdown,
  342. .vxe-button + .vxe-button,
  343. .vxe-button + .vxe-button--dropdown {
  344. margin-left: 12px; }
  345. .vxe-button--loading-icon,
  346. .vxe-button--icon,
  347. .vxe-button--content {
  348. vertical-align: middle; }
  349. .vxe-button--loading-icon,
  350. .vxe-button--icon {
  351. min-width: 14px; }
  352. .vxe-button--loading-icon + .vxe-button--content,
  353. .vxe-button--icon + .vxe-button--content {
  354. margin-left: 4px; }
  355. .vxe-button--wrapper,
  356. .vxe-button--dropdown {
  357. display: inline-block; }
  358. .vxe-button--dropdown {
  359. position: relative; }
  360. .vxe-button--dropdown + .vxe-button,
  361. .vxe-button--dropdown + .vxe-button--dropdown {
  362. margin-left: 12px; }
  363. .vxe-button--dropdown > .vxe-button.type--button.theme--primary {
  364. color: #fff; }
  365. .vxe-button--dropdown > .vxe-button.type--button.theme--success {
  366. color: #fff; }
  367. .vxe-button--dropdown > .vxe-button.type--button.theme--info {
  368. color: #fff; }
  369. .vxe-button--dropdown > .vxe-button.type--button.theme--warning {
  370. color: #fff; }
  371. .vxe-button--dropdown > .vxe-button.type--button.theme--danger {
  372. color: #fff; }
  373. .vxe-button--dropdown > .vxe-button.type--button.theme--perfect {
  374. color: #606266; }
  375. .vxe-button--dropdown.is--active > .vxe-button:not(.is--disabled) {
  376. color: #5faeff; }
  377. .vxe-button--dropdown.is--active > .vxe-button.type--text.theme--primary {
  378. color: #73b8ff; }
  379. .vxe-button--dropdown.is--active > .vxe-button.type--text.theme--success {
  380. color: #85cf60; }
  381. .vxe-button--dropdown.is--active > .vxe-button.type--text.theme--info {
  382. color: #abadb1; }
  383. .vxe-button--dropdown.is--active > .vxe-button.type--text.theme--warning {
  384. color: #ecb869; }
  385. .vxe-button--dropdown.is--active > .vxe-button.type--text.theme--danger {
  386. color: #f89c9c; }
  387. .vxe-button--dropdown.is--active > .vxe-button.type--text.theme--perfect {
  388. color: white; }
  389. .vxe-button--dropdown.is--active > .vxe-button.type--button.theme--primary {
  390. color: #fff;
  391. background-color: #5faeff;
  392. border-color: #5faeff; }
  393. .vxe-button--dropdown.is--active > .vxe-button.type--button.theme--success {
  394. color: #fff;
  395. background-color: #79cb50;
  396. border-color: #79cb50; }
  397. .vxe-button--dropdown.is--active > .vxe-button.type--button.theme--info {
  398. color: #fff;
  399. background-color: #a0a3a8;
  400. border-color: #a0a3a8; }
  401. .vxe-button--dropdown.is--active > .vxe-button.type--button.theme--warning {
  402. color: #fff;
  403. background-color: #e9af57;
  404. border-color: #e9af57; }
  405. .vxe-button--dropdown.is--active > .vxe-button.type--button.theme--danger {
  406. color: #fff;
  407. background-color: #f78989;
  408. border-color: #f78989; }
  409. .vxe-button--dropdown.is--active > .vxe-button.type--button.theme--perfect {
  410. color: #606266;
  411. background-color: white;
  412. border-color: white; }
  413. .vxe-button--dropdown.is--active .vxe-button--dropdown-arrow {
  414. -webkit-transform: rotate(180deg);
  415. transform: rotate(180deg); }
  416. .vxe-button--dropdown-arrow {
  417. font-size: 12px;
  418. margin-left: 4px;
  419. -webkit-transition: -webkit-transform 0.2s ease-in-out;
  420. transition: -webkit-transform 0.2s ease-in-out;
  421. transition: transform 0.2s ease-in-out;
  422. transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; }
  423. .vxe-button--dropdown-panel {
  424. display: none;
  425. position: absolute;
  426. right: 0;
  427. padding: 4px 0; }
  428. .vxe-button--dropdown-panel.animat--leave {
  429. display: block;
  430. opacity: 0;
  431. -webkit-transform: scaleY(0.5);
  432. transform: scaleY(0.5);
  433. -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  434. transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  435. transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  436. transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  437. -webkit-transform-origin: center top;
  438. transform-origin: center top;
  439. -webkit-backface-visibility: hidden;
  440. backface-visibility: hidden;
  441. -webkit-transform-style: preserve-3d;
  442. transform-style: preserve-3d; }
  443. .vxe-button--dropdown-panel.animat--leave[placement="top"] {
  444. -webkit-transform-origin: center bottom;
  445. transform-origin: center bottom; }
  446. .vxe-button--dropdown-panel.animat--enter {
  447. opacity: 1;
  448. -webkit-transform: scaleY(1);
  449. transform: scaleY(1); }
  450. .vxe-button--dropdown-wrapper {
  451. padding: 5px;
  452. background-color: #fff;
  453. border-radius: 4px;
  454. border: 1px solid #dcdfe6;
  455. -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  456. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
  457. .vxe-button--dropdown-wrapper > .vxe-button {
  458. margin: 2px 0;
  459. display: block;
  460. width: 100%;
  461. border: 0; }
  462. .vxe-button--dropdown-wrapper > .vxe-button.type--text {
  463. padding: 2px 8px; }
  464. .vxe-button--dropdown-wrapper > .vxe-button:first-child {
  465. margin-top: 0; }
  466. .vxe-button--dropdown-wrapper > .vxe-button:last-child {
  467. margin-bottom: 0; }