ant-design-vue/components/vc-dialog/assets/index/Dialog.less
2018-03-05 19:05:23 +08:00

135 lines
2.3 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.@{prefixCls} {
position: relative;
width: auto;
margin: 10px;
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
&-title {
margin: 0;
font-size: 14px;
line-height: 21px;
font-weight: bold;
}
&-content {
position: relative;
background-color: #ffffff;
border: none;
border-radius: 6px 6px;
background-clip: padding-box;
}
&-close {
cursor: pointer;
border: 0;
background: transparent;
font-size: 21px;
position: absolute;
right: 20px;
top: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
text-decoration: none;
&-x:after {
content: '×'
}
&:hover {
opacity: 1;
filter: alpha(opacity=100);
text-decoration: none;
}
}
&-header {
padding: 13px 20px 14px 20px;
border-radius: 5px 5px 0 0;
background: #fff;
color: #666;
border-bottom: 1px solid #e9e9e9;
}
&-body {
padding: 20px;
}
&-footer {
border-top: 1px solid #e9e9e9;
padding: 10px 20px;
text-align: right;
border-radius: 0 0 5px 5px;
}
.effect() {
animation-duration: 0.3s;
animation-fill-mode: both;
}
&-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: rcDialogZoomIn;
animation-play-state: running;
}
&-zoom-leave&-zoom-leave-active {
animation-name: rcDialogZoomOut;
animation-play-state: running;
}
@keyframes rcDialogZoomIn {
0% {
opacity: 0;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
@keyframes rcDialogZoomOut {
0% {
transform: scale(1, 1);
}
100% {
opacity: 0;
transform: scale(0, 0);
}
}
}
@media (min-width: 768px) {
.@{prefixCls} {
width: 600px;
margin: 30px auto;
}
}