Changed scroll component button design. Removed unnecessary z-index from tooltip arrow.

This commit is contained in:
DebaucheryLibrarian 2020-12-28 00:02:18 +01:00
parent b4f6373605
commit 679e09f27e
2 changed files with 19 additions and 67 deletions

View File

@ -163,32 +163,6 @@ export default {
display: none; display: none;
} }
.scroll-light {
background: var(--background-dim);
.scroll-button {
.icon {
fill: var(--darken);
}
&.scroll-start .icon,
&.scroll-end .icon {
fill: var(--darken-weak);
}
&:hover:not(.scroll-start):not(.scroll-end) .icon {
fill: var(--text-dark);
}
}
.scroll-left {
background: linear-gradient(to right, var(--background-dim) 50%, transparent);
}
.scroll-right {
background: linear-gradient(to left, var(--background-dim) 50%, transparent);
}
.expand-dark { .expand-dark {
display: none; display: none;
} }
@ -196,42 +170,6 @@ export default {
.expand-light { .expand-light {
display: block; display: block;
} }
}
.scroll-dark {
background: var(--profile);
.scroll-button {
.icon {
fill: var(--lighten);
}
&.scroll-start .icon,
&.scroll-end .icon {
fill: var(--darken-weak);
}
&:hover:not(.scroll-start):not(.scroll-end) .icon {
fill: var(--text-light);
}
}
.scroll-left {
background: linear-gradient(to right, var(--profile) 50%, transparent);
}
.scroll-right {
background: linear-gradient(to left, var(--profile) 50%, transparent);
}
.expand-light {
display: none;
}
.expand-dark {
display: block;
}
}
.scroll-button { .scroll-button {
height: 100%; height: 100%;
@ -257,6 +195,21 @@ export default {
right: 0; right: 0;
} }
.icon {
width: 1.5rem;
height: 1.5rem;
fill: var(--lighten);
}
&.scroll-start .icon,
&.scroll-end .icon {
fill: var(--lighten-weak);
}
&:hover:not(.scroll-start):not(.scroll-end) .icon {
fill: var(--lighten-strong);
}
&:hover { &:hover {
display: flex; display: flex;
cursor: pointer; cursor: pointer;

View File

@ -133,7 +133,6 @@ export default {
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
z-index : 11;
top: -.5rem; top: -.5rem;
left: calc(50% - .5rem); left: calc(50% - .5rem);
border-left: .5rem solid transparent; border-left: .5rem solid transparent;