FinalsClub/fc-new-design/assets/css/scss/includes/mixins.scss

/* positioning */

@mixin group {

    &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
}

@mixin text-hidden {
    text-indent: 0;
    line-height: 0;
    font-size: 0;
}

@mixin inline-block {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/* sprites */

@mixin sprite-icon {
    text-indent: -9999px;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    display: block;
    background-image: url("../img/greentech-sprite-icons.png");
    background-repeat: no-repeat;
}

@mixin sprite-image {
    text-indent: -9999px;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    display: block;
    background-image: url("../img/greentech-sprite-images.png");
    background-repeat: no-repeat;
}

/* borders made from backgrounds */

@mixin border-vertical-dotted($position) {
    background-image: url("../img/border-vertical-dotted.png");
    background-repeat: repeat-y;
    background-position: $position top;
}

@mixin border-horizontal-dotted($position) {
    background-image: url("../img/border-horizontal-dotted.png");
    background-repeat: repeat-x;
    background-position: left $position;
}

/* triangles */

@mixin triangle-vertical($size: 7px, $position: "bottom", $color: #999, $rgba: rgba(0, 0, 0, 0.7)) {
    @include text-hidden;
    position     : absolute;
    height       : 0;
    width        : 0;
    border-style : solid;
    border-width : $size;
    border-color : transparent transparent $color transparent;
    border-color : transparent transparent $rgba transparent;
    left         : 50%;
    margin-left  : $size * -2;
    #{$position} : 0;

}

@mixin triangle-angled($size: 4px, $position: "bottom", $color: #333, $rgba: "") {
    @include text-hidden;
    position     : absolute;
    height       : 0;
    width        : 0;
    border-style : solid;
    border-width : $size;
    border-color : $color transparent transparent $color;
    @if $rgba != "" {
        border-color : $rgba transparent transparent $rgba;
    }
    left         : 50%;
    margin-left  : $size * -2;
    #{$position} : $size * -2;
}

/* css3 */

@mixin rounded($radius: 5px) {
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin rounded-side($horizontal, $vertical, $magnitude: 5px) {
  border-#{$vertical}-#{$horizontal}-radius: $magnitude;
  -moz-border-radius-#{$vertical}#{$horizontal}: $magnitude;
  -webkit-border-#{$vertical}-#{$horizontal}-radius: $magnitude;
}

@mixin transition($property, $time: 0.25s) {
    -webkit-transition: $property $time ease-in-out;
    -moz-transition: $property $time ease-in-out;
    -o-transition: $property $time ease-in-out;
    -ms-transition: $property $time ease-in-out;
    transition: $property $time ease-in-out;
}

@mixin inner-shadow($horizontal: -5px, $vertical: -5px, $magnitude: 5px, $color: #888) {
    -moz-box-shadow: inset $horizontal $vertical $magnitude $color;
    -webkit-box-shadow: inset $horizontal $vertical $magnitude $color;
    box-shadow: inset $horizontal $vertical $magnitude $color;
}

@mixin drop-shadow($horizontal: 5px, $vertical: 5px, $magnitude: 5px, $color: #888) {
    -moz-box-shadow: $horizontal $vertical $magnitude $color;
    -webkit-box-shadow: $horizontal $vertical $magnitude $color;
    box-shadow: $horizontal $vertical $magnitude $color;
}