css/design40/less/menu.less

   1 /* ------------------------------------------------------------- */
   2 /* MENU (V3) and HTML MENU (menu.less)                          */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // MENU (V3) and HTML MENU
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 //
  12 //
  13 //
  14 // CONTENTS:
  15 // - MENUV3
  16 //   - List-Element general
  17 //     - Links & Inbound Pseudo Link (DIV)
  18 //   - Items with Sub Items
  19 //   - List 1st Level (horizontal)
  20 //     - List 2nd and 3rd Level (Vertical)
  21 //     - List 2nd Level (Vertical)
  22 //     - List 3rd Level (Vertical)
  23 //
  24 // - HTML-MENU (LEFT)
  25 //   - Layout Web Page (LEFT & RIGHT AREA)
  26 //   - HTML-JS-MENU
  27 //     - Menue Items
  28 //     - Top Menu Item (1st Level)
  29 //     - Sub Menu Item (2nd Level)
  30 //     - Sub Sub Menu Item (3rd & last Level)
  31 //
  32 // - DHTML-MENU (TOP WITH ICONS, JUST OVERRIDES)
  33 //   - Menu Bar on Top
  34 //   - Menu-Container Sub (Sub Menu 2nd Level)
  35 //   - Menu-Item Sub (2nd Level)
  36 //   - Non-Generic Overrides (With Group Ids
  37
  38 // ----------------------------------------------------------------------------
  39
  40
  41
  42
  43
  44 // --------------------------------------
  45 // MENUV3
  46 // --------------------------------------
  47
  48 #menuv3 {
  49   // Main-Properties of this element in File SCAFFOLDING.LESS
  50   background-color: @menu_bg ;
  51
  52
  53
  54   // --------------
  55   // List-Element general
  56   // --------------
  57   li {
  58     display:       block;
  59     position:      relative;
  60     float:         none;
  61     font-weight:   normal !important ;
  62     font-size:     @font-size-smaller;
  63     line-height:   96%;
  64     white-space:   nowrap;
  65     border:        0;
  66     padding:       0;
  67     margin:        0;
  68
  69     &:hover {
  70       cursor:    pointer;
  71     }
  72
  73     // --------------
  74     // Links & Inbound Pseudo Link (DIV)
  75     // --------------
  76     a,
  77     a:visited,
  78     div.x,
  79     div.x:visited {
  80       display:         block;
  81       color:           @menu_link;
  82       text-decoration: none;
  83       padding:         0.45em 0.6em 0.58em 1.3em ;
  84       font-weight:     normal;
  85       //padding-right: 0.6em;
  86     }
  87
  88   } //  /li (List-Element general)
  89
  90
  91   // --------------
  92   // List 1st Level (horizontal)
  93   // --------------
  94   & > ul {
  95     list-style: none;
  96     margin:     0;
  97     padding:    0;
  98     float:      left;
  99
 100     & > li{
 101       display:          block;
 102       height:           17px;
 103       padding:          9px 0.9em 6px 0.9em;
 104       background-color: @menu_bg ;
 105       color:            @menu_link ;
 106       vertical-align:   middle;
 107
 108       &:hover {
 109         background-color: @menu_link_bg_level1_hover;
 110
 111         // Display Menu 2nd level
 112         > ul {
 113           display:  block;
 114           position: absolute;
 115         }
 116       }
 117
 118
 119       // --------------
 120       // List 2nd and 3rd Level (vertical)
 121       // --------------
 122       ul {
 123         position: relative;
 124         display:  none;
 125         padding:  0 2em 2em 2em;
 126         margin:   0 -2em -2em -2.8em;
 127
 128         li{
 129           border-bottom: 1px @menu_border_color solid ;
 130         }
 131       } // /ul (2nd and 3rd Level)
 132
 133
 134       // --------------
 135       /* List 2nd Level (Vertical) */
 136       // --------------
 137       & > ul {
 138         top: 32px;
 139         z-index: 1000;
 140
 141         & > li {
 142           background-color: @menu_link_bg_level2 ;
 143           margin-left:       1px;
 144
 145           // Items with Sub Items
 146           div.x {
 147             background:    no-repeat right url("../../image/menu-arrow-to-right-5.png");
 148             padding-right: 2.0em ;
 149
 150             // does not work because text has to be a block
 151 //            &::after {
 152 //              content:     "▷" ;
 153 //              color:       @gray-dark ;
 154 //              font-size:   120% ;
 155 //              padding:     0 0 0 1.0em ;
 156 //              text-align: right ;
 157 //              display:    inline-box ;
 158 //            }
 159           }
 160
 161           // List-Item Hover
 162           &:hover {
 163             color:            @menu_link_hover;
 164             background-color: @menu_link_bg_level2_hover;
 165
 166             // Display Menu 3rd level
 167             > ul {
 168               display:  block;
 169               position: absolute;
 170             }
 171           }
 172
 173           // --------------
 174           // List 3rd Level (Vertical)
 175           // --------------
 176           > ul {
 177             top:              0;
 178             left:             99%;
 179             padding:          2em;
 180             //margin:       -2em;
 181             margin-top:       -2.06em;
 182             margin-right:     -2em;
 183             margin-bottom:    -2em;
 184             margin-left:      -2em;
 185             list-style:       none;
 186
 187             > li {
 188               background-color:   @menu_link_bg_level3 ;
 189               //border-left:      0.2em solid @menu_border_color;
 190
 191               &:hover {
 192                 background-color: @menu_link_bg_level3_hover }
 193
 194               &:first-child { border-top: 1px #800040 solid ; }
 195              }
 196
 197           } // /ul (3rd level)
 198
 199         } // />li (2nd level)
 200
 201       } // /ul List 2nd Level (Vertical)
 202
 203     } //  />li (1st level)
 204
 205   } //  /ul (1st level)
 206
 207 } //  /#menuv3
 208
 209
 210 //  PENDENT: ??? (ggf. entfernen)
 211 li.sub {
 212   position:         relative;
 213   left:             0.2em;
 214   top:               0px;
 215   background-color: #FFFFFF;
 216 }
 217
 218
 219
 220
 221
 222 // --------------------------------------
 223 // HTML-MENU (LEFT)
 224 // --------------------------------------
 225
 226 // --------------------
 227 // Layout Web Page (LEFT & RIGHT AREA)
 228 // --------------------
 229
 230 // LEFT (Menu) area/column
 231 body > div.layout-split-left {
 232   display: block;
 233   position:         fixed !important;
 234   top:               0 ;
 235   left:             0 ;
 236   width:             200px;
 237   height:           100%;
 238   z-index:           1;
 239   overflow:         hidden   ;
 240   border-right:     1px @gray-standard solid;
 241   background-color: @gray-dark;
 242
 243
 244 }
 245
 246 // RIGHT (Content) area/column
 247 body > div.layout-split-right {
 248   margin-left:   200px;
 249   //margin-top:   70px;
 250   padding-top: 28px;
 251   display:       block;
 252   z-index:       1;
 253   overflow:     hidden;
 254   // PENDENT: das muss dringend geloest werden,
 255   // siehe z.B. /am.pl?action=edit_account&callback=am.pl%3faction%3dlist_account&id=6130
 256   // Bearbeitung von Konto (wird unten abgeschnitten, falls nicht mit prov. Behelf wie unten)
 257   min-height:   800px;
 258   height:       auto;
 259
 260   .layout-actionbar { top: 36px; }
 261
 262   & > #content {
 263     top: 68px;
 264     padding-top: 40px;
 265
 266     h1 { top: 28px !important; }
 267
 268     & > .wrapper{
 269       padding-top: 2em ;
 270     }
 271     & + div.wrapper {
 272       padding-top: 4em ; // funzt nicht
 273     }
 274
 275     & > form {
 276       margin-top: 0.6em ;
 277
 278       & + div.wrapper {
 279         padding-top: 4em ;
 280       }
 281
 282
 283       & > .tabwidget {
 284         & > ui-tabs-panel {
 285           //padding-top: 6.0em ;
 286           .wrapper{ margin-top: 2em; }
 287           .tabwidget ul.ui-tabs-nav{ position: relative; }
 288         }
 289         & > ul.ui-tabs-nav{
 290           top: 69px;
 291           width: ~"calc(100% - 200px)";
 292         }
 293
 294       } // / > .tabwidget
 295     } // / > form
 296     & > #requirement_spec_tabs.tabwidget {
 297       & > ul.ui-tabs-nav{ top: 69px !important ; }
 298     }
 299   }
 300
 301   // PENDENT: war für Klasse .layout-split-right eingesetzt, wo gebraucht im alten Kivi ?? ggf. entfernen
 302   &.folded {
 303     margin-left: 40px
 304   }
 305
 306
 307
 308 }
 309
 310 // PENDENT: wo als Klasse gebraucht im alten Kivi ?? ggf. entfernen
 311 div.layout-split-right.folded {
 312   margin-left: 40px
 313 }
 314
 315 // --------------------
 316 // HTML-JS-MENU
 317 // --------------------
 318
 319 div.layout-split-left #html-menu {
 320   display:            block;
 321   overflow-y:         scroll;
 322   overflow-x:         hidden;
 323   width:              100%;
 324   height:             100%;
 325   margin:             27px 0 0 0;
 326   padding:            0 0 150px 0;
 327   background-color:   @menu_left_bg ;
 328   font-size:          @font-size-small;
 329   border-bottom:      20px @menu_border_color solid ; // PENDENT: Rand unten sollte vorhanden sein
 330
 331   // menu item icons (mii) ausblenden
 332   .mii {
 333     display: none;
 334   }
 335
 336   // scrollbars can be invisible only on Webkit-Browsers
 337   &::-webkit-scrollbar {
 338     display: none;
 339   }
 340
 341   & > div:last-of-type {
 342     border-bottom: @menu_border ; // PENDENT: Rand unten sollte vorhanden sein
 343   }
 344
 345   // -----------------------
 346   // Menue-Items
 347   // -----------------------
 348   .mi {
 349     display:       block ;
 350     a {
 351       display:     block;
 352       word-wrap:   break-word;
 353       text-decoration: none;
 354       font-weight: normal;
 355     }
 356     &:first-child {
 357       border-top: 2px @menu_border_color solid ; // PENDENT: 2px ??? sonst @menu_border verwenden
 358     }
 359     &:last-child {
 360       border-bottom: @menu_border ; // PENDENT: 2px ??? sonst @menu_border verwenden
 361     }
 362   }
 363
 364
 365   // -----------------------
 366   // Top Menu Item (1st Level)
 367   // -----------------------
 368   .s0 {
 369     padding: 0 ;
 370     background-color: @menu_left_level_1_bg ;
 371     color:             @menu_left_level_1_color;
 372     border-top:       @menu_border ;
 373     font-size:         90% ;
 374     text-transform:   uppercase;
 375
 376     a {
 377       padding:   5px 0 6px 8px ;
 378       cursor:   pointer ;
 379
 380       &:hover,
 381       &:active{
 382         background-color: @menu_left_level_1_hover_bg ;
 383         color:             @menu_left_level_1_hover_color ;
 384         //color:             white ;
 385         text-decoration:   none;
 386       }
 387       &:link,
 388       &:visited { color: @menu_left_level_1_color ; }
 389     }
 390
 391     &.menu-open{
 392       font-weight:       normal;
 393       background-color: @menu_open_bg ;
 394       color:             @menu_open_color ;
 395       border-bottom:     0 ;
 396
 397       a {
 398         padding:         5px 0 6px 8px ;
 399         cursor:         auto ;
 400
 401         &:hover,
 402         &:active{
 403           background-color: @menu_open_bg ;
 404           color:             @menu_open_color ;
 405           text-decoration:   none;
 406         }
 407         &:link,
 408         &:visited { color:   @menu_open_color ; }
 409       }
 410     }
 411   } // /.s0
 412
 413   // -----------------------
 414   // Sub Menu Item (2nd Level)
 415   // -----------------------
 416   .s1{
 417     font-size: 80% ;
 418     padding: 0 ;
 419     background-color: @menu_left_level_2_bg ;
 420     border-top:       @menu_border ;
 421
 422     a {
 423       padding:         4px 0 3px 8px ;
 424
 425       &:hover,
 426       &:active{
 427         background-color: @menu_left_level_2_hover_bg ;
 428         color:             @menu_left_level_2_hover_color ;
 429         text-decoration:   none;
 430       }
 431       &:link,
 432       &:visited { color:   @menu_left_level_2_color ; }
 433     }
 434
 435     // has submenu (has 3rd-Level menu)
 436     &.sm{
 437       &:after{
 438         content:     "▼" ;
 439         color:       @gray-standard ;
 440         font-size:   80% ;
 441       }
 442       a {
 443         display:   inline-block ;
 444         width:     162px; // with scrollbar{ display:none; } 174px is possible, works only with ::-webkit-scrollbar
 445         color:     @menu_left_level_2_color ;
 446
 447         &:hover,
 448         &:active{
 449           background-color:   @menu_left_level_2_bg ;
 450           color:               @menu_left_level_2_color ;
 451           text-decoration:     none ;
 452         }
 453         &:link,
 454         &:visited { color:     @menu_left_level_2_color ; }
 455
 456         &.ml:link,
 457         &.ml:visited{ color:   @menu_left_level_2_color ; }
 458       }
 459     }
 460     & > .s2:last-child {       border-bottom: @menu_border ; }
 461
 462   } // /.s1
 463
 464   // -----------------------
 465   // Sub Sub Menu Item (3rd & last Level)
 466   // -----------------------
 467   .s2{
 468     padding:           0 ;
 469     font-size:         80% ;
 470     background-color: @menu_left_level_3_bg ;
 471
 472     a {
 473       padding:         2px 0 3px 20px ;
 474
 475       &:hover,
 476       &:active{
 477         background-color:   @menu_left_level_3_hover_bg ;
 478         color:               @menu_left_level_3_hover_color ;
 479         text-decoration:     none;
 480       }
 481       &:link,
 482       &:visited { color:     @menu_left_level_3_color ; }
 483     }
 484
 485   } // /.s2
 486 } // /#html-menu
 487
 488
 489
 490
 491
 492 // --------------------------------------
 493 // DHTML-MENU (TOP WITH ICONS, JUST OVERRIDES)
 494 // --------------------------------------
 495
 496 #main_menu_div {
 497
 498   // -----------------------
 499   // Menu Bar on Top
 500   // -----------------------
 501
 502   .DHTMLSuite_menuBar_top {
 503     top:         28px;
 504     height:     31px !important;
 505     padding:     0;
 506     margin:     0 ;
 507
 508     // -----------------------
 509     // Menu Item on Top
 510     // -----------------------
 511     // Menu Item on Top, generic
 512     // same as .DHTMLSuite_menuItem_top_* below
 513     & > div {
 514       padding: 5px 5px 0 3px ;
 515
 516       // Container with useless icon
 517       div:first-child { }
 518       // Text Menu Item top
 519       .DHTMLSuite_menuItem_textContent {
 520         font-size:   90% ;
 521         padding:     0.1em 0.2em 0.2em 0.2em ;
 522       }
 523       // Arrow down Top
 524       .DHTMLSuite_menuItem_top_arrowShowSub {
 525           margin:   0 0.2em 0.2em 0.2em ;
 526       }
 527     } // / > div (Menu Item on Top, generic)
 528
 529     // Menu Item on Top with funny classes
 530
 531     .DHTMLSuite_menuItem_top_regular,
 532     .DHTMLSuite_menuItem_top_over,
 533     .DHTMLSuite_menuItem_top_click,
 534     .DHTMLSuite_menuItem_top_disabled,
 535     .DHTMLSuite_menuItem_top_active {
 536       height: 19px;
 537     }
 538     .DHTMLSuite_menuItem_top_regular { }
 539     // Hover
 540     .DHTMLSuite_menuItem_top_over,
 541     .DHTMLSuite_menuItem_top_click {
 542       color:             @color-red-strong ;
 543       background-color: @base-superlight ;
 544       .DHTMLSuite_menuItem_top_arrowShowSub{
 545         border:         none !important ;
 546       }
 547     }
 548     // Clicked with Submenu
 549     .DHTMLSuite_menuItem_top_click { }
 550
 551   } // /.DHTMLSuite_menuBar_top
 552
 553 } // /#main_menu_div
 554
 555
 556 // -----------------------
 557 // Menu-Container Sub (Sub Menu 2nd Level)
 558 // -----------------------
 559 .DHTMLSuite_menuBar_sub {
 560   width:           auto !important;
 561   padding:         0.1em 0 0.4em 0.4em !important;
 562   margin:         11px 0 0 0;
 563   border-top:     none;
 564   border-right:   1px solid @base-lighter;
 565   border-bottom:   1px solid @base-lighter;
 566   border-left:     1px solid @base-lighter;
 567
 568   // -----------------------
 569   // Menu-Item Sub (2nd Level)
 570   // -----------------------
 571   .DHTMLSuite_menuItem_sub_regular,
 572   .DHTMLSuite_menuItem_sub_over,
 573   .DHTMLSuite_menuItem_sub_click,
 574   .DHTMLSuite_menuItem_sub_disabled,
 575   .DHTMLSuite_menuItem_sub_active {
 576     clear:               both;
 577     padding-left:       25px;
 578     padding-right:       0.7em;
 579     padding-top:         0.2em;
 580     padding-bottom:     0.2em;
 581     cursor:             pointer;
 582     background-repeat:   no-repeat;
 583     font-size:           90%;
 584
 585     .DHTMLSuite_menuItem_sub_arrowShowSub {
 586       right:             3px !important;
 587     }
 588   }
 589   // Regular
 590   .DHTMLSuite_menuItem_sub_regular{
 591     a.DHTMLSuite_menuItem_textContent{  }
 592   }
 593   // Hover & Active
 594   .DHTMLSuite_menuItem_sub_over,
 595   .DHTMLSuite_menuItem_sub_active {
 596     color: @color-orange-strong ;
 597     background-color: @base-superlight;
 598   }
 599
 600 } // /.DHTMLSuite_menuBar_sub