Merge pull request #34 from ant-design/iconfont-improvement

Iconfont improvement

components/iconfont/index.md

@@ -11,7 +11,7 @@
 
 ## 图标的命名规范
 
-我们为每个图标赋予了语义化的命名。我们的命名规范如下：
+我们为每个图标赋予了语义化的命名。我们的命名规范如：
 
 - 1. 使用 `-` 来连接单词；
 
@@ -498,6 +498,18 @@
 		<i class="anticon anticon-windows"></i>
 		<span class="anticon-class">windows</span>
 	</li>
+	<li>
+		<i class="anticon anticon-ie"></i>
+		<span class="anticon-class">ie</span>
+	</li>
+	<li>
+		<i class="anticon anticon-chrome"></i>
+		<span class="anticon-class">chrome</span>
+	</li>
+	<li>
+		<i class="anticon anticon-home"></i>
+		<span class="anticon-class">home</span>
+	</li>
 	<li>
 		<i class="anticon anticon-loading"></i>
 		<span class="anticon-class">loading</span>

components/progress/index.jsx

@@ -32,7 +32,7 @@ var Line = React.createClass({
     };
     var fontSize = (props.width / 100 * props.strokeWidth);
     var iconStyle = {
-      'fontSize': (fontSize < 14) ? 14 : fontSize
+      'fontSize': (fontSize < 12) ? 12 : fontSize
     };
     var textStyle = {
       'color': statusColorMap[props.status]

style/components/breadcrumb.less

@@ -23,7 +23,6 @@
   }
 
   .anticon {
-    font-size: 14px;
     position: relative;
     top: -1px;
   }

style/components/button.less

@@ -44,7 +44,6 @@
 
   &-menu {
     > .@{iconfont-css-prefix} {
-      top: -1px;
       font-size: @font-size-base;
       font-size: ~"10px \9"; // ie8-9
       .scale(0.83);

style/components/datepicker/Picker.less

@@ -16,18 +16,21 @@
     -webkit-user-select: none;
     user-select: none;
     .transition(all .3s @ease-in-out);
-    width: 14px;
-    height: 14px;
-    line-height: 14px;
+    width: 12px;
+    height: 12px;
+    line-height: 12px;
     right: 8px;
     color: #999;
     top: 50%;
-    margin-top: -7px;
+    margin-top: -6px;
     &:after {
       content: "\e60c";
       font-family: "anticon";
-      font-size: 14px;
+      font-size: 12px;
       color: #999;
+      display: inline-block;
+      line-height: 1;
+      vertical-align: bottom;
     }
   }
   &-open .@{prefixCalendarClass},

style/components/dialog/Dialog.less

@@ -43,6 +43,7 @@
     filter: alpha(opacity=20);
     opacity: .2;
     text-decoration: none;
+    transition: opacity .3s ease;
 
     &-x {
       position: absolute;
@@ -58,7 +59,9 @@
       -moz-osx-font-smoothing: grayscale;
       width: 12px;
       height: 12px;
-      font-size: 12px;
+      font-size: @font-size-base;
+      font-size: ~"10px \9"; // ie8-9
+      .scale(0.83);
       line-height: 12px;
       color:#000;
       top:18px;

style/components/popover.less

@@ -127,10 +127,10 @@
     padding: 8px 8px 12px 8px;
     font-size: 14px;
     .anticon {
-      font-size: 16px;
       margin-right: 6px;
       line-height: 18px;
       color: #FC8C6E;
+      vertical-align: text-bottom;
     }
   }
 

style/components/progress.less

@@ -24,7 +24,7 @@
     line-height: 1;
 
     .anticon {
-      font-size: 1.2em;
+      font-size: 12px;
     }
   }
 

style/components/select.less

@@ -35,10 +35,13 @@
     position: absolute;
     top: 1px;
     right: 1px;
+    font-size: @font-size-base;
+    font-size: ~"10px \9"; // ie8-9
+    .scale(0.83);
     width: 26px;
     line-height: 26px;
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-    transform: rotate(90deg);
+    .rotate(90deg);
 
     * {
       display: none;
@@ -140,7 +143,13 @@
       cursor: pointer;
       display: inline-block;
       font-weight: bold;
-      padding: 0 0 0 8px;
+      font-size: @font-size-base;
+      font-size: ~"8px \9"; // ie8-9
+      .scale(0.67);
+      padding: 0 0 0 4px;
+      position: relative;
+      top: -1px;
+      left: 4px;
       &:hover {
         color: #333;
       }
@@ -205,14 +214,12 @@
 
   &-open {
     .@{selectPrefixCls}-arrow {
-      &:before {
-        .rotate(270deg);
-      }
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+      .rotate(270deg);
     }
     .@{selectPrefixCls}-dropdown {
       display: block;
     }
-
     .@{selectPrefixCls}-selection {
       border-color: #23c0fa;
       box-shadow: 0 0 3px #23c0fa;

style/components/steps.less

@@ -14,7 +14,6 @@
 @finish-description-color: @finish-title-color;
 @finish-tail-color: @process-icon-color;
 
-
 .transition(@transition) {
   transition: @transition;
   -webkit-transition: @transition;
@@ -90,11 +89,11 @@
       .@{stepsPrefixClass}-head-inner {
         background: none;
         border: 0;
-        font-size: 20px;
         width: auto;
         height: auto;
         > .@{stepsPrefixClass}-icon {
-          top: -4px;
+          font-size: 20px;
+          top: 0;
         }
       }
       &.@{stepsPrefixClass}-status-process {
@@ -103,7 +102,6 @@
         }
       }
     }
-
   }
 
   .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main {
@@ -135,6 +133,10 @@
       top: -2px;
       color: @primary-color;
       position: relative;
+
+      &.anticon {
+        font-size: 12px;
+      }
     }
   }
   .@{stepsPrefixClass}-main {
@@ -183,6 +185,11 @@
       border-radius: 18px;
       font-size: 12px;
       margin-right: 10px;
+      > .@{stepsPrefixClass}-icon.anticon {
+        font-size: 12px;
+        font-size: ~"9px \9"; // ie8-9
+        .scale(0.75);
+      }
     }
     .@{stepsPrefixClass}-main {
       margin-top: 0;

style/components/tabs.less

@@ -68,6 +68,7 @@
       text-align: center;
       text-transform: none;
       font-family: sans-serif;
+      font-size: 12px;
 
       &:before {
         display: block;

style/core/iconfont.less

@@ -125,7 +125,7 @@
 .@{iconfont-css-prefix}-link:before                   {content:"\e640";}
 .@{iconfont-css-prefix}-logout:before                 {content:"\e642";}
 .@{iconfont-css-prefix}-mail:before                   {content:"\e643";}
-.@{iconfont-css-prefix}-menu-fold:before              {content:"\e644";}
+.@{iconfont-css-prefix}-menu-fold:before              {content:"\e645";.rotate(180deg);}
 .@{iconfont-css-prefix}-menu-unfold:before            {content:"\e645";}
 .@{iconfont-css-prefix}-mobile:before                 {content:"\e649";}
 .@{iconfont-css-prefix}-notification:before           {content:"\e64a";}
@@ -142,12 +142,15 @@
 .@{iconfont-css-prefix}-tablet:before                 {content:"\e664";}
 .@{iconfont-css-prefix}-tag:before                    {content:"\e665";}
 .@{iconfont-css-prefix}-tags:before                   {content:"\e666";}
-.@{iconfont-css-prefix}-to-top:before                  {content:"\e667";}
+.@{iconfont-css-prefix}-to-top:before                 {content:"\e667";}
 .@{iconfont-css-prefix}-unlock:before                 {content:"\e668";}
 .@{iconfont-css-prefix}-upload:before                 {content:"\e669";}
 .@{iconfont-css-prefix}-user:before                   {content:"\e66a";}
 .@{iconfont-css-prefix}-video-camera:before           {content:"\e66b";}
 .@{iconfont-css-prefix}-windows:before                {content:"\e66c";}
+.@{iconfont-css-prefix}-ie:before                     {content:"\e66d";}
+.@{iconfont-css-prefix}-chrome:before                 {content:"\e66e";}
+.@{iconfont-css-prefix}-home:before                   {content:"\e612";}
 .@{iconfont-css-prefix}-loading:before {
   display: inline-block;
   .animation(loadingCircle 1s infinite linear);

style/mixins/button.less

@@ -57,9 +57,6 @@
   // size
   &-lg > .@{btnClassName} {
     .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-lg);
-    > .@{iconfont-css-prefix} {
-    font-size: @btn-font-size-lg + 2;
-    }
   }
 
   &-sm > .@{btnClassName} {
@@ -91,9 +88,8 @@
   transform: translate3d(0, 0, 0);
 
   > .@{iconfont-css-prefix} {
-    font-size: @font-size-base + 2;
-    line-height: 1;
     z-index: 2;
+    line-height: 1;
   }
 
   &,
@@ -118,16 +114,10 @@
 
   &-lg {
     .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-lg);
-    > .@{iconfont-css-prefix} {
-      font-size: @btn-font-size-lg + 2;
-    }
   }
 
   &-sm {
     .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
-    > .@{iconfont-css-prefix} {
-      font-size: @font-size-base;
-    }
   }
 }
 

style/themes/default/custom.less

@@ -15,12 +15,12 @@
 @text-color             : #666;
 @font-size-base         : 12px;
 @line-height-base       : 1.5;
-@line-height-computed:    floor((@font-size-base * @line-height-base));
+@line-height-computed   : floor((@font-size-base * @line-height-base));
 @border-radius-base     : 6px;
 
 // ICONFONT
 @iconfont-css-prefix    : anticon;
-@icon-url               : "//at.alicdn.com/t/font_1434092639_4910953";
+@icon-url               : "//at.alicdn.com/t/font_1436443521_8072257";
 
 // LINK
 @link-color             : @primary-color;