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"> <div class="wrapper">
<section class="tree-structure"> <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"> <ul class="subnav">
<li><a href="#">First Level</a></li> <li><a href="#">First Level</a></li>
<li> <li>
@ -42,7 +71,11 @@
<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> </ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li> <li><a href="#">First Level</a></li>
<li> <li>
<a href="#">First Level</a> <a href="#">First Level</a>
@ -50,49 +83,9 @@
<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><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> </ul>
</li> </li>
</ul> </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> </section>
</div> </div>

34
style.scss
View File

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