mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
e68a139f4d
Summary: fix(undo-redo): UndoRedoComponent does not take props fix(category-picker): - Use Actions.queueTask like the rest of the app so UndoRedoStore can see it. Can change this in the future but it's currently the only place in the app we directly queue tasks. - Stop subscribing to the FocusedContentStore / FocusedCategoryStore (which are not used in setState?) since we receive threads as props - Rename categoryDatum to item because it's not a category. (Was super confused that categories were becoming JSON in `_extendCategoryWithDisplayData`) Give item a category property so that tasks can specify items and not IDs (allows for better descriptions like "Moved one thread to Archive" Add simple shouldComponentUpdate to retina-img Test Plan: Run tests Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D1832
186 lines
5.3 KiB
Plaintext
186 lines
5.3 KiB
Plaintext
@import "ui-variables";
|
|
|
|
@token-top:lighten(@background-secondary,0.6%);
|
|
@token-bottom:darken(@background-secondary, 2.5%);
|
|
|
|
@token-hover-top: mix(@token-top, @component-active-color, 92%);
|
|
@token-hover-bottom: mix(@token-bottom, @component-active-color, 90%);
|
|
|
|
@token-selected-top: mix(@token-top, @component-active-color, 15%);
|
|
@token-selected-bottom: mix(@token-bottom, @component-active-color, 0%);
|
|
|
|
@token-invalid-selected-top: mix(@token-top, red, 60%);
|
|
@token-invalid-selected-bottom: mix(@token-bottom, red, 55%);
|
|
|
|
.tokenizing-field {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
min-height: 42px;
|
|
position: relative;
|
|
|
|
.content-container {
|
|
border: 1px solid @border-secondary-bg;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
border-radius: @border-radius-small;
|
|
background-color: @background-color;
|
|
position: absolute;
|
|
}
|
|
|
|
.content-container.empty {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.header-container, .footer-container {
|
|
background-color: transparent;
|
|
padding:0;
|
|
margin:0;
|
|
border:0;
|
|
}
|
|
|
|
.token-editing-input {
|
|
max-width: 100%;
|
|
font-size: 15px;
|
|
line-height: 17px;
|
|
padding: 2em;//0.5em @spacing-three-quarters 0.5em @spacing-three-quarters;
|
|
padding-right: 1.5em;
|
|
margin: 3px 6px 6px 1px;
|
|
}
|
|
|
|
.token {
|
|
display: inline-block;
|
|
position: relative;
|
|
color: @text-color;
|
|
padding: 0.5em @spacing-three-quarters 0.5em @spacing-three-quarters;
|
|
padding-right: 1.5em;
|
|
margin: 3px 6px 6px 1px;
|
|
border-radius: @border-radius-base * 0.8;
|
|
max-width: 100%;
|
|
font-size: 15px;
|
|
line-height: 17px;
|
|
|
|
background: linear-gradient(to bottom, @token-top 0%, @token-bottom 100%);
|
|
box-shadow: 0 0.5px 0 rgba(0,0,0,0.17), 0 -0.5px 0 rgba(0,0,0,0.17), 0.5px 0 0 rgba(0,0,0,0.17), -0.5px 0 0 rgba(0,0,0,0.17), 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
|
|
.action {
|
|
position:absolute;
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0;
|
|
right: 7px;
|
|
background-color: transparent;
|
|
color: @text-color-very-subtle;
|
|
img { background-color: @text-color-very-subtle; }
|
|
font-size: 10px;
|
|
}
|
|
&:hover {
|
|
background: linear-gradient(to bottom, @token-hover-top 0%, @token-hover-bottom 100%);
|
|
box-shadow: 0 0.5px 0 darken(@token-hover-bottom, 35%), 0 -0.5px 0 darken(@token-hover-top, 25%), 0.5px 0 0 darken(@token-hover-bottom, 25%), -0.5px 0 0 darken(@token-hover-bottom, 25%), 0 1px 1px rgba(0, 0, 0, 0.07);
|
|
cursor: default;
|
|
}
|
|
&.invalid {
|
|
border-bottom:1px dashed red;
|
|
margin-bottom: -1px;
|
|
background: transparent;
|
|
&:hover {
|
|
box-shadow: 0 -0.5px 0 @token-invalid-selected-top, 0.5px 0 0 @token-invalid-selected-bottom, -0.5px 0 0 @token-invalid-selected-bottom, 0 1px 1px rgba(0, 0, 0, 0.07);
|
|
}
|
|
}
|
|
&.invalid.selected, &.invalid.dragging {
|
|
background: linear-gradient(to bottom, @token-invalid-selected-top 0%, @token-invalid-selected-bottom 100%);
|
|
box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid darken(@token-invalid-selected-bottom, 8%);
|
|
border-top: 1px solid darken(@token-invalid-selected-top, 10%);
|
|
}
|
|
|
|
&.selected,
|
|
&.dragging {
|
|
background: linear-gradient(to bottom, @token-selected-top 0%, @token-selected-bottom 100%);
|
|
box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid darken(@token-selected-bottom, 8%);
|
|
border-top: 1px solid darken(@token-selected-top, 10%);
|
|
border-radius: @border-radius-base;
|
|
|
|
// Note: we switch from 0.5px borders with box shadows to a real border,
|
|
// because the 0.5px shadows can't be as dark as we want. This means
|
|
// margins / border radius change by 1px.
|
|
margin: 2px 5px 5px 0;
|
|
|
|
color: @text-color-inverse;
|
|
.action {
|
|
color: @text-color-inverse-subtle;
|
|
img { background-color: @text-color-inverse-subtle; }
|
|
}
|
|
.secondary,
|
|
.participant-secondary {
|
|
color: @text-color-inverse-subtle;
|
|
}
|
|
}
|
|
&.dragging {
|
|
cursor: -webkit-grabbing;
|
|
}
|
|
}
|
|
|
|
|
|
.tokenizing-field-label {
|
|
color: @text-color-very-subtle;
|
|
float: left;
|
|
text-transform: capitalize;
|
|
padding-top: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.tokenizing-field-input {
|
|
position: relative;
|
|
padding-left: 2.8em;
|
|
|
|
&:hover {
|
|
cursor: text;
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
width: initial;
|
|
vertical-align:top;
|
|
border: none;
|
|
min-width: 0.5em;
|
|
background-color:transparent;
|
|
|
|
// NOTE: padding-top and padding-bottom need to match that of
|
|
// `.token`. to ensure they have the same baseline.
|
|
//
|
|
// The padding-left and padding-right must be 0 so we can manually
|
|
// set the width properly to always match the size of the input
|
|
// test.
|
|
padding: 0.4em 0 0.4em 7.5px;
|
|
margin: 2px 5px 3px 0;
|
|
|
|
&.noop-input {
|
|
position: absolute;
|
|
min-width: 0;
|
|
padding-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
input:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.placeholder {
|
|
color: fade(@text-color, 50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -0.8em;
|
|
left: 1em;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
body.is-blurred .tokenizing-field .token:not(.invalid) {
|
|
background: @background-secondary;
|
|
}
|