Using cross-browser mixin for calc

This commit is contained in:
Fabio Manganiello 2019-06-14 19:15:57 +02:00
parent 359e6703e4
commit fc5ea429d2
4 changed files with 11 additions and 5 deletions

View file

@ -29,3 +29,9 @@
box-shadow: $value; box-shadow: $value;
} }
@mixin calc($property, $expression) {
#{$property}: -webkit-calc(#{$expression});
#{$property}: -moz-calc(#{$expression});
#{$property}: calc(#{$expression});
}

View file

@ -29,7 +29,7 @@ body {
overflow: hidden; overflow: hidden;
// nav height hardcoded, calc won't support either CSS4 nor SASS vars // nav height hardcoded, calc won't support either CSS4 nor SASS vars
height: calc(100vh - 4.8rem); @include (height, 100vh - 4.8rem);
.plugins-container { .plugins-container {
height: inherit; height: inherit;

View file

@ -1,6 +1,6 @@
.media-plugin { .media-plugin {
.results { .results {
height: calc(100% - 16rem); @include calc(100% - 16rem);
overflow: auto; overflow: auto;
.empty { .empty {

View file

@ -61,7 +61,7 @@
flex-direction: row; flex-direction: row;
flex: 0 1 auto; flex: 0 1 auto;
order: 0; order: 0;
height: calc(100% - 10.1rem); @include calc(height, 100% - 10.1rem);
} }
.browser { .browser {
@ -109,7 +109,7 @@
.playlist { .playlist {
.results { .results {
position: relative; // For the dropdown menu position: relative; // For the dropdown menu
height: calc(100% - 5.1rem); @include calc(height, 100% - 5.1rem);
overflow: auto; overflow: auto;
} }
@ -353,7 +353,7 @@
} }
.results { .results {
height: calc(100% - 4.7rem); @include calc(height, 100% - 4.7rem);
} }
} }