silverstripe-framework/admin/scss/_menu.scss

/**
 * Styles for the left hand side menu and header for the admin panels.
 * 
 * Take into consideration CSS selector performance. 
 *
 * @package sapphire
 * @subpackage admin
 */

.cms-logo-header {
	background-color: darken($color-dark-bg, 10%);
	position: relative;
	padding: $grid-y + 1 8px 0 4px;
	line-height: 24px;

	@include background-image(
		linear-gradient(darken($color-dark-bg, 10%), $color-dark-bg, darken($color-dark-bg, 10%)
	));

	span {
		color: $color-text-light;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;

		a {
			color: $color-text-dark-link;
			display: inline;
		}
	}
}

.cms-logo {
	border-bottom: 1px solid darken($color-dark-separator, 20%);
	height: 31px;
	overflow: hidden;
	padding: 0 0 0 4px;
	vertical-align: middle;
	font-size: $font-base-size;

	.version {
		display: none; 
	} 

	a {
		display: inline-block;
		height: 24px;
		width: 24px;
		float: left;
		margin-right: 8px;
		background: $application-logo-small no-repeat;
		text-indent: -9999em;
		padding-right: 7px;
		border-right: 1px solid $color-dark-separator;
	}

	span {
		font-weight: bold;
		font-size: 14px;
		@include hide-text-overflow();
		padding-top:1px;
	}
}

.cms-login-status {
	border-top: 1px solid $color-dark-separator;
	height: 24px;
	padding: 7px 4px 0 4px;
	overflow: hidden;
	line-height: 16px;
	font-size: $font-base-size - 1;

	.logout-link {
		display: inline-block;
		height: 16px;
		width: 16px;
		float: left;
		margin: 0 8px 0 3px;
		background: sprite($sprites32, logout) no-repeat;
		text-indent: -9999em;
	}
}

.cms-menu {
	z-index: 80;
	background: $color-menu-background;
	border-right: 1px solid $color-menu-border;
	width: ($grid-x * 24) - 1; /* 8x24 - 1 */
	
	@include box-shadow($color-shadow-dark 0 0 $grid-x);

	a {
		text-decoration: none;
	}
	
	.cms-panel-content {
		width: ($grid-x * 24) - 1; /* 8x24 - 1 */
		overflow-x: hidden;
		overflow-y: auto;
	}
		
	&.collapsed {
		width: 40px;
		cursor: auto;
		z-index: 1000;
		
		.cms-panel-header {
			width: 30px;
			
			span {
				display: none;
			}
		}
		
		.cms-menu-list {
			overflow-x: hidden;
			overflow-y: auto;
			
			li span.text {
				display: none;
			}
			li ul {
				display: none;
			}
		}

		&.cms-panel .cms-panel-content {
			display: block; // override panel defaults
		}
	}
}

.cms-menu-list {
	li {
		a {
			display: block;
			height: $grid-y * 3;
			line-height: $grid-y * 3;
			font-size: $font-base-size;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-shadow: lighten($color-base, 5%) 1px 1px 0;
			color: $color-text-dark;
			padding: ($grid-y - 1) 5px ($grid-y - 1) 8px;
			background-color: darken($color-base, 12%);
			cursor: pointer;
			
			@include background-image(linear-gradient(
				$color-base,
				darken($color-base, 12%)
			));

			border-top: 1px solid lighten($color-base, 10%);
			border-bottom: 1px solid darken($color-base, 20%);
			
			&:hover {
				text-decoration: none;
				background-color: lighten($color-base, 2%);
				border-bottom: 1px solid darken($color-base, 15%);
				color: lighten($color-text-dark, 5%);
				
				@include background-image(linear-gradient(
					lighten($color-base, 5%),
					$color-base
				));
			}
			&:focus,
			&:active {
				border-top: 1px solid darken($color-base, 5%);
				text-decoration: none;
				background-color: darken($color-base, 5%);
				color: lighten($color-text-dark, 10%);
				
				@include background-image(linear-gradient(
					darken($color-base, 10%),
					darken($color-base, 5%)
				));			
			}
			
			.icon {
				display: inline-block;
				float: left;
				margin: 4px 10px 0 4px;

				@include opacity(0.7);
			}
			
			.text {
				display: inline-block;
				float: left;
			}

			.toggle-children {
				display: inline-block;
				float: right;
				width: 20px;
				height: 100%;
				cursor: pointer;

				.toggle-children-icon {
					display: inline-block;
					width: 8px;
					height: 8px;
					background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
					vertical-align: middle;
				}
				
				&.opened {
					.toggle-children-icon {
						background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
					}
				}
			}
		}
	
		&.current { //need to apply current stlye to flyout also (at least line height)
			a {
				color: $color-text-light;
				text-shadow: darken($color-menu-button, 20%) 0 -1px 0;
				border-top: 1px solid lighten($color-menu-button, 10%);
				border-bottom: 1px solid darken($color-menu-button, 20%);
				background-color: $color-menu-button;
				@include background-image(linear-gradient(
					$color-menu-button, 
					darken($color-menu-button, 10%)
				));

				.toggle-children {
					.toggle-children-icon {
						background: sprite($sprites32, menu-arrow-down) no-repeat;
					}
					
					&.opened {
						.toggle-children-icon {
							background: sprite($sprites32, menu-arrow-up) no-repeat;
						}
					}
				}
			}
			
			ul {
				border-top: none;
				display: block;
			}
			
			li {
				background-color: darken($color-menu-button, 10%);
				a {
					font-size: $font-base-size - 1;
					padding: 0 10px 0 40px;
					height: 32px;
					line-height: 32px;
					color: lighten($color-menu-button, 45%);
				 	background: none;
					border-top: 1px solid $color-menu-button;
					border-bottom: 1px solid darken($color-menu-button, 20%);
					
					&.current,
					&:hover {
						background: darken($color-menu-button, 5%);
						border-top: 1px solid darken($color-menu-button, 5%);
						color: $color-text-light;
					}
					
					&:focus {
						background: darken($color-menu-button, 15%);
						border-top: 1px solid darken($color-menu-button, 20%);
						color: lighten($color-menu-button, 60%);
					}

				}
				
				&.current {
					background: darken($color-menu-button, 5%);
					border-top: 1px solid darken($color-menu-button, 5%);
					
					a {
						font-weight: bold;
						color: $color-text-light;
					}
				}
				
				&.first a {
					border-top: none;
				}
			}
		}

		ul {
			display: none;
			#Menu-CMSPagesController {
				a {
					background-image:none;
					font-size: 11px;
					padding: 0 10px 0 40px;
					height: 32px;
					line-height: 32px;
				}
			}
			#Menu-CMSPageAddController {
				a {
					background-image:none;
					font-size: 11px;
					padding: 0 10px 0 40px;
					height: 32px;
					line-height: 32px;
				}
			}
			#Menu-AssetAdmin {
				a {
					background-image:none;
					font-size: 11px;
					padding: 0 10px 0 40px;
					height: 32px;
					line-height: 32px;
				}
			}
			#Menu-CMSFileAddController {
				a {
					background-image:none;
					font-size: 11px;
					padding: 0 10px 0 40px;
					height: 32px;
					line-height: 32px;
				}
			}
		}

		/* Style applied to the menu flyout only when the collapsed setting */
		ul.collapsed-flyout {
			display: block;

			li {
				a {
					font-size: $font-base-size - 1;
					padding: 0 10px 0 40px;
					height: 32px;
					line-height: 32px;

					&.current,
					&:hover {
						font-weight: bold;
					}
				}

				&.current a {
					font-weight: bold;
				}

				&.first a {
					border-top: 1px solid darken($color-base, 10%);
				}
			}
		}
	}

	&.collapsed {
		li {
			.text, .toggle-children {
				display: none;
			}
		}
		
		li > li {
			display: none;
		}
	}
}