harness-drone/server/app/styles/base.less

// Base less file with helper mixins

.hidden {
	display: none !important;
	visibility: hidden;
}

.invisible {
	visibility: hidden;
}


.clearfix {
	*zoom: 1;
	&:before,
	&:after { content: ""; display: table; }
	&:after { clear: both; }
}

.nowrap {
	white-space:nowrap;
}

.opacity(@num) {
	opacity:@num;
	@num2:@num*100;
	filter:alpha(opacity=@num2);
}

.grayscale(@num:1) {
	-webkit-filter: grayscale(@num);
	   -moz-filter: grayscale(@num);
	  	-ms-filter: grayscale(@num);
		 -o-filter: grayscale(@num);
			filter: grayscale(@num);
}

.transition(@transString: 0) when not (@transString = 0) {
    -webkit-transition: @transString;
       -moz-transition: @transString;
        -ms-transition: @transString;
         -o-transition: @transString;
            transition: @transString;
}

.gradient(@c1, @c2, @direction:top){
	background:@c2;
	background-image: -webkit-linear-gradient(@direction, @c1, @c2);
	background-image:    -moz-linear-gradient(@direction, @c1, @c2);
	background-image:     -ms-linear-gradient(@direction, @c1, @c2);
	background-image:      -o-linear-gradient(@direction, @c1, @c2);
	background-image:         linear-gradient(@direction, @c1, @c2);
}

.gradient2(@c1, @c2, @c3, @direction:top){
	background:@c3;
	background-image: -webkit-linear-gradient(@direction, @c1, @c2, @c3);
	background-image:    -moz-linear-gradient(@direction, @c1, @c2, @c3);
	background-image:     -ms-linear-gradient(@direction, @c1, @c2, @c3);
	background-image:      -o-linear-gradient(@direction, @c1, @c2, @c3);
	background-image:         linear-gradient(@direction, @c1, @c2, @c3);
}

.rotate(@deg){
	-webkit-transform:rotate(@deg);
	   -moz-transform:rotate(@deg);
		-ms-transform:rotate(@deg);
		 -o-transform:rotate(@deg);
			transform:rotate(@deg);
}

.origin(@o){
	-webkit-transform-origin:@o;
	   -moz-transform-origin:@o;
		-ms-transform-origin:@o;
		 -o-transform-origin:@o;
			transform-origin:@o;
}

.filter(@param){
	-webkit-filter:@param;
	   -moz-filter:@param;
		-ms-filter:@param;
		 -o-filter:@param;
			filter:@param;
}

.animation(@a){
	-webkit-animation:@a;
	   -moz-animation:@a;
		-ms-animation:@a;
		 -o-animation:@a;
			animation:@a;
}

.perspective(@a){
	-webkit-perspective:@a;
	   -moz-perspective:@a;
		-ms-perspective:@a;
		 -o-perspective:@a;
			perspective:@a;
}

.border_box {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		 -o-box-sizing:border-box;
			box-sizing:border-box;
}

.transform(@param){
	-webkit-transform:@param;
	   -moz-transform:@param;
		-ms-transform:@param;
		 -o-transform:@param;
			transform:@param;
}

.fix3d {
	-webkit-transform:translate3D(0, 0, 0); //fix 3d flashing
}

.border_box {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		 -o-box-sizing:border-box;
			box-sizing:border-box;
}

.invert {
	-webkit-filter:invert(100%);
	   -moz-filter:invert(100%);
		-ms-filter:invert(100%);
		 -o-filter:invert(100%);
			filter:invert(100%);
}

.animation(@a){
	-webkit-animation:@a;
	   -moz-animation:@a;
		-ms-animation:@a;
		 -o-animation:@a;
			animation:@a;
}

.animation_delay(@a){
	-webkit-animation-delay:@a;
	   -moz-animation-delay:@a;
		-ms-animation-delay:@a;
		 -o-animation-delay:@a;
			animation-delay:@a;
}

.transition_delay(@a){
	-webkit-transition-delay:@a;
	   -moz-transition-delay:@a;
		-ms-transition-delay:@a;
		 -o-transition-delay:@a;
			transition-delay:@a;
}


.columns(@a){
	-webkit-columns:@a;
	   -moz-columns:@a;
		-ms-columns:@a;
		 -o-columns:@a;
			columns:@a;
}