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.
500 lines
9.8 KiB
500 lines
9.8 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.fesl-item-name {
|
|
a {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
/*--------------------------
|
|
Icons
|
|
----------------------------*/
|
|
&[data-type=folder] {
|
|
.list-type(#a1d6dd, '\f114');
|
|
|
|
.fesl-item-name {
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
&[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;
|
|
}
|
|
} |