From e0676028e15fa8b99bef88b0d71a2eef5dae4b9c Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 30 May 2018 12:06:13 +0900
Subject: [PATCH] design

---
 .../layout/topbar/app.topbar.component.html   |    4 +-
 src/styles.scss                               | 1444 ++++++++++++++++-
 2 files changed, 1439 insertions(+), 9 deletions(-)

diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html
index 63ce568..4fdb978 100644
--- a/src/app/commons/component/layout/topbar/app.topbar.component.html
+++ b/src/app/commons/component/layout/topbar/app.topbar.component.html
@@ -16,7 +16,7 @@
             <i class="material-icons">expand_more</i>
         </a>
 
-        <ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
+        <ul class="topbar-items animated fadeInDown ultima-main-topmenu" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
             <li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()" [ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
 
                 <a href="#" (click)="app.onTopbarItemClick($event,profile)">
@@ -56,7 +56,7 @@
                     <i class="topbar-icon material-icons">settings</i>
                     <span class="topbar-item-name">Settings</span>
                 </a>
-                <ul class="ultima-menu animated fadeInDown">
+                <ul class="ultima-menu animated fadeInDown ultima-main-topmenu">
 
                     <li role="menuitem">
                         <a href="#" (click)="app.changeTheme('indigo')">
diff --git a/src/styles.scss b/src/styles.scss
index b57f2e2..b940998 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,12 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 //Logo
-.landing-wrapper #header .header-top .logo {
-    display: inline-block;
-    vertical-align: middle;
-    width: 200px;
-    height: 30px;
-    background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
-}
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .landing-wrapper .header .header-top .logo {
       background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
@@ -18,6 +11,1443 @@
     height: 30px;
     background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
     background-size: 200px 30px; }
+// Menu
+    .layout-container {
+
+        .topbar {
+            position: fixed;
+            z-index: 100;
+            width: 100%;
+            height: 50px !important;
+            //background-color: $primaryColor;
+            //@include shadow(0 2px 5px 0 rgba(0,0,0,0.26));
+    
+            .logo {
+                display: inline-block;
+                vertical-align: middle;
+                width: 150px !important;
+                height: 20px !important;
+                background: url("/assets/layout/images/overFlow_CI_white_200_30.png") center center no-repeat !important;
+                background-size: 150px 20px !important;
+            }
+    
+            .topbar-left {
+                box-sizing: border-box;
+                padding: 15px 20px !important;
+                height: 50px !important;
+                width: 200px !important;
+                //background-color: $primaryDarkColor;
+                float: left;
+                //@include shadow(3px 0 6px rgba(0,0,0,0.3));
+            }
+    
+            .topbar-right {
+                padding: 10px !important;
+                position: relative;
+    
+                #menu-button {
+                    //color: $accentTextColor;
+                    display: inline-block;
+                    vertical-align: middle;
+                    height: 30px !important;
+                    margin-right: 10px;
+                    position: relative;
+                    left: 16px !important;
+                    top: 3px;
+                    background-color: transparent !important;
+                    //@include border-radius(50%);
+                    //@include transition(all $transitionDuration);
+                    //@include multi-shadow(0 3px 10px rgba(0,0,0,0.23), 0 3px 10px rgba(0,0,0,0.16));
+    
+                    &:hover {
+                        //@include scale(1.2);
+                    }
+    
+                    i {
+                        //@include material-icon("chevron_left");
+                        //@include transition(all $transitionDuration);
+                        font-size: 24px !important;
+                    }
+                }
+    
+                #topbar-menu-button, #rightpanel-menu-button  {
+                    display: none;
+                    //color: $topbarButtonColor;
+                    vertical-align: middle;
+                    height: 30px !important;
+                    margin-top: 4px;
+                    float: right;
+    
+                    //@include transition(all $transitionDuration);
+    
+                    i {
+                        //@include transition(color $transitionDuration);
+                        font-size: 24px !important;
+                    }
+                }
+    
+                #rightpanel-menu-button {
+                    display: block;
+    
+                    &:hover {
+                        //color: $topbarButtonHoverColor;
+                    }
+                }
+    
+                .topbar-items {
+                    .search-item {
+                        input {
+                            position: relative;
+                            top: -5px !important;
+                            //font-size: $fontSize;
+                            background-color: transparent;
+                            border-width: 0 0 1px 0;
+                            padding: 2px 2px 1px 2px;
+                            //border-color: $topbarSearchBorderColor;
+                           // color: $topbarSearchColor;
+    
+                            &:focus {
+                                outline: 0 none;
+                                border-bottom-width: 2px;
+                            }
+                        }
+    
+                        input:focus ~ label {
+                          top:-5px;
+                          font-size:12px;
+                          //color: $primaryColor;
+                        }
+    
+                        input.ui-state-filled ~ label {
+                            display: none;
+                        }
+    
+                        label {
+                            //color: $topbarSearchColor;
+                            top: 6px !important;
+                        }
+                    }
+                }
+            }
+        }
+    
+        .layout-menu {
+            overflow: visible;
+            position: fixed;
+            width: 200px !important;
+            z-index: 99;
+            top: 50px !important;
+            height: 100%;
+            //background-color: $layoutMenuBgColor;
+            //@include shadow(3px 0 6px rgba(0,0,0,0.3));
+            //@include transition(margin-left $transitionDuration);
+    
+            .ui-scrollpanel {
+                background: transparent;
+                border-radius: 0;
+                border: none;
+                .ui-scrollpanel-bar {
+                    //background-color: $layoutMenuScrollbarBgColor;
+                    //@include opacity(.3);
+                }
+                .ui-scrollpanel-hidden {
+                    display: block;
+                    visibility: hidden;
+                }
+    
+                .layout-menu {
+                    padding-bottom: 120px;
+                }
+            }
+    
+            .profile {
+                box-sizing: border-box;
+                padding-top: 1.2em !important;
+                width: 200px !important;
+                height: 110px !important;
+                text-align: center;
+                //background: url("../images/profile-bg.png") top left no-repeat;
+                background-size: 200px 110px !important;
+                //@include shadow(0 2px 5px 0 rgba(0,0,0,0.16));
+    
+                .profile-image {
+                    width: 40px !important;
+                    height: 40px !important;
+                    margin: 0 auto 5px auto;
+                    display: block;
+                }
+    
+                .profile-name {
+                    display: inline-block;
+                    //color: $textColor;
+                    vertical-align: middle;
+                    font-size: 1em;
+                }
+    
+                i {
+                    //color: $textColor;
+                    vertical-align: middle;
+                   // @include transition(transform $transitionDuration);
+                }
+    
+                &.profile-expanded {
+                    i {
+                        //@include rotate(-180deg);
+                    }
+                }
+            }
+    
+            .profile-menu {
+                //border-bottom: 1px solid $profileMenuBorderBottomColor;
+                overflow: hidden;
+    
+                li:first-child {
+                    margin-top: 1em;
+                }
+    
+                li:last-child {
+                    margin-bottom: 1em;
+                }
+            }
+    
+            &.layout-menu-dark {
+                //background-color: $darkMenuBgColor;
+    
+                .profile {
+                    //background-image: url("../images/profile-bg-dark.png");
+    
+                    .profile-name {
+                        //color: $darkMenuColor;
+                    }
+    
+                    i {
+                        //color: $darkMenuColor;
+                    }
+                }
+    
+                .profile-menu {
+                    //border-bottom: 1px solid $profileMenuDarkBorderBottomColor;
+                }
+    
+                .ui-scrollpanel {
+                  .ui-scrollpanel-wrapper {
+                    .ui-scrollpanel-content {
+                      border-radius: 0;
+                      border: none;
+                    }
+                  }
+                }
+    
+                ul.ultima-menu {
+                    li {
+                        a {
+                            //color: $darkMenuColor;
+    
+                            i {
+                                //color: $darkMenuColor;
+                            }
+    
+                            &:hover {
+                                //background-color: $darkMenuHoverColor;
+                            }
+    
+                             &.active-menuitem-routerlink {
+                                //color: $darkMenuRouterLinkActiveColor;
+    
+                                i {
+                                    //color: $darkMenuRouterLinkActiveColor;
+                                }
+    
+                                &:hover {
+                                    //color: $darkMenuColor;
+    
+                                    > i {
+                                        //color: $darkMenuColor;
+                                    }
+                                }
+                             }
+                        }
+    
+                        &.active-menuitem {
+                            > a {
+                                //color: $accentTextColor;
+                                //background-color: $accentColor;
+    
+                                &.active-menuitem-routerlink {
+                                    //color: $accentTextColor;
+                                    //background-color: $accentColor;
+    
+                                    i {
+                                        //color: $textColor;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+    
+            .menuitem-badge {
+                position: absolute;
+                right: 3.5em;
+                top: .75em;
+                display: inline-block;
+                width: 1em;
+                height: 1em;
+                margin-right: .5em;
+                text-align: center;
+                //background-color: $accentColor;
+                //color: $accentTextColor;
+                //font-size: $fontSize - 2;
+                font-weight: 700;
+                line-height: 1em;
+                //@include border-radius(50%);
+            }
+    
+            .layout-menu-tooltip {
+                display:none;
+                padding: 0 5px;
+                position: absolute;
+                left: 76px;
+                top: 6px;
+                z-index: 101;
+                line-height: 1;
+    
+                .layout-menu-tooltip-text {
+                   padding: 6px 8px;
+                   font-weight: 700;
+                   //background-color: darken($darkMenuBgColor, 5%);
+                   //color: $slimMenuTooltipColor;
+                   min-width: 75px;
+                   white-space: nowrap;
+                   text-align: center;
+                   //@include border-radius($borderRadius);
+                   //@include shadow(0 6px 12px rgba(0,0,0,.175));
+                }
+    
+                .layout-menu-tooltip-arrow {
+                    position: absolute;
+                    width: 0;
+                    height: 0;
+                    border-color: transparent;
+                    border-style: solid;
+                    top: 50%;
+                    left: 0;
+                    margin-top: -5px;
+                    border-width: 5px 5px 5px 0;
+                    //border-right-color: darken($darkMenuBgColor, 5%);
+                }
+            }
+        }
+    
+        &.menu-layout-overlay {
+            .layout-menu {
+                margin-left: -200px !important;
+            }
+    
+            .layout-main {
+                margin-left: 0px;
+            }
+    
+            &.layout-menu-overlay-active {
+                .layout-menu {
+                    z-index: 999999999;
+                    margin-left: 0px;
+                }
+    
+                .layout-mask {
+                    display: block;
+                }
+    
+                .topbar {
+                    .topbar-right {
+                        #menu-button {
+                            i {
+                                //@include rotate(0deg);
+                            }
+                        }
+                    }
+                }
+            }
+    
+            .topbar {
+                z-index: 999999998;
+    
+                .topbar-right {
+                    #menu-button {
+                        i {
+                            font-size: 24px !important;
+                            //@include rotate(180deg);
+                        }
+                    }
+                }
+    
+            }
+        }
+    
+        .layout-main {
+            padding: 50px 0 0 0 !important;
+    
+            .layout-content {
+                padding: 16px;
+            }
+            //@include transition(margin-left $transitionDuration);
+        }
+    
+        .layout-mask {
+            display: none;
+        }
+    
+        .layout-breadcrumb {
+            background-color: #ffffff;
+            //@include shadow(inset 0 -2px 4px 0 rgba(0, 0, 0, 0.14));
+            min-height: 30px !important;
+           // @include clearfix();
+    
+            ul {
+                margin: 4px 0 0 0 !important;
+                padding: 0 0 0 20px;
+                list-style: none;
+                //color: $textSecondaryColor;
+                display: inline-block;
+    
+                li {
+                    display: inline-block;
+                    vertical-align: top;
+                    //color: $textSecondaryColor;
+    
+                    &:nth-child(even) {
+                        font-size: 12px !important;
+                    }
+    
+                    &:first-child(even) {
+                        //color: $primaryColor;
+                    }
+    
+                    a {
+                        //color: $textSecondaryColor;
+                    }
+                }
+            }
+    
+            .layout-breadcrumb-options {
+                float: right;
+                padding: 0px 20px 0 0;
+                height: 100%;
+    
+                a {
+                    //color: $textSecondaryColor;
+                    display: inline-block;
+                    width: 30px !important;
+                    height: 30px !important;
+                    line-height: 30px !important;
+                    text-align: center;
+                    //@include transition(background-color $transitionDuration);
+    
+                    &:hover {
+                        //background-color: $hoverBgColor;
+                    }
+    
+                    i {
+                        line-height: inherit;
+                    }
+                }
+            }
+        }
+    
+        .ultima-menu {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            width: 220px !important;
+            &.ultima-main-topmenu{
+                top: 35px !important;
+            }
+    
+            &.ultima-main-menu {
+              margin-top: 16px;
+              padding-bottom: 120px;
+            }
+    
+            li {
+                a {
+                    font-size: 1em;
+                    display: block;
+                    padding: .5em 2.5em .5em 1em;
+                    //color: $textColor;
+                    width: 100%;
+                    box-sizing: border-box;
+                    //@include transition(background-color $transitionDuration);
+                    overflow: hidden;
+    
+                    i {
+                        //color: $layoutMenuItemIconColor;
+                    }
+    
+                    i:first-child {
+                        display: inline-block;
+                        vertical-align: middle;
+                        margin-right: .5em;
+                        font-size: 1.5em;
+                    }
+    
+                    i:last-child {
+                        float: right;
+                        //font-size: $fontSize + 4;
+                        margin-top: .15em;
+                        margin-right: -.15em;
+                        //@include transition(transform $transitionDuration);
+                    }
+    
+                    &:hover {
+                        //background-color: $hoverBgColor;
+                    }
+    
+                    span {
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+    
+                    &.active-menuitem-routerlink {
+                        //color: $lightMenuRouterLinkActiveColor;
+    
+                        > i {
+                            //color: $lightMenuRouterLinkActiveColor;
+                        }
+    
+                        &:hover {
+                            //color: $textColor;
+    
+                            > i {
+                                //color: $layoutMenuItemIconColor;
+                            }
+                        }
+                    }
+                }
+    
+                &.active-menuitem {
+                    > a {
+                        //color: $primaryColor;
+                        //background-color: $layoutMenuItemActiveColor;
+    
+                        i {
+                            //color: $primaryColor;
+                        }
+    
+                        i:last-child {
+                            //@include rotate(-180deg);
+                        }
+                    }
+                }
+    
+                ul {
+                    padding: 0;
+                    margin: 0;
+                    list-style: none;
+                    overflow: hidden;
+    
+                    li {
+                        a {
+                            padding: .5em 2.5em .5em 2em;
+    
+                            > span {
+                                //font-size: $fontSize - 1;
+                            }
+    
+                            i:first-child {
+                                display: inline-block;
+                                vertical-align: middle;
+                                margin-right: .6em;
+                                font-size: 1.250em;
+                            }
+                        }
+    
+                        ul {
+                            li {
+                                a {
+                                    padding-left: 3em;
+                                }
+                            }
+    
+                            ul {
+                                li {
+                                    a {
+                                        padding-left: 4em;
+                                    }
+                                }
+    
+                                ul {
+                                    li {
+                                        a {
+                                            padding-left: 5em;
+                                        }
+                                    }
+    
+                                    ul {
+                                        li {
+                                            a {
+                                                padding-left: 6em;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+    
+                &.red-badge {
+                    > a {
+                        .menuitem-badge {
+                            background-color: #F44336;
+                            color: #ffffff;
+                        }
+                    }
+                }
+    
+                &.purple-badge {
+                    > a {
+                        .menuitem-badge {
+                            background-color: #4527A0;
+                            color: #ffffff;
+                        }
+                    }
+                }
+    
+                &.teal-badge {
+                    > a {
+                        .menuitem-badge {
+                            background-color: #00695C;
+                            color: #ffffff;
+                        }
+                    }
+                }
+            }
+        }
+    
+        .footer {
+            padding: .5em;
+    
+            .footer-text-left {
+                float: left;
+            }
+    
+            .footer-text-right {
+                //color: $textSecondaryColor;
+                float: right;
+    
+                span {
+                    vertical-align: middle;
+                    display: inline-block;
+                }
+            }
+        }
+    
+        .layout-rightpanel {
+            position: fixed;
+            top: 50px !important;
+            height: 100%;
+            right: -240px;
+            width: 240px;
+            z-index: 100;
+            //background-color: $rightPanelBgColor;
+            //@include box-sizing(border-box);
+           // @include transition(right $transitionDuration);
+            //@include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.3));
+    
+            &.layout-rightpanel-active {
+                right: 0;
+                -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+                transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+            }
+    
+            .layout-rightpanel-content {
+                padding: 14px;
+                padding-bottom: 120px;
+            }
+    
+            .ui-scrollpanel  {
+              border-radius: 0;
+              border: none;
+              .ui-scrollpanel-hidden {
+                display: block;
+                visibility: hidden;
+              }
+              .layout-rightpanel-wrapper{
+                width: 258px;
+                padding-right: 18px;
+              }
+            }
+    
+        }
+    }
+    
+    .ajax-loader {
+        font-size: 2em;
+        //color: $accentColor;
+    }
+    
+    @media (min-width: 1025px) {
+    
+        .layout-container {
+    
+            .topbar-items {
+                float: right;
+                margin: 0;
+                padding: 5px 0 0 0;
+                list-style-type: none;
+    
+                > li {
+                    float: right;
+                    position: relative;
+                    margin-left: 8px;
+    
+                    > a {
+                        position: relative;
+                        display: block;
+    
+                        .topbar-item-name {
+                            display: none;
+                        }
+    
+                        .topbar-badge {
+                            position: absolute;
+                            right: -5px;
+                            top: -5px;
+                            //background-color: $accentColor;
+                            //color: $accentTextColor;
+                            //@include border-radius(50%);
+                            padding: 2px 4px;
+                            display: block;
+                            font-size: 12px;
+                            line-height: 12px;
+                        }
+                    }
+    
+                    .topbar-icon {
+                        font-size: 24px !important;
+                        //color: $topbarIconColor;
+                        //@include transition(color $transitionDuration);
+    
+                        &:hover {
+                            //color: $topbarIconHoverColor;
+                        }
+                    }
+    
+                    &.profile-item {
+                        .profile-image {
+                            width: 30px !important;
+                            height: 30px !important;
+                        }
+                    }
+    
+                    > ul {
+                        position: absolute;
+                        top: 55px;
+                        right: 5px;
+                        display: none;
+                        width: 250px;
+                        //background-color: $topbarSubmenuBgColor;
+                        //@include multi-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2));
+                        //-webkit-animation-duration: $transitionDuration;
+                        //-moz-animation-duration: $transitionDuration;
+                        //animation-duration: $transitionDuration;
+                    }
+    
+                    &.active-top-menu {
+                        > ul {
+                            display: block;
+                        }
+                    }
+    
+                    .topbar-message {
+                        img {
+                            display: inline-block;
+                            vertical-align: middle;
+                            margin-right: 12px;
+                        }
+                    }
+                }
+            }
+    
+            &.menu-layout-static {
+                .layout-menu {
+                    margin-left: 0;
+                }
+    
+                .layout-main {
+                    margin-left: 200px !important;
+                }
+    
+                &.layout-menu-static-inactive {
+                    .topbar {
+                        .topbar-right {
+                            #menu-button {
+                                i {
+                                    //@include rotate(180deg);
+                                }
+                            }
+                        }
+                    }
+    
+                    .layout-menu {
+                        margin-left: -200px !important;
+                    }
+    
+                    .layout-main {
+                        margin-left: 0px !important;
+                    }
+                }
+    
+                .layout-mask {
+                    display: none;
+                }
+            }
+    
+            &.menu-layout-horizontal {
+                .topbar {
+                    //@include no-shadow();
+    
+                    .topbar-left {
+                        //background-color: $primaryColor;
+                        //@include no-shadow();
+                    }
+    
+                    .topbar-right {
+                        #menu-button {
+                            display: none;
+                        }
+                    }
+                }
+    
+                .layout-menu {
+                    overflow: visible;
+                    position: fixed;
+                    width: 100%;
+                    top: 50px !important;
+                    height: auto;
+                    //background-color: $primaryDarkColor;
+                    //@include shadow(0 2px 5px 0 rgba(0,0,0,0.26));
+    
+                    .ui-scrollpanel {
+                      overflow: visible;
+                      border: none;
+                      .ui-scrollpanel-wrapper {
+                        overflow: visible;
+                        .ui-scrollpanel-content {
+                          overflow: visible;
+                        }
+                      }
+                    }
+    
+                    ul.ultima-menu {
+                        width: 100%;
+                        &.ultima-main-menu {
+                            margin-top: 0;
+                            padding-bottom: 0;
+                        }
+    
+                        > li {
+                            float: left;
+                            position: relative;
+    
+                            > a {
+                                padding: .5em 1em;
+                                //color: $horizontalLayoutMenuItemTextColor;
+    
+                                i {
+                                    //color: $horizontalLayoutMenuItemTextColor;
+                                }
+    
+                                &:hover {
+                                    //background-color: $horizontalLayoutMenuItemHoverBgColor;
+                                    //color: $textColor;
+    
+                                    i {
+                                        //color: $textColor;
+                                    }
+                                }
+    
+                                &.active-menuitem-routerlink {
+                                    //color: $horizontalLightMenuRouterLinkActiveColor;
+    
+                                    > i {
+                                        //color: $horizontalLightMenuRouterLinkActiveColor;
+                                    }
+    
+                                    &:hover {
+                                        //color: $textColor;
+    
+                                        i {
+                                            //color: $textColor;
+                                        }
+                                    }
+                                }
+                            }
+    
+                            > ul {
+                                position: absolute;
+                                top: 41px;
+                                left: 0px;
+                                width: 200px !important;
+                                //background-color: $horizontalLayoutMenuSubMenuBgColor;
+                                //@include multi-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2));
+    
+                                li {
+                                    a {
+                                        padding: 10px 16px;
+                                    }
+    
+                                    ul {
+                                        position: static;
+    
+                                        li {
+                                            a {
+                                                padding-left: 32px;
+                                            }
+                                        }
+    
+                                        ul {
+                                            li {
+                                                a {
+                                                    padding-left: 48px;
+                                                }
+                                            }
+    
+                                            ul {
+                                                li {
+                                                    a {
+                                                        padding-left: 64px;
+                                                    }
+                                                }
+    
+                                                ul {
+                                                    li {
+                                                        a {
+                                                            padding-left: 80px;
+                                                        }
+                                                    }
+    
+                                                    ul {
+                                                        li {
+                                                            a {
+                                                                padding-left: 96px;
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+    
+                                    &.active-menuitem {
+                                        > a {
+                                            //color: $primaryColor;
+                                            //background-color: $horizontalLayoutMenuSubMenuActiveBgColor;
+                                        }
+    
+                                         > ul {
+                                            display: block;
+                                        }
+                                    }
+                                }
+                            }
+    
+                            &.active-menuitem {
+                                > a {
+                                    //color: $accentTextColor;
+                                    //background-color: $accentColor;
+    
+                                    i {
+                                        //color: $accentTextColor;
+                                    }
+                                }
+    
+                                > ul {
+                                    display: block;
+                                }
+                            }
+                        }
+                    }
+    
+                    &.layout-menu-dark {
+                        //background-color: $darkMenuBgColor;
+    
+                        ul.ultima-menu {
+                            li {
+                                a {
+                                    //color: $horizontalDarkLayoutMenuItemTextColor;
+    
+                                    &:hover {
+                                        //background-color: $darkMenuHoverColor;
+                                        //color: $horizontalDarkLayoutMenuItemTextColor;
+    
+                                        i {
+                                            //color: $horizontalDarkLayoutMenuItemTextColor;
+                                        }
+                                    }
+    
+                                    &.active-menuitem-routerlink {
+                                       //color: $darkMenuRouterLinkActiveColor;
+    
+                                       i {
+                                           //color: $darkMenuRouterLinkActiveColor;
+                                       }
+    
+                                       &:hover {
+                                           //color: $horizontalDarkLayoutMenuItemTextColor;
+    
+                                           i {
+                                               //color: $horizontalDarkLayoutMenuItemTextColor;
+                                           }
+                                       }
+                                    }
+                                }
+    
+                                &.active-menuitem {
+                                    > a {
+                                        //color: $accentTextColor;
+                                        //background-color: $accentColor;
+                                    }
+                                }
+    
+                                ul {
+                                    //background-color: $darkMenuBgColor;
+                                }
+                            }
+                        }
+                    }
+    
+                    .menuitem-badge {
+                        left: 32px;
+                        top: 7px;
+                    }
+    
+                    .active-menuitem {
+                        .menuitem-badge {
+                            //background-color: $activeMenuItemBadgeColor;
+                            //color: $activeMenuItemBadgeTextColor;
+                        }
+                    }
+                }
+    
+                .layout-main {
+                    padding-top: 80px !important;
+                    margin-left: 0px;
+                }
+    
+                .layout-mask {
+                    display: none;
+                }
+            }
+    
+    
+            &.menu-layout-slim {
+                .topbar {
+                    left: 75px;
+                    width: calc(100% - 75px);
+    
+                    .topbar-left {
+                        background: transparent;
+                        //@include no-shadow();
+                    }
+    
+                    .topbar-right {
+                        #menu-button {
+                            display: none;
+                        }
+                    }
+                }
+    
+                .layout-menu {
+                    width: 75px;
+                    overflow: visible;
+                    z-index: 100;
+                    top: 0;
+    
+                    .profile {
+                        width: calc(100% - 18px);
+                        height: 74px;
+                        padding-top: 15px;
+    
+                        > a {
+                            .profile-image {
+                                width: 45px;
+                                height: 45px;
+                            }
+    
+                            .profile-name, i {
+                                display: none;
+                            }
+                        }
+                    }
+    
+                    .ui-scrollpanel {
+                      border: none;
+                      border-radius: 0;
+                      .ui-scrollpanel-wrapper {
+                        overflow: visible;
+                        .ui-scrollpanel-content {
+                          overflow: visible;
+                        }
+                      }
+                    }
+    
+                    .ultima-menu {
+                        padding: 0;
+                        width: calc(100% - 18px);
+    
+                        > li {
+                            position: relative;
+    
+                            > a {
+                                text-align: center;
+                                padding-left: 0;
+                                padding-right: 0;
+                                padding-top: .5em;
+                                padding-bottom: .5em;
+    
+                                i:first-child {
+                                    font-size: 1.75em;
+                                    margin-right: 0;
+                                }
+    
+                                span, .submenu-icon {
+                                    display: none;
+                                }
+    
+                                &:hover + .layout-menu-tooltip {
+                                    display: block;
+                                }
+                            }
+    
+                            > ul {
+                                //background-color: $slimLayoutMenuSubMenuBgColor;
+                                position: absolute;
+                                top: 0;
+                                left: 75px;
+                                min-width: 200px;
+                                //@include shadow(0 2px 5px 0 rgba(0,0,0,0.26));
+    
+                                li {
+                                    a {
+                                        padding: .5em 1em .5em 2em;
+                                        padding-left: 16px;
+                                    }
+    
+                                    ul {
+                                        li {
+                                            a {
+                                                padding-left: 32px;
+                                            }
+                                        }
+    
+                                        ul {
+                                            li {
+                                                a {
+                                                    padding-left: 48px;
+                                                }
+                                            }
+    
+                                            ul {
+                                                li {
+                                                    a {
+                                                        padding-left: 64px;
+                                                    }
+                                                }
+    
+                                                ul {
+                                                    li {
+                                                        a {
+                                                            padding: 80px;
+                                                        }
+                                                    }
+    
+                                                    ul {
+                                                        li {
+                                                            a {
+                                                                padding: 96px;
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+    
+                            &.active-menuitem {
+                                > a {
+                                    &:hover + .layout-menu-tooltip {
+                                        display: none;
+                                    }
+                                }
+                            }
+                        }
+                    }
+    
+                    &.layout-menu-dark {
+                        .ultima-menu {
+                            > li {
+                                > ul {
+                                    //background-color: $darkMenuBgColor;
+                                }
+                            }
+                        }
+                    }
+                }
+    
+                .layout-main {
+                    margin-left: 75px;
+                }
+    
+                .layout-footer {
+                    margin-left: 75px;
+                }
+            }
+        }
+    }
+    
+    @media (max-width: 1024px) {
+        .layout-container {
+    
+            &.menu-layout-static {
+                .topbar {
+                    .topbar-right {
+                        #menu-button {
+                            i {
+                                //@include rotate(180deg);
+                            }
+                        }
+                    }
+                }
+                .layout-menu {
+                    margin-left: -265px;
+                }
+    
+                .layout-main {
+                    margin-left: 0px;
+                }
+    
+                &.layout-menu-static-active {
+                    .layout-menu {
+                        margin-left: 0;
+                        z-index: 999999999;
+                    }
+    
+                    .topbar {
+                        z-index: 999999998;
+    
+                        .topbar-right {
+                            #menu-button {
+                                i {
+                                    //@include rotate(0);
+                                }
+                            }
+                        }
+                    }
+    
+                    .layout-main {
+                        margin-left: 0;
+                    }
+    
+                    .layout-mask {
+                        display: block;
+                    }
+                }
+            }
+    
+            .topbar {
+                .topbar-right {
+                    #topbar-menu-button {
+                        display: block;
+                    }
+    
+                    .topbar-items {
+                        position: absolute;
+                        top: 50px !important;
+                        right: 15px;
+                        width: 215px !important;
+                        display: none;
+                        //background-color: $topbarMenuBgColor;
+                        //@include multi-shadow(0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2));
+                        //@include animation-duration($transitionDuration);
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
+    
+                        > li {
+                            > a {
+                                width: 100%;
+                                display: block;
+                                box-sizing: border-box;
+                                font-size: 14px !important;
+                                padding: 14px 14px !important;
+                                //color: $textColor;
+                                position: relative;
+    
+                                i {
+                                    display: inline-block;
+                                    vertical-align: middle;
+                                    margin-right: 12px;
+                                    font-size: 18px !important;
+                                }
+    
+                                &:hover {
+                                    //background-color: $topbarIconHoverColor;
+                                }
+    
+                                .topbar-item-name {
+                                    display: inline-block;
+                                    vertical-align: middle;
+                                }
+    
+                                .topbar-badge {
+                                    position: absolute;
+                                    left: 30px;
+                                    top: 10px;
+                                    //background-color: $accentColor;
+                                    //color: $accentTextColor;
+                                    //@include border-radius(50%);
+                                    padding: 2px 4px;
+                                    display: block;
+                                    font-size: 12px;
+                                    line-height: 12px;
+                                }
+                            }
+    
+                            > ul {
+                                display: none;
+    
+                                li {
+                                    a {
+                                        span, img, i {
+                                            display: inline-block;
+                                            vertical-align: middle;
+                                        }
+                                    }
+                                }
+                            }
+    
+                            &.active-top-menu {
+                                > a {
+                                    //color: $primaryColor;
+                                }
+    
+                                > ul {
+                                    display: block;
+    
+                                    li {
+                                        a {
+                                            padding-left: 32px;
+                                        }
+                                    }
+                                }
+                            }
+    
+                            &.search-item {
+                                text-align: center;
+                                width: 100%;
+                                display: block;
+                                box-sizing: border-box;
+                                font-size: 14px !important;
+                                padding: 14px 14px !important;
+                                position: relative;
+    
+                                input {
+                                    top: 0;
+                                    width: 100%;
+                                    box-sizing: border-box;
+                                    padding-right:14px !important;
+                                    //border-color: $dividerColor;
+                                    //color: $textColor;
+    
+                                    &:focus {
+                                        margin-bottom: -1px;
+                                        //border-color: $dividerColor;
+                                    }
+                                }
+    
+                                input:focus ~ label,
+                                input.ui-state-filled ~ label  {
+                                    top: -25px !important;
+                                    //color: $primaryColor;
+                                }
+    
+                                label {
+                                    top: -5px !important;
+                                    //color: $textColor;
+                                }
+    
+                                i {
+                                    position: absolute;;
+                                    right: 5px;
+                                    top: -2px;
+                                }
+                            }
+    
+                            &.profile-item {
+                                .profile-image {
+                                    display: inline-block;
+                                    vertical-align: middle;
+                                    width: 24px;
+                                    height: 24px;
+                                    //background: url("../images/avatar.png") top left no-repeat;
+                                    background-size: 24px 24px;
+                                    margin-right: 14px;
+                                }
+    
+                                span {
+                                    vertical-align: middle;
+                                    display: inline-block;
+                                }
+                            }
+                        }
+    
+                        &.topbar-items-visible {
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    @media (max-width: 385px) {
+        .layout-container {
+            .topbar {
+                .topbar-right {
+                    #topbar-menu-button {
+                        position: absolute;
+                        height: 1.5em;
+                        right: 24px;
+                        top: 0.8em !important;
+    
+                        i {
+                            font-size: 1.5em;
+                        }
+                    }
+    
+                    #rightpanel-menu-button {
+                        position: absolute;
+                        height: 1.5em;
+                        right: 8px;
+                        top: 0.8em !important;
+    
+                        i {
+                            font-size: 1.5em;
+                        }
+                    }
+    
+                    #menu-button {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+    }
+    
 //top menu-button
 .layout-container .topbar .topbar-right #menu-button {
     color: #ffffff;