Refactoring and uncluttering

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

View File

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

View File

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

View File

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

View File

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