mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-15 19:58:26 +08:00
b479e099c1
Summary: feat(messages): expandable message headers Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://review.inboxapp.com/D1267
172 lines
3.3 KiB
Text
172 lines
3.3 KiB
Text
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@message-max-width: 800px;
|
|
|
|
// This class wraps the items that appear above the message list in the
|
|
// toolbar. We want the toolbar items to sit right above the centered
|
|
// content, so we need another 800px-wide container in the toolbar...
|
|
.message-toolbar-items {
|
|
order: -100;
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
transition: opacity .25s ease-in-out;
|
|
|
|
.message-toolbar-items-inner {
|
|
margin: auto;
|
|
max-width: @message-max-width - @spacing-three-quarters*2;
|
|
text-align: left;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
// .message-toolbar-items also fades in and out when you select / deselect
|
|
.message-toolbar-items.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
#message-list {
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
order: 2;
|
|
|
|
.message-list-headers {
|
|
margin: 0 auto;
|
|
padding: @spacing-double;
|
|
padding-bottom: @spacing-standard;
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
|
|
.participants {
|
|
.contact-chip {
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-item-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
margin: 0 auto;
|
|
padding: @spacing-double 0;
|
|
&:first-child { padding-top: 0; }
|
|
|
|
border-bottom: 1px solid @border-primary-bg;
|
|
&:last-child { border-bottom: 0; }
|
|
|
|
&.collapsed {
|
|
padding: @spacing-standard @spacing-double;
|
|
}
|
|
}
|
|
|
|
.message-item-area {
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
padding: @spacing-standard @spacing-double;
|
|
|
|
.message-header {
|
|
position: relative;
|
|
font-size: @font-size-small;
|
|
.message-actions {
|
|
float:right;
|
|
padding-right:15px;
|
|
.btn-icon {
|
|
font-size:16px;
|
|
color:rgba(35, 31, 32, 0.1);
|
|
&:hover {
|
|
color:rgba(35, 31, 32, 0.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-time, .message-indicator {
|
|
color: @text-color-very-subtle;
|
|
float: right;
|
|
margin-left: 1em;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.message-indicator {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
border: 0;
|
|
padding: 0;
|
|
margin-top: @spacing-sub-double;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.collapse-headers {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.collapse-headers:hover {cursor: pointer;}
|
|
|
|
}
|
|
.attachments-area {
|
|
padding-top: @spacing-standard;
|
|
}
|
|
|
|
|
|
///////////////////////////////
|
|
// message-participants.cjsx //
|
|
///////////////////////////////
|
|
.message-participants {
|
|
|
|
&.collapsed:hover {cursor: pointer;}
|
|
|
|
.from-contact {
|
|
font-weight: @headings-font-weight;
|
|
color: @text-color;
|
|
}
|
|
|
|
.to-label, .cc-label {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
.cc-label {
|
|
margin-left: @spacing-standard;
|
|
}
|
|
.to-contact, .cc-contact, .to-everyone {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.to-label { font-weight: 600; }
|
|
|
|
.expanded-participants {
|
|
position: relative;
|
|
padding-right: 1.2em;
|
|
|
|
.from-label, .to-label, .cc-label {
|
|
float: left;
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.to-label, .cc-label {
|
|
margin-right: 1.15em;
|
|
}
|
|
|
|
.from-contact, .to-contact, .cc-contact {
|
|
padding-left: 2.85em;
|
|
}
|
|
}
|
|
}
|