mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-10 16:43:29 +08:00
142 lines
2.8 KiB
Plaintext
142 lines
2.8 KiB
Plaintext
@menuPrefixCls: ant-menu;
|
|
|
|
:root .ant-menu-submenu.ant-menu-submenu-placement-bottomLeft {
|
|
top: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
:root .ant-menu-submenu.ant-menu-submenu-placement-rightTop {
|
|
left: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
:root .ant-menu-submenu.ant-menu-submenu-placement-leftTop {
|
|
right: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.@{menuPrefixCls} {
|
|
&-submenu {
|
|
&-popup {
|
|
position: absolute;
|
|
|
|
.submenu-title-wrapper {
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
|
|
> .@{menuPrefixCls} {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.effect() {
|
|
animation-duration: 0.3s;
|
|
animation-fill-mode: both;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
&-open {
|
|
&-slide-up-enter,
|
|
&-slide-up-appear {
|
|
.effect();
|
|
opacity: 0;
|
|
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&-slide-up-leave {
|
|
.effect();
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&-slide-up-enter&-slide-up-enter-active,
|
|
&-slide-up-appear&-slide-up-appear-active {
|
|
animation-name: antMenuOpenSlideUpIn;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
&-slide-up-leave&-slide-up-leave-active {
|
|
animation-name: antMenuOpenSlideUpOut;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
@keyframes antMenuOpenSlideUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes antMenuOpenSlideUpOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0);
|
|
}
|
|
}
|
|
|
|
&-zoom-enter,
|
|
&-zoom-appear {
|
|
opacity: 0;
|
|
.effect();
|
|
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&-zoom-leave {
|
|
.effect();
|
|
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&-zoom-enter&-zoom-enter-active,
|
|
&-zoom-appear&-zoom-appear-active {
|
|
animation-name: antMenuOpenZoomIn;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
&-zoom-leave&-zoom-leave-active {
|
|
animation-name: antMenuOpenZoomOut;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
@keyframes antMenuOpenZoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes antMenuOpenZoomOut {
|
|
0% {
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0, 0);
|
|
}
|
|
}
|
|
}
|
|
} |