ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix gradient and stack header spacing for safari

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-11-27 14:26:09 +01:00
parent 9af565b53b
commit 2822f480f1
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/board/Stack.vue
View File

@@ -279,24 +279,32 @@ export default {
z-index: 100; z-index: 100;
padding-left: $card-spacing; padding-left: $card-spacing;
cursor: grab; cursor: grab;
min-height: 44px;
// Smooth fade out of the cards at the top // Smooth fade out of the cards at the top
&:before { &:before {
content: ' '; content: ' ';
display: block; display: block;
position: absolute; position: absolute;
background-image: linear-gradient(180deg, var(--color-main-background) 3px, transparent 100%);
width: 100%; width: 100%;
height: 25px; height: 20px;
top: 35px; top: 30px;
right: 6px; right: 10px;
z-index: 99; z-index: 99;
transition: top var(--animation-slow); transition: top var(--animation-slow);
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
body.theme--dark & {
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
}
} }
&--add:before { &--add:before {
height: 80px; height: 80px;
background-image: linear-gradient(180deg, var(--color-main-background) 68px, transparent 100%); background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(255, 255, 255, 0) 100%);
body.theme--dark & {
background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(0, 0, 0, 0) 100%);
}
} }
& > * { & > * {
@@ -323,7 +331,9 @@ export default {
} }
.stack__card-add { .stack__card-add {
height: 52px; width: $stack-width;
height: 44px;
flex-shrink: 0;
z-index: 100; z-index: 100;
display: flex; display: flex;
margin-left: 12px; margin-left: 12px;
@@ -336,10 +346,10 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-right: 6px;
box-shadow: 0 0 3px var(--color-box-shadow); box-shadow: 0 0 3px var(--color-box-shadow);
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
overflow: hidden; overflow: hidden;
padding: 2px;
} }
&.icon-loading-small:after, &.icon-loading-small:after,