roadmap/quartz/components/styles/popover.scss

60 lines
1.0 KiB
SCSS
Raw Normal View History

@use "../../styles/variables.scss" as *;
2023-06-17 23:05:46 +00:00
@keyframes dropin {
0% {
opacity: 0;
visibility: hidden;
}
2023-06-18 17:47:07 +00:00
1% {
2023-06-17 23:05:46 +00:00
opacity: 0;
}
100% {
opacity: 1;
visibility: visible;
}
}
.popover {
z-index: 999;
position: absolute;
2023-06-18 17:47:07 +00:00
overflow: visible;
padding: 1rem;
2023-06-17 23:05:46 +00:00
2023-06-18 17:47:07 +00:00
& > .popover-inner {
position: relative;
2023-06-18 17:47:07 +00:00
width: 30rem;
2023-07-10 02:32:24 +00:00
max-height: 20rem;
2023-07-26 04:10:37 +00:00
padding: 0 1rem 1rem 1rem;
2023-06-18 17:47:07 +00:00
font-weight: initial;
2023-07-02 20:08:29 +00:00
line-height: normal;
2023-06-20 03:37:45 +00:00
font-size: initial;
2023-07-01 07:03:01 +00:00
font-family: var(--bodyFont);
border: 1px solid var(--lightgray);
2023-06-18 17:47:07 +00:00
background-color: var(--light);
border-radius: 5px;
2023-07-23 00:27:41 +00:00
box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
overflow: auto;
2023-06-18 17:47:07 +00:00
}
2023-06-17 23:05:46 +00:00
2023-06-20 03:37:45 +00:00
h1 {
font-size: 1.5rem;
}
2023-06-17 23:05:46 +00:00
visibility: hidden;
opacity: 0;
2023-07-23 00:27:41 +00:00
transition:
opacity 0.3s ease,
visibility 0.3s ease;
2023-06-17 23:05:46 +00:00
@media all and (max-width: $mobileBreakpoint) {
2023-06-17 23:05:46 +00:00
display: none !important;
}
}
2023-07-23 00:27:41 +00:00
a:hover .popover,
.popover:hover {
2023-06-18 17:47:07 +00:00
animation: dropin 0.3s ease;
animation-fill-mode: forwards;
animation-delay: 0.2s;
2023-06-17 23:05:46 +00:00
}