/home/arranoyd/telegastro/wp-content/themes/dt-the7/css/static-less/paginator.less
/* #Paginator
================================================== */
.paginator {
position: relative;
margin: 30px 0 0 0;
z-index: 10;
.flex-display(@display: flex);
.flex-flow( row wrap);
.align-items(@align: center);
.justify-content(@justify: center);
}
.paginator:before {
content: "";
display: table;
}
.paginator:after {
content: "";
display: table;
clear: both;
}
.paginator:not(.paginator-more-button) a {
.box-sizing (border-box);
}
.paginator .disabled:hover {
cursor: default;
}
a,
span {
.paginator:not(.paginator-more-button) & {
position: relative;
display: inline-block;
padding: 1px 8px;
margin: 0 6px;
text-align: center;
text-decoration: none;
font-weight: bold;
&:after {
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
content: "";
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
&.disabled {
opacity: 0;
}
&.nav-next,
&.nav-prev {
padding: 0;
font-size: 14px;
line-height: 1;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
-webkit-transform: translateX(0);
transform: translateX(0);
}
&.nav-next:not(.disabled):hover {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
&.nav-prev:not(.disabled):hover {
-webkit-transform: translateX(-4px);
transform: translateX(-4px);
}
&.nav-next:after,
&.nav-prev:after {
display: none;
}
&.act:after,
&:hover:after {
opacity: 1;
}
}
}
.paginator .nav-prev,
.paginator .nav-next {
position: relative;
display: inline-block;
text-decoration: none;
}
/*Load more button*/
.paginator.paginator-more-button {
text-align: center;
.lazy-loading-mode & {
opacity: 0;
}
}
.justified-grid .paginator.paginator-more-button {
width: 100%;
}
.paginator .button-load-more,
.paginator .loading-ready {
position: relative;
display: inline-block;
float: none;
text-decoration: none;
}
.paginator .button-load-more {
.flex-display(@display: flex);
.align-items(@align: center);
.justify-content(@justify: center);
width: 220px;
height: 50px;
border: 2px solid;
.box-sizing (border-box);
-webkit-transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
& .stick {
display: none;
opacity: 0;
-webkit-transition: opacity 0.1s ease;
transition: opacity 0.1s ease;
}
& .button-caption {
display: block;
margin: 0;
font-weight: bold;
-webkit-transition: opacity 0.01s ease, color 0.2s ease;
transition: opacity 0.01s ease, color 0.2s ease;
&:before {
content: "\f13a";
margin-right: 5px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 14px;
line-height: 1;
}
}
&.animate-load,
&.button-lazy-loading {
width: 50px;
height: 50px;
.static-border-radius;
& .button-caption {
opacity: 0;
text-indent: -9999px;
}
& .stick {
display: block;
-webkit-animation: dt-spin 1s infinite linear 0.2s;
animation: dt-spin 1s infinite linear 0.2s;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
}
.dt-posts-preload.iso-preloader .dt-posts-preload-activity {
&:before {
border-color: transparent;
border-top-color: #fff;
border-right-color: #fff !important;
}
}
.iso-preloader .dt-posts-preload-activity:after {
display: none;
}
.stick:first-child,
.iso-preloader .dt-posts-preload-activity:before {
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
width: 50px;
height: 50px;
.static-border-radius(40px);
.box-sizing (border-box);
background-color: transparent;
border: 2px solid;
-webkit-animation: dt-spin 1s infinite linear 0.2s;
animation: dt-spin 1s infinite linear 0.2s;
}
.stick:first-child {
top: -2px;
left: -2px;
margin: 0;
}
@-webkit-keyframes dt-spin{
0% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: rotate(360deg);
}
}
@keyframes dt-spin{
0% {
opacity: 1;
}
100% {
opacity: 1;
transform: rotate(360deg);
}
}