shapesExample.less

/*
 * Sample Page
 */

body {
	background:#666;
	font-family:Georgia;
}

article {
	background:#EEEEEE;
	width:650px;
	margin: 2em auto;
	-webkit-border-radius: 2em;
	   -moz-border-radius: 2em;
	        border-radius: 2em;

	header {
		padding:2em 2.5em 0;
	}
	h1 {
		font-size:2.5em;
	}
	footer {
		padding:5em 2.5em 1em;
	}
	p {
		font-size:1em;
		line-height:1.5em;
	}
	h3, h4 {
		background:#CBCBCB;
		padding:0.3em 0.3em 0.3em 2.25em;
		margin-top:3em;
	}
	.shapespacer {
		margin:0 2.5em;
	}
	pre {
		font-size:1em;
		margin:1em 3em;
		background-color:#333;
		padding:0.5em;
		color:#FFF;
	}
}


/*
 * Shapes!
 */
@import "shapesLib.less";
@exampleSize: 100px;

.square {
	.square(@exampleSize);
}
.square2 {
	.square(10px, #F0F);
}
.circle {
	.circle(@exampleSize);
}
.rectangle {
	.rectangle(@exampleSize);
}
.oval {
	.oval(@exampleSize);
}
.triangle-up {
	.triangle-up(@exampleSize);
}
.triangle-down {
	.triangle-down(@exampleSize);
}
.triangle-left {
	.triangle-left(@exampleSize);
}
.triangle-right {
	.triangle-right(@exampleSize);
}
.triangle-topleft {
	.triangle-topleft(@exampleSize);
}
.triangle-topright {
	.triangle-topright(@exampleSize);
}
.triangle-bottomleft {
	.triangle-bottomleft(@exampleSize);
}
.triangle-bottomright {
	.triangle-bottomright(@exampleSize);
}
.parallelogram {
	.parallelogram(@exampleSize);
}
.parallelogram2 {
	.parallelogram(@exampleSize, 40deg);
}
.parallelogram3 {
	.parallelogram(@exampleSize, 340deg);
}
.trapezoid {
	.trapezoid(@exampleSize);
}
.star-six {
	.star-six(@exampleSize);
	margin:0 0 3em 0;
}
.star-five {
	.star-five(@exampleSize);
	margin:3em 0;
}
.pentagon {
	.pentagon(@exampleSize);
	margin:3em 0 1em;
}
.hexagon {
	.hexagon(@exampleSize);
	margin:2em 0;
}
.octagon {
	.octagon(@exampleSize, #EEE);
	margin:2em 0;
}
.heart {
	.heart(@exampleSize);
}
.infinity {
	.infinity(@exampleSize);
}

.diamond {
	.diamond(@exampleSize);
}
.egg {
	.egg(@exampleSize);
}
.pacman {
	.pacman(@exampleSize);
}
.talkbubble1 {
	.talkbubble(@exampleSize);
	margin-left:2em;
}
.talkbubble2 {
	.talkbubble(@exampleSize*2.5, 80px);
	margin-left:2em;
}
.burst-12 {
	.burst-12(@exampleSize);
	margin:2em;
}
.burst-8 {
	.burst-8(@exampleSize);
	margin:1.5em;
}
.cut-diamond {
	.cut-diamond(100px, #CCF); // periwinkle
}
.yin-yang {
	.yin-yang(100px, red, #eee);
}