diff --git a/platypush/backend/http/static/css/source/common/mixins.scss b/platypush/backend/http/static/css/source/common/mixins.scss index d278275a8c..9a735bf501 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 efb25a1a06..4fd6eb8ce9 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 3da146935d..00233cf96e 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 0e95b3ea0b..c1164f90ef 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); } }