mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 01:36:06 +08:00
a83201ef7e
Summary: Fix label sorting... apparently we just synced them in creation date order Allow labels / folders to be nested using separators `.`, `/`, and `\` Allow collapsing of nested labels in sidebar Add overflow hidden to some core flexboxes, which dramatically reduces repaints because it knows columns will not overflow into other columns Prevent scroll region contents from re-rendering all the time, not sure why this works Add test for account sidebar store Test Plan: Run new test of AccountSidebarStore Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2181
242 lines
4.8 KiB
Plaintext
242 lines
4.8 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
#account-switcher,
|
|
#account-sidebar {
|
|
order: 1;
|
|
height: 100%;
|
|
background-color: @source-list-bg;
|
|
|
|
section {
|
|
margin-bottom: @padding-base-vertical;
|
|
|
|
section {
|
|
padding-left: @padding-base-horizontal * 1.3;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.heading {
|
|
color: @text-color-very-subtle;
|
|
font-weight: @font-weight-semi-bold;
|
|
font-size: @font-size-smaller;
|
|
padding-left:@padding-small-horizontal;
|
|
padding-top:@padding-small-horizontal;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.item-container {
|
|
display:flex;
|
|
align-items: center;
|
|
|
|
.disclosure-triangle {
|
|
flex-shrink: 0;
|
|
padding:7px;
|
|
width:20px;
|
|
visibility: hidden;
|
|
|
|
div {
|
|
transform:rotate(90deg);
|
|
transition: transform 90ms linear;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
border-left: 7px solid @text-color-very-subtle;
|
|
}
|
|
|
|
&.visible {
|
|
visibility: visible;
|
|
}
|
|
&.collapsed {
|
|
div {
|
|
transform:rotate(0deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
color: @text-color-subtle;
|
|
flex: 1;
|
|
img.content-mask {
|
|
background-color: @text-color-subtle;
|
|
vertical-align: text-bottom;
|
|
}
|
|
font-size: @font-size-small;
|
|
font-weight: 400;
|
|
padding-right: @spacing-standard;
|
|
line-height: @line-height-large * 1.1;
|
|
clear: both;
|
|
|
|
.unread {
|
|
font-weight: @font-weight-medium;
|
|
color: @source-list-active-bg;
|
|
background: @source-list-active-color;
|
|
margin-left:@padding-small-horizontal;
|
|
}
|
|
.icon {
|
|
float: left;
|
|
}
|
|
.name {
|
|
padding-left: @padding-small-horizontal * 0.85;
|
|
position:relative;
|
|
top:1px;
|
|
overflow: hidden;
|
|
padding-top: @padding-small-vertical;
|
|
padding-bottom:@padding-small-vertical;
|
|
line-height: @line-height-small;
|
|
}
|
|
&.selected {
|
|
background: @source-list-active-bg;
|
|
color: @source-list-active-color;
|
|
img.content-mask { background-color: @source-list-active-color; }
|
|
}
|
|
&.dropping {
|
|
background-color: lighten(@source-list-bg, 20%);
|
|
color: @source-list-active-color;
|
|
img.content-mask { background-color: @source-list-active-color; }
|
|
}
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.item-divider {
|
|
color:#586870;
|
|
padding-top: 1em;
|
|
padding-bottom: 0.25em;
|
|
}
|
|
}
|
|
|
|
#account-sidebar {
|
|
.name {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
#account-switcher {
|
|
border-bottom: 1px solid @border-color-divider;
|
|
|
|
.primary-item {
|
|
padding-top: @padding-large-vertical;
|
|
padding-bottom: @padding-base-vertical;
|
|
padding-left: 10px;
|
|
.name {
|
|
padding-left: 7px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
text-transform: lowercase;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toggle {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.dropdown {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform:scale(1, 0.2);
|
|
transform-origin: top;
|
|
transition: transform 125ms cubic-bezier(0.18, 0.89, 0.32, 1.12), opacity 100ms linear;
|
|
.inner {
|
|
opacity: 0;
|
|
transition: opacity 25ms linear;
|
|
transition-delay: 0;
|
|
}
|
|
margin-top: -7px;
|
|
background: lighten(@source-list-bg, 5%);
|
|
border: 1px solid @border-color-divider;
|
|
border-radius: @border-radius-base;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21);
|
|
|
|
position: absolute;
|
|
top: 54px;
|
|
width: 100%;
|
|
z-index: 999;
|
|
|
|
.account .gravatar {
|
|
top: 6px;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
display:block;
|
|
.gravatar {
|
|
background-size: 28px 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
border-radius: 4px;
|
|
top: -2px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.secondary-item {
|
|
&:hover {
|
|
background: @list-hover-bg;
|
|
}
|
|
|
|
padding: 6px 5px 0 14px;
|
|
|
|
&:first-child {
|
|
padding-top: 8px;
|
|
border-top-left-radius: @list-border-radius;
|
|
border-top-right-radius: @list-border-radius;
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 2px;
|
|
border-bottom-left-radius: @list-border-radius;
|
|
border-bottom-right-radius: @list-border-radius;
|
|
}
|
|
}
|
|
}
|
|
body.platform-win32 {
|
|
#account-switcher {
|
|
.dropdown {
|
|
border-radius: 0;
|
|
}
|
|
.item {
|
|
border-radius: 0;
|
|
}
|
|
.secondary-item {
|
|
&:first-child, &:last-child {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#account-switcher.open {
|
|
.dropdown {
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
transform:scale(1, 1);
|
|
transform-origin: top;
|
|
.inner {
|
|
opacity: 1;
|
|
transition: opacity 50ms linear;
|
|
transition-delay: 50ms;
|
|
}
|
|
}
|
|
.toggle {
|
|
transform: rotateX(0deg);
|
|
}
|
|
}
|
|
|
|
|
|
#account-switcher {
|
|
height: auto;
|
|
}
|