_helpers.scss

scss

/* Fool-proof @font-face */
/* Based on http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ */

@mixin font-face($font-family, $file-path, $font-weight:'normal', $font-style:'normal') {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }
  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$file-path}.svg##{$font-family}') format('svg');
    }
  }
}


@mixin clearfix {
  &:after {
    clear: both;
    content: '';
    display: table;
  }
}


.clearfix, .cf {
  width: 100%;
  height: 0;
  clear: both;
  font: 0/0 a;
  @include clearfix();
}

@mixin overflow-y-scrolling() {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch; /* Not covered by autoprefixer... */
  overflow-scrolling: touch;
}


@mixin positionsticky() {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
}

@mixin no-select($prop: none) {
-webkit-tap-highlight-color: transparent;
       tap-highlight-color: transparent;
  -webkit-touch-callout: $prop;
  -webkit-user-select: $prop;
  -moz-user-select: $prop;
  -ms-user-select: $prop;
  user-select: $prop;
}