adding split dropdown for icons and examples

This commit is contained in:
davegandy 2013-05-09 13:24:10 -04:00
parent 1cc8390599
commit d8c07ccc51
13 changed files with 71 additions and 26 deletions

View File

@ -1,4 +1,4 @@
<section id="icons-brand" class="row">
<section id="brand" class="row">
<div class="span12">
<h2 class="page-header">Brand Icons</h2>
</div>

View File

@ -1,4 +1,4 @@
<section id="icons-directional" class="row">
<section id="directional" class="row">
<div class="span12">
<h2 class="page-header">Directional Icons</h2>
</div>

View File

@ -1,4 +1,4 @@
<section id="icons-medical" class="row">
<section id="medical" class="row">
<div class="span12">
<h2 class="page-header">Medical Icons</h2>
</div>

View File

@ -1,4 +1,4 @@
<section id="icons-new">
<section id="new">
{% if page.navbar_active == "icons" %}
<div class="row">
<div class="span8">

View File

@ -1,4 +1,4 @@
<section id="icons-text-editor" class="row">
<section id="text-editor" class="row">
<div class="span12">
<h2 class="page-header">Text Editor Icons</h2>
</div>

View File

@ -1,4 +1,4 @@
<section id="icons-video-player" class="row">
<section id="video-player" class="row">
<div class="span12">
<h2 class="page-header">Video Player Icons</h2>
</div>

View File

@ -1,5 +1,5 @@
<section id="icons-web-app" class="row">
<section id="web-application" class="row">
<div class="span12">
<h2 class="page-header">Web Application Icons</h2>
</div>

View File

@ -5,14 +5,31 @@
<ul class="nav">
<li{% if page.navbar_active == "home" %} class="active"{% endif %}><a href="{{ page.relative_path }}">Home</a></li>
<li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
<li{% if page.navbar_active == "icons" %} class="active"{% endif %}><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li{% if page.navbar_active == "examples" %} class="active"{% endif %}><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown">
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="dropdown dropdown-split-right{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li class="nav-header">Examples</li>
<li><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new">New Icons in {{ site.font_awesome.version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application">Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor">Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional">Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player">Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand">Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical">Medical Icons</a></li>
</ul>
</li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
@ -34,7 +51,7 @@
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="mailto:{{ site.font_awesome.author.email }}"><i class="icon-envelope"></i> Me</a></li>
<li><a href="mailto:{{ site.font_awesome.author.email }}"><i class="icon-envelope"></i>&nbsp; Me</a></li>
</ul>
</div>
</div>

View File

@ -5795,6 +5795,16 @@ section {
list-style-type: none;
margin: 0;
}
.the-icons li [class^="icon-"],
.the-icons li [class*=" icon-"] {
display: inline-block;
width: 1.2857142857142858em;
text-align: center;
}
.the-icons li [class^="icon-"].icon-large,
.the-icons li [class*=" icon-"].icon-large {
width: 1.5714285714285714em;
}
.the-icons li a {
display: block;
cursor: pointer;
@ -5897,3 +5907,9 @@ footer ul {
footer .project {
margin-top: 10px;
}
.navbar .nav > li.dropdown-split-right > a {
padding-left: 7px;
}
.navbar .nav > li.dropdown-split-left > a {
padding-right: 0;
}

View File

@ -61,18 +61,14 @@ a [class*=" icon-"]:before {
display: inline;
}
/* increased font size for icon-large */
li [class^="icon-"],
.nav li [class^="icon-"],
li [class*=" icon-"],
.nav li [class*=" icon-"] {
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
display: inline-block;
width: 1.2857142857142858em;
text-align: center;
}
li [class^="icon-"].icon-large,
.nav li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large,
.nav li [class*=" icon-"].icon-large {
[class^="icon-"].icon-fixed-width.icon-large,
[class*=" icon-"].icon-fixed-width.icon-large {
width: 1.5714285714285714em;
}
ul.icons-ul {

View File

@ -33,9 +33,9 @@ a {
}
/* increased font size for icon-large */
li, .nav li {
[class^="icon-"],
[class*=" icon-"] {
[class^="icon-"],
[class*=" icon-"] {
&.icon-fixed-width {
display: inline-block;
width: 18/14em;
text-align: center;

View File

@ -1,5 +1,5 @@
@import "twbs-2.3.1/bootstrap.less";
@import "twbs-2.3.1/.less";
@import "twbs-2.3.1/responsive-utilities.less";
@import "sticky-footer.less";
@import "mixins.less";
@ -224,6 +224,15 @@ section {
list-style-type: none;
margin: 0;
li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 18/14em;
text-align: center;
&.icon-large {
width: 22/14em;
}
}
a {
display: block;
&, &:hover { color: @grayDarker; }
@ -344,3 +353,10 @@ footer {
.project { margin-top: 10px; }
}
// makes dropdowns closer for split dropdown
// Links
.navbar .nav > li {
&.dropdown-split-right > a { padding-left: 7px; }
&.dropdown-split-left > a { padding-right: 0; }
}

View File

@ -12,7 +12,7 @@ relative_path: ../
<div class="container">
{% include icons/new.html %}
{% include icons/web-app.html %}
{% include icons/web-application.html %}
{% include icons/text-editor.html %}
{% include icons/directional.html %}
{% include icons/video-player.html %}