Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Other behavior for sidebar links

Browse Source
This commit is contained in:
reverend 2020-08-04 20:05:12 +02:00
parent 6f3fb3850f
commit 93341886d6
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/02_Molecules/navigation/_navigation.scss
View File

@ -10,10 +10,14 @@
} }
.LP-Menu__Item { .LP-Menu__Item {
padding: 15px 0;
margin: 0; margin: 0;
text-align: center; text-align: center;
background-color: transparent; background-color: transparent;
.LP-Link{
display: block;
padding: 15px 0;
}
} }
.LP-Link__Text { .LP-Link__Text {
@ -39,6 +43,11 @@
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
.LP-Link:hover{
background-color: $-almost-white;
}
} }
} }
} }
@ -46,14 +55,15 @@
@media(max-width: $-viewport-medium){ @media(max-width: $-viewport-medium){
.LP-Menu{ .LP-Menu{
&:not(&--sidebar){
.LP-Menu__List{
display: flex;
flex-direction: row;
justify-content: flex-start;
.LP-Menu__List{ .LP-Menu__Item{
display: flex; flex: 1 1 auto;
flex-direction: row; }
justify-content: flex-start;
.LP-Menu__Item{
flex: 1 1 auto;
} }
} }
} }

10
public/components.css
View File

@ -239,10 +239,12 @@
padding: 0; padding: 0;
margin: 0; } margin: 0; }
.LP-Menu .LP-Menu__Item { .LP-Menu .LP-Menu__Item {
padding: 15px 0;
margin: 0; margin: 0;
text-align: center; text-align: center;
background-color: transparent; } background-color: transparent; }
.LP-Menu .LP-Menu__Item .LP-Link {
display: block;
padding: 15px 0; }
.LP-Menu .LP-Link__Text { .LP-Menu .LP-Link__Text {
color: #565656; color: #565656;
font-weight: bold; font-weight: bold;
@ -260,13 +262,15 @@
margin-bottom: 10px; } margin-bottom: 10px; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child { .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link:hover {
background-color: #f9f9f9; }
@media (max-width: 750px) { @media (max-width: 750px) {
.LP-Menu .LP-Menu__List { .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; } justify-content: flex-start; }
.LP-Menu .LP-Menu__List .LP-Menu__Item { .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List .LP-Menu__Item {
flex: 1 1 auto; } } flex: 1 1 auto; } }
@media (max-width: 450px) { @media (max-width: 450px) {