Skip to content

Instantly share code, notes, and snippets.

@AhsanAyaz
Last active June 25, 2023 12:05
Show Gist options
  • Save AhsanAyaz/db9282da17c589522aac0a3f781a7a0a to your computer and use it in GitHub Desktop.
Save AhsanAyaz/db9282da17c589522aac0a3f781a7a0a to your computer and use it in GitHub Desktop.
Angular CDK Overlay (with menu) Default CSS for Angular Cookbook Recipes
.cdk-overlay-container {
display: block;
&.z-index-top {
z-index: 2050;
}
}
.duplicate-modal-overlay {
z-index: 999;
}
.cdk-overlay-backdrop {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cdk-overlay-container {
position: fixed;
z-index: 1000;
}
.cdk-overlay-container:empty {
display: none;
}
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
background-color: #fff;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
.cdk-overlay-backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 1;
}
@media screen and (-ms-high-contrast: active) {
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 0.6;
}
}
.cdk-overlay-dark-backdrop {
background: rgba(0, 0, 0, 0.03);
}
.cdk-overlay-transparent-backdrop,
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
opacity: 0;
}
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.menu-popover {
min-width: 150px;
height: auto;
border: 1px solid white;
border-radius: 8px;
&__list {
color: #333;
font-size: 0.75rem;
width: 100%;
box-shadow: 0px 2px 14px 4px rgba(0, 0, 0, 0.1);
padding: 8px 0;
&__item {
transition: all 0.2s ease;
padding: 8px 16px;
cursor: pointer;
&:hover {
background-color: #333;
color: white;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment