/*
* # Semantic - Icon * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘element’; @element : ‘icon’;
@import ‘../../theme.config’;
/*******************************
Icon
*******************************/
@font-face {
font-family: 'Icons'; src: url("@{fontPath}/@{fontName}.eot"); src: url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), url("@{fontPath}/@{fontName}.svg#icons") format('svg'), url("@{fontPath}/@{fontName}.woff") format('woff'), url("@{fontPath}/@{fontName}.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 @distanceFromText 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; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden;
}
i.icon:before {
background: none !important;
}
/*******************************
Types
*******************************/
/*————–
Loading
—————*/
i.icon.loading {
height: 1em; 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.disabled.icon {
pointer-events: none; opacity: @disabledOpacity !important;
}
/*******************************
Variations
*******************************/
/*——————-
Link
——————–*/
i.link.icon {
cursor: pointer; opacity: @linkOpacity; transition: opacity @transitionDuration @transitionEasing;
} i.link.icon:hover {
opacity: 1 !important;
}
/*——————-
Circular
——————–*/
i.circular.icon {
border-radius: 500em !important; 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);
}
/*——————-
Bordered
——————–*/
i.bordered.icon {
width: @borderedSize; height: @borderedSize; padding: @borderedVerticalPadding @borderedHorizontalPadding !important; box-shadow: @borderedShadow; vertical-align: baseline;
} i.bordered.inverted.icon {
border: none; box-shadow: none;
}
/*——————-
Colors
——————–*/
i.white.icon {
color: @white !important;
} 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
——————–*/
i.inverted.icon {
color: @white;
} i.inverted.black.icon {
color: @lightBlack !important;
} i.inverted.blue.icon {
color: @lightBlue !important;
} i.inverted.green.icon {
color: @lightGreen !important;
} i.inverted.orange.icon {
color: @lightOrange !important;
} i.inverted.pink.icon {
color: @lightPink !important;
} i.inverted.purple.icon {
color: @lightPurple !important;
} i.inverted.red.icon {
color: @lightRed !important;
} i.inverted.teal.icon {
color: @lightTeal !important;
} i.inverted.yellow.icon {
color: @lightYellow !important;
}
/* Inverted Shapes */ i.inverted.bordered.icon, i.inverted.circular.icon {
background-color: #222222 !important; color: #FFFFFF !important;
} i.inverted.bordered.black.icon, i.inverted.circular.black.icon {
background-color: @black !important; color: #FFFFFF !important;
} i.inverted.bordered.blue.icon, i.inverted.circular.blue.icon {
background-color: @blue !important; color: #FFFFFF !important;
} i.inverted.bordered.green.icon, i.inverted.circular.green.icon {
background-color: @green !important; color: #FFFFFF !important;
} i.inverted.bordered.orange.icon, i.inverted.circular.orange.icon {
background-color: @orange !important; color: #FFFFFF !important;
} i.inverted.bordered.pink.icon, i.inverted.circular.pink.icon {
background-color: @pink !important; color: #FFFFFF !important;
} i.inverted.bordered.purple.icon, i.inverted.circular.purple.icon {
background-color: @purple !important; color: #FFFFFF !important;
} i.inverted.bordered.red.icon, i.inverted.circular.red.icon {
background-color: @red !important; color: #FFFFFF !important;
} i.inverted.bordered.teal.icon, i.inverted.circular.teal.icon {
background-color: @teal !important; color: #FFFFFF !important;
} i.inverted.bordered.yellow.icon, i.inverted.circular.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;
}
.loadUIOverrides();