Missing Mixins

mixins.less

// Triangles and arrows
.triangle-props {
	content: "";
	display: block;
	position: absolute;
}
.triangle-upper-left(@size; @color) {
	border-color: @color transparent transparent @color;
	border-style: solid;
	border-width: @size @size 0 1px;
	.triangle-props();
}
.triangle-upper-right(@size; @color) {
	border-color: @color transparent @color transparent;
	border-style: solid;
	border-width: @size 0 0 @size;
	.triangle-props();
}
.triangle-lower-right(@size; @color) {
	border-color: transparent @color @color transparent;
	border-style: solid;
	border-width: 0 0 @size @size;
	.triangle-props();
}
.triangle-lower-left(@size; @color) {
	border-color: @color transparent @color transparent;
	border-style: solid;
	border-width: 0 @size @size 0;
	.triangle-props();
}
.triangle-down(@size; @color) {
	border-color: @color transparent transparent;
	border-style: solid;
	border-width: @size @size 0 @size;
	.triangle-props();
}
.arrow-left(@size; @color; @width; @height) {
	border-top: @size solid transparent;
	border-bottom: @size solid transparent;
	border-right: @size solid @color;
	width: @width;
	height: @height;
	.triangle-props();
}
.arrow-right(@size; @color; @width; @height) {
	border-top: @size solid transparent;
	border-bottom: @size solid transparent;
	border-left: @size solid @color;
	width: @width;
	height: @height;
	.triangle-props();
}
.arrow-up(@size; @color; @width; @height) {
	border-left: @size solid transparent;
	border-right: @size solid transparent;
	border-bottom: @size solid @color;
	width: @width;
	height: @height;
	.triangle-props();
}
.arrow-down(@size; @color; @width; @height) {
	border-left: @size solid transparent;
	border-right: @size solid transparent;
	border-top: @size solid @color;
	width: @width;
	height: @height;
	.triangle-props();
}


// Extensions Left/Right
.extend-left(@color; @height; @width: 100%) {
	&:before {
		background-color: @color;
		content: "";
		left: -@width;
		top: 0;
		position: absolute;
		height: @height;
		width: @width;
		z-index: 1;
	}
}
.extend-right(@color; @height; @width: 100%) {
	&:after {
		background-color: @color;
		content: "";
		right: -@width;
		top: 0;
		position: absolute;
		height: @height;
		width: @width;
		z-index: 1;
	}
}


// menu icon treatment
.hamburger-menu(@width: 25px,@height: 2px, @spacing: 4px, @background-color: #9b9d9f) {
	span.icon {
		background: none repeat scroll 0 0 @background-color;
		margin: @height+@spacing 0;
		display: inline-block;
		height: @height;
		position: relative;
		width: @width;
		transition: all 0.3s ease;

		&:before,
		&:after {
			background: none repeat scroll 0 0 @background-color;
			content: "";
			display: block;
			height: @height;
			position: absolute;
			top: -(@height+@spacing);
			width: @width;

			transition: all 0.3s ease;
			.rotate(0);
		}
		&:after {
			bottom: -(@height+@spacing);
			top: inherit;
		}
	}
	&.active span.icon {
		background: transparent;

		&:before,
		&:after {
			.rotate(45deg);
			top: 0;
		}
		&:after {
			.rotate(-45deg);
		}
	}
}