mediawiki-extensions-Multim.../resources/mmv/ui/mmv.ui.metadataPanelScroller.less
Pau Giner 96791886c8 More prominent metadata panel invite.
The invite animation has been made more prominent and the chevron
is highlighted. this only applies until the user opens the
panel for the first time.

Change-Id: I91d1b9bffaf302890f63b741313aa47cc4beef24
2014-05-15 20:41:13 +00:00

98 lines
1.6 KiB
Plaintext

@import "../mmv.globals";
@import "../mmv.mixins";
@import "mediawiki.mixins.animation";
.mw-mmv-post-image {
.animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
&.invite {
.animation( mw-mmv-invite-animation 1s ease 0s 1 normal forwards );
}
}
.mw-mmv-appear-animation() {
0% {
opacity: 0.6;
}
50% {
opacity: 0.9;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes mw-mmv-appear-animation {
.mw-mmv-appear-animation;
}
@-moz-keyframes mw-mmv-appear-animation {
.mw-mmv-appear-animation;
}
@-o-keyframes mw-mmv-appear-animation {
.mw-mmv-appear-animation;
}
@keyframes mw-mmv-appear-animation {
.mw-mmv-appear-animation;
}
.mw-mmv-invite-animation() {
0% {
margin-top: 0px;
}
33% {
margin-top: -30px;
}
100% {
margin-top: 0;
}
}
@-webkit-keyframes mw-mmv-invite-animation {
.mw-mmv-invite-animation;
}
@-moz-keyframes mw-mmv-invite-animation {
.mw-mmv-invite-animation;
}
@-o-keyframes mw-mmv-invite-animation {
.mw-mmv-invite-animation;
}
@keyframes mw-mmv-invite-animation {
.mw-mmv-invite-animation;
}
.mw-mmv-drag-affordance {
width: 100%;
height: @metadatabar-drag-height;
cursor: pointer;
}
.mw-mmv-drag-icon {
width: 64px;
height: @metadatabar-drag-height;
/* @embed */
background-image: url(img/drag.svg);
background-repeat: no-repeat;
background-position: center bottom;
margin: 0 auto;
opacity: 0.7;
transition: opacity 0.25s;
&.pointing-down {
background-position: center top;
.rotate(180deg);
}
.mw-mmv-post-image.invite & {
background-image: url(img/drag-active.svg);
opacity: 0.9;
}
}
.mw-mmv-post-image:hover .mw-mmv-drag-icon {
opacity: 1;
}