1
0
Fork 0
mirror of synced 2024-06-29 19:50:26 +12:00
appwrite/public/styles/comps/modal.less
2019-05-09 09:54:42 +03:00

141 lines
2.1 KiB
Plaintext

.modal-open, .modal-open body {
//margin: 0;
//height: 100%;
//overflow: hidden;
.modal-bg {
position: fixed;
content: '';
display: block;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #0c0c0c;
opacity: 0.5;
z-index: 4;
}
}
.modal {
overflow: auto;
display: none;
position: fixed;
width: 100%;
max-height: 90%;
max-width: 640px;
background: #ffffff;
z-index: 1000;
box-shadow: 0 0 4px rgba(0, 0, 0, .25);
padding: 30px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 10px;
box-sizing: border-box;
text-align: @config-start;
@media @phones, @tablets {
width: ~"calc(100% - 20px)";
}
&.padding-small {
padding: 15px;
}
&.height-tiny {
form {
height: 100px;
}
}
&.height-small {
form {
height: 220px;
}
}
&.width-small {
max-width: 400px;
}
&.width-medium {
max-width: 500px;
}
&.width-large {
max-width: 800px;
}
&.open {
display: block;
}
&.close {
display: none;
}
&.fill {
height: 95%;
max-height: 95%;
max-width: 75%;
}
h1 {
margin-bottom: 25px;
margin-top: 0;
font-size: 20px;
text-align: @config-start;
}
h1, h2, h3, h4 , h5, h6 {
color: inherit;
}
form, .main {
position: relative;
border-top: solid 1px #e7e7e7;
padding: 30px 30px 0 30px;
margin: 0 -30px;
}
.separator {
margin: 20px -30px;
}
/*iframe {
width: ~"calc(100% - 70px)";
height: ~"calc(100% - 180px)";
border: none;
background: #323639;
opacity: 1;
position: absolute;
top: 85px;
bottom: 0;
right: 35px;
left: 35px;
}*/
.info {
margin: 0 -30px;
padding: 20px 30px;
background: #f5fbff;
color: #3b5d73;
border-top: solid 1px #eaf2f7;
border-bottom: solid 1px #eaf2f7;
}
.close {
width: 30px;
height: 30px;
line-height: 30px;
padding: 0;
margin: 0;
background: #1b1b1b;
color: #ffffff;
border-radius: 50%;
}
}