1 | // We want overlays to always appear over user content, so set a baseline
|
2 | // very high z-index for the overlay container, which is where we create the new
|
3 | // stacking context for all overlays.
|
4 | $overlay-container-z-index: 1000 !default;
|
5 | $overlay-z-index: 1000 !default;
|
6 | $overlay-backdrop-z-index: 1000 !default;
|
7 |
|
8 | // Background color for all of the backdrops
|
9 | $overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
|
10 |
|
11 | // Default backdrop animation is based on the Material Design swift-ease-out.
|
12 | $backdrop-animation-duration: 400ms !default;
|
13 | $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
14 |
|
15 | /// Emits structural styles required for cdk/overlay to function.
|
16 | @mixin overlay() {
|
17 | .cdk-overlay-container, .cdk-global-overlay-wrapper {
|
18 | // Disable events from being captured on the overlay container.
|
19 | pointer-events: none;
|
20 |
|
21 | // The container should be the size of the viewport.
|
22 | top: 0;
|
23 | left: 0;
|
24 | height: 100%;
|
25 | width: 100%;
|
26 | }
|
27 |
|
28 | // The overlay-container is an invisible element which contains all individual overlays.
|
29 | .cdk-overlay-container {
|
30 | position: fixed;
|
31 | z-index: $overlay-container-z-index;
|
32 |
|
33 | &:empty {
|
34 | // Hide the element when it doesn't have any child nodes. This doesn't
|
35 | // include overlays that have been detached, rather than disposed.
|
36 | display: none;
|
37 | }
|
38 | }
|
39 |
|
40 | // We use an extra wrapper element in order to use make the overlay itself a flex item.
|
41 | // This makes centering the overlay easy without running into the subpixel rendering
|
42 | // problems tied to using `transform` and without interfering with the other position
|
43 | // strategies.
|
44 | .cdk-global-overlay-wrapper {
|
45 | display: flex;
|
46 | position: absolute;
|
47 | z-index: $overlay-z-index;
|
48 | }
|
49 |
|
50 | // A single overlay pane.
|
51 | .cdk-overlay-pane {
|
52 | // Note: it's important for this one to start off `absolute`,
|
53 | // in order for us to be able to measure it correctly.
|
54 | position: absolute;
|
55 | pointer-events: auto;
|
56 | box-sizing: border-box;
|
57 | z-index: $overlay-z-index;
|
58 |
|
59 | // For connected-position overlays, we set `display: flex` in
|
60 | // order to force `max-width` and `max-height` to take effect.
|
61 | display: flex;
|
62 | max-width: 100%;
|
63 | max-height: 100%;
|
64 | }
|
65 |
|
66 | .cdk-overlay-backdrop {
|
67 | // TODO(jelbourn): reuse sidenav fullscreen mixin.
|
68 | position: absolute;
|
69 | top: 0;
|
70 | bottom: 0;
|
71 | left: 0;
|
72 | right: 0;
|
73 |
|
74 | z-index: $overlay-backdrop-z-index;
|
75 | pointer-events: auto;
|
76 | -webkit-tap-highlight-color: transparent;
|
77 | transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
|
78 | opacity: 0;
|
79 |
|
80 | &.cdk-overlay-backdrop-showing {
|
81 | opacity: 1;
|
82 |
|
83 | // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
|
84 | // this file will be copied to the top-level `cdk` package when putting together the files
|
85 | // for npm. Any relative import paths we use here will become invalid once the file is copied.
|
86 | .cdk-high-contrast-active & {
|
87 | // In high contrast mode the rgba background will become solid
|
88 | // so we need to fall back to making it opaque using `opacity`.
|
89 | opacity: 0.6;
|
90 | }
|
91 | }
|
92 | }
|
93 |
|
94 | .cdk-overlay-dark-backdrop {
|
95 | background: $overlay-backdrop-color;
|
96 | }
|
97 |
|
98 | .cdk-overlay-transparent-backdrop {
|
99 | // Define a transition on the visibility so that the `transitionend` event can fire immediately.
|
100 | transition: visibility 1ms linear, opacity 1ms linear;
|
101 | visibility: hidden;
|
102 | opacity: 1;
|
103 |
|
104 | // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
|
105 | // capturing the user's mouse scroll events. Since we also can't use something like
|
106 | // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
|
107 | // all and using `opacity` to make the element transparent.
|
108 | &.cdk-overlay-backdrop-showing {
|
109 | opacity: 0;
|
110 | visibility: visible;
|
111 | }
|
112 | }
|
113 |
|
114 | .cdk-overlay-backdrop-noop-animation {
|
115 | transition: none;
|
116 | }
|
117 |
|
118 | // Overlay parent element used with the connected position strategy. Used to constrain the
|
119 | // overlay element's size to fit within the viewport.
|
120 | .cdk-overlay-connected-position-bounding-box {
|
121 | position: absolute;
|
122 | z-index: $overlay-z-index;
|
123 |
|
124 | // We use `display: flex` on this element exclusively for centering connected overlays.
|
125 | // When *not* centering, a top/left/bottom/right will be set which overrides the normal
|
126 | // flex layout.
|
127 | display: flex;
|
128 |
|
129 | // We use the `column` direction here to avoid some flexbox issues in Edge
|
130 | // when using the "grow after open" options.
|
131 | flex-direction: column;
|
132 |
|
133 | // Add some dimensions so the element has an `innerText` which some people depend on in tests.
|
134 | min-width: 1px;
|
135 | min-height: 1px;
|
136 | }
|
137 |
|
138 | // Used when disabling global scrolling.
|
139 | .cdk-global-scrollblock {
|
140 | position: fixed;
|
141 |
|
142 | // Necessary for the content not to lose its width. Note that we're using 100%, instead of
|
143 | // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
|
144 | // that the element had before we made it `fixed`.
|
145 | width: 100%;
|
146 |
|
147 | // Note: this will always add a scrollbar to whatever element it is on, which can
|
148 | // potentially result in double scrollbars. It shouldn't be an issue, because we won't
|
149 | // block scrolling on a page that doesn't have a scrollbar in the first place.
|
150 | overflow-y: scroll;
|
151 | }
|
152 | }
|