[Summary view] [Print] [Text view]

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