79 lines
2.4 KiB
SCSS
79 lines
2.4 KiB
SCSS
|
// @include;
|
||
|
|
// Border Radius
|
||
|
|
@mixin border-radius($top, $right, $bottom, $left) {
|
||
|
|
-webkit-border-radius: $top $right $bottom $left;
|
||
|
|
-moz-border-radius: $top $right $bottom $left;
|
||
|
|
-ms-border-radius: $top $right $bottom $left;
|
||
|
|
-o-border-radius: $top $right $bottom $left;
|
||
|
|
border-radius: $top $right $bottom $left;
|
||
|
|
}
|
||
|
|
// Box Shadow
|
||
|
|
@mixin box-shadow($x, $y, $b, $c, $p) {
|
||
|
|
@if $p == "outset" {
|
||
|
|
-webkit-box-shadow: $x $y $b $c;
|
||
|
|
-moz-box-shadow: $x $y $b $c;
|
||
|
|
box-shadow: $x $y $b $c;
|
||
|
|
} @else {
|
||
|
|
-webkit-box-shadow: $x $y $b $c $p;
|
||
|
|
-moz-box-shadow: $x $y $b $c $p;
|
||
|
|
box-shadow: $x $y $b $c $p;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Transition
|
||
|
|
@mixin transition($property, $time ,$delay) {
|
||
|
|
-webkit-transition: $property $time ease $delay;
|
||
|
|
-moz-transition: $property $time ease $delay;
|
||
|
|
-ms-transition: $property $time ease $delay;
|
||
|
|
-o-transition: $property $time ease $delay;
|
||
|
|
transition: $property $time ease $delay;
|
||
|
|
}
|
||
|
|
// Set iCon
|
||
|
|
@mixin seticon($iconType, $iconCode) {
|
||
|
|
font-family: $iconType;
|
||
|
|
content: $iconCode;
|
||
|
|
}
|
||
|
|
// Clear Fix
|
||
|
|
@mixin clearfix {
|
||
|
|
&:after {
|
||
|
|
content: "";
|
||
|
|
clear: both;
|
||
|
|
display: table;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@mixin opacity($vel) {
|
||
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$vel)";
|
||
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$vel);
|
||
|
|
opacity: $vel / 100;
|
||
|
|
}
|
||
|
|
// Set Triangle
|
||
|
|
@mixin arrow($d, $w, $h, $c) {
|
||
|
|
width: 0px;
|
||
|
|
height: 0px;
|
||
|
|
border-style: solid;
|
||
|
|
@if $d == "top" {
|
||
|
|
border-width: $w $h 0 $h;
|
||
|
|
border-color: $c transparent transparent transparent;
|
||
|
|
} @else if $d == "right" {
|
||
|
|
border-width: $h $w $h 0;
|
||
|
|
border-color: transparent $c transparent transparent;
|
||
|
|
} @else if $d == "bottom" {
|
||
|
|
border-width: 0 $h $w $h;
|
||
|
|
border-color: transparent transparent $c transparent;
|
||
|
|
} @else if $d == "left" {
|
||
|
|
border-width: $h 0 $h $w;
|
||
|
|
border-color: transparent transparent transparent $c;
|
||
|
|
} @else if $d == "top-right" {
|
||
|
|
border-width: 0 $w $h 0;
|
||
|
|
border-color: transparent $c transparent transparent;
|
||
|
|
} @else if $d == "top-left" {
|
||
|
|
border-width: $h $w 0 0;
|
||
|
|
border-color: $c transparent transparent transparent;
|
||
|
|
} @else if $d == "bottom-right" {
|
||
|
|
border-width: 0 0 $h $w;
|
||
|
|
border-color: transparent transparent $c transparent;
|
||
|
|
} @else if $d == "bottom-left" {
|
||
|
|
border-width: $h 0 0 $w;
|
||
|
|
border-color: transparent transparent transparent $c;
|
||
|
|
}
|
||
|
|
}
|