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;
	line-height: 24px;
	background-color: $color-brand-bg;

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

		a {
			color: white;
			display: inline;
		}
	}
}

.cms-logo {
	box-shadow: inset 0 -1px darken($color-brand-bg, 4%);
	overflow: hidden;
	padding: $grid-y*1.5 8px;
	position: relative;
	vertical-align: middle;
	font-size: $font-base-size;
	min-height: 28px;
	transition: padding .2s;

	.version {
		display: none;
	}

	a {
		position: absolute;
		top: $grid-y;
		bottom: $grid-y;
		display: block;
		width: 24px;
		background: $application-logo-small no-repeat center center;
		text-indent: -9999em;
		padding: 0 1px;
	}

	span {
		font-weight: bold;
		font-size: $font-base-size;
		line-height: 16px;
		padding: 6px 0;
		margin-left: 32px;
	}
}

.cms-login-status {
	padding: $grid-y*1.5 8px;
	line-height: 16px;
	font-size: $font-base-size - 1;
	min-height: 28px;
	transition: padding .2s;

	.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-theme-bg;
	width: ($grid-x * 20);
	
	.cms-menu-list {
		margin: $grid-y * 1.5 0 0 0;
	}

	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;
		box-shadow: inset #C1C7CC -1px 0 0
	}

	&.collapsed {
		width: ($grid-x * 7.5) !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;

				ul {
					display: none;
				}
			}

			span.text {
				display: none;
			}
		}

		.cms-login-status,
		.cms-logo {
			height: 28px;
			padding: 12px 18px;

			span {
				display: none;
			}
		}

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

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

		.cms-menu-list li a {
			padding-left: 18px;
			padding-right: 18px;
		}

		.ss-ui-button.sticky-toggle {
			background-position: 12px center;
		}
	}

	.cms-panel-toggle {
		height: 52px;

		a,
		a.toggle-expand {
			float: right;
			width: 50%;
			padding-top: 16px;
			padding-bottom: 16px;
		}
	}

	.ss-ui-button.sticky-toggle {
		float: left;
		width: 52px;
		height: 52px;
		margin: 0;
		padding: $grid-x;
		text-indent: -999em;
		background-color: transparent;
		background-image: url(../images/sticky-toggle-off.png);
		background-repeat: no-repeat;
		background-position: 16px center;
		border: 0;
		transition: position .2s;

		&:hover {
			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: 3px 3px 0;
			}
		}
	}

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

	// Sub menu (will also be available for profile)
	.toggle-children {
		display: inline-block;
		float: right;
		width: 20px;
		height: 100%;
		cursor: pointer;
		padding-top: 17px;
	}

	.child-flyout-indicator,
	.toggle-children-icon {
		background-image: none;
		border-color: darken(#ccdce6, 25%);
		border-style: solid;
		border-width: 0 1px 1px 0;
		width: 8px;
		height: 8px;
		position: absolute;
		margin-top: 3px;
		right: 8px;
		z-index: 2;
		-ms-transform: rotate(-45deg); /* IE 9 */
		-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
		transform: rotate(-45deg);
		// display: none;  /* To be shown by javascript, see LeftAndMain.Panel.js */
	}

	.opened .toggle-children-icon {
		margin-top: 1px;
	}

	&.collapsed .child-flyout-indicator {
		margin-top: -29px;
	}
}

.cms-menu-list {

	a:focus,
	a:active {
		text-decoration: none;
	}

	li {
		line-height: 18px; /* new v4 global line-height */

		a {
			display: block;
			line-height: $grid-y * 2;
			min-height: $grid-y * 2;
			font-size: $font-base-size;
			color: $color-text-default;
			padding: (2 * $grid-y + 1) 5px (2 * $grid-y + 1) 8px;
			background-color: $base-menu-bg;
			cursor: pointer;
			position: relative;
			transition: padding .2s;
			text-decoration: none;
			box-shadow: inset $color-separator -1px 0 0;

			&:hover {
				text-decoration: none;
				background: lighten($base-menu, 2%);
				color: darken($color-text-default, 5%);
			}

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

			span.toggle-children {
				top: 0;
			}
		}

		.icon {
			display: block;
			position: absolute;
			top: 50%;
			margin-left: $grid-x / 2;
			margin-top: -8px;
			opacity: 0.7;
		}

		ul .icon {
			display: none !important;
		}

		&.current { //need to apply current stlye to flyout also (at least line height)

			a {
				background-color: $base-menu;
			}

			ul {
				border-top: none;
				display: block;
			}

			li {
				background-color: $base-menu-bg;

				a {
					&.current,
					&:hover {
						background-color: $base-menu;
					}
				}

			}
		}


		// Has sub menu
		&.children {
			
			.no-icon.text {
				margin-left: 30px;
			}

			// Sub menu
			ul li a {
				font-size: 12px;
				line-height: 18px;
				height: 18px;
				padding-top: 11px;
				padding-bottom: 11px;
				color: lighten($color-text-default, 10%);
				background-color: $base-menu-bg;

				span.text {
					margin-left: 23px;
				}
			}

			&.current {
				> a {
					background-color: transparent;
					&:hover {
						background-color: lighten($base-menu, 3%);
					}
				}
			}

			&.opened {
				a:hover {
					background-color: lighten($base-menu, 3%);
				}
				.current a {
					background-color: $base-menu;
				}
				.opened .toggle-children-icon {
					transform: rotate(45deg);
				}
			}
		}

		/* Style applied to the menu flyout only when the collapsed setting */
		.collapsed-flyout {
			left: 59px;
			margin-top: -52px;
			position: fixed;
			width: 160px;
			z-index: 1;
			display: none;

			.icon {
				display: none;
			}

			li {
				a {
					background: $base-menu-bg;
					box-shadow: none;
					padding: 10px 0;
					height: 20px;
					line-height: 18px;

					&:hover,
					&:active {
						background: lighten($base-menu, 3%);
					}
				}

				&.children a {
					font-size: 13px;
					height: 18px;
					cursor: default;
				}

				&.current {
					a {
						background-color: $base-menu;
					}
					&.children a {
						background-color: $base-menu-bg;
					}
				}
			}
		}
	}

	&.collapsed {

		.toggle-children {
			display: none;
		}

		.opened {
			ul.collapsed-flyout {
				border-radius: 0px 2px 2px 0px ;
				border: 1px solid #d2d5d8;
				box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

				li {
					&.clone {
						a {
							padding: 15px 0 15px 70px;
							margin-left: -60px;
							margin-right: 0px;
							box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
							span.text {
								margin-left: -10px;
							}
						}
					}

					a span.text {
						display: block;
						margin-left: 0;
					}
				}
			}

			.child-flyout-indicator {
				position: fixed;
				left: 196px;
				transform: rotate(45deg);
				margin-top: -33px;
			}
		}
	}
}