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

View file

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

View file

@ -538,6 +538,35 @@ relative_path: ../
</div> </div>
</div> </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="row">
<div class="span6"> <div class="span6">