OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
openproject/app/assets/stylesheets/layout/_tree_menu.sass

84 lines
2.0 KiB

#main-menu ul ul.menu-children ul.pages-hierarchy,
.pages-hierarchy
$hierarchy-span-width: 25px
$tree-menu-item-height: 30px
line-height: $tree-menu-item-height
.tree-menu--title
display: inline-block
width: calc(100% - #{$hierarchy-span-width})
vertical-align: bottom
height: $tree-menu-item-height
line-height: $tree-menu-item-height
.tree-menu--hierarchy-span
display: inline-block
width: $hierarchy-span-width
padding-left: 8px
line-height: $tree-menu-item-height
.tree-menu--hierarchy-indicator-icon,
.tree-menu--leaf-indicator
line-height: $tree-menu-item-height
// Style the hierarchy group indicator arrow
// default: open arrow down
// collapsed: right arrow
.tree-menu--hierarchy-indicator
@include varprop(color, main-menu-font-color)
height: $tree-menu-item-height
line-height: $tree-menu-item-height
&:hover
text-decoration: none
// Toggle the indicator accessibility texts
// accordingly
.tree-menu--hierarchy-indicator-collapsed
display: none
.-hierarchy-collapsed
.tree-menu--hierarchy-indicator-expanded
display: none
.tree-menu--hierarchy-indicator-collapsed
display: inline-block
// END accessibility rules
.tree-menu--hierarchy-indicator-icon
@include icon-common
@extend .icon-arrow-down1
font-size: 0.6rem
&.-with-hierarchy
.-with-hierarchy
padding-left: 1rem
&.-hierarchy-collapsed > li
> .tree-menu--item > .tree-menu--hierarchy-span > .tree-menu--hierarchy-indicator > .tree-menu--hierarchy-indicator-icon
@include icon-common
@extend .icon-arrow-right2
font-size: 0.6rem
> ul.-with-hierarchy
display: none
> li,
> li:hover
background: transparent
.tree-menu--item
display: inline-block
width: 100%
border-radius: 3px
line-height: $tree-menu-item-height
height: $tree-menu-item-height
&:hover
@include varprop(color, main-menu-hover-font-color)
@include varprop(background, main-menu-bg-hover-background)