vui-design/src/style/components/icon.less

A high quality UI Toolkit based on Vue.js

@vui-icon: ~"@{vui}-icon";

.@{vui-icon} {
  display:inline-block;
  vertical-align:-0.125em;
  color:inherit;
  font-size:inherit;
  font-style:normal;
  font-weight:normal;
  text-align:center;
  text-decoration:inherit;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant:normal;
  text-transform:none;
  /* fix buttons height, for twitter bootstrap */
  line-height:0;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  & svg {
    width:1em;
    height:1em;
    fill:currentColor;
  }

  &-loading {
    animation:vuiIconSpin 1s infinite linear;
  }
  &-loading-filled {
    animation:vuiIconSpin 1s infinite linear;
  }
  &-loading-spinner {
    animation:vuiIconSpin 1s infinite linear;
  }
  &-loading-spinner-filled {
    animation:vuiIconSpin 1s infinite linear;
  }
}

@keyframes vuiIconSpin {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(180deg); }
  100% { transform:rotate(360deg); }
}