SCSS MIXINS
@mixin trans($selector:all,$duration:0.3s){
-webkit-transition: $selector $duration ease-in;
-moz-transition: $selector $duration ease-in;
-ms-transition: $selector $duration ease-in;
-o-transition: $selector $duration ease-in;
transition: $selector $duration ease-in;
}
@mixin trans-cubic($selector:all,$duration:0.3s){
-webkit-transition: $selector $duration cubic-bezier(0.18, 0.89, 0.32, 1.28);
-moz-transition: $selector $duration cubic-bezier(0.18, 0.89, 0.32, 1.28);
-ms-transition: $selector $duration cubic-bezier(0.18, 0.89, 0.32, 1.28);
-o-transition: $selector $duration cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: $selector $duration cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@mixin flexbox{
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@mixin knopkleur($color,$background,$border:''){
color: $color;
border-color: $background;
background: $background;
&:hover{
color: $background;
border-color: $background;
background: $color;
}
&.invert{
color: $background;
border-color: $background;
background: $color;
&:hover{
color: $color;
border-color: $background;
background: $background;
}
}
@if $border != ''{
border-color: $color;
}
}
@mixin desktop(){
@media (min-width:$screen-lg-min){
@content
}
}
@mixin tablet(){
@media (min-width: $screen-sm-max) and (max-width: $screen-md-max){
@content
}
}
@mixin mobile(){
@media (max-width: $screen-xs-max){
@content
}
}