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

160 lines
2.2 KiB
Text

/*------------------------------
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);
}
}