122 lines
2.1 KiB
CSS
122 lines
2.1 KiB
CSS
/*
|
|
Modals
|
|
========================================
|
|
*/
|
|
|
|
/* Background */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: var(--zindex-modal-backdrop);
|
|
background-color: var(--black);
|
|
}
|
|
|
|
/* Fade for backdrop */
|
|
.modal-backdrop.fade {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-backdrop,
|
|
.modal-backdrop.fade.in {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Base modal */
|
|
.modal {
|
|
position: fixed;
|
|
top: 10%;
|
|
left: 50%;
|
|
z-index: var(--zindex-modal);
|
|
width: 560px;
|
|
margin-left: -280px;
|
|
background-color: var(--white);
|
|
border: 1px solid #999;
|
|
border: 1px solid rgba(0,0,0,.3);
|
|
border: 1px solid #999; /* IE6-7 */
|
|
border-radius: 6px;
|
|
box-shadow: 0 3px 7px rgba(0,0,0,0.3);
|
|
background-clip: padding-box;
|
|
/* Remove focus outline from opened modal */
|
|
outline: none;
|
|
}
|
|
|
|
.modal.fade {
|
|
transition: opacity 0.3s linear, top 0.3s ease-out;
|
|
top: -25%;
|
|
}
|
|
|
|
.modal.fade.in {
|
|
top: 10%;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 9px 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
/* Close icon */
|
|
.modal-header .close {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Heading */
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
line-height: 30px;
|
|
}
|
|
|
|
/* Body (where all modal content resides) */
|
|
.modal-body {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
padding: 15px;
|
|
}
|
|
|
|
/* Remove bottom margin if need be */
|
|
.modal-form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Footer (for actions) */
|
|
.modal-footer {
|
|
padding: 14px 15px 15px;
|
|
margin-bottom: 0;
|
|
text-align: right; /* right align buttons */
|
|
background-color: #f5f5f5;
|
|
border-top: 1px solid #ddd;
|
|
border-radius: 0 0 6px 6px;
|
|
box-shadow: inset 0 1px 0 var(--white);
|
|
zoom: 1;
|
|
}
|
|
|
|
.modal-footer:before,
|
|
.modal-footer:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
|
|
.modal-footer:after {
|
|
clear: both;
|
|
}
|
|
|
|
/* Properly space out buttons */
|
|
.modal-footer .btn + .btn {
|
|
margin-left: 5px;
|
|
margin-bottom: 0; /* account for input[type="submit"] which gets the bottom margin like all other inputs */
|
|
}
|
|
|
|
/* but override that for button groups */
|
|
.modal-footer .btn-group .btn + .btn {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
/* and override it for block buttons as well */
|
|
.modal-footer .btn-block + .btn-block {
|
|
margin-left: 0;
|
|
}
|