Skip to content

Instantly share code, notes, and snippets.

@valkirilov
Created October 6, 2015 14:09
Show Gist options
  • Save valkirilov/35a5814fc411fa22abd0 to your computer and use it in GitHub Desktop.
Save valkirilov/35a5814fc411fa22abd0 to your computer and use it in GitHub Desktop.
A list of my LESS mixins
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
-moz-transition-delay: @transition-delay;
-o-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
-moz-transition-duration: @transition-duration;
-o-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.translate(@x, @y) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y);
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
-webkit-backface-visibility: hidden;
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.opacity(@opacity) {
opacity: @opacity;
@opacity-ie: @opacity * 100;
filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
}
.placeholder(@color: @input-color-placeholder) {
&:-moz-placeholder { color: @color; } // Firefox 4-18
&::-moz-placeholder { color: @color; } // Firefox 19+
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
.font-size(@px: 12) {
@rem: @px / 10;
font-size: ~"@{px}px";
font-size: ~"@{rem}rem";
}
.line-height (@px) {
@rem: @px / 10;
line-height: ~"@{px}px";
line-height: ~"@{rem}rem";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment