// Ionicons icons
//
// Icon set from <a href="http://ionicons.com/" target="_blank">ion icons.</a>
//
{{#each icons}}// .{{name}} - Icon named <i>{{name}}</i>.
{{/each}}//
// Markup:
//  <span class="{$modifiers}"></span>
//  <span class="{$modifiers}" style="font-size:32px;margin:0 12px;"></span>
//  <span class="{$modifiers}" style="font-size:64px;margin:0 12px;"></span>
//
// Styleguide 3.1

{{#each imports}}
@import "{{this}}";{{/each}}


@font-face {
    font-family: "Ionicons";
    src: url("@{fontDir}/ionicons.eot?v=1.4.0");
    src: url("@{fontDir}/ionicons.eot?v=1.4.0#iefix") format("embedded-opentype"), url("@{fontDir}/ionicons.ttf?v=1.4.0") format("truetype"), url("@{fontDir}/ionicons.woff?v=1.4.0") format("woff"), url("@{fontDir}/ionicons.svg?v=1.4.0#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
};

.ionicon(){
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
};


@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg); }
    100% {-moz-transform: rotate(359deg); }
};

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg); }
    100% {-webkit-transform: rotate(359deg); }
};

@-o-keyframes spin {
    0% {-o-transform: rotate(0deg); }
    100% {-o-transform: rotate(359deg); }
};

@keyframes spin {
    0% {transform: rotate(0deg); }
    100% {transform: rotate(359deg); }
};

.ion-loading-a {
    -webkit-animation-timing-function: steps(8, start);
    -moz-animation-timing-function: steps(8, start);
    animation-timing-function: steps(8, start);
};

.ion-spin,
.ion-loading-a,
.ion-loading-b,
.ion-loading-c,
.ion-loading-d,
.ion-looping,
.ion-refreshing,
.ion-ios7-reloading {
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
};

{{#each icons}}
.{{name}}{
    .ionicon();
    &:before{
    content:'{{{text}}}';
    }
};
{{/each}}