Lungo.js/src/stylesheets/less/mixins.less

//============================================================
//
// LESS CSS3 Mixins by @soyjavi
//
// @description CSS3 mixins for LESS projects
// @version 1.0.1
//
//============================================================

//============================================================
// Variables
//

@white:             #fff;
@black:				#000;
@black-active:		#000;

@grey:       		#ccc;
@grey-active:		#b5b5b5;

@red:         		#e33100;
@red-active:        #c5280f;

@lightgreen:        #91bd09;
@lightgreen-active: #7ea41a;

@green:         	#009600;
@green-active:      #00770e;

@blue:         		#237fd7;
@blue-active:       #1a69b6;

@arcticblue:        #2daebf;
@arcticblue-active: #238e9e;

@orange:         	#ff5c00;
@orange-active:     #da4e15;

@purple:         	#7b658d;
@purple-active:     #574765;

@magenta:         	#a9014b;
@magenta-active:    #831239;

@pink:         		#ff007f;
@pink-active:       #de2870;

@yellow:         	#ffb515;
@yellow-active:     #dfa020;

@twitter:        	#35cdff;
@twitter-active:    #2bafda;

@facebook:         	#3b5998;
@facebook-active:   #2c4579;

//============================================================

//============================================================
//
// border-radius
//
// @param top-left-radius     :  px, em, %;
// @param top-right-radius    :  px, em, %;
// @param bottom-right-radius :  px, em, %;
// @param bottom-left-radius  :  px, em, %;
//
// @see http://www.w3.org/TR/css3-background/#border-radius
//
//============================================================

.border-radius() {
	-webkit-border-radius: @arguments;
		border-radius: @arguments;

	-webkit-background-clip: padding-box;
		background-clip: padding-box;
}



//============================================================
//
// box-shadow
//
// @param colour              :  #000, rgba, hsla;
// @param horizontal-offset   :  px, em;
// @param vertical-offset     :  px, em;
// @param blur-radius         :  px, em;
// @param spread-distance     :  px, em,
// @param inset               :  inset;
//
// @see http://www.w3.org/TR/css3-background/#box-shadow
//
//============================================================

.box-shadow() {
    -webkit-box-shadow: @arguments;
            box-shadow: @arguments;
}



//============================================================
//
// transform
//
// @param functions           :  matrix()
//                            :  translate()
//                            :  scale()
//                            :  rotate()
//                            :  skew()
//
// @see http://www.w3.org/TR/css3-2d-transforms/
//
//============================================================
.transform() {
    -webkit-transform: @arguments;
            transform: @arguments;
}



//============================================================
//
// translate
//
// @param translate-x         :  px;
// @param translate-y         :  px;
//
// @see http://www.w3.org/TR/css3-2d-transforms/
//
//============================================================

.translate() {
    -webkit-transform: translate(@arguments);
		transform: translate(@arguments);
}



//============================================================
//
// scale
//
// @param scale-x             :  0.5, 2, etc;
// @param scale-y             :  0.5, 2, etc;
//
// @see http://www.w3.org/TR/css3-2d-transforms/
//
//============================================================

.scale() {
    -webkit-transform: scale(@arguments);
            transform: scale(@arguments);
}



//============================================================
//
// rotate
//
// @param angle               :  0deg;
//
// @see http://www.w3.org/TR/css3-2d-transforms/
//
//============================================================

.rotate() {
    -webkit-transform: rotate(@arguments);
            transform: rotate(@arguments);
}



//============================================================
//
// backface-visibility
//
// @param visibility          :  visible | hidden;
//
// @see http://www.w3.org/TR/css3-3d-transforms/
//
//============================================================

.backface-visibility() {
    -webkit-backface-visibility: @arguments;
            backface-visibility: @arguments;
}



//============================================================
//
// transition
//
// @param properties          :  all, left, opacity, etc;
// @param duration            :  1s, 1000ms;
// @param delay               :  1s, 1000ms;
// @param easing              :  linear, ease-in-out, etc;
//
// @see http://www.w3.org/TR/css3-transitions/
//
//============================================================

.transition() {
    -webkit-transition: @arguments;
            transition: @arguments;
}


//============================================================
//
// transition
//
// @param properties          :  all, left, opacity, etc;
// @param duration            :  1s, 1000ms;
// @param delay               :  1s, 1000ms;
// @param easing              :  linear, ease-in-out, etc;
//
// @see http://www.w3.org/TR/css3-transitions/
//
//============================================================

.user-select() {
	-webkit-user-select: @arguments; 
            user-select: @arguments;
}


//============================================================
//
// easing
//
// Thanks to Robert Penner for his sterling work on easing,
// and to Matthew Lein for converting these functions into
// approximated cubic-bezier functions. Respect.
//
// @see http://robertpenner.com/
// @see http://matthewlein.com/ceaser/
//
//============================================================

// Cubic
@easeInCubic     :  cubic-bezier(0.550, 0.055, 0.675, 0.190);
@easeOutCubic    :  cubic-bezier(0.215, 0.610, 0.355, 1.000);
@easeInOutCubic  :  cubic-bezier(0.645, 0.045, 0.355, 1.000);

// Circ
@easeInCirc      :  cubic-bezier(0.600, 0.040, 0.980, 0.335);
@easeOutCirc     :  cubic-bezier(0.075, 0.820, 0.165, 1.000);
@easeInOutCirc   :  cubic-bezier(0.785, 0.135, 0.150, 0.860);

// Expo
@easeInExpo      :  cubic-bezier(0.950, 0.050, 0.795, 0.035);
@easeOutExpo     :  cubic-bezier(0.190, 1.000, 0.220, 1.000);
@easeInOutExpo   :  cubic-bezier(1.000, 0.000, 0.000, 1.000);

// Quad
@easeInQuad      :  cubic-bezier(0.550, 0.085, 0.680, 0.530);
@easeOutQuad     :  cubic-bezier(0.250, 0.460, 0.450, 0.940);
@easeInOutQuad   :  cubic-bezier(0.455, 0.030, 0.515, 0.955);

// Quart
@easeInQuart     :  cubic-bezier(0.895, 0.030, 0.685, 0.220);
@easeOutQuart    :  cubic-bezier(0.165, 0.840, 0.440, 1.000);
@easeInOutQuart  :  cubic-bezier(0.770, 0.000, 0.175, 1.000);

// Quint
@easeInQuint     :  cubic-bezier(0.755, 0.050, 0.855, 0.060);
@easeOutQuint    :  cubic-bezier(0.230, 1.000, 0.320, 1.000);
@easeInOutQuint  :  cubic-bezier(0.860, 0.000, 0.070, 1.000);

// Sine
@easeInSine      :  cubic-bezier(0.470, 0.000, 0.745, 0.715);
@easeOutSine     :  cubic-bezier(0.390, 0.575, 0.565, 1.000);
@easeInOutSine   :  cubic-bezier(0.445, 0.050, 0.550, 0.950);