klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-10-20 11:48:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes & améliorations du nouveau CSS (#616)

Browse Source
This commit is contained in:
Julien Constant
2023-04-05 18:03:43 +02:00
committed by GitHub
parent d83842af27
commit a198f5252d
3 changed files with 211 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,9 @@
nav.navbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: hsl(203, 75%, 40%);
margin: 1em;
color: white;
border-radius: 0.6em;
min-height: 40px;
@media (max-width: 500px) {
position: relative;
@@ -17,94 +13,126 @@ nav.navbar {
margin: .2em;
}
> .menu,
> .link {
box-sizing: border-box;
width: 130px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
@media (max-width: 500px) {
width: 100%;
height: auto;
justify-content: flex-start;
&:first-child {
border-radius: .6em .6em 0 0;
}
&:last-child {
border-radius: 0 0 .6em .6em;
> .content {
box-shadow: 3px 3px 3px 0 #dfdfdf;
}
}
}
}
> .menu > .head,
> .link {
color: white;
padding: 10px 20px;
box-sizing: border-box;
@media (max-width: 500px) {
padding: 10px;
}
}
.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;
> .expand-button {
background-color: transparent;
display: none;
position: relative;
padding: 10px;
cursor: pointer;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
margin: 0;
> .content {
z-index: 10;
display: none;
position: absolute;
top: 100%;
background-color: white;
margin: 0;
list-style-type: none;
> i {
font-size: 1.5em;
color: white;
}
@media (max-width: 500px) {
display: flex;
}
}
> .content {
@media (min-width: 500px) {display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: flex !important;
}
> .menu,
> .link {
box-sizing: border-box;
width: 130px;
box-shadow: 3px 3px 3px 0 #dfdfdf;
flex-direction: column;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
@media (max-width: 500px) {
position: absolute;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
box-shadow: inset 3px 3px 3px 0 #dfdfdf;
}
height: auto;
justify-content: flex-start;
> li > a {
display: flex;
padding: 15px 20px;
@media (max-width: 500px) {
padding: 10px;
&:first-child {
border-radius: .6em .6em 0 0;
}
&:hover {
color: hsl(203, 75%, 40%);
background-color: rgba(0, 0, 0, .05);
&:last-child {
border-radius: 0 0 .6em .6em;
> .content {
box-shadow: 3px 3px 3px 0 #dfdfdf;
}
}
}
}
}
> .menu > .head,
> .link {
color: white;
padding: 10px 20px;
box-sizing: border-box;
@media (max-width: 500px) {
padding: 10px;
}
}
.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;
display: none;
position: absolute;
top: 100%;
background-color: white;
margin: 0;
list-style-type: none;
width: 130px;
box-shadow: 3px 3px 3px 0 #dfdfdf;
flex-direction: column;
@media (max-width: 500px) {
position: absolute;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
box-shadow: inset 3px 3px 3px 0 #dfdfdf;
}
> li > a {
display: flex;
padding: 15px 20px;
@media (max-width: 500px) {
padding: 10px;
}
&:hover {
color: hsl(203, 75%, 40%);
background-color: rgba(0, 0, 0, .05);
}
}
}
}
}
}