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