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;
}
@mixin calc($property, $expression) {
#{$property}: -webkit-calc(#{$expression});
#{$property}: -moz-calc(#{$expression});
#{$property}: calc(#{$expression});
}

View file

@ -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;

View file

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

View file

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