themes/default/less/modals.less

   1 // MODALS
   2 // ------
   3
   4 // Recalculate z-index where appropriate
   5 .modal-open {
   6   .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
   7   .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
   8   .popover       {  z-index: @zindexPopover  + @zindexModal; }
   9   .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
  10 }
  11
  12 // Background
  13 .modal-backdrop {
  14   position: fixed;
  15   top: 0;
  16   right: 0;
  17   bottom: 0;
  18   left: 0;
  19   z-index: @zindexModalBackdrop;
  20   background-color: @black;
  21   // Fade for backdrop
  22   &.fade { opacity: 0; }
  23 }
  24
  25 .modal-backdrop,
  26 .modal-backdrop.fade.in {
  27   .opacity(25);
  28 }
  29
  30 // Base modal
  31 .modal {
  32   position: fixed;
  33   top: 50%;
  34   left: 50%;
  35   z-index: @zindexModal;
  36   max-height: 500px;
  37   overflow: auto;
  38   width: 560px;
  39   margin: -250px 0 0 -280px;
  40   background-color: @white;
  41   border: 1px solid #999;
  42   border: 1px solid rgba(0,0,0,.1);
  43   *border: 1px solid #999; /* IE6-7 */
  44   .border-radius(6px);
  45   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
  46   .background-clip(padding-box);
  47   &.fade {
  48     .transition(e('opacity .3s linear, top .3s ease-out'));
  49     top: -25%;
  50   }
  51   &.fade.in { top: 50%; }
  52 }
  53 .modal-header {
  54   padding: 9px 15px;
  55   border-bottom: 1px solid @grayLighter;
  56   // Close icon
  57   .close { margin-top: 2px; }
  58 }
  59
  60 // Body (where all modal content resises)
  61 .modal-body {
  62   padding: 15px;
  63 }
  64 // Remove bottom margin if need be
  65 .modal-body .modal-form {
  66   margin-bottom: 0;
  67 }
  68
  69 // Footer (for actions)
  70 .modal-footer {
  71   padding: 14px 15px 15px;
  72   margin-bottom: 0;
  73   #gradient > .vertical(@grayLighter, @white);
  74   border-top: 1px solid darken(@grayLight, 10%);
  75   .border-radius(0 0 6px 6px);
  76   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  77   .clearfix();
  78   .btn {
  79     float: right;
  80     margin-left: 8px;
  81     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  82   }
  83 }