refactor: apply mixin for swiper arrows

This commit is contained in:
sashaqred 2020-04-14 10:56:48 +03:00
parent 83f1160180
commit ac846477e9
2 changed files with 12 additions and 98 deletions

View file

@ -5,6 +5,7 @@
*/
@import '../../../@theme/styles/themes';
@import '../../../@theme/styles/swiper_ngx-admin';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
@ -100,34 +101,11 @@
position: static;
}
.swiper-button-prev, .swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
background-image: none;
height: 5rem;
width: 5rem;
border-radius: 50%;
background-color: #ffffff;
box-shadow: nb-theme(shadow-default);
top: 9rem;
&:hover {
box-shadow: nb-theme(shadow-hover-btn);
}
&:active {
box-shadow: nb-theme(shadow-active-btn);
}
}
.swiper-button-prev {
left: 8.125rem;
}
.swiper-button-next {
right: 8.125rem;
}
@include swiper-navigation-arrows((
top: 9rem,
position: 8.125rem,
positionXl: 5%
));
.swiper-pagination {
top: 110%;
@ -145,22 +123,6 @@
}
}
@include media-breakpoint-down(xl) {
.swiper-button-prev {
left: 5%;
}
.swiper-button-next {
right: 5%;
}
}
@include media-breakpoint-down(lg) {
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
@include media-breakpoint-down(is) {
padding-top: 4rem;
padding-bottom: 4.375rem;
@ -173,10 +135,6 @@
top: 108%;
}
.swiper-button-prev, .swiper-button-next {
display: none;
}
.swiper-slide {
width: 80%;
}

View file

@ -5,6 +5,7 @@
*/
@import '../../../@theme/styles/themes';
@import '../../../@theme/styles/swiper_ngx-admin';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
@ -36,38 +37,11 @@
padding-top: 4.125rem;
}
.swiper-button-prev, .swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
background-image: none;
height: 5rem;
width: 5rem;
border-radius: 50%;
background-color: #ffffff;
box-shadow: nb-theme(shadow-default);
top: 22.625rem;
&:hover {
box-shadow: nb-theme(shadow-hover-btn);
}
&:active {
box-shadow: nb-theme(shadow-active-btn);
}
&::after {
content: '';
}
}
.swiper-button-prev {
left: 18%;
}
.swiper-button-next {
right: 18%;
}
@include swiper-navigation-arrows((
top: 22.625rem,
position: 18%,
positionXl: 10%
));
.swiper-pagination {
display: inline-flex;
@ -140,16 +114,6 @@
}
}
@include media-breakpoint-down(xl) {
.swiper-button-prev {
left: 10%;
}
.swiper-button-next {
right: 10%;
}
}
@include media-breakpoint-down(xxl) {
.image-container {
width: 64.875rem;
@ -164,10 +128,6 @@
width: 46.875rem;
height: 100%;
}
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
@include media-breakpoint-up(md) {
@ -224,10 +184,6 @@
}
}
.swiper-button-prev, .swiper-button-next {
display: none;
}
.btn-demo {
display: none;
}