joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
86 lines (85 loc) • 2.11 kB
CSS
.jw-custom-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.jw-custom-modal .jw-custom-modal-bg {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
position: fixed;
-ms-touch-action: none;
touch-action: none;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
.jw-custom-modal .jw-custom-modal-w {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.jw-custom-modal .jw-custom-modal-c {
background: #fff;
margin: 48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
max-height: calc(100% - 96px);
width: 620px;
padding-bottom: 25px;
-webkit-box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
border-radius: 4px;
}
.jw-custom-modal .jw-custom-modal-h {
height: 70px;
line-height: 70px;
border-bottom: 1px solid #e7e7e7;
padding: 0 25px;
}
.jw-custom-modal .jw-custom-modal-h i {
float: right;
vertical-align: top;
margin-top: 27px;
cursor: pointer;
}
.jw-custom-modal .jw-custom-modal-h span {
display: block;
margin-right: 25px;
font-size: 18px;
color: #494949;
letter-spacing: 0;
}
.jw-custom-modal .jw-custom-modal-main {
overflow-y: auto;
padding: 30px 25px 0;
margin-bottom: 30px;
}
.jw-custom-modal .jw-custom-modal-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 25px;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}