gitroast/public/ng/less/ui/menu.less

158 lines
2.5 KiB
Plaintext
Raw Normal View History

2014-07-26 04:24:27 +00:00
@import "var";
// lined menu
ul.menu {
> li {
list-style: none;
> a {
padding: .8em 1.2em;
&:hover {
background-color: @lineMenuHoverBgColor;
color: @lineMenuHoverFontColor;
}
}
&.current > a,
&.hover > a {
color: @lineMenuHoverFontColor;
}
}
> li.head {
font-weight: bold;
padding: .8em 1.2em;
}
> li.down:hover {
> ul.menu-down {
display: block;
}
}
> li.border-bottom {
border-bottom: 1px solid @menuBorderColor;
height: 0;
margin: .5em 0;
}
}
ul.menu-line {
> li,
> li > a {
display: inline-block;
}
> li.down {
position: relative;
> a:after {
content: "\25BE";
margin-left: .4em;
}
> ul.menu-down {
top: 2.1em;
width: 150%;
}
}
> li.hover {
position: relative;
> a:after {
position: absolute;
content: "\25B4";
left: 50%;
bottom: -1.1em;
margin-left: -4px;
}
}
}
ul.menu-vertical,
ul.menu-down {
> li > a,
> li.head {
display: block;
padding: .4em 1.2em;
}
> li.down {
position: relative;
> a:after {
content: "\25B8";
position: absolute;
right: .6em;
}
}
> li.hover {
position: relative;
> a:after {
content: "\25B8";
position: absolute;
left: .5em;
}
}
}
ul.menu-border,
ul.menu-down {
border: 1px solid @menuBorderColor;
> li.head {
border-bottom: 1px solid @menuBorderColor;
}
}
ul.menu-down {
position: absolute;
display: none;
z-index: 99;
box-shadow: 0 0 2px @menuShadowColor;
background-color: @menuDownBgColor;
}
ul.menu-radius {
border-radius: .3em;
> li {
&:first-child {
border-top-left-radius: .3em;
border-top-right-radius: .3em;
> a {
border-top-left-radius: .2em;
border-top-right-radius: .2em;
}
}
&:last-child {
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
> a {
border-bottom-left-radius: .2em;
border-bottom-right-radius: .2em;
}
}
}
}
.drop {
position: relative;
&:hover {
> .drop-down {
position: absolute;
top: 0;
left: 0;
width: 200%;
display: block;
}
}
> .drop-down {
display: none;
border: 1px solid @dropBorderColor;
box-shadow: 0 0 3px @menuShadowColor;
background-color: @dropDownBgColor;
}
}
.drop-bottom {
&:after {
content: "\25BE";
margin-left: .4em;
}
}
.drop-top {
&:after {
content: "\25B4";
margin-left: .4em;
}
}