@mixin grayscale( $toggle: "on", $percentage: 1 ) {
$svg-type: "matrix";
$svg-value: "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0";
$ie-alpha: alpha(#{"opacity="}round( $percentage * 100 ) );
@if $percentage != 1 {
$svg-type: "saturate";
$svg-value: $percentage;
}
@if $toggle == "on" {
filter: url("data:image/svg+xml;utf8,<svg >); // Firefox 10+, Firefox on Android
filter: gray $ie-alpha; // IE6-9
-webkit-filter: grayscale( round( $percentage * 100% ) ); // Chrome 19+, Safari 6+, Safari 6+ iOS
filter: grayscale( round( $percentage * 100% ) ); // Catch-all
}
@if $toggle == "off" {
@if $svg-type == "saturate" {
filter: none;
} @else {
filter: url("data:image/svg+xml;utf8,<svg >);
}
-webkit-filter: grayscale(0%);
filter: grayscale(0);
}
}