really fixing #1056

This commit is contained in:
davegandy 2013-06-01 15:39:55 -04:00
parent 08854aef2b
commit 4be320fe0e
3 changed files with 35 additions and 7 deletions

View file

@ -23,7 +23,7 @@
a {
[class^="icon-"],
[class*=" icon-"] {
&, &:before { display: inline; }
& { display: inline; }
}
}
@ -42,16 +42,16 @@ a {
}
.icons-ul {
margin-left: @icons-ul-width;
margin-left: @icons-li-width;
list-style-type: none;
> li { position: relative; }
.icon-li {
position: absolute;
left: -@icons-ul-width;
width: @icons-ul-width - @icons-ul-padding;
text-align: right;
left: -@icons-li-width;
width: @icons-li-width;
text-align: center;
line-height: inherit;
}
}

View file

@ -10,8 +10,7 @@
@iconMuted: #eee;
@iconLight: #fff;
@iconDark: #333;
@icons-ul-width: 30/14em;
@icons-ul-padding: 8/14em;
@icons-li-width: 30/14em;
{% for icon in icons %}
@{{ icon.id }}: "\{{ icon.unicode }}";

View file

@ -538,6 +538,35 @@ relative_path: ../
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="icon-building"></i>
<span class="label">foo</span>
<a class="btn">foo</a>
</li>
</ul>
</div>
</div>
<div class="span6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><i class="icon-li icon-refresh icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="icon-building"></i>
<span class="label">foo</span>
<a class="btn">foo</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span6">