unify submenu style with menu style

closes #7303.

Also change the arrow that indicate submenu for a fontawesoem icon,
instead of the ugly hack that show only the left border of a rectangle element
which with is twice the one of its border to get a triangle.
This commit is contained in:
Matthias Bussonnier 2014-12-25 12:09:10 +01:00
parent 52d37ca17a
commit 0165e97c7c
2 changed files with 25 additions and 31 deletions

View File

@ -44,31 +44,25 @@ ul#help_menu li a{
left: 100%; left: 100%;
margin-top: -6px; margin-top: -6px;
margin-left: -1px; margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
} }
// arrow that indicate presence of submenu
.dropdown-submenu:hover>.dropdown-menu { .dropdown-submenu:hover>.dropdown-menu {
display: block; display: block;
} }
.dropdown-submenu>a:after { .dropdown-submenu>a:after {
.fa();
display: block; display: block;
content: " "; content: @fa-var-caret-right;
float: right; float: right;
width: 0; color: @dropdown-link-color;
height: 0; margin-top: 2px;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px; margin-right: -10px;
} }
.dropdown-submenu:hover>a:after{ .dropdown-submenu:hover>a:after {
border-left-color: #ffffff; color: @dropdown-link-hover-color;
} }
.dropdown-submenu.pull-left { .dropdown-submenu.pull-left {
@ -78,7 +72,6 @@ ul#help_menu li a{
.dropdown-submenu.pull-left>.dropdown-menu { .dropdown-submenu.pull-left>.dropdown-menu {
left: -100%; left: -100%;
margin-left: 10px; margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
} }
//end submenu

View File

@ -9795,28 +9795,32 @@ ul#help_menu li a i {
left: 100%; left: 100%;
margin-top: -6px; margin-top: -6px;
margin-left: -1px; margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
display: block; display: block;
} }
.dropdown-submenu > a:after { .dropdown-submenu > a:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block; display: block;
content: " "; content: "\f0da";
float: right; float: right;
width: 0; color: #333333;
height: 0; margin-top: 2px;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px; margin-right: -10px;
} }
.dropdown-submenu > a:after.pull-left {
margin-right: .3em;
}
.dropdown-submenu > a:after.pull-right {
margin-left: .3em;
}
.dropdown-submenu:hover > a:after { .dropdown-submenu:hover > a:after {
border-left-color: #ffffff; color: #262626;
} }
.dropdown-submenu.pull-left { .dropdown-submenu.pull-left {
float: none; float: none;
@ -9824,9 +9828,6 @@ ul#help_menu li a i {
.dropdown-submenu.pull-left > .dropdown-menu { .dropdown-submenu.pull-left > .dropdown-menu {
left: -100%; left: -100%;
margin-left: 10px; margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
} }
#notification_area { #notification_area {
float: right !important; float: right !important;