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/themes';
@import '../../../@theme/styles/swiper_ngx-admin';
@import '~@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() { @include nb-install-component() {
@ -100,34 +101,11 @@
position: static; position: static;
} }
.swiper-button-prev, .swiper-button-next { @include swiper-navigation-arrows((
display: flex; top: 9rem,
justify-content: center; position: 8.125rem,
align-items: center; positionXl: 5%
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;
}
.swiper-pagination { .swiper-pagination {
top: 110%; 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) { @include media-breakpoint-down(is) {
padding-top: 4rem; padding-top: 4rem;
padding-bottom: 4.375rem; padding-bottom: 4.375rem;
@ -173,10 +135,6 @@
top: 108%; top: 108%;
} }
.swiper-button-prev, .swiper-button-next {
display: none;
}
.swiper-slide { .swiper-slide {
width: 80%; width: 80%;
} }

View file

@ -5,6 +5,7 @@
*/ */
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@import '../../../@theme/styles/swiper_ngx-admin';
@import '~@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() { @include nb-install-component() {
@ -36,38 +37,11 @@
padding-top: 4.125rem; padding-top: 4.125rem;
} }
.swiper-button-prev, .swiper-button-next { @include swiper-navigation-arrows((
display: flex; top: 22.625rem,
justify-content: center; position: 18%,
align-items: center; positionXl: 10%
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%;
}
.swiper-pagination { .swiper-pagination {
display: inline-flex; 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) { @include media-breakpoint-down(xxl) {
.image-container { .image-container {
width: 64.875rem; width: 64.875rem;
@ -164,10 +128,6 @@
width: 46.875rem; width: 46.875rem;
height: 100%; height: 100%;
} }
.swiper-button-prev, .swiper-button-next {
display: none;
}
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@ -224,10 +184,6 @@
} }
} }
.swiper-button-prev, .swiper-button-next {
display: none;
}
.btn-demo { .btn-demo {
display: none; display: none;
} }