/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/icons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@icon-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .icon { fill: currentColor; .ie7-restore-right-whitespace(); display: inline-block; vertical-align: middle; svg { width: 100%; height: 100%; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Positioning ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ &.icon-align-horizontal-center { display: block; text-align: center; margin-left: auto; margin-right: auto; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icon Styles -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .icon.icon-black { color: @black; } .icon.icon-white { color: @white; } .icon.icon-blue { color: @blue; } .icon.icon-red { color: @red; } .icon.icon-orange { color: @orange; } .icon.icon-yellow { color: @yellow; } .icon.icon-green { color: @green; } .icon.icon-purple { color: @purple; } .icon.icon-pink { color: @pink; } .icon.icon-gold { color: @gold; } .icon.icon-cyan { color: @cyan; } .icon.icon-orchid { color: @orchid; } & when (@icon-mini-enabled) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-mini { font-size: floor(@icon-mini-height* @icon-mini-scale); line-height: floor(@icon-mini-height* @icon-mini-scale); width: floor(@icon-mini-width * @icon-mini-scale); height: floor(@icon-mini-height * @icon-mini-scale); &:before { line-height: floor(floor(@icon-mini-height * @icon-mini-scale) + (@icon-mini-offset * @icon-mini-scale)); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-mini { width: floor(@icon-mini-width * @icon-mini-scale); height: floor(@icon-mini-height * @icon-mini-scale); } } & when (@icon-small-enabled) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Small) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-small { font-size: floor(@icon-small-height* @icon-small-scale); line-height: floor(@icon-small-height* @icon-small-scale); width: floor(@icon-small-width * @icon-small-scale); height: floor(@icon-small-height * @icon-small-scale); &:before { line-height: floor(floor(@icon-small-height * @icon-small-scale) + (@icon-small-offset * @icon-small-scale)); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Small) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-small { width: floor(@icon-small-width * @icon-small-scale); height: floor(@icon-small-height * @icon-small-scale); } } & when (@icon-medium-enabled) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Medium) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-medium { font-size: floor(@icon-medium-height* @icon-medium-scale); line-height: floor(@icon-medium-height* @icon-medium-scale); width: floor(@icon-medium-width * @icon-medium-scale); height: floor(@icon-medium-height * @icon-medium-scale); &:before { line-height: floor(floor(@icon-medium-height * @icon-medium-scale) + (@icon-medium-offset * @icon-medium-scale)); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Medium) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-medium { width: floor(@icon-medium-width * @icon-medium-scale); height: floor(@icon-medium-height * @icon-medium-scale); } } & when (@icon-large-enabled) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Large) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-large { font-size: floor(@icon-large-height* @icon-large-scale); line-height: floor(@icon-large-height* @icon-large-scale); width: floor(@icon-large-width * @icon-large-scale); height: floor(@icon-large-height * @icon-large-scale); &:before { line-height: floor(floor(@icon-large-height * @icon-large-scale) + (@icon-large-offset * @icon-large-scale)); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Large) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-large { width: floor(@icon-large-width * @icon-large-scale); height: floor(@icon-large-height * @icon-large-scale); } } & when (@icon-jumbo-enabled) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Jumbo) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-jumbo { font-size: floor(@icon-jumbo-height* @icon-jumbo-scale); line-height: floor(@icon-jumbo-height* @icon-jumbo-scale); width: floor(@icon-jumbo-width * @icon-jumbo-scale); height: floor(@icon-jumbo-height * @icon-jumbo-scale); &:before { line-height: floor(floor(@icon-jumbo-height * @icon-jumbo-scale) + (@icon-jumbo-offset * @icon-jumbo-scale)); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Jumbo) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-jumbo { width: floor(@icon-jumbo-width * @icon-jumbo-scale); height: floor(@icon-jumbo-height * @icon-jumbo-scale); } } } & when (@icon-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { & when (@icon-mini-enabled) and not (@icon-mini-scale-screen-mini = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-mini { font-size: floor(@icon-mini-height* @icon-mini-scale-screen-mini); line-height: floor(@icon-mini-height* @icon-mini-scale-screen-mini); width: floor(@icon-mini-width * @icon-mini-scale-screen-mini); height: floor(@icon-mini-height * @icon-mini-scale-screen-mini); &:before { line-height: floor(floor(@icon-mini-height * @icon-mini-scale-screen-mini) + (@icon-mini-offset * @icon-mini-scale-screen-mini)); } } } & when (@icon-small-enabled) and not (@icon-small-scale-screen-mini = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-small { font-size: floor(@icon-small-height* @icon-small-scale-screen-mini); line-height: floor(@icon-small-height* @icon-small-scale-screen-mini); width: floor(@icon-small-width * @icon-small-scale-screen-mini); height: floor(@icon-small-height * @icon-small-scale-screen-mini); &:before { line-height: floor(floor(@icon-small-height * @icon-small-scale-screen-mini) + (@icon-small-offset * @icon-small-scale-screen-mini)); } } } & when (@icon-medium-enabled) and not (@icon-medium-scale-screen-mini = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-medium { font-size: floor(@icon-medium-height* @icon-medium-scale-screen-mini); line-height: floor(@icon-medium-height* @icon-medium-scale-screen-mini); width: floor(@icon-medium-width * @icon-medium-scale-screen-mini); height: floor(@icon-medium-height * @icon-medium-scale-screen-mini); &:before { line-height: floor(floor(@icon-medium-height * @icon-medium-scale-screen-mini) + (@icon-medium-offset * @icon-medium-scale-screen-mini)); } } } & when (@icon-large-enabled) and not (@icon-large-scale-screen-mini = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-large { font-size: floor(@icon-large-height* @icon-large-scale-screen-mini); line-height: floor(@icon-large-height* @icon-large-scale-screen-mini); width: floor(@icon-large-width * @icon-large-scale-screen-mini); height: floor(@icon-large-height * @icon-large-scale-screen-mini); &:before { line-height: floor(floor(@icon-large-height * @icon-large-scale-screen-mini) + (@icon-large-offset * @icon-large-scale-screen-mini)); } } } & when (@icon-jumbo-enabled) and not (@icon-jumbo-scale-screen-mini = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-jumbo { font-size: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-mini); line-height: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-mini); width: floor(@icon-jumbo-width * @icon-jumbo-scale-screen-mini); height: floor(@icon-jumbo-height * @icon-jumbo-scale-screen-mini); &:before { line-height: floor(floor(@icon-jumbo-height * @icon-jumbo-scale-screen-mini) + (@icon-jumbo-offset * @icon-jumbo-scale-screen-mini)); } } } } } & when (@icon-enabled) and (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { & when (@icon-mini-enabled) and not (@icon-mini-scale-screen-small = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-mini { font-size: floor(@icon-mini-height* @icon-mini-scale-screen-small); line-height: floor(@icon-mini-height* @icon-mini-scale-screen-small); width: floor(@icon-mini-width * @icon-mini-scale-screen-small); height: floor(@icon-mini-height * @icon-mini-scale-screen-small); &:before { line-height: floor(floor(@icon-mini-height * @icon-mini-scale-screen-small) + (@icon-mini-offset * @icon-mini-scale-screen-small)); } } } & when (@icon-small-enabled) and not (@icon-small-scale-screen-small = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-small { font-size: floor(@icon-small-height* @icon-small-scale-screen-small); line-height: floor(@icon-small-height* @icon-small-scale-screen-small); width: floor(@icon-small-width * @icon-small-scale-screen-small); height: floor(@icon-small-height * @icon-small-scale-screen-small); &:before { line-height: floor(floor(@icon-small-height * @icon-small-scale-screen-small) + (@icon-small-offset * @icon-small-scale-screen-small)); } } } & when (@icon-medium-enabled) and not (@icon-medium-scale-screen-small = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-medium { font-size: floor(@icon-medium-height* @icon-medium-scale-screen-small); line-height: floor(@icon-medium-height* @icon-medium-scale-screen-small); width: floor(@icon-medium-width * @icon-medium-scale-screen-small); height: floor(@icon-medium-height * @icon-medium-scale-screen-small); &:before { line-height: floor(floor(@icon-medium-height * @icon-medium-scale-screen-small) + (@icon-medium-offset * @icon-medium-scale-screen-small)); } } } & when (@icon-large-enabled) and not (@icon-large-scale-screen-small = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-large { font-size: floor(@icon-large-height* @icon-large-scale-screen-small); line-height: floor(@icon-large-height* @icon-large-scale-screen-small); width: floor(@icon-large-width * @icon-large-scale-screen-small); height: floor(@icon-large-height * @icon-large-scale-screen-small); &:before { line-height: floor(floor(@icon-large-height * @icon-large-scale-screen-small) + (@icon-large-offset * @icon-large-scale-screen-small)); } } } & when (@icon-jumbo-enabled) and not (@icon-jumbo-scale-screen-small = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-jumbo { font-size: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-small); line-height: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-small); width: floor(@icon-jumbo-width * @icon-jumbo-scale-screen-small); height: floor(@icon-jumbo-height * @icon-jumbo-scale-screen-small); &:before { line-height: floor(floor(@icon-jumbo-height * @icon-jumbo-scale-screen-small) + (@icon-jumbo-offset * @icon-jumbo-scale-screen-small)); } } } } } & when (@icon-enabled) and (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { & when (@icon-mini-enabled) and not (@icon-mini-scale-screen-medium = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-mini { font-size: floor(@icon-mini-height* @icon-mini-scale-screen-medium); line-height: floor(@icon-mini-height* @icon-mini-scale-screen-medium); width: floor(@icon-mini-width * @icon-mini-scale-screen-medium); height: floor(@icon-mini-height * @icon-mini-scale-screen-medium); &:before { line-height: floor(floor(@icon-mini-height * @icon-mini-scale-screen-medium) + (@icon-mini-offset * @icon-mini-scale-screen-medium)); } } } & when (@icon-small-enabled) and not (@icon-small-scale-screen-medium = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-small { font-size: floor(@icon-small-height* @icon-small-scale-screen-medium); line-height: floor(@icon-small-height* @icon-small-scale-screen-medium); width: floor(@icon-small-width * @icon-small-scale-screen-medium); height: floor(@icon-small-height * @icon-small-scale-screen-medium); &:before { line-height: floor(floor(@icon-small-height * @icon-small-scale-screen-medium) + (@icon-small-offset * @icon-small-scale-screen-medium)); } } } & when (@icon-medium-enabled) and not (@icon-medium-scale-screen-medium = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-medium { font-size: floor(@icon-medium-height* @icon-medium-scale-screen-medium); line-height: floor(@icon-medium-height* @icon-medium-scale-screen-medium); width: floor(@icon-medium-width * @icon-medium-scale-screen-medium); height: floor(@icon-medium-height * @icon-medium-scale-screen-medium); &:before { line-height: floor(floor(@icon-medium-height * @icon-medium-scale-screen-medium) + (@icon-medium-offset * @icon-medium-scale-screen-medium)); } } } & when (@icon-large-enabled) and not (@icon-large-scale-screen-medium = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-large { font-size: floor(@icon-large-height* @icon-large-scale-screen-medium); line-height: floor(@icon-large-height* @icon-large-scale-screen-medium); width: floor(@icon-large-width * @icon-large-scale-screen-medium); height: floor(@icon-large-height * @icon-large-scale-screen-medium); &:before { line-height: floor(floor(@icon-large-height * @icon-large-scale-screen-medium) + (@icon-large-offset * @icon-large-scale-screen-medium)); } } } & when (@icon-jumbo-enabled) and not (@icon-jumbo-scale-screen-medium = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-jumbo { font-size: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-medium); line-height: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-medium); width: floor(@icon-jumbo-width * @icon-jumbo-scale-screen-medium); height: floor(@icon-jumbo-height * @icon-jumbo-scale-screen-medium); &:before { line-height: floor(floor(@icon-jumbo-height * @icon-jumbo-scale-screen-medium) + (@icon-jumbo-offset * @icon-jumbo-scale-screen-medium)); } } } } } & when (@icon-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { & when (@icon-mini-enabled) and not (@icon-mini-scale-screen-large = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-mini { font-size: floor(@icon-mini-height* @icon-mini-scale-screen-large); line-height: floor(@icon-mini-height* @icon-mini-scale-screen-large); width: floor(@icon-mini-width * @icon-mini-scale-screen-large); height: floor(@icon-mini-height * @icon-mini-scale-screen-large); &:before { line-height: floor(floor(@icon-mini-height * @icon-mini-scale-screen-large) + (@icon-mini-offset * @icon-mini-scale-screen-large)); } } } & when (@icon-small-enabled) and not (@icon-small-scale-screen-large = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-small { font-size: floor(@icon-small-height* @icon-small-scale-screen-large); line-height: floor(@icon-small-height* @icon-small-scale-screen-large); width: floor(@icon-small-width * @icon-small-scale-screen-large); height: floor(@icon-small-height * @icon-small-scale-screen-large); &:before { line-height: floor(floor(@icon-small-height * @icon-small-scale-screen-large) + (@icon-small-offset * @icon-small-scale-screen-large)); } } } & when (@icon-medium-enabled) and not (@icon-medium-scale-screen-large = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-medium { font-size: floor(@icon-medium-height* @icon-medium-scale-screen-large); line-height: floor(@icon-medium-height* @icon-medium-scale-screen-large); width: floor(@icon-medium-width * @icon-medium-scale-screen-large); height: floor(@icon-medium-height * @icon-medium-scale-screen-large); &:before { line-height: floor(floor(@icon-medium-height * @icon-medium-scale-screen-large) + (@icon-medium-offset * @icon-medium-scale-screen-large)); } } } & when (@icon-large-enabled) and not (@icon-large-scale-screen-large = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-large { font-size: floor(@icon-large-height* @icon-large-scale-screen-large); line-height: floor(@icon-large-height* @icon-large-scale-screen-large); width: floor(@icon-large-width * @icon-large-scale-screen-large); height: floor(@icon-large-height * @icon-large-scale-screen-large); &:before { line-height: floor(floor(@icon-large-height * @icon-large-scale-screen-large) + (@icon-large-offset * @icon-large-scale-screen-large)); } } } & when (@icon-jumbo-enabled) and not (@icon-jumbo-scale-screen-large = null) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-jumbo { font-size: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-large); line-height: floor(@icon-jumbo-height* @icon-jumbo-scale-screen-large); width: floor(@icon-jumbo-width * @icon-jumbo-scale-screen-large); height: floor(@icon-jumbo-height * @icon-jumbo-scale-screen-large); &:before { line-height: floor(floor(@icon-jumbo-height * @icon-jumbo-scale-screen-large) + (@icon-jumbo-offset * @icon-jumbo-scale-screen-large)); } } } } } & when (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }