WordPress + Plugin updates. WIP #3329 @3

diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/instagram.svg b/wp-content/themes/physioassist/resources/assets/images/icons/instagram.svg
index a6ca6388137505049651fc0a47e7b7e8f4d21bc4..02530276e2a9ba1a8f07bf01b0fe7ea024f2c3d4 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/images/icons/instagram.svg
+++ b/wp-content/themes/physioassist/resources/assets/images/icons/instagram.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-        width="156.72px" height="156.72px" viewBox="0 0 156.72 156.72" style="enable-background:new 0 0 156.72 156.72;"
+        viewBox="0 0 156.72 156.72" style="enable-background:new 0 0 156.72 156.72;"
         xml:space="preserve">
 <style type="text/css">
        .st0{fill:#FFFFFF;}

diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/spacing.styl b/wp-content/themes/physioassist/resources/assets/styles/common/spacing.styl
new file mode 100644 (file)
index 0000000..40858d4
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/spacing.styl
@@ -0,0 +1,177 @@
+// Generate utility classes for padding/margin based on vw units
+// This will generate classes like pt-1v, pt-2v, pr-1v etc.
+
+$vw-spacing = {
+  '1': 2.5vw,
+  '2': 5vw,
+  '3': 7.5vw,
+  '4': 10vw,
+  '5': 12.5vw,
+}
+
+$sides = {
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+  x: horizontal, // special case for both left & right padding
+  y: vertical, // special case for both top & bottom padding
+}
+
+$responsive-variants = {
+  '*': 0, // Unprefixed version
+  'sm': $breakpoint-layout-squares // sm:xxxx variations
+}
+
+//=====================================================
+
+for screenID, screenBreakpoint in $responsive-variants
+
+  screenPrefix = (screenID == '*') ? '' : screenID + '\:'
+
+  for counter, vwAmount in $vw-spacing
+
+    // First, generate classes for all sides + grid gaps...
+    /*
+    // Padding (p-1v, p-2v etc)
+    .{screenPrefix}p-{counter}v
+      constrain(padding, vwAmount)
+
+    // Margins (m-1v, m-2v etc)
+    .m-{counter}v
+      constrain(margin, vwAmount)
+
+    // Negative margins (-m-1v, -m-2v etc)
+    .-m-{counter}v
+      constrain(margin, - vwAmount)
+    */
+
+
+    // Next, generate classes for individual sides
+    for sideAbbreviation, side in $sides
+
+      // Padding utilities (pt, pr, pb, pl, px, py)
+      .{screenPrefix}p{sideAbbreviation}-{counter}v
+        $property = s('padding-%s', side)
+
+        if (screenBreakpoint == 0) {
+
+          if (side is 'horizontal') {
+            horizontal-spacing(vwAmount)
+          } else if (side is 'vertical') {
+            vertical-spacing(vwAmount)
+          } else {
+            constrain($property, vwAmount)
+          }
+
+        } else {
+
+          if (side is 'horizontal') {
+            +below(screenBreakpoint) {
+              padding-left: vwAmount
+              padding-right: vwAmount
+            }
+          } else if (side is 'vertical') {
+            +below(screenBreakpoint) {
+              padding-top: vwAmount
+              padding-bottom: vwAmount
+            }
+          } else {
+            +below(screenBreakpoint) {
+              {$property}: vwAmount
+            }
+          }
+        }
+
+      // Margin utilities (mt, mr, mb, ml, mx, my)
+      .{screenPrefix}m{sideAbbreviation}-{counter}v
+        $property = s('margin-%s', side)
+
+        if (screenBreakpoint == 0) {
+
+          if (side is 'horizontal') {
+            horizontal-spacing(vwAmount)
+          } else if (side is 'vertical') {
+            vertical-spacing(vwAmount)
+          } else {
+            constrain($property, vwAmount)
+          }
+
+        } else {
+
+          if (side is 'horizontal') {
+            +below(screenBreakpoint) {
+              margin-left: vwAmount
+              margin-right: vwAmount
+            }
+          } else if (side is 'vertical') {
+            +below(screenBreakpoint) {
+              margin-top: vwAmount
+              margin-bottom: vwAmount
+            }
+          } else {
+            +below(screenBreakpoint) {
+              {$property}: vwAmount
+            }
+          }
+        }
+
+      // Negative margin utilities (-mt, -mr, -mb, -ml, -mx, -my)
+      .{screenPrefix}-m{sideAbbreviation}-{counter}v
+        $property = s('margin-%s', side)
+
+        if (screenBreakpoint == 0) {
+
+          if (side is 'horizontal') {
+            horizontal-spacing(- vwAmount)
+          } else if (side is 'vertical') {
+            vertical-spacing(- vwAmount)
+          } else {
+            constrain($property, - vwAmount)
+          }
+
+        } else {
+
+          if (side is 'horizontal') {
+            +below(screenBreakpoint) {
+              margin-left: - vwAmount
+              margin-right: - vwAmount
+            }
+          } else if (side is 'vertical') {
+            +below(screenBreakpoint) {
+              margin-top: - vwAmount
+              margin-bottom: - vwAmount
+            }
+          } else {
+            +below(screenBreakpoint) {
+              {$property}: - vwAmount
+            }
+          }
+        }
+
+
+//=====================================================
+
+// Generate all the zero variations (eg. pt-0, pb-0, sm:pt-0 etc)
+for screenID, screenBreakpoint in $responsive-variants
+
+  screenPrefix = (screenID == '*') ? '' : screenID + '\:'
+
+  for sideAbbreviation, side in $sides
+    $property-padding = s('padding-%s', side)
+    $property-margin = s('margin-%s', side)
+
+    if (screenBreakpoint == 0)
+      .{screenPrefix}p{sideAbbreviation}-0
+        {$property-padding}: 0
+
+      .{screenPrefix}m{sideAbbreviation}-0
+        {$property-margin}: 0
+
+    else
+      +below(screenBreakpoint)
+        .{screenPrefix}p{sideAbbreviation}-0
+          {$property-padding}: 0
+
+        .{screenPrefix}m{sideAbbreviation}-0
+          {$property-margin}: 0

diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl
index 2d7f781e1a2c27f57107411b1b6c53f98f464c28..bbb835fd7f823969b4be80c768b9ef74eadb21ef 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/main.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl
@@ -31,3 +31,6 @@
 @import 'widgets/*'
 
 @import 'pages/*'
+
+// Allow spacing classes to override others defined here
+@import 'common/spacing'

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 d5ee6e5af2b36584e38a77e746211c96861dbbaa..f8dab2d41e05c7aec971d205251386c405a495e5 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
@@ -40,6 +40,7 @@
 // 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