Add border bottom when hovering or selected

+ add some padding to separate those borders then
This commit is contained in:
Jean-Baptiste Bellet
2023-06-07 16:16:33 +02:00
parent 1b4236640d
commit 51f47fc351

View File

@@ -70,6 +70,8 @@ nav.menu {
li {
min-width: 90px;
flex-grow: 1;
padding-left: 2px;
padding-right: 2px;
a {
display: block;
@@ -90,18 +92,7 @@ nav.menu {
&:hover {
color: $color-5 !important;
&:after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 5px solid $color-2;
bottom: 0px;
margin-bottom: -5px;
left: 50%;
margin-left: -10px;
z-index: 1;
}
border-bottom: 2px solid $color-5;
}
span.text {
@@ -156,18 +147,7 @@ nav.menu {
&.selected a,
a:hover {
color: $color-5;
&:after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 5px solid $color-2;
bottom: 0px;
margin-bottom: -5px;
left: 50%;
margin-left: -10px;
z-index: 0;
}
border-bottom: 2px solid $color-5;
}
}
}