Skip to content

Instantly share code, notes, and snippets.

@nicooprat
Created November 14, 2012 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nicooprat/4072992 to your computer and use it in GitHub Desktop.
Save nicooprat/4072992 to your computer and use it in GitHub Desktop.
My LESS mixins.
.transition( @trans: @transition ) {
transition: @trans;
-ms-transition: @trans;
-moz-transition: @trans;
-webkit-transition: @trans;
-o-transition: @trans;
}
.transitionDelay( @delay ) {
transition-delay: @delay;
-ms-transition-delay: @delay;
-moz-transition-delay: @delay;
-webkit-transition-delay: @delay;
-o-transition-delay: @delay;
}
.transform( @trans: @transform ) {
transform: @trans;
-ms-transform: @trans;
-moz-transform: @trans;
-webkit-transform: @trans;
-o-transform: @trans;
}
.backfaceVisibility( @v ) {
backface-visibility: @v;
-webkit-backface-visibility: @v;
-moz-backface-visibility: @v;
-o-backface-visibility: @v;
-ms-backface-visibility: @v;
}
.transformOrigin( @orig: @origin ) {
transform-origin: @orig;
-ms-transform-origin: @orig;
-moz-transform-origin: @orig;
-webkit-transform-origin: @orig;
-o-transform-origin: @orig;
}
.animation( @anim ) {
animation: @anim;
-ms-animation: @anim;
-moz-animation: @anim;
-webkit-animation: @anim;
-o-animation: @anim;
}
.perspective( @perspective ) {
perspective: @perspective;
-ms-perspective: @perspective;
-moz-perspective: @perspective;
-webkit-perspective: @perspective;
-o-perspective: @perspective;
}
.borderImage( @border ) {
border-image: @border;
-ms-border-image: @border;
-moz-border-image: @border;
-webkit-border-image: @border;
-o-border-image: @border;
}
.position( @top, @right, @bottom, @left ) {
top: @top;
right: @right;
bottom: @bottom;
left: @left;
}
.arrow( @size ) {
display: block;
width: 0;
height: 0;
content: '';
border: @size solid transparent;
}
.boxSizing( @str: border-box ) {
box-sizing: @str;
-ms-box-sizing: @str;
-moz-box-sizing: @str;
-webkit-box-sizing: @str;
-o-box-sizing: @str;
}
.gradientV( @start_color , @end_color ) {
background-image: linear-gradient( center bottom, @end_color 0%, @start_color 100% );
background-image: -ms-linear-gradient( center bottom, @end_color 0%, @start_color 100% );
background-image: -moz-linear-gradient( center bottom, @end_color 0%, @start_color 100% );
background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from( @start_color ), to( @end_color ) );
background-image: -o-linear-gradient( center bottom, @end_color 0%, @start_color 100% );
}
.gradientH( @start_color , @end_color ) {
background-image: linear-gradient( left center, @end_color 0%, @start_color 100% );
background-image: -ms-linear-gradient( left center, @end_color 0%, @start_color 100% );
background-image: -moz-linear-gradient( left center, @start_color 0%, @end_color 100% );
background-image: -webkit-gradient( linear, 0% 0%, 100% 0%, from( @start_color ), to( @end_color ) );
background-image: -o-linear-gradient( left center, @end_color 0%, @start_color 100% );
}
.fontSmoothing( @str ) {
font-smoothing: @str;
-ms-font-smoothing: @str;
-moz-font-smoothing: @str;
-webkit-font-smoothing: @str;
-o-font-smoothing: @str;
}
.textOverflow() {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.row( @margin: -2% ) {
margin-left: @margin;
}
.column( @width, @margin: 2% ) {
display: inline;
float: left;
width: @width - @margin;
margin-left: @margin;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment