michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

issue/19 (#20)

Browse source 
!19

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MyMusicLibrary/pulls/20
Co-authored-by: Damien Broqua <dbroqua@noreply.localhost>
Co-committed-by: Damien Broqua <dbroqua@noreply.localhost>
This commit is contained in:
Damien Broqua 2022-03-01 16:09:46 +01:00
parent 18d4970ebd
commit a0f9ab1f45
35 changed files with 973 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

39
sass/navbar.scss
View file

@ -1,12 +1,14 @@
.navbar {
min-height: 3.25rem;
background-color: #f5f5f5;
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: 30;
top: 0;
right: 0;
left: 0;
@include transition() {}
@include respond-to("medium-up") {
min-height: 3.25rem;
@ -22,18 +24,19 @@
.navbar-item {
align-items: center;
display: flex;
img {
img {
max-height: 1.75rem;
}
span {
word-break: break-word;
color: #363636;
color: var(--font-color);
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
margin-left: .5rem !important;
@include transition() {}
}
}
}
@ -101,8 +104,9 @@
position: relative;
flex-grow: 0;
flex-shrink: 0;
color: #4a4a4a;
color: var(--font-color);
display: block;
@include transition() {}
&.has-dropdown {
padding: 0;
@ -113,10 +117,10 @@
color: rgba(0,0,0,.7);
.navbar-dropdown {
background-color: #fff;
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
@ -129,7 +133,7 @@
&:hover {
.navbar-link {
background-color: #e8e8e8;
background-color: var(--default-hl-color);
color: rgba(0,0,0,.7);
}
@ -147,13 +151,14 @@
}
.navbar-link {
color: #4a4a4a;
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;
@ -182,7 +187,7 @@
transform: rotate(-45deg);
transform-origin: center;
width: .625em;
border-color: #485fc7;
border-color: var(--secondary-color);
margin-top: -0.375em;
right: 1.125em;
@ -194,9 +199,10 @@
.navbar-menu {
display: none;
background-color: #fff;
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);
@ -253,10 +259,10 @@
}
@include respond-to("medium-up") {
background-color: #fff;
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
@ -297,4 +303,11 @@
margin-bottom: -0.5rem;
}
}
}
[data-theme="dark"] {
.navbar {
box-shadow: none;
}
}