kivitendo/css/less/menu.less @ f3e63ad9
| 1352ae88 | Hans Peter Schlaepfer | // ----------------------------------------------------------------------------
|
|
//
|
|||
// MENU (V3) and HTML MENU
|
|||
//
|
|||
// ----------------------------------------------------------------------------
|
|||
// DESCRIPTION:
|
|||
//
|
|||
//
|
|||
//
|
|||
// CONTENTS:
|
|||
// - MENUV3
|
|||
// - - List-Element general
|
|||
// - - - Links & Inbound Pseudo Link (DIV)
|
|||
// - - Items with Sub Items
|
|||
// - - List 1st Level (horizontal)
|
|||
// - - - List 2nd and 3rd Level (Vertical)
|
|||
// - - - List 2nd Level (Vertical)
|
|||
// - - - - List 3rd Level (Vertical)
|
|||
//
|
|||
// - HTML-MENU
|
|||
// - HTML-MENU (Overrides)
|
|||
// ----------------------------------------------------------------------------
|
|||
// --------------------------------------
|
|||
// MENUV3
|
|||
// --------------------------------------
|
|||
#menuv3 {
|
|||
// Main-Properties of this element in File SCAFFOLDING.LESS
|
|||
background-color: @menu_link_bg_level1 ;
|
|||
// --------------
|
|||
// List-Element general
|
|||
//
|
|||
li {
|
|||
display: block;
|
|||
position: relative;
|
|||
float: none;
|
|||
font-weight: normal !important ;
|
|||
font-size: @font-size-smaller;
|
|||
line-height: 96%;
|
|||
white-space: nowrap;
|
|||
border: 0;
|
|||
padding: 0;
|
|||
margin: 0;
|
|||
&:hover {
|
|||
cursor: pointer;
|
|||
}
|
|||
// --------------
|
|||
// Links & Inbound Pseudo Link (DIV)
|
|||
//
|
|||
a,
|
|||
a:visited,
|
|||
div.x,
|
|||
div.x:visited {
|
|||
display: block;
|
|||
color: @menu_link;
|
|||
text-decoration: none;
|
|||
//padding-right: 0.6em;
|
|||
}
|
|||
} // /li (List-Element general)
|
|||
// --------------
|
|||
// List 1st Level (horizontal)
|
|||
//
|
|||
& > ul {
|
|||
list-style: none;
|
|||
margin: 0;
|
|||
padding: 0;
|
|||
float: left;
|
|||
& > li{
|
|||
display: block;
|
|||
height: 17px;
|
|||
padding: 9px 0.9em 6px 0.9em;
|
|||
background-color: @menu_link_bg_level1 ;
|
|||
vertical-align: middle;
|
|||
&:hover {
|
|||
background-color: @menu_link_bg_level1_hover;
|
|||
// Display Menu 2nd level
|
|||
> ul {
|
|||
display: block;
|
|||
position: absolute;
|
|||
}
|
|||
}
|
|||
// --------------
|
|||
// List 2nd and 3rd Level (Vertical)
|
|||
//
|
|||
ul {
|
|||
position: relative;
|
|||
display: none;
|
|||
padding: 0 2em 2em 2em;
|
|||
margin: 0 -2em -2em -2.8em;
|
|||
li{
|
|||
border-bottom: 1px #777777 solid ;
|
|||
padding: 0.45em 0.6em 0.58em 0.8em ;
|
|||
}
|
|||
}
|
|||
// --------------
|
|||
/* List 2nd Level (Vertical) */
|
|||
//
|
|||
& > ul {
|
|||
top: 32px;
|
|||
& > li {
|
|||
background-color: @menu_link_bg_level2 ;
|
|||
//
|
|||
// Items with Sub Items
|
|||
//
|
|||
div.x {
|
|||
background: no-repeat right url("../image/menu-arrow-to-right-5.png");
|
|||
padding-right: 2.0em ;
|
|||
}
|
|||
//
|
|||
// List-Item Hover
|
|||
//
|
|||
&:hover {
|
|||
color: @menu_link_hover;
|
|||
background-color: @menu_link_bg_level2_hover;
|
|||
// Display Menu 3rd level
|
|||
> ul {
|
|||
display: block;
|
|||
position: absolute;
|
|||
}
|
|||
}
|
|||
// --------------
|
|||
// List 3rd Level (Vertical)
|
|||
//
|
|||
> ul {
|
|||
top: 0;
|
|||
left: 99%;
|
|||
padding: 2em;
|
|||
margin: -2em;
|
|||
list-style: none;
|
|||
> li {
|
|||
background-color: @menu_link_bg_level3 ;
|
|||
border-left: 0.2em solid @menu_link_bg;
|
|||
&:hover { background-color: @menu_link_bg_level3_hover }
|
|||
}
|
|||
}
|
|||
}
|
|||
} // /List 2nd Level (Vertical)
|
|||
} // /> li
|
|||
} // /ul
|
|||
}
|
|||
// /#menuv3
|
|||
// PENDENT: ??? (ggf. entfernen)
|
|||
li.sub {
|
|||
position: relative;
|
|||
left: 0.2em;
|
|||
top: 0px;
|
|||
background-color: #FFFFFF;
|
|||
}
|
|||
// --------------------
|
|||
// HTML-MENU (LEFT)
|
|||
// --------------------
|
|||
// Layout Page
|
|||
// Left (Menu) area/column
|
|||
body > #layout-split-left {
|
|||
display: block;
|
|||
//position: relative;
|
|||
position: fixed !important;
|
|||
top: 0 ;
|
|||
left: 0 ;
|
|||
width: 200px;
|
|||
//height: 101%;
|
|||
height: 100%;
|
|||
z-index: 1;
|
|||
//overflow: hidden;
|
|||
overflow: hidden ;
|
|||
border-right: 1px @gray solid;
|
|||
background-color: @gray-mediumdark;
|
|||
}
|
|||
// Right (Content) area/column
|
|||
div#layout-split-right {
|
|||
margin-left: 200px;
|
|||
margin-top: 70px;
|
|||
display: block;
|
|||
z-index: 1;
|
|||
overflow: hidden;
|
|||
// PENDENT: das muss dringend geloest werden,
|
|||
// siehe z.B. /am.pl?action=edit_account&callback=am.pl%3faction%3dlist_account&id=6130
|
|||
// Bearbeitung von Konto (wird unten abgeschnitten, falls nicht mit prov. Behelf wie unten)
|
|||
min-height: 800px;
|
|||
height: auto;
|
|||
.layout-actionbar { top: 36px; }
|
|||
& > #content {
|
|||
top: 70px ;
|
|||
h1 { top: 28px !important; }
|
|||
& > form > .tabwidget {
|
|||
& > ul.ui-tabs-nav{ top: 69px; }
|
|||
& > ui-tabs-panel {
|
|||
.tabwidget ul.ui-tabs-nav{ position: relative; }
|
|||
}
|
|||
} // / > form > .tabwidget
|
|||
& > #requirement_spec_tabs.tabwidget {
|
|||
& > ul.ui-tabs-nav{ top: 69px !important ; }
|
|||
}
|
|||
}
|
|||
}
|
|||
// PENDENT: wo gebraucht im alten Kivi ?? ggf. entfernen
|
|||
div.layout-split-right.folded {
|
|||
margin-left: 40px
|
|||
}
|
|||
// Menu itself
|
|||
#layout-split-left #html-menu {
|
|||
display: block;
|
|||
overflow-y: scroll;
|
|||
overflow-x: hidden;
|
|||
width: 100%;
|
|||
height: 100%;
|
|||
margin: 27px 0 0 0;
|
|||
padding: 0 0 50px 0;
|
|||
background-color: @menu_link_bg_level1 ;
|
|||
font-size: @font-size-small;
|
|||
// scrollbars could be invisible only on Webkit-Browsers
|
|||
&::-webkit-scrollbar {
|
|||
display: none;
|
|||
}
|
|||
// -----------------
|
|||
// Menue-Items
|
|||
.mi {
|
|||
display: block ;
|
|||
a {
|
|||
display: block;
|
|||
word-wrap: break-word;
|
|||
}
|
|||
&:first-child {
|
|||
border-top: 2px @gray solid ;
|
|||
}
|
|||
}
|
|||
// Top/1st Level
|
|||
.s0 {
|
|||
padding: 0 ;
|
|||
background-color: #cccccc ;
|
|||
color: @gray-darker;
|
|||
border-bottom: 1px @gray solid ;
|
|||
font-size: 90% ;
|
|||
text-transform: uppercase;
|
|||
a {
|
|||
padding: 5px 0 6px 8px ;
|
|||
&:hover,
|
|||
&:active{
|
|||
background-color: @gray ;
|
|||
color: #000 ;
|
|||
}
|
|||
&:link,
|
|||
&:visited { color: @gray-mediumdark ; }
|
|||
}
|
|||
&.menu-open{
|
|||
font-weight: bold;
|
|||
background-color: @gray-dark ;
|
|||
color: #fff ;
|
|||
a {
|
|||
padding: 5px 0 6px 8px ;
|
|||
&:hover,
|
|||
&:active{
|
|||
background-color: #000 ;
|
|||
color: #fff ;
|
|||
}
|
|||
&:link,
|
|||
&:visited { color: #fff ; }
|
|||
}
|
|||
}
|
|||
} // /.s0
|
|||
// 2nd level
|
|||
.s1{
|
|||
font-size: 80% ;
|
|||
padding: 2px 0 3px 8px ;
|
|||
background-color: @gray-verylight ;
|
|||
padding: 0 ;
|
|||
border-top: 1px #bfbfbf solid ;
|
|||
a {
|
|||
padding: 4px 0 3px 8px ;
|
|||
&:hover,
|
|||
&:active{
|
|||
background-color: #D5D5D5 ;
|
|||
color: #000 ;
|
|||
}
|
|||
&:link,
|
|||
&:visited { color: @gray-mediumdark ; }
|
|||
}
|
|||
// has submenu (has 3rd-Level menu)
|
|||
&.sm{
|
|||
&:after{
|
|||
content: "▼" ;
|
|||
color: @gray ;
|
|||
font-size: 80% ;
|
|||
}
|
|||
a {
|
|||
display: inline-block ;
|
|||
width: 162px; // with scrollbar{ display:none; } 174px is possible, works only with ::-webkit-scrollbar
|
|||
color: @gray ;
|
|||
&:hover,
|
|||
&:active{
|
|||
background-color: @gray-verylight ;
|
|||
color: #999 ;
|
|||
text-decoration: none ;
|
|||
}
|
|||
&:link,
|
|||
&:visited { color: @gray-mediumdark ; }
|
|||
&.ml:link,
|
|||
&.ml:visited{ color: @gray ; }
|
|||
}
|
|||
}
|
|||
& > .s2:last-child { border-bottom: 1px #bfbfbf solid }
|
|||
} // /.s1
|
|||
// 3rd & last level
|
|||
.s2{
|
|||
padding: 0 ;
|
|||
font-size: 80% ;
|
|||
background-color: @gray-morelighter ;
|
|||
a {
|
|||
padding: 2px 0 3px 20px ;
|
|||
&:hover,
|
|||
&:active{
|
|||
background-color: #BCBCBC ;
|
|||
color: #000 ;
|
|||
}
|
|||
&:link,
|
|||
&:visited { color: @gray-mediumdark ; }
|
|||
}
|
|||
} // /.s2
|
|||
} // /#html-menu
|
|||
// --------------------
|
|||
// DHTML-MENU (TOP WITH ICONS)
|
|||
// --------------------
|
|||
#main_menu_div {
|
|||
.DHTMLSuite_menuBar_top {
|
|||
top: 30px;
|
|||
}
|
|||
}
|
|||
.DHTMLSuite_menuBar_sub {
|
|||
width: auto !important;
|
|||
padding: 0.1em 0 0.4em 0.4em !important;
|
|||
.DHTMLSuite_menuItem_sub_regular{
|
|||
//display: table-row ;
|
|||
//vertical-align: middle ;
|
|||
a.DHTMLSuite_menuItem_textContent{
|
|||
//display: table-cell;
|
|||
//font-size: @font-size-small ;
|
|||
}
|
|||
}
|
|||
}
|
|||