silverstripe-framework/admin/scss/_menu.scss

/**
 * Styles for the left hand side menu
 *
 * @package sapphire
 * @subpackage admin
 */
/** -------------------------------------------------------
 * CMS Menu Bar
 * -------------------------------------------------------- */
@import "compass/css3";

.cms-menu {
	z-index: 10;
	background: $color-menu-background;
	border-right: 1px solid $color-menu-border;
	width: 250px;
	overflow: auto;
	
	@include box-shadow($color-shadow-dark, 2px, 0, 6px);

	a {
		text-decoration: none;
	}
	
	.cms-panel-content {
		width: 250px; // avoids floating of elements when collapsed
	}
		
	// toggled via JS
	&.collapsed {
	
		width: 40px;
		cursor: auto;
		
		.cms-menu-list {
			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: 30px;
			line-height: 30px;
			vertical-align: middle;
			font-size: $font-base-size;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-shadow: lighten($color-base, 10%) 1px 1px 0;
			color: $color-text-dark;
			padding: 5px;
			background-color: $color-base;
			
			@include linear-gradient(color-stops(
				$color-base,
				darken($color-base, 8%)
			));

			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 linear-gradient(color-stops(
					lighten($color-base, 5%),
					$color-base
				));
			}
			&:focus {
				border-top: 1px solid darken($color-base, 5%);
				text-decoration: none;
				background-color: darken($color-base, 5%);
				color: lighten($color-text-dark, 10%);
				
				@include linear-gradient(color-stops(
					darken($color-base, 10%),
					darken($color-base, 5%)
				));			
			}
			
			.icon {
				display: block;
				float: left;
				margin-right: 4px;
				@include sprite-background("icons-32.png");
				@include sprite-position(1, 1);
			}
			
			&:hover .icon {
				@include sprite-position(2, 1);
			}
			
			.text {
				display: block;
			}
		}

		&.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 linear-gradient(color-stops(
					$color-menu-button, 
					darken($color-menu-button, 10%)
				));
			}
			
			ul {
				border-top: 1px solid darken($color-menu-button, 20%);
			}
			
			a .icon {
				@include sprite-position(2, 1);
			}
		}
		
		ul {
			display: none;
		}
		
		&.opened ul {
			display: block;
		}
		
		// nested elements
		li {
			
			li {
				background-color: darken($color-menu-button, 10%);

				a {
					font-size: $font-small-size;
					padding: 0 10px 0 36px;
					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;
				}
			}
		}
	}
		
	li#Menu-CMSMain a .icon {@include sprite-position(1, 1);}
	li#Menu-CMSMain.current a .icon, li#Menu-CMSMain a:hover .icon {@include sprite-position(2, 1);}
	li#Menu-AssetAdmin a .icon {@include sprite-position(1, 4);}
	li#Menu-AssetAdmin.current a .icon, li#Menu-AssetAdmin a:hover .icon {@include sprite-position(2, 4);}
	li#Menu-SecurityAdmin a .icon {@include sprite-position(1, 5);}
	li#Menu-SecurityAdmin.current a .icon, li#Menu-SecurityAdmin a:hover .icon {@include sprite-position(2, 5);}
	li#Menu-CMSPagesController a .icon {@include sprite-position(1, 2);}
	li#Menu-CMSPagesController.current a .icon, li#Menu-CMSPagesController a:hover .icon {@include sprite-position(2, 2);}
	
	&.collapsed {
		li .text {
			display: none;
		}
		
		li > li {
			display: none;
		}
	}
}