public.component.assets.css.less.skins.skin-3.less Maven / Gradle / Ivy
//skin-3 should be used along with "no-skin" because of some overlappings
//
/* 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 {
border-right-color: #FFF;
-moz-border-right-colors: #FFF;
//border-width: 16px 10px;
//top: 3px;
border-width: 12px 8px;
top: 7px;
right: -1px;
}
.nav-list li.active > a:before {
display: block;
content: "";
position: absolute;
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;
//top: 3px;
right: 0;
border-width: 12px 8px;
top: 7px;
}
.nav-list > li.active > .submenu li.active > a {
&:before, &:after {
//top: 6px;
top: 4px;
}
}
.nav-list li.active.open > a:before {
display: none;
}
.nav-list li.highlight.active.open > a:before {
display: block;
}
.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;
}
}
.nav-list > li.active.highlight > a {
&:after, &:before {
border-width: 20px 0 21px 10px;
top: -1px;
}
}
.nav-list > li.active:hover > a, .nav-list > li.active.hover-show > 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_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();
}
}
.enable_sidebar_collapse_skin_3();
@media only screen and (max-width: @grid-float-breakpoint-max) {
.sidebar.responsive {
border-bottom-width: 1px !important;
.nav-list > li.active.open > a:after {
display: none;
}
.nav-list > li.active.highlight > a:after,
.nav-list > li.active.highlight > a:before {
display: block;
}
}
.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;
}
.nav-list > li.active.open > a:after {
display: none;
}
.nav-list > li.active.highlight > a:after,
.nav-list > li.active.highlight > a:before {
display: block;
}
}
}
.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;
}
}
.sidebar-scroll .nav-wrap-up + .sidebar-toggle:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
border-right: 1px solid @sidebar-border;//to cover the active item caret when scrolling
}
.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, &.hover-show {
> a.dropdown-toggle:after, > 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;
}
@media only screen and (max-width: @grid-float-breakpoint-max) {
.breadcrumbs {
margin: 5px 5px 0;
}
.menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
margin: 0;
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;
opacity: 1;
padding: 7px;
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;
}
.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 , &:hover + li {
border-left-color: @nav-item-border-hover;
}
&:last-child:hover {
border-right-color: @nav-item-border-hover;
}
&.active , &.active + li , &:hover + li.active {
border-left-color: @nav-item-border-active;
}
&.active:last-child {
border-right-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%);
}
}
&.menu-min {
.sidebar-shortcuts {
max-width: 52px;
padding-left: 2px;
padding-right: 2px;
}
.sidebar-shortcuts-mini > .btn {
padding: 7px;
}
.nav-list > li.hover > .submenu {
border-top-color: #C9DAE5;
}
.nav-list > li.active > a > .menu-text {
border-left-color: #A4C6DD;
}
.nav-list > li > .arrow:after {
-moz-border-bottom-colors: #EDF3F7;
border-bottom-color: #EDF3F7;
}
}
}
}//@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;
}
}
@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© 2015 - 2025 Weber Informatics LLC | Privacy Policy