Contents

/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

[class*="icon-"] {
    @include reset-inline-block;
    @include disabled-state { opacity: $disabled-opacity; }
}

[class*="icon-12"] { width: 12px; height: 12px; }
[class*="icon-16"] { width: 16px; height: 16px; }
[class*="icon-24"] { width: 24px; height: 24px; }
[class*="icon-32"] { width: 32px; height: 32px; }
[class*="icon-64"] { width: 64px; height: 64px; }

.button {
    [class*="icon-"] { margin-top: -1px; }
}

//-------------------- Modifiers --------------------//

.icon--90deg { @include transform(rotate(90deg)); }
.icon--180deg { @include transform(rotate(180deg)); }
.icon--270deg { @include transform(rotate(270deg)); }
.icon--flip { @include transform(rotateY(180deg)); }
.icon--flip-vert { @include transform(rotateX(180deg)); }

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rotate {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon--rotate {
    -webkit-animation-name: rotate;
    -webkit-animation-duration: $icon-animation;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: $icon-animation;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: $icon-animation;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
titon-toolkit-1.0.0.rc1	scss/toolkit/components/icon.scss