Changed scroll component button design. Removed unnecessary z-index from tooltip arrow.
This commit is contained in:
parent
b4f6373605
commit
679e09f27e
|
@ -163,74 +163,12 @@ export default {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-light {
|
.expand-dark {
|
||||||
background: var(--background-dim);
|
display: none;
|
||||||
|
|
||||||
.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 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-light {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-dark {
|
.expand-light {
|
||||||
background: var(--profile);
|
display: block;
|
||||||
|
|
||||||
.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 {
|
||||||
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue