silverstripe-framework/admin/scss/_menu.scss

/**
 * Styles for the left hand side menu
 *
 * @package sapphire
 * @subpackage admin
 */

/** -------------------------------------------------------
 * CMS Menu Bar
 * -------------------------------------------------------- */
.cms-menu {
	z-index: 80;
	background: $color-menu-background;
	border-right: 1px solid $color-menu-border;
	width: ($grid-horizontal * 24) - 1; /* 8x24 - 1 */
	overflow: auto;
	
	@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: hidden
	}
		
	&.collapsed {
		width: 40px;
		cursor: auto;
		z-index: 1000;
		
		.cms-header {
			width: 30px;
			
			span {
				display: none;
			}
		}
		
		.cms-menu-list {
			overflow-x: hidden;
			overflow-y: auto;
			
			li span.text {
				display: none;
			}
			li ul {
				display: none !important; 
			}
		}
		
		&.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 {
			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: 1px solid darken($color-menu-button, 20%);
				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;
				}
			}
		}
	}

	&.collapsed {
		li .text {
			display: none;
		}
		
		li > li {
			display: none;
		}
	}
}