mad-utils/scss/mixins.scss

:global {
    @function str-replace($string, $search, $replace) {
        $index: str-index($string, $search);

        @if $index {
            @return str-slice($string, 1, $index - 1) + $replace + str-replace(
                str-slice($string, $index + str-length($search)), $search, $replace
            );
        }

        @return $string;
     }

     @function clean-url($url) {
        $fixed-url: str-replace(str-replace($url, "http:/", "http://"), "http:///", "http://");
        @return $fixed-url;
     }

    /**
     * setting box sizes is annoying - do it all at once with a mixin
     *
     * @example use:
     *   div {
     *       @include box-sizing(border-box);
     *   }
     */
    @mixin box-sizing($type) {
        -webkit-box-sizing:$type;
        -moz-box-sizing:$type;
        box-sizing:$type;
    }

    /**
     * @example use:
     *   div {
     *       @include circle();
     *   }
     */
    @mixin circle {
        @include border-radius(100%);
    }

    /**
     * Create 4-sided elements with exactly equal width and length. In other words...squares.
     *
     * @example use:
     *   div {
     *       @include square(100px);
     *   }
     */
    @mixin square($size) {
        width: $size;
        height: $size;
    }


    /**
     * It sort of works. Good starting point either way.
     * @example use:
     *   div {
     *       @include verticale-align();
     *   }
     *   ...and all divs are v-aligned
     */
    @mixin vertical-align {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    /**
     * Put gradients in all the places.
     * @param  {color} $start-color - e.g. #ffffff
     * @param  {color} $end-color   e.g. #000000
     * @param  {horizontal | vertical | radial} $orientation - determines what type of gradient
     *
     * @EXAMPLE
     *     div {
     *         @include gradient(#ffffff, #000000, horizontal);
     *     }
     */
    @mixin gradient($start-color, $end-color, $orientation) {
        background: $start-color;

        /** vertical */
        @if $orientation == vertical {
            background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
            background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
            background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
            background: -ms-linear-gradient(top,  $start-color 0%,$end-color 100%);
            background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );

        /** horizontal */
        } @else if $orientation == horizontal {
            background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
            background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
            background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
            background: -ms-linear-gradient(left,  $start-color 0%,$end-color 100%);
            background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );

        /** radial */
        } @else {
            background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
            background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
            background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
            background: -ms-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
            background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
        }
     }

    /**
     * @example usage:
     *   .container-with-floated-children {
     *       @extend %clearfix;
     *   }
     */
    %clearfix {
        *zoom: 1;
        &:before, &:after {
            content: " ";
            display: table;
        }
        &:after {
            clear: both;
        }
    }
}

@mixin height($height) {
    height: $height;
    min-height: $height;
    max-height: $height;
}

@mixin width($width) {
    width: $width;
    min-width: $width;
    max-width: $width;
}