Add caret to flyout menu

This commit is contained in:
Jennifer Mourek 2019-02-28 15:54:55 +01:00
parent 24cd1d90ec
commit 6a7c73dd77
1 changed files with 41 additions and 4 deletions

View File

@ -101,6 +101,30 @@
}
}
ul:not(.nav-level-2) > .selected > a {
background-color: @menu-highlight-color;
color: @text-color-inverted;
&:hover {
color: @text-color-inverted;
}
&:after {
.transform(rotate(45deg));
position: absolute;
right: -.75em;
background-color: #fff;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
content: "";
display: block;
height: 1.25em;
margin-top: -1.75em;
width: 1.25em;
}
}
#menu .nav-level-2 > .nav-item {
// Collapse menu by default
display: none;
@ -131,16 +155,14 @@
// Little caret on active level-2 item
&.active:after {
.transform(rotate(45deg));
background-color: @body-bg-color;
box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
content: "";
display: block;
height: 1.25em;
width: 1.25em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: .5em;
right: -.75em;
@ -223,6 +245,21 @@
width: 14em;
position: fixed;
&:after {
.transform(rotate(45deg));
background-color: @body-bg-color;
border-bottom: 1px solid @gray-light;
border-left: 1px solid @gray-light;
content: "";
display: block;
height: 1.1em;
width: 1.1em;
position: absolute;
top: 1em;
left: -.6em;
z-index: -1;
}
> .nav-item {
display: block;
padding-left: 0;