From ac846477e9b1e0c2e46651bfd231b6dd9a9b0d16 Mon Sep 17 00:00:00 2001
From: sashaqred <sashaqred@ya.ru>
Date: Tue, 14 Apr 2020 10:56:48 +0300
Subject: [PATCH] refactor: apply mixin for swiper arrows

---
 .../reviews-section.component.scss            | 54 ++----------------
 .../theme-section.component.scss              | 56 ++-----------------
 2 files changed, 12 insertions(+), 98 deletions(-)

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;
     }