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 01:23:45 +01:00
parent 5752f024c6
commit 355db0a651
2 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -19,14 +19,14 @@
<li><a href="#" class="icon icon-reports">Reports</a></li> <li><a href="#" class="icon icon-reports">Reports</a></li>
<li> <li>
<a href="#" class="icon icon-call-center">Call Center</a> <a href="#" class="icon icon-call-center">Call Center</a>
<ul> <ul class="subnav">
<li><a href="#">Ticket Stream</a></li> <li><a href="#">Ticket Stream</a></li>
<li><a href="#">Configuration</a></li> <li><a href="#">Configuration</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#" class="icon icon-warehouse-management">Warehouse Management</a> <a href="#" class="icon icon-warehouse-management">Warehouse Management</a>
<ul> <ul class="subnav">
<li><a href="#">Product Warehouse</a></li> <li><a href="#">Product Warehouse</a></li>
<li> <li>
<a href="#">Spare part Warehouse</a> <a href="#">Spare part Warehouse</a>

67
style.scss
View File

@ -7,7 +7,8 @@ body {
section.sidebar { section.sidebar {
width: 320px; width: 320px;
background-color: #f8f9fa; background-color: #f8f9fa;
border: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd;
border-right: 1px solid #cdcdcd;
} }
// ---------------------------------------------------------------------------------- // ----------------------------------------------------------------------------------
@ -18,12 +19,21 @@ $subnav-indent: 16px;
$icon-width: 50px; $icon-width: 50px;
nav.main { nav.main {
li {
border-bottom: 1px solid $border-color;
&:first-of-type {
border-top: 1px solid $border-color;
}
}
li > a { li > a {
display: block; display: block;
padding: 15px 0; padding: 15px 0;
text-decoration: none; text-decoration: none;
color: $text-color; color: $text-color;
border-top: 1px solid $border-color; &:hover {
background-color: rgba($text-color, 0.03);
}
} }
// level 0: main items // level 0: main items
@ -67,41 +77,50 @@ nav.main {
background-image: url("/img/menu-icons/dashboard.svg"); background-image: url("/img/menu-icons/dashboard.svg");
} }
} }
}
}
// subnav level 1 // subnav level 1
ul.subnav {
border-top: 1px solid $border-color;
// reset parent borders
li {
border-bottom: none;
&:first-of-type {
border-top: none;
}
}
> li {
a {
padding-left: $subnav-indent;
}
// subnav level 2
> ul { > ul {
// padding-left: $subnav-indent; // padding-left: $subnav-indent;
> li { > li {
a { a {
padding-left: $subnav-indent; color: blue;
border: none; padding-left: $subnav-indent * 2;
&:hover {
background-color: rgba($text-color, 0.03);
}
} }
&:first-child a {
// subnav level 2 // reset parent properties
border: none;
}
// subnav level 3
> ul { > ul {
// padding-left: $subnav-indent;
> li { > li {
a { a {
color: blue; color: red;
padding-left: $subnav-indent * 3;
} }
// subnav level 3 // subnav level 4
> ul { > ul {
// padding-left: $subnav-indent;
> li { > li {
a { a {
color: red; color: green;
} padding-left: $subnav-indent * 4;
// subnav level 4
> ul {
// padding-left: $subnav-indent;
> li {
a {
color: green;
}
}
} }
} }
} }