PeL/force-orange-2022
PeL/force-orange-2022
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/intranet.git synced 2025-06-09 09:04:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve mobile ui

Browse Source
This commit is contained in:
memeriau 2022-05-02 21:51:18 +02:00
parent 8d6475ab20
commit 10d7a2d6ec
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Navigation/styles.module.scss
View File

@ -65,15 +65,7 @@
.mainMenuItem { .mainMenuItem {
display: inline-block; display: inline-block;
margin: 0; margin: 0 6px;
padding: 7px 6px 6px;
border: 1px solid $color-black;
border-width: 1px 1px 0;
border-radius: 10px 10px 0 0;
text-align: center;
background-color: $color-grey-light;
cursor: pointer;
color: $color-grey-dark;
@include mobile { @include mobile {
display: block; display: block;
@ -89,6 +81,22 @@
background-color: $color-black; background-color: $color-black;
} }
@include desktop {
margin: 0;
padding: 7px 6px 6px;
border-radius: 10px 10px 0 0;
text-align: center;
cursor: pointer;
color: $color-grey-dark;
border: solid $color-black;
border-width: 1px 1px 0;
background-color: $color-grey-light;
&:not(.active) a:hover {
color: $color-white;
}
}
a { a {
font-size: 0.9em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
@ -100,8 +108,4 @@
padding: 10px 15px; padding: 10px 15px;
} }
} }
&:not(.active) a:hover {
color: $color-white;
}
} }

8
src/theme/mixins.scss
View File

@ -1,13 +1,13 @@
@import "./variables"; @import "./variables";
@mixin desktop { @mixin desktop {
@media (min-width: 800px) { @media (min-width: 900px) {
@content; @content;
} }
} }
@mixin mobile { @mixin mobile {
@media (max-width: 799px) { @media (max-width: 899px) {
@content; @content;
} }
} }
@ -23,8 +23,8 @@
} }
@mixin page-content-wrapper($desktopWidth: 720px) { @mixin page-content-wrapper($desktopWidth: 720px) {
margin: 10px 0; margin: 10px 4px;
padding: 10px; padding: 6px;
background-color: $color-white; background-color: $color-white;
border-radius: 15px; border-radius: 15px;
border: $border-large; border: $border-large;