diff --git a/components/upload/demo/drag-simple.md b/components/upload/demo/drag-simple.md index 27003ab633..8bb6d29ec5 100644 --- a/components/upload/demo/drag-simple.md +++ b/components/upload/demo/drag-simple.md @@ -24,8 +24,8 @@ ReactDOM.render( ); ```` - +```` diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index ae9e6dffc1..2d33d6c2e3 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Animate from 'rc-animate'; import Icon from '../iconfont'; const prefixCls = 'ant-upload'; -import {Line} from '../progress'; +import { Line } from '../progress'; export default React.createClass({ getDefaultProps() { diff --git a/style/components/upload.less b/style/components/upload.less index 3ff397c7d3..b45989f825 100644 --- a/style/components/upload.less +++ b/style/components/upload.less @@ -36,10 +36,6 @@ } &:hover { - border: 1px dashed #999; - } - - &.@{upload-prefix-cls}-drag-uploading { border-color: tint(@primary-color, 20%); } @@ -74,36 +70,38 @@ } .@{upload-prefix-cls}-list { - margin-left: 4px; - overflow: hidden; .@{upload-prefix-cls}-list-item { overflow: hidden; margin-top: 8px; - color: #999; - :hover { - background-color: tint(@primary-color, 90%); - .anticon.anticon-cross { - display: inline-block; - } - } - &.@{upload-prefix-cls}-list-item-uploading { - color: #BCBCBC; - } + .@{upload-prefix-cls}-list-item-info { + height: 22px; + line-height: 22px; + padding: 0 4px; + transition: background-color 0.3s ease; + .anticon-paper-clip { - margin-left: 4px; + margin-right: 4px; font-size: 12px; + color: #999; } .anticon-cross { - display: none; + .iconfont-size-under-12px(10px); + transition: all 0.3s ease; + opacity: 0; cursor: pointer; float: right; - margin-right: 8px; color: #999; &:hover { color: #666; } } + &:hover { + background-color: tint(@primary-color, 90%); + .anticon.anticon-cross { + opacity: 1; + } + } } .@{upload-prefix-cls}-list-item-progress { @@ -119,13 +117,13 @@ } .@{upload-prefix-cls}-item-name { font-size: 12px; - margin-left: 4px; - margin-right: 8px; font-weight: normal; } + b.@{upload-prefix-cls}-item-name { color: #666; } + .@{upload-prefix-cls}-success-icon { color: @success-color; font-weight: bold;