MediaWiki:Gadget-LessMixins.less

/**

* 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

1. 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 );
   }

}