95 lines
2.4 KiB
SCSS
95 lines
2.4 KiB
SCSS
/* 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;
|
|
}
|
|
|