theme

src/components/dashboard/numberCard.js

@@ -1,17 +1,17 @@
 import React, { PropTypes } from 'react'
-import { Icon } from 'antd'
+import { Icon, Card } from 'antd'
 import styles from './numberCard.less'
 
 function NumberCard(props) {
   const { icon, color, title, number } = props
   return (
-    <div className={styles.numberCard}>
+    <Card className={styles.numberCard}  bordered={false} bodyStyle={{padding:0}}>
       <Icon className={styles.iconWarp} style={{ color }} type={icon} />
       <div className={styles.content}>
         <p className={styles.title}>{title || 'No Title'}</p>
         <p className={styles.number}>{number || '10,000'}</p>
       </div>
-    </div>
+    </Card>
   )
 }
 

src/components/dashboard/numberCard.less

@@ -1,16 +1,9 @@
 @import "../vars.less";
 .numberCard{
-  box-shadow: @shadow-1;
   padding: 32px;
   font-family: monospace;
-  background-color: #fff;
   margin-bottom: 24px;
   cursor: pointer;
-  transition: @transition-ease-in;
-  &:hover{
-    box-shadow: @shadow-2;
-    transform: translateY(-2px);
-  }
   .iconWarp{
     font-size: 54px;
     float: left;

src/components/skin.less

@@ -1,11 +1,9 @@
 @import "./vars.less";
 :global{
-  .ant-card{
-    box-shadow: @shadow-1;
-    transition: @transition-ease-in;
-    &:hover{
-      box-shadow: @shadow-2;
-      transform: translateY(-2px);
-    }
+  .ant-modal-mask{
+    background-color: rgba(55, 55, 55, 0.2);
+  }
+  .ant-modal-content{
+    box-shadow: none;
   }
 }

src/routes/app.js

@@ -7,8 +7,8 @@ import Bread from '../components/layout/bread'
 import Footer from '../components/layout/footer'
 import Sider from '../components/layout/sider'
 import styles from '../components/layout/main.less'
-import '../components/layout/common.less'
 import {Spin,message} from 'antd'
+import '../components/layout/common.less'
 
 function App({children, location, dispatch, app}) {
   const {login, loading, loginButtonLoading, user} = app

src/theme.js

@@ -1,7 +1,10 @@
 module.exports = () => {
   return {
-    '@primary-color': '#1DA57A',
-    '@link-color': '#1DA57A',
-    '@border-radius-base': '2px',
+    '@border-radius-base': '3px',
+    '@border-radius-sm': '2px',
+    '@shadow-color': 'rgba(0,0,0,0.05)',
+    '@shadow-1-down': '4px 4px 40px @shadow-color',
+    '@border-color-split':'#f4f4f4',
+    '@border-color-base':'#e5e5e5',
   };
 };