From 11555d3eb1defe4978814f6eb7435f55ceb41177 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 17 Nov 2015 16:13:59 +0800 Subject: [PATCH] Update style for adjust iconfont baseline again Finally, we can say goodbye to top:-1px and top:1px --- components/iconfont/index.md | 2 +- site/static/style.css | 4 +--- style/components/alert.less | 2 +- style/components/breadcrumb.less | 7 +------ style/components/collapse.less | 2 +- style/components/datepicker/Calendar.less | 2 +- style/components/menu.less | 3 +-- style/components/message.less | 2 +- style/components/notification.less | 2 +- style/components/popover.less | 2 -- style/components/steps.less | 4 +--- style/components/table.less | 4 ---- style/components/tabs.less | 2 +- style/components/tag.less | 2 -- style/components/timeline.less | 2 +- style/components/tree.less | 2 +- style/components/upload.less | 2 +- style/core/iconfont.less | 5 +++-- style/mixins/button.less | 6 ------ style/themes/default/custom.less | 2 +- 20 files changed, 18 insertions(+), 41 deletions(-) diff --git a/components/iconfont/index.md b/components/iconfont/index.md index b3cd0e5099..2fce5782af 100644 --- a/components/iconfont/index.md +++ b/components/iconfont/index.md @@ -157,7 +157,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward' const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle']; -const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice']; +const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode']; ReactDOM.render(, document.getElementById('iconset-direction')); diff --git a/site/static/style.css b/site/static/style.css index 2732828bcf..95dd82ca24 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1676,7 +1676,7 @@ footer ul li > a { margin-left: 5px; opacity: 0.8; transition: all 0.3s ease; - top: -1px; + top: -2px; position: relative; } @@ -1874,8 +1874,6 @@ a.entry-link .anticon-smile { display: inline-block; -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; animation: rotateCircleBack 0.6s 1 ease-in-out; - position: relative; - top: 1px; line-height: 1; width: 16px; } diff --git a/style/components/alert.less b/style/components/alert.less index 5e4d98c39c..423b77e73c 100644 --- a/style/components/alert.less +++ b/style/components/alert.less @@ -15,7 +15,7 @@ &-icon { margin-right: 8px; font-size: 14px; - top: 2px; + top: 1px; } &-description { diff --git a/style/components/breadcrumb.less b/style/components/breadcrumb.less index 4f51b88faa..dfb0c1aed5 100644 --- a/style/components/breadcrumb.less +++ b/style/components/breadcrumb.less @@ -22,12 +22,7 @@ color: #d9d9d9; } - .anticon { - position: relative; - top: 1px; - } - .anticon + span { - margin-left: 6px; + margin-left: 4px; } } diff --git a/style/components/collapse.less b/style/components/collapse.less index a7fc21edb2..0630b5534a 100644 --- a/style/components/collapse.less +++ b/style/components/collapse.less @@ -35,7 +35,7 @@ color: #666; display: inline-block; margin-right: 8px; - line-height: 38px; + line-height: 40px; content: "\e611"; vertical-align: middle; transition: transform 0.24s ease; diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less index 02eb582e57..b8219fe87d 100644 --- a/style/components/datepicker/Calendar.less +++ b/style/components/datepicker/Calendar.less @@ -243,7 +243,7 @@ height: 20px; text-align: center; line-height: 20px; - top: 8px; + top: 7px; margin: 0; } diff --git a/style/components/menu.less b/style/components/menu.less index 775513be2e..7a452ba196 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -161,8 +161,7 @@ &-submenu-title { .anticon { width: 14px; - margin-right: 9px; - top: 1px; + margin-right: 8px; } } diff --git a/style/components/message.less b/style/components/message.less index 1451690c74..81d9c34b39 100644 --- a/style/components/message.less +++ b/style/components/message.less @@ -41,6 +41,6 @@ .anticon { margin-right: 8px; font-size: 14px; - top:2px; + top: 1px; } } diff --git a/style/components/notification.less b/style/components/notification.less index 548ea892fa..b8a8b71931 100644 --- a/style/components/notification.less +++ b/style/components/notification.less @@ -52,7 +52,7 @@ left: 16px; top: 50%; margin-top: -17px; - font-size: 35px; + font-size: 34px; &-success { color: @success-color; diff --git a/style/components/popover.less b/style/components/popover.less index 9b99c36ecd..235b4f7329 100644 --- a/style/components/popover.less +++ b/style/components/popover.less @@ -104,8 +104,6 @@ .anticon { margin-right: 8px; color: @error-color; - position: relative; - top: 1px; } } diff --git a/style/components/steps.less b/style/components/steps.less index d8e795fc19..464c837f1b 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -133,8 +133,6 @@ &.anticon { font-size: 12px; - position: relative; - top: 1px; } } } @@ -197,7 +195,7 @@ margin-right: 10px; > .@{steps-prefix-cls}-icon.anticon { .iconfont-size-under-12px(9px); - top: 1px; + top: 0; } } .@{steps-prefix-cls}-main { diff --git a/style/components/table.less b/style/components/table.less index 26cfdb5046..7c9228c4fc 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -27,8 +27,6 @@ .anticon-bars { margin-left: 4px; - position: relative; - top: 1px; .iconfont-size-under-12px(10px); cursor: pointer; color: #aaa; @@ -201,8 +199,6 @@ width: 100%; .anticon { margin-right: 4px; - position: relative; - top: 1px; } } } diff --git a/style/components/tabs.less b/style/components/tabs.less index a61dace1f2..2a2ec153bd 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -177,7 +177,7 @@ width: 14px; height: 14px; margin-right: 8px; - top: 1px; + line-height: 1.5; } } diff --git a/style/components/tag.less b/style/components/tag.less index 02d328d13c..c915dd3713 100644 --- a/style/components/tag.less +++ b/style/components/tag.less @@ -32,8 +32,6 @@ cursor: pointer; font-weight: bold; margin-left: 3px; - position: relative; - top: 1px; color: #666; transition: all 0.3s ease; opacity: 0.66; diff --git a/style/components/timeline.less b/style/components/timeline.less index 82ff6a9bf2..2ef3f6c58f 100644 --- a/style/components/timeline.less +++ b/style/components/timeline.less @@ -41,7 +41,7 @@ padding: 0 0 10px 24px; font-size: 12px; position: relative; - top: -2px; + top: -3px; } &-last { diff --git a/style/components/tree.less b/style/components/tree.less index 74dd927a65..043f05ae7d 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -50,7 +50,7 @@ line-height: 0; margin: 0; width: 16px; - height: 17px; + height: 18px; display: inline-block; vertical-align: middle; border: 0 none; diff --git a/style/components/upload.less b/style/components/upload.less index c80f6c9193..ec7babe258 100644 --- a/style/components/upload.less +++ b/style/components/upload.less @@ -88,7 +88,7 @@ margin-right: 4px; font-size: 12px; color: #999; - top: 2px; + top: 1px; } .anticon-cross { .iconfont-size-under-12px(10px); diff --git a/style/core/iconfont.less b/style/core/iconfont.less index c374c3e88b..ffdd8f3a98 100644 --- a/style/core/iconfont.less +++ b/style/core/iconfont.less @@ -42,8 +42,8 @@ .@{iconfont-css-prefix}-cloud-download:before {content:"\e65b";} .@{iconfont-css-prefix}-star-o:before {content:"\e693";} .@{iconfont-css-prefix}-star:before {content:"\e694";} -.@{iconfont-css-prefix}-environment:before {content:"\e665";} -.@{iconfont-css-prefix}-environment-o:before {content:"\e666";} +.@{iconfont-css-prefix}-environment:before {content:"\e665";} +.@{iconfont-css-prefix}-environment-o:before {content:"\e666";} .@{iconfont-css-prefix}-eye:before {content:"\e66e";} .@{iconfont-css-prefix}-eye-o:before {content:"\e66d";} .@{iconfont-css-prefix}-camera:before {content:"\e653";} @@ -177,6 +177,7 @@ .@{iconfont-css-prefix}-caret-circle-right:before {content:"\e605";} .@{iconfont-css-prefix}-caret-circle-up:before {content:"\e606";} .@{iconfont-css-prefix}-caret-circle-down:before {content:"\e607";} +.@{iconfont-css-prefix}-qrcode:before {content:"\e6a5";} .@{iconfont-css-prefix}-loading:before { display: inline-block; .animation(loadingCircle 1s infinite linear); diff --git a/style/mixins/button.less b/style/mixins/button.less index af96cd66f8..f5a8d37527 100644 --- a/style/mixins/button.less +++ b/style/mixins/button.less @@ -92,8 +92,6 @@ > .@{iconfont-css-prefix} { line-height: 1; - position: relative; - top: 1px; } &, @@ -167,10 +165,6 @@ .square(@btn-circle-size); .button-size(0; @font-size-base + 2; 50%); - > .@{iconfont-css-prefix} { - top: 1px; - } - &.@{btnClassName}-lg { .square(@btn-circle-size-lg); .button-size(0; @btn-font-size-lg + 2; 50%); diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index ecc5d0cf38..9719a10227 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -20,7 +20,7 @@ // ICONFONT @iconfont-css-prefix : anticon; -@icon-url : "//at.alicdn.com/t/font_1447430015_7197566"; +@icon-url : "//at.alicdn.com/t/font_1447745222_4559345"; // LINK @link-color : #2db7f5;