You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.0 KiB
97 lines
2.0 KiB
@import '../abstracts/variables';
|
|
|
|
.pagination {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin: 0;
|
|
|
|
.pagination-item {
|
|
& > * {
|
|
height: 32px;
|
|
min-width: 32px;
|
|
margin: 0 3px;
|
|
padding: 0 6px;
|
|
text-align: center;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
:not(pagination-item-selected) > * {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.button {
|
|
line-height: normal;
|
|
}
|
|
|
|
.icon-button {
|
|
padding: 0;
|
|
}
|
|
|
|
&-rectangular .button {
|
|
border-radius: var(--default-borderradius);
|
|
}
|
|
|
|
.typography[disabled] {
|
|
color: var(--palette-action-disabled) !important;
|
|
}
|
|
}
|
|
|
|
&-outlined {
|
|
.pagination-item-selected {
|
|
.button-outlined-default {
|
|
background-color: var(--palette-action-default-hover)
|
|
}
|
|
|
|
@each $color in $palette-colors {
|
|
.button-outlined-#{$color} {
|
|
background-color: var(--palette-#{$color}-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-filled {
|
|
.pagination-item {
|
|
&:not(.pagination-item-selected) .button {
|
|
background-color: var(--palette-surface);
|
|
}
|
|
|
|
.button {
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-small {
|
|
.pagination-item {
|
|
& > * {
|
|
height: 26px;
|
|
min-width: 26px;
|
|
margin: 0 1px;
|
|
padding: 0 4px;
|
|
border-radius: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-large {
|
|
.pagination-item {
|
|
& > * {
|
|
height: 40px;
|
|
min-width: 40px;
|
|
padding: 0 10px;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-disable-elevation .pagination-item .button {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&-rtl .pagination-item .icon-root {
|
|
transform: scaleX(-1);
|
|
}
|
|
} |