179 lines
3.0 KiB
SCSS
Vendored
179 lines
3.0 KiB
SCSS
Vendored
|
|
//nav {
|
|
// background-color: $mediumDark;
|
|
// height: 100vh;
|
|
// width: 15rem;
|
|
// flex-shrink: 0;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
|
|
// transition: width $transition-delay;
|
|
//
|
|
// &.small {
|
|
// width: 5.5rem;
|
|
// }
|
|
//
|
|
// hr {
|
|
// width: 90%;
|
|
// border-radius: 1px;
|
|
// border: 1px solid $dark;
|
|
// }
|
|
//
|
|
// .nav-item {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// text-decoration: none;
|
|
// color: $light;
|
|
// padding-top: 1rem;
|
|
// padding-bottom: 1rem;
|
|
//
|
|
// span {
|
|
// overflow: hidden;
|
|
// }
|
|
//
|
|
// svg {
|
|
// margin: 0 1rem;
|
|
// width: 3rem;
|
|
// transition: fill 0.2s;
|
|
// fill: $light;
|
|
// }
|
|
//
|
|
// &:hover {
|
|
// color: $dark;
|
|
// background-color: $light;
|
|
// transition: color 0.2s, background-color 0.2s;
|
|
//
|
|
// svg {
|
|
// fill: $dark;
|
|
// transition: fill 0.2s;
|
|
// }
|
|
// }
|
|
//
|
|
// //&:visited {
|
|
// // color: $dark;
|
|
// //}
|
|
// }
|
|
//}
|
|
//
|
|
//.site-logo {
|
|
// width: 3rem;
|
|
// fill: $light;
|
|
// transition: fill 0.2s;
|
|
//
|
|
// &:hover {
|
|
// fill: $dark;
|
|
// transition: fill 0.2s;
|
|
// }
|
|
//}
|
|
//
|
|
//.navhidden {
|
|
// width: 0;
|
|
//}
|
|
//
|
|
//
|
|
//.site-logo-main {
|
|
// @extend .site-logo;
|
|
// display: block;
|
|
// margin: 1rem;
|
|
// width: 13rem;
|
|
// transition: width $transition-delay;
|
|
//
|
|
// svg {
|
|
//
|
|
// width: 100%;
|
|
// }
|
|
//
|
|
// &.small {
|
|
// //padding-bottom: 10rem;
|
|
// width: 3.5rem;
|
|
// }
|
|
//}
|
|
//
|
|
//.nav-toggle {
|
|
// @extend .site-logo;
|
|
// align-self: center;
|
|
//
|
|
// svg {
|
|
// transition: transform $transition-delay;
|
|
// }
|
|
//
|
|
// svg.small {
|
|
// transform: rotate(-180deg);
|
|
// }
|
|
//}
|
|
|
|
nav {
|
|
@apply w-48;
|
|
transition: width 0.3s;
|
|
|
|
svg {
|
|
@apply fill-current text-orange-600 w-12 p-2;
|
|
transition: color 0.3s;
|
|
|
|
&:hover {
|
|
@apply text-orange-800;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
@apply block;
|
|
|
|
svg {
|
|
@apply w-40 m-2;
|
|
transition: width 0.3s, color 0.3s;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
@apply flex items-center;
|
|
|
|
|
|
span {
|
|
@apply font-bold text-xl ml-2 overflow-hidden truncate;
|
|
transition: width 0.3s;
|
|
|
|
&:hover {
|
|
@apply text-orange-800;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@apply bg-orange-500;
|
|
|
|
span,
|
|
svg {
|
|
@apply text-orange-800;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-toggle svg {
|
|
transition: transform 0.3s;
|
|
}
|
|
}
|
|
|
|
nav.small {
|
|
@apply w-16;
|
|
|
|
.logo {
|
|
@apply w-16 p-0;
|
|
|
|
svg {
|
|
@apply w-16 m-0;
|
|
}
|
|
}
|
|
|
|
.nav-item span {
|
|
@apply w-0;
|
|
}
|
|
|
|
.nav-toggle svg {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
.app {
|
|
//min-width: 100%;
|
|
width: initial;
|
|
}
|