Responsive adjustments + tidy up. Wait #3470 @2.5

diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
index 7a7bb327b7e2c62a8c2cbcc0510046168dc8e5d5..d9f94b044459c9e118617ebef898c189563b55ee 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl
@@ -102,3 +102,8 @@ p:not(:last-of-type)
     // Override text colour (previously only for home, now it's white in all uses)
     path, rect
       fill: #fff
+
+
+//-- Elementor Lightbox customisations
+.dialog-type-lightbox
+  background-color: rgba($colors.dark-blue, 0.9)

diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl b/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl
index 092d2068266117b3c3cef8c3475cb3d72a0d47e4..911c83b7ee8f45bd4a533f342c7126a7b3213f9b 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/mixins.styl
@@ -12,6 +12,15 @@ constrain(property, value = $horizontal-gutter, max-width = $content-max-width)
       {property}: $max
     }
   }
+
+  // Prevent vw / % units from getting too small
+  +below(700px) {
+    // Only do this if we are dealing with a percentage or vw unit
+    if (unit(value) is '%' || unit(value) is 'vw') {
+      $min = 700px * unit(value / 100, '') // Convert percentage to a decimal
+      {property}: round($min)
+    }
+  }
 }
 
 // Apply percentage based vertical padding - defaults to global gutter value if nothing passed

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
new file mode 100644 (file)
index 0000000..573b592
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/slick-carousel.styl
@@ -0,0 +1,76 @@
+//=== Shared Slick overrides
+.slick-slider
+  padding: 0 80px
+  overflow-x: hidden // For some reason on smaller screens, the right arrow causes a horizontal scroll
+
+  +below(768px)
+    padding: 0 60px
+    margin: 0 -25px // Give a bit more space to content even though this pushes arrows closer to edges
+  +below(500px)
+    padding: 0 40px
+
+
+  .slick-slide
+    outline: none
+
+  .slick-arrow, .slick-arrow:focus
+    background: $colors.light-grey
+    border-radius: 50%
+    font-size: 56px
+    line-height: 1.25
+    width: 1.25em
+    height: @width
+    text-align: center
+    transition: all 0.2s ease-out
+
+    +below(768px)
+      font-size: 45px
+    +below(500px)
+      font-size: 35px
+
+    &:before
+      display: inline-block
+      color: $colors.headings
+      font-size: 1em
+      opacity: 1
+      transition: inherit
+      position: relative
+      top: -0.02em
+
+    &:hover
+      background: $colors.headings
+      &:before
+        color: #fff
+
+
+  .slick-prev
+    left: 0
+  .slick-next
+    right: 0
+
+
+  ul.slick-dots
+    position: relative
+    bottom: 0
+    white-space: nowrap
+    constrain(margin-top, 2.5vw)
+
+    li
+      &:not(:last-child)
+        margin-right: 11px
+
+      button
+        width: 18px
+        height: @width
+
+        &:before
+          content: ''
+          width: 100%
+          height: @width
+          border-radius: 50%
+          background-color: #dbdcdf
+          opacity: 1 !important
+
+      &.slick-active
+        button:before
+          background-color: #1f8ccc

diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl
index 3e85e4ae5d6cbbf072abb167b954f72c475a2071..c7d0e6d15f807c356b2cde5b54668c30caa20b29 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/main.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl
@@ -13,7 +13,7 @@
 
 @import '~lity/dist/lity.css'
 @import 'components/lity-lightbox'
-// @import 'components/svg'
+@import 'components/slick-carousel'
 @import 'components/headings'
 @import 'components/buttons'
 @import 'components/navigation'

diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl
index 82e5c257021433530e3dbb1b4a018ddc174eea00..d80dc84d490a3f97882c5d0e8c6474997e50034f 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/resource-carousel.styl
@@ -1,8 +1,14 @@
+$breakpoint-resource-carousel = 500px
+
 .resource-carousel
 
   &-item-content
     display: flex
 
+    +below($breakpoint-resource-carousel)
+      flex-wrap: wrap
+      text-align: center
+
   &-image
     flex: 0 1 auto
     display: block
@@ -10,9 +16,11 @@
     max-width: 35% !important
     box-shadow: -4px 6px 10px -2px rgba(0,0,0,0.4) !important
     margin-left: 30px !important
+    margin-bottom: 20px !important // Slick has overflow-hidden so we need this to stop drop-shadow being cropped
 
-    +below(680px)
-      margin-left: 0
+    +below($breakpoint-resource-carousel)
+      max-width: none !important
+      margin: 0 auto 20px !important
 
   &-text
     flex: 1 1 auto
@@ -28,11 +36,14 @@
     line-height: 1.2
 
   &-link
-    display: block
+    display: inline-block
     position: relative
     margin-top: 1.4em
     padding-left: 1em
 
+    +below($breakpoint-resource-carousel)
+      margin-top: 0
+
     svg
       position: absolute
       top: 0.425em

diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl
index d582679bf7fbf8616c640cb06b03ece4789f9f13..6f00e4622731cdd757fd7cf87d55106c5e7ac051 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl
@@ -46,85 +46,3 @@
 
     &-details
       color: $colors.sub-headings
-
-
-// Slick overrides
-.slick-slider
-  padding: 0 80px
-  overflow-x: hidden // For some reason on smaller screens, the right arrow causes a horizontal scroll
-
-  +below(768px)
-    padding: 0 60px
-  +below(500px)
-    padding: 0 40px
-
-
-  .slick-slide
-    outline: none
-
-  .slick-arrow, .slick-arrow:focus
-    width: auto
-    background: $colors.light-grey
-    border-radius: 50%
-    font-size: 56px
-    line-height: 1.25
-    width: 1.25em
-    height: @width
-    text-align: center
-    transition: all 0.2s ease-out
-
-    +below(768px)
-      font-size: 45px
-    +below(500px)
-      font-size: 35px
-
-    &:before
-      display: inline-block
-      color: $colors.headings
-      font-size: 1em
-      opacity: 1
-      transition: inherit
-      position: relative
-      top: -0.02em
-
-    &:hover
-      background: $colors.headings
-      &:before
-        color: #fff
-
-
-  .slick-prev
-    left: 0
-  .slick-next
-    right: 0
-
-
-  ul.slick-dots
-    position: relative
-    bottom: 0
-    constrain(margin-top, 2.5vw)
-
-    li
-      &:not(:last-child)
-        margin-right: 11px
-
-      button
-        width: 18px
-        height: @width
-
-        &:before
-          content: ''
-          width: 100%
-          height: @width
-          border-radius: 50%
-          background-color: #dbdcdf
-          opacity: 1 !important
-
-      &.slick-active
-        button:before
-          background-color: #1f8ccc
-
-
-//=== Elementor Lightbox customisations
-.dialog-type-lightbox
-  background-color: rgba($colors.dark-blue, 0.9)