Sha256: 093f6fdc046cd465b9a0d0a21ceabc4a4351518d240a47c6aff14cf24b83afff
Contents?: true
Size: 1.67 KB
Versions: 7
Compression:
Stored size: 1.67 KB
Contents
// site nav (bonsai/garden) -- which houses the 'jekyll-graph'
.site-nav {
header {
position: absolute;
z-index: $z-nav-component;
top: 0;
padding: $sp-2;
@include fs-5;
display: flex;
justify-content: flex-start;
cursor: pointer;
user-select: none;
}
footer {
position: absolute;
z-index: $z-nav-component;
bottom: 0;
left: 0;
padding: $sp-3;
}
}
// site-nav components
.dropdown {
border: none;
background: none;
&:hover {
display: flex;
flex-direction: column;
.dropdown__content {
display: flex;
flex-direction: column;
}
}
&__btn {
@include fs-6;
cursor: pointer;
user-select: none;
padding: $sp-2;
// suppress default html button attributes
border: none;
background: none;
filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);
}
&__content {
display: none;
}
}
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
// animation-name: animateShow;
// animation-duration: 100ms;
// animation-timing-function: ease-in-out;
}
// @keyframes animateHide {
// 0% {
// opacity: 1;
// }
// 100% {
// opacity: 0;
// }
// }
// .show {
// animation-name: animateShow;
// animation-duration: 250ms;
// animation-delay: calc(var(--animation-show-order) * 100ms);
// animation-fill-mode: both;
// animation-timing-function: ease-in-out;
// }
// // from: https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/#how-about-custom-properties
// @keyframes animateShow {
// 0% {
// opacity: 0;
// }
// 100% {
// opacity: 1;
// }
// }
Version data entries
7 entries across 7 versions & 3 rubygems