Yao b8930d972a
[refactor] Dialog: 升级为自定义组件 (#184)
* 封装 doc-page, 方便写文档

* add pop manager

* popup upgrade

* 更新 README

* add empty line

* delete empty css

* dialog init

* dialog

* dialog upgrade

* 修复 helper 里的样式问题

* dialog 文档

* 修复 button 奇怪的边框问题

* 缩进处理
2018-04-07 22:28:23 +08:00

72 lines
1.1 KiB
Plaintext

@import "../common/_mixins";
/* 基础样式 */
.zan-dialog--container {
width: 80vw;
font-size: 16px;
overflow: hidden;
border-radius: 4px;
background-color: #fff;
color: #333;
}
/* 弹出层内容 */
.zan-dialog__header {
padding: 15px 0 0;
text-align: center;
}
.zan-dialog__content {
position: relative;
padding: 15px 20px;
line-height: 1.5;
min-height: 40px;
&::after {
@mixin hairline;
border-bottom-width: 1px;
}
}
/* 在有标题时,需要减弱内容的存在感 */
.zan-dialog__content--title {
color: #999;
font-size: 14px;
}
.zan-dialog__footer {
overflow: hidden;
}
.zan-dialog__button {
flex: 1;
}
.zan-dialog__button-inside, .zan-dialog__button-inside--first {
margin-bottom: 0;
line-height: 50px;
height: 50px;
&::after {
border-width: 0;
border-radius: 0;
}
}
/* 水平/垂直布局 */
.zan-dialog__footer--horizon {
display: flex;
}
.zan-dialog__footer--horizon .zan-dialog__button-inside {
&::after {
border-left-width: 1px;
}
}
.zan-dialog__footer--vertical .zan-dialog__button-inside {
&::after {
border-top-width: 1px;
}
}