amis/scss/components/_pagination.scss

124 lines
2.6 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Pagination {
display: inline-block;
padding-left: 0;
margin-bottom: px2rem(-10px);
border-radius: px2rem(4px);
> li {
2019-04-30 11:11:25 +08:00
display: inline;
> a,
> span {
2019-04-30 11:11:25 +08:00
user-select: none;
position: relative;
float: left;
text-decoration: none;
min-width: $Pagination-minWidth;
height: $Pagination-height;
border: 0;
line-height: $Pagination-height;
padding: $Pagination-padding;
text-align: center;
color: #666666;
border-radius: 0;
margin-left: 0;
font-size: $Pagination-fontSize;
}
> a:hover,
> span:hover,
> a:focus,
> span:focus {
2019-04-30 11:11:25 +08:00
background-color: transparent;
color: $primary;
}
}
> li.disabled {
> span,
> a {
2019-04-30 11:11:25 +08:00
cursor: not-allowed;
}
> a,
> span,
> a:hover,
> span:hover,
> a:focus,
> span:focus {
2019-04-30 11:11:25 +08:00
color: #cccccc;
}
}
> li.active {
> a,
> span,
> a:hover,
> span:hover,
> a:focus,
> span:focus {
2019-08-12 21:14:33 +08:00
background-color: $Pagination-onActive-backgroundColor;
color: $Pagination-onActive-color;
border: $Pagination-onActive-border;
2019-04-30 11:11:25 +08:00
}
}
2019-04-30 11:11:25 +08:00
&-prev,
&-next {
font-family: $Pagination-arrowVendor;
}
2019-04-30 11:11:25 +08:00
&-prev {
> span {
2019-04-30 11:11:25 +08:00
cursor: pointer;
2019-04-30 11:11:25 +08:00
&::before {
content: $Pagination-prevArrowContent;
}
}
}
2019-04-30 11:11:25 +08:00
&-ellipsis {
> a > span {
2019-04-30 11:11:25 +08:00
position: relative;
top: px2rem(-4px);
}
}
2019-04-30 11:11:25 +08:00
&-next {
> span {
2019-04-30 11:11:25 +08:00
cursor: pointer;
2019-04-30 11:11:25 +08:00
&::before {
content: $Pagination-nextArrowContent;
}
}
}
2019-04-30 11:11:25 +08:00
&-inputGroup {
display: inline-flex;
flex-wrap: nowrap;
2019-04-30 11:11:25 +08:00
.#{$ns}Pagination-input {
width: px2rem(50px);
height: $Pagination-height;
border: $borderWidth solid $borderColor;
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
padding: px2rem(5px) px2rem(10px);
2019-04-30 11:11:25 +08:00
&:focus {
outline: none;
border: $borderWidth solid $primary;
}
}
2019-04-30 11:11:25 +08:00
.#{$ns}Button {
height: $Pagination-height;
margin-left: px2rem(-1px);
border-radius: 0 $borderRadius $borderRadius 0;
padding: 0 px2rem(10px);
}
}
}