MediaWiki:Gadget-LessMixins.less

Revision as of 21:56, 4 October 2022 by Jacmob (talk | contribs) (Created page with "→‎* * 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) { 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;...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/**

* 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) {

   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

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

}