// 矢印
.arrow{
content: "";
display: block;
width: 0;
height: 0;
border-left: 5px solid #000;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
//clearfix
@mixin clearfix {
zoom: 1;
&:before,
&:after {
display: block;
height: 0;
visibility: hidden;
content: "\0020";
}
&:after {
clear: both;
}
}
//グラデーション
@mixin grad($color1, $color2){
background: $color1;
background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2));
background: -webkit-linear-gradient(top, $color1 0%,$color2 100%);
background: -o-linear-gradient(top, $color1 0%,$color2 100%);
background: -ms-linear-gradient(top, $color1 0%,$color2 100%);
background: linear-gradient(to bottom, $color1 0%,$color2 100%);
}
//2013-02-22編集
//以前の記述だとinsetを上手く使えなかったため、条件分岐を追加して対応
//box-shadow
@mixin box-shadow($top, $left, $blur, $red, $green, $blue, $opacity, $inset : false) {
@if $inset == true {
-moz-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
-webkit-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
} @else {
-moz-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
-webkit-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
}
}
//text-shadow
@mixin text-shadow($top, $left, $blur, $red, $green, $blue, $opacity) {
-moz-text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
-webkit-text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
}
