studio - abstracts and animates main nav dropdown icons

cms/static/sass/elements/_navigation.scss

@@ -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%);
       }
     }
   }

cms/templates/widgets/header.html

@@ -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">