style.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  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. /*pager*/
  27. .vxe-pager {
  28. position: relative;
  29. display: -webkit-box;
  30. display: -ms-flexbox;
  31. display: flex;
  32. -webkit-box-align: center;
  33. -ms-flex-align: center;
  34. align-items: center;
  35. color: #606266;
  36. font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  37. text-align: right;
  38. background-color: #fff; }
  39. .vxe-pager.is--hidden {
  40. display: none; }
  41. .vxe-pager.align--left {
  42. text-align: left; }
  43. .vxe-pager.align--center {
  44. text-align: center; }
  45. .vxe-pager.is--loading:after {
  46. content: "";
  47. position: absolute;
  48. top: 0;
  49. left: 0;
  50. width: 100%;
  51. height: 100%;
  52. z-index: 999;
  53. -webkit-user-select: none;
  54. -moz-user-select: none;
  55. -ms-user-select: none;
  56. user-select: none;
  57. background-color: rgba(0, 0, 0, 0.2); }
  58. .vxe-pager .vxe-pager--prev-btn,
  59. .vxe-pager .vxe-pager--next-btn,
  60. .vxe-pager .vxe-pager--num-btn,
  61. .vxe-pager .vxe-pager--jump-prev,
  62. .vxe-pager .vxe-pager--jump-next {
  63. color: inherit;
  64. outline: 0;
  65. border: 1px solid transparent; }
  66. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus,
  67. .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
  68. .vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,
  69. .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,
  70. .vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus {
  71. -webkit-box-shadow: 0 0 0.25em 0 #409eff;
  72. box-shadow: 0 0 0.25em 0 #409eff; }
  73. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover,
  74. .vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
  75. .vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,
  76. .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,
  77. .vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover {
  78. color: #5faeff; }
  79. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active,
  80. .vxe-pager .vxe-pager--next-btn:not(.is--disabled):active,
  81. .vxe-pager .vxe-pager--num-btn:not(.is--disabled):active,
  82. .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):active,
  83. .vxe-pager .vxe-pager--jump-next:not(.is--disabled):active {
  84. background-color: #f7f7f7; }
  85. .vxe-pager.is--border:not(.is--background) .vxe-pager--prev-btn,
  86. .vxe-pager.is--border:not(.is--background) .vxe-pager--next-btn,
  87. .vxe-pager.is--border:not(.is--background) .vxe-pager--num-btn,
  88. .vxe-pager.is--border:not(.is--background) .vxe-pager--jump-prev,
  89. .vxe-pager.is--border:not(.is--background) .vxe-pager--jump-next, .vxe-pager.is--perfect:not(.is--background) .vxe-pager--prev-btn,
  90. .vxe-pager.is--perfect:not(.is--background) .vxe-pager--next-btn,
  91. .vxe-pager.is--perfect:not(.is--background) .vxe-pager--num-btn,
  92. .vxe-pager.is--perfect:not(.is--background) .vxe-pager--jump-prev,
  93. .vxe-pager.is--perfect:not(.is--background) .vxe-pager--jump-next {
  94. border-color: #dcdfe6; }
  95. .vxe-pager.is--background .vxe-pager--prev-btn,
  96. .vxe-pager.is--background .vxe-pager--next-btn,
  97. .vxe-pager.is--background .vxe-pager--jump-prev,
  98. .vxe-pager.is--background .vxe-pager--num-btn,
  99. .vxe-pager.is--background .vxe-pager--jump-next, .vxe-pager.is--perfect .vxe-pager--prev-btn,
  100. .vxe-pager.is--perfect .vxe-pager--next-btn,
  101. .vxe-pager.is--perfect .vxe-pager--jump-prev,
  102. .vxe-pager.is--perfect .vxe-pager--num-btn,
  103. .vxe-pager.is--perfect .vxe-pager--jump-next {
  104. background-color: #f4f4f5; }
  105. .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active,
  106. .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active,
  107. .vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active,
  108. .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active,
  109. .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active {
  110. color: #fff;
  111. background-color: #409eff; }
  112. .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:hover,
  113. .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover,
  114. .vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:hover, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:hover,
  115. .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:hover,
  116. .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:hover {
  117. background-color: #5faeff; }
  118. .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:focus,
  119. .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:focus,
  120. .vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:focus, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:focus,
  121. .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:focus,
  122. .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:focus {
  123. border-color: #409eff; }
  124. .vxe-pager.is--background .vxe-pager--jump-prev:not(.is--disabled).is--active:active,
  125. .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:active,
  126. .vxe-pager.is--background .vxe-pager--jump-next:not(.is--disabled).is--active:active, .vxe-pager.is--perfect .vxe-pager--jump-prev:not(.is--disabled).is--active:active,
  127. .vxe-pager.is--perfect .vxe-pager--num-btn:not(.is--disabled).is--active:active,
  128. .vxe-pager.is--perfect .vxe-pager--jump-next:not(.is--disabled).is--active:active {
  129. border-color: #3196ff;
  130. background-color: #3196ff; }
  131. .vxe-pager.is--perfect {
  132. border: 1px solid #e8eaec;
  133. border-top-width: 0;
  134. background-color: #f8f8f9; }
  135. .vxe-pager.is--perfect .vxe-pager--prev-btn,
  136. .vxe-pager.is--perfect .vxe-pager--next-btn,
  137. .vxe-pager.is--perfect .vxe-pager--jump-prev,
  138. .vxe-pager.is--perfect .vxe-pager--num-btn,
  139. .vxe-pager.is--perfect .vxe-pager--jump-next {
  140. background-color: #fff; }
  141. .vxe-pager.is--border .vxe-pager--num-btn.is--active {
  142. border-color: #409eff; }
  143. .vxe-pager .vxe-pager--wrapper {
  144. -webkit-box-flex: 1;
  145. -ms-flex-positive: 1;
  146. flex-grow: 1; }
  147. .vxe-pager .vxe-pager--jump-icon,
  148. .vxe-pager .vxe-pager--btn-icon {
  149. position: absolute;
  150. top: 50%;
  151. left: 50%;
  152. -webkit-transform: translate(-50%, -50%);
  153. transform: translate(-50%, -50%); }
  154. .vxe-pager .vxe-pager--left-wrapper,
  155. .vxe-pager .vxe-pager--right-wrapper,
  156. .vxe-pager .vxe-pager--total,
  157. .vxe-pager .vxe-pager--prev-btn,
  158. .vxe-pager .vxe-pager--next-btn,
  159. .vxe-pager .vxe-pager--jump,
  160. .vxe-pager .vxe-pager--jump-prev,
  161. .vxe-pager .vxe-pager--jump-next,
  162. .vxe-pager .vxe-pager--count,
  163. .vxe-pager .vxe-pager--sizes {
  164. margin: 0 0.4em;
  165. vertical-align: middle;
  166. display: inline-block; }
  167. .vxe-pager .vxe-pager--prev-btn,
  168. .vxe-pager .vxe-pager--jump-prev,
  169. .vxe-pager .vxe-pager--num-btn,
  170. .vxe-pager .vxe-pager--jump-next,
  171. .vxe-pager .vxe-pager--next-btn {
  172. position: relative;
  173. cursor: pointer; }
  174. .vxe-pager .vxe-pager--left-wrapper,
  175. .vxe-pager .vxe-pager--right-wrapper,
  176. .vxe-pager .vxe-pager--count,
  177. .vxe-pager .vxe-pager--prev-btn,
  178. .vxe-pager .vxe-pager--next-btn,
  179. .vxe-pager .vxe-pager--jump-prev,
  180. .vxe-pager .vxe-pager--num-btn,
  181. .vxe-pager .vxe-pager--jump-next {
  182. height: 2.15em;
  183. line-height: 2em;
  184. display: inline-block; }
  185. .vxe-pager .vxe-pager--jump .vxe-pager--goto,
  186. .vxe-pager .vxe-pager--sizes > .vxe-input {
  187. height: 2.15em; }
  188. .vxe-pager .vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
  189. text-align: center; }
  190. .vxe-pager .vxe-pager--jump-prev,
  191. .vxe-pager .vxe-pager--prev-btn,
  192. .vxe-pager .vxe-pager--next-btn,
  193. .vxe-pager .vxe-pager--jump-next,
  194. .vxe-pager .vxe-pager--num-btn,
  195. .vxe-pager .vxe-pager--count {
  196. min-width: 2.15em; }
  197. .vxe-pager .vxe-pager--btn-wrapper {
  198. padding: 0;
  199. margin: 0;
  200. display: inline-block;
  201. text-align: center; }
  202. .vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-prev:hover .vxe-pager--jump-more-icon,
  203. .vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-next:hover .vxe-pager--jump-more-icon {
  204. display: none; }
  205. .vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-prev:hover .vxe-pager--jump-icon,
  206. .vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-next:hover .vxe-pager--jump-icon {
  207. display: inline-block; }
  208. .vxe-pager .vxe-pager--btn-wrapper .vxe-pager--jump-icon {
  209. display: none; }
  210. .vxe-pager .vxe-pager--jump-prev,
  211. .vxe-pager .vxe-pager--prev-btn,
  212. .vxe-pager .vxe-pager--next-btn,
  213. .vxe-pager .vxe-pager--jump-next,
  214. .vxe-pager .vxe-pager--num-btn {
  215. text-align: center;
  216. border-radius: 4px;
  217. margin: 0 0.25em;
  218. -webkit-user-select: none;
  219. -moz-user-select: none;
  220. -ms-user-select: none;
  221. user-select: none;
  222. background-color: #fff; }
  223. .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,
  224. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover,
  225. .vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
  226. .vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover,
  227. .vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover {
  228. color: #5faeff; }
  229. .vxe-pager .vxe-pager--jump-prev:not(.is--disabled).is--active, .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):focus,
  230. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled).is--active,
  231. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):focus,
  232. .vxe-pager .vxe-pager--next-btn:not(.is--disabled).is--active,
  233. .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
  234. .vxe-pager .vxe-pager--jump-next:not(.is--disabled).is--active,
  235. .vxe-pager .vxe-pager--jump-next:not(.is--disabled):focus,
  236. .vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active,
  237. .vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus {
  238. color: #409eff; }
  239. .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):active,
  240. .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active,
  241. .vxe-pager .vxe-pager--next-btn:not(.is--disabled):active,
  242. .vxe-pager .vxe-pager--jump-next:not(.is--disabled):active,
  243. .vxe-pager .vxe-pager--num-btn:not(.is--disabled):active {
  244. color: #3196ff; }
  245. .vxe-pager .vxe-pager--jump-prev.is--disabled,
  246. .vxe-pager .vxe-pager--prev-btn.is--disabled,
  247. .vxe-pager .vxe-pager--next-btn.is--disabled,
  248. .vxe-pager .vxe-pager--jump-next.is--disabled,
  249. .vxe-pager .vxe-pager--num-btn.is--disabled {
  250. cursor: no-drop;
  251. color: #BFBFBF; }
  252. .vxe-pager .vxe-pager--jump-prev.is--disabled:hover,
  253. .vxe-pager .vxe-pager--prev-btn.is--disabled:hover,
  254. .vxe-pager .vxe-pager--next-btn.is--disabled:hover,
  255. .vxe-pager .vxe-pager--jump-next.is--disabled:hover,
  256. .vxe-pager .vxe-pager--num-btn.is--disabled:hover {
  257. color: #BFBFBF; }
  258. .vxe-pager .vxe-pager--num-btn {
  259. vertical-align: middle; }
  260. .vxe-pager .vxe-pager--num-btn.is--active {
  261. font-weight: 700; }
  262. .vxe-pager .vxe-pager--sizes {
  263. width: 7em;
  264. text-align: center;
  265. cursor: pointer; }
  266. .vxe-pager .vxe-pager--sizes .vxe-input--inner {
  267. text-align: center; }
  268. .vxe-pager .vxe-pager--count {
  269. text-align: center; }
  270. .vxe-pager .vxe-pager--count > span {
  271. vertical-align: middle; }
  272. .vxe-pager .vxe-pager--count .vxe-pager--separator {
  273. margin-right: 0.2em; }
  274. .vxe-pager .vxe-pager--count .vxe-pager--separator:before {
  275. content: "/"; }
  276. .vxe-pager .vxe-pager--jump .vxe-pager--goto {
  277. border-radius: 4px;
  278. border: 1px solid #dcdfe6;
  279. color: #606266;
  280. -webkit-transition: border .2s ease-in-out;
  281. transition: border .2s ease-in-out;
  282. padding: 0 0.4em;
  283. background-color: #fff; }
  284. .vxe-pager .vxe-pager--jump .vxe-pager--goto:focus {
  285. border: 1px solid #409eff;
  286. outline: 0; }
  287. .vxe-pager .vxe-pager--jump .vxe-pager--goto-text {
  288. margin-right: 0.25em; }
  289. .vxe-pager .vxe-pager--jump .vxe-pager--classifier-text {
  290. margin-left: 0.25em; }
  291. .vxe-pager .vxe-pager--jump .vxe-pager--goto {
  292. width: 3.2em;
  293. text-align: center; }
  294. .vxe-pager {
  295. font-size: 14px;
  296. height: 48px; }
  297. .vxe-pager.size--medium {
  298. font-size: 14px;
  299. height: 44px; }
  300. .vxe-pager.size--small {
  301. font-size: 13px;
  302. height: 40px; }
  303. .vxe-pager.size--mini {
  304. font-size: 12px;
  305. height: 36px; }