MediaWiki:Gadget-LessMixins.less
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/**
* 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 );
}
}
