1 |
|
2 | @import './helpers/mixin.scss';
|
3 |
|
4 |
|
5 | .vxe-pager {
|
6 | position: relative;
|
7 | display: flex;
|
8 | align-items: center;
|
9 | color: $vxe-font-color;
|
10 | font-family: $vxe-font-family;
|
11 | text-align: right;
|
12 | background-color: $vxe-pager-background-color;
|
13 | &.is--hidden {
|
14 | display: none;
|
15 | }
|
16 | &.align--left {
|
17 | text-align: left;
|
18 | }
|
19 | &.align--center {
|
20 | text-align: center;
|
21 | }
|
22 | &.is--loading {
|
23 | &:after {
|
24 | content: "";
|
25 | position: absolute;
|
26 | top: 0;
|
27 | left: 0;
|
28 | width: 100%;
|
29 | height: 100%;
|
30 | z-index: $vxe-loading-z-index;
|
31 | user-select: none;
|
32 | background-color: $vxe-loading-background-color;
|
33 | }
|
34 | }
|
35 | .vxe-pager--prev-btn,
|
36 | .vxe-pager--next-btn,
|
37 | .vxe-pager--num-btn,
|
38 | .vxe-pager--jump-prev,
|
39 | .vxe-pager--jump-next {
|
40 | color: inherit;
|
41 | outline: 0;
|
42 | border: 1px solid transparent;
|
43 | &:not(.is--disabled) {
|
44 | &:focus {
|
45 | box-shadow: 0 0 0.25em 0 $vxe-primary-color;
|
46 | }
|
47 | &:hover {
|
48 | color: lighten($vxe-primary-color, 6%);
|
49 | }
|
50 | &:active {
|
51 | background-color: darken($vxe-button-default-background-color, 3%);
|
52 | }
|
53 | }
|
54 | }
|
55 | &.is--border,
|
56 | &.is--perfect {
|
57 | &:not(.is--background) {
|
58 | .vxe-pager--prev-btn,
|
59 | .vxe-pager--next-btn,
|
60 | .vxe-pager--num-btn,
|
61 | .vxe-pager--jump-prev,
|
62 | .vxe-pager--jump-next {
|
63 | border-color: $vxe-input-border-color;
|
64 | }
|
65 | }
|
66 | }
|
67 | &.is--background,
|
68 | &.is--perfect {
|
69 | .vxe-pager--prev-btn,
|
70 | .vxe-pager--next-btn,
|
71 | .vxe-pager--jump-prev,
|
72 | .vxe-pager--num-btn,
|
73 | .vxe-pager--jump-next {
|
74 | background-color: $vxe-pager-perfect-button-background-color;
|
75 | }
|
76 | .vxe-pager--jump-prev,
|
77 | .vxe-pager--num-btn,
|
78 | .vxe-pager--jump-next {
|
79 | &:not(.is--disabled) {
|
80 | &.is--active {
|
81 | color: #fff;
|
82 | background-color: $vxe-primary-color;
|
83 | &:hover {
|
84 | background-color: lighten($vxe-primary-color, 6%);
|
85 | }
|
86 | &:focus {
|
87 | border-color: $vxe-primary-color;
|
88 | }
|
89 | &:active {
|
90 | border-color: darken($vxe-primary-color, 3%);
|
91 | background-color: darken($vxe-primary-color, 3%);
|
92 | }
|
93 | }
|
94 | }
|
95 | }
|
96 | }
|
97 | &.is--perfect {
|
98 | border: 1px solid $vxe-table-border-color;
|
99 | border-top-width: 0;
|
100 | background-color: $vxe-pager-perfect-background-color;
|
101 | }
|
102 | &.is--border {
|
103 | .vxe-pager--num-btn {
|
104 | &.is--active {
|
105 | border-color: $vxe-primary-color;
|
106 | }
|
107 | }
|
108 | }
|
109 | .vxe-pager--wrapper {
|
110 | flex-grow: 1;
|
111 | }
|
112 | .vxe-pager--jump-icon,
|
113 | .vxe-pager--btn-icon {
|
114 | position: absolute;
|
115 | top: 50%;
|
116 | left: 50%;
|
117 | transform: translate(-50%, -50%);
|
118 | }
|
119 | .vxe-pager--left-wrapper,
|
120 | .vxe-pager--right-wrapper,
|
121 | .vxe-pager--total,
|
122 | .vxe-pager--prev-btn,
|
123 | .vxe-pager--next-btn,
|
124 | .vxe-pager--jump,
|
125 | .vxe-pager--jump-prev,
|
126 | .vxe-pager--jump-next,
|
127 | .vxe-pager--count,
|
128 | .vxe-pager--sizes {
|
129 | margin: 0 0.4em;
|
130 | vertical-align: middle;
|
131 | display: inline-block;
|
132 | }
|
133 | .vxe-pager--prev-btn,
|
134 | .vxe-pager--jump-prev,
|
135 | .vxe-pager--num-btn,
|
136 | .vxe-pager--jump-next,
|
137 | .vxe-pager--next-btn {
|
138 | position: relative;
|
139 | cursor: pointer;
|
140 | }
|
141 | .vxe-pager--left-wrapper,
|
142 | .vxe-pager--right-wrapper,
|
143 | .vxe-pager--count,
|
144 | .vxe-pager--prev-btn,
|
145 | .vxe-pager--next-btn,
|
146 | .vxe-pager--jump-prev,
|
147 | .vxe-pager--num-btn,
|
148 | .vxe-pager--jump-next {
|
149 | height: 2.15em;
|
150 | line-height: 2em;
|
151 | display: inline-block;
|
152 | }
|
153 | .vxe-pager--jump .vxe-pager--goto,
|
154 | .vxe-pager--sizes > .vxe-input {
|
155 | height: 2.15em;
|
156 | }
|
157 | .vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
|
158 | text-align: center;
|
159 | }
|
160 | .vxe-pager--jump-prev,
|
161 | .vxe-pager--prev-btn,
|
162 | .vxe-pager--next-btn,
|
163 | .vxe-pager--jump-next,
|
164 | .vxe-pager--num-btn,
|
165 | .vxe-pager--count {
|
166 | min-width: 2.15em;
|
167 | }
|
168 | .vxe-pager--btn-wrapper {
|
169 | padding: 0;
|
170 | margin: 0;
|
171 | display: inline-block;
|
172 | text-align: center;
|
173 | .vxe-pager--jump-prev,
|
174 | .vxe-pager--jump-next {
|
175 | &:hover {
|
176 | .vxe-pager--jump-more-icon {
|
177 | display: none;
|
178 | }
|
179 | .vxe-pager--jump-icon {
|
180 | display: inline-block;
|
181 | }
|
182 | }
|
183 | }
|
184 | .vxe-pager--jump-icon {
|
185 | display: none;
|
186 | }
|
187 | }
|
188 | .vxe-pager--jump-prev,
|
189 | .vxe-pager--prev-btn,
|
190 | .vxe-pager--next-btn,
|
191 | .vxe-pager--jump-next,
|
192 | .vxe-pager--num-btn {
|
193 | text-align: center;
|
194 | border-radius: $vxe-border-radius;
|
195 | margin: 0 0.25em;
|
196 | user-select: none;
|
197 | background-color: $vxe-pager-background-color;
|
198 | &:not(.is--disabled) {
|
199 | &:hover {
|
200 | color: lighten($vxe-primary-color, 6%);
|
201 | }
|
202 | &.is--active,
|
203 | &:focus {
|
204 | color: $vxe-primary-color;
|
205 | }
|
206 | &:active {
|
207 | color: darken($vxe-primary-color, 3%);
|
208 | }
|
209 | }
|
210 | &.is--disabled {
|
211 | cursor: no-drop;
|
212 | color: $vxe-disabled-color;
|
213 | &:hover {
|
214 | color: $vxe-disabled-color;
|
215 | }
|
216 | }
|
217 | }
|
218 | .vxe-pager--num-btn {
|
219 | vertical-align: middle;
|
220 | &.is--active {
|
221 | font-weight: 700;
|
222 | }
|
223 | }
|
224 | .vxe-pager--sizes {
|
225 | width: 7em;
|
226 | text-align: center;
|
227 | cursor: pointer;
|
228 | & .vxe-input--inner {
|
229 | text-align: center;
|
230 | }
|
231 | }
|
232 | .vxe-pager--count {
|
233 | text-align: center;
|
234 | & > span {
|
235 | vertical-align: middle;
|
236 | }
|
237 | .vxe-pager--separator {
|
238 | margin-right: 0.2em;
|
239 | &:before {
|
240 | content: "/";
|
241 | }
|
242 | }
|
243 | }
|
244 | .vxe-pager--jump .vxe-pager--goto {
|
245 | border-radius: $vxe-border-radius;
|
246 | border: 1px solid $vxe-input-border-color;
|
247 | color: $vxe-font-color;
|
248 | transition: border .2s ease-in-out;
|
249 | padding: 0 0.4em;
|
250 | background-color: $vxe-input-background-color;
|
251 | &:focus {
|
252 | border: 1px solid $vxe-primary-color;
|
253 | outline: 0;
|
254 | }
|
255 | }
|
256 | .vxe-pager--jump {
|
257 | .vxe-pager--goto-text {
|
258 | margin-right: 0.25em;
|
259 | }
|
260 | .vxe-pager--classifier-text {
|
261 | margin-left: 0.25em;
|
262 | }
|
263 | .vxe-pager--goto {
|
264 | width: 3.2em;
|
265 | text-align: center;
|
266 | }
|
267 | }
|
268 | }
|
269 |
|
270 | .vxe-pager {
|
271 | font-size: $vxe-font-size;
|
272 | height: $vxe-table-row-height-default;
|
273 | &.size--medium {
|
274 | font-size: $vxe-font-size-medium;
|
275 | height: $vxe-table-row-height-medium;
|
276 | }
|
277 | &.size--small {
|
278 | font-size: $vxe-font-size-small;
|
279 | height: $vxe-table-row-height-small;
|
280 | }
|
281 | &.size--mini {
|
282 | font-size: $vxe-font-size-mini;
|
283 | height: $vxe-table-row-height-mini;
|
284 | }
|
285 | } |
\ | No newline at end of file |