wp-theme/assets/css/helpers/helpers.less

// TERRITORIAL CSS HELPERS
@tabletWidth: 768px;
@middleWidth: 570px;
@phoneWidth: 600px;
@smallWidth: 400px;

// CLEARFIX
// Apply .clearfix to a non-floated container element with floated elements in it
// to ensure the container has a height. Use .no-clearfix to reset a clearfix
// when in a dicey spot
.clearfix {
	zoom: 1;
	&:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}
.no-clearfix {
	zoom: 0;
	&:before,
	&:after {
		display: none;
	}
	&:after {
		clear:  none;
	}
}

// CENTERED
// Apply this class to an element to center it responsively in a container
@centeredpadding: 10px;

.centered-header {
	.clearfix;
	max-width: 1120px + 2*@centeredpadding;
	padding: 0 @centeredpadding;
	width: 100%;
	margin: 0 auto;
}

.centered-prodFeat {
	.clearfix;
	max-width: 930px + 2*@centeredpadding;
	padding: 0 @centeredpadding;
	width: 100%;
	margin: 0 auto;
}

.centered-content {
	.clearfix;
	max-width: 770px + 2*@centeredpadding;
	padding: 0 @centeredpadding;
	width: 100%;
	margin: 0 auto;
}

.centered-pricing {
	.clearfix;
	max-width: 880px + 2*@centeredpadding;
	padding: 0 @centeredpadding;
	width: 100%;
	margin: 0 auto;
}

.centered-content-padding {
	.clearfix;
	max-width: 950px;
	padding: 0 @centeredpadding 50px;
	width: 100%;
	margin: 0 auto;
	background-color: @white;
}

.centered-categories {
	.clearfix;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}

.centered-footer {
	.clearfix;
	max-width: 650px + 2*@centeredpadding;
	padding: 0 @centeredpadding;
	width: 100%;
	margin: 0 auto;
}

// GENERAL LIST
// TAKES AWAY PADDING AND LIST STYLE
ul, ol {
	padding:0;
	margin:0;
}

//  COLUMN SECTIONS

.wrapper {
	position: relative;
	overflow:hidden;
}

@paddingForCols: 30px;
.ttl-columns {
	font-size:0;
	width:100%;
	width: calc(~"100% +"@paddingForCols);
	.column {
		display: inline-block;
		vertical-align: top;
		padding-right: @paddingForCols;
		font-size: 15px;

	}

	.column-2 {
		.column;
		width: 50%;
		@media screen and (max-width: @middleWidth) {
			width: 100%;
		}
	}

	.column-3 {
		.column;
		width: 100/3%;
		@media screen and (max-width: @middleWidth) {
			width: 100%;
		}
	}

	.column-4 {
		.column;
		width: 25%;
		@media screen and (max-width: @tabletWidth) {
			width: 50%;
		}
	}

	.column-5 {
		.column;
		width: 20%;
		@media screen and (max-width: @tabletWidth) {
			width: 50%;
		}
	}

	.column-6 {
		.column;
		width: 100/6%;
		@media screen and (max-width: @tabletWidth) {
			width: 33%;
		}
		@media screen and (max-width: @phoneWidth) {
			width: 50%;
		}
	}
	.column-7 {
		.column;
		width: 100/7%;
		@media screen and (max-width: @tabletWidth) {
			width: 33%;
		}
	}

	.columnTwoThirds {
		.column;
		width: 66.6%;
		@media screen and (max-width: @middleWidth) {
			width: 100%;
		}
	}

	.columnThreeQuarters {
		.column;
		width: 100 * 3/4%;
		@media screen and (max-width: @tabletWidth) {
			width: 100%;
		}
	}

}
.column-container {
	.ttl-columns;
}

// BORDER-BOX
// Changes the box model so that padding is included within width, rather than
// outside of width
*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

// EMBED OBJECTS
// Makes embed objects responsive
img,
embed,
object,
video {
	max-width: 100%;
	border: 0;
	padding: 0;
}

// MOBILE-ONLY
// Use this to only display something on mobile- and tablet-width devices.
// Depending on project specs, you may wish to override this breakpoint.
.phone-only {
	display: none;

	@media screen and (max-width: @phoneWidth) {
		display: inherit;
	}
}

.mobile-only {
	display: none;

	@media screen and (max-width: @tabletWidth) {
		display: inherit;
	}
}
.desktop-only {
	@media screen and (max-width: @tabletWidth) {
		display: none;
	}
}

.phone-and-up {
	@media screen and (max-width: @phoneWidth) {
		display: none;
	}
}

// MIXINS

// TRANSITION
// Applies a CSS transition between properties
.transition(@property: all, @speed: 0.15s, @easing: ease-in-out) {
	-webkit-transition: @property @speed @easing;
	-moz-transition: @property @speed @easing;
	-ms-transition: @property @speed @easing;
	-o-transition: @property @speed @easing;
	transition: @property @speed @easing;
}

///**
// * Selection
// *
// * Style a visual representation of selecting elements and objects.
// *
// * @USAGE
// * You can use it on the root of your CSS to make the selection style global
// * or inside a specific element. Provide two arguments: font color and background-color.
// *
// * @EXAMPLES
// * 1. .selection(red, blue);
// * 2. p {
// *        .selection(red, blue)
// *    }
// **/

.selection(@text-color, @background-color) {
	&::-moz-selection {color: @text-color; background-color: @background-color;}
	&::selection {color: @text-color; background-color: @background-color;}
}

//  * =========================================================== *
//  <                            LESSHat                          >
//  * =========================================================== *
//
// Made with Energy drinks in Prague, Czech Republic.
// Handcrafted by Petr Brzek, lesshat.com
// Works great with CSS Hat csshat.com

// version: v3.0.0 (2014-04-18)


.placeholder(@color:#aaa, @element: 08121991) {
	.inception (@arguments) when not (@element = 08121991) {
		@{element}::-webkit-input-placeholder {
			color: @color;
		}
		@{element}:-moz-placeholder {
			color: @color;
		}
		@{element}::-moz-placeholder {
			color: @color;
		}
		@{element}:-ms-input-placeholder {
			color: @color;
		}
	}
	.inception (@arguments) when (@element = 08121991) {
		&::-webkit-input-placeholder {
			color: @color;
		}
		&:-moz-placeholder {
			color: @color;
		}
		&::-moz-placeholder {
			color: @color;
		}
		&:-ms-input-placeholder {
			color: @color;
		}
	}
	.inception(@arguments);
}