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> <li>
<a href="#">First Level</a> <a href="#">First Level</a>
<ul class="subnav level-two"> <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></li>
<li> <li>
<a href="#">Second Level</a> <a href="#">Second Level</a>
@ -33,11 +30,21 @@
<li><a href="#">Third Level</a></li> <li><a href="#">Third Level</a></li>
</ul> </ul>
</li> </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> </ul>
</li> </li>
<li><a href="#">First Level</a></li> <!-- <li><a href="#">Second Level</a></li> -->
<li><a href="#">First Level</a></li> </ul>
<li> </li>
<!-- <li><a href="#">First Level</a></li>
<li><a href="#">First Level</a></li> -->
<!-- <li>
<a href="#">First Level</a> <a href="#">First Level</a>
<ul class="subnav level-two"> <ul class="subnav level-two">
<li><a href="#">Second Level</a></li> <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>
<li><a href="#">Second Level</a></li> <li><a href="#">Second Level</a></li>
</ul> </ul>
</li> </li> -->
<li><a href="#">First Level</a></li> <!-- <li><a href="#">First Level</a></li> -->
</ul> </ul>
</section> </section>

52
style.scss
View File

@ -15,7 +15,7 @@ ul {
section.tree-structure { section.tree-structure {
width: 50%; width: 50%;
padding: 0 2rem 0 2rem; background-color: aquamarine;
} }
section.tree-structure-expected { 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 { ul.subnav {
padding-left: 0;
li { li {
a { a {
display: flex; display: flex;
padding: 0 0.75rem; padding: 0;
cursor: pointer; cursor: pointer;
height: 56px; height: 56px;
align-items: center; align-items: center;
@ -52,10 +59,10 @@ ul.subnav {
&::before { &::before {
content: " "; content: " ";
display: inline-block; display: inline-block;
width: 32px; width: $border_width;
margin-right: 15px; margin-right: $border-margin-right;
height: 100%; height: 100%;
background-image: url("../img/border.png"); background-image: $border-img;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top center; background-position: top center;
} }
@ -63,15 +70,13 @@ ul.subnav {
} }
> li { > li {
border: 1px solid red;
&:first-of-type { &:first-of-type {
> a { > a {
height: 57px; height: 57px;
&::before { &::before {
align-self: flex-end; align-self: flex-end;
height: 30px; 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 { &::before {
align-self: flex-start; align-self: flex-start;
height: 30px; height: 30px;
background-image: url("../img/border.png"), url("../img/dot.png"); background-image: $border-img, $dot-img;
background-position: bottom center; background-position: bottom center;
} }
} }
@ -92,9 +97,36 @@ ul.subnav {
&:first-of-type:last-of-type { &:first-of-type:last-of-type {
> a { > a {
&::before { &::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);
} }