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

Final markup

Browse Source
This commit is contained in:
Eden Kirin
2022-12-17 14:42:42 +01:00
parent 3b5ad6af99
commit d0cbb37c55
2 changed files with 45 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@ -14,7 +14,36 @@
<div class="wrapper">
<section class="tree-structure">
<h3>Playground</h3>
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
<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>
<ul>
<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>
</ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
@ -42,7 +71,11 @@
<li><a href="#">Second Level</a></li>
</ul>
</li>
<!-- <li><a href="#">First Level</a></li>
</ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
@ -50,48 +83,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>
<li><a href="#">Second Level</a></li>
</ul>
</li>-->
<li><a href="#">First Level</a></li>
</ul>
</section>
<section class="tree-structure-expected">
<h3>Expected</h3>
<ul class="level-one">
<li class="selected-first">First Level</li>
<li class="selected-first selected-last">
First Level
<ul class="level-two">
<li class="selected-first">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="selected-last">
Second Level
<ul class="level-three">
<li class="selected-first">Third Level</li>
<li class="not-selected">Third Level</li>
<li class="not-selected">Third Level</li>
<li class="selected-last">Third Level</li>
</ul>
</li>
</ul>
</li>
<li class="selected-first">First Level</li>
<li class="not-selected">First Level</li>
<li class="selected-last">
First Level
<ul class="level-two">
<li class="selected-first">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="selected-last">Second Level</li>
</ul>
</li>
<li class="selected-last">First Level</li>
</ul>
</section>
</div>

34
style.scss
View File

@ -7,29 +7,12 @@ body {
.wrapper {
display: flex;
}
ul {
list-style-type: none;
column-gap: 1rem;
}
section.tree-structure {
width: 50%;
background-color: aquamarine;
}
section.tree-structure-expected {
width: 50%;
padding: 0 2rem 0 2rem;
.selected-first {
color: green;
}
.selected-last {
color: red;
}
.not-selected {
color: black;
}
background-color: rgb(195, 253, 234);
flex-grow: 1;
}
section.example {
@ -47,16 +30,20 @@ $border_width: 20px;
$border-margin-right: 15px;
$left-padding-unit: 16px;
ul {
list-style-type: none;
}
ul.subnav {
// debug colors: level one
> li {
background-color: rgb(242, 242, 168);
// background-color: rgb(242, 242, 168);
}
> li > ul > li {
background-color: rgb(199, 167, 255);
// background-color: rgb(199, 167, 255);
}
> li > ul > li > ul > li {
background-color: rgb(174, 249, 174);
// background-color: rgb(174, 249, 174);
}
// level one
@ -84,7 +71,6 @@ ul.subnav {
// default: just border line
&::before {
content: " ";
background-color: yellow;
display: inline-block;
width: $border_width;
margin-right: $border-margin-right;