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

Almost final

Browse Source
This commit is contained in:
Eden Kirin
2022-12-18 19:39:19 +01:00
parent 42e0d7d3b1
commit 7a7aad8043
2 changed files with 83 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -21,7 +21,7 @@
<a href="#" class="icon icon-call-center">Call Center</a> <a href="#" class="icon icon-call-center">Call Center</a>
<ul class="subnav"> <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>
@ -50,9 +50,10 @@
<li><a href="#">Spare Part Moves</a></li> <li><a href="#">Spare Part Moves</a></li>
</ul> </ul>
</li> </li>
</li> <li><a href="#">Product Warehouse</a></li>
</ul> </ul>
</li> </li>
<li><a href="#">Product Warehouse</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>

105
style.scss
View File

@ -21,6 +21,27 @@ $level-one-indent: $icon-width;
$border-img: url("../img/border.png"); $border-img: url("../img/border.png");
$dot-img: url("../img/dot.png"); $dot-img: url("../img/dot.png");
$border-width: 20px;
$border-margin-right: 15px;
@mixin variable-left-border-connector($indent) {
:not(:last-of-type) li {
position: relative;
&::before {
content: " ";
width: $border-width;
height: 100%;
position: absolute;
top: 0;
left: $indent;
margin-right: $border-margin-right;
background-image: $border-img;
background-repeat: repeat-y;
background-position: top center;
}
}
}
nav.main { nav.main {
li { li {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
@ -86,57 +107,84 @@ nav.main {
// subnav level 1 // subnav level 1
ul.subnav { ul.subnav {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
// reset parent borders
li { li {
// reset parent borders
border-bottom: none; border-bottom: none;
&:first-of-type { &:first-of-type {
border-top: none; border-top: none;
} }
}
> li {
// default: just border line
background-image: $border-img;
background-repeat: repeat-y;
background-position: $level-one-indent / 2 center;
a { a {
padding-left: $level-one-indent; padding-left: $level-one-indent;
position: relative;
&::before {
content: " ";
width: $border-width;
height: 100%;
position: absolute;
top: 0;
left: $subnav-indent;
margin-right: $border-margin-right;
background-image: $border-img;
background-repeat: no-repeat;
background-position: top center;
} }
}
// first item: dot + line down
&:first-of-type {
> a {
&::before {
background-image: $border-img, $dot-img;
top: 20px; // hardcoded!
}
}
}
// last item: dot + line up
&:last-of-type {
> a {
&::before {
background-image: $border-img, $dot-img;
background-position: bottom;
top: -20px; // hardcoded!
}
}
}
// single item: just a dot
&:first-of-type:last-of-type {
> a {
&::before {
background-image: $dot-img;
}
}
}
@include variable-left-border-connector($subnav-indent * 4);
// subnav level 2 // subnav level 2
> ul { > ul {
> li { li {
background-image: $border-img;
background-repeat: repeat-y;
background-position: $subnav-indent * 5 center;
a { a {
color: blue;
padding-left: $subnav-indent * 7; padding-left: $subnav-indent * 7;
&::before {
left: $subnav-indent * 4;
} }
&:first-child a {
// reset parent properties
border: none;
} }
// 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; padding-left: $subnav-indent * 10;
padding-left: $subnav-indent * 9; &::before {
left: $subnav-indent * 7;
} }
}
// 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; padding-left: $subnav-indent * 13;
padding-left: $subnav-indent * 11; &::before {
left: $subnav-indent * 10;
} }
} }
} }
@ -146,4 +194,7 @@ nav.main {
} }
} }
} }
}
@include variable-left-border-connector($subnav-indent * 1);
} }