]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // .modal-open - body class for killing the scroll |
2 | // .modal - container to scroll within | |
3 | // .modal-dialog - positioning shell for the actual modal | |
4 | // .modal-content - actual modal w/ bg and corners and stuff | |
5 | ||
6 | ||
7 | // Kill the scroll on the body | |
8 | .modal-open { | |
9 | overflow: hidden; | |
10 | } | |
11 | ||
12 | // Container that the modal scrolls within | |
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 | // Prevent Chrome on Windows from adding a focus outline. For details, see | |
23 | // https://github.com/twbs/bootstrap/pull/10951. | |
24 | outline: 0; | |
25 | // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a | |
26 | // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 | |
27 | // See also https://github.com/twbs/bootstrap/issues/17695 | |
28 | ||
29 | // When fading in the modal, animate it to slide down | |
30 | &.fade .modal-dialog { | |
31 | @include transition($modal-transition); | |
32 | transform: translate(0, -25%); | |
33 | } | |
34 | &.show .modal-dialog { transform: translate(0, 0); } | |
35 | } | |
36 | .modal-open .modal { | |
37 | overflow-x: hidden; | |
38 | overflow-y: auto; | |
39 | } | |
40 | ||
41 | // Shell div to position the modal with bottom padding | |
42 | .modal-dialog { | |
43 | position: relative; | |
44 | width: auto; | |
45 | margin: $modal-dialog-margin; | |
46 | } | |
47 | ||
48 | // Actual modal | |
49 | .modal-content { | |
50 | position: relative; | |
51 | display: flex; | |
52 | flex-direction: column; | |
53 | background-color: $modal-content-bg; | |
54 | background-clip: padding-box; | |
55 | border: $modal-content-border-width solid $modal-content-border-color; | |
56 | @include border-radius($border-radius-lg); | |
57 | @include box-shadow($modal-content-xs-box-shadow); | |
58 | // Remove focus outline from opened modal | |
59 | outline: 0; | |
60 | } | |
61 | ||
62 | // Modal background | |
63 | .modal-backdrop { | |
64 | position: fixed; | |
65 | top: 0; | |
66 | right: 0; | |
67 | bottom: 0; | |
68 | left: 0; | |
69 | z-index: $zindex-modal-backdrop; | |
70 | background-color: $modal-backdrop-bg; | |
71 | ||
72 | // Fade for backdrop | |
73 | &.fade { opacity: 0; } | |
74 | &.show { opacity: $modal-backdrop-opacity; } | |
75 | } | |
76 | ||
77 | // Modal header | |
78 | // Top section of the modal w/ title and dismiss | |
79 | .modal-header { | |
80 | display: flex; | |
81 | align-items: center; // vertically center it | |
82 | justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends | |
83 | padding: $modal-header-padding; | |
84 | border-bottom: $modal-header-border-width solid $modal-header-border-color; | |
85 | } | |
86 | ||
87 | // Title text within header | |
88 | .modal-title { | |
89 | margin-bottom: 0; | |
90 | line-height: $modal-title-line-height; | |
91 | } | |
92 | ||
93 | // Modal body | |
94 | // Where all modal content resides (sibling of .modal-header and .modal-footer) | |
95 | .modal-body { | |
96 | position: relative; | |
97 | // Enable `flex-grow: 1` so that the body take up as much space as possible | |
98 | // when should there be a fixed height on `.modal-dialog`. | |
99 | flex: 1 1 auto; | |
100 | padding: $modal-inner-padding; | |
101 | } | |
102 | ||
103 | // Footer (for actions) | |
104 | .modal-footer { | |
105 | display: flex; | |
106 | align-items: center; // vertically center | |
107 | justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items | |
108 | padding: $modal-inner-padding; | |
109 | border-top: $modal-footer-border-width solid $modal-footer-border-color; | |
110 | ||
111 | // Easily place margin between footer elements | |
112 | > :not(:first-child) { margin-left: .25rem; } | |
113 | > :not(:last-child) { margin-right: .25rem; } | |
114 | } | |
115 | ||
116 | // Measure scrollbar width for padding body during modal show/hide | |
117 | .modal-scrollbar-measure { | |
118 | position: absolute; | |
119 | top: -9999px; | |
120 | width: 50px; | |
121 | height: 50px; | |
122 | overflow: scroll; | |
123 | } | |
124 | ||
125 | // Scale up the modal | |
126 | @include media-breakpoint-up(sm) { | |
127 | // Automatically set modal's width for larger viewports | |
128 | .modal-dialog { | |
129 | max-width: $modal-md; | |
130 | margin: $modal-dialog-sm-up-margin-y auto; | |
131 | } | |
132 | ||
133 | .modal-content { | |
134 | @include box-shadow($modal-content-sm-up-box-shadow); | |
135 | } | |
136 | ||
137 | .modal-sm { max-width: $modal-sm; } | |
138 | } | |
139 | ||
140 | @include media-breakpoint-up(lg) { | |
141 | .modal-lg { max-width: $modal-lg; } | |
142 | } |