From 6fff306824b97ace88b8692441aa655069fd3403 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 26 Mar 2020 12:04:19 +0000
Subject: [PATCH] Done #3524 @1.25

---
 .../physioassist/resources/assets/config.json |  2 +-
 .../styles/components/slick-carousel.styl     |  2 +
 .../assets/styles/components/swiper.styl      | 46 +++++++++++++++++++
 .../resources/assets/styles/main.styl         |  1 +
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/components/swiper.styl

diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json
index cbf5195d..b1adc13e 100644
--- a/wp-content/themes/physioassist/resources/assets/config.json
+++ b/wp-content/themes/physioassist/resources/assets/config.json
@@ -31,7 +31,7 @@
   },
   "publicPath": "/wp-content/themes/physioassist",
   "devUrl": "http://physioassist.test",
-  "proxyUrl": "http://stephen.local:63000",
+  "proxyUrl": "http://paris.cubedesigners.com:63000",
   "cacheBusting": "[name]_[hash:8]",
   "watch": [
     "app/**/*.php",
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl
index abe74044..7c37846d 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl
@@ -13,6 +13,8 @@
   .slick-slide
     outline: none
 
+  // Note: These arrow styles should also match those in swiper.styl
+  // The styles can't be shared because Slick and Swiper have different structures
   .slick-arrow, .slick-arrow:focus
     background: $colors.light-grey
     border-radius: 50%
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/swiper.styl b/wp-content/themes/physioassist/resources/assets/styles/components/swiper.styl
new file mode 100644
index 00000000..73a74366
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/swiper.styl
@@ -0,0 +1,46 @@
+//== Elementor Swiper overrides
+// Note: These arrow styles should also match those in slick-carousel.styl
+// The styles can't be shared because Slick and Swiper have different structures
+.elementor-swiper-button
+  background: $colors.light-grey
+  color: $colors.headings
+  border-radius: 50%
+  font-size: 56px
+  width: 1.25em
+  height: @width
+  align-items: center
+  justify-content: center
+  transition: all 0.2s ease-out
+
+  &:hover
+    background: $colors.headings
+    color: #fff
+
+  .eicon-chevron
+    &-left:before
+      content: '\e89f'
+    &-right:before
+      content: '\e89e'
+
+// Adjust width of container to make room for arrow buttons
+.elementor-arrows-position-outside
+  .swiper-container
+    width: calc(100% - 160px);
+
+    // On Smaller screens, push even closer to the edge to maximise Swiper content width
+    +below(768px)
+      width: calc(100% - 90px);
+
+      .elementor-swiper-button
+        font-size: 45px
+
+        &-prev
+          left: -25px
+        &-next
+          right: -25px
+
+    +below(500px)
+      width: calc(100% - 50px);
+
+      .elementor-swiper-button
+        font-size: 35px
diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl
index c7d0e6d1..04558b6c 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/main.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl
@@ -14,6 +14,7 @@
 @import '~lity/dist/lity.css'
 @import 'components/lity-lightbox'
 @import 'components/slick-carousel'
+@import 'components/swiper'
 @import 'components/headings'
 @import 'components/buttons'
 @import 'components/navigation'
-- 
2.39.5