SoftwareShop/static/suit/less/mixins.less

.clearfix() {
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
    }
    &:after {
        clear: both;
    }
}

.horizontal-list(@li-margin-right: 0) {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        display: block;
        position: relative;
        float: left;
        margin-right: @li-margin-right;
    }

    .clearfix();
}

.selection(@color: #FFF, @background: rgba(0, 0, 0, 1)) {
    ::selection {
        background: @background;
        color: @color;
    }
    ::-moz-selection {
        background: @background;
        color: @color;
    }

    img::selection {
        background: transparent;
    }
    img::-moz-selection {
        background: transparent;
    }
}

.horizontal-gradient(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
    background-image: -moz-linear-gradient(right center, @startColor, @endColor);
    background-image: -o-linear-gradient(left,  @startColor,  @endColor);
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
}

.vertical-gradient(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @endColor);
    background-image: -moz-linear-gradient(@startColor, @endColor);
    background-image: -o-linear-gradient(top,  @startColor,  @endColor);
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
}

.box-sizing(@mode) {
    -moz-box-sizing: @mode;
    -webkit-box-sizing: @mode;
    box-sizing: @mode;
}

.border-box() {
    .box-sizing( border-box );
}

.background-size(@mode) {
    -webkit-background-size: @mode;
    -moz-background-size: @mode;
    -o-background-size: @mode;
    background-size: @mode;
}

.inner-shadow(@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-shadow(@string) {
    -webkit-box-shadow: @string;
    -moz-box-shadow: @string;
    box-shadow: @string;
}

.drop-shadow(@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.opacity(@opacity: 0.5) {
    -webkit-opacity: @opacity;
    -moz-opacity: @opacity;
    opacity: @opacity;
}

.border-radius(@top_left, @top_right, @bottom_right, @bottom_left) {
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@top_left = null) {
    -webkit-border-top-left-radius: @top_left;
    -moz-border-radius-topleft: @top_left;
    border-top-left-radius: @top_left;
}

.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@top_right = null) {
    -webkit-border-top-right-radius: @top_right;
    -moz-border-radius-topright: @top_right;
    border-top-right-radius: @top_right;
}

.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@bottom_left = null) {
    -webkit-border-bottom-left-radius: @bottom_left;
    -moz-border-radius-bottomleft: @bottom_left;
    border-bottom-left-radius: @bottom_left;
}

.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@bottom_right = null) {
    -webkit-border-bottom-right-radius: @bottom_right;
    -moz-border-radius-bottomright: @bottom_right;
    border-bottom-right-radius: @bottom_right;
}

.border-radius(@top, @bottom) {
    .border-radius(@top, @top, @bottom, @bottom);
}

.border-radius(@radius) {
    .border-radius(@radius, @radius);
}