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 */
.fa-lg {
font-size: 1.3333333333333333em;
vertical-align: -10%;
vertical-align: -15%;
line-height: 0.75em;
}
/* increased font size for icon-lg */
.fa.fa-fixed-width {
display: inline-block;
.fa-fixed-width {
width: 1.1428571428571428em;
padding-right: 0.2857142857142857em;
text-align: right;
}
.fa.fa-fixed-width.fa-lg {
.fa-fixed-width.fa-lg {
width: 1.4285714285714286em;
}
.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;}
.fa-lg{font-size:1.3333333333333333em;vertical-align:-10%;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-lg{font-size:1.3333333333333333em;vertical-align:-15%;line-height:0.75em;}
.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-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;}

View file

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

View file

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

View file

@ -1,9 +1,9 @@
<section id="bulleted-lists">
<h2 class="page-header">Bulleted Lists</h2>
<section id="list-bullets">
<h2 class="page-header">List Bullets</h2>
<div class="row">
<div class="col-md-3">
<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>Button groups</li>
<li><i class="fa-li fa fa-ok"></i>Navigation</li>
@ -12,7 +12,7 @@
</ul>
</div>
<div class="col-md-9">
<p>Easily replace individual bullets.</p>
<p>Easily replace individual list bullets.</p>
{% highlight html %}
<ul class="fa-ul">
<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 */
.{{ site.fontawesome.css_prefix }}-lg {
font-size: (4em / 3);
vertical-align: -10%;
vertical-align: -15%;
line-height: (3em / 4);
}
/* increased font size for icon-lg */
.{{ site.fontawesome.css_prefix }} {
&.{{ site.fontawesome.css_prefix }}-fixed-width {
display: inline-block;
width: (16em / 14);
padding-right: (4em / 14);
text-align: right;
&.{{ site.fontawesome.css_prefix }}-lg {
width: (20em / 14);
}
.{{ site.fontawesome.css_prefix }}-fixed-width {
width: (16em / 14);
padding-right: (4em / 14);
text-align: right;
&.{{ site.fontawesome.css_prefix }}-lg {
width: (20em / 14);
}
}
@ -45,7 +42,6 @@
top: (2em / 14);
text-align: center;
&.{{ site.fontawesome.css_prefix }}-lg {
top: (1em / 14);
left: -@icons-li-width + (4em / 14);
}
}

View file

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