| // 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 { |
| .opacity(80); |
| } |
| |
| // 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 */ |
| .border-radius(6px); |
| .box-shadow(0 3px 7px rgba(0,0,0,0.3)); |
| .background-clip(padding-box); |
| &.fade { |
| .transition(e('opacity .3s linear, top .3s ease-out')); |
| 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 resises) |
| .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; |
| .border-radius(0 0 6px 6px); |
| .box-shadow(inset 0 1px 0 @white); |
| .clearfix(); |
| .btn { |
| float: right; |
| margin-left: 5px; |
| margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs |
| } |
| } |