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"> <div class="span12">
<h2 class="page-header">Brand Icons</h2> <h2 class="page-header">Brand Icons</h2>
</div> </div>

View file

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

View file

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

View file

@ -1,4 +1,4 @@
<section id="icons-new"> <section id="new">
{% if page.navbar_active == "icons" %} {% if page.navbar_active == "icons" %}
<div class="row"> <div class="row">
<div class="span8"> <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"> <div class="span12">
<h2 class="page-header">Text Editor Icons</h2> <h2 class="page-header">Text Editor Icons</h2>
</div> </div>

View file

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

View file

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

View file

@ -5,14 +5,31 @@
<ul class="nav"> <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 == "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 == "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 class="dropdown-split-left{% if page.navbar_active == "icons" %} 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 dropdown-split-right{% if page.navbar_active == "icons" %} active{% endif %}">
<li class="dropdown"> <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 }}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"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b> <i class="icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right">
<li class="nav-header">Examples</li> <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/#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/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger 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> <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul> </ul>
<ul class="nav pull-right"> <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> </ul>
</div> </div>
</div> </div>

View file

@ -5795,6 +5795,16 @@ section {
list-style-type: none; list-style-type: none;
margin: 0; 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 { .the-icons li a {
display: block; display: block;
cursor: pointer; cursor: pointer;
@ -5897,3 +5907,9 @@ footer ul {
footer .project { footer .project {
margin-top: 10px; 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; display: inline;
} }
/* increased font size for icon-large */ /* increased font size for icon-large */
li [class^="icon-"], [class^="icon-"].icon-fixed-width,
.nav li [class^="icon-"], [class*=" icon-"].icon-fixed-width {
li [class*=" icon-"],
.nav li [class*=" icon-"] {
display: inline-block; display: inline-block;
width: 1.2857142857142858em; width: 1.2857142857142858em;
text-align: center; text-align: center;
} }
li [class^="icon-"].icon-large, [class^="icon-"].icon-fixed-width.icon-large,
.nav li [class^="icon-"].icon-large, [class*=" icon-"].icon-fixed-width.icon-large {
li [class*=" icon-"].icon-large,
.nav li [class*=" icon-"].icon-large {
width: 1.5714285714285714em; width: 1.5714285714285714em;
} }
ul.icons-ul { ul.icons-ul {

View file

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

View file

@ -1,5 +1,5 @@
@import "twbs-2.3.1/bootstrap.less"; @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 "sticky-footer.less";
@import "mixins.less"; @import "mixins.less";
@ -224,6 +224,15 @@ section {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
li { li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 18/14em;
text-align: center;
&.icon-large {
width: 22/14em;
}
}
a { a {
display: block; display: block;
&, &:hover { color: @grayDarker; } &, &:hover { color: @grayDarker; }
@ -344,3 +353,10 @@ footer {
.project { margin-top: 10px; } .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"> <div class="container">
{% include icons/new.html %} {% include icons/new.html %}
{% include icons/web-app.html %} {% include icons/web-application.html %}
{% include icons/text-editor.html %} {% include icons/text-editor.html %}
{% include icons/directional.html %} {% include icons/directional.html %}
{% include icons/video-player.html %} {% include icons/video-player.html %}