mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
refactor: apply mixin for swiper arrows
This commit is contained in:
parent
83f1160180
commit
ac846477e9
2 changed files with 12 additions and 98 deletions
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue