Yao fbbf539662
[breaking change] Dialog Popup 重构 (#69)
* 重新更改 popup

* 更丰富的popup 功能

* 文档补充

* rebuild dialog

* dialog 文档补充

* 增加 icon 文档
2017-12-03 17:40:42 +08:00

70 lines
1.4 KiB
Plaintext

.zan-popup__mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.7);
display: none;
}
.zan-popup__container {
position: fixed;
left: 50%;
top: 50%;
background: #fff;
transform: translate3d(-50%, -50%, 0);
transform-origin: center;
transition: all 0.4s ease;
z-index: 11;
opacity: 0;
}
.zan-popup--show .zan-popup__container {
opacity: 1;
}
.zan-popup--show .zan-popup__mask {
display: block;
}
/* 左侧popup */
.zan-popup--left .zan-popup__container {
left: 0;
top: auto;
transform: translate3d(-100%, 0, 0);
}
.zan-popup--show.zan-popup--left .zan-popup__container {
transform: translate3d(0, 0, 0);
}
/* 右侧popup */
.zan-popup--right .zan-popup__container {
right: 0;
top: auto;
left: auto;
transform: translate3d(100%, 0, 0);
}
.zan-popup--show.zan-popup--right .zan-popup__container {
transform: translate3d(0, 0, 0);
}
/* 底部popup */
.zan-popup--bottom .zan-popup__container {
top: auto;
left: auto;
bottom: 0;
transform: translate3d(0, 100%, 0);
}
.zan-popup--show.zan-popup--bottom .zan-popup__container {
transform: translate3d(0, 0, 0);
}
/* 顶部popup */
.zan-popup--top .zan-popup__container {
top: 0;
left: auto;
transform: translate3d(0, -100%, 0);
}
.zan-popup--show.zan-popup--top .zan-popup__container {
transform: translate3d(0, 0, 0);
}