mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
df13b06c2a
Summary: ScrollRegion with support for tooltips shown as you scroll, custom tooltips for thread list and message list. fix(specs): all other scrollbars hidden to prevent incompatibility fix scrollbar sizing when used in conjunction with resizableregion Test Plan: Need to write tests and docs for ScrollRegion - no tests yet Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D1597
104 lines
2.3 KiB
Plaintext
104 lines
2.3 KiB
Plaintext
@import "ui-variables";
|
|
|
|
@tooltipBorderColor: rgba(54, 56, 57, 0.9);
|
|
@tooltipBackground: -webkit-gradient(linear, left top, left bottom, from(rgba(99, 102, 103, 0.9)), to(rgba(82, 85, 86, 0.9)));
|
|
|
|
.scroll-tooltip {
|
|
background: @tooltipBackground;
|
|
color: white;
|
|
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
|
|
padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
|
|
border: 1px solid @tooltipBorderColor;
|
|
border-radius: @border-radius-base;
|
|
transform: translate(-15px, 0);
|
|
position: relative;
|
|
white-space:nowrap;
|
|
}
|
|
.scroll-tooltip:after, .scroll-tooltip:before {
|
|
left: 100%;
|
|
top: 50%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.scroll-tooltip:after {
|
|
border-color: transparent;
|
|
border-left-color: lighten(rgba(99, 102, 103, 1), 3%);
|
|
border-width: 8px;
|
|
margin-top: -8px;
|
|
}
|
|
.scroll-tooltip:before {
|
|
border-color: transparent;
|
|
border-left-color: darken(@tooltipBorderColor, 20%);
|
|
border-width: 9px;
|
|
margin-top: -9px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scroll-region {
|
|
position:relative;
|
|
|
|
.scroll-region-content {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.scrollbar-track {
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
transition-delay: 0.5s;
|
|
padding:3px;
|
|
width:17px;
|
|
background: @list-bg;
|
|
border-left: 1px solid @border-color-divider;
|
|
&:hover {
|
|
opacity: 1;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
/* Used to read the track height with padding applied. */
|
|
.scrollbar-track-inner {
|
|
height:100%;
|
|
}
|
|
|
|
.scrollbar-handle {
|
|
background-color: lighten(@gray, 40%);
|
|
border:1px solid lighten(@gray, 30%);
|
|
border-radius:8px;
|
|
.tooltip {
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
top: 50%;
|
|
transform: translate(-100%, -50%);
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scroll-region.scrolling {
|
|
.scrollbar-track {
|
|
opacity: 1;
|
|
transition-delay: 0s;
|
|
}
|
|
}
|
|
.scroll-region.dragging {
|
|
.scrollbar-track {
|
|
opacity: 1;
|
|
.scrollbar-handle {
|
|
cursor: default;
|
|
background-color: lighten(@gray, 30%);
|
|
border:1px solid lighten(@gray, 20%);
|
|
.tooltip {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
} |