Using cross-browser mixin for calc

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});
+}
+

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;

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 {

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);
         }
     }