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

4
index.html
View File

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

28
style.scss
View File

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