Skip to content

Instantly share code, notes, and snippets.

@builtbylane

builtbylane/scss

Created February 15, 2016 01:45
Show Gist options
  • Save builtbylane/274b7fedb0b0c33f8eab to your computer and use it in GitHub Desktop.
Save builtbylane/274b7fedb0b0c33f8eab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. builtbylane created this gist Feb 15, 2016.
    65 changes: 65 additions & 0 deletions scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    /* 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;
    }