klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-06-07 19:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix centering of detail elements

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-06-05 18:04:45 +02:00
parent 64fd123a85
commit 5f701d1a17
Signed by: klmp200
GPG Key ID: E7245548C53F904B
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,7 @@
@import "colors"; @import "colors";
$desktop-size: 500px;
nav.navbar { nav.navbar {
background-color: $primary-dark-color; background-color: $primary-dark-color;
margin: 1em; margin: 1em;
@ -7,7 +9,7 @@ nav.navbar {
border-radius: 0.6em; border-radius: 0.6em;
min-height: 40px; min-height: 40px;
@media (max-width: 500px) { @media (max-width: $desktop-size) {
position: relative; position: relative;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -41,13 +43,13 @@ nav.navbar {
color: white; color: white;
} }
@media (max-width: 500px) { @media (max-width: $desktop-size) {
display: flex; display: flex;
} }
} }
>.content { >.content {
@media (min-width: 500px) { @media (min-width: $desktop-size) {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@ -65,7 +67,7 @@ nav.navbar {
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
@media (max-width: 500px) { @media (max-width: $desktop-size) {
width: 100%; width: 100%;
height: auto; height: auto;
justify-content: flex-start; justify-content: flex-start;
@ -87,7 +89,7 @@ nav.navbar {
>.menu>summary, >.menu>summary,
>.link { >.link {
@media (max-width: 500px) { @media (max-width: $desktop-size) {
padding: 10px; padding: 10px;
} }
} }
@ -118,6 +120,10 @@ nav.navbar {
height: 100%; height: 100%;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@media (min-width: $desktop-size) {
justify-content: center;
}
} }
summary::-webkit-details-marker { summary::-webkit-details-marker {
@ -129,7 +135,7 @@ nav.navbar {
background: white; background: white;
margin: 0; margin: 0;
@media (min-width: 500px) { @media (min-width: $desktop-size) {
box-shadow: 3px 3px 3px 0 #dfdfdf; box-shadow: 3px 3px 3px 0 #dfdfdf;
} }
@ -137,7 +143,7 @@ nav.navbar {
display: flex; display: flex;
padding: 15px 20px; padding: 15px 20px;
@media (max-width: 500px) { @media (max-width: $desktop-size) {
padding: 10px; padding: 10px;
} }