// site (bonsai/garden) nav – which houses the 'svg-graph'
.site-nav {
display: none; width: 100%; &.nav-open { display: flex; height: 100vh; width: 100vw; } @include mq(md) { display: block; flex: 1 1 auto; } header { @include fs-5; display: flex; justify-content: flex-start; position: absolute; top: 0; width: 100%; z-index: 4; padding: $sp-2; color: $grey-dk-000; cursor: pointer; user-select: none; } footer { position: absolute; width: 100%; z-index: 4; bottom: 0; left: 0; padding: $sp-3; }
}
.dropdown {
border: none; background: none;
}
.dropdown:hover .dropdown-content {
display: flex; flex-direction: column;
}
.dropdown-content {
display: none;
}
.dropdown-btn {
@include fs-6; display: flex; cursor: pointer; user-select: none; padding: $sp-2; border: none; background: none; display: table-cell; vertical-align: middle; filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);
}
.dropbtn {
@include fs-6; cursor: pointer; user-select: none; padding: $sp-2; transition: all .2s ease-in-out; border: none; background: none; display: table-cell; vertical-align: middle; transition: all .2s ease-in-out; &:hover { transform: scale(1.5); } #posts-emoji-span { filter: drop-shadow(0 0 0.8mm $drop-shadow-purple); } #recent-emoji-span { filter: drop-shadow(0 0 0.8mm $drop-shadow-blue); } #stat-tags-emoji-span { filter: drop-shadow(0 0 0.8mm $drop-shadow-brown); }
}
.site-nav-btn {
@include fs-6; display: flex; cursor: pointer; user-select: none; padding: $sp-2; transition: all .2s ease-in-out; border: none; background: none; display: table-cell; vertical-align: middle; &:hover { transform: scale(1.5); } #search-emoji-span { filter: drop-shadow(0 0 0.8mm $drop-shadow-brown); } #visited-emoji-span { filter: drop-shadow(0 0 0.8mm $drop-shadow-orange); }
}
.delete-btn {
@include fs-3; display: flex; cursor: pointer; user-select: none; transition: all .2s ease-in-out; border: none; background: none; display: table-cell; vertical-align: middle; &:hover { transform: scale(1.5); } #delete-emoji-span { filter: drop-shadow(0 0 0.8mm $drop-shadow-red); }
}
// visited nav (user-path)
.visited-nav {
z-index: 3; position:relative; height: 100%; width: 100%; padding-top: $sp-10; padding-bottom: $sp-10; overflow-y: scroll; .visited-nav-list { padding-left: $sp-1 !important; list-style: none; .visited-nav-list-item { @include fs-4; display: flex; width: 80%; padding: $sp-2; margin-top: $sp-2; margin-bottom: $sp-2; border-radius: 16px; // both animation and transform rely on this transition setting (according to: https://stackoverflow.com/a/20903041) transition: all 0.15s ease-in-out; &:hover { transform: scale(1.1); } &::before { content: "đŸ¥¾"; } button { justify-content: flex-end; } } }
}
.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: css-tricks.com/different-approaches-for-creating-a-staggered-animation/#how-about-custom-properties // @keyframes animateShow { // 0% { // opacity: 0; // }
// 100% { // opacity: 1; // } // }