minio/browser/app/less/inc/file-explorer.less

/*------------------------------
   	Layout
--------------------------------*/
.file-explorer {
	background-color: @white;
	position: relative;
	height: 100%;

	&.toggled {
		height: 100vh;
		overflow: hidden;
	}
}

.fe-body {
	@media(min-width: @screen-md-min) {
		padding: 0 0 40px @fe-sidebar-width;
	}

	@media(max-width: @screen-sm-max) {
		padding: 75px 0 80px;
	}

	min-height:100vh;
	overflow: auto;
}


/*------------------------------
    Create and Upload Button
--------------------------------*/
.feb-actions {
	position: fixed;
	bottom: 30px;
	right: 30px;

	.dropdown-menu {
		min-width: 55px;
		width: 55px;
		text-align: center;
		background: transparent;
		box-shadow: none;
		margin: 0;
	}

	&.open {
		.feba-btn {
			.scale(1);

			&:first-child {
				.animation-name(feba-btn-anim);
				.animation-duration(300ms);
			}

			&:last-child {
				.animation-name(feba-btn-anim);
				.animation-duration(100ms);
			}
		}

		.feba-toggle {
			background: darken(@red, 10%);

			& > span {
				.rotate(135deg);
			}
		}
	}
}

.feba-toggle {
	width: 55px;
	height: 55px;
	line-height: 55px;
	border-radius: 50%;
	background: @red;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
	display: inline-block;
	text-align: center;
	border: 0;
	padding: 0;
	
	span {
		display: inline-block;
		height: 100%;
		width: 100%;
	}

	i {
		color: @white;
		font-size: 17px;
		line-height: 58px;
	}
}

.feba-toggle,
.feba-toggle > span {
	.transition(all);
	.transition-duration(250ms);
	.backface-visibility(hidden);
}

.feba-btn {
	width: 40px;
	margin-top: 10px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	display: inline-block;
	color: @white;
	line-height: 40px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
	-webkit-transform: scale(0);
	transform: scale(0);
	position: relative;

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

	label {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		cursor: pointer;
	}
}

.feba-bucket {
	background: @orange;
}

.feba-upload {
	background: @yellow;
}

@-webkit-keyframes feba-btn-anim {
	from {
		.scale(0);
		.opacity(0);
	}
	to {
		.scale(1);
		.opacity(1);
	}
}

@keyframes feba-btn-anim {
	from {
		.scale(0);
		.opacity(0);
	}
	to {
		.scale(1);
		.opacity(1);
	}
}