mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
f63b7e66e4
Summary: This diff does two things: - It adds a new SwipeContainer that makes it easy to implement swipe gestures. This is built into listTabular, so you can create a list and define onSwipeLeft/Right to enable gestures. - It adds support for basic add/remove animations to the thread list. This works by adding a CSS transition to `top` and also leaving removed rows around for a specified time. (these times need to match.) Pretty much just cloned the core idea from TimeoutTransitionGroup. Test Plan: No tests yet Reviewers: evan, juan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2581
131 lines
2.7 KiB
Plaintext
131 lines
2.7 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;
|
|
pointer-events: none;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
.scroll-region {
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
position:relative;
|
|
|
|
.scroll-region-content {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
z-index: 1; // Important so that content does not repaint with container
|
|
}
|
|
|
|
.scroll-region-content-inner {
|
|
transform:translate3d(0,0,0);
|
|
}
|
|
}
|
|
|
|
.scroll-region.scrolling {
|
|
.scroll-region-content-inner {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&.scrolling {
|
|
opacity: 1;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
&.dragging {
|
|
opacity: 1;
|
|
.scrollbar-handle {
|
|
cursor: default;
|
|
background-color: lighten(@gray, 30%);
|
|
border:1px solid lighten(@gray, 20%);
|
|
.tooltip {
|
|
opacity: 1;
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
display:none;
|
|
transition: opacity 0.3s;
|
|
top: 50%;
|
|
transform: translate(-100%, -50%);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
body.platform-win32 {
|
|
.scroll-tooltip {
|
|
border-radius: 0;
|
|
}
|
|
.scrollbar-track {
|
|
.scrollbar-handle {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|