117 lines
2.2 KiB
CSS
117 lines
2.2 KiB
CSS
html,body,div,li,ul {padding: 0; margin: 0;}
|
|
body{position: relative;}
|
|
li,ul {list-style: none;}
|
|
.mp-body {
|
|
overflow: hidden;
|
|
}
|
|
.mp-mask {
|
|
position: fixed;
|
|
left:0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,.4);
|
|
/* display: none; */
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
}
|
|
.mp-shadowup,.mp-shadowdown {
|
|
height: 5em;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 50;
|
|
}
|
|
.mp-shadowup {
|
|
top: -1px;
|
|
background:-webkit-linear-gradient(to bottom, #FFF, rgba(255, 255, 255, .3));
|
|
background:linear-gradient(to bottom, #FFF, rgba(255, 255, 255, .3));
|
|
pointer-events: none;
|
|
}
|
|
.mp-shadowdown {
|
|
bottom: 0;
|
|
background: -webkit-linear-gradient(to top, #FFF, rgba(255,255,255,.3));
|
|
background: linear-gradient(to top, #FFF, rgba(255,255,255,.3));
|
|
pointer-events: none;
|
|
}
|
|
.mp-line {
|
|
position: absolute;
|
|
top: 5em;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2.5em;
|
|
border-top: 1px solid #acacac;
|
|
border-bottom: 1px solid #acacac;
|
|
}
|
|
.mp-container {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: #FFF;
|
|
font-size: 16px;
|
|
-webkit-transition: transform .25s;
|
|
-webkit-transform: translate3d(0,100%,0);
|
|
transition: transform .25s;
|
|
transform: translate3d(0,100%,0);
|
|
}
|
|
.mp-header {
|
|
background: #e2e2e2;
|
|
color: #249ff1;
|
|
line-height: 2.5em;
|
|
}
|
|
.mp-cancel {
|
|
padding-left: 1em;
|
|
}
|
|
.mp-confirm {
|
|
float: right;
|
|
padding-right: 1em;
|
|
}
|
|
.mp-confirm.disabled {
|
|
opacity: .3;
|
|
}
|
|
.mp-content {
|
|
position: relative;
|
|
height: 12.5em;
|
|
}
|
|
.mp-box {
|
|
height: 12.5em;
|
|
overflow: hidden;
|
|
}
|
|
.mp-box:after {
|
|
display: table;
|
|
height: 0;
|
|
clear: both;
|
|
content: '';
|
|
}
|
|
.mp-list-wrap ul {
|
|
position: relative;
|
|
padding: 5em 0;
|
|
-webkit-transition: transform .1s ease-out;
|
|
transition: transform .1s ease-out;
|
|
}
|
|
.mp-list-wrap ul:after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 55;
|
|
content: '';
|
|
}
|
|
.mp-list-wrap li {
|
|
line-height: 2.5em;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.mp-list-wrap {
|
|
float: left;
|
|
height: 12.5em;
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
-webkit-transition: width .2s;
|
|
transition: width .2s;
|
|
} |