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

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

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 {
+  @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 {
     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%;
     }

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 {
+  @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 {
     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;
     }