Font-Awesome/less/stacked.less
Jake Franklin f91b68af8c Fixed a display problem with the fa-stack class.
fa-stack assumed that it would have a 2x item inside of it, and I created an auxilery
fa-stack-small class that will fit a 1x icon stacked with a corner icon.
2014-04-17 13:03:29 -07:00

66 lines
2.3 KiB
Plaintext

// Stacked Icons
// -------------------------
.@{fa-css-prefix}-stack, .@{fa-css-prefix}-stack-small {
position: relative;
display: inline-block;
vertical-align: middle;
}
.@{fa-css-prefix}-stack {
width: 2em;
height: 2em;
line-height: 2em;
}
.@{fa-css-prefix}-stack-small {
width: 1em;
height: 1em;
line-height: 1em;
}
.@{fa-css-prefix}-stack-1x,
.@{fa-css-prefix}-stack-2x,
.@{fa-css-prefix}-stack-corner-nw,
.@{fa-css-prefix}-stack-corner-ne,
.@{fa-css-prefix}-stack-corner-sw,
.@{fa-css-prefix}-stack-corner-se {
position: absolute;
width: 100%;
text-align: center;
}
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
left: 0;
}
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-nw,
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-ne,
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-sw,
.@{fa-css-prefix}-stack-1x + .@{fa-css-prefix}-stack-corner-se {
font-size: 0.5em;
}
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-nw,
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-ne,
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-sw,
.@{fa-css-prefix}-stack-2x + .@{fa-css-prefix}-stack-corner-se {
font-size: 1em;
}
.@{fa-css-prefix}-stack-corner-se,
.@{fa-css-prefix}-stack-corner-sw,
.@{fa-css-prefix}-stack-corner-ne,
.@{fa-css-prefix}-stack-corner-nw,
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-se,
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-sw,
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-ne,
.@{fa-css-prefix}-inverse + .@{fa-css-prefix}-stack-corner-nw { text-shadow: 0 0 3px #fff; }
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-se,
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-sw,
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-ne,
.@{fa-css-prefix}-inverse.@{fa-css-prefix}-stack-corner-nw { text-shadow: 0 0 3px #000; }
.@{fa-css-prefix}-stack-1x { line-height: inherit; }
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
.@{fa-css-prefix}-stack-corner-se { bottom: 1em; right: 0.5em; }
.@{fa-css-prefix}-stack-corner-sw { bottom: 1em; left: 0.5em; }
.@{fa-css-prefix}-stack-corner-ne { top: 1em; right: 0.5em; }
.@{fa-css-prefix}-stack-corner-nw { top: 1em; left: 0.5em; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }