popovers

2023-06-17 16:05:46 -07:00
parent f078f20c08
commit d5b51a8e29
10 changed files with 143 additions and 16 deletions
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -0,0 +1,43 @@
+@keyframes dropin {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.popover {
+  z-index: 999;
+  position: absolute;
+  overflow: scroll;
+  width: 30rem;
+  height: 20rem;
+  padding: 0 1rem;
+  margin-top: -1rem;
+  border: 1px solid var(--lightgray);
+  background-color: var(--light);
+  border-radius: 5px;
+  box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
+
+  font-weight: initial;
+
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+
+  @media all and (max-width: 600px) {
+    display: none !important;
+  }
+}
+
+a:hover .popover, .popover:hover {
+  animation: dropin 0.5s ease;
+  opacity: 1;
+  visibility: visible;
+}