scratch – Blame information for rev 63
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
58 | office | 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 | &:extend(.clearfix all); |
||
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 | } |