fsylvain/projet_programmation_web
1
0
Fork 0
mirror of https://github.com/Floriansylvain/projet_programmation_web.git synced 2026-08-19 11:43:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ Hamburger menu integration and style improvements

Browse Source
This commit is contained in:
Florian Sylvain
2021-11-02 22:29:42 +01:00
parent 7a492caf7d
commit 286c3cad96
4 changed files with 187 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ProjetProgWeb/stylesheet.css
+111 -6
View File
@@ -14,14 +14,37 @@ body {
overflow-x: hidden;
}
header {
height: 75px;
}
.slide-in-header {
animation: slide-in-header 200ms;
animation-fill-mode: forwards;
}
.slide-out-header {
animation: slide-out-header 200ms;
animation-fill-mode: forwards;
}
@keyframes slide-in-header {
from { margin-bottom: 0 }
to { margin-bottom: 100px }
}
@keyframes slide-out-header {
from { margin-bottom: 100px }
to { margin-bottom: 0 }
}
.navbar {
position: relative;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(245deg, #39B4E7 -15%, #0096DC 110%);
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 5px;
height: 75px;
height: 100%;
padding: 10px;
width: 100%;
}
@@ -50,11 +73,6 @@ body {
width: 100%;
}
/* TODO : Ajouter une ombre quand on hover ou focus l'input (voir page google.com)*/
/*.navbar input:hover, .navbar input:focus {*/
/* box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px;*/
/*}*/
.navbar button {
align-self: center;
height: 60px;
@@ -138,6 +156,93 @@ body {
opacity: 0;
}
#hamburger-menu {
position: relative;
z-index: 10;
width: 100%;
height: 100px;
background: linear-gradient(245deg, #39B4E7 -15%, #1779A3 110%);
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 5px;
top: 0;
transform: translateY(-110px);
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
}
.slide-in {
animation: slide-in 200ms;
animation-fill-mode: forwards;
}
.slide-out {
animation: slide-out 200ms;
animation-fill-mode: forwards;
}
@keyframes slide-in {
from { transform: translateY(-100px) }
to { transform: translateY(0) }
}
@keyframes slide-out {
from { transform: translateY(0) }
to { transform: translateY(-100px) }
}
.toggle-switch {
user-select: none;
display: flex;
align-items: center;
background-color: white;
width: 60px;
height: 30px;
border-radius: 25px;
padding: 0 3px 0 3px;
}
.toggle-switch .slider {
user-select: none;
width: 25px;
height: 25px;
border-radius: 25px;
}
.toggle {
animation: toggle 200ms;
animation-fill-mode: forwards;
}
.untoggle {
animation: untoggle 200ms;
animation-fill-mode: forwards;
}
@keyframes toggle {
from {
transform: translateX(0);
opacity: 70%;
background: gray;
}
to {
transform: translateX(29px);
opacity: 100%;
background: #39B4E7;
}
}
@keyframes untoggle {
from {
transform: translateX(29px);
opacity: 100%;
background: #39B4E7;
}
to {
transform: translateX(0);
opacity: 70%;
background: gray;
}
}
.chart-button {
display: flex;
align-items: center;
fill: white;
gap: 10px;
}
#results {
margin: 10px;
display: flex;