From 783dacf9a06fdae25bb1a8605b86dd97e1db93ba Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Fri, 19 Jun 2015 15:01:13 -0700 Subject: [PATCH] fix(button-borders): Use box-shadow to acheive 0.5px borders --- static/buttons.less | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/static/buttons.less b/static/buttons.less index 5bf16c9d2..cefce27e8 100644 --- a/static/buttons.less +++ b/static/buttons.less @@ -10,22 +10,26 @@ button, html input[type="button"] { .btn { padding: 0.33em 1em; - border:1px solid rgba(0,0,0,0.15); border-radius: @border-radius-base; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + border: 0; cursor: default; display:inline-block; 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%); + // 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; line-height: 1; &:active { cursor: default; 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 { outline: none