Skip to content

Instantly share code, notes, and snippets.

@cameroooon

cameroooon/lib.less

Created June 21, 2012 04:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cameroooon/2963812 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cameroooon/2963812 to your computer and use it in GitHub Desktop.
Download ZIP
A library of LESS CSS mixins and functions
Raw
lib.less
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// LESS CSS Styles
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Vendor Prefix Groups
// ---------------------------------------------------
.border-radius (@radius) {
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
-o-border-radius:@radius;
-ms-border-radius:@radius;
border-radius:@radius;
}
.border-radius-tab (@radius) {
-moz-border-radius:@radius @radius 0 0;
-webkit-border-radius:@radius @radius 0 0;
-o-border-radius:@radius @radius 0 0;
-ms-border-radius:@radius @radius 0 0;
border-radius:@radius @radius 0 0;
}
.border-radius-each (@tl, @tr, @br, @bl) {
-moz-border-radius:@tl @tr @br @bl;
-webkit-border-radius:@tl @tr @br @bl;
-o-border-radius:@tl @tr @br @bl;
-ms-border-radius:@tl @tr @br @bl;
border-radius:@tl @tr @br @bl;
}
.box-shadow(@x, @y, @spread, @color) {
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
-o-box-shadow:@arguments;
-ms-box-shadow:@arguments;
box-shadow:@arguments;
}
.box-shadow-inset(@x, @y, @spread, @color) {
-moz-box-shadow:inset @arguments;
-webkit-box-shadow:inset @arguments;
-o-box-shadow:inset @arguments;
-ms-box-shadow:inset @arguments;
box-shadow:inset @arguments;
}
.box-shadow-out-in(@outx, @outy, @outspread, @outcolor, @inx, @iny, @inspread, @incolor,) {
-moz-box-shadow:@outx @outy @outspread @outcolor, inset @inx @iny @inspread @incolor;
-webkit-box-shadow:@outx @outy @outspread @outcolor, inset @inx @iny @inspread @incolor;
-o-box-shadow:@outx @outy @outspread @outcolor, inset @inx @iny @inspread @incolor;
-ms-box-shadow:@outx @outy @outspread @outcolor, inset @inx @iny @inspread @incolor;
box-shadow:@outx @outy @outspread @outcolor, inset @inx @iny @inspread @incolor;
}
.text-shadow(@x, @y, @spread, @color) {
-moz-text-shadow: @x @y @spread @color;
-webkit-text-shadow: @x @y @spread @color;
-o-text-shadow: @x @y @spread @color;
-ms-text-shadow: @x @y @spread @color;
text-shadow: @x @y @spread @color;
}
.transition(@elem, @dur, @type, @delay) {
-moz-transition: @elem @dur @type @delay;
-webkit-transition: @elem @dur @type @delay;
-o-transition: @elem @dur @type @delay;
-ms-transition: @elem @dur @type @delay;
transition: @elem @dur @type @delay;
}
.transition-all(@dur) {
-moz-transition: all @dur linear 0s;
-webkit-transition: all @dur linear 0s;
-o-transition: all @dur linear 0s;
-ms-transition: all @dur linear 0s;
transition: all @dur linear 0s;
}
.transition-transform(transform, @dur, @type, @delay) {
-moz-transition: -moz-transform @dur @type @delay;
-webkit-transition: -webkit-transform @dur @type @delay;
-o-transition: -o-transform @dur @type @delay;
-ms-transition: -ms-transform @dur @type @delay;
transition: transform @dur @type @delay;
}
.transform(@transforms) {
-moz-transform:@transforms;
-webkit-transform:@transforms;
-o-transform:@transforms;
-ms-transform:@transforms;
transform:@transforms;
}
.transform-style(@type) {
-moz-transform-style:@type;
-webkit-transform-style:@type;
-o-transform-style:@type;
-ms-transform-style:@type;
transform-style:@type;
}
.multicol(@count, @wdth, @gap, @rule) {
-moz-column-count:@count;
-moz-column-width:@wdth;
-moz-column-gap:@gap;
-moz-column-rule:@rule;
-webkit-column-count:@count;
-webkit-column-width:@wdth;
-webkit-column-gap:@gap;
-webkit-column-rule:@rule;
-o-column-count:@count;
-o-column-width:@wdth;
-o-column-gap:@gap;
-o-column-rule:@rule;
-ms-column-count:@count;
-ms-column-width:@wdth;
-ms-column-gap:@gap;
-ms-column-rule:@rule;
column-count:@count;
column-width:@wdth;
column-gap:@gap;
column-rule:@rule;
}
.borderimage(@url, @cnrs, @type) {
-moz-border-image:url(@url) @cnrs @type;
-webkit-border-image:url(@url) @cnrs @type;
-o-border-image:url(@url) @cnrs @type;
-ms-border-image:url(@url) @cnrs @type;
border-image:url(@url) @cnrs @type;
}
.box-sizing(@type) {
-moz-box-sizing:@type;
-webkit-box-sizing:@type;
-o-box-sizing:@type;
-ms-box-sizing:@type;
box-sizing:@type;
}
.background-origin(@type) {
-moz-background-origin:@type;
-webkit-background-origin:@type;
-o-background-origin:@type;
-ms-background-origin:@type;
background-origin:@type;
}
.background-clip(@type) {
-moz-background-clip:@type;
-webkit-background-clip:@type;
-o-background-clip:@type;
-ms-background-clip:@type;
background-clip:@type;
}
.gradient(@color: @greenmid, @start: @greenbtm, @stop: @greentop) {
background: @color;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @start), color-stop(1, @stop));
background: -ms-linear-gradient(bottom, @start, @stop);
background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%);
}
// Font-sizes include 2 declarations:
// 1. px value for old IE, followed by
// 2. rem value for modern browsers (overriding the above, while the old, baffled browsers ignore it)
// Why? snook.ca/s/997
.font-size(@sizeValue){
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
// Functions
// ---------------------------------------------------
.img-replace(@w, @h, @bgimgurl) {
width:@w;
height:0;
padding-top:@h;
overflow:hidden;
background: transparent url(@bgimgurl) no-repeat center center;
}
.element-reset(@display: block) {
width:auto;
height:auto;
padding:0;
margin:0;
display:@display;
background:transparent repeat center;
color:@grey;
position:relative;
top:auto;
left:auto;
bottom:auto;
right:auto;
border:none;
.border-radius(0);
.text-shadow(0, 0, 0, transparent);
.box-shadow(0, 0, 0, transparent);
float:none;
text-transform:none;
font-size:14px;
content:normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment