MediaWiki:Gadget-LessMixins.less

From Meta Wiki
Jump to: navigation, search
/**
 * Standard mixins for Less v2
 *
 * Based on <https://github.com/clearleft/clearless/blob/master/mixins/helpers.less>
 * Gradients based on <http://www.colorzilla.com/gradient-editor/>
 */

.border-radius( @radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.box-sizing( @type: border-box) {
    -webkit-box-sizing: @type;
    -moz-box-sizing: @type;
    -ms-box-sizing: @type;
    box-sizing: @type;
}

.box-shadow( @shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25)) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

.filter( @filter: grayscale( 100%)) {
    -webkit-filter: @filter;
    filter: @filter;
}

.transition( @transition ) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    transition: @transition;
}

.rotate( @rotation ) {
    -webkit-transform: rotate( @rotation );
    -moz-transform: rotate( @rotation );
    transform: rotate( @rotation );
}

.user-select( @value ) {
    -webkit-user-select: @value;
    -moz-user-select: @value;
    -ms-user-select: @value;
    user-select: @value;
}

// @todo add extra options beyond basic horizontal and vertical
#gradient {
    .horizontal ( @start-color, @end-color, @start-percent: 0%, @end-percent: 100%) {
        // Older browsers
        background: @start-color;
        // FF 3.6+
        background: -moz-linear-gradient( left, @start-color @start-percent, @end-color @end-percent );
        // Safari 5.1+, Chrome 10+
        background: -webkit-linear-gradient( left, @start-color @start-percent, @end-color @end-percent );
        // IE 10+
        background: -ms-linear-gradient( left, @start-color @start-percent, @end-color @end-percent );
        // W3C
        background: linear-gradient( to right, @start-color @start-percent, @end-color @end-percent );
    }
    .vertical ( @start-color, @end-color, @start-percent: 0%, @end-percent: 100%) {
        // Older browsers
        background: @start-color;
        // FF 3.6+
        background: -moz-linear-gradient( top, @start-color @start-percent, @end-color @end-percent );
        // Safari 5.1+, Chrome 10+
        background: -webkit-linear-gradient( top, @start-color @start-percent, @end-color @end-percent );
        // IE 10+
        background: -ms-linear-gradient(top, @start-color @start-percent, @end-color @end-percent );
        // W3C
        background: linear-gradient( to bottom, @start-color @start-percent, @end-color @end-percent );
    }
}