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

fix(button-borders): Use box-shadow to acheive 0.5px borders

Browse source
This commit is contained in:
Ben Gotow 2015-06-19 15:01:13 -07:00
parent cac8b22b27
commit 783dacf9a0
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/buttons.less
View file

@ -10,22 +10,26 @@ button, html input[type="button"] {
.btn { .btn {
padding: 0.33em 1em; padding: 0.33em 1em;
border:1px solid rgba(0,0,0,0.15);
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); border: 0;
cursor: default; cursor: default;
display:inline-block; display:inline-block;
color: @btn-default-text-color; color: @btn-default-text-color;
img.content-mask { background-color:@btn-default-text-color; } img.content-mask { background-color:@btn-default-text-color; }
background: linear-gradient(to top, rgba(241,241,241,0.75) 0%, rgba(253,253,253,0.75) 100%); background: linear-gradient(to top, rgba(241,241,241,0.75) 0%, rgba(253,253,253,0.75) 100%);
// Use 4 box shadows to create a 0.5px hairline around the button, and another
// for the actual shadow. Pending https://code.google.com/p/chromium/issues/detail?id=236371
// Yes, 1px border looks really bad on retina.
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
height: auto; height: auto;
line-height: 1; line-height: 1;
&:active { &:active {
cursor: default; cursor: default;
background-color: darken(@btn-default-bg-color, 9%); background-color: darken(@btn-default-bg-color, 9%);
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.21); box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 -1px 1px rgba(0, 0, 0, 0.21);
} }
&:focus { &:focus {
outline: none outline: none