_utility.scss

/**
 * Utility Mixins
 * =================================
 * - clearfix
 * - font-face
 * - sizing shortcuts
 *   - size
 *   - square
 * - resizable
 */

// Clearfix
// http://www.cssmojo.com/latest_new_clearfix_so_far/
// Other ko-clearfix options: https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_clearfix-me.scss
@mixin ko-clearfix {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}



// @font-face
// @include ko-font-face(proxima-nova, /css/fonts/proxima-nova, normal, italic, false);
@mixin ko-font-face($family-name, $font-path, $font-weight: normal, $font-style: normal) {
	@font-face {
		font-family: $family-name;
		src: url('#{$font-path}.eot');
		src: url('#{$font-path}.eot?#iefix') format('embedded-opentype'),
			url('#{$font-path}.woff') format('woff'),
			url('#{$font-path}.ttf') format('truetype'),
			url('#{$font-path}.svg##{$family-name}') format('svg');
		font-weight: $font-weight;
		font-style: $font-style;
	}
}

// Centre-align a block level element
// @include ko-center-block
@mixin ko-center-block() {
	display: block;
	margin: 0 auto;
}

// Input placeholder text
@mixin ko-placeholder($color: lighten(#000, 70%)) {
	:-ms-input-placeholder {
		color: $color;
	}

	:-moz-placeholder {
		color: $color;
	}

	::-webkit-input-placeholder {
		color: $color;
	}
}

// Text selection
@mixin ko-text-selection($color-selection, $color-selection-bg) {
	::-moz-selection {
		color: $color-selection;
		background: $color-selection-bg;
		text-shadow: none;
	}

	::selection {
		color: $color-selection;
		background: $color-selection-bg;
		text-shadow: none;
	}
}

// Vertical align
// @include ko-vertical-align(50px);
@mixin ko-vertical-align($argument) {
	line-height: $argument;
	height: $argument;
}

// Text truncation
// @include ko-truncate(300px);
// @include ko-truncate(100%);
@mixin ko-truncate($truncation-boundary) {
	max-width: $truncation-boundary;
	@include ko-text-overflow();
}

// Text overflow
// @include ko-text-overflow();
// Requires inline-block or block for proper styling
@mixin ko-text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/**
 * Sizing shortcuts
 */

// @include ko-size(10px, 30px);
@mixin ko-size($width: 5px, $height: 5px) {
	height: $height;
	width: $width;
}


// @include ko-square(50px);
@mixin ko-square($size: 5px) {
	@include ko-size($size, $size);
}


// Make any element resizable for prototyping
// @include ko-resizable();
@mixin ko-resizable($direction: both) {
	resize: $direction; // Options are horizontal, vertical, both
	overflow: auto; // Safari fix
}