mirror of
https://github.com/minio/minio.git
synced 2025-11-28 13:09:09 -05:00
Browser: Update UI with new components and elements (#5671)
This commit is contained in:
Rushan
Harshavardhana
@@ -1,210 +1,160 @@
|
||||
/*--------------------------
|
||||
Sidebar
|
||||
----------------------------*/
|
||||
.fe-sidebar {
|
||||
width: @fe-sidebar-width;
|
||||
background-color: @dark-gray;
|
||||
// Base
|
||||
.sidebar {
|
||||
max-width: @sidebar-width;
|
||||
background-color: @sidebar-bg;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 25px;
|
||||
z-index: @sidebar-z-index;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.transition(transform);
|
||||
.transition-duration(200ms);
|
||||
|
||||
@media(min-width: @screen-md-min) {
|
||||
.translate3d(0, 0, 0);
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: 100%;
|
||||
|
||||
&.sidebar--toggled {
|
||||
.translate3d((-@sidebar-width - 15px), 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);
|
||||
@media (max-width: @screen-sm-max) {
|
||||
width: 85%;
|
||||
box-shadow: 0 0 1.3rem rgba(0, 0, 0, 0.1);
|
||||
.translate3d((-@sidebar-width - 1rem), 0, 0);
|
||||
|
||||
&.toggled {
|
||||
&.sidebar--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;
|
||||
}
|
||||
.sidebar__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*--------------------------
|
||||
List
|
||||
----------------------------*/
|
||||
.fesl-inner {
|
||||
height: ~"calc(100vh - 260px)";
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0 -25px;
|
||||
// Logo
|
||||
.logo {
|
||||
padding: @sidebar-padding;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
|
||||
& li {
|
||||
position: relative;
|
||||
.logo__img {
|
||||
height: 4rem;
|
||||
margin: -0.6rem 0.55rem 0 -0.75rem;
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 10px 45px 12px 55px;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:before {
|
||||
font-family: FontAwesome;
|
||||
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: #282e32;
|
||||
|
||||
& > a {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
& > a {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bucket-dropdown .dropdown-toggle {
|
||||
.opacity(0.6);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.logo__title {
|
||||
& > h2 {
|
||||
font-weight: @font-weight-normal;
|
||||
line-height: 100%;
|
||||
font-size: 1.33rem;
|
||||
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: @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;
|
||||
}
|
||||
& > small {
|
||||
display: block;
|
||||
margin-top: 0.33rem;
|
||||
padding-left: 1px;
|
||||
color: @text-muted-color;
|
||||
font-size: @font-size-small;
|
||||
max-width: @sidebar-width - 80;
|
||||
.text-overflow();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Buckets
|
||||
.buckets {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.buckets__search {
|
||||
padding: 0 @sidebar-padding;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buckets__item {
|
||||
padding: 0.8rem @sidebar-padding 0.8rem @sidebar-padding*2.2;
|
||||
background: url(../../img/icons/bucket.svg) no-repeat left 2.2rem center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
& > a {
|
||||
&, &:focus, &:hover {
|
||||
color: @headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.buckets__item__actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buckets__item--active {
|
||||
&:after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
#gradient > .horizontal(#f3f3f3; @white);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.buckets__item__actions {
|
||||
position: absolute !important;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
.transition(opacity);
|
||||
.transition-duration(300ms);
|
||||
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Backdrop for mobile
|
||||
@media(min-width: @screen-md-min) {
|
||||
.sidebar-backdrop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: @screen-sm-max) {
|
||||
.sidebar-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: @sidebar-z-index - 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar--toggled {
|
||||
& + .content {
|
||||
.sidebar-backdrop {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user