documize/gui/app/styles/mixins.scss

@mixin box-shadow($spec)
{
    -webkit-box-shadow: $spec;
	-moz-box-shadow: $spec;
    box-shadow: $spec;
}

@mixin border-radius($radius)
{
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

@mixin border-radius-top-right($radius)
{
	-webkit-border-top-right-radius: $radius;
	-moz-border-radius-topright: $radius;
	border-top-right-radius: $radius;
}

@mixin border-radius-top-left($radius)
{
	-webkit-border-top-left-radius: $radius;
	-moz-border-radius-topleft: $radius;
	border-top-left-radius: $radius;
}

@mixin border-radius-bottom-right($radius)
{
	-webkit-border-bottom-right-radius: $radius;
	-moz-border-radius-bottomright: $radius;
	border-bottom-right-radius: $radius;
}

@mixin border-radius-bottom-left($radius)
{
	-webkit-border-bottom-left-radius: $radius;
	-moz-border-radius-bottomleft: $radius;
	border-bottom-left-radius: $radius;
}

@mixin border-radius-none()
{
	-webkit-border-radius: none;
	-moz-border-radius: none;
	border-radius: none;
	-webkit-border-top-right-radius: none;
	-moz-border-radius-topright: none;
	border-top-right-radius: none;
	-webkit-border-top-left-radius: none;
	-moz-border-radius-topleft: none;
	border-top-left-radius: none;
}

@mixin border($width)
{
	border: $width solid $color-border !important;
}
@mixin border-left($width)
{
	border-left: $width solid $color-border;
}
@mixin border-right($width)
{
	border-right: $width solid $color-border;
}
@mixin border-top($width)
{
	border-top: $width solid $color-border;
}
@mixin border-bottom($width)
{
	border-bottom: $width solid $color-border;
}

@mixin ease-in()
{
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	transition: all 0.30s ease-in-out;
}

@mixin arrow-down($color, $size)
{
	width: 0;
	height: 0;
	border-left: $size solid transparent;
	border-right: $size solid transparent;
	border-top: $size solid $color;
}

@mixin content-container($pad-tb: 25px, $pad-lr: 50px) {
    @include border-radius(2px);
    padding: $pad-tb $pad-lr;
    box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
    background-color: $color-white;
}

.dotted
{
    border-bottom: 1px dotted $color-gray;
}

// Mixins from http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;
}

@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

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

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

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

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

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

@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation   : #{$str};
    -ms-animation    : #{$str};
    -o-animation     : #{$str};
    animation        : #{$str};
}

@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition   : $args;
    -ms-transition    : $args;
    -o-transition     : $args;
    transition        : $args;
}

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}