app/assets/stylesheets/mixins.scss
@mixin highlight($time: .25s) {
opacity: .5;
@include transition(all $time ease);
@include hover-focus-active { opacity: 1.0 }
}
@mixin grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='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' /></filter></svg>#greyscale");
}
@mixin unfilter {
-webkit-filter: grayscale(0.0);
filter: none;
}
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
@mixin linear-gradient($angle, $from, $to) {
background-attachment: scroll;
background-clip: border-box;
background-color: $from;
background-origin: padding-box;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($angle, $from, $to); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient($angle, $from, $to); // Firefox 3.6+
background-image: -o-linear-gradient($angle, $from, $to); // Opera 11.10
background-image: linear-gradient($angle, $from, $to); // Standard, Internet Explorer 10
}
@mixin animation($name, $time, $delay) {
-webkit-animation: $name $time;
animation: $name $time;
-webkit-animation-delay: $delay;
animation-delay: $delay;
}