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

Checkpoint

Browse Source
This commit is contained in:
Eden Kirin
2022-12-18 02:18:30 +01:00
parent 355db0a651
commit 42e0d7d3b1
2 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -42,20 +42,20 @@
<li><a href="#">Run Scheduler</a></li>
</ul>
</li>
<li>
<a href="#">Rpoerting</a>
<ul>
<li><a href="#">Inventory Report</a></li>
<li><a href="#">Spare Part Moves</a></li>
</ul>
</li>
</ul>
<li>
<a href="#">Reporting</a>
<ul>
<li><a href="#">Inventory Report</a></li>
<li><a href="#">Spare Part Moves</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</section>
</body>

28
style.scss
View File

@ -15,8 +15,11 @@ section.sidebar {
$text-color: #1f1f1f;
$border-color: #cdcdcd;
$subnav-indent: 16px;
$subnav-indent: 10px;
$icon-width: 50px;
$level-one-indent: $icon-width;
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");
nav.main {
li {
@ -92,17 +95,24 @@ nav.main {
}
> li {
// default: just border line
background-image: $border-img;
background-repeat: repeat-y;
background-position: $level-one-indent / 2 center;
a {
padding-left: $subnav-indent;
padding-left: $level-one-indent;
}
// subnav level 2
> ul {
// padding-left: $subnav-indent;
> li {
background-image: $border-img;
background-repeat: repeat-y;
background-position: $subnav-indent * 5 center;
a {
color: blue;
padding-left: $subnav-indent * 2;
padding-left: $subnav-indent * 7;
}
&:first-child a {
// reset parent properties
@ -111,16 +121,22 @@ nav.main {
// subnav level 3
> ul {
> li {
background-image: $border-img;
background-repeat: repeat-y;
background-position: $subnav-indent * 7 center;
a {
color: red;
padding-left: $subnav-indent * 3;
padding-left: $subnav-indent * 9;
}
// subnav level 4
> ul {
> li {
background-image: $border-img;
background-repeat: repeat-y;
background-position: $subnav-indent * 9 center;
a {
color: green;
padding-left: $subnav-indent * 4;
padding-left: $subnav-indent * 11;
}
}
}