vant/packages/vant-css/src/dialog.css
张敏 ce27957133 文档细节优化,search、咯阿丁和dialog组件样式修复 (#5)
* fix: loading small style, search style and dialog style

* fix: scroll to top

* fix mobile scroll

* fix scroll to top
2017-04-23 22:38:50 +08:00

103 lines
1.7 KiB
CSS

@import './mixins/border_retina.css';
@import './popup.css';
@component-namespace van {
@b dialog-wrapper {
position: absolute;
}
@b dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #fff;
width: 85%;
border-radius: 4px;
font-size: 16px;
overflow: hidden;
backface-visibility: hidden;
transition: .2s;
@e header {
padding: 15px 0 0;
}
@e content {
padding: 15px 20px;
position: relative;
&::after {
@mixin border-retina (bottom);
}
}
@e title {
text-align: center;
padding-left: 0;
margin-bottom: 0;
font-size: 16px;
color: #333;
}
@e message {
color: #999;
margin: 0;
font-size: 14px;
line-height: 1.5;
@m notitle {
color: #333;
font-size: 16px;
}
}
@e footer {
font-size: 14px;
overflow: hidden;
@when twobtn {
.van-dialog__btn {
width: 50%;
}
.van-dialog__cancel {
&::after {
@mixin border-retina (right);
}
}
}
}
@e btn {
font-size: 16px;
line-height: 52px;
border: 0;
padding: 0;
background-color: #fff;
float: left;
box-sizing: border-box;
text-align: center;
position: relative;
}
@e cancel {
color: #333;
}
@e confirm {
color: #00C000;
width: 100%;
}
}
}
.dialog-bounce-enter {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.7);
}
.dialog-bounce-leave-active {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.9);
}