/** Cross-browser grayscale **/ @mixin grayscale($opacity){
-webkit-filter: grayscale($opacity); filter: gray;
}
/** Cross-browser placeholder **/ @mixin placeholder($color){
&::-webkit-input-placeholder{ color:$color; } &:-moz-placeholder{ color:$color; } &::-moz-placeholder{ color:$color; } &:-ms-input-placeholder{ color:$color; }
}
/** Cross-browser opacity **/ @mixin opacity($opacity) {
opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie);
}
/** Cross-browser transition **/ @mixin transition($args) {
-webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args;
}
/** Material Icons mixin **/ @mixin material-icons($size){
font-weight: normal; font-size: $size; font-family: 'Material Icons'; font-style: normal; line-height: 1; direction: ltr; letter-spacing: normal; white-space: nowrap; text-transform: none; word-wrap: normal; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}
/** Media queries (use with breakpoints from 'variables.scss' */ @mixin media-min($breakpoint) {
@media screen and (min-width: $breakpoint) { @content; }
} @mixin media-max($breakpoint) {
@media screen and (max-width: $breakpoint) { @content; }
}