SemanSemantic-UItic-UI/rtl/uncompressed/elements/icon.css

/*
 * # 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
*******************************/

/*-------------------
        Theme
--------------------*/

/* To override a theme for an individual element
   specify theme name below
*/

/* Global */

/* Elements */

/* Collections */

/* Modules */

/* Views */

/* Import */

/*******************************
        Global Variables
*******************************/

/*-------------------
        Paths
--------------------*/

/*-------------------
       Page
--------------------*/

/*-------------------
       Fonts
--------------------*/

/*-------------------
       Icons
--------------------*/

/* Width of largest icon */

/*******************************
           BG Colors
*******************************/

/*******************************
             Colors
*******************************/

/*-------------------
     Background
--------------------*/

/*---  Colors  ---*/

/*---  Emotive  ---*/

/*---  Neutrals  ---*/

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

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

/*-------------------
      Borders
--------------------*/

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

/*-------------------
     Transitions
--------------------*/

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

/*-------------------
      Disabled
--------------------*/

/*-------------------
        Hover
--------------------*/

/*---  Colors  ---*/

/*---  Emotive  ---*/

/*---  Neutrals  ---*/

/*-------------------
    Down (:active)
--------------------*/

/*---  Colors  ---*/

/*---  Emotive  ---*/

/*---  Neutrals  ---*/

/*-------------------
        Active
--------------------*/

/*---  Standard  ---*/

/*---  Emotive  ---*/

/*---  Neutrals  ---*/

/*-------------------
    Globals Used
--------------------*/

/*
  @disabledOpacity
*/

/*-------------------
   Icon Variables
--------------------*/

/*******************************
     User Global Variables
*******************************/

/*******************************
    User Variable Overrides
*******************************/

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

@font-face {
  font-family: 'Icons';
  src: url("../themes/default/fonts/icons.eot");
  src: url("../themes/default/fonts/icons.eot?#iefix") format('embedded-opentype'), url("../themes/default/fonts/icons.svg#icons") format('svg') url("../themes/default/fonts/icons.woff") format('woff'), url("../themes/default/fonts/icons.ttf") format('truetype');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.icon {
  display: inline-block;
  opacity: 0.75;
  margin: 0em 0em 0em 0.25em;
  width: 1.23em;
  height: 1em;
  font-family: 'Icons';
  font-style: normal;
  line-height: 1;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  speak: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-smoothing: antialiased;
}

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

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

i.icon.loading {
  -webkit-animation: icon-loading 2s linear infinite;
  animation: icon-loading 2s linear infinite;
}

@-webkit-keyframes icon-loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes icon-loading {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

i.icon.hover {
  opacity: 1;
}

i.icon.active {
  opacity: 1;
}

i.emphasized.icon {
  opacity: 1;
}

i.icon.disabled {
  opacity: 0.3;
}

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

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

i.link.icon {
  cursor: pointer;
  opacity: 0.75;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

i.link.icon:hover {
  opacity: 1 !important;
}

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

i.circular.icon {
  border-radius: !important 500em;
  padding: 0.5em 0.35em !important;
  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  line-height: 1 !important;
  width: 2em !important;
  height: 2em !important;
}

i.circular.inverted.icon {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

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

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

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

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

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

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

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

i.square.icon {
  width: 2em;
  height: 2em;
  padding: 2em !important;
  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  vertical-align: baseline;
}

i.square.inverted.icon {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

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

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

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

i.black.icon {
  color: #555555 !important;
}

i.blue.icon {
  color: #6ecff5 !important;
}

i.green.icon {
  color: #5bbd72 !important;
}

i.orange.icon {
  color: #e96633 !important;
}

i.pink.icon {
  color: #d9499a !important;
}

i.purple.icon {
  color: #564f8a !important;
}

i.red.icon {
  color: #d95c5c !important;
}

i.teal.icon {
  color: #00b5ad !important;
}

i.yellow.icon {
  color: #ffcb08 !important;
}

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

i.black.icon {
  background-color: #555555 !important;
  color: #FFFFFF !important;
}

i.blue.icon {
  background-color: #6ecff5 !important;
  color: #FFFFFF !important;
}

i.green.icon {
  background-color: #5bbd72 !important;
  color: #FFFFFF !important;
}

i.orange.icon {
  background-color: #e96633 !important;
  color: #FFFFFF !important;
}

i.pink.icon {
  background-color: #d9499a !important;
  color: #FFFFFF !important;
}

i.purple.icon {
  background-color: #564f8a !important;
  color: #FFFFFF !important;
}

i.red.icon {
  background-color: #d95c5c !important;
  color: #FFFFFF !important;
}

i.teal.icon {
  background-color: #00b5ad !important;
  color: #FFFFFF !important;
}

i.yellow.icon {
  background-color: #ffcb08 !important;
  color: #FFFFFF !important;
}

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

i.small.icon {
  font-size: 0.875em;
}

i.icon {
  font-size: 1em;
}

i.large.icon {
  font-size: 1.5em;
  vertical-align: middle;
}

i.big.icon {
  font-size: 2em;
  vertical-align: middle;
}

i.huge.icon {
  font-size: 4em;
  vertical-align: middle;
}

i.massive.icon {
  font-size: 8em;
  vertical-align: middle;
}