// Pagination
.pagination {
.page-item {
&.active {
.page-link {
color: $white-base;
background-color: $primary-color;
border-radius: $border-radius-base;
box-shadow: $z-depth-1;
transition: $pagination-active-transition;
&:hover {
background-color: $primary-color;
}
}
}
&.disabled {
.page-link {
color: $pagination-page-item-disabled-color;
}
}
.page-link {
font-size: $pagination-page-link-font-size;
color: $pagination-page-link-color;
background-color: transparent;
border: 0;
outline: 0;
transition: $pagination-page-link-transition;
&:hover {
background-color: $pagination-page-link-hover-bg-color;
border-radius: $border-radius-base;
transition: $pagination-page-link-transition;
}
&:focus {
background-color: transparent;
box-shadow: none;
}
}
}
&.pagination-lg {
.page-item {
.page-link {
font-size: $pagination-page-link-font-size-lg;
}
}
}
&.pagination-sm {
.page-item {
.page-link {
font-size: $pagination-page-link-font-size-sm;
}
}
}
&.pagination-circle {
.page-item {
.page-link {
margin-right: $pagination-circle-margin-x;
margin-left: $pagination-circle-margin-x;
border-radius: $pagination-circle-border-radius;
&:hover {
border-radius: $pagination-circle-border-radius;
}
}
&.active {
.page-link {
border-radius: $pagination-circle-border-radius;
}
}
}
}
@each $name, $color in $pagination-colors {
&.pg-#{$name} {
.page-item {
&.active {
.page-link {
background-color: $color;
&:hover {
background-color: $color;
}
}
}
}
}
}
}
|