miniobrowser: Bring Minio browser source into minio repo. (#3617)

browser/app/less/inc/sidebar.less

@@ -0,0 +1,187 @@
+/*--------------------------
+    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;
+	}
+}
+
+
+
+