From 52aebc1ba6967dcb14047a5d7d2092267597f5fa Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
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/core/client/assets/sass/components/splitbuttons.scss b/core/client/assets/sass/components/splitbuttons.scss
index 628427415c..e4aa22c878 100644
--- a/core/client/assets/sass/components/splitbuttons.scss
+++ b/core/client/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;
}
}