Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - abstracts and animates main nav dropdown icons

Browse Source
This commit is contained in:
Brian Talbot
2013-06-27 16:36:31 -04:00
parent ab0cada683
commit d592348a07
2 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
cms/static/sass/elements/_navigation.scss
View File

@@ -31,20 +31,19 @@ nav {
}
.icon-caret-down {
// @include transition(rotate .15s ease-in-out .25s);
.ui-toggle-dd {
@include transition(rotate .25s ease-in-out .25s);
margin-left: ($baseline/10);
&:hover {
@include transform(rotate(180deg));
}
display: inline-block;
vertical-align: middle;
}
// dropped down state
&.is-selected {
.icon-caret-down {
@include transform(rotate(180deg));
.ui-toggle-dd {
@include transform(rotate(-180deg));
@include transform-origin(50% 50%);
}
}
}

10
cms/templates/widgets/header.html
View File

@@ -19,7 +19,7 @@
<ol>
<li class="nav-item nav-course-courseware">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down"></i></h3>
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -42,7 +42,7 @@
</li>
<li class="nav-item nav-course-settings">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down"></i></h3>
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -65,7 +65,7 @@
</li>
<li class="nav-item nav-course-tools">
<h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down"></i></h3>
<h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -93,7 +93,7 @@
<ol>
<li class="nav-item nav-account-help">
<h3 class="title"><span class="label">Help</span> <i class="icon-caret-down"></i></h3>
<h3 class="title"><span class="label">Help</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
@@ -113,7 +113,7 @@
</li>
<li class="nav-item nav-account-user">
<h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down"></i></h3>
<h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">