update
This commit is contained in:
hanjian
@@ -0,0 +1 @@
|
||||
//DON'T REMOVE
|
||||
@@ -0,0 +1,586 @@
|
||||
.no-skin {
|
||||
.navbar .navbar-toggle {
|
||||
background-color: #75B3D7;
|
||||
&:focus {
|
||||
background-color: #75B3D7;
|
||||
border-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#75B3D7 , 5%);
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
&.display, &[data-toggle=collapse]:not(.collapsed) {
|
||||
background-color: darken(#75B3D7 , 10%);
|
||||
box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: @sidebar-background;
|
||||
border-style: solid;
|
||||
border-color: @sidebar-border;
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.nav-list .open > a {
|
||||
& , &:hover, &:focus {
|
||||
background-color: @nav-item-background-open;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li {
|
||||
border-color: @nav-item-border;
|
||||
> a {
|
||||
background-color: @nav-item-background;
|
||||
color: @nav-item-color;
|
||||
|
||||
&:focus {
|
||||
background-color: @nav-item-background;
|
||||
color: @nav-item-color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > a {
|
||||
background-color: @nav-item-background-hover;
|
||||
color: @nav-item-color-hover;
|
||||
}
|
||||
|
||||
&.open > a {
|
||||
background-color: @nav-item-background-open;
|
||||
color: @nav-item-color-focus;
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
font-weight: bold;
|
||||
color: @nav-item-color-active;
|
||||
& , &:hover, &:focus {
|
||||
background-color: @nav-item-background-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//submenu
|
||||
.nav-list > li .submenu {
|
||||
background-color: @submenu-background;
|
||||
border-color: @submenu-border;
|
||||
|
||||
> li > a {
|
||||
border-top-color: @submenu-item-border;
|
||||
background-color: @submenu-item-background;
|
||||
color: @submenu-item-color;
|
||||
|
||||
&:hover {
|
||||
color: @submenu-item-color-hover;
|
||||
background-color: @submenu-item-background-hover;
|
||||
}
|
||||
}
|
||||
> li.active > a {
|
||||
color: @nav-item-color-active;
|
||||
> .menu-icon {
|
||||
color: @submenu-item-icon-active;
|
||||
}
|
||||
}
|
||||
> li.active.open > a > .menu-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
> li.active.hover > a.dropdown-toggle > .menu-icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> li.active:not(.open) > a {
|
||||
background-color: @submenu-item-background-active;
|
||||
&:hover {
|
||||
background-color: @submenu-item-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list > li > .submenu {
|
||||
.open > a, .open > a:hover, .open > a:focus {
|
||||
border-color: @submenu-item-border;
|
||||
}
|
||||
|
||||
li > .submenu > li a{
|
||||
color: lighten(@submenu-item-color , 8%);
|
||||
&:hover {
|
||||
color: @3rd-level-item-color-hover;
|
||||
background-color: @3rd-level-item-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
li.open > a {
|
||||
color: @3rd-level-item-color-hover;
|
||||
}
|
||||
li > .submenu li.open > a , li > .submenu li.active > a {
|
||||
color: @3rd-level-item-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
//the tree line
|
||||
.nav-list > li {
|
||||
> .submenu:before,
|
||||
> .submenu > li:before {
|
||||
border-color: @submenu-tree-line-color;
|
||||
}
|
||||
&.active > .submenu:before,
|
||||
&.active > .submenu > li:before {
|
||||
border-color: @submenu-tree-line-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//extra
|
||||
.sidebar-toggle {
|
||||
background-color: @sidebar-toggle-background;
|
||||
border-color: @sidebar-toggle-border;
|
||||
|
||||
> .@{icon} {
|
||||
border-color: @sidebar-toggle-icon-border;
|
||||
color: @sidebar-toggle-icon-color;
|
||||
background-color: @sidebar-toggle-icon-background;
|
||||
}
|
||||
}
|
||||
.sidebar-shortcuts {
|
||||
background-color: @shortcuts-background;
|
||||
}
|
||||
.sidebar-fixed .sidebar-shortcuts {
|
||||
border-color: @shortcuts-border;
|
||||
}
|
||||
.sidebar-shortcuts-mini {
|
||||
background-color: @submenu-background;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//-li > .arrow
|
||||
.nav-list li > .arrow {
|
||||
&:before {
|
||||
border-right-color: #B8B8B8;
|
||||
-moz-border-right-colors: #B8B8B8;
|
||||
|
||||
border-width: 10px 10px 10px 0;
|
||||
//because border-width: 10px in firefox doesn't look good
|
||||
//but on other skins, it has a bad edge on firefox
|
||||
left: -11px;
|
||||
}
|
||||
&:after {
|
||||
border-right-color: @submenu-background;
|
||||
-moz-border-right-colors: @submenu-background;
|
||||
|
||||
border-width: 10px 10px 10px 0;
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
.nav-list > li.pull_up > .arrow {
|
||||
&:after {
|
||||
border-right-color: @submenu-background !important;
|
||||
-moz-border-right-colors: @submenu-background !important;
|
||||
|
||||
border-width: 10px 10px 10px 0 !important;//to override .menu-min
|
||||
left: -10px !important;
|
||||
}
|
||||
&:before {
|
||||
border-width: 10px 10px 10px 0 !important;
|
||||
left: -11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//active state
|
||||
.nav-list li.active > a:after {
|
||||
border-right-color: @nav-item-color-active;
|
||||
-moz-border-right-colors: @nav-item-color-active;
|
||||
}
|
||||
//the border on right of active item
|
||||
.nav-list > li.active:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: -1px;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
||||
border: 2px solid;
|
||||
border-width: 0 2px 0 0;
|
||||
border-color: @nav-item-color-active
|
||||
}
|
||||
.sidebar-scroll .nav-list > li.active:after {
|
||||
//so that its inside sidebar
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive .nav-list > li.active.open > a:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//menu min
|
||||
.menu_min_no_skin() {
|
||||
.nav-list > li > a {
|
||||
> .menu-text {
|
||||
background-color: @menumin-text-background;
|
||||
.box-shadow(@menumin-shadow1);
|
||||
border-color: @menumin-border;
|
||||
}
|
||||
&.dropdown-toggle > .menu-text {
|
||||
.box-shadow(@menumin-shadow2);
|
||||
}
|
||||
}
|
||||
.nav-list > li {
|
||||
&.active > .submenu {
|
||||
border-left-color: @submenu-border-active;
|
||||
}
|
||||
}
|
||||
.nav-list > li > .submenu {
|
||||
background-color: @submenu-background;
|
||||
border: 1px solid @menumin-border;
|
||||
border-top-color: lighten(@menumin-border , 10%);
|
||||
.box-shadow(@menumin-shadow2);
|
||||
}
|
||||
|
||||
//-li > .arrow
|
||||
.nav-list > li {
|
||||
> .arrow:after {
|
||||
border-right-color: @menumin-text-background;
|
||||
-moz-border-right-colors: @menumin-text-background;
|
||||
|
||||
border-width: 8px 8px 8px 0;
|
||||
left: -8px;
|
||||
}
|
||||
> .arrow:before {
|
||||
border-width: 8px 8px 8px 0;
|
||||
left: -9px;
|
||||
}
|
||||
|
||||
&.active > .arrow:before {
|
||||
border-right-color: darken(@submenu-border-active , 11%);
|
||||
-moz-border-right-colors: darken(@submenu-border-active , 11%);
|
||||
}
|
||||
&.active > a > .menu-text {
|
||||
border-left-color: @submenu-border-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-shortcuts-large {
|
||||
background-color: @submenu-background;
|
||||
.box-shadow(@menumin-shadow1);
|
||||
border-color: @menumin-border;
|
||||
}
|
||||
.sidebar-toggle > .@{icon} {
|
||||
border-color: darken(@sidebar-toggle-icon-border, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.enable_sidebar_collapse_no_skin() when(@enable-sidebar-collapse = true) {
|
||||
.sidebar.menu-min {
|
||||
.menu_min_no_skin();
|
||||
}
|
||||
}
|
||||
.enable_sidebar_collapse_no_skin();
|
||||
|
||||
.enable_minimized_responsive_menu_no_skin() when(@enable-minimized-responsive-menu = true) {
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive-min {
|
||||
.menu_min_no_skin();
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_minimized_responsive_menu_no_skin();
|
||||
|
||||
|
||||
|
||||
|
||||
.enable_hover_submenu_no_skin() when(@enable-submenu-hover = true) {
|
||||
//.hover menu
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.nav-list li.hover {
|
||||
> .submenu {
|
||||
.box-shadow(@menumin-shadow1);
|
||||
border-color: @hover-submenu-border;
|
||||
|
||||
> li.active > a {
|
||||
background-color: @hover-submenu-background-active;
|
||||
}
|
||||
|
||||
> li:hover > a {
|
||||
background-color: @hover-submenu-item-background-hover;
|
||||
color: @hover-submenu-item-color-hover;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.enable_collapsible_responsive_hover_menu_no_skin() when(@enable-collapsible-responsive-menu = true) {
|
||||
@media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.navbar-collapse {
|
||||
.nav-list li li.hover.active.open > a {
|
||||
background-color: @nav-item-background-active;
|
||||
}
|
||||
//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:hover > a {
|
||||
background-color: @submenu-item-background;
|
||||
}
|
||||
//and instead highlight "li.hover > a:hover"
|
||||
.nav-list li li.hover > a:hover,
|
||||
.nav-list li li.hover.open > a:hover,
|
||||
.nav-list li li.hover.open.active > a:hover {
|
||||
background-color: @submenu-item-background-hover;
|
||||
}
|
||||
|
||||
//active submenu item icon is red
|
||||
.nav-list > li .submenu > li.active.hover > a.dropdown-toggle > .menu-icon {
|
||||
color: @submenu-item-icon-active;
|
||||
}
|
||||
//active submenu item icon inherits color
|
||||
.nav-list > li .submenu > li.active.open.hover > a.dropdown-toggle > .menu-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//sometimes .hover items are opened in small view, and back in large view we reset the highlight state
|
||||
@media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
|
||||
.sidebar.navbar-collapse {
|
||||
.nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a {
|
||||
color: @nav-item-color;
|
||||
> .arrow {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.nav-list > li.open.hover:hover > a {
|
||||
background-color: @nav-item-background-hover;
|
||||
}
|
||||
|
||||
.nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a {
|
||||
color: @submenu-item-color;
|
||||
> .arrow {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//@media
|
||||
//reset .hover to normal
|
||||
@media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.navbar-collapse {
|
||||
.nav-list li.hover > .submenu {
|
||||
border-top-color: @submenu-border;
|
||||
background-color: @submenu-background;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list li.hover > .submenu > li.active:not(.open) > a {
|
||||
background-color: @submenu-item-background-active;
|
||||
&:hover {
|
||||
background-color: @submenu-item-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_collapsible_responsive_hover_menu_no_skin();
|
||||
|
||||
|
||||
}
|
||||
.enable_hover_submenu_no_skin();
|
||||
|
||||
|
||||
|
||||
|
||||
//horizontal
|
||||
.enable_horizontal_menu_no_skin() when(@enable-horizontal-menu = true) {
|
||||
@media only screen and (min-width: @grid-float-breakpoint) {
|
||||
.sidebar.h-sidebar {
|
||||
background-color: @h-sidebar-background;
|
||||
&:before {
|
||||
background-color: @h-sidebar-preground;
|
||||
.box-shadow(@h-sidebar-preshadow);
|
||||
}
|
||||
|
||||
.nav-list > li {
|
||||
&:hover {
|
||||
border-color: @h-nav-item-border-hover;
|
||||
}
|
||||
&.active {
|
||||
border-color: @h-nav-item-border-active;
|
||||
}
|
||||
}
|
||||
.nav-list > li.active:before {
|
||||
background-color: @nav-item-color-active;//#2B7DBC;
|
||||
}
|
||||
|
||||
//a white line on bottom of active item to cover the blue separator
|
||||
.nav-list > li.active > a:after {
|
||||
border-width: 0 0 3px 0;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #FFF;
|
||||
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
bottom: -3px;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-shortcuts-large {
|
||||
background-color: #FFF;
|
||||
border-color: #CCC;
|
||||
.box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.1)");
|
||||
}
|
||||
.sidebar-shortcuts-large:after {
|
||||
border-bottom-color: #FFF;
|
||||
-moz-border-bottom-colors: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.h-sidebar {
|
||||
.nav-list > li.hover {
|
||||
> .submenu {
|
||||
border-color: @hover-submenu-border;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list > li.hover {
|
||||
> .arrow:after {
|
||||
border-color: transparent;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
|
||||
border-bottom-color: #FFF;
|
||||
-moz-border-bottom-colors: #FFF;
|
||||
}
|
||||
> .arrow:before {
|
||||
border-color: transparent;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
|
||||
-moz-border-bottom-colors: #B8B8B8;
|
||||
border-bottom-color: #B8B8B8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_horizontal_menu_no_skin();
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar {
|
||||
border-width: 0 1px 1px 0;
|
||||
border-top-color: lighten(@sidebar-border , 4%);
|
||||
}
|
||||
.menu-toggler + .sidebar.responsive {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.sidebar.responsive-min {
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.sidebar.navbar-collapse {
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px !important;//to override .rtl's
|
||||
border-bottom-color: @sidebar-border;
|
||||
.box-shadow(~"0 2px 2px rgba(0, 0, 0, 0.1)") !important;//to override .rtl's
|
||||
|
||||
&.menu-min {
|
||||
.nav-list > li > .submenu {
|
||||
background-color: @submenu-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//@media
|
||||
|
||||
|
||||
|
||||
.sidebar-scroll {
|
||||
.sidebar-shortcuts {
|
||||
border-bottom-color: darken(@nav-item-border , 3%);
|
||||
}
|
||||
.sidebar-toggle {
|
||||
border-top-color: darken(@nav-item-border , 3%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.enable_old_menu_toggle_button_no_skin() 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_old_menu_toggle_button_no_skin();
|
||||
|
||||
|
||||
|
||||
//disabled state
|
||||
.nav-list > li.disabled:before {
|
||||
display: none !important;
|
||||
}
|
||||
.nav-list > li.disabled > a {
|
||||
background-color: darken(@nav-item-background, 5%) !important;
|
||||
color: lighten(@nav-item-color, 5%) !important;
|
||||
}
|
||||
|
||||
|
||||
.nav-list li .submenu > li.disabled > a,
|
||||
.nav-list li.disabled .submenu > li > a {
|
||||
background-color: darken(@submenu-item-background, 5%) !important;
|
||||
color: desaturate(lighten(@submenu-item-color, 10%), 10%) !important;
|
||||
cursor: not-allowed !important;
|
||||
> .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/**
|
||||
.nav-list > li.disabled.active:after {
|
||||
border-color: #999;
|
||||
}
|
||||
.nav-list li.disabled li.active > a:after,
|
||||
.nav-list li.active.disabled > a:after {
|
||||
-moz-border-right-colors: #999 !important;
|
||||
border-right-color: #999 !important;
|
||||
}
|
||||
*/
|
||||
|
||||
}//.no-skin
|
||||
|
||||
|
||||
//hover highlight
|
||||
@import "../sidebar/highlight.less";
|
||||
@@ -0,0 +1,890 @@
|
||||
|
||||
/* 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();
|
||||
|
||||
|
||||
|
||||
//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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enable_submenu_hover_skin_1() when(@enable-submenu-hover = true) {
|
||||
//.hover submenu
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.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;
|
||||
}
|
||||
}//@media
|
||||
|
||||
|
||||
|
||||
|
||||
//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: max(@screen-hover-menu, @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 (min-width: @screen-hover-menu) 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();
|
||||
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.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 {
|
||||
background-color: #4D9DCC;
|
||||
|
||||
&:focus {
|
||||
background-color: #4D9DCC;
|
||||
border-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#4D9DCC , 5%);
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
&.display, &[data-toggle=collapse]:not(.collapsed) {
|
||||
background-color: darken(#4D9DCC , 10%);
|
||||
box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.nav-list > li.disabled:before {
|
||||
display: none !important;
|
||||
}
|
||||
.nav-list > li.disabled > a {
|
||||
background-color: #333 !important;
|
||||
color: #AAA !important;
|
||||
}
|
||||
|
||||
.nav-list li .submenu > li.disabled > a,
|
||||
.nav-list li.disabled .submenu > li > a {
|
||||
background-color: #444 !important;
|
||||
color: #A0A0A0 !important;
|
||||
cursor: not-allowed !important;
|
||||
> .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nav-list > li.disabled .submenu > li > a {
|
||||
border-top-color: #505050;
|
||||
}
|
||||
|
||||
|
||||
}//.skin-1
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,769 @@
|
||||
//skin-3 should be used along with "no-skin" because of some overlappings
|
||||
//<body class="no-skin skin-3">
|
||||
|
||||
/* skin 3 */
|
||||
.skin-3 {
|
||||
@body-background: #BBB;
|
||||
@navbar-background: #404040;
|
||||
@sidebar-background: #DBDBDB;
|
||||
@sidebar-border: #A4C6DD;
|
||||
|
||||
@nav-item-background: #E3E3E3;
|
||||
@nav-item-color: #5A5A5A;
|
||||
@nav-item-border: #F2F2F2;
|
||||
|
||||
//different states
|
||||
@nav-item-color-hover: mix(#1963AA , #4D96CB);
|
||||
@nav-item-background-hover: #FFF;
|
||||
|
||||
@nav-item-color-open: @nav-item-color-hover;
|
||||
@nav-item-background-open: #F8F8F8;
|
||||
|
||||
@nav-item-background-active: lighten(saturate(#EEF8FF , 10%), 1%);
|
||||
@nav-item-color-active: #4D96CB;
|
||||
|
||||
@nav-item-border-active: #A4C6DD;
|
||||
@nav-item-border-hover: desaturate(darken(@nav-item-border-active , 5%) , 5%);
|
||||
|
||||
|
||||
//submenu colors
|
||||
@submenu-background: #FFF;
|
||||
@submenu-border: #E5E5E5;
|
||||
|
||||
@submenu-background-active: #FFF; //darken(@submenu-background-active , 2.5%);
|
||||
@submenu-border-active: #E5E5E5;
|
||||
|
||||
@submenu-item-color: #616161;
|
||||
@submenu-item-border: #E4E4E4;
|
||||
|
||||
@submenu-item-background: transparent;
|
||||
@submenu-item-background-hover: #F1F5F9;
|
||||
@submenu-item-background-active: #F5F7FA;
|
||||
|
||||
|
||||
|
||||
@breadcrumbs-background: #E7F2F8;
|
||||
|
||||
@sidebar-toggle-icon-color: #FFF;
|
||||
@sidebar-toggle-background: #D0D0D0;
|
||||
@shortcuts-background: @sidebar-background;
|
||||
@shortcuts-border: @nav-item-border;
|
||||
|
||||
|
||||
|
||||
background-color: @body-background;
|
||||
|
||||
//add a lined-paper like effect
|
||||
.main-container {
|
||||
&:before {
|
||||
background: #FFF;
|
||||
|
||||
background: -moz-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
|
||||
background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEF5FA), color-stop(4%, #FFF)) 0 4px;
|
||||
background: -webkit-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
|
||||
background: -o-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
|
||||
background: -ms-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
|
||||
background: linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
|
||||
|
||||
-moz-background-size: 100% 26px;
|
||||
-webkit-background-size: 100% 26px;
|
||||
-o-background-size: 100% 26px;
|
||||
-ms-background-size: 100% 26px;
|
||||
background-size: 100% 26px;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
&.container:before {
|
||||
.box-shadow(~"0 0 0 1px rgba(50, 100, 200, 0.1)");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background: @navbar-background;
|
||||
}
|
||||
.sidebar {
|
||||
background-color: @sidebar-background;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 0 1px 0 0;
|
||||
border-color: @sidebar-border;
|
||||
}
|
||||
|
||||
.nav-list > li {
|
||||
border-color: @nav-item-border !important;
|
||||
> a {
|
||||
background-color: @nav-item-background;
|
||||
color: @nav-item-color;
|
||||
|
||||
> .arrow {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: lighten(@nav-item-background , 2%);
|
||||
color: @nav-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @nav-item-border-hover !important;
|
||||
& + li {
|
||||
border-top-color: @nav-item-border-hover !important;
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
border-color: @nav-item-border-hover !important;
|
||||
& + li {
|
||||
border-top-color: @nav-item-border-hover !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
border-color: @nav-item-border-active !important;
|
||||
& + li {
|
||||
border-color: @nav-item-border-active !important;
|
||||
&:last-child {
|
||||
border-bottom-color: @nav-item-border !important;
|
||||
&:hover {
|
||||
border-bottom-color: @nav-item-border-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&: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;
|
||||
}
|
||||
&.open > a > .arrow {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.active > a , &.active.highlight > a {
|
||||
background-color: @nav-item-background-active !important;
|
||||
color: @nav-item-color-active !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li:hover:before , .nav-list > li.open:before {
|
||||
display: block;
|
||||
background-color: saturate(lighten(mix(#4D96CB , #444) , 10%), 10%) !important;
|
||||
}
|
||||
.nav-list > li.active:before {
|
||||
display: block;
|
||||
background-color: #4D96CB !important;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background-color:transparent;
|
||||
//so that .main-content's background can be seen
|
||||
}
|
||||
.infobox-container .infobox:not(.infobox-dark) {
|
||||
border-style: solid;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-list > li.active:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-list li.active > a:after {
|
||||
right: -1px;
|
||||
top: 3px;
|
||||
|
||||
border-width: 16px 10px;
|
||||
border-right-color: #FFF;
|
||||
-moz-border-right-colors: #FFF;
|
||||
}
|
||||
.nav-list li.active > a:before {
|
||||
display: block;
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 3px;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
|
||||
border-right-color: darken(@sidebar-border , 5%);
|
||||
-moz-border-right-colors: darken(@sidebar-border , 5%);
|
||||
|
||||
border-width: 16px 10px;
|
||||
}
|
||||
|
||||
.nav-list > li.active > .submenu li.active > a {
|
||||
&:before, &:after {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-list li.active.open > a:before {
|
||||
display: none;
|
||||
}
|
||||
.nav-list li.active:not(.open) li.active > a:before {
|
||||
//hide the active caret when parent submenu is being closed (not open)
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.nav-list > li.highlight.active > a:after {
|
||||
border-left-color: @nav-item-background-active;
|
||||
-moz-border-left-colors: @nav-item-background-active;
|
||||
}
|
||||
.nav-list > li.highlight.active > a:before {
|
||||
border-left-color: darken(@sidebar-border , 5%);
|
||||
-moz-border-left-colors: darken(@sidebar-border , 5%);
|
||||
}
|
||||
|
||||
|
||||
.nav-list li > .arrow:before {
|
||||
border-right-color: darken(#A4C6DD , 10%);
|
||||
-moz-border-right-colors: darken(#A4C6DD , 10%);
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li .submenu > li {
|
||||
&.active:not(.open) > a {
|
||||
background-color: @submenu-item-background-active;
|
||||
&:hover {
|
||||
background-color: @submenu-item-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive .nav-list > li.active.open > a:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.enable_submenu_hover_skin_3() when(@enable-submenu-hover = true) {
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.nav-list li.hover > .submenu {
|
||||
border-color: darken(@sidebar-border , 3%);
|
||||
}
|
||||
}//@media
|
||||
@media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
|
||||
.nav-list li.hover {
|
||||
&.active > a:before {
|
||||
display: block;
|
||||
}
|
||||
.submenu > li.active > a:before {
|
||||
display: none ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_submenu_hover_skin_3();
|
||||
|
||||
.menu_min_skin_3() {
|
||||
.nav-list > li > a > .menu-text {
|
||||
background-color: lighten(#EDF3F7 , 1%);
|
||||
border-color: #A4C6DD;
|
||||
}
|
||||
.nav-list > li.active > a > .menu-text {
|
||||
background-color: #EDF3F7;
|
||||
}
|
||||
.nav-list > li > .submenu {
|
||||
border-color: #A4C6DD;
|
||||
border-top-color: #C9DAE5;
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li.active > .arrow:before {
|
||||
border-right-color: #709FBF;
|
||||
-moz-border-right-colors: #709FBF;
|
||||
}
|
||||
.nav-list > li > .arrow:after {
|
||||
border-right-color: #EDF3F7;
|
||||
-moz-border-right-colors: #EDF3F7;
|
||||
}
|
||||
|
||||
|
||||
.nav-list li.active > a {
|
||||
&:after , &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nav-list > li.active > a {
|
||||
&:after, &:before {
|
||||
display: block;
|
||||
border-width: 9px 7px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.enable_responsive_menu_tmp_in1() when(@enable-responsive-menu = true) {
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
&.responsive .nav-list > li.active > a {
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_responsive_menu_tmp_in1();
|
||||
|
||||
|
||||
.nav-list > li.active.highlight > a {
|
||||
&:after, &:before {
|
||||
border-width: 20px 0 21px 10px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.nav-list > li.active:hover > a{
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-shortcuts-large {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
||||
.enable_sidebar_collapse_skin_3() when(@enable-sidebar-collapse = true) {
|
||||
.sidebar.menu-min {
|
||||
.menu_min_skin_3();
|
||||
}
|
||||
}
|
||||
.enable_sidebar_collapse_skin_3();
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.responsive {
|
||||
border-bottom-width: 1px !important;
|
||||
}
|
||||
.sidebar.navbar-collapse {
|
||||
border-bottom-color: #A4C6DD;
|
||||
}
|
||||
|
||||
.nav-list li.active > a {
|
||||
&:after , &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.enable_minimized_responsive_menu_skin_3() when(@enable-minimized-responsive-menu = true) {
|
||||
.sidebar.responsive-min {
|
||||
.menu_min_skin_3();
|
||||
}
|
||||
.sidebar.responsive-max {
|
||||
border-width: 0 1px 1px 0;
|
||||
.nav-list li.hover.active > a:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_minimized_responsive_menu_skin_3();
|
||||
|
||||
|
||||
.sidebar.navbar-collapse .sidebar-shortcuts-large {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//extra
|
||||
.sidebar-shortcuts , .sidebar-shortcuts-mini {
|
||||
background-color: @shortcuts-background;
|
||||
//border-color: @shortcuts-border;
|
||||
}
|
||||
.sidebar-shortcuts-large > .btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
.sidebar > .nav-search {
|
||||
background-color: @shortcuts-background;
|
||||
//border-color: @shortcuts-border;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
background-color: @sidebar-toggle-background;
|
||||
border-color: @nav-item-border;
|
||||
//border-width: 0 0 1px;
|
||||
|
||||
&:before {
|
||||
border-color: @nav-item-border;
|
||||
}
|
||||
|
||||
> .@{icon} {
|
||||
background-color: @sidebar-toggle-icon-color;
|
||||
background-color:#FFF;
|
||||
border-color:#999;
|
||||
color:#999;
|
||||
}
|
||||
}
|
||||
|
||||
.enable_collapsible_responsive_menu_skin_3_tmpp() when(@enable-collapsible-responsive-menu = true) {
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.navbar-collapse {
|
||||
.nav-list > li:before {
|
||||
height: @nav-item-height + 4 !important;
|
||||
}
|
||||
.sidebar-shortcuts {
|
||||
padding: 0 0 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_collapsible_responsive_menu_skin_3_tmpp();
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: @screen-hover-menu) {
|
||||
.nav-list > li.active.hover:hover > a.dropdown-toggle:after,
|
||||
.nav-list > li.active.hover:hover > a.dropdown-toggle:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.enable_old_menu_toggle_button_skin_3() when(@enable-old-menu-toggle-button = true) {
|
||||
.main-container .menu-toggler {
|
||||
background-color: #62A8D1;
|
||||
color: #FFF;
|
||||
|
||||
&:before, &:after {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
> .toggler-text {
|
||||
border-top-color: #62A8D1;
|
||||
-moz-border-top-colors: #62A8D1;
|
||||
&:after {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_old_menu_toggle_button_skin_3();
|
||||
|
||||
|
||||
.navbar .navbar-toggle {
|
||||
//box-shadow: none;
|
||||
//border-radius: 0;
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
|
||||
transition: background-color 0.1s ease 0s;
|
||||
background-color: #648CAE;
|
||||
|
||||
&:focus {
|
||||
background-color: #648CAE;
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#648CAE , 4%);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
&.display, &[data-toggle=collapse]:not(.collapsed) {
|
||||
background-color: darken(#648CAE , 8%);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.enable_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
|
||||
.breadcrumbs {
|
||||
border-width: 0;
|
||||
background-color: @breadcrumbs-background;
|
||||
border-radius: 4px;
|
||||
|
||||
margin: 8px 8px 0;
|
||||
}
|
||||
|
||||
.navbar:not(.navbar-fixed-top):not(.h-navbar) + .main-container .breadcrumbs {
|
||||
margin-top: auto;//margin-top moves .sidebar down as well
|
||||
top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.breadcrumbs {
|
||||
margin: 5px 5px 0;
|
||||
}
|
||||
.navbar:not(.navbar-fixed-top):not(.h-navbar) + .main-container .breadcrumbs,
|
||||
.navbar:not(.navbar-fixed-top) + .main-container .breadcrumbs {
|
||||
margin-top: auto;//margin-top moves .sidebar down as well
|
||||
top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
|
||||
margin: 0;
|
||||
top: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.enable_fixed_breadcrumbs_skin_3() when(@enable-fixed-breadcrumbs = true) {
|
||||
@media (min-width: @screen-fixed-breadcrumbs) {
|
||||
.breadcrumbs.breadcrumbs-fixed + .page-content {
|
||||
padding-top: @page-content-padding-top + @breadcrumb-height + 8;
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) {
|
||||
.breadcrumbs.breadcrumbs-fixed + .page-content {
|
||||
padding-top: @page-content-padding-top + @breadcrumb-height + 5;
|
||||
}
|
||||
|
||||
.menu-toggler + .sidebar.reponsive + .main-content .breadcrumbs.breadcrumbs-fixed + .page-content {
|
||||
padding-top: @page-content-padding-top + @breadcrumb-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.enable_container_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
|
||||
//because breadcrumbs has 8px margin on left and right
|
||||
.container.main-container {
|
||||
@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs, @screen-compact-menu)) and (max-width: @grid-float-breakpoint-max) {
|
||||
.sidebar.compact + .main-content .breadcrumbs-fixed {
|
||||
width: @container-sm - 10;
|
||||
}
|
||||
}
|
||||
@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
|
||||
.breadcrumbs-fixed {
|
||||
width: @container-sm - 10;
|
||||
}
|
||||
.sidebar.menu-min + .main-content .breadcrumbs-fixed {
|
||||
width: @container-sm - 10;
|
||||
}
|
||||
|
||||
.sidebar.responsive-min + .main-content .breadcrumbs-fixed {
|
||||
width: @container-sm - @sidebar-min-width - 10;
|
||||
}
|
||||
}
|
||||
@media (min-width: max(@screen-compact-menu, @screen-md-min)) {
|
||||
.sidebar.compact + .main-content .breadcrumbs-fixed {
|
||||
width: @container-md - @sidebar-compact-width - 16;
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
.breadcrumbs-fixed {
|
||||
width: @container-md;
|
||||
}
|
||||
.sidebar + .main-content .breadcrumbs-fixed {
|
||||
width: @container-md - @sidebar-width - 16;
|
||||
}
|
||||
.sidebar.menu-min + .main-content .breadcrumbs-fixed {
|
||||
width: @container-md - @sidebar-min-width - 16;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
|
||||
.sidebar.compact + .main-content .breadcrumbs-fixed {
|
||||
width: @container-lg - @sidebar-compact-width - 16;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.breadcrumbs-fixed {
|
||||
width: @container-lg - 16;
|
||||
}
|
||||
.sidebar + .main-content .breadcrumbs-fixed {
|
||||
width: @container-lg - @sidebar-width - 16;
|
||||
}
|
||||
.sidebar.menu-min + .main-content .breadcrumbs-fixed {
|
||||
width: @container-lg - @sidebar-min-width - 16;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.enable_container_breadcrumbs_skin_3();
|
||||
}
|
||||
.enable_fixed_breadcrumbs_skin_3();
|
||||
|
||||
}
|
||||
.enable_breadcrumbs_skin_3();
|
||||
|
||||
|
||||
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
||||
.nav-list li.active > a:before, .nav-list li.active > a:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-shortcuts-large > .btn {
|
||||
line-height: 26px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.sidebar-shortcuts-mini {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
.sidebar-shortcuts-mini > .btn {
|
||||
border-width: 1px !important;
|
||||
opacity: 1;
|
||||
padding: 7px !important;
|
||||
margin: 1px 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.enable_horizontal_menu_skin_3() when(@enable-horizontal-menu = true) {
|
||||
@media only screen and (min-width: @grid-float-breakpoint) {
|
||||
//top menu
|
||||
.sidebar.h-sidebar {
|
||||
background-color: @nav-item-background;
|
||||
&:before {
|
||||
background-color: #CBD0D6;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-shortcuts-mini > .btn {
|
||||
padding: 8px !important;
|
||||
}
|
||||
.sidebar-shortcuts-large {
|
||||
background-color: #FFF;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
+ .main-content .breadcrumbs {
|
||||
border-color: desaturate(darken(@breadcrumbs-background , 5%) , 5%);
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.nav-list > li.hover > .submenu {
|
||||
//border-color: #CCC;
|
||||
border-color: #A4C6DD;
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li {
|
||||
border-color: @nav-item-border;
|
||||
&:hover {
|
||||
border-color: @nav-item-border-hover;
|
||||
}
|
||||
&.active {
|
||||
border-color: @nav-item-border-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.nav-list > li.active > a:after {
|
||||
left: 0;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -2px;
|
||||
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
|
||||
border-color: transparent;
|
||||
-moz-border-right-colors: none;
|
||||
|
||||
border-width: 8px 7px !important;
|
||||
border-bottom-color: #FFF;
|
||||
-moz-border-bottom-colors: #FFF;
|
||||
}
|
||||
.nav-list > li.active > a:before {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: auto;
|
||||
right: auto;
|
||||
|
||||
bottom: -1px;
|
||||
|
||||
left: 50%;
|
||||
margin-left: -8px !important;
|
||||
|
||||
border-width: 8px !important;
|
||||
|
||||
border-color: transparent;
|
||||
-moz-border-right-colors: none;
|
||||
|
||||
border-bottom-color: lighten(#4D96CB, 10%);
|
||||
-moz-border-bottom-colors: lighten(#4D96CB, 10%);
|
||||
}
|
||||
|
||||
|
||||
.nav-list > li.hover {
|
||||
> .arrow:before {
|
||||
-moz-border-right-colors: none;
|
||||
border-right-color: transparent;
|
||||
|
||||
border-bottom-color: darken(#A4C6DD , 10%);
|
||||
-moz-border-bottom-colors: darken(#A4C6DD , 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}//@media
|
||||
}
|
||||
.enable_horizontal_menu_skin_3();
|
||||
|
||||
|
||||
|
||||
.sidebar-scroll {
|
||||
.sidebar-shortcuts {
|
||||
//border-bottom: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
|
||||
border-bottom-color: 1px solid #99B6C9;
|
||||
}
|
||||
.sidebar-toggle {
|
||||
//border-top: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
|
||||
border-top-color: #99B6C9;
|
||||
}
|
||||
|
||||
|
||||
//.nav-list li.active > a:before, .nav-list li.active > a:after {
|
||||
//display: none !important;
|
||||
//}
|
||||
|
||||
.scroll-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//disabled state
|
||||
.nav-list > li.disabled:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}//.skin-3
|
||||
@@ -0,0 +1,11 @@
|
||||
@import "../bootstrap/variables.less";
|
||||
@import "../bootstrap/mixins.less";
|
||||
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
@import "../ace-features.less";
|
||||
|
||||
|
||||
@import "skin-1.less";
|
||||
@import "skin-2.less";
|
||||
@import "skin-3.less";
|
||||
Reference in New Issue
Block a user