From e81ea6e70e8b26c1d3edcb2ca4ebb17f8e16d7de Mon Sep 17 00:00:00 2001
From: Alisa Berdichevskaia <alisa@driebit.nl>
Date: Mon, 13 Jan 2025 15:25:48 +0100
Subject: [PATCH] OEI-70 ginger foundation

---
 .../lib/css/src/_base.scss                    |  2 +-
 .../lib/css/src/_mixins.scss                  | 21 +++++++------------
 .../src/blocks/_1page-actions-extends.scss    |  2 +-
 .../lib/css/src/layout/_global-nav.scss       |  2 +-
 .../lib/css/src/layout/_page-actions.scss     |  2 +-
 5 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/modules/mod_ginger_foundation/lib/css/src/_base.scss b/modules/mod_ginger_foundation/lib/css/src/_base.scss
index b26a4ef1a..83b048ecc 100644
--- a/modules/mod_ginger_foundation/lib/css/src/_base.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/_base.scss
@@ -124,7 +124,7 @@ h3 {
     @include size(margin-bottom, 0);
 }
 
-@include mq(min-width, 900) {
+@include mq(min-width, 900px) {
     h1 {
         @include size(font-size, 41);
         @include size(line-height, 44);
diff --git a/modules/mod_ginger_foundation/lib/css/src/_mixins.scss b/modules/mod_ginger_foundation/lib/css/src/_mixins.scss
index 7e3fa7343..468741976 100644
--- a/modules/mod_ginger_foundation/lib/css/src/_mixins.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/_mixins.scss
@@ -1,11 +1,7 @@
 @use "sass:math";
 
-@function strip-unit($num) {
-    @return math.div($num, $num * 0 + 1);
-}
-
 @function px-to-rem($value) {
-    @return  $value*0.1;
+    @return calc(#{$value} * 0.1);
 }
 
 /* Takes sizes in pixels and outputs both the pixel and rem values for the given property */
@@ -15,9 +11,10 @@
     $remValues: '';
 
     @for $i from 1 through $max {
-        $value: strip-unit(nth($values, $i));
+        $value: nth($values, $i);
         $pxValues: #{$pxValues + $value}px;
-        $remValues: #{$remValues + px-to-rem($value)}rem;
+        $pxToRems: px-to-rem(#{$value}rem);
+        $remValues: #{$remValues + $pxToRems};
 
         @if $i < $max {
             $pxValues: #{$pxValues + " "};
@@ -35,9 +32,7 @@
 
 /* Creates a mediaquery based on property and size in pixels */
 @mixin mq($property, $size) {
-    $value: strip-unit($size);
-
-    @media only screen and (#{$property}: #{$value}px ) {
+    @media only screen and (#{$property}: $size ) {
         @content;
     }
 }
@@ -117,8 +112,8 @@
         &:before {
             content: '';
             display: inline-block;
-            @include size(width, 15px);
-            @include size(height, 15px);
+            @include size(width, 15);
+            @include size(height, 15);
             @include size(margin-right, 15);
             position: relative;
             top: 2px;
@@ -173,7 +168,7 @@
         display: block;
         content: "";
         width: 100%;
-        padding-top: math.div($height, $width) * 100%;
+        padding-top: calc(#{$height} / #{$width} * 100%);
     }
 
     > div {
diff --git a/modules/mod_ginger_foundation/lib/css/src/blocks/_1page-actions-extends.scss b/modules/mod_ginger_foundation/lib/css/src/blocks/_1page-actions-extends.scss
index 0436d8468..8c2750351 100644
--- a/modules/mod_ginger_foundation/lib/css/src/blocks/_1page-actions-extends.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/blocks/_1page-actions-extends.scss
@@ -3,7 +3,7 @@
     @include size(margin-bottom, 10);
 }
 
-@include mq(min-width, 900) {
+@include mq(min-width, 900px) {
     .page-action-elements {
         margin-top: 0px;
         @include size(margin-bottom, 10);
diff --git a/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss b/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss
index 6ca8b2775..659b9dd8f 100644
--- a/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss
@@ -297,7 +297,7 @@
     }
 }
 
-@include mq(max-height, 500) {
+@include mq(max-height, 500px) {
     .is-open .global-nav__menu {
         height: calc(100% - (#{$globalNavHeight + $globalNavHeight}px));
         overflow-y: scroll;
diff --git a/modules/mod_ginger_foundation/lib/css/src/layout/_page-actions.scss b/modules/mod_ginger_foundation/lib/css/src/layout/_page-actions.scss
index fdbca0abb..a7b0788d4 100644
--- a/modules/mod_ginger_foundation/lib/css/src/layout/_page-actions.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/layout/_page-actions.scss
@@ -20,7 +20,7 @@
     display: inline-block;
 }
 
-@include mq(min-width, 900) {
+@include mq(min-width, 900px) {
     .page-actions__author {
         @include size(margin-bottom, 10);
     }