SCSS Helpers

_mixin.scss

/* Mixin */

@mixin media($point) {
    @if $point == papa-bear {
        @media (max-width: 1600px) { @content; }
    }
    @else if $point == mama-bear {
        @media (max-width: 1250px) { @content; }
    }
    @else if $point == baby-bear {
        @media (max-width: 650px)  { @content; }
    }
}

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }

    @-moz-keyframes #{$name} {
        @content;
    }

    @-ms-keyframes #{$name} {
        @content;
    }

    @-o-keyframes #{$name} {
        @content;
    }

    @keyframes #{$name} {
        @content;
    }
}

/* Helper extends */

%ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
    &:before {
        content: "";
        display: block;
        width: 0;
        height: 100%;
    }
}

%cf {
    *zoom: 1;
    &:after {
        content : '';
        display : block;
        clear : both;
        height: 0;
    }
}

%ca {
    &:link, &:visited, &:hover, &:focus, &:active {
        text-decoration: none;
    }
}

/* Helper classes */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}