frostfs-s3-gw/browser/app/less/inc/sidebar.less

212 lines
3 KiB
Text
Raw Normal View History

/*--------------------------
Sidebar
----------------------------*/
.fe-sidebar {
width: @fe-sidebar-width;
background-color: @fe-sidebar-bg;
position: fixed;
height: 100%;
overflow: hidden;
padding: 25px;
@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.75);
&:hover {
color: @white;
}
}
}
/*--------------------------
Header
----------------------------*/
.fes-header {
margin-bottom: 40px;
img,
h2 {
float: left;
}
h2 {
margin: 6px 0 0 13px;
font-weight: normal;
color: @white;
font-size: 20px;
}
img {
width: 20px;
}
}
/*--------------------------
List
----------------------------*/
.fesl-inner {
height: ~"calc(100vh - 260px)";
overflow: auto;
padding: 0;
margin: 0 -25px;
& li {
position: relative;
& > a {
display: block;
padding: 10px 45px 12px 55px;
word-wrap: break-word;
&:before {
font-family: 'Font Awesome 5 Free';
content: '\f0a0';
font-size: 17px;
position: absolute;
top: 10px;
left: 25px;
.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.1);
& > a {
color: @white;
}
}
&:not(.active):hover {
background-color: rgba(0, 0, 0, 0.05);
& > a {
color: @white;
}
}
&:hover {
.bucket-dropdown .dropdown-toggle {
.opacity(0.6);
&:hover {
.opacity(1);
}
}
}
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
&:hover .scrollbar-vertical {
opacity: 1;
}
}
/* Dropdown */
.bucket-dropdown {
position: absolute;
top: 0px;
right: 0px;
width: 35px;
height: 100%;
cursor: pointer;
color: @white;
.dropdown-toggle {
.opacity(0);
.transition(all);
.transition-duration(200ms);
font-size: 20px;
background-color: transparent;
}
.dropdown-menu-right {
padding: 15px 0;
margin-top: -1px;
& li {
a:before {
content: none;
-webkit-box-shadow: @dropdown-shadow;
box-shadow: @dropdown-shadow;
}
&:not(.active):hover {
& > a {
color: @dropdown-link-hover-color;
}
}
}
}
}
/* 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-color: rgba(0,0,0,0.1);
font-size: 15px;
font-weight: 400;
width: @fe-sidebar-width;
padding: 20px;
.text-overflow();
& > i {
margin-right: 10px;
}
}