From 0882927354222bc5dcede7449859686fc18baf19 Mon Sep 17 00:00:00 2001 From: Sasha Verbilo Date: Tue, 14 Apr 2020 11:39:42 +0300 Subject: [PATCH] fix(docs): swiper arrows fix on demo (#5654) * feat: add mixin for swiper arrows styling * refactor: apply mixin for swiper arrows --- docs/app/@theme/styles/_swiper_ngx-admin.scss | 81 +++++++++++++++++++ .../reviews-section.component.scss | 54 ++----------- .../theme-section.component.scss | 56 ++----------- 3 files changed, 93 insertions(+), 98 deletions(-) create mode 100644 docs/app/@theme/styles/_swiper_ngx-admin.scss diff --git a/docs/app/@theme/styles/_swiper_ngx-admin.scss b/docs/app/@theme/styles/_swiper_ngx-admin.scss new file mode 100644 index 00000000..6d73dcab --- /dev/null +++ b/docs/app/@theme/styles/_swiper_ngx-admin.scss @@ -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; + } + } +} diff --git a/docs/app/pages/home/reviews-section/reviews-section.component.scss b/docs/app/pages/home/reviews-section/reviews-section.component.scss index 962a71a3..13074a0e 100644 --- a/docs/app/pages/home/reviews-section/reviews-section.component.scss +++ b/docs/app/pages/home/reviews-section/reviews-section.component.scss @@ -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%; } diff --git a/docs/app/pages/home/theme-section/theme-section.component.scss b/docs/app/pages/home/theme-section/theme-section.component.scss index 79541d0d..bab36fbc 100644 --- a/docs/app/pages/home/theme-section/theme-section.component.scss +++ b/docs/app/pages/home/theme-section/theme-section.component.scss @@ -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; }