Intis/sidebar-test-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Almost there

Browse Source
This commit is contained in:
Eden Kirin
2022-12-17 01:39:07 +01:00
parent 0e98f21431
commit 11ab7022b7
2 changed files with 57 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -20,9 +20,6 @@
<li>
<a href="#">First Level</a>
<ul class="subnav level-two">
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
@ -33,11 +30,21 @@
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li>
<a href="#">Second Level</a>
<ul class="subnav level-three">
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<!-- <li><a href="#">Second Level</a></li> -->
</ul>
</li>
<li><a href="#">First Level</a></li>
<li><a href="#">First Level</a></li>
<li>
<!-- <li><a href="#">First Level</a></li>
<li><a href="#">First Level</a></li> -->
<!-- <li>
<a href="#">First Level</a>
<ul class="subnav level-two">
<li><a href="#">Second Level</a></li>
@ -46,8 +53,8 @@
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
<li><a href="#">First Level</a></li>
</li> -->
<!-- <li><a href="#">First Level</a></li> -->
</ul>
</section>

52
style.scss
View File

@ -15,7 +15,7 @@ ul {
section.tree-structure {
width: 50%;
padding: 0 2rem 0 2rem;
background-color: aquamarine;
}
section.tree-structure-expected {
@ -39,11 +39,18 @@ section.example {
}
}
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");
$border_width: 20px;
$border-margin-right: 15px;
ul.subnav {
padding-left: 0;
li {
a {
display: flex;
padding: 0 0.75rem;
padding: 0;
cursor: pointer;
height: 56px;
align-items: center;
@ -52,10 +59,10 @@ ul.subnav {
&::before {
content: " ";
display: inline-block;
width: 32px;
margin-right: 15px;
width: $border_width;
margin-right: $border-margin-right;
height: 100%;
background-image: url("../img/border.png");
background-image: $border-img;
background-repeat: no-repeat;
background-position: top center;
}
@ -63,15 +70,13 @@ ul.subnav {
}
> li {
border: 1px solid red;
&:first-of-type {
> a {
height: 57px;
&::before {
align-self: flex-end;
height: 30px;
background-image: url("../img/border.png"), url("../img/dot.png");
background-image: $border-img, $dot-img;
}
}
}
@ -82,7 +87,7 @@ ul.subnav {
&::before {
align-self: flex-start;
height: 30px;
background-image: url("../img/border.png"), url("../img/dot.png");
background-image: $border-img, $dot-img;
background-position: bottom center;
}
}
@ -92,9 +97,36 @@ ul.subnav {
&:first-of-type:last-of-type {
> a {
&::before {
background-image: url("../img/dot.png");
background-image: $dot-img;
}
}
}
}
ul.level-two :not(:last-of-type) li {
display: flex;
&::before {
content: " ";
width: $border_width;
margin-right: $border-margin-right;
background-image: $border-img;
background-repeat: repeat-y;
background-position: top center;
}
}
}
ul.level-one li {
padding-left: 16px;
background-color: rgb(242, 242, 168);
}
ul.level-two li {
padding-left: 32px;
background-color: rgb(199, 167, 255);
}
ul.level-three li {
padding-left: 0px; // important to keep parent left border in place
background-color: rgb(174, 249, 174);
}