/*

Helper Classes

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

Styleguide 25

*/

/*

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 25.1

*/

.clearfix {
    &:after {
        content: "";
        @extend %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 25.2

*/

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

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


.left {@extend %float-left;}
.right {@extend %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 25.3

*/

@for $j from 1 through 20 {
    $i: 5 * $j;
    %width-#{$i} { width: $i * 1% !important; }
    @if $width-helper-classes {
        [data-width="#{$i}"] { @extend %width-#{$i}; }
    }
}

/*

Typography

Some common classes for fixing the typography, to be used sparingly.

    .lead           # Bigger font 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

Styleguide 25.4

*/

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

.pull-left      { @extend %float-left; }
.pull-right     { @extend %float-right; }

.text-left      { @extend %text-align-left; }
.text-right     { @extend %text-align-right; }
.text-center    { @extend %text-align-center; }

/*

Sprites

Simple class used for spriting.

    .s

Styleguide 25.5

*/

.s {
    @include transition(none);
    content: "";
    @extend %display-inline-block;
    font-style:normal;
    overflow:hidden;
    text-align:center;
    text-indent:-9999px;
}

/*

Text replacement

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

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

Styleguide 25.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}