MusicTopus/sass/navbar.scss
2024-06-19 10:36:41 +02:00

326 lines
No EOL
7.7 KiB
SCSS

.navbar {
min-height: 3.5rem;
background-color: var(--navbar-color);
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
color: rgba(0,0,0,.7);
position: fixed;
z-index: 1;
top: 0;
right: 0;
left: 0;
@include transition() {}
@include respond-to("medium-up") {
align-items: stretch;
display: flex;
}
&.container {
max-width: 1330px;
margin: 0 auto;
}
.navbar-brand {
align-items: stretch;
display: flex;
min-height: 3.25rem;
.navbar-item {
align-items: center;
display: flex;
img {
max-height: 32px;
}
span {
word-break: break-word;
color: var(--font-color);
font-size: 2rem;
line-height: 1.125;
margin-left: .5rem !important;
@include transition() {}
}
}
}
.navbar-burger {
padding: 0;
margin: 0;
font-size: 1em;
appearance: none;
background: none;
border: none;
cursor: pointer;
display: block;
height: 3.25rem;
position: relative;
width: 3.25rem;
margin-left: auto;
color: var(--font-color);
@include respond-to("medium-up") {
display: none;
}
span {
background-color: currentColor;
display: block;
height: 1px;
left: calc(50% - 8px);
position: absolute;
transform-origin: center;
transition-duration: 86ms;
transition-property: background-color,opacity,transform;
transition-timing-function: ease-out;
width: 16px;
&:nth-child(1) {
top: calc(50% - 6px);
}
&:nth-child(2) {
top: calc(50% - 1px);
}
&:nth-child(3) {
top: calc(50% + 4px);
}
}
&.is-active {
span {
&:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
}
}
}
.navbar-item {
line-height: 1.5;
padding: .5rem;
position: relative;
flex-grow: 0;
flex-shrink: 0;
color: var(--font-color);
display: block;
@include transition() {}
&.has-dropdown {
padding: 0;
@include respond-to("medium-up") {
display: flex;
align-items: stretch;
.navbar-dropdown {
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
min-width: 280px;
position: absolute;
top: 100%;
}
&:hover {
background-color: var(--default-color);
.navbar-link {
background-color: var(--default-hl-color);
color: var(--hover-font-color);
}
.navbar-dropdown {
display: block;
}
}
}
}
@include respond-to("medium-up") {
align-items: center;
display: flex;
}
}
.navbar-link {
color: var(--font-color);
display: block;
line-height: 1.5;
padding: .5rem .75rem;
position: relative;
cursor: pointer;
padding-right: 2.5em;
@include transition() {}
@include respond-to("medium-up") {
display: flex;
align-items: center;
&::after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: .625em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: .625em;
border-color: var(--secondary-color);
margin-top: -0.375em;
right: 1.125em;
@include respond-to("medium-up") {
border-color: var(--font-color);
}
}
}
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
}
}
.navbar-menu {
display: none;
background-color: var(--default-color);
box-shadow: 0 8px 16px rgba(10,10,10,.1);
padding: .5rem 0;
@include transition() {}
@include respond-to("medium") {
max-height: calc(100vh - 3.25rem);
overflow: auto;
}
@include respond-to("medium-up") {
flex-grow: 1;
flex-shrink: 0;
align-items: stretch;
display: flex;
background-color: initial;
box-shadow: none;
padding: 0;
}
&.is-active {
display: block;
}
@include respond-to("medium-up") {
.navbar-start {
justify-content: flex-start;
margin-right: auto;
align-items: stretch;
display: flex;
.navbar-item {
color: rgba(0,0,0,.7);
align-items: center;
display: flex;
}
}
.navbar-end {
justify-content: flex-end;
margin-left: auto;
align-items: stretch;
display: flex;
}
}
}
.navbar-dropdown {
font-size: .875rem;
padding-bottom: .5rem;
padding-top: .5rem;
hr {
background-color: var(--font-color);
border: none;
height: 2px;
margin: .5rem 0 0 1.5rem;
}
@include respond-to("medium-up") {
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
right: 0;
min-width: 100%;
position: absolute;
top: 100%;
hr {
margin: 0.5rem 0;
}
// .navbar-item {
// white-space: nowrap;
// padding-block: .375rem;
// }
}
}
img {
height: auto;
max-width: 100%;
}
a {
text-decoration: none;
}
.buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.button {
margin-right: 0.75rem;
}
&:last-child {
margin-bottom: -0.5rem;
}
}
}
[data-theme="dark"] {
.navbar {
box-shadow: none;
}
}
nav {
ul {
padding-inline: 16px;
}
}