assets/css/less/sidebar/responsive-1.less

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

//side menu toggler in mobile view
@sidebar-toggler-background: #444;
@sidebar-toggler-color: #FFF;


.main-container .menu-toggler {
  display: none;
}

.enable_responsive_menu() when(@enable-responsive-menu = true) {
@duration : 0.2s;

//responsive sidebar
@media only screen and (max-width: @grid-float-breakpoint-max) {
 .sidebar.responsive:before {
	display: none;
 }

 .sidebar.responsive {
	.box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.15)");

	z-index: @zindex-sidebar-fixed;

	overflow: hidden;
	max-height: 0;

	.transform(translateX(-@sidebar-width - 10));
	//"left" or "margin-left" transition is slow on Chrome, so we use translateX
	-webkit-transition: -webkit-transform @duration linear 0s, max-height 0s linear @duration;
	-moz-transition: -moz-transform @duration linear 0s, max-height 0s linear @duration;
	-o-transition: -o-transform @duration linear 0s, max-height 0s linear @duration;
	transition: transform @duration linear 0s, max-height 0s linear @duration;
	
	
	position: relative;
	bottom: auto;
	//top: auto has a problem with android default browser if sidebar is fixed
	
	left: @sidebar-width;
	margin-left: -(@sidebar-width);
	//why are we doing this?
	//we don't use "position: absolute" so that our page's height is at least as tall as .sidebar
	//and therefore our page background is white when sidebar is expanded (whitened by .main-container:before) (it won't happen on position: absolute)
	//but "position: relative" will push ".main-content" to left
	//so we use negative "margin-left" on .sidebar to get more space and bring back .main-content
	//and then we move .sidebar again back to its place using "left" property
	//so it will look like the "position: absolute" alternative, but it's not
  }
 }
	
 @media (min-width: @screen-compact-menu) and (max-width: @grid-float-breakpoint-max) {
	.sidebar.responsive.compact {
		.transform(translateX(-@sidebar-compact-width - 10));
		
		&.push_away.display + .main-content {
			.transform(translateX(@sidebar-compact-width));
		}
		.navbar.navbar-fixed-top + .main-container & {
			&.push_away.display ~ .footer .footer-inner {
				.transform(translateX(@sidebar-compact-width));