xstatic-bootstrap-scss/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss

84 lines
1.8 KiB
SCSS

// MODALS
// ------
// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: $zindexDropdown + $zindexModal; }
.dropdown.open { *z-index: $zindexDropdown + $zindexModal; }
.popover { z-index: $zindexPopover + $zindexModal; }
.tooltip { z-index: $zindexTooltip + $zindexModal; }
}
// Background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindexModalBackdrop;
background-color: $black;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
@include opacity(0.8);
}
// Base modal
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: $zindexModal;
max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
background-color: $white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
@include border-radius(6px);
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include background-clip(padding-box);
&.fade {
$transition: opacity .3s linear, top .3s ease-out;
@include transition($transition);
top: -25%;
}
&.fade.in { top: 50%; }
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
// Close icon
.close { margin-top: 2px; }
}
// Body (where all modal content resides)
.modal-body {
padding: 15px;
}
// Remove bottom margin if need be
.modal-body .modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
@include border-radius(0 0 6px 6px);
@include box-shadow(inset 0 1px 0 $white);
@include clearfix();
.btn {
float: right;
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
}