SemanSemantic-UItic-UI/rtl/less/elements/icon.less

/*
 * # Semantic - Icon
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*!
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap
 *  ------------------------------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation can be
 *  found at http://fon.io.  Stay up to date on Twitter at
 *  http://twitter.com/fon.
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - The Font Awesome font is licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL

/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'icon';

@import '../semantic.config';

/*******************************
             Icon
*******************************/

@font-face {
  font-family: 'Icons';
  src: url("@{iconFont}.eot");
  src:
    url("@{iconFont}.eot?#iefix") format('embedded-opentype'),
    url("@{iconFont}.svg#icons") format('svg')
    url("@{iconFont}.woff") format('woff'),
    url("@{iconFont}.ttf") format('truetype')
  ;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.icon {
  display: inline-block;
  opacity: @opacity;

  margin: 0em @margin 0em 0em;

  width: @width;
  height: @height;

  font-family: 'Icons';
  font-style: normal;
  line-height: 1;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;

  speak: none;
  box-sizing: border-box;
  font-smoothing: antialiased;
}

/*******************************
             Types
*******************************/

/*--------------
    Loading
---------------*/

i.icon.loading {
  animation: icon-loading @loadingDuration linear infinite;
}
@keyframes icon-loading {
 from {
    transform: rotate(0deg);
 }
 to {
    transform: rotate(360deg);
 }
}

/*******************************
             States
*******************************/

i.icon.hover {
  opacity: 1;
}

i.icon.active {
  opacity: 1;
}

i.emphasized.icon {
  opacity: 1;
}

i.icon.disabled {
  opacity: @disabledOpacity;
}


/*******************************
           Variations
*******************************/


/*-------------------
         Link
--------------------*/

i.link.icon {
  cursor: pointer;
  opacity: @opacity;
  transition: opacity @transitionDuration @transitionEasing;
}
i.link.icon:hover {
  opacity: 1 !important;
}

/*-------------------
      Circular
--------------------*/

i.circular.icon {
  border-radius: !important 500em;

  padding: @circularPadding !important;

  box-shadow: @circularShadow;

  line-height: 1 !important;
  width: @circularSize !important;
  height: @circularSize !important;
}
i.circular.inverted.icon {
  border: none;
  box-shadow: none;
}

/*-------------------
      Flipped
--------------------*/

i.flipped.icon,
i.horizontally.flipped.icon {
  transform: scale(-1, 1);
}
i.vertically.flipped.icon {
  transform: scale(1, -1);
}

/*-------------------
      Rotated
--------------------*/

i.rotated.icon,
i.right.rotated.icon,
i.clockwise.rotated.icon {
  transform: rotate(90deg);
}

i.left.rotated.icon,
i.counterclockwise.rotated.icon {
  transform: rotate(-90deg);
}

/*-------------------
        Square
--------------------*/

i.square.icon {
  width: @squareSize;
  height: @squareSize;

  padding: @squareSize !important;
  box-shadow: @squareShadow;

  vertical-align: baseline;
}
i.square.inverted.icon {
  border: none;
  box-shadow: none;
}


/*-------------------
      Inverted
--------------------*/

i.inverted.icon {
  background-color: #222222;
  color: #FFFFFF;
}

/*-------------------
       Colors
--------------------*/

i.black.icon {
  color: @black !important;
}
i.blue.icon {
  color: @blue !important;
}
i.green.icon {
  color: @green !important;
}
i.orange.icon {
  color: @orange !important;
}
i.pink.icon {
  color: @pink !important;
}
i.purple.icon {
  color: @purple !important;
}
i.red.icon {
  color: @red !important;
}
i.teal.icon {
  color: @teal !important;
}
i.yellow.icon {
  color: @yellow !important;
}

/*-------------------
   Inverted Colors
--------------------*/

i.black.icon {
  background-color: @black !important;
  color: #FFFFFF !important;
}
i.blue.icon {
  background-color: @blue !important;
  color: #FFFFFF !important;
}
i.green.icon {
  background-color: @green !important;
  color: #FFFFFF !important;
}
i.orange.icon {
  background-color: @orange !important;
  color: #FFFFFF !important;
}
i.pink.icon {
  background-color: @pink !important;
  color: #FFFFFF !important;
}
i.purple.icon {
  background-color: @purple !important;
  color: #FFFFFF !important;
}
i.red.icon {
  background-color: @red !important;
  color: #FFFFFF !important;
}
i.teal.icon {
  background-color: @teal !important;
  color: #FFFFFF !important;
}
i.yellow.icon {
  background-color: @yellow !important;
  color: #FFFFFF !important;
}

/*-------------------
        Sizes
--------------------*/

i.small.icon {
  font-size: @small;
}
i.icon {
  font-size: @medium;
}
i.large.icon {
  font-size: @large;
  vertical-align: middle;
}
i.big.icon {
  font-size: @big;
  vertical-align: middle;
}
i.huge.icon {
  font-size: @huge;
  vertical-align: middle;
}
i.massive.icon {
  font-size: @massive;
  vertical-align: middle;
}