You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
minio/browser/app/less/inc/header.less

242 lines
4.8 KiB

/*--------------------------
Header
----------------------------*/
.fe-header {
padding: 45px 55px 20px;
@media(min-width: @screen-md-min) {
position: relative;
}
@media(max-width: (@screen-xs-max - 100)) {
padding: 25px 25px 20px;
}
h2 {
font-size: 16px;
font-weight: normal;
margin: 0;
& > span {
margin-bottom: 7px;
display: inline-block;
&:not(:first-child) {
&:before {
content: '/';
margin: 0 4px;
color: @text-color;
}
}
}
}
p {
margin-top: 7px;
}
}
/*--------------------------
Disk usage
----------------------------*/
.feh-usage {
margin-top: 12px;
max-width: 285px;
@media(max-width: (@screen-xs-max - 100px)) {
max-width: 100%;
font-size: 12px;
}
& > ul {
margin-top: 7px;
list-style: none;
padding: 0;
& > li {
padding-right: 0;
display: inline-block;
}
}
}
.fehu-chart {
height: 5px;
background: #eee;
position: relative;
border-radius: 2px;
overflow: hidden;
& > div {
position: absolute;
left: 0;
height: 100%;
background: @link-color;
}
}
/*--------------------------
Header Actions
----------------------------*/
.feh-actions {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
right: 35px;
top: 30px;
z-index: 11;
@media(max-width: (@screen-sm-max)) {
top: 7px;
right: 10px;
position: fixed;
}
& > li {
display: inline-block;
text-align: right;
vertical-align: top;
line-height: 100%;
& > a,
& > .btn-group > button {
display: block;
height: 45px;
min-width: 45px;
text-align: center;
border-radius: 50%;
padding: 0;
border: 0;
background: none;
@media(min-width: @screen-md-min) {
color: #7B7B7B;
font-size: 21px;
line-height: 45px;
.transition(all);
.transition-duration(300ms);
&:hover {
background: rgba(0,0,0,0.09);
}
}
@media(max-width: (@screen-sm-max)) {
background: url(../../img/more-h-light.svg) no-repeat center;
.fa-reorder {
display: none;
}
}
}
}
}
/*--------------------------
Mobile Header
----------------------------*/
@media(max-width: @screen-sm-max) {
.fe-header-mobile {
background-color: @dark-gray;
padding: 10px 50px 9px 12px;
text-align: center;
position: fixed;
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
left: 0;
top: 0;
width: 100%;
.mh-logo {
height: 35px;
position: relative;
top: 4px;
}
}
.feh-trigger {
width: 41px;
height: 41px;
cursor: pointer;
float: left;
position: relative;
text-align: center;
&:before,
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
&:after {
z-index: 1;
}
&:before {
background: rgba(255, 255, 255, 0.1);
.transition(all);
.transition-duration(300ms);
.scale(0);
}
}
.feht-toggled {
&:before {
.scale(1);
}
.feht-lines {
.rotate(180deg);
& > div {
&.top {
width: 12px;
transform: translateX(8px) translateY(1px) rotate(45deg);
-webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
}
&.bottom {
width: 12px;
transform: translateX(8px) translateY(-1px) rotate(-45deg);
-webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
}
}
}
}
.feht-lines,
.feht-lines > div {
.transition(all);
.transition-duration(300ms);
}
.feht-lines {
width: 18px;
height: 12px;
display: inline-block;
margin-top: 14px;
& > div {
background-color: #EAEAEA;
width: 18px;
height: 2px;
&.center {
margin: 3px 0;
}
}
}
}