minio/browser/app/less/inc/sidebar.less

/*--------------------------
    Sidebar
----------------------------*/
.fe-sidebar {
	width: @fe-sidebar-width;
	background-color: @dark-gray;
	position: fixed;
	height: 100%;
	overflow: hidden;
	padding: 35px;

	@media(min-width: @screen-md-min) {
		.translate3d(0, 0, 0);
	}

	@media(max-width: @screen-sm-max) {
		padding-top: 85px;
		z-index: 9;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
		.transition(all);
		.transition-duration(300ms);
		.translate3d((-@fe-sidebar-width - 15px), 0, 0);

		&.toggled {
			.translate3d(0, 0, 0);
		}
	}

	a {
		color: rgba(255, 255, 255, 0.58);

		&:hover {
			color: @white;
		}
	}
}

/*--------------------------
    Header
----------------------------*/
.fes-header {
	margin-bottom: 40px;

	img,
	h2 {
		float: left;
	}

	h2 {
		margin: 13px 0 0 10px;
		font-weight: normal;
	}

	img {
		width: 32px;
	}
}

/*--------------------------
    List
----------------------------*/
.fesl-inner {
	height: ~"calc(100vh - 260px)";
	overflow: auto;
	padding: 0;
	margin: 0 -35px;

	& li {
		position: relative;

		& > a {
			display: block;
			padding: 10px 40px 12px 65px;
			.text-overflow();

			&:before {
				font-family: FontAwesome;
				content: '\f0a0';
				font-size: 17px;
				position: absolute;
				top: 10px;
				left: 35px;
				.opacity(0.8);
			}

			&.fesli-loading {
				&:before {
					.list-loader(20px, 20px, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
					left: 32px;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}

		&.active {
			background-color: rgba(0, 0, 0, 0.2);

			& > a {
				color: @white;
			}
		}

		&:not(.active):hover {
			background-color: rgba(0, 0, 0, 0.1);

			& > a {
				color: @white;
			}
		}

		&:hover {
			.fesli-trigger {
				.opacity(0.6);

				&:hover {
					.opacity(1);
				}
			}
		}
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	&:hover .scrollbar-vertical {
		opacity: 1;
	}
}

.fesli-trigger {
	.opacity(0);
	.transition(all);
	.transition-duration(200ms);
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
	cursor: pointer;
	background: url(../../img/more-h-light.svg) no-repeat left;
}

/* Scrollbar */
.scrollbar-vertical {
	position: absolute;
	right: 5px;
	width: 4px;
	height: 100%;
	opacity: 0;
	.transition(opacity);
	.transition-duration(300ms);

	div {
		border-radius: 1px !important;
		background-color: #6a6a6a !important;
	}
}

/*--------------------------
    Host
----------------------------*/
.fes-host {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1;
	background: @dark-gray;
	color: rgba(255, 255, 255, 0.4);
	font-size: 15px;
	font-weight: 400;
	width: @fe-sidebar-width;
	padding: 20px;
	.text-overflow();

	& > i {
		margin-right: 10px;
	}
}