spacedeck-open/styles/folder-item.scss

221 lines
4.6 KiB
SCSS
Raw Normal View History

2017-04-07 01:29:05 +02:00
@import "vars";
@import "mixins";
.item {
min-height: 230px;
float: left;
width: 20%;
position: relative;
margin-right: -1px;
-webkit-transform-style: preserve-3d;
.folder-drop {
display:none;
}
&:hover {
cursor: move;
.handle,
.btn-group > .btn { opacity: 1 !important; }
> a .meta .type { opacity: 1 !important; }
> a .meta .subspaces, .members-online {
opacity: 1 !important;
}
}
&.appear > a,
&.creating > a {
-webkit-animation: appear 0.25s ease-out 0.05s;
-moz-animation: appear 0.25s ease-out 0.05s;
-ms-animation: appear 0.25s ease-out 0.05s;
-o-animation: appear 0.25s ease-out 0.05s;
animation: appear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
&.deleting > a {
-webkit-animation: disappear 0.25s ease-out 0.05s;
-moz-animation: disappear 0.25s ease-out 0.05s;
-ms-animation: disappear 0.25s ease-out 0.05s;
-o-animation: disappear 0.25s ease-out 0.05s;
animation: disappear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
&.tag-important > a {
background-color: #f1c40f;
}
&.renaming > a {
background-color: $blue !important;
color: white !important;
}
&.dropping {
.folder-drop {
display:block;
}
}
&.folder > a {
box-shadow: 2px 2px 0px #ccc;
}
> a {
opacity: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: white;
color: #505050;
font-weight: 400;
padding: 20px;
display: block;
text-decoration: none;
min-height: 150px;
font-size: 16px;
border-radius: 3px;
position: absolute;
width: auto;
height: auto;
top: 0px;
right: 30px;
bottom: 30px;
left: 0px;
.meta {
position: absolute;
width: auto;
bottom: 10px;
right: 20px;
left: 20px;
text-transform: uppercase;
font-family: $main-font;
.subspaces, .members-online {
opacity: 0.4;
}
.type {
// padding-left: 20px;
font-weight: 700;
float: left;
padding-left: 19px;
opacity: 0.4;
}
.time {
}
.icon {
position: absolute;
left: 0px;
top: auto;
font-size: 10px;
line-height: 14px;
width: 20px;
}
small {
font-size: 70%;
display: block;
}
}
.image {
display: block;
height: 125px;
margin: -20px;
margin-bottom: 12px;
background-size: cover;
background-color: white;
background-color: rgba(0,0,0,0.0125);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-position: center;
background-repeat: no-repeat;
}
.tag {
position: absolute;
top: 0px;
left: 0px;
background-color: red;
border-radius: 3px;
height: 100%;
width: 2px;
}
}
&.has-image .name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
max-height: 24px;
display: inline-block;
word-break: break-word;
}
.btn-group {
position: absolute;
right: 30px;
top: 0px;
z-index: 2;
> .btn { opacity: 0;}
&.open {
> .btn { opacity: 1; }
> .dropdown-menu {}
}
}
.handle {
position: absolute;
bottom: 0px;
top: auto;
right: 0px;
height: 30px;
width: 30px;
cursor: move;
display: none;
background-image: url("../images/handle.svg");
background-size: 10%;
background-position: bottom right;
background-repeat: no-repeat;
opacity: 0.05;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
&:hover {
width: 50px;
height: 50px;
background-size: 100%;
}
}
&:nth-child(1) > a .tag { background-color: #a45ab9; }
&:nth-child(2) > a .tag { background-color: #e65e85; }
&:nth-child(3) > a .tag { background-color: #f9ad27; }
&:nth-child(4) > a .tag { background-color: #000000; }
&:nth-child(5) > a .tag { background-color: #57c793; }
}