From fc5ea429d27335b88e7a2c0ced1cb722aae7aaa9 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Fri, 14 Jun 2019 19:15:57 +0200
Subject: [PATCH] Using cross-browser mixin for calc

---
 platypush/backend/http/static/css/source/common/mixins.scss | 6 ++++++
 .../backend/http/static/css/source/webpanel/index.scss      | 2 +-
 .../static/css/source/webpanel/plugins/media/results.scss   | 2 +-
 .../static/css/source/webpanel/plugins/music.mpd/index.scss | 6 +++---
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/platypush/backend/http/static/css/source/common/mixins.scss b/platypush/backend/http/static/css/source/common/mixins.scss
index d278275a8..9a735bf50 100644
--- a/platypush/backend/http/static/css/source/common/mixins.scss
+++ b/platypush/backend/http/static/css/source/common/mixins.scss
@@ -29,3 +29,9 @@
     box-shadow: $value;
 }
 
+@mixin calc($property, $expression) {
+    #{$property}: -webkit-calc(#{$expression});
+    #{$property}: -moz-calc(#{$expression});
+    #{$property}: calc(#{$expression});
+}
+
diff --git a/platypush/backend/http/static/css/source/webpanel/index.scss b/platypush/backend/http/static/css/source/webpanel/index.scss
index efb25a1a0..4fd6eb8ce 100644
--- a/platypush/backend/http/static/css/source/webpanel/index.scss
+++ b/platypush/backend/http/static/css/source/webpanel/index.scss
@@ -29,7 +29,7 @@ body {
         overflow: hidden;
 
         // nav height hardcoded, calc won't support either CSS4 nor SASS vars
-        height: calc(100vh - 4.8rem);
+        @include (height, 100vh - 4.8rem);
 
         .plugins-container {
             height: inherit;
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss b/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss
index 3da146935..00233cf96 100644
--- a/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/media/results.scss
@@ -1,6 +1,6 @@
 .media-plugin {
     .results {
-        height: calc(100% - 16rem);
+        @include calc(100% - 16rem);
         overflow: auto;
 
         .empty {
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss
index 0e95b3ea0..c1164f90e 100644
--- a/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss
@@ -61,7 +61,7 @@
         flex-direction: row;
         flex: 0 1 auto;
         order: 0;
-        height: calc(100% - 10.1rem);
+        @include calc(height, 100% - 10.1rem);
     }
 
     .browser {
@@ -109,7 +109,7 @@
     .playlist {
         .results {
             position: relative;   // For the dropdown menu
-            height: calc(100% - 5.1rem);
+            @include calc(height, 100% - 5.1rem);
             overflow: auto;
         }
 
@@ -353,7 +353,7 @@
         }
 
         .results {
-            height: calc(100% - 4.7rem);
+            @include calc(height, 100% - 4.7rem);
         }
     }