klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-10 03:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor navbar css and use details instead of div for better semantics

Browse Source
This commit is contained in:
Antoine Bartuccio
2025-06-02 23:27:25 +02:00
parent d80f2e73e8
commit 7090254658
3 changed files with 77 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
core/static/core/navbar.scss
View File

@ -13,9 +13,18 @@ nav.navbar {
align-items: flex-start;
gap: 0;
margin: .2em;
>.content[mobile-display="hidden"] {
display: none;
}
>.content[mobile-display="revealed"] {
display: block;
}
}
> .expand-button {
>.expand-button {
background-color: transparent;
display: none;
position: relative;
@ -27,7 +36,7 @@ nav.navbar {
align-items: center;
margin: 0;
> i {
>i {
font-size: 1.5em;
color: white;
}
@ -37,17 +46,17 @@ nav.navbar {
}
}
> .content {
@media (min-width: 500px) {display: flex;
>.content {
@media (min-width: 500px) {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: flex !important;
display: flex;
}
> .menu,
> .link {
>.menu,
>.link {
box-sizing: border-box;
width: 130px;
height: 52px;
@ -64,76 +73,64 @@ nav.navbar {
&:last-child {
border-radius: 0 0 .6em .6em;
> .content {
>.content {
box-shadow: 3px 3px 3px 0 #dfdfdf;
}
}
}
}
> .menu > .head,
> .link {
>.menu>.head,
>.link {
color: white;
padding: 10px 20px;
box-sizing: border-box;
}
>.menu>summary,
>.link {
@media (max-width: 500px) {
padding: 10px;
}
}
>.link {
padding: 10px 20px;
box-sizing: border-box;
}
.link:hover,
.menu:hover {
background-color: rgba(0, 0, 0, .2);
}
> .menu > .head,
> .link {
color: white;
padding: 10px 20px;
box-sizing: border-box;
details.menu {
cursor: pointer;
user-select: none;
z-index: 10;
align-items: center;
display: inline-block;
@media (max-width: 500px) {
padding: 10px;
summary {
list-style: none;
display: flex;
align-items: center;
height: 100%;
padding-left: 20px;
padding-right: 20px;
}
}
.link:hover,
.menu:hover {
background-color: rgba(0, 0, 0, .2);
}
> .menu:hover > .content,
> .menu > .head:hover + .content,
> .menu > .content:hover {
display: flex;
}
> .menu {
display: flex;
position: relative;
> .content {
z-index: 10;
summary::-webkit-details-marker {
display: none;
position: absolute;
top: 100%;
background-color: white;
margin: 0;
}
ul.content {
list-style-type: none;
width: 130px;
box-shadow: 3px 3px 3px 0 #dfdfdf;
flex-direction: column;
background: white;
margin: 0;
@media (max-width: 500px) {
position: absolute;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
box-shadow: inset 3px 3px 3px 0 #dfdfdf;
}
> li > a {
>li>a {
display: flex;
padding: 15px 20px;