From b5eae7ee6a57781d93befc08bf38527cf91807a8 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Tue, 21 Jan 2020 16:57:39 +0000
Subject: [PATCH] WordPress + Plugin updates. WIP #3329 @3

---
 .../assets/images/icons/instagram.svg         |   2 +-
 .../assets/styles/common/spacing.styl         | 177 ++++++++++++++++++
 .../resources/assets/styles/main.styl         |   3 +
 .../assets/styles/widgets/video-carousel.styl |   1 +
 4 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 wp-content/themes/physioassist/resources/assets/styles/common/spacing.styl

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 a6ca6388..02530276 100644
--- 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
index 00000000..40858d4d
--- /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 2d7f781e..bbb835fd 100644
--- 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 d5ee6e5a..f8dab2d4 100644
--- 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
-- 
2.39.5