simplifying list items a bit more, updating tests

This commit is contained in:
davegandy 2013-10-05 20:02:46 -04:00
parent a5214c8248
commit 4ad04663f8
7 changed files with 34 additions and 47 deletions

View file

@ -45,17 +45,16 @@
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.fa-lg { .fa-lg {
font-size: 1.3333333333333333em; font-size: 1.3333333333333333em;
vertical-align: -10%; vertical-align: -15%;
line-height: 0.75em; line-height: 0.75em;
} }
/* increased font size for icon-lg */ /* increased font size for icon-lg */
.fa.fa-fixed-width { .fa-fixed-width {
display: inline-block;
width: 1.1428571428571428em; width: 1.1428571428571428em;
padding-right: 0.2857142857142857em; padding-right: 0.2857142857142857em;
text-align: right; text-align: right;
} }
.fa.fa-fixed-width.fa-lg { .fa-fixed-width.fa-lg {
width: 1.4285714285714286em; width: 1.4285714285714286em;
} }
.fa-ul { .fa-ul {

View file

@ -1,6 +1,6 @@
@font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal;}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} @font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal;}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fa-lg{font-size:1.3333333333333333em;vertical-align:-10%;line-height:0.75em;} .fa-lg{font-size:1.3333333333333333em;vertical-align:-15%;line-height:0.75em;}
.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;} .fa-fixed-width{width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa-fixed-width.fa-lg{width:1.4285714285714286em;}
.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
.fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:0.14285714285714285em;text-align:center;}.fa-li.fa-lg{left:-1.8571428571428572em;} .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:0.14285714285714285em;text-align:center;}.fa-li.fa-lg{left:-1.8571428571428572em;}
.fa.hide{display:none;} .fa.hide{display:none;}

View file

@ -9,19 +9,16 @@
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.fa-lg { .fa-lg {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -15%;
line-height: (3em / 4); line-height: (3em / 4);
} }
/* increased font size for icon-lg */ /* increased font size for icon-lg */
.fa { .fa-fixed-width {
&.fa-fixed-width { width: (16em / 14);
display: inline-block; padding-right: (4em / 14);
width: (16em / 14); text-align: right;
padding-right: (4em / 14); &.fa-lg {
text-align: right; width: (20em / 14);
&.fa-lg {
width: (20em / 14);
}
} }
} }

View file

@ -15,7 +15,7 @@
{% include examples/buttons.html %} {% include examples/buttons.html %}
{% include examples/button-groups.html %} {% include examples/button-groups.html %}
{% include examples/button-dropdowns.html %} {% include examples/button-dropdowns.html %}
{% include examples/bulleted-lists.html %} {% include examples/list-bullets.html %}
{% include examples/navigation.html %} {% include examples/navigation.html %}
{% include examples/form-inputs.html %} {% include examples/form-inputs.html %}
{% include examples/animated-spinner.html %} {% include examples/animated-spinner.html %}

View file

@ -1,9 +1,9 @@
<section id="bulleted-lists"> <section id="list-bullets">
<h2 class="page-header">Bulleted Lists</h2> <h2 class="page-header">List Bullets</h2>
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li> <li><i class="fa-li fa fa-ok"></i>List bullets (like these)</li>
<li><i class="fa-li fa fa-ok"></i>Buttons</li> <li><i class="fa-li fa fa-ok"></i>Buttons</li>
<li><i class="fa-li fa fa-ok"></i>Button groups</li> <li><i class="fa-li fa fa-ok"></i>Button groups</li>
<li><i class="fa-li fa fa-ok"></i>Navigation</li> <li><i class="fa-li fa fa-ok"></i>Navigation</li>
@ -12,7 +12,7 @@
</ul> </ul>
</div> </div>
<div class="col-md-9"> <div class="col-md-9">
<p>Easily replace individual bullets.</p> <p>Easily replace individual list bullets.</p>
{% highlight html %} {% highlight html %}
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li> <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>

View file

@ -11,19 +11,16 @@
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.{{ site.fontawesome.css_prefix }}-lg { .{{ site.fontawesome.css_prefix }}-lg {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -15%;
line-height: (3em / 4); line-height: (3em / 4);
} }
/* increased font size for icon-lg */ /* increased font size for icon-lg */
.{{ site.fontawesome.css_prefix }} { .{{ site.fontawesome.css_prefix }}-fixed-width {
&.{{ site.fontawesome.css_prefix }}-fixed-width { width: (16em / 14);
display: inline-block; padding-right: (4em / 14);
width: (16em / 14); text-align: right;
padding-right: (4em / 14); &.{{ site.fontawesome.css_prefix }}-lg {
text-align: right; width: (20em / 14);
&.{{ site.fontawesome.css_prefix }}-lg {
width: (20em / 14);
}
} }
} }
@ -45,7 +42,6 @@
top: (2em / 14); top: (2em / 14);
text-align: center; text-align: center;
&.{{ site.fontawesome.css_prefix }}-lg { &.{{ site.fontawesome.css_prefix }}-lg {
top: (1em / 14);
left: -@icons-li-width + (4em / 14); left: -@icons-li-width + (4em / 14);
} }
} }

View file

@ -430,7 +430,7 @@ relative_path: ../
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2 Nav Item 2
<span class="caret"></span> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
@ -457,7 +457,7 @@ relative_path: ../
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2 Nav Item 2
<span class="caret"></span> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
@ -481,19 +481,14 @@ relative_path: ../
</ul> </ul>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<ul class="nav nav-list"> <div class="list-group">
<li> <a href="#" class="list-group-item active">
<a href="#c1"> Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i>
<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> Overview </a>
</a> <a href="#" class="list-group-item">
</li> Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i>
<li> </a>
<a href="#c1"> </div>
Overview
<i class="fa fa-chevron-right fa-fixed-width pull-right"></i>
</a>
</li>
</ul>
</div> </div>
</div> </div>