scss SCSS MIXINS

Posted 2021-05-17

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