You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
860 lines
19 KiB
860 lines
19 KiB
|
|
/* skin 1 */
|
|
.skin-1 {
|
|
@body-background: #4A4F56;
|
|
@navbar-background: #2C6AA0;
|
|
@sidebar-background: #222A2D;
|
|
|
|
@nav-item-background: @sidebar-background;
|
|
@nav-item-color: #B1BAC1;
|
|
@nav-item-border: #3F4E54;
|
|
|
|
//different states
|
|
@nav-item-background-hover: #414B51;
|
|
@nav-item-color-hover: #E1EAF1;
|
|
|
|
@nav-item-color-open: #85C0EC;
|
|
@nav-item-background-open: @nav-item-background;
|
|
|
|
@nav-item-background-active: #141A1B;
|
|
@nav-item-color-active: #7BB7E5;//#55A0DC
|
|
|
|
|
|
//submenu colors
|
|
@submenu-background: #333D3F;
|
|
@submenu-border: #505A5B;
|
|
|
|
@submenu-background-active: #181E20; //darken(@submenu-background-active , 2.5%);
|
|
@submenu-border-active: #2F3E44;
|
|
|
|
@submenu-item-color: #D9DFE6;
|
|
@submenu-item-border: #454D4E;
|
|
|
|
@submenu-item-hover: #8AB4DE;
|
|
@submenu-item-hover-background: #2D3638; //!darken(@submenu-background, 2.5%);
|
|
|
|
@submenu-item-background: #333D3F;
|
|
@submenu-item-background-hover: #333D3F;
|
|
|
|
@submenu-item-active: @nav-item-color-active;
|
|
@submenu-item-background-active: #181E20; //darken(@submenu-background-active , 2.5%);
|
|
@submenu-item-border-active: #222526;
|
|
@submenu-item-icon-active: #4088D8; //darken(spin(@submenu-item-active , 5%), 5%);
|
|
|
|
@submenu-item-background-active-hover: #14191a;
|
|
|
|
@3rd-submenu-item: #61A8DD;
|
|
@3rd-submenu-item-open: @nav-item-color-open;
|
|
|
|
@active-border-highlight: #305675;
|
|
|
|
|
|
@submenu-dotline-border: #646C70;
|
|
@submenu-active-dotline-border: @nav-item-border;
|
|
|
|
|
|
@breadcrumbs-background: #F0F0F0;
|
|
|
|
@sidebar-toggle-background: lighten(spin(@nav-item-background-active , 10%) , 2%);
|
|
@sidebar-toggle-border: @nav-item-border;
|
|
@sidebar-toggle-icon-background: @sidebar-background;
|
|
@sidebar-toggle-icon-color: #AAA;
|
|
@sidebar-toggle-icon-border: #AAA;
|
|
|
|
@shortcuts-background: @sidebar-background;
|
|
@shortcuts-border: @nav-item-border;
|
|
|
|
|
|
@menumin-item-active-background: #242A2B;
|
|
@menumin-submenu-border-left: #181D1F;
|
|
@menumin-submenu-border: #242A2B;
|
|
@menumin-submenu-border-top: #5A606A;
|
|
@menumin-active-submenu-border-top: #3B4547;
|
|
|
|
@hover-submenu-border: #232828;
|
|
@hover-active-submenu-border: #475561;
|
|
|
|
@hover-submenu-arrow: #353C3D;
|
|
@hover-submenu-active-background: #171E1F;
|
|
@hover-submenu2-active-arrow: #5E83A0;
|
|
|
|
@nav-item-hover-indicator: #629CC9;
|
|
@nav-item-active-indicator: mix(@nav-item-hover-indicator , lighten(#3382AF , 5%));
|
|
|
|
|
|
@h-nav-item-border-hover: desaturate(darken(@nav-item-hover-indicator , 20%) , 30%);
|
|
@h-nav-item-border-active: desaturate(darken(@nav-item-hover-indicator , 15%) , 25%);
|
|
|
|
@highlight-nav-item-border: #506B7F;
|
|
|
|
@sidebar-toggler-background: #444;
|
|
|
|
|
|
|
|
background-color: @body-background;
|
|
.navbar {
|
|
background: @navbar-background;
|
|
}
|
|
.sidebar {
|
|
background-color: @sidebar-background;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
|
|
.nav-list > li {
|
|
border-color: @nav-item-border;
|
|
> a {
|
|
background-color: @nav-item-background;
|
|
color: @nav-item-color;
|
|
}
|
|
&:hover > a {
|
|
background-color: @nav-item-background-hover;
|
|
color: @nav-item-color-hover;
|
|
}
|
|
|
|
&.open > a , &.open:hover > a {
|
|
color: @nav-item-color-open;
|
|
background-color: @nav-item-background-open;
|
|
}
|
|
|
|
&.active > a , &.active:hover > a {
|
|
background-color: @nav-item-background-active;
|
|
color: @nav-item-color-active;
|
|
}
|
|
}
|
|
|
|
//the hover/active menu blue line highlight
|
|
.nav-list > li:hover:before {
|
|
background-color: @nav-item-hover-indicator;
|
|
}
|
|
.nav-list > li.active:before {
|
|
display: block;
|
|
background-color: @nav-item-active-indicator;
|
|
}
|
|
|
|
.nav-list li.active > a:after {
|
|
border-width: 16px 10px;
|
|
|
|
border-right-color: #FFF;
|
|
-moz-border-right-colors: #FFF;
|
|
|
|
top: 3px;
|
|
right: 0;
|
|
}
|
|
.nav-list > li.active > .submenu li.active > a {
|
|
&:after {
|
|
top: 1px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//submenu
|
|
.nav-list > li {
|
|
.submenu {
|
|
background-color: @submenu-background;
|
|
}
|
|
&.active .submenu {
|
|
background-color: @submenu-background-active;
|
|
}
|
|
|
|
.submenu > li > a {
|
|
border-top-style: solid;
|
|
border-top-color: @submenu-item-border;
|
|
|
|
background-color: @submenu-item-background;
|
|
&:hover {
|
|
background-color: @submenu-item-hover-background;
|
|
}
|
|
}
|
|
|
|
&.active .submenu > li > a {
|
|
border-top-color: @submenu-item-border-active;
|
|
background-color: @submenu-item-background-active;
|
|
|
|
&:hover {
|
|
background-color: @submenu-item-background-active-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.nav-list > li {
|
|
> .submenu {
|
|
border-top-color: @submenu-border;
|
|
}
|
|
&.active > .submenu {
|
|
border-top-color: @submenu-border-active;
|
|
}
|
|
|
|
> .submenu > li {
|
|
> a {
|
|
color: @submenu-item-color;
|
|
}
|
|
&:hover > a {
|
|
color: @submenu-item-hover;
|
|
}
|
|
|
|
&.active > a {
|
|
color: @submenu-item-active;
|
|
background-color: darken(@submenu-item-background-active, 1%);
|
|
}
|
|
}
|
|
}
|
|
|
|
//submenu dotted tree menu
|
|
.nav-list > li > .submenu {
|
|
&:before , & > li:before {
|
|
border-color: @submenu-dotline-border;
|
|
}
|
|
}
|
|
.nav-list > li.active > .submenu {
|
|
&:before , & > li:before {
|
|
border-color: @submenu-active-dotline-border;
|
|
}
|
|
}
|
|
|
|
|
|
//3rd & 4th level menu
|
|
.nav-list > li .submenu li > .submenu li > a {
|
|
color: @submenu-item-color;
|
|
}
|
|
.nav-list > li .submenu li > .submenu li:hover > a {
|
|
color: @submenu-item-hover;
|
|
}
|
|
.nav-list > li .submenu li.open > a ,
|
|
.nav-list > li .submenu li > .submenu > li.open > a {
|
|
color: @nav-item-color-open;
|
|
}
|
|
.nav-list > li .submenu li > .submenu li.active {
|
|
> a {
|
|
color: @3rd-submenu-item;
|
|
}
|
|
&:hover > a {
|
|
color: @3rd-submenu-item-open;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
////////////
|
|
//.active.highlight state
|
|
.enable_highlight_active_skin_1() when(@enable-highlight-active = true) {
|
|
.nav-list > li.active.highlight {
|
|
& , & + li {
|
|
border-color: @highlight-nav-item-border;
|
|
}
|
|
& + li:last-child {
|
|
border-bottom-color: @nav-item-border;
|
|
}
|
|
}
|
|
.nav-list > li.active.highlight > a:after {
|
|
border-right-color: transparent;
|
|
-moz-border-right-colors: none;
|
|
|
|
border-left-color: @nav-item-background-active;
|
|
-moz-border-left-colors: @nav-item-background-active;
|
|
border-width: 20px 0 20px 10px;
|
|
|
|
z-index: 1;
|
|
top: 0;
|
|
right: -10px;
|
|
|
|
display: block;
|
|
}
|
|
}
|
|
.enable_highlight_active_skin_1();
|
|
////////////
|
|
|
|
|
|
//extra
|
|
.sidebar-shortcuts , .sidebar-shortcuts-mini {
|
|
background-color: @shortcuts-background;
|
|
border-color: @shortcuts-border;
|
|
}
|
|
.sidebar > .nav-search {
|
|
background-color: @shortcuts-background;
|
|
border-color: @shortcuts-border;
|
|
}
|
|
.sidebar-toggle {
|
|
background-color: @sidebar-toggle-background;
|
|
border-color: @sidebar-toggle-border;
|
|
|
|
> .@{icon} {
|
|
background-color: @sidebar-toggle-icon-background;
|
|
color: @sidebar-toggle-icon-color;
|
|
border-color: @sidebar-toggle-icon-border;
|
|
}
|
|
}
|
|
|
|
.enable_breadcrumbs_skin_1() when(@enable-breadcrumbs = true) {
|
|
.breadcrumbs {
|
|
border-width: 0;
|
|
background-color: @breadcrumbs-background;
|
|
@media (min-width: @screen-fixed-breadcrumbs) {
|
|
&.breadcrumbs-fixed {
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.enable_breadcrumbs_skin_1();
|
|
|
|
|
|
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
|
.sidebar {
|
|
border-width: 0;
|
|
.box-shadow(none);
|
|
}
|
|
.nav-list li.active > a:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.menu_min_skin_1() {
|
|
.nav-list > li.open > a {
|
|
background-color: @nav-item-background;
|
|
color: @nav-item-color;
|
|
}
|
|
|
|
nav-list > li.active > a:after {
|
|
border-width: 10px 6px;
|
|
top: 8px;
|
|
}
|
|
.nav-list > li.active:hover > a:after {
|
|
border-right-color: @menumin-item-active-background;
|
|
}
|
|
|
|
.nav-list > li.active > a , .nav-list > li.active > a:hover {
|
|
background-color: @nav-item-background-active;
|
|
color: @nav-item-color-active;
|
|
}
|
|
|
|
.nav-list > li:hover > a {
|
|
color: @nav-item-color-hover;
|
|
}
|
|
.nav-list > li > a > .menu-text {
|
|
background-color: @nav-item-background-hover;
|
|
}
|
|
.nav-list > li.active > a > .menu-text {
|
|
background-color: @menumin-item-active-background;
|
|
}
|
|
|
|
.nav-list > li.active:hover > a,
|
|
.nav-list > li.active > a > .menu-text {
|
|
color: @nav-item-color-active;
|
|
}
|
|
//.nav-list > li > a.active ,
|
|
.nav-list > li.open.active > a {
|
|
background-color: @nav-item-background-active;
|
|
}
|
|
.nav-list > li > a > .menu-text,
|
|
.nav-list > li > .submenu {
|
|
border-width: 0;
|
|
border-left: 1px solid @menumin-submenu-border-left;
|
|
.box-shadow(none);
|
|
}
|
|
.nav-list > li.active > a > .menu-text {
|
|
border-left-color: @active-border-highlight;
|
|
}
|
|
|
|
.nav-list > li > .submenu {
|
|
border-top: 1px solid @nav-item-border;
|
|
&:after {
|
|
//the extra pixel @ min.less
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nav-list > li > .submenu {
|
|
background-color: @submenu-background;
|
|
border-top-color: @menumin-submenu-border-top;
|
|
border-top-width: 1px !important;
|
|
}
|
|
.nav-list > li.active > .submenu {
|
|
background-color: @submenu-background-active;
|
|
border-top-color: @menumin-active-submenu-border-top;
|
|
border-left-color: @active-border-highlight;
|
|
}
|
|
|
|
|
|
//-li > .arrow
|
|
.nav-list > li > .arrow {
|
|
//right: 0;
|
|
&:after {
|
|
border-right-color: @nav-item-background-hover;
|
|
-moz-border-right-colors: @nav-item-background-hover;
|
|
}
|
|
&:before {
|
|
border-right-color: darken(@menumin-item-active-background , 8%);
|
|
-moz-border-right-colors: @menumin-item-active-background;
|
|
}
|
|
}
|
|
.nav-list > li.active > .arrow {
|
|
&:after {
|
|
border-right-color: @menumin-item-active-background;
|
|
-moz-border-right-colors: @menumin-item-active-background;
|
|
}
|
|
&:before {
|
|
border-right-color: darken(@nav-item-color-active, 10%);
|
|
-moz-border-right-colors: darken(@nav-item-color-active, 10%);
|
|
}
|
|
}
|
|
|
|
|
|
.sidebar-shortcuts-large {
|
|
background-color: @shortcuts-background;
|
|
.box-shadow(none);
|
|
border-width: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.enable_sidebar_collapse_skin_1() when(@enable-sidebar-collapse = true) {
|
|
.sidebar.menu-min {
|
|
.menu_min_skin_1();
|
|
}
|
|
}
|
|
.enable_sidebar_collapse_skin_1();
|
|
|
|
.enable_minimized_responsive_menu_skin_1() when(@enable-minimized-responsive-menu = true) {
|
|
@media (max-width: @grid-float-breakpoint-max) {
|
|
.sidebar.responsive-min {
|
|
.menu_min_skin_1();
|
|
}
|
|
}
|
|
}
|
|
.enable_minimized_responsive_menu_skin_1();
|
|
|
|
|
|
|
|
|
|
.enable_submenu_hover_skin_1() when(@enable-submenu-hover = true) {
|
|
//.hover submenu
|
|
.nav-list li.hover > .submenu {
|
|
padding-left: 0;
|
|
padding-bottom: 2px;
|
|
padding-right: 0;
|
|
|
|
border-color: @hover-submenu-border;
|
|
}
|
|
//to keep the lines between items
|
|
.nav-list li.hover > .submenu > li > a {
|
|
border-top-width: 1px;
|
|
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
.nav-list li.hover > .submenu > li:first-child > a {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
//3rd & 4th
|
|
.nav-list > li > .submenu li.hover > .submenu {
|
|
padding: 3px 2px;
|
|
}
|
|
|
|
.nav-list > li.active > .submenu li.hover > .submenu {
|
|
border-left-color: @hover-active-submenu-border;//inside an active item but not an active item itself
|
|
}
|
|
.nav-list li.hover.active > .submenu,
|
|
.nav-list li.active > .submenu li.hover.active > .submenu {
|
|
border-left-color: @active-border-highlight;
|
|
}
|
|
.nav-list > li.active > .submenu li.hover > .submenu {
|
|
background-color: @hover-submenu-active-background;
|
|
}
|
|
|
|
//highlight .hover menus when mouse is in submenus
|
|
.hover_highlight_skin_1() {
|
|
.nav-list > li {
|
|
.submenu > li.hover:hover > a {
|
|
background-color: @submenu-item-hover-background;
|
|
}
|
|
&.active .submenu > li.hover:hover > a {
|
|
background-color: @submenu-item-background-active-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//sometimes .hover items are opened in small view, and back in large view we reset the highlight state
|
|
.enable_collpasible_responsive_menu_skin_1_tmp() when(@enable-collapsible-responsive-menu = true) {
|
|
@media only screen and (min-width: @grid-float-breakpoint) {
|
|
.sidebar.navbar-collapse {
|
|
.nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a {
|
|
color: @nav-item-color;
|
|
}
|
|
|
|
.nav-list > li.open.hover:hover > a {
|
|
color: @nav-item-color-hover;
|
|
background-color: @nav-item-background-hover;
|
|
}
|
|
.nav-list > li.active.hover:hover > a {
|
|
color: @nav-item-color-active;
|
|
background-color: @nav-item-background-active;
|
|
}
|
|
|
|
.nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a {
|
|
color: @submenu-item-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//navbar-collapse
|
|
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
|
.sidebar.navbar-collapse {
|
|
//.nav-list li li.hover.active.open > a {
|
|
// background-color: @submenu-item-background-active;
|
|
//}
|
|
.nav-list li.hover > .submenu {
|
|
padding-bottom: 0;
|
|
}
|
|
.nav-list li.hover > .submenu {
|
|
border-top-color: @submenu-border;
|
|
}
|
|
.nav-list li.hover.active > .submenu {
|
|
border-top-color: @submenu-border-active;
|
|
}
|
|
|
|
|
|
|
|
.nav-list li.hover.active > .submenu,
|
|
.nav-list > li > .submenu li.hover > .submenu,
|
|
.nav-list li.active > .submenu li.hover.active > .submenu {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
.nav-list > li > .submenu li.hover > .submenu {
|
|
padding: 0;
|
|
}
|
|
.nav-list li li.hover > .submenu > li:first-child > a {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
|
|
//in wide view when we hover a submenu item, its parent LI > A are highlighted, but not needed in small view
|
|
//so remove "li.hover:hover > a" highlight
|
|
/**.nav-list li li:hover > a {
|
|
background-color: @submenu-item-background;
|
|
}
|
|
.nav-list li li > a:hover,
|
|
.nav-list li li.open > a:hover {
|
|
background-color: @submenu-item-hover-background;
|
|
}
|
|
|
|
.nav-list > li.active li:hover > a {
|
|
background-color: @submenu-item-background-active;
|
|
}
|
|
.nav-list > li.active li > a:hover {
|
|
background-color: @submenu-item-background-active-hover;
|
|
}*/
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.sidebar.navbar-collapse {
|
|
.hover_highlight_skin_1();
|
|
}
|
|
|
|
}
|
|
.enable_collpasible_responsive_menu_skin_1_tmp();
|
|
|
|
.sidebar:not(.navbar-collapse) {
|
|
.hover_highlight_skin_1();
|
|
}
|
|
|
|
|
|
}
|
|
.enable_submenu_hover_skin_1();
|
|
|
|
|
|
|
|
|
|
//-li > .arrow
|
|
//the submenu li > .arrow
|
|
.sub_arrow1_skin_1() {
|
|
> .arrow:after {
|
|
border-right-color: @hover-submenu-arrow;
|
|
-moz-border-right-colors: @hover-submenu-arrow;
|
|
}
|
|
> .arrow:before {
|
|
border-right-color: darken(@hover-submenu-arrow, 10%);
|
|
-moz-border-right-colors: darken(@hover-submenu-arrow, 10%);
|
|
}
|
|
}
|
|
.nav-list li {
|
|
.sub_arrow1_skin_1();
|
|
}
|
|
|
|
.sub_arrow2_skin_2() {
|
|
&.active > .arrow:after {
|
|
border-right-color: @hover-submenu-active-background;
|
|
-moz-border-right-colors: @hover-submenu-active-background;
|
|
}
|
|
&.active > .arrow:before {
|
|
border-right-color: darken(@nav-item-color-active , 10%);
|
|
-moz-border-right-colors: darken(@nav-item-color-active , 10%);
|
|
}
|
|
}
|
|
|
|
//li > .arrow
|
|
.nav-list > li {
|
|
.sub_arrow2_skin_2();
|
|
//submenu of active, but it's not active itself
|
|
&.active > .submenu li.hover > .arrow:before {
|
|
border-right-color: darken(@hover-submenu2-active-arrow , 8%);
|
|
-moz-border-right-colors: lighten(saturate(@hover-submenu2-active-arrow , 20%) , 20%);
|
|
}
|
|
//it is active itself
|
|
&.active > .submenu li.hover.active > .arrow:before {
|
|
border-right-color: @active-border-highlight;
|
|
-moz-border-right-colors: lighten(saturate(@active-border-highlight, 40%), 20%);
|
|
}
|
|
|
|
&.active > .submenu li.hover > .arrow:after {
|
|
border-right-color: @hover-submenu-active-background;
|
|
-moz-border-right-colors: @hover-submenu-active-background;
|
|
}
|
|
}
|
|
|
|
.nav-list li.pull_up {
|
|
.sub_arrow1_skin_1() !important;
|
|
.sub_arrow2_skin_2() !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.enable_old_menu_toggle_button_skin_1() when(@enable-old-menu-toggle-button = true) {
|
|
.main-container .menu-toggler {
|
|
background-color: @sidebar-toggler-background;
|
|
&:before {
|
|
border-top-color: @sidebar-toggler-line-1;
|
|
border-bottom-color: @sidebar-toggler-line-2;
|
|
}
|
|
|
|
&:after {
|
|
border-top-color: @sidebar-toggler-line-3;
|
|
border-bottom-color: @sidebar-toggler-line-4;
|
|
}
|
|
> .toggler-text {
|
|
border-top-color: @sidebar-toggler-background;
|
|
-moz-border-top-colors: @sidebar-toggler-background;
|
|
}
|
|
}
|
|
|
|
&.display {
|
|
@color: desaturate(lighten(@navbar-background, 10%) , 30%);
|
|
background-color: @color;
|
|
|
|
&:before {
|
|
border-top-color: lighten(@sidebar-toggler-line-1 , 15%);
|
|
border-bottom-color: lighten(@sidebar-toggler-line-2 , 15%);
|
|
}
|
|
&:after {
|
|
border-top-color: lighten(@sidebar-toggler-line-3 , 15%);
|
|
border-bottom-color: lighten(@sidebar-toggler-line-4 , 15%);
|
|
}
|
|
|
|
> .toggler-text {
|
|
border-top-color: @color;
|
|
-moz-border-top-colors: @color;
|
|
}
|
|
}
|
|
}
|
|
.enable_old_menu_toggle_button_skin_1();
|
|
|
|
|
|
.navbar .navbar-toggle {
|
|
transition: background-color 0.1s ease 0s;
|
|
background-color: #4D9DCC;
|
|
|
|
&:focus {
|
|
background-color: #4D9DCC;
|
|
}
|
|
&:hover {
|
|
background-color: darken(#4D9DCC , 5%);
|
|
}
|
|
&.display, &[data-toggle=collapse]:not(.collapsed) {
|
|
background-color: darken(#4D9DCC , 10%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width: @screen-sm-min) {
|
|
.container.main-container:before {
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
|
|
//horizontal menu
|
|
.enable_horizontal_menu_skin_1() when(@enable-horizontal-menu = true) {
|
|
@media only screen and (min-width: @grid-float-breakpoint) {
|
|
.sidebar.h-sidebar {
|
|
&:before {
|
|
background-color: spin(lighten(@sidebar-background , 10%) , 10);
|
|
border-bottom-color: lighten(@nav-item-border , 5%);
|
|
}
|
|
|
|
.nav-list {
|
|
border-bottom-width: 0;
|
|
}
|
|
.nav-list > li.active:before {
|
|
display: block;
|
|
}
|
|
.nav-list > li.hover.active > a:after {
|
|
-moz-border-left-colors: none;
|
|
-moz-border-right-colors: none;
|
|
|
|
-moz-border-bottom-colors: #FFF;
|
|
|
|
border-color: transparent transparent #FFF;
|
|
border-width: 8px;
|
|
|
|
top: auto;
|
|
bottom: 0;
|
|
|
|
right: auto;
|
|
left: 50%;
|
|
margin-left: -8px;
|
|
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.nav-list > li.hover.active:hover > a:after {
|
|
display: none;
|
|
}
|
|
|
|
|
|
+ .main-content .breadcrumbs {
|
|
border-color: #E8E8E8;
|
|
}
|
|
|
|
|
|
.nav-list > li {
|
|
&:hover {
|
|
border-color: @h-nav-item-border-hover;
|
|
}
|
|
&.active {
|
|
border-color: @h-nav-item-border-active;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nav-list > li.hover > .submenu {
|
|
border-top-color: @hover-submenu-border;
|
|
}
|
|
.nav-list > li.hover.active > .submenu {
|
|
border-top-color: @active-border-highlight;
|
|
border-left-color: @hover-submenu-border;
|
|
}
|
|
.sidebar-shortcuts-large {
|
|
background-color: @sidebar-background;
|
|
border: 1px solid @hover-submenu-border;
|
|
border-top-color: @active-border-highlight;
|
|
|
|
top: 100%;
|
|
}
|
|
|
|
//-li > .arrow
|
|
.nav-list > li > .arrow {
|
|
&:after {
|
|
border-right-color: transparent;
|
|
-moz-border-right-colors: none;
|
|
|
|
border-bottom-color: @hover-submenu-arrow;
|
|
-moz-border-bottom-colors: @hover-submenu-arrow;
|
|
}
|
|
&:before {
|
|
-moz-border-right-colors: none;
|
|
border-right-color: transparent;
|
|
|
|
border-bottom-color: darken(@hover-submenu-arrow, 12%);
|
|
-moz-border-bottom-colors: darken(@hover-submenu-arrow, 8%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nav-list > li.active > .arrow , .sidebar-shortcuts-large {
|
|
&:before {
|
|
border-right-color: transparent;
|
|
-moz-border-right-colors: none;
|
|
|
|
border-bottom-color: darken(@nav-item-color-active , 10%);
|
|
-moz-border-bottom-colors: darken(@nav-item-color-active , 30%);
|
|
}
|
|
&:after {
|
|
border-right-color: transparent;
|
|
-moz-border-right-colors: none;
|
|
|
|
border-bottom-color: @hover-submenu-active-background;
|
|
-moz-border-bottom-colors: @hover-submenu-active-background;
|
|
}
|
|
}
|
|
.sidebar-shortcuts-large:after {
|
|
border-bottom-color: @sidebar-background;
|
|
-moz-border-bottom-colors: @sidebar-background;
|
|
}
|
|
|
|
|
|
.nav-list > li.highlight.active > a:before {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
.enable_horizontal_menu_skin_1();
|
|
|
|
|
|
|
|
.sidebar-scroll {
|
|
.sidebar-shortcuts {
|
|
border-bottom-color: lighten(@nav-item-border , 5%);
|
|
}
|
|
.sidebar-toggle {
|
|
border-top-color: lighten(@nav-item-border , 5%);
|
|
}
|
|
|
|
.scroll-track {
|
|
background-color: transparent;
|
|
}
|
|
.scroll-bar {
|
|
background-color: #CCC;
|
|
background-color: rgba(255,255,255,0.45);
|
|
}
|
|
}
|
|
.scrollout .scroll-track {
|
|
background-color: transparent;
|
|
}
|
|
.scrollout .scroll-bar {
|
|
background-color: #CCC;
|
|
background-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
|
|
.navbar.navbar-collapse {
|
|
background-color: transparent;
|
|
&:before , .navbar-container {
|
|
background: @navbar-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}//.skin-1
|