1 | // |
---|
2 | // Modals |
---|
3 | // -------------------------------------------------- |
---|
4 | |
---|
5 | // .modal-open - body class for killing the scroll |
---|
6 | // .modal - container to scroll within |
---|
7 | // .modal-dialog - positioning shell for the actual modal |
---|
8 | // .modal-content - actual modal w/ bg and corners and shit |
---|
9 | |
---|
10 | // Kill the scroll on the body |
---|
11 | .modal-open { |
---|
12 | overflow: hidden; |
---|
13 | } |
---|
14 | |
---|
15 | // Container that the modal scrolls within |
---|
16 | .modal { |
---|
17 | display: none; |
---|
18 | overflow: hidden; |
---|
19 | position: fixed; |
---|
20 | top: 0; |
---|
21 | right: 0; |
---|
22 | bottom: 0; |
---|
23 | left: 0; |
---|
24 | z-index: @zindex-modal; |
---|
25 | -webkit-overflow-scrolling: touch; |
---|
26 | |
---|
27 | // Prevent Chrome on Windows from adding a focus outline. For details, see |
---|
28 | // https://github.com/twbs/bootstrap/pull/10951. |
---|
29 | outline: 0; |
---|
30 | |
---|
31 | // When fading in the modal, animate it to slide down |
---|
32 | &.fade .modal-dialog { |
---|
33 | .translate(0, -25%); |
---|
34 | .transition-transform(~"0.3s ease-out"); |
---|
35 | } |
---|
36 | &.in .modal-dialog { .translate(0, 0) } |
---|
37 | } |
---|
38 | .modal-open .modal { |
---|
39 | overflow-x: hidden; |
---|
40 | overflow-y: auto; |
---|
41 | } |
---|
42 | |
---|
43 | // Shell div to position the modal with bottom padding |
---|
44 | .modal-dialog { |
---|
45 | position: relative; |
---|
46 | width: auto; |
---|
47 | margin: 10px; |
---|
48 | } |
---|
49 | |
---|
50 | // Actual modal |
---|
51 | .modal-content { |
---|
52 | position: relative; |
---|
53 | background-color: @modal-content-bg; |
---|
54 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) |
---|
55 | border: 1px solid @modal-content-border-color; |
---|
56 | border-radius: @border-radius-large; |
---|
57 | .box-shadow(0 3px 9px rgba(0,0,0,.5)); |
---|
58 | background-clip: padding-box; |
---|
59 | // Remove focus outline from opened modal |
---|
60 | outline: 0; |
---|
61 | } |
---|
62 | |
---|
63 | // Modal background |
---|
64 | .modal-backdrop { |
---|
65 | position: fixed; |
---|
66 | top: 0; |
---|
67 | right: 0; |
---|
68 | bottom: 0; |
---|
69 | left: 0; |
---|
70 | z-index: @zindex-modal-background; |
---|
71 | background-color: @modal-backdrop-bg; |
---|
72 | // Fade for backdrop |
---|
73 | &.fade { .opacity(0); } |
---|
74 | &.in { .opacity(@modal-backdrop-opacity); } |
---|
75 | } |
---|
76 | |
---|
77 | // Modal header |
---|
78 | // Top section of the modal w/ title and dismiss |
---|
79 | .modal-header { |
---|
80 | padding: @modal-title-padding; |
---|
81 | border-bottom: 1px solid @modal-header-border-color; |
---|
82 | min-height: (@modal-title-padding + @modal-title-line-height); |
---|
83 | } |
---|
84 | // Close icon |
---|
85 | .modal-header .close { |
---|
86 | margin-top: -2px; |
---|
87 | } |
---|
88 | |
---|
89 | // Title text within header |
---|
90 | .modal-title { |
---|
91 | margin: 0; |
---|
92 | line-height: @modal-title-line-height; |
---|
93 | } |
---|
94 | |
---|
95 | // Modal body |
---|
96 | // Where all modal content resides (sibling of .modal-header and .modal-footer) |
---|
97 | .modal-body { |
---|
98 | position: relative; |
---|
99 | padding: @modal-inner-padding; |
---|
100 | } |
---|
101 | |
---|
102 | // Footer (for actions) |
---|
103 | .modal-footer { |
---|
104 | padding: @modal-inner-padding; |
---|
105 | text-align: right; // right align buttons |
---|
106 | border-top: 1px solid @modal-footer-border-color; |
---|
107 | &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons |
---|
108 | |
---|
109 | // Properly space out buttons |
---|
110 | .btn + .btn { |
---|
111 | margin-left: 5px; |
---|
112 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs |
---|
113 | } |
---|
114 | // but override that for button groups |
---|
115 | .btn-group .btn + .btn { |
---|
116 | margin-left: -1px; |
---|
117 | } |
---|
118 | // and override it for block buttons as well |
---|
119 | .btn-block + .btn-block { |
---|
120 | margin-left: 0; |
---|
121 | } |
---|
122 | } |
---|
123 | |
---|
124 | // Measure scrollbar width for padding body during modal show/hide |
---|
125 | .modal-scrollbar-measure { |
---|
126 | position: absolute; |
---|
127 | top: -9999px; |
---|
128 | width: 50px; |
---|
129 | height: 50px; |
---|
130 | overflow: scroll; |
---|
131 | } |
---|
132 | |
---|
133 | // Scale up the modal |
---|
134 | @media (min-width: @screen-sm-min) { |
---|
135 | // Automatically set modal's width for larger viewports |
---|
136 | .modal-dialog { |
---|
137 | width: @modal-md; |
---|
138 | margin: 30px auto; |
---|
139 | } |
---|
140 | .modal-content { |
---|
141 | .box-shadow(0 5px 15px rgba(0,0,0,.5)); |
---|
142 | } |
---|
143 | |
---|
144 | // Modal sizes |
---|
145 | .modal-sm { width: @modal-sm; } |
---|
146 | } |
---|
147 | |
---|
148 | @media (min-width: @screen-md-min) { |
---|
149 | .modal-lg { width: @modal-lg; } |
---|
150 | } |
---|