wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-23 16:56:07 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update ShowMore (#467)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-01 17:55:42 +03:00 committed by GitHub
parent 535bbee930
commit 22346805a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/activity-resources/src/components/ShowMore.svelte
View File

@ -36,6 +36,7 @@
bind:clientHeight={cHeight} bind:clientHeight={cHeight}
class="showMore-content" class="showMore-content"
class:crop={!ignore && crop} class:crop={!ignore && crop}
class:full={bigger && !ignore && !crop}
><slot /></div> ><slot /></div>
{#if !ignore && bigger} {#if !ignore && bigger}
@ -52,8 +53,9 @@
&.crop { &.crop {
overflow: hidden; overflow: hidden;
max-height: 15rem; max-height: 15rem;
mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 2.5rem, rgba(0, 0, 0, 1) 3rem); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, black 5rem);
} }
&.full { margin-bottom: 2.75rem; }
} }
.showMore { .showMore {
@ -61,9 +63,9 @@
left: 50%; left: 50%;
bottom: 0; bottom: 0;
padding: .5rem 1rem; padding: .5rem 1rem;
width: max-content; transform: translateX(-50%);
font-weight: 500; word-wrap: none;
font-size: .75rem; font-size: .75rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background: var(--theme-showmore-color); background: var(--theme-showmore-color);
@ -73,24 +75,9 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
opacity: 1;
transform: translateX(-50%) scale(.97);
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
&:hover { transform: translateX(-50%) scale(1); }
&:active { transform: translateX(-50%) scale(.99); }
&.outter { &.outter {
bottom: -1.85rem; bottom: -2.75rem;
opacity: .7; transform: translateX(-50%);
transform: translateX(-50%) scale(.80);
&:hover {
opacity: 1;
transform: translateX(-50%) scale(.83);
}
&:active {
opacity: .95;
transform: translateX(-50%) scale(.82);
}
} }
} }
</style> </style>