studio - plumbs in Font Awesome icons into header dropdown menus and user nav

This commit is contained in:
Brian Talbot
2013-05-14 18:02:42 -04:00
committed by David Baumgold
parent 033826746b
commit 2be2e2f20d
2 changed files with 13 additions and 7 deletions

View File

@@ -131,6 +131,11 @@
text-overflow: ellipsis;
@include font-size(16);
font-weight: 600;
[class^="icon-"] {
@include font-size(36);
@include lh(36);
}
}
}
@@ -219,10 +224,11 @@
.nav-item {
position: relative;
.icon-expand {
.icon-caret-down {
@include font-size(14);
@include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
display: inline-block;
vertical-align: middle;
margin-left: 2px;
opacity: 0.5;
color: $gray-l2;
@@ -230,7 +236,7 @@
&:hover {
.icon-expand {
.icon-caret-down {
color: $blue;
opacity: 1.0;
}

View File

@@ -21,7 +21,7 @@
<ol>
<li class="nav-item nav-course-courseware">
<h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<h3 class="title"><span class="label-prefix">Course </span>Content <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -36,7 +36,7 @@
</li>
<li class="nav-item nav-course-settings">
<h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<h3 class="title"><span class="label-prefix">Course </span>Settings <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -51,7 +51,7 @@
</li>
<li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<h3 class="title">Tools <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -76,10 +76,10 @@
<li class="nav-item nav-account-username">
<a href="#" class="title">
<span class="account-username">
<i class="ss-icon ss-symbolicons-standard icon-user">&#x1F464;</i>
<i class="icon-user"></i>
${ user.username }
</span>
<i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
<i class="icon-caret-down"></i>
</a>
<div class="wrapper wrapper-nav-sub">