Using cross-browser mixin for calc
This commit is contained in:
parent
359e6703e4
commit
fc5ea429d2
4 changed files with 11 additions and 5 deletions
|
@ -29,3 +29,9 @@
|
|||
box-shadow: $value;
|
||||
}
|
||||
|
||||
@mixin calc($property, $expression) {
|
||||
#{$property}: -webkit-calc(#{$expression});
|
||||
#{$property}: -moz-calc(#{$expression});
|
||||
#{$property}: calc(#{$expression});
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.media-plugin {
|
||||
.results {
|
||||
height: calc(100% - 16rem);
|
||||
@include calc(100% - 16rem);
|
||||
overflow: auto;
|
||||
|
||||
.empty {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue