Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-20 23:36:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Apply theme CSS to the “multiple items selected” stack correctly

Browse source
This commit is contained in:
Ben Gotow 2017-11-09 20:43:13 +01:00
parent 02216164dd
commit 38bff9b4f3
4 changed files with 12 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/internal_packages/thread-list/assets/graphic-stackable-card-filled.svg
View file

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="390px" height="527px" viewBox="0 0 390 527" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2" stroke="#E2E2E2" stroke-width="2.5" fill="#FFFFFF" x="0" y="0" width="390" height="527" rx="15"></rect>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 608 B

8
app/internal_packages/thread-list/lib/selected-items-stack.jsx
View file

@ -53,7 +53,13 @@ class SelectedItemsStack extends Component {
transform,
zIndex: 5 - idx,
};
return <div key={`card-${idx}`} style={style} className="card" />;
return (
<div key={`card-${idx}`} style={style} className="card">
<svg width="100%" height="100%" viewBox="0 0 390 527" version="1.1">
<rect strokeWidth="2.5" x="0" y="0" width="390" height="527" rx="15" />
</svg>
</div>
);
})}
</div>
<div className="count-info">

7
app/internal_packages/thread-list/styles/selected-items-stack.less
View file

@ -1,5 +1,4 @@
@import 'ui-variables';
@img-path: '../internal_packages/thread-list/assets/graphic-stackable-card-filled.svg';
.selected-items-stack {
display: flex;
@ -22,8 +21,10 @@
left: 0;
width: 198px;
height: 268px;
background: url(@img-path);
background-size: 198px 268px;
svg {
stroke: @border-color-divider;
fill: @background-primary;
}
}
}

1
app/internal_packages/ui-ubuntu/styles/ui-variables.less
View file

@ -6,6 +6,7 @@
@accent-primary: #f07746;
@accent-primary-dark: darken(#f07746, 1%);
@border-color-divider: #e2e2e2;
@border-color-secondary: lighten(@background-secondary, 10%);
@toolbar-background-color: #41403b;