Add caret to flyout menu
This commit is contained in:
parent
24cd1d90ec
commit
6a7c73dd77
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue