From 2557e91888532067e457bb6a8f7c4e8c20c416bb Mon Sep 17 00:00:00 2001 From: sunny Date: Wed, 30 May 2018 12:07:05 +0900 Subject: [PATCH] design --- src/styles.scss | 2646 +++++++++++++++++++++++------------------------ 1 file changed, 1323 insertions(+), 1323 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index b940998..bf3d95b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -12,582 +12,581 @@ background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important; background-size: 200px 30px; } // Menu - .layout-container { +.layout-container { - .topbar { - position: fixed; - z-index: 100; - width: 100%; + .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; - //background-color: $primaryColor; - //@include shadow(0 2px 5px 0 rgba(0,0,0,0.26)); - - .logo { + 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; - 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; + height: 30px !important; + margin-right: 10px; 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%); + 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); - //@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); + 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; + } } - - i { - //@include material-icon("chevron_left"); - //@include transition(all $transitionDuration); - font-size: 24px !important; + + input:focus ~ label { + top:-5px; + font-size:12px; + //color: $primaryColor; + } + + input.ui-state-filled ~ label { + display: none; + } + + label { + //color: $topbarSearchColor; + top: 6px !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; - } + } + } + } + + .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); } - - #rightpanel-menu-button { - display: block; - - &:hover { - //color: $topbarButtonHoverColor; - } + } + } + + .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; } - - .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; + + 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; + } } - } - - input:focus ~ label { - top:-5px; - font-size:12px; - //color: $primaryColor; - } - - input.ui-state-filled ~ label { - display: none; - } - - label { - //color: $topbarSearchColor; - top: 6px !important; } } } } } - + + .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 { - 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; + 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); + } + } } } - - .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 { + } + + .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); } } } - - .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; + padding: 0; + margin: 0; list-style: none; - //color: $textSecondaryColor; - display: inline-block; - + overflow: hidden; + 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; + padding: .5em 2.5em .5em 2em; + + > span { + //font-size: $fontSize - 1; } - - &:hover { - //color: $textColor; - - > i { - //color: $layoutMenuItemIconColor; + + i:first-child { + display: inline-block; + vertical-align: middle; + margin-right: .6em; + font-size: 1.250em; + } + } + + ul { + li { + a { + padding-left: 3em; } } - } - } - - &.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; + padding-left: 4em; } } - + ul { li { a { - padding-left: 4em; + padding-left: 5em; } } - + ul { li { a { - padding-left: 5em; - } - } - - ul { - li { - a { - padding-left: 6em; - } + padding-left: 6em; } } } @@ -595,624 +594,192 @@ } } } - - &.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; - } - } - } - } - + + &.red-badge { + > a { .menuitem-badge { - left: 32px; - top: 7px; + background-color: #F44336; + color: #ffffff; } - - .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; - } + + &.purple-badge { + > a { + .menuitem-badge { + background-color: #4527A0; + color: #ffffff; } } - - .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; - } - } + } + + &.teal-badge { + > a { + .menuitem-badge { + background-color: #00695C; + color: #ffffff; } - - .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 { + + .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 { @@ -1222,232 +789,665 @@ } } } + .layout-menu { - margin-left: -265px; + margin-left: -200px !important; } - + .layout-main { - margin-left: 0px; + margin-left: 0px !important; } - - &.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; + } + + .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; } } } - - .topbar { - .topbar-right { - #topbar-menu-button { - display: block; + + .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; } - - .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; + } + } + + 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; - 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; + //color: $textColor; } } - - > ul { - display: none; - - li { - a { - span, img, i { - display: inline-block; - vertical-align: middle; - } + + &.active-menuitem-routerlink { + //color: $horizontalLightMenuRouterLinkActiveColor; + + > i { + //color: $horizontalLightMenuRouterLinkActiveColor; + } + + &:hover { + //color: $textColor; + + i { + //color: $textColor; } } } - - &.active-top-menu { - > a { - //color: $primaryColor; + } + + > 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 { - display: block; - + + ul { + position: static; + 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; + + ul { + li { + a { + padding-left: 48px; + } + } + + ul { + li { + a { + padding-left: 64px; + } + } + + ul { + li { + a { + padding-left: 80px; + } + } + + ul { + li { + a { + padding-left: 96px; + } + } + } + } + } } } - - 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; + + &.active-menuitem { + > a { + //color: $primaryColor; + //background-color: $horizontalLayoutMenuSubMenuActiveBgColor; + } + + > ul { + display: block; + } } } } - - &.topbar-items-visible { - 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: 385px) { - .layout-container { +} + +@media (max-width: 1024px) { + .layout-container { + + &.menu-layout-static { .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; + 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;