ralexandr

@mixin push--auto {
    margin: { 
        left: auto;
        right: auto;
    }
}

ralexandr

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

ralexandr

// use this for creating scalable elements (usually images / background images) that maintain a ratio.
// @include responsive-ratio(16,9);
@mixin responsive-ratio($x,$y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }

ralexandr

/*--------------------------------
	CSS Triangle
	used for creating CSS only triangles
	example:
	.element {
		&::before {
			@include css-triangle(blue, down);
		}
	}
*/

ralexandr

@mixin font-source-sans($size: false, $colour: false, $weight: false,  $lh: false) {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    @if $size { font-size: $size; }
    @if $colour { color: $colour; }
    @if $weight { font-weight: $weight; }
    @if $lh { line-height: $lh; }
}

ralexandr

/*--------------------------------
	Form input placeholder text
	example:
	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}
*/

ralexandr

//  Usage:
//  .site-header {
//        padding: 2rem;
//        font-size: 1.8rem;
//        @include mq('tablet-wide') {
//            padding-top: 4rem;
//            font-size: 2.4rem;
//        }
//    }

ralexandr

//  Usage:
//  .site-header {
//      z-index: z('site-header');
//  }

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';

ralexandr

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}

ralexandr

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}