/* ====================================================================================================================

Helper Classes

There are provided some helper classes usually used with `@extend` for applying effects or common styles.

Styleguide 22.

==================================================================================================================== */

/* --------------------------------------------------------------------------------------------------------------------

Generic

Add a a simple `transition all`, used as a generic extend for element that can accept transition on all attributes.
    .transition
Simple divider class used in some components (like dropdowns).␣␣
    .divider

Styleguide 22.1

-------------------------------------------------------------------------------------------------------------------- */

.clearfix {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

.transition {
	@include transition();
}

.divider {
	@include nav-divider();
}

/* --------------------------------------------------------------------------------------------------------------------

Wrappers

Flexible wrapper to center the layout, max-width width `$desk-end`.

    .wrapper
    .w

Same a `.wrapper` but with fixed width.

    .fixed-wrapper
    .fw

Styleguide 22.2

-------------------------------------------------------------------------------------------------------------------- */

.wrapper, .w {
	@extend .clearfix;
	margin: 0 auto;
	max-width: $desk-end;
	padding-left: $wrapper-padding;
	padding-right: $wrapper-padding;
}

.fixed-wrapper, .fw {
	@extend .clearfix;
	margin: 0 auto;
	width: $desk-end;
}


.left {float: left;}
.right {float: right;}


/* --------------------------------------------------------------------------------------------------------------------

Elements width

Add `data-width="n"` to any html element to set the width.

    [data-width="n"]

* **n**: Width in percentage in increments of 5 of the element.

Example:

	data-width="50"

Corrispond to:

	width: 50% !important;

Styleguide 22.3

-------------------------------------------------------------------------------------------------------------------- */

$i: 100;
@while $i > 0 {
	%width-#{$i} { width: $i * 1% !important; }
	@if $width-helper-classes {
		[data-width="#{$i}"] { @extend %width-#{$i}; }
	}
	$i: $i - 1;
}

/* --------------------------------------------------------------------------------------------------------------------

Typography

Styleguide 22.4

-------------------------------------------------------------------------------------------------------------------- */

.lead			{ @include adjust-font-size-to($h4-size); }
.muted			{ color: $gray; }

.pull-left		{ float: left; }
.pull-right		{ float: right; }

.text-left		{ text-align: left; }
.text-right		{ text-align: right; }
.text-center	{ text-align: center; }

/* --------------------------------------------------------------------------------------------------------------------

Sprites

Styleguide 22.5

-------------------------------------------------------------------------------------------------------------------- */

.s {
	content: "";
	display: inline-block;
	overflow:hidden;
	vertical-align:middle;
	text-align:center;
	font-style:normal;
	zoom:1;
	text-indent:-9999px;
}

/* --------------------------------------------------------------------------------------------------------------------

Text replacement

All the text replacement classes from from [html5boilerplate](http://html5boilerplate.com/).

    .ir
    .ir
    .hidden
    .visuallyhidden
    .visuallyhidden
    .invisible

Styleguide 22.6

-------------------------------------------------------------------------------------------------------------------- */

.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
.ir:before{content:"";display:block;width:0;height:150%}
.hidden{display:none!important;visibility:hidden}
.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0}
.invisible{visibility:hidden}