]>
Commit | Line | Data |
---|---|---|
7b869721 S |
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: auto; | |
19 | overflow-y: scroll; | |
20 | position: fixed; | |
21 | top: 0; | |
22 | right: 0; | |
23 | bottom: 0; | |
24 | left: 0; | |
25 | z-index: @zindex-modal-background; | |
26 | ||
27 | // When fading in the modal, animate it to slide down | |
28 | &.fade .modal-dialog { | |
29 | .translate(0, -25%); | |
30 | .transition-transform(~"0.3s ease-out"); | |
31 | } | |
32 | &.in .modal-dialog { .translate(0, 0)} | |
33 | } | |
34 | ||
35 | // Shell div to position the modal with bottom padding | |
36 | .modal-dialog { | |
37 | position: relative; | |
38 | margin-left: auto; | |
39 | margin-right: auto; | |
40 | width: auto; | |
41 | padding: 10px; | |
42 | z-index: (@zindex-modal-background + 10); | |
43 | } | |
44 | ||
45 | // Actual modal | |
46 | .modal-content { | |
47 | position: relative; | |
48 | background-color: @modal-content-bg; | |
49 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) | |
50 | border: 1px solid @modal-content-border-color; | |
51 | border-radius: @border-radius-large; | |
52 | .box-shadow(0 3px 9px rgba(0,0,0,.5)); | |
53 | background-clip: padding-box; | |
54 | // Remove focus outline from opened modal | |
55 | outline: none; | |
56 | } | |
57 | ||
58 | // Modal background | |
59 | .modal-backdrop { | |
60 | position: fixed; | |
61 | top: 0; | |
62 | right: 0; | |
63 | bottom: 0; | |
64 | left: 0; | |
65 | z-index: (@zindex-modal-background - 10); | |
66 | background-color: @modal-backdrop-bg; | |
67 | // Fade for backdrop | |
68 | &.fade { .opacity(0); } | |
69 | &.in { .opacity(.5); } | |
70 | } | |
71 | ||
72 | // Modal header | |
73 | // Top section of the modal w/ title and dismiss | |
74 | .modal-header { | |
75 | padding: @modal-title-padding; | |
76 | border-bottom: 1px solid @modal-header-border-color; | |
77 | min-height: (@modal-title-padding + @modal-title-line-height); | |
78 | } | |
79 | // Close icon | |
80 | .modal-header .close { | |
81 | margin-top: -2px; | |
82 | } | |
83 | ||
84 | // Title text within header | |
85 | .modal-title { | |
86 | margin: 0; | |
87 | line-height: @modal-title-line-height; | |
88 | } | |
89 | ||
90 | // Modal body | |
91 | // Where all modal content resides (sibling of .modal-header and .modal-footer) | |
92 | .modal-body { | |
93 | position: relative; | |
94 | padding: @modal-inner-padding; | |
95 | } | |
96 | ||
97 | // Footer (for actions) | |
98 | .modal-footer { | |
99 | margin-top: 15px; | |
100 | padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; | |
101 | text-align: right; // right align buttons | |
102 | border-top: 1px solid @modal-footer-border-color; | |
103 | .clearfix(); // clear it in case folks use .pull-* classes on buttons | |
104 | ||
105 | // Properly space out buttons | |
106 | .btn + .btn { | |
107 | margin-left: 5px; | |
108 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs | |
109 | } | |
110 | // but override that for button groups | |
111 | .btn-group .btn + .btn { | |
112 | margin-left: -1px; | |
113 | } | |
114 | // and override it for block buttons as well | |
115 | .btn-block + .btn-block { | |
116 | margin-left: 0; | |
117 | } | |
118 | } | |
119 | ||
120 | // Scale up the modal | |
121 | @media screen and (min-width: @screen-sm-min) { | |
122 | ||
123 | .modal-dialog { | |
124 | width: 600px; | |
125 | padding-top: 30px; | |
126 | padding-bottom: 30px; | |
127 | } | |
128 | .modal-content { | |
129 | .box-shadow(0 5px 15px rgba(0,0,0,.5)); | |
130 | } | |
131 | ||
132 | } |