/* Mixin file for sass.  Here is where we define our variables and
   browser compatability functions used in all scss/sass files */


/* Diapora's default color palate */
$blue: #3f8fba;
$dark-blue: darken(#0984C8,10%);
$green: #8EDE3D;

$grey: #2b2b2b;
$light-grey: #ddd;

$red: #a80000;
$background: #fff;
$creation-blue: #0097ff;

$red: #a80000;
$background: #fff;
$creation-blue: #0097ff;


/* Transision defaults */
$speed: 0.1s;
$easing: linear;


/* Style includes */
@mixin mobile-box {
  margin: 10px;
  padding: 0 15px;
  border: 1px #999 solid;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

/* Style includes */
@mixin border-radius($tl, $tr:$tl, $br:$tl, $bl:$tl){
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-radius: $tl $tr $br $bl;
  border-radius: $tl $tr $br $bl;
}

@mixin dropdown-shadow{
  @include box-shadow(0,0px,13px,rgba(20,20,20,0.5))
}

@mixin button-gradient($color){
  @include linear-gradient(lighten($color,20%), $color);
}

@mixin button-gradient-hover($color){
  @include linear-gradient(lighten($color,20%), darken(saturate($color,15%),10%));
}

@mixin button-gradient-hover-no-saturation($color){
  @include linear-gradient(lighten($color,20%), darken($color,15%));
}

/* Browser compatability */
@mixin box-shadow($left, $top, $blur, $color:#000){
  -webkit-box-shadow: $left $top $blur $color; 
  -moz-box-shadow: $left $top $blur $color; 
  box-shadow: $left $top $blur $color; 
}

@mixin linear-gradient($from, $to, $start:0%, $end:100%){
  background-color: mix($from,$to);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
  
  background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
  background-image: -moz-linear-gradient(top, $from $start, $to $end);
  background-image: -o-linear-gradient(top, $from $start, $to $end);
}

@mixin opacity($val){
  filter: alpha(opacity= $val* 100);
  -moz-opacity: $val;
  -khtml-opacity: $val;
  opacity: $val;
}

@mixin user-select($val){
  -webkit-user-select: $val;
  -moz-user-select: $val;
}

@mixin transition($type, $speed:$speed, $easing:$easing){
  -webkit-transition: $type $speed $easing;
  -moz-transition: $type $speed $easing;
  -o-transition: $type $speed $easing;
  transition: $type $speed $easing;
}