ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: merge attachment styles with component

Browse Source 
also add bounce animation that is just used there
This commit is contained in:
Dominik Pschenitschni
2021-10-18 14:19:52 +02:00
parent 265081417d
commit 08f84bf7e3
5 changed files with 134 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/components/_index.scss
View File

@ -1,4 +1,3 @@
@import "attachments";
@import "gantt";
@import "tooltip";
@import "labels";

105
src/styles/components/attachments.scss
View File

@ -1,105 +0,0 @@
.attachments {
input[type=file] {
display: none;
}
.files {
margin-bottom: 1rem;
.attachment {
margin-bottom: .5rem;
display: block;
transition: background-color $transition;
border-radius: $radius;
padding: .5rem;
&:hover {
background-color: $grey-200;
}
.filename {
font-weight: bold;
margin-bottom: .25rem;
color: $text;
}
.info {
color: $grey-500;
font-size: .9rem;
p {
margin-bottom: 0;
display: flex;
> span:not(:last-child):after,
> a:not(:last-child):after {
content: '·';
padding: 0 .25rem;
}
@media screen and (max-width: $mobile) {
&.collapses {
flex-direction: column;
> span:not(:last-child):after,
> a:not(:last-child):after {
display: none;
}
.user .username {
display: none;
}
}
}
}
}
}
}
@media screen and (max-width: $tablet) {
.button {
width: 100%;
}
}
.dropzone {
position: fixed;
background: rgba(250, 250, 250, 0.8);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
text-align: center;
&.hidden {
display: none;
}
.drop-hint {
position: absolute;
bottom: 0;
left: 0;
right: 0;
.icon {
width: 100%;
font-size: 5rem;
height: auto;
text-shadow: $shadow-md;
animation: bounce 2s infinite;
}
.hint {
margin: .5rem auto 2rem;
border-radius: 2px;
box-shadow: $shadow-md;
background: $primary;
padding: 1rem;
color: $white;
width: 100%;
max-width: 300px;
}
}
}
}