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-vertical * 2 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();
	}
}

.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: url(../images/logout.png) no-repeat;
		text-indent: -9999em;
	}
}

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

	a {
		text-decoration: none;
	}
	
	.cms-panel-content {
		width: ($grid-horizontal * 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-vertical * 3;
			line-height: $grid-vertical * 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-vertical - 1) 5px ($grid-vertical - 1) 8px;
			background-color: $color-base;
			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: block;
				float: left;
				margin: 4px 10px 0 4px;
				
				@include opacity(0.7);
			}
			
			.text {
				display: block;
			}
		}
		
		ul {
			display: none;
		}
	
		&.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%)
				));
			}
			
			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 a {
					font-weight: bold;
					color: $color-text-light;
				}
				
				&.first a {
					border-top: none;
				}
			}
		}

		/* 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 {
			display: none;
		}
		
		li > li {
			display: none;
		}
	}
}