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}
96