TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-05 18:34:39 +03:00
Code Issues Projects Releases Wiki Activity

Fix chevron animation in publish button

Browse Source 
Closes #4104

- Fixed the broken spiny animation used in the publish button
This commit is contained in:
Paul Adam Davis 2014-09-23 11:03:08 +01:00
parent 438444df3d
commit 52aebc1ba6
1 changed files with 8 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
core/client/assets/sass/components/splitbuttons.scss
View File

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