You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Connected.Components/Styles/components/_overlay.scss

65 lines
1.5 KiB

.overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 !important;
align-items: center;
justify-content: center;
border-radius: inherit;
display: flex;
position: fixed;
transition: .3s cubic-bezier(.25,.8,.5,1),z-index 1ms;
z-index: 5;
&.overlay-absolute {
position: absolute;
}
& .overlay-scrim {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
position: absolute;
height: 100%;
width: 100%;
border-color: transparent;
background-color: transparent;
animation: animation-fadein ease 0.15s;
-webkit-animation: animation-fadein ease 0.15s;
-moz-animation: animation-fadein ease 0.15s;
-o-animation: animation-fadein ease 0.15s;
&.overlay-dark {
border-color: var(--palette-overlay-dark);
background-color: var(--palette-overlay-dark);
}
&.overlay-light {
border-color: var(--palette-overlay-light);
background-color: var(--palette-overlay-light);
}
&:hover {
cursor: default;
}
}
& .overlay-content {
position: relative;
}
&.overlay-popover {
z-index: var(--zindex-popover);
}
&.overlay-dialog {
z-index: calc(var(--zindex-dialog) + 1);
}
&.overlay-drawer {
z-index: calc(var(--zindex-appbar) + 1); //<-- Yes this is correct we want to display it on top of the Appbar
}
}