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

Missing level one still

Browse Source
This commit is contained in:
Eden Kirin
2022-12-17 02:15:44 +01:00
parent 92719e5de6
commit 3b5ad6af99
2 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -15,15 +15,15 @@
<div class="wrapper">
<section class="tree-structure">
<h3>Playground</h3>
<ul class="subnav level-one">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul class="subnav level-two">
<ul>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
<ul class="subnav level-three">
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
@ -32,29 +32,29 @@
</li>
<li>
<a href="#">Second Level</a>
<ul class="subnav level-three">
<ul>
<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> -->
<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>
<ul class="subnav level-two">
<ul>
<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>
</ul>
</li> -->
<!-- <li><a href="#">First Level</a></li> -->
</li>-->
<li><a href="#">First Level</a></li>
</ul>
</section>

57
style.scss
View File

@ -39,28 +39,38 @@ section.example {
}
}
// ------------------------------------------------
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");
$border_width: 20px;
$border-margin-right: 15px;
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: 32px;
background-color: rgb(174, 249, 174);
}
$left-padding-unit: 16px;
ul.subnav {
padding-left: 0;
// debug colors: level one
> li {
background-color: rgb(242, 242, 168);
}
> li > ul > li {
background-color: rgb(199, 167, 255);
}
> li > ul > li > ul > li {
background-color: rgb(174, 249, 174);
}
// level one
padding-left: $left-padding-unit;
// level two
> li > ul {
padding-left: $left-padding-unit * 2;
}
// level three
> li > ul > li > ul {
padding-left: $left-padding-unit * 2;
}
li {
a {
@ -71,8 +81,10 @@ ul.subnav {
align-items: center;
text-decoration: none;
// default: just border line
&::before {
content: " ";
background-color: yellow;
display: inline-block;
width: $border_width;
margin-right: $border-margin-right;
@ -82,13 +94,13 @@ ul.subnav {
background-position: top center;
}
}
}
> li {
// first item: dot + line down
&:first-of-type {
> a {
height: 57px;
&::before {
background-color: transparent;
align-self: flex-end;
height: 30px;
background-image: $border-img, $dot-img;
@ -96,10 +108,12 @@ ul.subnav {
}
}
// last item: dot + line up
&:last-of-type {
margin: 0;
> a {
&::before {
background-color: transparent;
align-self: flex-start;
height: 30px;
background-image: $border-img, $dot-img;
@ -108,7 +122,7 @@ ul.subnav {
}
}
// single item - just a dot
// single item: just a dot
&:first-of-type:last-of-type {
> a {
&::before {
@ -118,9 +132,10 @@ ul.subnav {
}
}
ul.level-two :not(:last-of-type) li {
// level three item: insert extra line left to connect level two items
> li > ul :not(:last-of-type) li {
display: flex;
padding-left: 0;
margin-left: -$left-padding-unit * 2;
&::before {
content: " ";
width: $border_width;