WIP #4064 @7

diff --git a/web/app/themes/Usines/resources/assets/styles/common/layout.styl b/web/app/themes/Usines/resources/assets/styles/common/layout.styl
index b842935083926973bc697cd5e73f7c6a794b392c..577091d41e70d5e3e721c9b56fc8ea5813d32c44 100644 (file)
--- a/web/app/themes/Usines/resources/assets/styles/common/layout.styl
+++ b/web/app/themes/Usines/resources/assets/styles/common/layout.styl
@@ -16,32 +16,50 @@
     padding-left: 0
     padding-right: 0
 
-//.elementor-section-wrap > .elementor-section
-//  vertical-spacing()
-
 // Override default spacing between widgets
 .elementor-widget-wrap .elementor-widget:not(:last-child)
   constrain(margin-bottom, $vertical-gutter) // Set margin bottom to standard gutter
 
 // Get rid of default 10px padding around elements
-.elementor-column-gap-default > .elementor-column > .elementor-element-populated
+.elementor-container > .elementor-column > .elementor-element-populated
   padding: 0
 
-.elementor-section-boxed > .elementor-column-gap-extended
-  horizontal-spacing(-1.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below
-  > .elementor-column > .elementor-element-populated
-    horizontal-spacing(1.5vw)
-    padding-top: 0
-    padding-bottom: 0
-
-.elementor-section-boxed > .elementor-column-gap-wide
-  horizontal-spacing(-2.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below
-  > .elementor-column > .elementor-element-populated
-    horizontal-spacing(2.5vw)
-    padding-top: 0
-    padding-bottom: 0
-
-// Once columns have wrapped, remove padding for all
-+below($breakpoint-columns)
-  .elementor-container > .elementor-column > .elementor-element-populated
-    padding: 0 !important
+//=== Elementor Column Gaps
+// Ref: https://github.com/elementor/elementor/issues/4097#issuecomment-749111906
+
+.elementor-column-gap-narrow
+  > .elementor-column
+    &:not(:first-of-type)
+      margin-left: 10px
+    &:not(:last-of-type)
+      margin-right: 10px
+
+.elementor-column-gap-extended
+  > .elementor-column
+    &:not(:first-of-type)
+      constrain(margin-left, 1.5vw)
+    &:not(:last-of-type)
+      constrain(margin-right, 1.5vw)
+
+.elementor-column-gap-wide
+  > .elementor-column
+    &:not(:first-of-type)
+      constrain(margin-left, 2.5vw)
+    &:not(:last-of-type)
+      constrain(margin-right, 2.5vw)
+
+.elementor-column-gap-wider
+  > .elementor-column
+    &:not(:first-of-type)
+      constrain(margin-left, 3vw)
+    &:not(:last-of-type)
+      constrain(margin-right, 3vw)
+
+
+//========================================================
+
+// Once columns have wrapped, remove "gap" margins for all
+.elementor-container > .elementor-column
+  +below($breakpoint-columns)
+    margin-left: 0 !important
+    margin-right: 0 !important

diff --git a/web/app/themes/Usines/resources/assets/styles/components/sections.styl b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
index 0c772695bc7663e9683355c612f447f6ed736322..bb8da72f8098b32e3415ca34cfb7f757ab19866e 100644 (file)
--- a/web/app/themes/Usines/resources/assets/styles/components/sections.styl
+++ b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
@@ -1,5 +1,11 @@
 .elementor-section
 
+  .elementor-container
+    flex-wrap: nowrap // Override Elementor default because our column breakpoint is different
+
+    +below($breakpoint-columns)
+      flex-wrap: wrap
+
   //--- Columns responsiveness - stack all standard columns below breakpoint
   +below($breakpoint-columns)
     .elementor-column