valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu modes presque ok

Browse Source
This commit is contained in:
Valentin
2023-03-27 13:37:00 +02:00
parent 9c11794aaf
commit 6e4dca0d5a
5 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.scss
+38 -11
View File
@@ -172,23 +172,20 @@ body {
.mode {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
background-color: white;
margin: 0;
margin-right: 14px;
padding: 7px 15px;
padding-left: 10px;
padding: 10px 12px;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px $grey_inactive;
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out;
transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
font-weight: 300;
font-size: 1rem;
svg {
width: 28px;
height: auto;
margin-right: 10px;
height: 28px;
.thick {
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
stroke-width: 0.8;
@@ -203,12 +200,23 @@ body {
fill: $grey_inactive;
}
}
p {
height: fit-content;
margin-bottom: 3px;
.mode_container {
overflow: hidden;
width: auto;
transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
max-width: 0px;
margin-left: 10px;
margin-right: 5px;
max-width: 200px;
p {
white-space: nowrap;
height: fit-content;
margin-bottom: 3px;
}
}
}
.mode.active {
padding: 10px 12px !important;
font-weight: 400;
border: solid $buttons_border_width rgba(0, 0, 0, 1);
color: rgba(0, 0, 0, 1);
@@ -223,8 +231,14 @@ body {
svg .circle-fill {
fill: rgba(0, 0, 0, 1);
}
.mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
}
.mode:hover {
padding: 10px 12px !important;
color: $grey_hover;
border-color: $grey_hover;
svg .thick, svg .thin {
@@ -233,6 +247,19 @@ body {
svg .circle-fill {
fill: $grey_hover;
}
.mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
}
.mode.collapsed {
padding: 10px 7px;
.mode_container {
max-width: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
}
@@ -245,7 +272,7 @@ body {
h1 {
font-family: 'Ortica';
font-size: 1.7em;
margin-bottom: 10px;
margin-bottom: 17px;
margin-left: 5px;
}
#menu {