ten-design-vue
Version:
ten-vue
92 lines (78 loc) • 1.53 kB
text/less
/* dependencies button,icon */
@import "../vars.less";
.ten-pagination {
&__btn,
&__page-item {
min-width: @button-height-small;
padding: 0;
font-size: 14px;
vertical-align: top;
transition: none;
&--active {
border-color: @primary-color;
background-color: @primary-color;
color: #fff;
&:hover {
color: #fff;
}
&:focus {
color: #fff;
}
}
& + .ten-pagination__page-item {
margin-left: @pagination-item-margin-left;
}
}
&__btn {
&-wrapper {
display: inline-block;
vertical-align: middle;
font-size: 0;
}
&-prev-more,
&-next-more {
border: none;
transform: rotate(90deg);
background-color: transparent ;
}
&-prev-more,
&-next-more,
&-next,
&-prev {
color: @icon-color;
}
}
&__page-size-selector {
width: 98px;
margin-left: 16px;
}
&__jumper {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
&-input {
width: 48px;
margin: 0 4px;
margin-top: @pagination-item-margin-top;
}
}
&__simple {
display: inline-block;
margin: 0 4px;
font-size: 0;
&-input {
width: 48px;
text-align: center;
vertical-align: top;
}
&-total {
margin: 0 4px;
font-size: @text-level-1-size;
line-height: @button-height-small;
vertical-align: middle;
}
}
&__total {
margin-right: 10px;
}
}