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

One background bug left

Browse Source
This commit is contained in:
Eden Kirin
2022-12-19 08:06:05 +01:00
parent 46293651e2
commit 242d81a339
2 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
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>

37
style.scss
View File

@ -42,6 +42,19 @@ $border-margin-right: 15px;
} }
} }
@mixin reset-single-item-background($li-background-image) {
&:first-of-type:last-of-type {
&::before {
background-image: $li-background-image;
}
> a {
&::before {
background-image: $dot-img;
}
}
}
}
nav.main { nav.main {
li { li {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
@ -148,18 +161,8 @@ nav.main {
top: -20px; // hardcoded! top: -20px; // hardcoded!
} }
} }
// single item: just a dot
&:first-of-type:last-of-type {
&::before {
// background-image: none;
}
> a {
&::before {
background-image: $dot-img;
}
}
}
} }
@include reset-single-item-background(none);
@include variable-left-border-connector($subnav-indent * 4); @include variable-left-border-connector($subnav-indent * 4);
// subnav level 2 // subnav level 2
@ -171,23 +174,22 @@ nav.main {
left: $subnav-indent * 4; left: $subnav-indent * 4;
} }
} }
@include reset-single-item-background($border-img);
@include variable-left-border-connector($subnav-indent * 7); @include variable-left-border-connector($subnav-indent * 7);
// subnav level 3 // subnav level 3
> ul { > ul li {
li {
a { a {
padding-left: $subnav-indent * 10; padding-left: $subnav-indent * 10;
&::before { &::before {
left: $subnav-indent * 7; left: $subnav-indent * 7;
} }
} }
@include reset-single-item-background($border-img);
@include variable-left-border-connector($subnav-indent * 10); @include variable-left-border-connector($subnav-indent * 10);
// subnav level 4 // subnav level 4
> ul { > ul li a {
li {
a {
padding-left: $subnav-indent * 13; padding-left: $subnav-indent * 13;
&::before { &::before {
left: $subnav-indent * 10; left: $subnav-indent * 10;
@ -198,9 +200,6 @@ nav.main {
} }
} }
} }
}
}
}
@include variable-left-border-connector($subnav-indent * 1); @include variable-left-border-connector($subnav-indent * 1);
} }