MediaWiki:Gadget-LessMixins.less

/**
 * Standard mixins for Less v2
 *
 * Based on <https://github.com/clearleft/clearless/blob/master/mixins/helpers.less>
 * Gradients based on <https://www.colorzilla.com/gradient-editor/>
 */

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

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

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

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

.transition( @transition ) {
    transition: @transition;
}

.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%) {
        background: linear-gradient( to right, @start-color @start-percent, @end-color @end-percent );
    }
    .vertical ( @start-color, @end-color, @start-percent: 0%, @end-percent: 100%) {
        background: linear-gradient( to bottom, @start-color @start-percent, @end-color @end-percent );
    }
}