Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-18 02:21:47 -05:00
Code Issues Activity

Merge pull request #4117 from PaulAdamDavis/fix-post-state-arrow

Browse source 
Fix chevron animation in publish button
This commit is contained in:
John O'Nolan 2014-09-23 20:10:57 +03:00
commit d1b954e7bc
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;
}
}