Save post button now stays spun up

Fixes #352

- Removed one-off styles and code for the publish button. Publish button
now uses data-toggle attribute wired up in toggle.js and forms.scss.
- Ensured split button common styles are up to date to conform with
vendor prefixing of transform properties.

core/client/assets/sass/layouts/editor.scss

@@ -418,20 +418,6 @@ body.zen {
         height: 30px;
         margin-top: 5px;
         box-shadow: rgba(255,255,255,0.4) 0 1px 0 inset;
-
-        &.up:hover {
-            @include icon($i-chevron-down) {
-                margin-top: -5px;
-                @include transform(rotate(540deg));
-                /* Transition properties are split out due to a defect in 
-                    the vendor prefixing of transform transitions.
-                    See: http://github.com/thoughtbot/bourbon/pull/86
-                    */
-                @include transition-property(transform);
-                @include transition-duration(0.6s);
-                @include transition-timing-function(ease);
-            };
-        }
     }
 
     .splitbutton-save{

core/client/assets/sass/modules/forms.scss

@@ -280,10 +280,26 @@ input[type="reset"] {
             right: 50%;
             margin-top: -3px;
             margin-right: -5px;
-            @include transition(transform 0.3s ease, margin-top 0.3s ease);
+            @include transition(margin-top 0.3s ease);
+            /* Transition of transform properties are split out due to a 
+                defect in the vendor prefixing of transform transitions.
+                See: http://github.com/thoughtbot/bourbon/pull/86 */
+            @include transition-property(transform);
+            @include transition-duration(0.3);
+            @include transition-timing-function(ease);
         };
 
-        // Spin the arrow on hover
+        // Keep the arrow spun when the associated menu is open
+        &.active:before {
+            @include transform(rotate(360deg));
+        }
+
+        &.up.active:before {
+            margin-top:-4px;
+            @include transform(rotate(540deg));
+        }
+
+        // Spin the arrow on hover and while menu is open
         &:hover {
             box-shadow: none;
             background: #f8f8f8;
@@ -297,7 +313,9 @@ input[type="reset"] {
             @include icon($i-chevron-down) {
                 margin-top:-4px;
                 @include transform(rotate(540deg));
-                @include transition(transform 0.6s ease);
+                @include transition-property(transform);
+                @include transition-duration(0.6);
+                @include transition-timing-function(ease);
             };
         }
     }
@@ -322,7 +340,7 @@ input[type="reset"] {
     @extend %splitbutton;
     .options {
         background: darken($blue, 5%);
-        &:hover {background: darken($blue, 10%);}
+        &:hover, &.active {background: darken($blue, 10%);}
     }
 }
 

core/client/views/editor.js

@@ -251,11 +251,6 @@
                 $('body').toggleClass('fullscreen');
             });
 
-            $('.options.up').on('click', function (e) {
-                e.stopPropagation();
-                $(this).next("ul").fadeToggle(200);
-            });
-
             this.$('.CodeMirror-scroll').on('scroll', this.syncScroll);
 
             // Shadow on Markdown if scrolled

core/server/views/editor.hbs

@@ -43,7 +43,7 @@
         <div class="right">
             <section id="entry-actions" class="splitbutton-save">
                 <button type="button" class="button-save js-post-button"></button>
-                <a class="options up" href="#"><span class="hidden">Options</span></a>
+                <a class="options up" data-toggle="ul" href="#"><span class="hidden">Options</span></a>
                 <ul class="editor-options overlay" style="display:none">
                     <li data-set-status="published"><a href="#">Publish Now</a></li>
                     <li data-set-status="queue"><a href="#">Add to Queue</a></li>