Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 07:30:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(docs): swiper arrows fix on demo (#5654)

Browse source 
* feat: add mixin for swiper arrows styling
* refactor: apply mixin for swiper arrows
This commit is contained in:
Sasha Verbilo 2020-04-14 11:39:42 +03:00 • committed by Sergey Andrievskiy
parent 19dee297e0
commit 0882927354
3 changed files with 93 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

81
docs/app/@theme/styles/_swiper_ngx-admin.scss Normal file
View file

@ -0,0 +1,81 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@mixin swiper-navigation-arrows($config) {
$position: map-get($config, 'position');
$positionXl: map-get($config, 'positionXl');
.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: map-get($config, 'top');
&:hover {
box-shadow: nb-theme(shadow-hover-btn);
}
&:active {
box-shadow: nb-theme(shadow-active-btn);
}
&::after {
content: '';
}
}
.swiper-button-prev {
@if (type-of($position) == map) {
left: map-get($position, 'left');
} @else {
left: $position;
}
}
.swiper-button-next {
@if (type-of($position) == map) {
right: map-get($position, 'right');
} @else {
right: $position;
}
}
@include media-breakpoint-down(xl) {
.swiper-button-prev {
@if (type-of($positionXl) == map) {
left: map-get($positionXl, 'left');
} @else {
left: $positionXl;
}
}
.swiper-button-next {
@if (type-of($positionXl) == map) {
right: map-get($positionXl, 'right');
} @else {
right: $positionXl;
}
}
}
@include media-breakpoint-down(lg) {
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
@include media-breakpoint-down(is) {
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
}

54
docs/app/pages/home/reviews-section/reviews-section.component.scss
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%;
}

56
docs/app/pages/home/theme-section/theme-section.component.scss
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;
}