Core Less Sample

core.less

/* Button Colors */
@btnNormal: #679FD2;
@btnSuccess: #4EA429;
@btnWarn: #FF7400;
@btnError: #BF3030;

@greyscale: #CCC;

body {
	font-family: 'PT Sans Narrow', sans-serif;
}

.btn {
	
	display: inline-block;
	padding: 5px 11px 5px;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 18px;
	color: white;
	border: 1px solid darken(@btnNormal, 10%);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-color: @btnNormal;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px srgba(0, 0, 0, 0.05);
	
	&:hover {
		background-color: lighten(@btnNormal, 10%);
	}
	
	&.success {
		background-color: @btnSuccess;
		border: 1px solid darken(@btnSuccess, 10%);
	
		&:hover {
			background-color: lighten(@btnSuccess, 10%);
		}
		
	}
	
	&.warn {
		background-color: @btnWarn;
		border: 1px solid darken(@btnWarn, 10%);
		
		&:hover {
			background-color: lighten(@btnWarn, 10%);
		}
	}
	
	&.error {
		background-color: @btnError;
		border: 1px solid darken(@btnError, 10%);
		
		&:hover {
			background-color: lighten(@btnError, 10%);
		}
	}
	
}

.label {

	padding: 2px 5px 2px 20px;
	border: 1px solid @greyscale;
	font-size: 13px;
	
	&.success {
	
			background-color: @btnSuccess;
			color: white;
	
	}
	
	&.warn {
	
			background-color: @btnWarn;
			color: white;
	
	}
	
	&.error {
	
			background-color: @btnError;
			color: white;
	
	}

}