Done #3524 @1.25

diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json
index cbf5195d59b1d6ad85a106617be526c64da68f9f..b1adc13ee2e2a14250a40e5e7506fabe6d2f7af1 100644 (file)
--- 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 abe74044d029d0e6112ef871d568a76756514ab7..7c37846d113805217c75938fb7a98924f4f1551d 100644 (file)
--- 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 (file)
index 0000000..73a7436
--- /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 c7d0e6d15f807c356b2cde5b54668c30caa20b29..04558b6c8a50424b56c625186dc2b8b7161f17c2 100644 (file)
--- 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'