Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues 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; color: #fff;
@include icon($i-chevron-down, 9px) { @include icon($i-chevron-down, 9px) {
margin-top: -3px; top: 0;
transition: margin-top 0.3s ease; display: inline-block;
/* Transition of transform properties are split out due to a position: relative;
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;
} }
} }
// Keep the arrow spun when the associated menu is open &.up .options:before {
&.active .options:before {
transform: rotate(-360deg); 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:hover .options:before,
&.up:focus .options:before { &.up.open .options:before {
margin-top:-4px;
transform: rotate(540deg); transform: rotate(540deg);
transition-property: transform; top: -1px;
transition-duration: 0.6; transition: transform 0.3s ease, top 0.3s ease;
transition-timing-function: ease;
} }
} }