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 framework
 * @subpackage admin
 */

.cms-logo-header {
	position: relative !important;
	top:auto !important;
	height:auto !important;
	padding: 0 8px;
	line-height: 24px;
	background-color: lighten($color-dark-bg,10%);
	@include background-image(
		linear-gradient(lighten($color-dark-bg,20%), $color-dark-bg)
	);

	span {
		color: $color-text-light;
		display: block;
		padding-left:26px;

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

.cms-logo {
	border-bottom: 1px solid lighten($color-dark-bg,4%);
	overflow: hidden;
	padding: $grid-y*1.5 0 $grid-y*1.5-1; /* should come to 52px with border bottom and line-height */
	position: relative;
	vertical-align: middle;
	font-size: $font-base-size;
	min-height: 28px;

	.collapsed & {
		padding:0;
	}
	.version {
		display: none;
	}
	a {
		position: absolute;
		top: $grid-y;
		bottom: $grid-y;
		display: block;
		width: 24px;
		background: $application-logo-small no-repeat left center;
		text-indent: -9999em;
		padding: 0 1px;
		left: 0;
	}
	span {
		font-weight: bold;
		font-size: $font-base-size;
		line-height: 16px;
		padding: 6px 0;
		margin-left: 30px;
	}
}

.cms-login-status {
	border-top: 1px solid $color-dark-separator;
	padding: $grid-y*1.5 0;
	line-height: 16px;
	font-size: $font-base-size - 1;

	.logout-link {
		float: left;
		font-size: 16px;
		height: 16px;
		padding: 6px 8px 6px 5px;
		opacity: .9;
		color: #fff;

		&:hover, &:focus{
			opacity: 1;
			text-decoration: none;
		}
	}

	span {
		padding: 6px 0 6px 26px;
	}
}

.cms-menu {
	z-index: 80;
	background: $color-base;
	width: ($grid-x * 20);

	@include box-shadow($color-shadow-blacker 0 0 3px);
	a {
		text-decoration: none;
	}

	.cms-panel-content {
		width: ($grid-x * 20);
		overflow-x: hidden;
		overflow-y: auto;
		position: relative !important;
		top:auto !important;
		left:auto !important;
	}

	&.collapsed {
		width: 40px !important; // Using important because JavaScript is overriding this value
		cursor: auto;
		z-index: 1000;

		.cms-panel-header {
			width: 30px;

			span {
				display: none;
			}
		}

		.cms-menu-list {
			overflow-x: hidden;
			overflow-y: auto;
			li{
			    width: 100%;
			    float: left;
			    span.text {
					display: none;
				}
				ul {
				display: none;
				}
			}
		}

		.cms-login-status {
			height: 28px;
			span {
				display: none;
			}
		}

		.cms-logo {
			height: 28px;
			padding: 12px 0 11px;
		}

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

		.ss-ui-button.sticky-toggle {
			width: 50%;
		}
	}

	.cms-panel-toggle {
		a,
		a.toggle-expand {
			float: right;
			width: 20px;
		}
	}

	.ss-ui-button.sticky-toggle {
		float: left;
		width: 24px;
		height: 24px;
		margin: 0;
		text-indent: -999em;
		background-color: transparent;
		background-image: url(../images/sticky-toggle-off.png);
		background-repeat: no-repeat;
		background-position: 3px;
		border: 0;

		&:hover {
			@include box-shadow(0 0 0);
		}

		&.active {
			background-image: url(../images/sticky-toggle-on.png);
		}

		.ui-button-text {
			padding: 0;
		}

		// When the button is hovered, show the status indicator
		&:hover {
			+ .sticky-status-indicator {
				display: block;
				padding: 5px 6px 0;
			}
		}
	}

	.sticky-status-indicator {
		display: none;
		position: absolute;
		top: -22px;
		left: 2px;
		font-size: 9px;
		color: #555d60;
		text-transform: uppercase;
		background-color: $color-base;
	}
}

.cms-menu-list {
	li {
		a {
			display: block;
			line-height: $grid-y * 2;
			min-height: $grid-y * 2;
			font-size: $font-base-size;
			color: $color-text-dark;
			padding: (1.5 * $grid-y - 1) 5px (1.5 * $grid-y - 1) 8px;
			background-color: $color-base;
			cursor: pointer;
			position: relative;

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

			border-top: 1px solid lighten($color-base, 6%);
			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;
				position: absolute;
				top: 50%;
				margin-left: $grid-x / 2;
				margin-top: -8px;

				@include opacity(0.7);
			}

			.text {
				display: block;
				margin-left: 30px;
			}

			.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;
					}
				}
			}

		}
		ul li a {
			border-top: 1px solid lighten($color-base, 2%);
		}

		&.current { //need to apply current stlye to flyout also (at least line height)
			a {
				color: $color-text-light;
				border-top: 1px solid lighten($color-menu-button, 10%);
				border-bottom: 1px solid darken($color-menu-button, 15%);
				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 darken($color-menu-button,4%);
					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%);
					border-top: none;
					a {
						font-weight: bold;
						color: $color-text-light;
					}
				}

				&.first a {
					border-top: none;
				}
			}
		}

		ul.collapse {
			display: none;
			li {
				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 16px;
					height: 32px;
					line-height: 32px;
				}

				&.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;
		}
	}
}