From 2cac5e1edf496c4710cb8c449004674458f46abf Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Wed, 3 Jun 2015 11:07:59 -0700 Subject: [PATCH] fix(fakt): Switch to otf fonts with correct baseline, remove hacky styles --- .../stylesheets/account-sidebar.less | 5 ++--- .../message-list/lib/email-frame.cjsx | 8 ++++---- .../stylesheets/message-list.less | 2 +- .../search-bar/stylesheets/search-bar.less | 1 - .../thread-list/stylesheets/thread-list.less | 3 ++- .../today/stylesheets/today-view.less | 2 +- static/components/list-tabular.less | 2 +- static/components/tokenizing-text-field.less | 20 +++++++++++++------ static/variables/ui-variables.less | 8 ++++---- static/workspace.less | 2 +- 10 files changed, 30 insertions(+), 23 deletions(-) diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less index 035c06786..a6add0b89 100644 --- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less +++ b/internal_packages/account-sidebar/stylesheets/account-sidebar.less @@ -34,8 +34,8 @@ font-weight: @font-weight-medium; color: @source-list-active-bg; background: @source-list-active-color; - padding-top:@padding-small-vertical * 0.8; - padding-bottom:@padding-small-vertical * 0.8 - 2; + padding-top:@padding-small-vertical * 0.6; + padding-bottom:@padding-small-vertical * 0.6; margin-left:@padding-small-horizontal; } .name { @@ -53,7 +53,6 @@ } &:hover { - background: darken(@source-list-bg, 5%); cursor: default; } } diff --git a/internal_packages/message-list/lib/email-frame.cjsx b/internal_packages/message-list/lib/email-frame.cjsx index 750f800ca..eef9dfc11 100644 --- a/internal_packages/message-list/lib/email-frame.cjsx +++ b/internal_packages/message-list/lib/email-frame.cjsx @@ -10,28 +10,28 @@ EmailFixingStyles = """ font-family: 'FaktPro'; font-style: normal; font-weight: 300; - src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.ttf'), local('Comic Sans MS'); + src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.otf'), local('Comic Sans MS'); } @font-face { font-family: 'FaktPro'; font-style: normal; font-weight: 400; - src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS'); + src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.otf'), local('Comic Sans MS'); } @font-face { font-family: 'FaktPro'; font-style: normal; font-weight: 500; - src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.ttf'), local('Comic Sans MS'); + src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.otf'), local('Comic Sans MS'); } @font-face { font-family: 'FaktPro'; font-style: normal; font-weight: 600; - src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.ttf'), local('Comic Sans MS'); + src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.otf'), local('Comic Sans MS'); } /* Clean Message Display */ diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less index 213088150..1f77e74e9 100644 --- a/internal_packages/message-list/stylesheets/message-list.less +++ b/internal_packages/message-list/stylesheets/message-list.less @@ -32,7 +32,7 @@ color:@text-color-heading; -webkit-app-region: drag; margin:0; - margin-top:13px; + margin-top:11px; font-size: @font-size-h4; font-weight: @font-weight-normal; white-space: nowrap; diff --git a/internal_packages/search-bar/stylesheets/search-bar.less b/internal_packages/search-bar/stylesheets/search-bar.less index d5933c4e4..f0595515b 100644 --- a/internal_packages/search-bar/stylesheets/search-bar.less +++ b/internal_packages/search-bar/stylesheets/search-bar.less @@ -18,7 +18,6 @@ border:none; input { - padding-top: 3.5px; padding-left:30px; width: 100%; height: 30px; diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less index 310d4050c..a66f6d1f7 100644 --- a/internal_packages/thread-list/stylesheets/thread-list.less +++ b/internal_packages/thread-list/stylesheets/thread-list.less @@ -125,7 +125,8 @@ background-size: 100%; background-repeat: no-repeat; position: relative; - top:3px; + top: 5px; + vertical-align: top; } .thread-icon-attachment { background-image:url(../static/images/thread-list/icon-attachment-@2x.png); diff --git a/internal_packages/today/stylesheets/today-view.less b/internal_packages/today/stylesheets/today-view.less index 5c91bfe13..de86465ca 100644 --- a/internal_packages/today/stylesheets/today-view.less +++ b/internal_packages/today/stylesheets/today-view.less @@ -16,7 +16,7 @@ text-align:center; font-weight:500; font-size:11px; - line-height:19px; + line-height:16px; position:relative; top:5px; background-color:@text-color-very-subtle; diff --git a/static/components/list-tabular.less b/static/components/list-tabular.less index 85f7004ae..17ee5d3a8 100644 --- a/static/components/list-tabular.less +++ b/static/components/list-tabular.less @@ -78,7 +78,7 @@ .list-item { font-size: @font-size-base; - line-height: @line-height-computed * 1.15; + line-height: @line-height-computed; color: @text-color; background: @list-bg; diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less index b0dfe5e21..1f602f2b0 100644 --- a/static/components/tokenizing-text-field.less +++ b/static/components/tokenizing-text-field.less @@ -31,7 +31,7 @@ .token { display: inline-block; position: relative; - padding: 0.5em @spacing-half 0.10em @spacing-half; + padding: 0.4em @spacing-half 0.4em @spacing-half; padding-right: 1.5em; margin: 0 5px 5px 0; border-radius: @border-radius-base; @@ -43,7 +43,7 @@ position:absolute; padding: 0; padding-top: 1px; - right: 5px; + right: 7px; border: 0; margin: 0; background-color: transparent; @@ -58,7 +58,10 @@ &.dragging { background-color: @background-tertiary; color: @text-color-inverse; - .action { color: @text-color-inverse-subtle; } + .action { + color: @text-color-inverse-subtle; + img { -webkit-filter: brightness(100); } + } } &.dragging { cursor: -webkit-grabbing; @@ -85,12 +88,17 @@ input { display: inline-block; width: initial; - padding: 6px 0 3px 0; - margin: 0 5px 5px 0; + vertical-align:top; border: none; min-width: 5em; background-color:transparent; - vertical-align:bottom; + + // Note: padding and margin should match `.token` to ensure + // they have the same baseline! + padding: 0.4em @spacing-half 0.4em @spacing-half; + padding-right: 1.5em; + margin: 0 5px 5px 0; + &.noop-input { position: absolute; min-width: 0; diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index 59e0dd6c1..29965a6e0 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -90,28 +90,28 @@ font-family: 'FaktPro'; font-style: normal; font-weight: 300; - src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.ttf'), local('Comic Sans MS'); + src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.otf'), local('Comic Sans MS'); } @font-face { font-family: 'FaktPro'; font-style: normal; font-weight: 400; - src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS'); + src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.otf'), local('Comic Sans MS'); } @font-face { font-family: 'FaktPro'; font-style: normal; font-weight: 500; - src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.ttf'), local('Comic Sans MS'); + src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.otf'), local('Comic Sans MS'); } @font-face { font-family: 'FaktPro'; font-style: normal; font-weight: 600; - src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.ttf'), local('Comic Sans MS'); + src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.otf'), local('Comic Sans MS'); } @font-family-sans-serif: "FaktPro", "Helvetica", 'Lucida Grande', 'Segoe UI', sans-serif; diff --git a/static/workspace.less b/static/workspace.less index 05835bd09..d28acb636 100644 --- a/static/workspace.less +++ b/static/workspace.less @@ -158,7 +158,7 @@ body.is-blurred { } .btn-toolbar { - margin-top: @spacing-half; + margin-top: @spacing-half * 0.94; margin-left: @spacing-three-quarters; margin-right: @spacing-three-quarters; flex-shrink: 0;