From 92bf86febaa6a3ccef29ce9a0d43b5ee789ce8b3 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Tue, 23 Sep 2014 11:03:08 +0100 Subject: [PATCH] Fix chevron animation in publish button Closes #4104 - Fixed the broken spiny animation used in the publish button --- .../assets/sass/components/splitbuttons.scss | 37 ++++--------------- 1 file changed, 8 insertions(+), 29 deletions(-) diff --git a/ghost/admin/assets/sass/components/splitbuttons.scss b/ghost/admin/assets/sass/components/splitbuttons.scss index 628427415c..e4aa22c878 100644 --- a/ghost/admin/assets/sass/components/splitbuttons.scss +++ b/ghost/admin/assets/sass/components/splitbuttons.scss @@ -56,43 +56,22 @@ color: #fff; @include icon($i-chevron-down, 9px) { - margin-top: -3px; - 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 */ - transition-property: transform; - transition-duration: 0.3; - transition-timing-function: ease; + top: 0; + display: inline-block; + position: relative; } } - // Keep the arrow spun when the associated menu is open - &.active .options:before { + &.up .options:before { transform: rotate(-360deg); + transition: transform 0.6s ease, top 0.6s ease; } - - &.up.active .options:before { - margin-top:-4px; - transform: rotate(540deg); - } - - // Spin the arrow on hover and while menu is open - &:hover .options:before, - &:focus .options:before { - will-change: transform; - transform: rotate(-360deg); - } - - // If it has a class of "up" spin it an extra 180degress to point up &.up:hover .options:before, - &.up:focus .options:before { - margin-top:-4px; + &.up.open .options:before { transform: rotate(540deg); - transition-property: transform; - transition-duration: 0.6; - transition-timing-function: ease; + top: -1px; + transition: transform 0.3s ease, top 0.3s ease; } }