276 lines
5.8 KiB
SCSS
276 lines
5.8 KiB
SCSS
![]() |
/**Variable**/
|
||
|
@import './helpers/mixin.scss';
|
||
|
|
||
|
/*pager*/
|
||
|
.vxe-pager {
|
||
|
position: relative;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
color: $vxe-font-color;
|
||
|
font-family: $vxe-font-family;
|
||
|
text-align: right;
|
||
|
&.is--hidden {
|
||
|
display: none;
|
||
|
}
|
||
|
&.align--left {
|
||
|
text-align: left;
|
||
|
}
|
||
|
&.align--center {
|
||
|
text-align: center;
|
||
|
}
|
||
|
&.is--loading {
|
||
|
&:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
z-index: $vxe-loading-z-index;
|
||
|
user-select: none;
|
||
|
background-color: $vxe-loading-background-color;
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--jump-next {
|
||
|
border: 1px solid transparent;
|
||
|
}
|
||
|
&.is--border,
|
||
|
&.is--perfect {
|
||
|
&:not(.is--background) {
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--jump-next {
|
||
|
border-color: $vxe-input-border-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
&.is--background,
|
||
|
&.is--perfect {
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn {
|
||
|
background-color: #f4f4f5;
|
||
|
}
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--jump-next {
|
||
|
background-color: #f4f4f5;
|
||
|
&:not(.is--disabled) {
|
||
|
&:hover {
|
||
|
color: $vxe-primary-color;
|
||
|
}
|
||
|
&.is--active {
|
||
|
color: #fff;
|
||
|
background-color: $vxe-primary-color;
|
||
|
&:hover {
|
||
|
background-color: lighten($vxe-primary-color, 6%);
|
||
|
}
|
||
|
&:active {
|
||
|
background-color: darken($vxe-primary-color, 3%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
&.is--perfect {
|
||
|
border: 1px solid $vxe-table-border-color;
|
||
|
border-top-width: 0;
|
||
|
background-color: $vxe-table-header-background-color;
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--jump-next {
|
||
|
background-color: #fff;
|
||
|
}
|
||
|
}
|
||
|
&.is--border {
|
||
|
.vxe-pager--num-btn {
|
||
|
&.is--active {
|
||
|
border-color: $vxe-primary-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--wrapper {
|
||
|
flex-grow: 1;
|
||
|
}
|
||
|
.vxe-pager--jump-icon,
|
||
|
.vxe-pager--btn-icon {
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
}
|
||
|
.vxe-pager--left-wrapper,
|
||
|
.vxe-pager--right-wrapper,
|
||
|
.vxe-pager--total,
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--jump,
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--jump-next,
|
||
|
.vxe-pager--count,
|
||
|
.vxe-pager--sizes {
|
||
|
margin: 0 0.4em;
|
||
|
vertical-align: middle;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--jump-next,
|
||
|
.vxe-pager--next-btn {
|
||
|
position: relative;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.vxe-pager--left-wrapper,
|
||
|
.vxe-pager--right-wrapper,
|
||
|
.vxe-pager--count,
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--jump-next {
|
||
|
height: 2.15em;
|
||
|
line-height: 2em;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.vxe-pager--jump .vxe-pager--goto,
|
||
|
.vxe-pager--sizes > .vxe-input {
|
||
|
height: 2.15em;
|
||
|
}
|
||
|
.vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
|
||
|
height: 1.8em;
|
||
|
line-height: 1.8em;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--jump-next,
|
||
|
.vxe-pager--num-btn,
|
||
|
.vxe-pager--count {
|
||
|
min-width: 2.15em;
|
||
|
}
|
||
|
.vxe-pager--btn-wrapper {
|
||
|
list-style-type: none;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--jump-next {
|
||
|
&:hover {
|
||
|
.vxe-pager--jump-more-icon {
|
||
|
display: none;
|
||
|
}
|
||
|
.vxe-pager--jump-icon {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--jump-icon {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--jump-prev,
|
||
|
.vxe-pager--prev-btn,
|
||
|
.vxe-pager--next-btn,
|
||
|
.vxe-pager--jump-next,
|
||
|
.vxe-pager--num-btn {
|
||
|
text-align: center;
|
||
|
border-radius: $vxe-border-radius;
|
||
|
margin: 0 0.25em;
|
||
|
user-select: none;
|
||
|
&:not(.is--disabled) {
|
||
|
&:hover {
|
||
|
color: lighten($vxe-primary-color, 6%);
|
||
|
}
|
||
|
&.is--active,
|
||
|
&:focus {
|
||
|
color: $vxe-primary-color;
|
||
|
}
|
||
|
&:active {
|
||
|
color: darken($vxe-primary-color, 3%);
|
||
|
}
|
||
|
}
|
||
|
&.is--disabled {
|
||
|
cursor: no-drop;
|
||
|
color: $vxe-disabled-color;
|
||
|
&:hover {
|
||
|
color: $vxe-disabled-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--num-btn {
|
||
|
vertical-align: middle;
|
||
|
&.is--active {
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--sizes {
|
||
|
width: 7em;
|
||
|
text-align: center;
|
||
|
cursor: pointer;
|
||
|
& .vxe-input--inner {
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--count {
|
||
|
text-align: center;
|
||
|
& > span {
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
.vxe-pager--separator {
|
||
|
margin-right: 0.2em;
|
||
|
&:before {
|
||
|
content: "/";
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--jump .vxe-pager--goto {
|
||
|
border-radius: $vxe-border-radius;
|
||
|
border: 1px solid $vxe-input-border-color;
|
||
|
color: $vxe-font-color;
|
||
|
transition: border .2s ease-in-out;
|
||
|
padding: 0 0.4em;
|
||
|
&:focus {
|
||
|
border: 1px solid $vxe-primary-color;
|
||
|
outline: 0;
|
||
|
}
|
||
|
}
|
||
|
.vxe-pager--jump {
|
||
|
.vxe-pager--goto-text {
|
||
|
margin-right: 0.25em;
|
||
|
}
|
||
|
.vxe-pager--classifier-text {
|
||
|
margin-left: 0.25em;
|
||
|
}
|
||
|
.vxe-pager--goto {
|
||
|
width: 3.2em;
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.vxe-pager {
|
||
|
font-size: $vxe-font-size;
|
||
|
height: $vxe-table-row-height-default;
|
||
|
&.size--medium {
|
||
|
font-size: $vxe-font-size-medium;
|
||
|
height: $vxe-table-row-height-medium;
|
||
|
}
|
||
|
&.size--small {
|
||
|
font-size: $vxe-font-size-small;
|
||
|
height: $vxe-table-row-height-small;
|
||
|
}
|
||
|
&.size--mini {
|
||
|
font-size: $vxe-font-size-mini;
|
||
|
height: $vxe-table-row-height-mini;
|
||
|
}
|
||
|
}
|