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/list.less

486 lines
9.6 KiB

/*--------------------------
Row
----------------------------*/
.fesl-row {
position: relative;
@media (min-width: (@screen-sm-min - 100px)) {
padding: 5px 20px 5px 40px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
@media(max-width: (@screen-xs-max - 100px)) {
padding: 5px 20px;
}
.clearfix();
}
header.fesl-row {
@media (min-width:(@screen-sm-min - 100px)) {
margin-bottom: 20px;
border-bottom: 1px solid lighten(@text-muted-color, 20%);
padding-left: 30px;
.fesl-item,
.fesli-sort {
.transition(all);
.transition-duration(300ms);
}
.fesl-item {
cursor: pointer;
color: @text-color;
font-weight: 500;
margin-bottom: -5px;
& > .fesli-sort {
float: right;
margin: 4px 0 0;
.opacity(0);
color: @dark-gray;
font-size: 14px;
}
&:hover:not(.fesl-item-actions) {
background: lighten(@text-muted-color, 22%);
color: @dark-gray;
& > .fesli-sort {
.opacity(0.5);
}
}
}
}
@media (max-width:(@screen-xs-max - 100px)) {
display: none;
}
}
.list-type(@background, @icon) {
.fis-icon {
background-color: @background;
&:before {
content: @icon;
}
}
}
div.fesl-row {
border-bottom: 1px solid transparent;
cursor: default;
.transition(background-color);
.transition-duration(500ms);
@media (max-width: (@screen-xs-max - 100px)) {
padding: 5px 20px;
}
&:not(.fesl-row-selected) {
&:nth-child(even) {
background-color: @list-row-even-bg;
}
}
&:hover {
.fis-icon {
&:before {
.opacity(0)
}
}
.fis-helper {
&:before {
.opacity(1);
}
}
}
/*--------------------------
Icons
----------------------------*/
&[data-type=folder] { .list-type(#a1d6dd, '\f114'); }
&[data-type=pdf] {.list-type(#fa7775, '\f1c1'); }
&[data-type=zip] { .list-type(#427089, '\f1c6'); }
&[data-type=audio] { .list-type(#009688, '\f1c7'); }
&[data-type=code] { .list-type(#997867, "\f1c9"); }
&[data-type=excel] { .list-type(#64c866, '\f1c3'); }
&[data-type=image] { .list-type(#f06292, '\f1c5'); }
&[data-type=video] { .list-type(#f8c363, '\f1c8'); }
&[data-type=other] { .list-type(#afafaf, '\f016'); }
&[data-type=text] { .list-type(#8a8a8a, '\f0f6'); }
&[data-type=doc] { .list-type(#2196f5, '\f1c2'); }
&[data-type=presentation] { .list-type(#896ea6, '\f1c4'); }
&.fesl-loading{
&:before {
content: '';
}
&:after {
.list-loader(20px, 20px, rgba(255, 255, 255, 0.5), @white);
left: 57px;
top: 17px;
@media (max-width: (@screen-xs-max - 100px)) {
left: 27px;
}
}
}
}
.fesl-row-selected {
background-color: @list-row-selected-bg;
&, .fesl-item a {
color: darken(@text-color, 10%);
}
}
.fi-select {
float: left;
position: relative;
width: 35px;
height: 35px;
margin: 3px 0;
@media(max-width: (@screen-xs-max - 100px)) {
margin-right: 15px;
}
input {
position: absolute;
left: 0;
top: 0;
width: 35px;
height: 35px;
z-index: 8;
opacity: 0;
cursor: pointer;
&:checked {
& ~ .fis-icon {
background-color: #32393F;
&:before {
opacity: 0;
}
}
& ~ .fis-helper {
&:before {
.scale(0);
}
&:after {
.scale(1);
}
}
}
}
}
.fis-icon {
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 35px;
height: 35px;
.transition(background-color);
.transition-duration(250ms);
&:before {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
border-radius: 50%;
font-family: @font-family-icon;
line-height: 35px;
font-size: 16px;
color: @white;
.transition(all);
.transition-duration(300ms);
font-style: normal;
}
}
.fis-helper {
&:before,
&:after {
position: absolute;
.transition(all);
.transition-duration(250ms);
}
&:before {
content: '';
width: 15px;
height: 15px;
border: 2px solid @white;
z-index: 7;
border-radius: 2px;
top: 10px;
left: 10px;
opacity: 0;
}
&:after {
font-family: @font-family-icon;
content: '\f00c';
top: 8px;
left: 9px;
color: @white;
font-size: 14px;
.scale(0);
}
}
/*--------------------------
Files and Folders
----------------------------*/
.fesl-item {
display: block;
a {
color: darken(@text-color, 5%);
}
@media(min-width: (@screen-sm-min - 100px)) {
&:not(.fesl-item-actions):not(.fesl-item-icon) {
text-overflow: ellipsis;
padding: 10px 15px;
white-space: nowrap;
overflow: hidden;
}
&.fesl-item-name {
flex: 3;
}
&.fesl-item-size {
width: 140px;
}
&.fesl-item-modified {
width: 190px;
}
&.fesl-item-actions {
width: 40px;
}
}
@media(max-width: (@screen-xs-max - 100px)) {
padding: 0;
&.fesl-item-name {
width: 100%;
margin-bottom: 3px;
}
&.fesl-item-size,
&.fesl-item-modified {
font-size: 12px;
color: #B5B5B5;
float: left;
}
&.fesl-item-modified {
max-width: 72px;
white-space: nowrap;
overflow: hidden;
}
&.fesl-item-size {
margin-right: 10px;
}
&.fesl-item-actions {
position: absolute;
top: 5px;
right: 10px;
}
}
}
/*--------------------------
Action buttons
----------------------------*/
.fia-toggle {
height: 36px;
width: 36px;
background: transparent url(../../img/more-h.svg) no-repeat center;
position: relative;
top: 3px;
.opacity(0.4);
&:hover {
.opacity(0.7);
}
}
.fesl-item-actions {
.dropdown-menu {
background-color: transparent;
box-shadow: none;
padding: 0;
right: 38px;
left: auto;
margin: 0;
height: 100%;
text-align: right;
}
.dropdown {
&.open {
.dropdown-menu {
.fiad-action {
right: 0;
}
}
}
}
}
.fiad-action {
height: 35px;
width: 35px;
background: @amber;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 35px;
font-weight: normal;
position: relative;
top: 4px;
margin-left: 5px;
.animation-name(fiad-action-anim);
.transform-origin(center center);
.backface-visibility(none);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
&:nth-child(2) {
.animation-duration(100ms);
}
&:nth-child(1) {
.animation-duration(250ms);
}
& > i {
font-size: 14px;
color: @white;
}
&:hover {
background-color: darken(@amber, 3%);
}
}
.list-actions {
position: fixed;
.translate3d(0, -100%, 0);
.opacity(0);
.transition(all);
.transition-duration(200ms);
padding: 20px 70px 20px 25px;
top: 0;
left: 0;
width: 100%;
background-color: @brand-primary;
z-index: 20;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
text-align: center;
&.list-actions-toggled {
.translate3d(0, 0, 0);
.opacity(1);
}
}
.la-close {
position: absolute;
right: 20px;
top: 0;
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px !important;
background: rgba(255, 255, 255, 0.1);
font-weight: normal;
bottom: 0;
margin: auto;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
.la-label {
color: @white;
float: left;
padding: 4px 0;
.fa {
font-size: 22px;
vertical-align: top;
margin-right: 10px;
margin-top: -1px;
}
}
.la-actions {
button {
background-color: transparent;
border: 2px solid rgba(255,255,255,0.9);
color: @white;
border-radius: 2px;
padding: 5px 10px;
font-size: 13px;
.transition(all);
.transition-duration(300ms);
margin-left: 10px;
&:hover {
background-color: @white;
color: @brand-primary;
}
}
}
@-webkit-keyframes fiad-action-anim {
from {
.scale(0);
.opacity(0);
right: -20px;
}
to {
.scale(1);
.opacity(1);
right: 0;
}
}
@keyframes fiad-action-anim {
from {
.scale(0);
.opacity(0);
right: -20px;
}
to {
.scale(1);
.opacity(1);
right: 0;
}
}