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

Refactoring and uncluttering

Browse Source
This commit is contained in:
reverend
2020-08-05 13:19:00 +02:00
parent cf5e804e50
commit af634294e2
4 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,29 +31,32 @@
&--sidebar{ &--sidebar{
border-top: 1px solid $-light-brown; border-top: 1px solid $-light-brown;
border-left: none;
min-width: 60px; min-width: 60px;
background-color: $-almost-white; background-color: $-almost-white;
height: 100%; height: 100%;
padding-top: 25px;
.LP-Menu__List{ .LP-Menu__List{
margin-left: 25px;
margin-top: 25px;
flex-direction: column; flex-direction: column;
.LP-Menu__Item{ .LP-Menu__Item{
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px;
padding-left: 25px; padding-left: 25px;
.LP-Link{
line-height: 1em;
}
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
&:hover{ &:hover{
border-left: 2px solid $-light-brown; border-right: 2px solid $-light-brown;
position: relative; position: relative;
background-color: $-beige; background-color: $-beige;
left: -2px;
} }
} }

2
components/05_Pages/_pages.scss
View File

@@ -11,7 +11,7 @@ $-sidebar-width: 250px;
min-height: 1px; min-height: 1px;
} }
.LP-Main__Navigation{ .LP-Main__Sidebar{
flex-shrink: 0; flex-shrink: 0;
width: $-sidebar-width; width: $-sidebar-width;
flex-grow: 0; flex-grow: 0;

2
components/05_Pages/placeDetail/placeDetail.hbs
View File

@@ -3,7 +3,7 @@
<section class="LP-Main__Content"> <section class="LP-Main__Content">
</section> </section>
<section class="LP-Main__Navigation"> <section class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}} {{> @navigation modifier='--sidebar'}}
</section> </section>
</article> </article>

16
public/components.css
View File

@@ -262,25 +262,25 @@ body {
color: #76323F; } color: #76323F; }
.LP-Menu--sidebar { .LP-Menu--sidebar {
border-top: 1px solid #C09F80; border-top: 1px solid #C09F80;
border-left: none;
min-width: 60px; min-width: 60px;
background-color: #f9f9f9; background-color: #f9f9f9;
height: 100%; } height: 100%;
padding-top: 25px; }
.LP-Menu--sidebar .LP-Menu__List { .LP-Menu--sidebar .LP-Menu__List {
margin-left: 25px;
margin-top: 25px;
flex-direction: column; } flex-direction: column; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item { .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px;
padding-left: 25px; } padding-left: 25px; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link {
line-height: 1em; }
.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:hover { .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover {
border-left: 2px solid #C09F80; border-right: 2px solid #C09F80;
position: relative; position: relative;
background-color: #D7CEC7; background-color: #D7CEC7; }
left: -2px; }
@media (max-width: 750px) { @media (max-width: 750px) {
.LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List { .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
@@ -523,7 +523,7 @@ body {
flex-grow: 1; flex-grow: 1;
width: calc(100% -300px); width: calc(100% -300px);
min-height: 1px; } min-height: 1px; }
.LP-Main .LP-Main__Navigation { .LP-Main .LP-Main__Sidebar {
flex-shrink: 0; flex-shrink: 0;
width: 250px; width: 250px;
flex-grow: 0; flex-grow: 0;