Skip to content

jalners/less-mixins

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LESS Mixins

I present to you a library of LESS mixins.

How to use

@import "mixins.less";

List of mixins

§ Animation

- animation

Description:

.animation(@animation);

Parameters:

@animation
	Set of parameters separated by spaces.
	Order of the parameters:
		animation-name
		animation-duration
		animation-timing-function
		animation-delay
		animation-iteration-count
		animation-directionanimation-fill-mode

Example:

div {
	.animation(nameAnimation 3s linear 1s);
}

CSS output:

div {
	-webkit-animation: nameAnimation 3s linear 1s;
	   -moz-animation: nameAnimation 3s linear 1s;
	     -o-animation: nameAnimation 3s linear 1s;
	        animation: nameAnimation 3s linear 1s;
}

- animation-name

Description:

.animation-name(@name);

Parameters:

@name
	Specifies the name of the @keyframes animation.

Example:

div {
	.animation-name(nameAnimation);
}

CSS output:

div {
	-webkit-animation-name: nameAnimation;
	   -moz-animation-name: nameAnimation;
	     -o-animation-name: nameAnimation;
	        animation-name: nameAnimation;
}

- animation-duration

Description:

.animation-duration(@duration);

Parameters:

@duration
	Specifies how many seconds or milliseconds an animation takes to complete one cycle.

Example:

div {
	.animation-duration(3s);
}

CSS output:

div {
	-webkit-animation-duration: 3s;
	   -moz-animation-duration: 3s;
	     -o-animation-duration: 3s;
	        animation-duration: 3s;
}

- animation-timing-function

Description:

.animation-timing-function(@timing-function);

Parameters:

@timing-function
	Specifies the speed curve of the animation.

Example:

div {
	.animation-timing-function(linear);
}

CSS output:

div {
	-webkit-animation-timing-function: linear;
	   -moz-animation-timing-function: linear;
	     -o-animation-timing-function: linear;
	        animation-timing-function: linear;
}

- animation-delay

Description:

.animation-delay(@delay);

Parameters:

@delay
	Specifies when the animation will start.

Example:

div {
	.animation-delay(1s);
}

CSS output:

div {
	-webkit-animation-delay: 1s;
	   -moz-animation-delay: 1s;
	     -o-animation-delay: 1s;
	        animation-delay: 1s;
}

- animation-iteration-count

Description:

.animation-iteration-count(@iteration-count);

Parameters:

@iteration-count
	Specifies the number of times an animation should be played.

Example:

div {
	.animation-iteration-count(3);
}

CSS output:

div {
	-webkit-animation-iteration-count: 3;
	   -moz-animation-iteration-count: 3;
	     -o-animation-iteration-count: 3;
	        animation-iteration-count: 3;
}

- animation-direction

Description:

.animation-direction(@direction);

Parameters:

@direction
	Specifies whether or not the animation should play in reverse on alternate cycles.

Example:

div {
	.animation-direction(alternate);
}

CSS output:

div {
	-webkit-animation-direction: alternate;
	   -moz-animation-direction: alternate;
	     -o-animation-direction: alternate;
	        animation-direction: alternate;
}

- animation-fill-mode

Description:

.animation-fill-mode(@fill-mode);

Parameters:

@fill-mode
	Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay").

Example:

div {
	.animation-fill-mode(backwards);
}

CSS output:

div {
	-webkit-animation-fill-mode: backwards;
	   -moz-animation-fill-mode: backwards;
	     -o-animation-fill-mode: backwards;
	        animation-fill-mode: backwards;
}

§ Border

- border-radius

Description:

.border-radius(@topLeft: 0, @topRight: 0, @bottomRight: 0, @bottomLeft: 0);

Parameters:

@topLeft (defaults to '0')
	Property for setting of the top-left corner of the element.
@topRight (defaults to '0')
	Property for setting of the top-right corner of the element.
@bottomRight (defaults to '0')
	Property for setting of the bottom-right corner of the element.
@bottomLeft (defaults to '0')
	Property for setting of the bottom-left corner of the element.

Example:

div {
	.border-radius(5px, 15px, 10px, 20px);
}

CSS output:

div {
	-webkit-border-top-left-radius: 5px;
	    -moz-border-radius-topleft: 5px;
	        border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 15px;
	    -moz-border-radius-topright: 15px;
	        border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 10px;
	    -moz-border-radius-bottomright: 10px;
	        border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 20px;
	    -moz-border-radius-bottomleft: 20px;
	        border-bottom-left-radius: 20px;
	-webkit-background-clip: padding-box;
       -moz-background-clip: padding;    
            background-clip: padding-box;
}

- bordered

Description:

.bordered(@color: #eee, @width: 1px);

Parameters:

@color (defaults to '#eee')
	Color of the border.
@width (defaults to '1px')
	Width of the border.

Example:

div {
	.bordered(#ccc, 2px);
}

p {
	.bordered();
}

CSS output:

div {
	border: 2px solid #ccc;
}

p {
	border: 1px solid #eee;
}

- rounded

Description:

.rounded(@radius: 5px);

Parameters:

@radius (defaults to '5px')
	Radius of the all corner of the element.

Example:

div {
	.rounded(2px);
}

p {
	.rounded();
}

CSS output:

div {
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
	-webkit-background-clip: padding-box;
	   -moz-background-clip: padding;    
	        background-clip: padding-box;
}

p {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
	-webkit-background-clip: padding-box;
	   -moz-background-clip: padding;    
	        background-clip: padding-box;
}

§ Gradient

- gradient-v

Description:

.gradient-v(@startColor: #eee, @endColor: #fff);

Parameters:

@startColor (defaults to '#eee')
	Starting color of the gradient.
@endColor (defaults to '#fff')
	End color of the gradient.

Example:

div {
	.gradient-v(#aaa, #ddd);
}

p {
	.gradient-v();
}

CSS output:

div {
	background: #aaa;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(100%,#ddd));
	background: -webkit-linear-gradient(top, #aaa 0%,#ddd 100%);
	background: -moz-linear-gradient(top, #aaa 0%, #ddd 100%);
	background: -ms-linear-gradient(top, #aaa 0%, #ddd 100%);
	background: -o-linear-gradient(top, #aaa 0%, #ddd 100%);
	background: linear-gradient(to bottom, #aaa 0%, #ddd 100%);
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",#aaa,#ddd));
}

p {
	background: #eee;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#fff));
	background: -webkit-linear-gradient(top, #eee 0%,#fff 100%);
	background: -moz-linear-gradient(top, #eee 0%, #fff 100%);
	background: -ms-linear-gradient(top,  #eee 0%, #fff 100%);
	background: -o-linear-gradient(top, #eee 0%, #fff 100%);
	background: linear-gradient(to bottom, #eee 0%, #fff 100%);
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",#eee,#fff));
}

- gradient-h

Description:

.gradient-h(@startColor: #eee, @endColor: #fff);

Parameters:

@startColor (defaults to '#eee')
	Starting color of the gradient.
@endColor (defaults to '#fff')
	End color of the gradient.

Example:

div {
	.gradient-h(#aaa, #ddd);
}

p {
	.gradient-h();
}

CSS output:

div {
	background: #aaa;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#aaa), color-stop(100%,#ddd));
	background: -webkit-linear-gradient(left, #aaa 0%,#ddd 100%);
	background: -moz-linear-gradient(left, #aaa 0%, #ddd 100%);
	background: -ms-linear-gradient(left, #aaa 0%, #ddd 100%);
	background: -o-linear-gradient(left, #aaa 0%, #ddd 100%);
	background: linear-gradient(to right, #aaa 0%, #ddd 100%);
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",#aaa,#ddd));
}

p {
	background: #eee;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eee), color-stop(100%,#fff));
	background: -webkit-linear-gradient(left, #eee 0%,#fff 100%);
	background: -moz-linear-gradient(left, #eee 0%, #fff 100%);
	background: -ms-linear-gradient(left,  #eee 0%, #fff 100%);
	background: -o-linear-gradient(left, #eee 0%, #fff 100%);
	background: linear-gradient(to right, #eee 0%, #fff 100%);
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",#eee,#fff));
}

§ Shadow

- box-shadow

Description:

.box-shadow(@shadow);

Parameters:

@shadow
	Properties of the shadow such as:
		offset-x
		offset-y
		spread-distance
		blur-radius
		color
		inset

Example:

div {
	.box-shadow(10px 5px 5px rgba(10,10,10,0.5));
}

CSS output:

div {
	-webkit-box-shadow: 10px 5px 5px rgba(10,10,10,0.5);
	   -moz-box-shadow: 10px 5px 5px rgba(10,10,10,0.5);
	        box-shadow: 10px 5px 5px rgba(10,10,10,0.5);
}

- inner-shadow

Description:

.inner-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.4);

Parameters:

@horizontal (defaults to '0')
	Horizontal offset of the shadow.
@vertical (defaults to '1px')
	Vertical offset of the shadow.
@blur (defaults to '2px')
	Blur radius.
@alpha (defaults to '0.4')
	Alpha channel for the RGB color.

Example:

div {
	.inner-shadow(4px, 5px, 3px, @alpha: 0.5);
}

p {
	.inner-shadow();
}

CSS output:

div {
	-webkit-box-shadow: inset 4px 5px 3px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: inset 4px 5px 3px rgba(0, 0, 0, 0.5);
	        box-shadow: inset 4px 5px 3px rgba(0, 0, 0, 0.5);
}

p {
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
	   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
	        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

- outer-shadow

Description:

.outer-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.1)

Parameters:

@horizontal (defaults to '0')
	Horizontal offset of the shadow.
@vertical (defaults to '1px')
	Vertical offset of the shadow.
@blur (defaults to '2px')
	Blur radius.
@alpha (defaults to '0.1')
	Alpha channel for the RGB color.

Example:

div {
	.outer-shadow(4px, 5px, 3px, @alpha: 0.5);
}

p {
	.outer-shadow();
}

CSS output:

div {
	-webkit-box-shadow: 4px 5px 3px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 4px 5px 3px rgba(0, 0, 0, 0.5);
	        box-shadow: 4px 5px 3px rgba(0, 0, 0, 0.5);
}

p {
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

§ Size and position

- size

Description:

.size(@width, @height);

Parameters:

@width
	Width of the element.
@height
	Height of the element.

Example:

div {
	.size(200px, 150px);
}

CSS output:

div {
	width: 200px;
	height: 150px;
}

- square

Description:

.square(@size);

Parameters:

@size
	Element dimensions.

Example:

div {
	.square(300px);
}

CSS output:

div {
	width: 300px;
	height: 300px;
}

- center-block

Description:

.center-block();

Parameters:

none

Example:

div {
	.center-block();
}

CSS output:

div {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

§ Transform

- rotate

Description:

.rotate(@deg);

Parameters:

@deg
	Angle of the rotation.

Example:

div {
	.rotate(360deg);
}

CSS output:

div {
	-webkit-transform: rotate(360deg);
	   -moz-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
	     -o-transform: rotate(360deg);
	        transform: rotate(360deg);
}

- scale with one parameter

Description:

.scale(@ratio);

Parameters:

@ratio
	The ratio of the scale transformation.

Example:

div {
	.scale(3);
}

CSS output:

div {
	-webkit-transform: scale(3);
	   -moz-transform: scale(3);
	    -ms-transform: scale(3);
	     -o-transform: scale(3);
	        transform: scale(3);
}

- scale with two parameters

Description:

.scale(@ratioX, @ratioY);

Parameters:

@ratioX
	The ratio of the X-axis scale transformation.
@ratioY
	The ratio of the Y-axis scale transformation.

Example:

div {
	.scale(2, 0.5);
}

CSS output:

div {
	-webkit-transform: scale(2, 0.5);
	   -moz-transform: scale(2, 0.5);
	    -ms-transform: scale(2, 0.5);
	     -o-transform: scale(2, 0.5);
	        transform: scale(2, 0.5);
}

- scaleX

Description:

.scaleX(@ratio);

Parameters:

@ratio
	The ratio of the X-axis scale transformation.

Example:

div {
	.scaleX(1.5);
}

CSS output:

div {
	-webkit-transform: scaleX(1.5);
	   -moz-transform: scaleX(1.5);
	    -ms-transform: scaleX(1.5);
	     -o-transform: scaleX(1.5);
	        transform: scaleX(1.5);
}

- scaleY

Description:

.scaleY(@ratio);

Parameters:

@ratio
	The ratio of the Y-axis scale transformation.

Example:

div {
	.scaleY(2.5);
}

CSS output:

div {
	-webkit-transform: scaleY(2.5);
	   -moz-transform: scaleY(2.5);
	    -ms-transform: scaleY(2.5);
	     -o-transform: scaleY(2.5);
	        transform: scaleY(2.5);
}

- skewX

Description:

.skewX(@deg);

Parameters:

@deg
	Angle of the X-axis skew.

Example:

div {
	.skewX(4deg);
}

CSS output:

div {
	-webkit-transform: skewX(4deg);
	   -moz-transform: skewX(4deg);
	    -ms-transform: skewX(4deg);
	     -o-transform: skewX(4deg);
	        transform: skewX(4deg);
}

- skewY

Description:

.skewY(@deg);

Parameters:

@deg
	Angle of the Y-axis skew.

Example:

div {
	.skewY(4deg);
}

CSS output:

div {
	-webkit-transform: skewY(4deg);
	   -moz-transform: skewY(4deg);
	    -ms-transform: skewY(4deg);
	     -o-transform: skewY(4deg);
	        transform: skewY(4deg);
}

- translate with one parameter

Description:

.translate(@ratio);

Parameters:

@ratio
	Value of the X-axis translation.

Example:

div {
	.translate(12px);
}

CSS output:

div {
	-webkit-transform: translate(12px);
	   -moz-transform: translate(12px);
	    -ms-transform: translate(12px);
	     -o-transform: translate(12px);
	        transform: translate(12px);
}

- translate with two parameters

Description:

.translate(@ratioX, @ratioY);

Parameters:

@ratioX
	Value of the X-axis translation.
@ratioY
	Value of the Y-axis translation.

Example:

div {
	.translate(12px, 40%);
}

CSS output:

div {
	-webkit-transform: translate(12px, 40%);
	   -moz-transform: translate(12px, 40%);
	    -ms-transform: translate(12px, 40%);
	     -o-transform: translate(12px, 40%);
	        transform: translate(12px, 40%);
}

- translateX

Description:

.translateX(@ratio);

Parameters:

@ratio
	Value of the X-axis translation.

Example:

div {
	.translateX(12px);
}

CSS output:

div {
	-webkit-transform: translateX(12px);
	   -moz-transform: translateX(12px);
	    -ms-transform: translateX(12px);
	     -o-transform: translateX(12px);
	        transform: translateX(12px);
}

- translateY

Description:

.translateY(@ratio);

Parameters:

@ratio
	Value of the Y-axis translation.

Example:

div {
	.translateY(20%);
}

CSS output:

div {
	-webkit-transform: translateY(20%);
	   -moz-transform: translateY(20%);
	    -ms-transform: translateY(20%);
	     -o-transform: translateY(20%);
	        transform: translateY(20%);
}

§ Transition

- transition

Description:

.transition(@transition);

Parameters:

@transition
	A shorthand property for setting the four transition properties into a single property.

Example:

div {
	.transition(width 2s);
}

CSS output:

div {
	-webkit-transition: width 2s;
	   -moz-transition: width 2s;
	     -o-transition: width 2s;
	        transition: width 2s;
}

- transition-all

Description:

.transition-all(@duration: 0.2s, @timing-function: ease-out);

Parameters:

@duration (defaults to '0.2s')
	Specifies how many seconds or milliseconds a transition effect takes to complete.
@timing-function (defaults to 'ease-out')
	Specifies the speed curve of the transition effect.

Example:

div {
	.transition-all(1s linear);
}

p {
	.transition-all();
}

CSS output:

div {
	-webkit-transition: all 1s linear;
	   -moz-transition: all 1s linear;
	     -o-transition: all 1s linear;
	        transition: all 1s linear;
}

p {
	-webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;
}

- transition-property

Description:

.transition-property(@property);

Parameters:

@property
	Specifies the name of the CSS property the transition effect is for.

Example:

div {
	.transition-property(height);
}

CSS output:

div {
	-webkit-transition-property: height;
	   -moz-transition-property: height;
	     -o-transition-property: height;
	        transition-property: height;
}

- transition-duration

Description:

.transition-duration(@duration: 0.2s);

Parameters:

@duration (defaults to '0.2s')
	Specifies how many seconds or milliseconds a transition effect takes to complete.

Example:

div {
	.transition-duration(2s);
}

p {
	.transition-duration();
}

CSS output:

div {
	-webkit-transition-duration: 2s;
	   -moz-transition-duration: 2s;
	     -o-transition-duration: 2s;
	        transition-duration: 2s;
}

p {
	-webkit-transition-duration: 0.2s;
	   -moz-transition-duration: 0.2s;
	     -o-transition-duration: 0.2s;
	        transition-duration: 0.2s;
}

- transition-timing-function

Description:

.transition-timing-function(@timing-function);

Parameters:

@timing-function
	Specifies the speed curve of the transition effect.

Example:

div {
	.transition-timing-function(linear);
}

CSS output:

div {
	-webkit-transition-timing-function: linear;
	   -moz-transition-timing-function: linear;
	     -o-transition-timing-function: linear;
	        transition-timing-function: linear;
}

- transition-delay

Description:

.transition-delay(@delay);

Parameters:

@delay
	Specifies when the transition effect will start.

Example:

div {
	.transition-delay(1s);
}

CSS output:

div {
	-webkit-transition-delay: 1s;
	   -moz-transition-delay: 1s;
	     -o-transition-delay: 1s;
	        transition-delay: 1s;
}

§ Common

- box-sizing

Description:

.box-sizing (@type: border-box);

Parameters:

@type (defaults to 'border-box')
	Tell the browser what the sizing properties (width and height) should include.

Example:

div {
	.box-sizing (@type: content-box);
}

p {
	.box-sizing();
}

CSS output:

div {
	-webkit-box-sizing: content-box;
	   -moz-box-sizing: content-box;
	        box-sizing: content-box;
}

p {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

- clear-fix

Description:

.clear-fix();

Parameters:

none

Example:

div {
	.clear-fix();
}

CSS output:

div {
	*zoom: 1;
}

div:before, div:after {
	content: " ";
	display: table;
}

div:after {
	clear: both;
}

- hide

Description:

.hide();

Parameters:

none

Example:

div {
	.hide();
}

CSS output:

div {
	display: none !important;
}

- show

Description:

.show();

Parameters:

none

Example:

div {
	.show();
}

CSS output:

div {
	display: block !important;
}

- inline-block

Description:

.inline-block();

Parameters:

none

Example:

div {
	.inline-block();
}

CSS output:

div {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

- opacity

Description:

.opacity(@opacity: 0.5);

Parameters:

@opacity (defaults to '0.5')
	Opacity of the element.

Example:

div {
	.opacity(0.9);
}

p {
	.opacity();
}

CSS output:

div {
	-webkit-opacity: 0.9;
	   -moz-opacity: 0.9;
		    opacity: 0.9;
	@opperc: 0.9 * 100;
	-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
	    filter: ~"alpha(opacity=@{opperc})";
}

p {
	-webkit-opacity: 0.5;
	   -moz-opacity: 0.5;
		    opacity: 0.5;
	@opperc: 0.5 * 100;
	-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
	    filter: ~"alpha(opacity=@{opperc})";
}

- user-select

Description:

.user-select(@select: none);

Parameters:

@select (defaults to 'none')
	Selectable or unselectable text.

Example:

div {
	.user-select(text);
}

p {
	.user-select();
}

CSS output:

div {
	-webkit-user-select: text;
	   -moz-user-select: text;
	    -ms-user-select: text;
	     -o-user-select: text;
	        user-select: text;
}

p {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	     -o-user-select: none;
	        user-select: none;
}

- placeholder

Description:

.placeholder(@color);

Parameters:

@color
	Color of the placeholder text in the input field.

Example:

div {
	.placeholder(#777);
}

CSS output:

div::-webkit-input-placeholder {
	color: #777;
}

div::-moz-placeholder {
	color: #777;
	opacity: 1;
}

div:-ms-input-placeholder {
	color: #777;
}

License

Copyright © 2014 Alexey Neretin. Licensed under the MIT license.

About

A library of LESS mixins

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published