amis2/scss/components/_pagination.scss

121 lines
2.2 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Pagination {
2019-12-06 09:58:08 +08:00
display: inline-block;
padding-left: 0;
2020-06-24 15:59:12 +08:00
padding: 0;
margin: 0 0 px2rem(-10px);
2019-12-06 09:58:08 +08:00
border-radius: px2rem(4px);
> li {
display: inline;
> a,
> span {
user-select: none;
2020-06-16 20:23:42 +08:00
cursor: pointer;
2019-12-06 09:58:08 +08:00
position: relative;
float: left;
text-decoration: none;
min-width: var(--Pagination-minWidth);
height: var(--Pagination-height);
2019-12-06 09:58:08 +08:00
border: 0;
line-height: var(--Pagination-height);
padding: var(--Pagination-padding);
2019-12-06 09:58:08 +08:00
text-align: center;
color: #666666;
border-radius: 0;
margin-left: 0;
font-size: var(--Pagination-fontSize);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
> a:hover,
> span:hover,
> a:focus,
> span:focus {
background: transparent;
color: var(--primary);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2020-06-08 15:49:45 +08:00
> li.is-disabled {
2019-12-06 09:58:08 +08:00
> span,
> a {
cursor: not-allowed;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
> a,
> span,
> a:hover,
> span:hover,
> a:focus,
> span:focus {
color: #cccccc;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2020-06-08 15:49:45 +08:00
> li.is-active {
2019-12-06 09:58:08 +08:00
> a,
> span,
> a:hover,
> span:hover,
> a:focus,
> span:focus {
background: var(--Pagination-onActive-backgroundColor);
color: var(--Pagination-onActive-color);
border: var(--Pagination-onActive-border);
2019-12-06 09:58:08 +08:00
}
}
&-prev {
> span {
cursor: pointer;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-12-06 09:58:08 +08:00
&-ellipsis {
> a > span {
position: relative;
top: px2rem(-4px);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-12-06 09:58:08 +08:00
&-next {
> span {
cursor: pointer;
}
}
&-inputGroup {
display: inline-flex;
flex-wrap: nowrap;
.#{$ns}Pagination-input {
width: px2rem(50px);
height: var(--Pagination-height);
border: var(--borderWidth) solid var(--borderColor);
border-top-left-radius: var(--borderRadius);
border-bottom-left-radius: var(--borderRadius);
2019-12-06 09:58:08 +08:00
padding: px2rem(5px) px2rem(10px);
&:focus {
outline: none;
border: var(--borderWidth) solid var(--primary);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
.#{$ns}Button {
height: var(--Pagination-height);
2019-12-06 09:58:08 +08:00
margin-left: px2rem(-1px);
border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
2019-12-06 09:58:08 +08:00
padding: 0 px2rem(10px);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
}
.#{$ns}PaginationWrapper-pager {
&:first-child {
2020-12-21 10:16:25 +08:00
margin-bottom: var(--gap-sm);
}
text-align: right;
}