Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-09-09 14:16:02 +08:00
Code Issues Projects Releases Packages Wiki Activity

🎨(theme-picker): Fix styling for non-Retina displays

Browse source
This commit is contained in:
Jackie Luo 2016-03-21 19:35:47 -07:00
parent 5dcb3a1bce
commit b1d49e8477
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
internal_packages/theme-picker/lib/theme-picker.jsx
View file

@ -66,7 +66,8 @@ class ThemePicker extends React.Component {
<div className="theme-picker" tabIndex="1"> <div className="theme-picker" tabIndex="1">
<Flexbox direction="column"> <Flexbox direction="column">
<RetinaImg <RetinaImg
style={{width: "14", height: "14", margin: "12px", WebkitFilter: "none"}} className="theme-picker-x"
style={{width: "14", height: "14", WebkitFilter: "none"}}
name="picker-close.png" name="picker-close.png"
mode={RetinaImg.Mode.ContentDark} mode={RetinaImg.Mode.ContentDark}
onMouseDown={() => Actions.closeModal()} /> onMouseDown={() => Actions.closeModal()} />
@ -81,7 +82,11 @@ class ThemePicker extends React.Component {
</Flexbox> </Flexbox>
</div> </div>
<div className="create-theme"> <div className="create-theme">
<a href="https://github.com/nylas/N1-theme-starter">Create a Theme</a> <a
href="https://github.com/nylas/N1-theme-starter"
style={{color: "#3187e1"}}>
Create a Theme
</a>
</div> </div>
</Flexbox> </Flexbox>
</div> </div>

17
internal_packages/theme-picker/styles/theme-picker.less
View file

@ -3,6 +3,9 @@
.theme-picker { .theme-picker {
text-align: center; text-align: center;
cursor: default; cursor: default;
.theme-picker-x {
margin: 6px;
}
h4 { h4 {
font-size: 14.5px; font-size: 14.5px;
margin-top: -10px; margin-top: -10px;
@ -12,7 +15,7 @@
width: 115px; width: 115px;
height: 70px; height: 70px;
margin: 2px; margin: 2px;
top: -10px; top: -20px;
iframe { iframe {
pointer-events: none; pointer-events: none;
position: relative; position: relative;
@ -24,9 +27,19 @@
text-align: center; text-align: center;
margin-top: 5px; margin-top: 5px;
a { a {
color: #3187e1;
text-decoration: none; text-decoration: none;
cursor: default; cursor: default;
} }
} }
} }
@media (-webkit-min-device-pixel-ratio: 2) {
.theme-picker {
.theme-picker-x {
margin: 12px;
}
.clickable-theme-option {
top: -10px;
}
}
}