GSYH/WebRoot/static/ace/css/less/breadcrumbs.less

//some breadcrumbs variables


@breadcrumb-background: #F5F5F5;
@breadcrumb-border: #E5E5E5;
@breadcrumb-text-color: #555;
@breadcrumb-link-color: #4C8FBD;

@breadcrumb-separator: "\f105";//font awesome icon
@breadcrumb-margin-left: 12px;//!ignore


.enable_breadcrumbs() when(@enable-breadcrumbs = true) {

	// breadcrumbs and searchbox
	.breadcrumbs {
	  position: relative;
	  z-index: auto;

	  border-bottom: 1px solid @breadcrumb-border;
	  background-color: @breadcrumb-background;
	 
	  min-height: @breadcrumb-height;
	  line-height: (@breadcrumb-height - 1);

	 padding: 0 12px 0 0;
	}



	.breadcrumb {
	  background-color: transparent;
	  display: inline-block;
	  line-height: 20px;

	  margin: 6px 22px 0 @breadcrumb-margin-left;
	  padding: 0;

	  font-size: @font-size-breadcrumb;
	  color: #333;
	 
	  border-radius: 0;
	  > li {
		& , &.active {
		  color: @breadcrumb-text-color;
		  padding: 0 3px 0 3px;
		}

		
		> a {
		  display: inline-block;
		  color: @breadcrumb-link-color;
		}
		
		+ li:before {
			//float: left;//it has a problem with fontAwesome in RTL
			font-family: FontAwesome;
			font-size: @font-size-breadcrumb-sep;
			content:@breadcrumb-separator;
			color: @breadcrumb-arrow-color;
			
			padding: 0;
			margin: 0 8px 0 0;
			position: relative;
			top: 1px;
		}
	  }
	  

	  .home-icon {
		 font-size: @font-size-breadcrumbs-home;

		 margin-left: 2px;
		 margin-right: 2px;

		 vertical-align: top;
	  }

	}

	@media only screen and (max-width: @screen-xs) {
	 .breadcrumb > li > a {
		padding: 0 1px;
	 }
	}

	//some changes in margins and paddings
	@media only screen and (max-width: @grid-float-breakpoint-max) {
	 .menu-toggler + .sidebar.responsive + .main-content .breadcrumb {
		margin-left: 90px;
	 }
	}
	@media only screen and (max-width: @screen-tiny) {
	 .breadcrumb {
		margin-left: 8px;
	 }
	 .menu-toggler + .sidebar.responsive + .main-content .breadcrumb {
		margin-left: 36px;
	 }
	}

}
.enable_breadcrumbs();



.enable_fixed_breadcrumbs() when(@enable-fixed-breadcrumbs = true) {
 //fixed breadcrumbs
 @media (min-width: @screen-fixed-breadcrumbs) {
  .breadcrumbs-fixed {
	position: fixed;
	right: 0;
	left: 0;
	top: auto;
	z-index: @zindex-breadcrumbs-fixed;

    + .page-content {
		padding-top: @page-content-padding-top + @breadcrumb-height;
	}
  }
  .sidebar + .main-content .breadcrumbs-fixed {
	left: (@sidebar-width);
  }


  //android's default browser has a problem with "top: auto" when fixed
  body.mob-safari {
	 .breadcrumbs-fixed {
		top: @navbar-min-height;
	 }
	 /**
	 //not needed because breadcrumbs is not fixed at this point
	 media (max-width: @screen-topbar-down) {
	  .navbar-fixed-top:not(.navbar-collapse) + .main-container .breadcrumbs-fixed {
		top: (@navbar-min-height * 2);
	  }
	 }*/
  }
 }//@media


 //when sidebar is compact or minimized
 @media (min-width: max(@grid-float-breakpoint, @screen-compact-menu)) {
  .sidebar.compact + .main-content .breadcrumbs-fixed {
	left: (@sidebar-compact-width);
  }
 }

 @media (min-width: @grid-float-breakpoint) {
  .sidebar.menu-min + .main-content .breadcrumbs-fixed {
	left: (@sidebar-min-width); 
  }
 }

 @media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) {
  .breadcrumbs-fixed, .sidebar.menu-min + .main-content .breadcrumbs-fixed {
	left: 0;
  }
  .sidebar.responsive-min , .sidebar.responsive-max {
	+ .main-content .breadcrumbs-fixed {
		left: (@sidebar-min-width);
	}
  }
 }

.enable_container_breadcrumbs() when(@enable-container = true) {
.container.main-container {

 @media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) {
	.breadcrumbs-fixed {
		left: auto;
		right: auto;
		width: @container-sm;
	}
	.sidebar + .main-content .breadcrumbs-fixed {
		left: auto;
		right: auto;
		width: @container-sm - @sidebar-width;
	}
	.sidebar.compact + .main-content .breadcrumbs-fixed {
		width: @container-sm - @sidebar-compact-width;
	}
	.sidebar.menu-min + .main-content .breadcrumbs-fixed {
		left: auto;
		right: auto;
		width: @container-sm - @sidebar-min-width;
	}
 }
 
 @media (min-width: max(@screen-compact-menu, @screen-md-min)) {
    .sidebar.compact + .main-content .breadcrumbs-fixed {
		width: @container-md - @sidebar-compact-width;
	}
 }
 @media (min-width: @screen-md-min) {
	.breadcrumbs-fixed {
		width: @container-md;
	}
	.sidebar + .main-content .breadcrumbs-fixed {
		width: @container-md - @sidebar-width;
	}
	.sidebar.menu-min + .main-content .breadcrumbs-fixed {
		width: @container-md - @sidebar-min-width;
	}
 }
 
 @media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
    .sidebar.compact + .main-content .breadcrumbs-fixed {
		width: @container-lg - @sidebar-compact-width;
	}
 }
 @media (min-width: @screen-lg-min) {
	.breadcrumbs-fixed {
		width: @container-lg;
	}
	.sidebar + .main-content .breadcrumbs-fixed {
		width: @container-lg - @sidebar-width;
	}
	.sidebar.menu-min + .main-content .breadcrumbs-fixed {
		width: @container-lg - @sidebar-min-width;
	}
 }
}


.container.main-container {

 @media (min-width: max(@screen-sm-min , @screen-compact-menu, @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
	.sidebar.compact + .main-content .breadcrumbs-fixed	{
		width: @container-sm;
	}
 } 
 @media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
	.breadcrumbs-fixed,
	.sidebar.menu-min + .main-content .breadcrumbs-fixed {
		width: @container-sm;
	}

	.sidebar.responsive-min , .sidebar.responsive-max {
		+ .main-content .breadcrumbs-fixed {
			left: auto;
			right: auto;
			width: @container-sm - @sidebar-min-width;
		}
	}
 }
}

}
.enable_container_breadcrumbs();

}
.enable_fixed_breadcrumbs();









//***************************************************************************
//***************************************************************************
//if you don't want fixed breadcrumbs on smaller devices
//uncomment the following
/**
@media (max-width: @grid-float-breakpoint-max) {
 .breadcrumbs-fixed {
	position: relative;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	width: auto !important;
	
	+ .page-content {
		padding-top: @page-content-padding-top;
	}
 }
}
*/



//and maybe disable fixed breadcrumbs on horizontal menu style, because of too much fixed height occupied!
 .disable_fixed_breadcrumbs_on_horizontal_menu() when(@enable-horizontal-menu = true) {
	@media (min-width: @grid-float-breakpoint) {
		.h-sidebar + .main-content .breadcrumbs.breadcrumbs-fixed {
		  position: relative;// !important;
		  top: auto;
		  left: auto;
		  z-index: auto;
		  width: auto;// !important;
		}
		.h-sidebar + .main-content .page-content {
		  padding-top: @page-content-padding-top + 4;// !important;
		}
	}
 }
 .disable_fixed_breadcrumbs_on_horizontal_menu();