first commit
This commit is contained in:
226
resources/assets/vendor/scss/_bootstrap-extended/_pagination.scss
vendored
Normal file
226
resources/assets/vendor/scss/_bootstrap-extended/_pagination.scss
vendored
Normal file
@ -0,0 +1,226 @@
|
||||
// Pagination
|
||||
// *******************************************************************************
|
||||
|
||||
// Pagination Mixins
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color != primary and $color != light {
|
||||
@include template-pagination-variant('.pagination-#{$color}', $value);
|
||||
@include template-pagination-outline-variant('.pagination-outline-#{$color}', $value);
|
||||
}
|
||||
}
|
||||
// Pagination next, prev, first & last css padding
|
||||
.page-item {
|
||||
&.first,
|
||||
&.last,
|
||||
&.next,
|
||||
&.prev,
|
||||
&.previous {
|
||||
.page-link {
|
||||
padding: $pagination-padding-y - 0.043rem $pagination-padding-x - 0.067rem;
|
||||
}
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
.page-link {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
.page-item .page-link {
|
||||
opacity: $pagination-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination basic style
|
||||
.page-link,
|
||||
.page-link > a {
|
||||
@include border-radius($border-radius);
|
||||
|
||||
text-align: center;
|
||||
min-width: calc(
|
||||
#{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-x * 1.923)} + calc(#{$pagination-border-width} * 2)'}
|
||||
);
|
||||
min-height: calc(
|
||||
#{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + calc(#{$pagination-border-width} * 2)'}
|
||||
);
|
||||
|
||||
&:focus {
|
||||
color: $pagination-hover-color;
|
||||
}
|
||||
display: inline-flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Add spacing between pagination items
|
||||
.page-item + .page-item .page-link,
|
||||
.pagination li + li > a:not(.page-link) {
|
||||
.pagination-sm & {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.pagination-lg & {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Removed border from default pagination and set line-height of icons
|
||||
.pagination {
|
||||
&:not([class*='pagination-outline-']) {
|
||||
.page-link {
|
||||
border-color: transparent;
|
||||
}
|
||||
& .page-item.active .waves-ripple {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
&[class*='pagination-outline-'] {
|
||||
.page-item.active .page-link {
|
||||
box-shadow: none;
|
||||
}
|
||||
.page-item:not(.active) .page-link,
|
||||
.pagination li > a:not(.page-link) {
|
||||
background-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba-to-hex(rgba($black, 0.06), $rgba-to-hex-bg);
|
||||
border-color: rgba-to-hex(rgba($black, 0.22), $rgba-to-hex-bg);
|
||||
color: $headings-color;
|
||||
}
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($black, 0.3) 0,
|
||||
rgba($black, 0.4) 40%,
|
||||
rgba($black, 0.5) 50%,
|
||||
rgba($black, 0.6) 60%,
|
||||
rgba($black, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-link.btn-primary {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Pagination shape rounded & Square
|
||||
.pagination {
|
||||
&.pagination-square .page-item a {
|
||||
@include border-radius(0);
|
||||
}
|
||||
&.pagination-round .page-item a {
|
||||
@include border-radius(50%);
|
||||
}
|
||||
&.pagination-rounded .page-item a {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
&.pagination-sm.pagination-rounded .page-item a {
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
&.pagination-lg.pagination-rounded .page-item a {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing
|
||||
// *******************************************************************************
|
||||
|
||||
// Pagination Large
|
||||
.pagination-lg .page-link,
|
||||
.pagination-lg > li > a:not(.page-link) {
|
||||
min-width: calc(
|
||||
#{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-x-lg * 1.615)} + calc(#{$pagination-border-width} * 2)'}
|
||||
);
|
||||
min-height: calc(
|
||||
#{'#{($font-size-base * $pagination-line-height) + ($pagination-padding-y-lg * 2.33)} + calc(#{$pagination-border-width} * 2)'}
|
||||
);
|
||||
}
|
||||
|
||||
// Pagination Small
|
||||
.pagination-sm .page-link,
|
||||
.pagination-sm > li > a:not(.page-link) {
|
||||
min-width: calc(
|
||||
#{'#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)'}
|
||||
);
|
||||
min-height: calc(
|
||||
#{'#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)'}
|
||||
);
|
||||
}
|
||||
.pagination-sm > .page-item {
|
||||
&.first,
|
||||
&.last,
|
||||
&.next,
|
||||
&.prev,
|
||||
&.previous {
|
||||
.page-link {
|
||||
padding: $pagination-padding-y-sm - 0.1055rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL pagination
|
||||
// *******************************************************************************
|
||||
|
||||
@include rtl-only {
|
||||
.pagination {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Add spacing between pagination items
|
||||
.page-item + .page-item .page-link,
|
||||
.pagination li + li > a:not(.page-link) {
|
||||
margin-left: 0;
|
||||
margin-right: $pagination-margin-start;
|
||||
.pagination-sm & {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.pagination-lg & {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&.first,
|
||||
&.last,
|
||||
&.next,
|
||||
&.prev,
|
||||
&.previous {
|
||||
.page-link {
|
||||
i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-layout-only {
|
||||
.pagination[class*='pagination-outline-'] {
|
||||
.page-item .page-link,
|
||||
.pagination li > a:not(.page-link) {
|
||||
background-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba-to-hex(rgba($base, 0.06), $rgba-to-hex-bg);
|
||||
border-color: rgba-to-hex(rgba($base, 0.22), $rgba-to-hex-bg);
|
||||
}
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba(#000, 0.3) 0,
|
||||
rgba(#000, 0.4) 40%,
|
||||
rgba(#000, 0.5) 50%,
|
||||
rgba(#000, 0.6) 60%,
|
||||
rgba(#000, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user