css/bootstrap/modals.less

   1 //
   2 // Modals
   3 // --------------------------------------------------
   4
   5
   6 // Recalculate z-index where appropriate,
   7 // but only apply to elements within modal
   8 .modal-open .modal {
   9   .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
  10   .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
  11   .popover       {  z-index: @zindexPopover  + @zindexModal; }
  12   .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
  13 }
  14
  15 // Background
  16 .modal-backdrop {
  17   position: fixed;
  18   top: 0;
  19   right: 0;
  20   bottom: 0;
  21   left: 0;
  22   z-index: @zindexModalBackdrop;
  23   background-color: @black;
  24   // Fade for backdrop
  25   &.fade { opacity: 0; }
  26 }
  27
  28 .modal-backdrop,
  29 .modal-backdrop.fade.in {
  30   .opacity(80);
  31 }
  32
  33 // Base modal
  34 .modal {
  35   position: fixed;
  36   top: 50%;
  37   left: 50%;
  38   z-index: @zindexModal;
  39   overflow: auto;
  40   width: 560px;
  41   margin: -250px 0 0 -280px;
  42   background-color: @white;
  43   border: 1px solid #999;
  44   border: 1px solid rgba(0,0,0,.3);
  45   *border: 1px solid #999; /* IE6-7 */
  46   .border-radius(6px);
  47   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
  48   .background-clip(padding-box);
  49   &.fade {
  50     .transition(e('opacity .3s linear, top .3s ease-out'));
  51     top: -25%;
  52   }
  53   &.fade.in { top: 50%; }
  54 }
  55 .modal-header {
  56   padding: 9px 15px;
  57   border-bottom: 1px solid #eee;
  58   // Close icon
  59   .close { margin-top: 2px; }
  60   // Heading
  61   h3 {
  62     margin: 0;
  63     line-height: 30px;
  64   }
  65 }
  66
  67 // Body (where all modal content resides)
  68 .modal-body {
  69   overflow-y: auto;
  70   max-height: 400px;
  71   padding: 15px;
  72 }
  73 // Remove bottom margin if need be
  74 .modal-form {
  75   margin-bottom: 0;
  76 }
  77
  78 // Footer (for actions)
  79 .modal-footer {
  80   padding: 14px 15px 15px;
  81   margin-bottom: 0;
  82   text-align: right; // right align buttons
  83   background-color: #f5f5f5;
  84   border-top: 1px solid #ddd;
  85   .border-radius(0 0 6px 6px);
  86   .box-shadow(inset 0 1px 0 @white);
  87   .clearfix(); // clear it in case folks use .pull-* classes on buttons
  88
  89   // Properly space out buttons
  90   .btn + .btn {
  91     margin-left: 5px;
  92     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  93   }
  94   // but override that for button groups
  95   .btn-group .btn + .btn {
  96     margin-left: -1px;
  97   }
  98 }