dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Updated navbar

Browse source
This commit is contained in:
Damien Broqua 2024-02-01 08:25:09 +01:00
parent 0ea6a21b90
commit d4e6d23459
2 changed files with 32 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
sass/colors.scss
View file

@ -45,6 +45,7 @@ $close-background-dark: rgba(240,240,240,.6);
--bg-color: #{darken($white, 5%)};
--bg-alternate-color: #{darken($white, 8%)};
--font-color: #{$nord3};
--hover-font-color: #{lighten($nord3, 16%)};
--footer-color: #{$darken-white};
--link-color: #{$nord1};
@ -88,6 +89,7 @@ $close-background-dark: rgba(240,240,240,.6);
--bg-color: #{lighten($nord0, 2%)};
--bg-alternate-color: #{lighten($nord3, 8%)};
--font-color: #{$nord6};
--hover-font-color: #{darken($nord6, 16%)};
--footer-color: #{$nord1};
--link-color: #{$nord4};

56
sass/navbar.scss
View file

@ -117,7 +117,6 @@
@include respond-to("medium-up") {
display: flex;
align-items: stretch;
color: rgba(0,0,0,.7);
.navbar-dropdown {
background-color: var(--default-color);
@ -127,7 +126,6 @@
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
left: 0;
min-width: 100%;
position: absolute;
top: 100%;
@ -138,7 +136,7 @@
.navbar-link {
background-color: var(--default-hl-color);
color: rgba(0,0,0,.7);
color: var(--hover-font-color);
}
.navbar-dropdown {
@ -167,6 +165,29 @@
@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 {
@ -177,28 +198,7 @@
width: 1.5rem;
}
&::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: rgba(0,0,0,.7);
}
}
}
.navbar-menu {
@ -260,7 +260,7 @@
background-color: var(--font-color);
border: none;
height: 2px;
margin: .5rem 0;
margin: .5rem 0 0 1.5rem;
}
.navbar-item {
@ -277,11 +277,15 @@
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
left: 0;
right: 0;
min-width: 100%;
position: absolute;
top: 100%;
hr {
margin: 0.5rem 0;
}
.navbar-item {
white-space: nowrap;
padding: .375rem 1rem;