Styles > Base > Mixins

The mixins file is the place to store all of the functional Sass mixins used throughout the project.

inline-block-list

// inline-block list
@mixin inline-block-list($padding: false) {
    margin: 0;
    padding: 0;
    border: 0;
    @include clearfix;

    li {
        list-style-type: none;
        @include inline-block();
        white-space: nowrap;
        @if $padding {
            padding: {
                left: $padding;
                right: $padding;
            }
        }
    }
}
copy

omega-reset

@mixin omega-reset($nth) {
    &:nth-child(#{$nth}) {
        margin-right: flex-gutter();
    }
    &:nth-child(#{$nth} + 1) {
        clear: none;
    }
}
copy

font-size

@mixin font-size($fontSize, $lineHeight: null) {
    font-size: $fontSize;
    font-size: rem($fontSize) / 0.625;

    @if ($lineHeight) {
        line-height: em($lineHeight, $fontSize);
    } @else {
        line-height: inherit;
    }
}
copy

inline-block

// inline-block for old browsers
@mixin inline-block() {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
copy

reset-box-model

@mixin reset-box-model {
    margin: 0;
    padding: 0;
    border: 0;
}
copy

absolute-fill

@mixin absolute-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
copy

headings

@mixin headings($from: 1, $to: 6) {
    @for $i from $from through $to {
        h#{$i} {
            @content;
        }
    }
}
copy

background-image

@mixin background-image($path) {
    background-image: url(../img/#{$path}.png);
    background-image: linear-gradient(transparent, transparent), url(../img/#{$path}.svg);
}
copy

reset-ul

/* Reset unordered list style */
@mixin reset-ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
}
copy

hide-text

@mixin hide-text {
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
}
copy

_neat-parse-media

Swaps neat 2.0 to desktop first

@function _neat-parse-media($media) {
    @if type-of($media) == number {
        @return "only screen and (max-width: #{$media})";
    } @else if type-of($media) == string {
        @return "#{$media}";
    }
}
copy

background-color

Set default background-color transition.

@mixin background-color$color, $lighten: false) {
    background-color: $color;
    transition: background-color 600ms ease-in;

    &:hover,
    &:active {
        @if $lighten {
            background-color: lighten($color, 30%);
        } @else {
            background-color: darken($color, 30%);
        }
    }
}
copy

color

@mixin color($color, $lighten: false) {
    color: $color;
    transition: color 600ms ease-in;

    &:hover,
    &:active {
        @if $lighten {
            color: lighten($color, 30%);
        } @else {
            color: darken($color, 30%);
        }
    }
}
copy