feat: add viewport-(width/height) less functions

eea · Mar 28, 2023 · 68300a3 · 68300a3
1 parent 03064ec
commit 68300a3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 6 deletions.
diff --git a/theme/plugins.js b/theme/plugins.js
@@ -0,0 +1,41 @@
+module.exports = {
+  install(less, pluginManager, functions) {
+    functions.add('vw', function (percentage) {
+      return new less.tree.Call('calc', [
+        new less.tree.Operation(
+          '*',
+          [
+            new less.tree.Call('var', [
+              new less.tree.UnicodeDescriptor('--vw'),
+              new less.tree.Dimension(
+                1,
+                new less.tree.Unit(['vw'], null, 'vw'),
+              ),
+            ]),
+            percentage,
+          ],
+          true,
+        ),
+      ]);
+    });
+
+    functions.add('vh', function (percentage) {
+      return new less.tree.Call('calc', [
+        new less.tree.Operation(
+          '*',
+          [
+            new less.tree.Call('var', [
+              new less.tree.UnicodeDescriptor('--vh'),
+              new less.tree.Dimension(
+                1,
+                new less.tree.Unit(['vh'], null, 'vh'),
+              ),
+            ]),
+            percentage,
+          ],
+          true,
+        ),
+      ]);
+    });
+  },
+};
diff --git a/theme/theme.less b/theme/theme.less
@@ -10,6 +10,8 @@
 
 @themesFolderEEA: '~eea-volto-themes';
 
+@plugin "./plugins";
+
 /*--------------------
    Site Variables
 ---------------------*/

diff --git a/theme/themes/eea/elements/container.overrides b/theme/themes/eea/elements/container.overrides
@@ -143,14 +143,14 @@ body {
 .full-width {
   @toolbarWidthCSS: var(--toolbar-width, 0px);
   @sidebarWidthCSS: var(--sidebar-width, 0px);
-  @scrollbarWidthCSS: var(--scrollbar-width, @scrollbarWidth);
+  @halfWidth: vw(50);
   position: relative;
-  width: calc(100vw - @toolbarWidthCSS - @sidebarWidthCSS - @scrollbarWidthCSS) !important;
-  right: 50%;
-  left: 50%;
+  width: calc(vw(100) - @toolbarWidthCSS - @sidebarWidthCSS) !important;
+  right: 50% !important;
+  left: 50% !important;
   max-width: initial !important;
-  margin-left: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
-  margin-right: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
+  margin-left: calc(-1 * @halfWidth + (@toolbarWidthCSS + @sidebarWidthCSS) / 2) !important;
+  margin-right: calc(-1 * @halfWidth + (@toolbarWidthCSS + @sidebarWidthCSS) / 2) !important;
 }
 
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {

diff --git a/theme/themes/eea/globals/site.overrides b/theme/themes/eea/globals/site.overrides
@@ -24,6 +24,7 @@ h2, h3, h4, h5, h6 {
 
 .content-area {
   color: @contentAreaColor;
+  overflow-x: hidden;
 }
 
 [id="page-document"] > * {