1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | .modal-open {
|
9 | overflow: hidden;
|
10 | }
|
11 |
|
12 |
|
13 | .modal {
|
14 | position: fixed;
|
15 | top: 0;
|
16 | right: 0;
|
17 | bottom: 0;
|
18 | left: 0;
|
19 | z-index: $zindex-modal;
|
20 | display: none;
|
21 | overflow: hidden;
|
22 |
|
23 |
|
24 | outline: 0;
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | .modal-open & {
|
30 | overflow-x: hidden;
|
31 | overflow-y: auto;
|
32 | }
|
33 | }
|
34 |
|
35 |
|
36 | .modal-dialog {
|
37 | position: relative;
|
38 | width: auto;
|
39 | margin: $modal-dialog-margin;
|
40 |
|
41 | pointer-events: none;
|
42 |
|
43 |
|
44 | .modal.fade & {
|
45 | @include transition($modal-transition);
|
46 | transform: translate(0, -25%);
|
47 | }
|
48 | .modal.show & {
|
49 | transform: translate(0, 0);
|
50 | }
|
51 | }
|
52 |
|
53 | .modal-dialog-centered {
|
54 | display: flex;
|
55 | align-items: center;
|
56 | min-height: calc(100% - (#{$modal-dialog-margin} * 2));
|
57 | }
|
58 |
|
59 |
|
60 | .modal-content {
|
61 | position: relative;
|
62 | display: flex;
|
63 | flex-direction: column;
|
64 | width: 100%;
|
65 |
|
66 | pointer-events: auto;
|
67 | background-color: $modal-content-bg;
|
68 | background-clip: padding-box;
|
69 | border: $modal-content-border-width solid $modal-content-border-color;
|
70 | @include border-radius($modal-content-border-radius);
|
71 | @include box-shadow($modal-content-box-shadow-xs);
|
72 |
|
73 | outline: 0;
|
74 | }
|
75 |
|
76 |
|
77 | .modal-backdrop {
|
78 | position: fixed;
|
79 | top: 0;
|
80 | right: 0;
|
81 | bottom: 0;
|
82 | left: 0;
|
83 | z-index: $zindex-modal-backdrop;
|
84 | background-color: $modal-backdrop-bg;
|
85 |
|
86 |
|
87 | &.fade { opacity: 0; }
|
88 | &.show { opacity: $modal-backdrop-opacity; }
|
89 | }
|
90 |
|
91 |
|
92 |
|
93 | .modal-header {
|
94 | display: flex;
|
95 | align-items: flex-start;
|
96 | justify-content: space-between;
|
97 | padding: $modal-header-padding;
|
98 | border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
99 | @include border-top-radius($modal-content-border-radius);
|
100 |
|
101 | .close {
|
102 | padding: $modal-header-padding;
|
103 |
|
104 | margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
|
105 | }
|
106 | }
|
107 |
|
108 |
|
109 | .modal-title {
|
110 | margin-bottom: 0;
|
111 | line-height: $modal-title-line-height;
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 | .modal-body {
|
117 | position: relative;
|
118 |
|
119 |
|
120 | flex: 1 1 auto;
|
121 | padding: $modal-inner-padding;
|
122 | }
|
123 |
|
124 |
|
125 | .modal-footer {
|
126 | display: flex;
|
127 | align-items: center;
|
128 | justify-content: flex-end;
|
129 | padding: $modal-inner-padding;
|
130 | border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
131 |
|
132 |
|
133 | > :not(:first-child) { margin-left: .25rem; }
|
134 | > :not(:last-child) { margin-right: .25rem; }
|
135 | }
|
136 |
|
137 |
|
138 | .modal-scrollbar-measure {
|
139 | position: absolute;
|
140 | top: -9999px;
|
141 | width: 50px;
|
142 | height: 50px;
|
143 | overflow: scroll;
|
144 | }
|
145 |
|
146 |
|
147 | @include media-breakpoint-up(sm) {
|
148 |
|
149 | .modal-dialog {
|
150 | max-width: $modal-md;
|
151 | margin: $modal-dialog-margin-y-sm-up auto;
|
152 | }
|
153 |
|
154 | .modal-dialog-centered {
|
155 | min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
156 | }
|
157 |
|
158 | .modal-content {
|
159 | @include box-shadow($modal-content-box-shadow-sm-up);
|
160 | }
|
161 |
|
162 | .modal-sm { max-width: $modal-sm; }
|
163 |
|
164 | }
|
165 |
|
166 | @include media-breakpoint-up(lg) {
|
167 | .modal-lg { max-width: $modal-lg; }
|
168 | }
|