mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

site: add github button

Browse Source
This commit is contained in:
Benjy Cui 2016-03-14 15:00:11 +08:00
parent aa6326f1e1
commit 90a54507f5
3 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -122,6 +122,7 @@
"react-addons-test-utils": "0.14.x",
"react-copy-to-clipboard": "^4.0.1",
"react-dom": "0.14.x",
"react-github-button": "^0.1.1",
"react-router": "^2.0.0",
"react-stateless-wrapper": "~1.0.2",
"recast": "^0.11.2",

12
site/component/Home/Banner.jsx
View File

@ -2,6 +2,8 @@ import React from 'react';
import { Link } from 'react-router';
import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
import TweenOne from 'rc-tween-one';
import GitHubButton from 'react-github-button';
import 'react-github-button/assets/style.css';
import { QueueAnim, Icon } from '../../../';
export default class Banner extends React.Component {
@ -22,9 +24,13 @@ export default class Banner extends React.Component {
<h2 key="h2">ANT <p>DESIGN</p></h2>
<p key="content">一个 UI 设计语言</p>
<span className="line" key="line" />
<Link key="button" to="/spec">
<Icon type="smile-circle" />开始探索
</Link>
<div className="start-button clearfix">
<Link key="button" to="/spec">
<Icon type="smile-circle" />开始探索
</Link>
</div>
<GitHubButton type="stargazers"
namespace="ant-design" repo="ant-design" />
</QueueAnim>
<TweenOne className="down" vars={[{ opacity: 1 }, { y: 10, duration: 800, yoyo: true, repeat: -1 }]}>
<Icon type="down" />

53
site/component/Home/index.less
View File

@ -30,7 +30,7 @@
.banner-text-wrapper {
position: absolute;
left: 10%;
top: 58%;
top: 55%;
color: #fff;
text-align: right;
}
@ -56,28 +56,43 @@
right: -25px;
}
.banner-text-wrapper > p {
margin: 10px auto 30px;
margin: 10px auto 24px;
font-size: 16px;
}
.banner-text-wrapper a {
.banner-text-wrapper .start-button {
margin-bottom: 24px;
> a {
float: right;
width: 155px;
height: 45px;
border-radius: 6px;
border: 1px solid #00AAEE;
color: #00AAEE;
font-size: 18px;
background: transparent;
transition: box-shadow .45s ease-out;
text-align: center;
line-height: 42px;
}
> a:hover {
box-shadow: 0 0 10px #00AAEE;
}
> a span {
margin-left: 15px;
}
}
.banner-text-wrapper .github-btn {
float: right;
width: 155px;
height: 45px;
border-radius: 6px;
border: 1px solid #00AAEE;
color: #00AAEE;
font-size: 18px;
background: transparent;
transition: box-shadow .45s ease-out;
text-align: center;
line-height: 42px;
}
.banner-text-wrapper a:hover {
box-shadow: 0 0 10px #00AAEE;
}
.banner-text-wrapper a span {
margin-left: 15px;
line-height: 14px;
a:hover {
color: #333;
}
}
.down {
text-align: center;
position: absolute;