otvorenesudy/otvorenesudy-api

View on GitHub
app/assets/stylesheets/mixins.scss

Summary

Maintainability
Test Coverage
@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;
}