CartoAssets/src/scss/cdb-utilities/_mixins.scss

// Mixins
// - Necessary SCSS functions
// - Browser support:
//  · IE => 10
//  · Chrome => 21
//  · Sarafi => 6
//  · Firefox => 24
//  · Opera => 12
// --------------------------------------------------

/* ADDS A BROWSER PREFIX TO THE PROPERTY */
@mixin css3-prefix($property, $value) {
  -webkit-#{$property}: #{$value};
   -khtml-#{$property}: #{$value};
     -moz-#{$property}: #{$value};
      -ms-#{$property}: #{$value};
       -o-#{$property}: #{$value};
          #{$property}: #{$value};
}

// Display inline
@mixin inline-block() {
  display: inline-block;
  vertical-align: middle;
}

// Display flex functions
@mixin display-flex() {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
@mixin flex($v) {
  -webkit-box-flex: $v;
  -moz-box-flex:  $v;
  -webkit-flex:  $v;
  -ms-flex:  $v;
  flex:  $v;
}
@mixin flex-direction($v) {
  -webkit-flex-direction: $v;
  -moz-flex-direction: $v;
  -ms-flex-direction: $v;
  flex-direction: $v;
  // IE10 doesn't support this property
}
@mixin flex-grow($v) {
  -webkit-flex-grow: $v;
  -moz-flex-grow: $v;
  -ms-flex-grow: $v;
  flex-grow: $v;
  // IE10 fallback
  -ms-flex: $v 0 auto;
}
@mixin flex-wrap($v) {
  -webkit-flex-wrap: $v;
  -moz-flex-wrap: $v;
  -ms-flex-wrap: $v;
  flex-wrap: $v;
  // IE10 doesn't support this property
}
@mixin flex-order($v) {
  -webkit-flex-order: $v;
  -webkit-box-ordinal-group: $v;
  -moz-box-ordinal-group: $v;
  -moz-flex-order: $v;
  -ms-flex-order: $v;
  -ms-order: $v;
  box-ordinal-group: $v;
  flex-order: $v;
  order: $v;
}
@mixin justify-content($v, $ie-v: "") {
  -webkit-justify-content: $v;
  -moz-justify-content: $v;
  -ms-justify-content: $v;
  justify-content: $v;
  // Hello IE10
  -ms-flex-pack: if($ie-v != "", $ie-v, $v);
}
@mixin align-items($v, $ie-v: "") {
  -webkit-align-items: $v;
  -moz-align-items: $v;
  -ms-align-items: $v;
  align-items: $v;
  // Hello IE10
  -ms-flex-align: if($ie-v != "", $ie-v, $v);
}
@mixin align-content($v, $ie-v: "") {
  -webkit-align-content: $v;
  -moz-align-content: $v;
  -ms-align-content: $v;
  align-content: $v;
  // Hello IE10
  -ms-flex-align: if($ie-v != "", $ie-v, $v);
}

// CSS3 typical functions
@mixin opacity($v) {
  opacity:$v;
  filter:alpha(opacity=($v*100)); // IE10
}

@mixin grayscale() {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+, Firefox on Android */
}


@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
  background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(top, $startColor, $endColor);
  background-image:    -moz-linear-gradient(top, $startColor, $endColor);
  background-image:     -ms-linear-gradient(top, $startColor, $endColor);
  background-image:      -o-linear-gradient(top, $startColor, $endColor);
  background-image:         linear-gradient(top, $startColor, $endColor);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
  background-color: $startColor;
  background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
  background-image:    -moz-linear-gradient(left, $startColor, $endColor);
  background-image:     -ms-linear-gradient(left, $startColor, $endColor);
  background-image:      -o-linear-gradient(left, $startColor, $endColor);
  background-image:         linear-gradient(left, $startColor, $endColor);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
}

@mixin image-2x($image, $width, $height, $x: 0, $y: 0) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background: url($image);
    background-size: $width $height;
    background-position: $x $y;
  }
}

@mixin transform($params) {
  @include css3-prefix('transform', $params);
}

@mixin transform-style($style: preserve-3d) {
  @include css3-prefix('transform-style', $style);
}

@mixin transition($properties...) {

  @if length($properties) >= 1 {
    @include css3-prefix('transition', $properties);
  }

  @else {
    @include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);
  }
}


/* FONT FACE */
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
  @font-face {
    font-family: $fontFamily;
    src: url($eotFileSrc)  format('eot'),
         url($woffFileSrc) format('woff'),
         url($ttfFileSrc)  format('truetype'),
         url($svgFileSrc + $svgFontID) format('svg');
  }
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin text-overflow() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin animation($str) {
  @include css3-prefix('animation', $str);
}

@mixin line-clamp($lines) {
  height: $lines * $sLineHeight-normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  text-overflow: ellipsis;
  &:after {
    content: ' ';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: $sLineHeight-normal;
    width: 2 * $sLineHeight-normal;
    @include background-horizontal(rgba(255,255,255,0), rgba(255,255,255,1));
  }
}

@mixin media-query() {
  @media only screen and (min-width: 320px) and (max-width: 960px)  {
    @content;
  }
}
@mixin media-query-mobile() {
  @media only screen and (max-width: 600px) {
    @content;
  }
}