git.fiddlerwoaroof.com
less/modals.less
489b3d20
 // 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;
   overflow: auto;
   width: 560pt;
   margin: -250pt 0 0 -280pt;
   background-color: @white;
   border: 1pt solid #999;
   border: 1pt solid rgba(0,0,0,.3);
   *border: 1pt solid #999; /* IE6-7 */
   .border-radius(6pt);
   .box-shadow(0 3pt 7pt 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: 9pt 15pt;
   border-bottom: 1pt solid #eee;
   // Close icon
   .close { margin-top: 2pt; }
 }
 
 // Body (where all modal content resides)
 .modal-body {
   overflow-y: auto;
   max-height: 400pt;
   padding: 15pt;
 }
 // Remove bottom margin if need be
 .modal-form {
   margin-bottom: 0;
 }
 
 // Footer (for actions)
 .modal-footer {
   padding: 14pt 15pt 15pt;
   margin-bottom: 0;
   text-align: right; // right align buttons
   background-color: #f5f5f5;
   border-top: 1pt solid #ddd;
   .border-radius(0 0 6pt 6pt);
   .box-shadow(inset 0 1pt 0 @white);
   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
   .btn + .btn {
     margin-left: 5pt;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }
   // but override that for button groups
   .btn-group .btn + .btn {
     margin-left: -1pt;
   }
 }