1 | @import "../core/index-noreset.scss";
|
2 | @import "scss/variable";
|
3 | @import "scss/mixin";
|
4 | @import "./rtl.scss";
|
5 |
|
6 | #{$pagination-prefix} {
|
7 | @include box-sizing;
|
8 | @include clearfix;
|
9 | font-size: 0;
|
10 |
|
11 | &-total {
|
12 | display: inline-block;
|
13 | font-size: $font-size-body-2;
|
14 | margin-right: $s-4;
|
15 | }
|
16 |
|
17 | &-pages {
|
18 | display: inline-block;
|
19 | }
|
20 |
|
21 | &-list {
|
22 | display: inline-block;
|
23 | vertical-align: top;
|
24 | }
|
25 | & &-item:not([disabled]) {
|
26 | display: inline-block;
|
27 | border-style: $pagination-item-border-style;
|
28 | border-color: $pagination-item-border-color;
|
29 | background: $pagination-item-bg;
|
30 | color: $pagination-item-color;
|
31 | box-shadow: $pagination-item-shadow;
|
32 | }
|
33 |
|
34 | & &-item {
|
35 | transition: none;
|
36 | &.#{$css-prefix}current {
|
37 | border-color: $pagination-item-current-border-color;
|
38 | background: $pagination-item-current-bg;
|
39 | color: $pagination-item-current-color;
|
40 | box-shadow: $pagination-item-current-shadow;
|
41 | }
|
42 | &.#{$css-prefix}current:hover,
|
43 | &.#{$css-prefix}current:focus {
|
44 | border-color: $pagination-item-current-hover-border-color;
|
45 | background: $pagination-item-current-hover-bg;
|
46 | color: $pagination-item-current-hover-color;
|
47 | box-shadow: $pagination-item-current-hover-shadow;
|
48 | }
|
49 | }
|
50 |
|
51 | &-ellipsis {
|
52 | display: inline-block;
|
53 | color: $pagination-ellipsis-color;
|
54 | vertical-align: top;
|
55 | }
|
56 |
|
57 | &-display {
|
58 | display: inline-block;
|
59 | margin: 0 $s-4;
|
60 | color: $pagination-total-color;
|
61 | vertical-align: middle;
|
62 |
|
63 | em {
|
64 | font-style: normal;
|
65 | color: $pagination-current-color;
|
66 | }
|
67 | }
|
68 |
|
69 | &-jump {
|
70 | &-text {
|
71 | display: inline-block;
|
72 | vertical-align: middle;
|
73 | color: $pagination-jump-color;
|
74 | }
|
75 |
|
76 | &-input {
|
77 | margin: 0 $pagination-input-margin;
|
78 | vertical-align: top;
|
79 | }
|
80 |
|
81 | &-go {
|
82 | margin-left: $s-1;
|
83 | vertical-align: top;
|
84 | }
|
85 | }
|
86 |
|
87 | &-size-selector {
|
88 | display: inline-block;
|
89 | position: relative;
|
90 | &-title {
|
91 | margin-right: $pagination-size-selector-title-margin-right;
|
92 | color: $pagination-size-selector-title-color;
|
93 | }
|
94 | &-filter {
|
95 | display: inline-block;
|
96 | vertical-align: middle;
|
97 | }
|
98 | &-dropdown {
|
99 | vertical-align: top;
|
100 | min-width: $s-16;
|
101 | }
|
102 | &-dropdown .#{$css-prefix}select-inner {
|
103 | min-width: $s-16;
|
104 | }
|
105 | &-popup {
|
106 | min-width: $s-16;
|
107 | }
|
108 | &-btn.#{$css-prefix}btn-text {
|
109 | height: initial;
|
110 | line-height: initial;
|
111 | color: $pagination-size-selector-filter-color;
|
112 | border-radius: 0;
|
113 |
|
114 | &.#{$css-prefix}current {
|
115 | color: $pagination-size-selector-filter-current-color;
|
116 | }
|
117 |
|
118 | & + #{$pagination-prefix}-size-selector-btn {
|
119 | border-left: $line-1 solid $color-line1-2;
|
120 | }
|
121 | }
|
122 | }
|
123 |
|
124 | &-pages + #{$pagination-prefix}-size-selector,
|
125 | &-size-selector + #{$pagination-prefix}-pages {
|
126 | margin-left: $s-10;
|
127 | }
|
128 |
|
129 | &.#{$css-prefix}hide {
|
130 | display: none;
|
131 | }
|
132 |
|
133 | &.#{$css-prefix}start {
|
134 | #{$pagination-prefix}-pages {
|
135 | float: right;
|
136 | }
|
137 | #{$pagination-prefix}-size-selector {
|
138 | float: left;
|
139 | }
|
140 | }
|
141 |
|
142 | &.#{$css-prefix}end {
|
143 | #{$pagination-prefix}-pages {
|
144 | float: left;
|
145 | }
|
146 | #{$pagination-prefix}-size-selector {
|
147 | float: right;
|
148 | }
|
149 | }
|
150 |
|
151 | &.#{$css-prefix}small {
|
152 | @include pagination-size(
|
153 | 'ltr',
|
154 | $itemSplit: $pagination-small-item-split,
|
155 | $itemPaddingLeftRight: $pagination-small-item-padding,
|
156 | $itemBorderWidth: $pagination-small-item-border-width,
|
157 | $itemCorner: $pagination-small-item-corner,
|
158 | $ellipsisSize: $pagination-small-ellipsis-size,
|
159 | $totalFontSize: $pagination-small-total-font-size,
|
160 | $currentFontSize: $pagination-small-current-font-size,
|
161 | $otherFontSize: $pagination-small-jump-font-size,
|
162 | $pageHeihgt: $form-element-small-height,
|
163 | $numberPaddingLeftRight: $pagination-small-size-selector-number-padding,
|
164 | $inputWidth: $pagination-small-input-width
|
165 | );
|
166 |
|
167 | &.#{$css-prefix}arrow-only {
|
168 | @include arrow-only-size($s-5);
|
169 | }
|
170 |
|
171 | &.#{$css-prefix}arrow-prev-only {
|
172 | @include arrow-prev-only-size($s-5);
|
173 | }
|
174 |
|
175 | &.#{$css-prefix}no-border {
|
176 | @include no-border-size($s-2);
|
177 | }
|
178 |
|
179 | &.#{$css-prefix}mini {
|
180 | @include mini-size($s-1);
|
181 | }
|
182 | }
|
183 |
|
184 | &.#{$css-prefix}medium {
|
185 | @include pagination-size(
|
186 | 'ltr',
|
187 | $itemSplit: $pagination-item-split,
|
188 | $itemPaddingLeftRight: $pagination-item-padding,
|
189 | $itemBorderWidth: $pagination-item-border-width,
|
190 | $itemCorner: $pagination-item-corner,
|
191 | $ellipsisSize: $pagination-ellipsis-size,
|
192 | $totalFontSize: $pagination-total-font-size,
|
193 | $currentFontSize: $pagination-current-font-size,
|
194 | $otherFontSize: $pagination-jump-font-size,
|
195 | $pageHeihgt: $form-element-medium-height,
|
196 | $numberPaddingLeftRight: $pagination-size-selector-number-padding,
|
197 | $inputWidth: $pagination-input-width
|
198 | );
|
199 |
|
200 | &.#{$css-prefix}arrow-only {
|
201 | @include arrow-only-size($s-7);
|
202 | }
|
203 |
|
204 | &.#{$css-prefix}arrow-prev-only {
|
205 | @include arrow-prev-only-size($s-7);
|
206 | }
|
207 |
|
208 | &.#{$css-prefix}no-border {
|
209 | @include no-border-size($s-3);
|
210 | }
|
211 |
|
212 | &.#{$css-prefix}mini {
|
213 | @include mini-size($s-1);
|
214 | }
|
215 | }
|
216 |
|
217 | &.#{$css-prefix}large {
|
218 | @include pagination-size(
|
219 | 'ltr',
|
220 | $itemSplit: $pagination-large-item-split,
|
221 | $itemPaddingLeftRight: $pagination-large-item-padding,
|
222 | $itemBorderWidth: $pagination-large-item-border-width,
|
223 | $itemCorner: $pagination-large-item-corner,
|
224 | $ellipsisSize: $pagination-large-ellipsis-size,
|
225 | $totalFontSize: $pagination-large-total-font-size,
|
226 | $currentFontSize: $pagination-large-current-font-size,
|
227 | $otherFontSize: $pagination-large-jump-font-size,
|
228 | $pageHeihgt: $form-element-large-height,
|
229 | $numberPaddingLeftRight: $pagination-large-size-selector-number-padding,
|
230 | $inputWidth: $pagination-large-input-width
|
231 | );
|
232 |
|
233 | &.#{$css-prefix}arrow-only {
|
234 | @include arrow-only-size($s-10);
|
235 | }
|
236 |
|
237 | &.#{$css-prefix}arrow-prev-only {
|
238 | @include arrow-prev-only-size($s-10);
|
239 | }
|
240 |
|
241 | &.#{$css-prefix}no-border {
|
242 | @include no-border-size($s-4);
|
243 | }
|
244 |
|
245 | &.#{$css-prefix}mini {
|
246 | @include mini-size($s-2);
|
247 | }
|
248 | }
|
249 |
|
250 | &-icon-prev::before {
|
251 | content: $pagination-icon-prev-content;
|
252 | }
|
253 |
|
254 | &-icon-next::before {
|
255 | content: $pagination-icon-next-content;
|
256 | }
|
257 |
|
258 | &-icon-ellipsis::before {
|
259 | content: $pagination-icon-ellipsis-content;
|
260 | }
|
261 | }
|