test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
夏奈 2015-06-14 13:28:36 +08:00
commit d2702bf92e
91 changed files with 2474 additions and 930 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.eslintrc Normal file
View File

@ -0,0 +1,31 @@
{
"rules": {
"indent": [
2,
2
],
"quotes": [
2,
"single"
],
"linebreak-style": [
2,
"unix"
],
"semi": [
2,
"always"
]
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
]
}

1
.npmignore
View File

@ -4,3 +4,4 @@ node_modules
theme
static
_site
site

2
README.md
View File

@ -1,4 +1,4 @@
# Ant Design
# Ant Design [![](https://travis-ci.org/ant-design/ant-design.svg)](https://travis-ci.org/ant-design/ant-design)
下一个设计&前端框架。

8
components/button/demo/basic.md
View File

@ -9,8 +9,8 @@
---
````html
<button class="ant-btn ant-btn-default">Button</button>
<a href="javascript:;" class="ant-btn ant-btn-default" role="button">Link</a>
<input class="ant-btn ant-btn-default" type="button" value="Input" />
<input class="ant-btn ant-btn-default" type="submit" value="Submit" />
<button class="ant-btn">Button</button>
<a href="javascript:;" class="ant-btn" role="button">Link</a>
<input class="ant-btn" type="button" value="Input" />
<input class="ant-btn" type="submit" value="Submit" />
````

14
components/button/demo/button-group.md
View File

@ -19,25 +19,25 @@
<button class="ant-btn ant-btn-primary">取 消</button>
</div>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-default">左</button>
<button class="ant-btn ant-btn-default">中</button>
<button class="ant-btn ant-btn-default">右</button>
<button class="ant-btn">左</button>
<button class="ant-btn">中</button>
<button class="ant-btn">右</button>
</div>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-primary">左</button>
<button class="ant-btn ant-btn-ghost">中</button>
<button class="ant-btn ant-btn-ghost">中</button>
<button class="ant-btn ant-btn-default">右</button>
<button class="ant-btn">右</button>
</div>
<h4>带图标按钮组合 </h4>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-primary">
<span class="anticon anticon-angle-double-left"></span>
<span class="anticon anticon-double-left"></span>
<span>后 退</span>
</button>
<button class="ant-btn ant-btn-primary">
<span>前 进</span>
<span class="anticon anticon-angle-double-right"></span>
<span class="anticon anticon-double-right"></span>
</button>
</div>
<div class="ant-btn-group">
@ -56,7 +56,7 @@
<button class="ant-btn ant-btn-ghost">4</button>
<button class="ant-btn ant-btn-ghost">
<span>前 进</span>
<span class="anticon anticon-angle-double-right"></span>
<span class="anticon anticon-double-right"></span>
</button>
</div>
<h4>尺寸</h4>

4
components/button/demo/icon.md
View File

@ -1,6 +1,6 @@
# Icon Button
- order: 4
- order: 5
图标按钮
@ -39,7 +39,7 @@
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
<span class="anticon anticon-search"></span>
</button>
<button class="ant-btn ant-btn-default ant-btn-circle-outline ant-btn-sm">
<button class="ant-btn ant-btn-circle-outline ant-btn-sm">
<span class="anticon anticon-search"></span>
</button>
````

2
components/button/demo/loading.md
View File

@ -1,6 +1,6 @@
# Loading Button
- order: 6
- order: 7
加载按钮

6
components/button/demo/menu.md
View File

@ -1,6 +1,6 @@
# Menu Btutton
- order: 5
- order: 6
菜单按钮
@ -11,9 +11,9 @@
````html
<button class="ant-btn ant-btn-primary ant-btn-menu">
<span>菜单按钮</span>
<span class="anticon anticon-bars"></span>
<span class="anticon anticon-down"></span>
</button>
<button class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
<span class="anticon anticon-bars"></span>
<span class="anticon anticon-down"></span>
</button>
````

2
components/button/demo/size.md
View File

@ -1,6 +1,6 @@
# Button sizes
- order: 7
- order: 3
按钮尺寸

8
components/button/demo/status.md
View File

@ -1,6 +1,6 @@
# Button Status
- order: 3
- order: 4
通过背景色透明度的变化来体现不同的操作状态
@ -15,9 +15,9 @@
<button class="ant-btn ant-btn-primary active">主按钮(激活)</button>
<button class="ant-btn ant-btn-primary disabled">主按钮(失效)</button>
<p></p>
<button class="ant-btn ant-btn-default">次按钮</button>
<button class="ant-btn ant-btn-default active">次按钮(激活)</button>
<button class="ant-btn ant-btn-default disabled">次按钮(失效)</button>
<button class="ant-btn">次按钮</button>
<button class="ant-btn active">次按钮(激活)</button>
<button class="ant-btn disabled">次按钮(失效)</button>
<p></p>
<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
<button class="ant-btn ant-btn-ghost active">幽灵按钮(激活)</button>

6
components/button/demo/styled.md
View File

@ -6,7 +6,9 @@
使用下面列出的类即可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。
`ant-btn-primary`、`ant-btn-default`、`ant-btn-ghost`
`ant-btn-primary`、`ant-btn`、`ant-btn-ghost`
其中 `ant-btn` 为按钮默认样式，语义上代表次按钮
**注**: 当按钮文字为两个字时，中间需要**间隔一个字符**。
@ -14,6 +16,6 @@
````html
<button class="ant-btn ant-btn-primary">主按钮</button>
<button class="ant-btn ant-btn-default">次按钮</button>
<button class="ant-btn">次按钮</button>
<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
````

6
components/button/index.md
View File

@ -21,7 +21,7 @@
```
.ant-btn
&darr;
.ant-btn-primary | .ant-btn-default | .ant-btn-ghost
.ant-btn-primary | .ant-btn-ghost
&darr;
.ant-btn-circle | .ant-btn-circle-outline
&darr;
@ -32,8 +32,8 @@
| 类名 | 说明 |
| ------------- | ------------- |
| `.ant-btn` | 按钮基础样式, 用于初始化按钮 |
| `.ant-btn-primary` `.ant-btn-default` `.ant-btn-ghost` | 使用这些列出的类可以快速创建一个带有预定义样式的按钮。 |
| `.ant-btn` | 按钮基础样式 |
| `.ant-btn-primary` `.ant-btn-ghost` | 使用这些列出的类可以快速创建一个带有预定义样式的按钮。 |
| `.ant-btn-circle` `.ant-btn-circle-outline` | 用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮 |
| `.ant-btn-lg` `.ant-btn-sm` | 定义按钮大小尺寸, 目前提供三种尺寸：大中小，默认为中 |
| `.ant-btn-group` | 按钮组合，通过按钮组容器把一组按钮放在同一行里 |

33
components/confirm/index.md
View File

@ -1,33 +0,0 @@
# Confirm
- category: Components
- chinese: 确认对话框
---
## 何时使用
当你再次和我说起 青春时的故事
我正在下着雨的无锡 乞讨着生活的权利
前一天早晨 我睁开眼已是江南
他们说柔软的地方 总会发生柔软的事
那年的舞台上 说谎的人一直歌唱
大不列颠的广场上 有没有鸽子飞翔
青春和瞎子一起 变成了哑巴
今天扯平了我们的当年 分食了理想
## 为什么使用
你可知道你的名字解释了我的一生
碎了满天的往事如烟 与世无争
当你装满行李 回到故乡
我的余生 却再也没有北方
有一天我又梦见 那个装满乐器的教室
你还站在门口 一脸羞涩的表情
你说这么多年你还没找到 让你心动的男人
我说去他妈的爱情 都是过眼云烟的东西
我的余生 都用来寻找北方

10
components/datepicker/index.jsx
View File

@ -1,3 +1,5 @@
'use strict';
var React = require('react');
var Calendar = require('rc-calendar');
var Datepicker = Calendar.Picker;
@ -31,7 +33,6 @@ module.exports = React.createClass({
this.setState(state);
},
handleChange: function() {
var props = this.props;
this.props.onSelect(new Date(this.state.value.getTime()));
},
render: function () {
@ -42,16 +43,19 @@ module.exports = React.createClass({
orient={['top', 'left']}
defaultValue={defaultCalendarValue}
showTime={this.props.showTime}
prefixCls="ant-calendar"
showOk={this.props.showTime}
showClear={false} />
);
return (
<Datepicker
trigger={<span className="rc-calendar-picker-icon" />}
trigger={<span className="ant-calendar-picker-icon" />}
calendar={calendar}
formatter={new DateTimeFormat(this.props.format)}
value={this.state.value}
prefixCls="ant-calendar-picker"
onChange={this.props.onSelect}>
<input placeholder={this.props.placeholder} className="rc-calendar-picker-input" />
<input placeholder={this.props.placeholder} className="ant-calendar-picker-input" />
</Datepicker>
);
}

3
components/datepicker/index.md
View File

@ -2,6 +2,7 @@
- category: Components
- chinese: 日期选择框
- order: 4
---
@ -22,7 +23,7 @@
| showTime | 显示时间选择条 | boolean | false |
<style>
.code-box-demo .rc-calendar-picker-input {
.code-box-demo .ant-calendar-picker-input {
width: 200px;
}
</style>

15
components/dropdown/demo/basic.md
View File

@ -12,20 +12,25 @@ var Dropdown = antd.Dropdown;
var menu = <Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">第一个菜单项</a>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;
React.render(
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-ghost">
点我下来 <i className="anticon anticon-caret-down"></i>
<button className="ant-btn ant-btn-default">
某按钮 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
, document.getElementById('components-dropdown-demo-basic'));
````
<style>
.code-box-demo .ant-btn {
margin-right: 6px;
}
</style>

13
components/dropdown/demo/event.md
View File

@ -1,6 +1,6 @@
# 基本
- order: 1
- order: 3
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
@ -9,23 +9,20 @@
````jsx
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
function onClick(key){
var onClick = function (key){
alert('选中了菜单' + key);
}
};
var menu = <Menu onClick={onClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item>
<Menu.Item key="4" disabled>第四个菜单项</Menu.Item>
</Menu>;
React.render(
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-ghost">
鼠标移入 <i className="anticon anticon-caret-down"></i>
<button className="ant-btn ant-btn-default">
鼠标移入，点击菜单 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
, document.getElementById('components-dropdown-demo-event'));

31
components/dropdown/demo/item.md Normal file
View File

@ -0,0 +1,31 @@
# 其他元素
- order: 1
分割线和不可用菜单项。
---
````jsx
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
var menu = <Menu>
<Menu.Item key="0">
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>;
React.render(
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-default">
鼠标移入 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
, document.getElementById('components-dropdown-demo-item'));
````

28
components/dropdown/demo/trigger.md
View File

@ -1,6 +1,6 @@
# 触发方式
- order: 1
- order: 2
点击或鼠标移入触发。
@ -21,18 +21,16 @@ var menu = <Menu>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;
React.render(
<div>
<Dropdown overlay={menu} trigger="click">
<button className="ant-btn ant-btn-ghost">
点我下来 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-ghost">
鼠标移入 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
</div>
, document.getElementById('components-dropdown-demo-trigger'));
React.render(<div>
<Dropdown overlay={menu} trigger="click">
<button className="ant-btn ant-btn-primary">
点击触发 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-default">
鼠标移入 <i className="anticon anticon-caret-down"></i>
</button>
</Dropdown>
</div>, document.getElementById('components-dropdown-demo-trigger'));
````

7
components/dropdown/index.jsx
View File

@ -4,13 +4,14 @@ var React = require('react');
var Dropdown = require('rc-dropdown');
module.exports = React.createClass({
getDefaultProps: function () {
getDefaultProps: function() {
return {
animation: 'slide-up'
animation: 'slide-up',
prefixCls: 'ant-dropdown'
};
},
render: function() {
return (
return (
<Dropdown {...this.props} />
);
}

1
components/dropdown/index.md
View File

@ -2,6 +2,7 @@
- category: Components
- chinese: 下拉菜单
- order: 6
---

159
components/iconfont/index.md
View File

@ -20,7 +20,8 @@
## 图标列表
### 一. 方向性图标
<ul class="row anticons-list fn-clear">
<ul class="row anticons-list clearfix">
<li>
<i class="anticon anticon-step-backward"></i>
<span class="anticon-class">step-backward</span>
@ -45,6 +46,22 @@
<i class="anticon anticon-arrow-salt"></i>
<span class="anticon-class">arrow-salt</span>
</li>
<li>
<i class="anticon anticon-down"></i>
<span class="anticon-class">down</span>
</li>
<li>
<i class="anticon anticon-up"></i>
<span class="anticon-class">up</span>
</li>
<li>
<i class="anticon anticon-left"></i>
<span class="anticon-class">left</span>
</li>
<li>
<i class="anticon anticon-right"></i>
<span class="anticon-class">right</span>
</li>
<li>
<i class="anticon anticon-caret-down"></i>
<span class="anticon-class">caret-down</span>
@ -61,6 +78,14 @@
<i class="anticon anticon-caret-right"></i>
<span class="anticon-class">caret-right</span>
</li>
<li>
<i class="anticon anticon-caret-round-right"></i>
<span class="anticon-class">caret-round-right</span>
</li>
<li>
<i class="anticon anticon-caret-round-left"></i>
<span class="anticon-class">caret-round-left</span>
</li>
<li>
<i class="anticon anticon-caret-circle-right"></i>
<span class="anticon-class">caret-circle-right</span>
@ -70,44 +95,36 @@
<span class="anticon-class">caret-circle-left</span>
</li>
<li>
<i class="anticon anticon-caret-circleo-right"></i>
<span class="anticon-class">caret-circleo-right</span>
<i class="anticon anticon-round-right"></i>
<span class="anticon-class">round-right</span>
</li>
<li>
<i class="anticon anticon-caret-circleo-left"></i>
<span class="anticon-class">caret-circleo-left</span>
<i class="anticon anticon-round-left"></i>
<span class="anticon-class">round-left</span>
</li>
<li>
<i class="anticon anticon-angle-circle-right"></i>
<span class="anticon-class">angle-circle-right</span>
<i class="anticon anticon-circle-right"></i>
<span class="anticon-class">circle-right</span>
</li>
<li>
<i class="anticon anticon-angle-circle-left"></i>
<span class="anticon-class">angle-circle-left</span>
<i class="anticon anticon-circle-left"></i>
<span class="anticon-class">circle-left</span>
</li>
<li>
<i class="anticon anticon-angle-circleo-right"></i>
<span class="anticon-class">angle-circleo-right</span>
<i class="anticon anticon-double-right"></i>
<span class="anticon-class">double-right</span>
</li>
<li>
<i class="anticon anticon-angle-circleo-left"></i>
<span class="anticon-class">angle-circleo-left</span>
<i class="anticon anticon-double-left"></i>
<span class="anticon-class">double-left</span>
</li>
<li>
<i class="anticon anticon-angle-double-right"></i>
<span class="anticon-class">angle-double-right</span>
<i class="anticon anticon-verticle-right"></i>
<span class="anticon-class">verticle-right</span>
</li>
<li>
<i class="anticon anticon-angle-double-left"></i>
<span class="anticon-class">angle-double-left</span>
</li>
<li>
<i class="anticon anticon-angle-verticle-right"></i>
<span class="anticon-class">angle-verticle-right</span>
</li>
<li>
<i class="anticon anticon-angle-verticle-left"></i>
<span class="anticon-class">angle-verticle-left</span>
<i class="anticon anticon-verticle-left"></i>
<span class="anticon-class">verticle-left</span>
</li>
<li>
<i class="anticon anticon-forward"></i>
@ -129,63 +146,63 @@
### 二. 提示建议性图标
<ul class="anticons-list fn-clear">
<ul class="anticons-list clearfix">
<li>
<i class="anticon anticon-question"></i>
<span class="anticon-class">question</span>
</li>
<li>
<i class="anticon anticon-question-round"></i>
<span class="anticon-class">question-round</span>
</li>
<li>
<i class="anticon anticon-question-circle"></i>
<span class="anticon-class">question-circle</span>
</li>
<li>
<i class="anticon anticon-question-circleo"></i>
<span class="anticon-class">question-circleo</span>
</li>
<li>
<i class="anticon anticon-plus"></i>
<span class="anticon-class">plus</span>
</li>
<li>
<i class="anticon anticon-plus-round"></i>
<span class="anticon-class">plus-round</span>
</li>
<li>
<i class="anticon anticon-plus-circle"></i>
<span class="anticon-class">plus-circle</span>
</li>
<li>
<i class="anticon anticon-plus-circleo"></i>
<span class="anticon-class">plus-circleo</span>
</li>
<li>
<i class="anticon anticon-pause"></i>
<span class="anticon-class">pause</span>
</li>
<li>
<i class="anticon anticon-pause-round"></i>
<span class="anticon-class">pause-round</span>
</li>
<li>
<i class="anticon anticon-pause-circle"></i>
<span class="anticon-class">pause-circle</span>
</li>
<li>
<i class="anticon anticon-pause-circleo"></i>
<span class="anticon-class">pause-circleo</span>
</li>
<li>
<i class="anticon anticon-minus"></i>
<span class="anticon-class">minus</span>
</li>
<li>
<i class="anticon anticon-minus-round"></i>
<span class="anticon-class">minus-round</span>
</li>
<li>
<i class="anticon anticon-minus-circle"></i>
<span class="anticon-class">minus-circle</span>
</li>
<li>
<i class="anticon anticon-minus-circleo"></i>
<span class="anticon-class">minus-circleo</span>
<i class="anticon anticon-info-round"></i>
<span class="anticon-class">info-round</span>
</li>
<li>
<i class="anticon anticon-info-circle"></i>
<span class="anticon-class">info-circle</span>
</li>
<li>
<i class="anticon anticon-info-circleo"></i>
<span class="anticon-class">info-circleo</span>
</li>
<li>
<i class="anticon anticon-info"></i>
<span class="anticon-class">info</span>
@ -194,55 +211,59 @@
<i class="anticon anticon-exclamation"></i>
<span class="anticon-class">exclamation</span>
</li>
<li>
<i class="anticon anticon-exclamation-round"></i>
<span class="anticon-class">exclamation-round</span>
</li>
<li>
<i class="anticon anticon-exclamation-circle"></i>
<span class="anticon-class">exclamation-circle</span>
</li>
<li>
<i class="anticon anticon-exclamation-circleo"></i>
<span class="anticon-class">exclamation-circleo</span>
</li>
<li>
<i class="anticon anticon-cross-circleo"></i>
<span class="anticon-class">cross-circleo</span>
</li>
<li>
<i class="anticon anticon-cross-circle"></i>
<span class="anticon-class">cross-circle</span>
</li>
<li>
<i class="anticon anticon-cross"></i>
<span class="anticon-class">cross</span>
<i class="anticon anticon-cross-round"></i>
<span class="anticon-class">cross-round</span>
</li>
<li>
<i class="anticon anticon-check-circleo"></i>
<span class="anticon-class">check-circleo</span>
<i class="anticon anticon-cross"></i>
<span class="anticon-class">cross</span>
</li>
<li>
<i class="anticon anticon-check-circle"></i>
<span class="anticon-class">check-circle</span>
</li>
<li>
<i class="anticon anticon-check-round"></i>
<span class="anticon-class">check-round</span>
</li>
<li>
<i class="anticon anticon-check"></i>
<span class="anticon-class">check</span>
</li>
<li>
<i class="anticon anticon-clock-round"></i>
<span class="anticon-class">clock-round</span>
</li>
<li>
<i class="anticon anticon-clock-circle"></i>
<span class="anticon-class">clock-circle</span>
</li>
<li>
<i class="anticon anticon-clock-circleo"></i>
<span class="anticon-class">clock-circleo</span>
</li>
</ul>
### 三. 网站通用图标
<ul class="anticons-list fn-clear">
<ul class="anticons-list clearfix">
<li>
<i class="anticon anticon-lock"></i>
<span class="anticon-class">lock</span>
</li>
<li>
<i class="anticon anticon-unlock"></i>
<span class="anticon-class">unlock</span>
</li>
<li>
<i class="anticon anticon-android"></i>
<span class="anticon-class">android</span>
@ -367,10 +388,6 @@
<i class="anticon anticon-link"></i>
<span class="anticon-class">link</span>
</li>
<li>
<i class="anticon anticon-lock1"></i>
<span class="anticon-class">lock1</span>
</li>
<li>
<i class="anticon anticon-logout"></i>
<span class="anticon-class">logout</span>
@ -451,10 +468,6 @@
<i class="anticon anticon-totop"></i>
<span class="anticon-class">totop</span>
</li>
<li>
<i class="anticon anticon-unlock"></i>
<span class="anticon-class">unlock</span>
</li>
<li>
<i class="anticon anticon-upload"></i>
<span class="anticon-class">upload</span>
@ -480,13 +493,13 @@
ul.anticons-list {
margin: 20px 0;
list-style: none;
width: 100%
width: 120%;
}
ul.anticons-list li {
float: left;
margin: 5px;
margin: 5px 5px 5px 0;
padding-bottom: 10px;
width: 154px;
width: 155px;
text-align: center;
list-style: none;
cursor: pointer;
@ -544,7 +557,7 @@ $(function() {
$('.anticons-list li').each(function(i, item) {
var client = new ZeroClipboard(item);
client.on( "copy", function (event) {
client.setText('<i className="anticon anticon-' + $(item).find('.anticon-class').html() + '></i>');
client.setText('<i className="anticon anticon-' + $(item).find('.anticon-class').html() + '"></i>');
});
client.on( "ready", function( readyEvent ) {
client.on( "aftercopy", function( event ) {

29
components/layout/demo/basic.md Normal file
View File

@ -0,0 +1,29 @@
# Standard Layout
- order: 1
从堆叠到水平排列
使用单一的一组 `.col-*` 栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在 `.row` 内
---
````html
<div class="row">
<div class="col-16">.col-16</div>
<div class="col-8">.col-8</div>
</div>
<div class="row">
<div class="col-8">.col-8</div>
<div class="col-8">.col-8</div>
<div class="col-8">.col-8</div>
</div>
<div class="row">
<div class="col-12">.col-12</div>
<div class="col-12">.col-12</div>
</div>
````

39
components/layout/demo/flex-align.md Normal file
View File

@ -0,0 +1,39 @@
# Flex Align
- order: 5
Flex 子元素垂直对齐
---
````html
<p>顶部对齐</p>
<div class="row-flex row-flex-center row-flex-top">
<div class="col-4 hight-100">2</div>
<div class="col-4 hight-50">2</div>
<div class="col-4 hight-120">2</div>
<div class="col-4 hight-80">2</div>
</div>
<p>居中对齐</p>
<div class="row-flex row-flex-space-around row-flex-middle">
<div class="col-4 hight-100">2</div>
<div class="col-4 hight-50">2</div>
<div class="col-4 hight-120">2</div>
<div class="col-4 hight-80">2</div>
</div>
<p>底部对齐</p>
<div class="row-flex row-flex-space-between row-flex-bottom">
<div class="col-4 hight-100">2</div>
<div class="col-4 hight-50">2</div>
<div class="col-4 hight-120">2</div>
<div class="col-4 hight-80">2</div>
</div>
````

23
components/layout/demo/flex-order.md Normal file
View File

@ -0,0 +1,23 @@
# Flex Order
- order: 6
通过 Flex 布局的 Order 来改变元素的排序
---
````html
<div class="row-flex">
<div class="col-6 col-order-4">1 col-order-4</div>
<div class="col-6 col-order-3">2 col-order-3</div>
<div class="col-6 col-order-2">3 col-order-2</div>
<div class="col-6 col-order-1">4 col-order-1</div>
</div>
````

56
components/layout/demo/flex.md Normal file
View File

@ -0,0 +1,56 @@
# Flex Basic
- order: 4
Flex 布局基础
使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
---
````html
<p>子元素居左排列</p>
<div class="row-flex row-flex-start">
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素居中排列</p>
<div class="row-flex row-flex-center">
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素居右排列</p>
<div class="row-flex row-flex-end">
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素等宽排列</p>
<div class="row-flex row-flex-space-between">
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
<p>子元素分散对齐</p>
<div class="row-flex row-flex-space-around">
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
<div class="col-4">2</div>
</div>
````

24
components/layout/demo/offset.md Normal file
View File

@ -0,0 +1,24 @@
# Offset Column
- order: 2
列偏移
使用 `.col-offset-*` 类可以将列向右侧偏。例如，`.col-offset-4` 类将 `.col-md-4` 元素向右侧偏移了4个列（column）的宽度。
---
````html
<div class="row">
<div class="col-8">.col-8</div>
<div class="col-8 col-offset-8">.col-8 .col-offset-8</div>
</div>
<div class="row">
<div class="col-6 col-offset-6">.col-6 .col-offset-6</div>
<div class="col-6 col-offset-6">.col-6 .col-offset-6</div>
</div>
<div class="row">
<div class="col-12 col-offset-6">.col-12 .col-offset-6</div>
</div>
````

16
components/layout/demo/sort.md Normal file
View File

@ -0,0 +1,16 @@
# Sort Column
- order: 3
列排序
通过使用 `.col-push-*` 和 `.col-pull-*` 类就可以很容易的改变列（column）的顺序。
---
````html
<div class="row">
<div class="col-18 col-push-6">.col-18 .col-push-6</div>
<div class="col-6 col-pull-18">.col-6 .col-pull-18</div>
</div>
````

138
components/layout/index.md
View File

@ -6,13 +6,133 @@
---
## 布局规范
24 栅格系统。
当你再次和我说起 青春时的故事
我正在下着雨的无锡 乞讨着生活的权利
前一天早晨 我睁开眼已是江南
他们说柔软的地方 总会发生柔软的事
那年的舞台上 说谎的人一直歌唱
大不列颠的广场上 有没有鸽子飞翔
青春和瞎子一起 变成了哑巴
今天扯平了我们的当年 分食了理想
## 设计理念
<div class="row demo-row" >
<div class="col-24 demo-col demo-col-1">
100%
</div>
</div>
<div class="row demo-row">
<div class="col-6 demo-col demo-col-2">
25%
</div>
<div class="col-6 demo-col demo-col-3">
25%
</div>
<div class="col-6 demo-col demo-col-2">
25%
</div>
<div class="col-6 demo-col demo-col-3">
25%
</div>
</div>
<div class="row demo-row">
<div class="col-8 demo-col demo-col-4">
33.33%
</div>
<div class="col-8 demo-col demo-col-5">
33.33%
</div>
<div class="col-8 demo-col demo-col-4">
33.33%
</div>
</div>
<div class="row demo-row">
<div class="col-12 demo-col demo-col-1">
50%
</div>
<div class="col-12 demo-col demo-col-3">
50%
</div>
</div>
<div class="row demo-row">
<div class="col-16 demo-col demo-col-4">
66.66%
</div>
<div class="col-8 demo-col demo-col-5">
33.33%
</div>
</div>
考虑到 Ant Design 面临的业务多数的情况下需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计区域建议按照 24 等分的原则划分。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分急于盒子的单位定制盒子内部的排版规则以保证在视觉层面的舒适感。
## 概述
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
* 通过`row`在水平方向建立一组`column`（简写col）
* 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽d的列可以使用`.col-8`来创建
* 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列
## Flex 布局
我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
Flex 布局是基于24栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。
<style>
.row {
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
}
.row-flex {
background: #F5F5F5;
}
.row div,
.row-flex div {
padding: 5px 0;
background: rgba(24, 115, 216, 0.7);
text-align: center;
min-height: 28px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-bottom: 10px;
color: #fff;
}
.row .demo-col {
text-align: center;
padding: 40px 0;
color: #fff;
font-size: 18px;
border: none;
margin-top: 0;
margin-bottom: 0;
}
.row .demo-col-1 {
background: rgba(24, 115, 216, 0.7);
}
.row .demo-col-2 {
background: rgba(24, 115, 216, 0.5);
}
.row .demo-col-3 {
background: rgba(255, 255, 255, 0.2);
color: #999;
}
.row .demo-col-4 {
background: rgba(24, 115, 216, 0.6);
}
.row .demo-col-5 {
background: rgba(255, 255, 255, 0.5);
color: #999;
}
.hight-100 {
height: 100px;
}
.hight-50 {
height: 50px;
}
.hight-120 {
height: 120px;
}
.hight-80 {
height: 80px;
}
</style>

70
components/modal/confirm.jsx Normal file
View File

@ -0,0 +1,70 @@
'use strict';
var React = require('react');
var Dialog = require('rc-dialog');
var div;
module.exports = function (props) {
var d;
props = props || {};
props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
props.animation = 'zoom';
props.maskAnimation = 'fade';
var width = props.width || 375;
function close() {
d.setState({
visible: false
});
}
function onCancel() {
var cancelFn = props.onCancel;
if (cancelFn) {
if(cancelFn.length) {
cancelFn(close);
}else {
cancelFn();
close();
}
} else {
close();
}
}
function onOk() {
var okFn = props.onOk;
if (okFn) {
if(okFn.length) {
okFn(close);
}else {
okFn();
close();
}
} else {
close();
}
}
var body = <div className="ant-confirm-body">
<i className={'anticon ' + props.iconClassName}></i>
<span className="ant-confirm-title">{props.title}</span>
<div className="ant-confirm-content">{props.content}</div>
</div>;
var footer = <div className="ant-confirm-btns">
<button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
<button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
</div>;
if (!div) {
div = document.createElement('div');
document.body.appendChild(div);
}
React.render(<Dialog prefixCls="ant-modal" className="ant-confirm" renderToBody={false} visible={true} closable={false} title="" animation="zoom" maskAnimation="fade" width={width}>
<div style={{zoom: 1, overflow: 'hidden'}}>{body} {footer}</div>
</Dialog>, div, function () {
d = this;
});
};

58
components/modal/demo/basic.md
View File

@ -2,34 +2,46 @@
- order: 0
使用很简单
第一个对话框。
---
````jsx
var modal = antd.modal;
var Modal = antd.Modal;
function show() {
var ref;
function saveRef(c){
ref = c;
}
modal({
title: '第一个 Modal',
content: <p>name: <input ref={saveRef}/></p>,
onCancel: function() {
alert('cancel');
},
onOk: function(close) {
alert('name: '+React.findDOMNode(ref).value);
setTimeout(close,100);
var Test = React.createClass({
getInitialState(){
return{
visible: false
}
});
}
},
showModal() {
this.setState({
visible: true
});
},
handleOk() {
console.log('点击了确定');
this.setState({
visible: false
});
},
handleCancel() {
console.log('点击了取消');
},
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
<Modal title="第一个 Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>对话框的内容</p>
</Modal>
</div>;
}
});
React.render(
<button onClick={show}>显示对话框</button>
, document.getElementById('components-modal-demo-basic'));
React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
````

27
components/modal/demo/confirm.md Normal file
View File

@ -0,0 +1,27 @@
# 确认对话框
- order: 3
使用 `confirm()` 可以快捷地弹出确认框。
---
````jsx
var confirm = antd.confirm;
function showConfirm(){
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',
onOk: function() {
alert('确定');
},
onCancel: function() {}
});
}
React.render(
<button className="ant-btn" onClick={showConfirm}>
确认对话框
</button>, document.getElementById('components-modal-demo-confirm'));
````

53
components/modal/demo/custom.md Normal file
View File

@ -0,0 +1,53 @@
# 异步关闭
- order: 1
点击确定后异步关闭对话框。
---
````jsx
var Modal = antd.Modal;
var ModalText = '对话框的内容';
var Test = React.createClass({
getInitialState() {
return {
ModalText: '对话框的内容',
visible: false
};
},
showModal() {
this.setState({
visible: true
});
},
handleOk() {
this.setState({
ModalText: '对话框将在两秒后关闭'
});
setTimeout((function() {
this.setState({
visible: false
});
}).bind(this), 2000);
},
handleCancel() {
console.log('点击了取消');
},
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
<Modal ref="modal"
title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
</div>;
}
});
React.render(<Test/> , document.getElementById('components-modal-demo-custom'));
````

53
components/modal/demo/footer.md Normal file
View File

@ -0,0 +1,53 @@
# 自定义页脚
- order: 2
更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
---
````jsx
var Modal = antd.Modal;
var Test = React.createClass({
getInitialState: function() {
return {
loading: false,
visible: false
};
},
showModal() {
this.setState({ visible:true });
},
handleOk() {
this.setState({ loading: true });
setTimeout(()=> {
this.setState({ loading: false,visible:false });
}, 3000);
},
handleCancel() {
this.setState({ visible:true });
},
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>
显示对话框
</button>
<Modal ref="modal"
visible={this.state.visible}
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
footer={[
<button className="ant-btn" onClick={this.handleCancel}>返 回</button>,
<button className="ant-btn ant-btn-primary" onClick={this.handleOk}>
提 交
<i className={'anticon anticon-loading'+(this.state.loading?'':'hide')}></i>
</button>
]}>
<p>对话框的内容</p>
</Modal>
</div>;
}
});
React.render(<Test/> , document.getElementById('components-modal-demo-footer'));
````

78
components/modal/index.jsx
View File

@ -2,56 +2,52 @@
var React = require('react');
var Dialog = require('rc-dialog');
function noop() {
}
var div;
var Modal = React.createClass({
getInitialState() {
return {
visible: false
};
},
module.exports = function (props) {
props = props || {};
handleCancel() {
this.refs.d.requestClose();
},
props.animation = 'zoom';
props.maskAnimation = 'fade';
props.width = props.width || 500;
getDefaultProps() {
return {
prefixCls: 'ant-modal',
onOk: noop,
onCancel: noop
};
},
props.onClose = props.onCancel || noop;
show() {
this.setState({
visible: true
});
},
function onCancel() {
if (props.onCancel) {
props.onCancel();
}
close();
}
function close() {
d.setState({
hide() {
this.setState({
visible: false
});
}
},
function onOk() {
var onOk = props.onOk;
if (onOk) {
onOk(close);
} else {
close();
}
}
handleOk() {
this.props.onOk();
},
var footer = [
<button type="button" className="ant-btn-default ant-btn" onClick={onCancel}>取 消</button>,
<button type="button" className="ant-btn-primary ant-btn" onClick={onOk}>确 定</button>
];
if (!div) {
div = document.createElement('div');
document.body.appendChild(div);
render() {
var props = this.props;
var footer = props.footer || [
<button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
<button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
];
return <Dialog animation="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
}
props.visible = true;
props.children = props.content;
props.footer = footer;
var d;
React.render(<Dialog {...props}/>, div, function () {
d = this;
});
};
});
module.exports = Modal;

31
components/modal/index.md
View File

@ -1,5 +1,6 @@
# Modal
- order: 1
- category: Components
- chinese: 对话框
@ -11,15 +12,29 @@
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.confirm()` 。
## API
是个方法，参数只有一个 object ，具体成员如下
| 成员 | 说明 | 类型 | 默认值 |
|----------|----------------|------------------|--------------|
| title | 标题 | React.Element | 无 |
| content | 面板内容 | React.Element | 无 |
| onOk | 确定回调 | function | 无 |
| onCancel | 取消回调 | function | 无 |
| width | 宽度 | String or Number | 无 |
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element | 无 |
| onOk | 点击确定回调 | function | 无 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
| width | 宽度 | String or Number | 500 |
| footer | 底部内容 | React.Element | 确定取消按钮 |
### confirm()
`confirm` 为一个方法，参数为 object，具体属性如下：
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element or String | 无 |
| onOk | 点击确定回调，参数为关闭函数 | function | 无 |
| onCancel | 取消回调，参数为关闭函数 | function | 无 |
| width | 宽度 | String or Number | 375 |
| iconClassName | 图标样式名 | String | anticon-exclamation-circle |

1
components/progress/index.md
View File

@ -2,6 +2,7 @@
- category: Components
- chinese: 进度条
- order: 0
---

41
components/select/demo/basic.md
View File

@ -1,16 +1,39 @@
# 基本型
# 基本使用
- order: 0
你说什么我还是听不清。
基本使用
---
````html
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
````
````jsx
var Select = antd.Select;
var Option = Select.Option;
function handleChange(value) {
console.log('selected ' + value);
}
var c1 = (
<div>
<div style={{width: 300}}>
<Select value="lucy" style={{width:250}} onChange={handleChange}>
<Option value="jack">
<b style={{
color: 'red'
}}>jack</b>
</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
</div>
);
React.render(
c1
, document.getElementById('components-select-demo-basic'));
````

35
components/select/demo/combobox.md Normal file
View File

@ -0,0 +1,35 @@
# combobox
- order: 2
combobox
---
````jsx
var Select = antd.Select;
var Option = Select.Option;
var style = {
color: 'red'
};
var c3 = (
<div>
<div style={{width: 300}}>
<Select combobox>
<Option value="jack">
<b style={style}>jack</b>
</Option>
<Option value="lucy" >lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
</div>
);
React.render(
c3
, document.getElementById('components-select-demo-combobox'));
````

41
components/select/demo/multiple.md Normal file
View File

@ -0,0 +1,41 @@
# 多选
- order: 1
多选（scroll the menu）
---
````jsx
var Select = antd.Select;
var Option = Select.Option;
var children = [];
for (var i = 10; i < 36; i++) {
children.push(<Option value={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log('selected ' + value);
}
var style = '.rc-select-menu {max-height:200px;overflow:auto;}';
var c2 = (
<div>
<div style={{width: 300}}>
<style>
{style}
</style>
<Select multiple value={['name2', 'name3']} onChange={handleChange}>
{children}
</Select>
</div>
</div>
);
React.render(
c2
, document.getElementById('components-select-demo-multiple'));
````

41
components/select/demo/tags.md Normal file
View File

@ -0,0 +1,41 @@
# tags
- order: 3
tags select（scroll the menu）
---
````jsx
var Select = antd.Select;
var Option = Select.Option;
var children = [];
for (var i = 10; i < 36; i++) {
children.push(<Option value={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log('selected ' + value);
}
var style = '.rc-select-menu {max-height:200px;overflow:auto;}';
var c2 = (
<div>
<div style={{width: 300}}>
<style>
{style}
</style>
<Select tags value={['name2', 'name3']} onChange={handleChange}>
{children}
</Select>
</div>
</div>
);
React.render(
c2
, document.getElementById('components-select-demo-tags'));
````

5
components/select/index.jsx Normal file
View File

@ -0,0 +1,5 @@
'use strict';
var Select = require('rc-select');
module.exports = Select;

42
components/select/index.md
View File

@ -2,33 +2,29 @@
- category: Components
- chinese: 选择框
- order: 3
---
这是一个单/多项选择器。
类似 select2 的选择器
## 何时使用
```html
<Select>
<Option value="lucy">lucy</Option>
</Select>
```
当你再次和我说起 青春时的故事
我正在下着雨的无锡 乞讨着生活的权利
前一天早晨 我睁开眼已是江南
他们说柔软的地方 总会发生柔软的事
那年的舞台上 说谎的人一直歌唱
大不列颠的广场上 有没有鸽子飞翔
青春和瞎子一起 变成了哑巴
今天扯平了我们的当年 分食了理想
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| value | specify the default selected item(s) | string/Array<String> | 无 |
| multiple | can select more than one option | | false |
| filterOption | whether filter options by input value | | true |
| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | |false |
| allowClear | show clear button | | false |
| combobox | enable combobox mode(can not set multiple at the same time) | | false |
| onSelect | called when a option is selected. param is option's value | function | 无 |
| onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | function | 无 |
| onChange | called when select an option or input value change(combobox) | function | 无 |
## 为什么使用
你可知道你的名字解释了我的一生
碎了满天的往事如烟 与世无争
当你装满行李 回到故乡
我的余生 却再也没有北方
有一天我又梦见 那个装满乐器的教室
你还站在门口 一脸羞涩的表情
你说这么多年你还没找到 让你心动的男人
我说去他妈的爱情 都是过眼云烟的东西
我的余生 都用来寻找北方

4
components/tab/index.jsx
View File

@ -1,4 +0,0 @@
var React = require('react');
var Tab = require('rc-tabs');
module.exports = Tab;

33
components/tab/index.md
View File

@ -1,33 +0,0 @@
# Tab
- category: Components
- chinese: 标签页
---
## 何时使用
当你再次和我说起 青春时的故事
我正在下着雨的无锡 乞讨着生活的权利
前一天早晨 我睁开眼已是江南
他们说柔软的地方 总会发生柔软的事
那年的舞台上 说谎的人一直歌唱
大不列颠的广场上 有没有鸽子飞翔
青春和瞎子一起 变成了哑巴
今天扯平了我们的当年 分食了理想
## 为什么使用
你可知道你的名字解释了我的一生
碎了满天的往事如烟 与世无争
当你装满行李 回到故乡
我的余生 却再也没有北方
有一天我又梦见 那个装满乐器的教室
你还站在门口 一脸羞涩的表情
你说这么多年你还没找到 让你心动的男人
我说去他妈的爱情 都是过眼云烟的东西
我的余生 都用来寻找北方

22
components/tabs/demo/basic.md Normal file
View File

@ -0,0 +1,22 @@
# 基本
- order: 2
基本用法。
---
````jsx
var Tab = antd.Tab;
var TabPane = Tab.TabPane;
function callback() {}
React.render(
<Tab defaultActiveKey="2" onChange={callback}>
<TabPane tab="tab 1" key="1">选项卡一</TabPane>
<TabPane tab="tab 2" key="2">选项卡二</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane>
</Tab>
, document.getElementById('components-tabs-demo-basic'));
````

22
components/tabs/demo/disabled.md Normal file
View File

@ -0,0 +1,22 @@
# 带有禁用
- order: 2
禁用某一项
---
````jsx
var Tab = antd.Tab;
var TabPane = Tab.TabPane;
function callback() {}
React.render(
<Tab defaultActiveKey="1" onChange={callback}>
<TabPane tab="tab 1" key="1">选项卡一</TabPane>
<TabPane tab="tab 2" disabled={true} key="2">选项卡二</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane>
</Tab>
, document.getElementById('components-tabs-demo-disabled'));
````

25
components/tabs/demo/slide.md Normal file
View File

@ -0,0 +1,25 @@
# 滑动
- order: 2
可以滑动
---
````jsx
var Tab = antd.Tab;
var TabPane = Tab.TabPane;
function callback() {}
React.render(
<Tab defaultActiveKey="1" onChange={callback}>
<TabPane tab="tab 1" key="1">选项卡一</TabPane>
<TabPane tab="tab 2" key="2">选项卡二</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane>
<TabPane tab="tab 4" key="4">选项卡四</TabPane>
<TabPane tab="tab 5" key="5">选项卡五</TabPane>
<TabPane tab="tab 6" key="6">选项卡六</TabPane>
</Tab>
, document.getElementById('components-tabs-demo-slide'));
````

18
components/tabs/index.jsx Normal file
View File

@ -0,0 +1,18 @@
'use strict';
var Tab = require('rc-tabs');
var React = require('react');
class AntTabs extends React.Component {
render() {
return <Tab {...this.props}/>;
}
}
AntTabs.defaultProps = {
prefixCls: 'ant-tabs'
};
AntTabs.TabPane = Tab.TabPane;
module.exports = AntTabs;

29
components/tabs/index.md Normal file
View File

@ -0,0 +1,29 @@
# Tab
- category: Components
- chinese: 标签页
- order: 5
---
选项卡切换组件。
## API
### Tab
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------|
| activeKey | 当前激活 tab 面板的 key | String | 无 |
| animation | 是否启用面板切换动画 | String | 空。目前只支持 slide-horizontal |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String | 第一个面板 |
| onChange | 切换面板的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 |
### Tab.TabPane
| 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------|
| key | 对应 activeKey | String | 无 |
| tab | 选项卡头显示文字 | React.Element or String | 无 |

16
components/tooltip/index.jsx
View File

@ -1,24 +1,20 @@
'use strict';
var React = require('react');
var Tooltip = require('rc-tooltip');
module.exports = React.createClass({
getInitialState: function () {
var state = {};
state.placement = this.props.placement;
state.title = this.props.title;
return state;
},
getDefaultProps: function () {
return {
placement: 'top'
};
},
render: function() {
return (
<Tooltip placement={this.state.placement}
return (
<Tooltip placement={this.props.placement}
prefixCls="ant-tooltip"
trigger="hover"
overlay={this.state.title}>
trigger={this.props.trigger}
overlay={this.props.title}>
{this.props.children}
</Tooltip>
);

1
components/tooltip/index.md
View File

@ -2,6 +2,7 @@
- category: Components
- chinese: 文字提示
- order: 7
---

8
index.js
View File

@ -3,11 +3,13 @@ require('./style/index.less');
var antd = {
Datepicker: require('./components/datepicker'),
Tooltip: require('./components/tooltip'),
Tab: require('./components/tab'),
modal: require('./components/modal'),
Tab: require('./components/tabs'),
Modal: require('./components/modal'),
Menu: require('rc-menu'),
Dropdown: require('./components/dropdown'),
Progress: require('./components/progress')
Progress: require('./components/progress'),
Select: require('./components/select'),
confirm: require('./components/modal/confirm')
};
module.exports = window.antd = antd;

21
package.json
View File

@ -14,12 +14,13 @@
"dependencies": {
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"rc-calendar": "~3.8.0",
"rc-dialog": "~4.1.1",
"rc-calendar": "~3.9.0",
"rc-dialog": "~4.3.1",
"rc-dropdown": "~1.0.0",
"rc-menu": "~3.3.0",
"rc-progress": "~1.0.0",
"rc-tabs": "~5.0.5",
"rc-select": "~3.3.5",
"rc-tabs": "~5.1.0",
"rc-tooltip": "~2.0.1"
},
"devDependencies": {
@ -27,13 +28,17 @@
"babel-loader": "~5.1.3",
"concurrently": "~0.1.0",
"css-loader": "~0.13.1",
"eslint": "~0.22.1",
"eslint-plugin-react": "~2.5.0",
"extract-text-webpack-plugin": "~0.8.1",
"gh-pages-cli": "~0.2.0",
"jshint": "~2.8.0",
"json-loader": "~0.5.1",
"less": "~2.5.1",
"less-loader": "~2.2.0",
"lodash": "~3.8.0",
"nico-jsx": "~0.5.5",
"nico-jsx": "~0.5.8",
"precommit-hook": "~1.0.7",
"style-loader": "~0.12.2",
"webpack": "~1.9.7"
},
@ -42,6 +47,10 @@
"start": "npm run clean && concurrent -r 'webpack -w --watch-aggregate-timeout 0' 'nico server --watch'",
"clean": "rm -rf _site",
"deploy": "npm run build && gh-pages -d _site -b gh-pages",
"test": "webpack"
}
"lint": "eslint components index.js --ext '.js,.jsx'",
"test": "webpack && npm run lint"
},
"precommit": [
"lint"
]
}

2
site/templates/code.html
View File

@ -6,6 +6,6 @@
<div class="code-box-meta">
<div class="code-box-title">{{ post.title }}</div>
{{ post.meta.description }}
<span class="collapse iconfont-home icon-chevron"></span>
<span class="collapse anticon anticon-circle-right"></span>
</div>
</div>

2
site/templates/component-aside.html
View File

@ -5,7 +5,7 @@
{%- set items = resource.pages|find_category(category) %}
<li>
<h4>{{category}}</h4>
<ul class="{%- if category === post.meta.category %}show{%- endif %}">
<ul class="{%- if category === post.meta.category %}aside-list-show{%- endif %}">
{%- for item in items %}
<li class="{%- if item.title === post.title %}current{%- endif %}">
<a href="{{permalink_url(item)}}">

6
site/templates/component.html
View File

@ -25,9 +25,9 @@
{%- endif %}
</h1>
{{ post.html }}
{%- if post.meta.template === 'component' && !post.meta.nodemos %}
{%- include "demos.html" %}
{%- endif %}
</article>
{%- if post.meta.template === 'component' && !post.meta.nodemos %}
{%- include "demos.html" %}
{%- endif %}
</section>
{% endblock %}

11
site/templates/layout.html
View File

@ -10,10 +10,10 @@
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<!--<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" href="/static/tomorrow.css">
{% block styles %}{% endblock %}
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<!-- react -->
<script src="https://a.alipayobjects.com/react/0.13.2/react.js"></script>
@ -45,16 +45,13 @@
<a href="/components">组件</a>
</li>
<li class="{%- if post.filename === 'design' %}current{%- endif %}">
<a href="/docs/design">设计</a>
<a class="disabled" href="/docs/design">设计</a>
</li>
<li class="{%- if post.filename === 'modes' %}current{%- endif %}">
<a href="/docs/modes">模式</a>
<a class="disabled" href="/docs/modes">模式</a>
</li>
<li class="{%- if post.filename === 'cases' %}current{%- endif %}">
<a href="/docs/cases">案例</a>
</li>
<li class="{%- if post.filename === 'download' %}current{%- endif %}">
<a href="/docs/download">下载</a>
<a class="disabled" href="/docs/cases">案例</a>
</li>
</ul>
</nav>

2
static/homeLoad.js
View File

@ -21,7 +21,7 @@ $(function () {
"<span>Ant Design</span>" +
"</div>" +
"<div class='load-bar'></div>" +
"</div>").appendTo(self.body);
"</div>").appendTo(".banner-box");
self.loadBar=self.loadBox.find(".load-bar");
var loadText=self.loadBox.find("span"),
str=loadText.text(),

24
static/script.js
View File

@ -33,7 +33,19 @@ $(function() {
$(this).parent().parent().addClass('expand');
}
});
$.easing['jswing'] = $.easing['swing'];
$.extend($.easing,{
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
});
var navFunc = {
navStrArr: [],
init: function() {
@ -124,19 +136,25 @@ $(function() {
var self = this;
var title = self.listBox.find("h4");
title.bind("click", function(e) {
var parent = $(this).parent();
var parent = $(this).parent(),
list=parent.find("ul");
if (parent.attr("open")) {
parent.removeAttr("open");
if (parent.index() == self.num) {
$(this).addClass("current");
}
list.animate({marginTop:-list.height()},400,"easeInOutCirc",function (){
list.css({"display":"none"})
})
} else {
parent.attr("open", true);
if (parent.index() == self.num) {
$(this).removeClass("current");
}
list.css({"display":"block","margin-top":-list.height()});
list.animate({marginTop:0},400,"easeInOutCirc")
}
parent.find("ul").slideToggle(300);
//parent.find("ul").slideToggle(300);
});
}
};

101
static/style.css
View File

@ -81,24 +81,19 @@ p {
padding: 0;
}
img,
input {
display: block;
}
ul,
li {
list-style: none;
}
a {
color: #6EB4E0;
color: #00ABEA;
text-decoration: none;
transition: color .3s ease;
}
a:hover {
color: #6EB4E0;
color: #23C0FA;
}
.clearfix:after {
@ -111,13 +106,21 @@ a:hover {
display: none;
}
::selection {
background: #4BB8FF;
color: #fff;
}
::-moz-selection {
background: #4BB8FF;
color: #fff;
}
header {
width: 100%;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #eee;
font-size: 16px;
}
.fn-hide {
@ -247,6 +250,12 @@ a.logo {
display: block;
}
.nav ul li a.disabled {
cursor: not-allowed;
color: #ddd !important;
pointer-events: none;
}
.nav ul li.current a {
color: #71B5DE;
font-weight: bold;
@ -370,7 +379,7 @@ a.logo {
}
.load-main-box .load-bar{
width: 0%;
height: 3px;
height: 2px;
background: #6EB4E0;
transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
@ -450,13 +459,16 @@ footer ul li > a {
cursor: pointer;
transition: background .5s, border .5s;
border-left: 3px solid transparent;
position: relative;
z-index: 1;
background: #F9F9F9;
}
.aside-container li>ul {
display: none;
}
.aside-container li>ul.show {
.aside-container li>ul.aside-list-show {
display: block;
}
@ -518,8 +530,14 @@ footer ul li > a {
}
.markdown {
width: 75%;
color: #777;
font-size: 14px;
line-height: 1.8;
}
.markdown img {
display: block;
}
.markdown h1 {
@ -538,12 +556,16 @@ footer ul li > a {
.markdown p,
.markdown pre {
margin: 1.2em 0;
width: 75%;
}
.markdown > ul > li {
list-style: circle;
margin-left: 18px;
margin-left: 20px;
padding-left: 8px;
}
.markdown code {
margin: 0 3px;
}
.markdown pre code {
@ -551,6 +573,7 @@ footer ul li > a {
border: none;
border-radius: 6px;
padding: 12px 20px;
margin: 0;
}
.markdown > table {
@ -558,7 +581,11 @@ footer ul li > a {
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 75%;
width: 100%;
}
.markdown > table th {
white-space: nowrap;
}
.markdown > table th,
@ -1581,17 +1608,17 @@ footer ul li > a {
/***************************************************************************/
.index-page header {
transition: opacity 0.5S;
-webkit-animation: xRightMatrix .5s ease-out .3s backwards;
animation: xRightMatrix .5s ease-out .3s backwards;
-webkit-animation: xRightMatrix .5s ease-out;
animation: xRightMatrix .5s ease-out;
}
.index-page .nav {
-webkit-animation: yTopMatrix .5s ease-out .5s backwards;
animation: yTopMatrix .5s ease-out .5s backwards;
-webkit-animation: yTopMatrix .5s ease-out .4s backwards;
animation: yTopMatrix .5s ease-out .4s backwards;
}
.index-page footer {
-webkit-animation: yBottomMatrix .5s ease-out 1s backwards;
animation: yBottomMatrix .5s ease-out 1s backwards;
-webkit-animation: yBottomMatrix .5s ease-out .6s backwards;
animation: yBottomMatrix .5s ease-out .6s backwards;
}
.index-page .logo {
@ -1600,8 +1627,8 @@ footer ul li > a {
}
.index-page .search {
-webkit-animation: xRightMatrix .5s ease-out .3s backwards;
animation: xRightMatrix .5s ease-out .3s backwards;
-webkit-animation: xRightMatrix .5s ease-out .2s backwards;
animation: xRightMatrix .5s ease-out .2s backwards;
}
.api-link {
@ -1627,6 +1654,10 @@ footer ul li > a {
margin-right: 5px;
}
.component-demos {
margin: 2em 0 1em;
}
.component-demos .icon-all {
cursor: pointer;
font-size: 16px;
@ -1702,6 +1733,7 @@ footer ul li > a {
.code-box-meta > p {
font-size: 12px;
margin: 0.5em 0;
padding-right: 25px;
}
.code-box .collapse {
@ -1709,32 +1741,25 @@ footer ul li > a {
right: 15px;
top: 50%;
cursor: pointer;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 14px;
border-radius: 100%;
width: 18px;
height: 18px;
font-size: 18px;
line-height: 18px;
opacity: 0.5;
margin-top: -10px;
text-align: center;
transform: rotate(90deg);
transition: all 0.3s ease;
}
.code-box.expand .collapse {
transform: rotate(-90deg);
}
.code-box .collapse:hover {
opacity: 1;
}
.code-box .collapse:before {
transform: rotate(90deg);
transform-origin: 50% 50%;
display: inline-block;
transition: transform 0.3s ease;
}
.code-box.expand .collapse:before {
transform: rotate(270deg);
}
.code-box .highlight {
overflow: hidden;
display: none;

7
style/components/button.less
View File

@ -5,10 +5,11 @@
// -----------------------------
.@{btnPrefixClass} {
.btn;
.btn-default;
&-primary {
.btn-primary;
.@{btnPrefixClass}-group &:not(:first-child):not(:last-child) {
border-right-color: #00abea;
border-left-color: #00abea;
@ -25,10 +26,6 @@
}
}
&-default {
.btn-default;
}
&-ghost {
.btn-ghost;
}

73
style/components/confirm.less
View File

@ -1,47 +1,46 @@
@prefixConfirmCls: rc-dialog-confirm;
@confirmPrefixCls: ant-confirm;
.@{prefixConfirmCls}-body {
.ant-icon {
font-size: 24px;
display: inline-block;
margin-right: 5px;
position: relative;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: inherit;
vertical-align: baseline;
text-align: center;
text-transform: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0px;
-moz-osx-font-smoothing: grayscale;
font-family: sans-serif;
.@{confirmPrefixCls} {
.ant-icon-warn-circle:before {
content: "\e613";
display: block;
font-family: "iconfont" !important;
.ant-modal-header {
display: none;
}
.ant-modal-body {
padding: 30px 40px;
}
.@{confirmPrefixCls}-body {
.@{confirmPrefixCls}-content {
margin-left: 37px;
font-size: 12px;
color: #999;
}
.ant-icon-warn-circle {
.anticon {
font-size: 24px;
margin-right: 12px;
position: relative;
top: 2px;
}
.anticon-exclamation-circle {
color: #fac450;
}
.anticon-question-circle {
color: #2CB7ED;
}
}
.@{prefixConfirmCls}-description {
margin-left: 33px;
font-size: 12px;
color: #999;
}
}
.@{prefixConfirmCls}-btns {
margin-top: 30px;
float: right;
[btn] + [btn] {
margin-left: 10px;
margin-bottom: 0;
.@{confirmPrefixCls}-btns {
margin-top: 30px;
float: right;
button + button {
margin-left: 10px;
margin-bottom: 0;
}
}
}

2
style/components/datepicker.less
View File

@ -1,4 +1,4 @@
@prefixCalendarClass: rc-calendar;
@prefixCalendarClass: ant-calendar;
.@{prefixCalendarClass} {
box-sizing: border-box;

179
style/components/datepicker/Calendar.less
View File

@ -1,18 +1,86 @@
.calendarPanelHeader(@prefixCalendarClass) {
padding: 0 10px;
height: 34px;
line-height: 34px;
text-align: center;
user-select: none;
-webkit-user-select: none;
border-bottom: 1px solid #e9e9e9;
a:hover {
color: @link-hover-color;
}
.@{prefixCalendarClass}-century-select,
.@{prefixCalendarClass}-decade-select,
.@{prefixCalendarClass}-year-select,
.@{prefixCalendarClass}-month-select {
padding: 0px 2px;
font-weight: bold;
display: inline-block;
color: #666;
line-height: 34px;
}
.@{prefixCalendarClass}-century-select-arrow,
.@{prefixCalendarClass}-decade-select-arrow,
.@{prefixCalendarClass}-year-select-arrow,
.@{prefixCalendarClass}-month-select-arrow {
display: none;
}
.@{prefixCalendarClass}-prev-century-btn,
.@{prefixCalendarClass}-next-century-btn,
.@{prefixCalendarClass}-prev-decade-btn,
.@{prefixCalendarClass}-next-decade-btn,
.@{prefixCalendarClass}-prev-month-btn,
.@{prefixCalendarClass}-next-month-btn,
.@{prefixCalendarClass}-prev-year-btn,
.@{prefixCalendarClass}-next-year-btn {
position: absolute;
top: 0;
color: #999;
font-family: Arial,"Hiragino Sans GB","Microsoft Yahei","Microsoft Sans Serif",sans-serif;
padding: 0 5px;
font-size: 16px;
display: inline-block;
line-height: 34px;
}
.@{prefixCalendarClass}-prev-century-btn,
.@{prefixCalendarClass}-prev-decade-btn,
.@{prefixCalendarClass}-prev-year-btn {
left: 7px;
}
.@{prefixCalendarClass}-next-century-btn,
.@{prefixCalendarClass}-next-decade-btn,
.@{prefixCalendarClass}-next-year-btn {
right: 7px;
}
.@{prefixCalendarClass}-prev-month-btn {
left: 29px;
}
.@{prefixCalendarClass}-next-month-btn {
right: 29px;
}
}
.@{prefixCalendarClass} {
position: relative;
outline: none;
font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
width: 253px;
border: 1px solid #ccc;
list-style: none;
font-size: 12px;
font-size: @font-size-base;
text-align: left;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 5px #ccc;
border-radius: @border-radius-base;
box-shadow: 0 0 4px #d9d9d9;
background-clip: padding-box;
border: 1px solid #ccc;
line-height: 1.5;
line-height: @line-height-base;
&-week-number {
width: 286px;
@ -23,64 +91,11 @@
}
&-header {
padding: 0 10px;
height: 34px;
line-height: 30px;
text-align: center;
user-select: none;
-webkit-user-select: none;
border-bottom: 1px solid #ccc;
> a {
font-weight: bold;
display: inline-block;
padding: 4px 5px;
text-align: center;
width: 30px;
&:hover {
cursor: pointer;
color: #23c0fa;
}
}
.@{prefixCalendarClass}-prev-month-btn {
position: absolute;
left: 25px;
}
.@{prefixCalendarClass}-next-month-btn {
position: absolute;
right: 25px;
}
.@{prefixCalendarClass}-month-select {
width: 140px;
}
.@{prefixCalendarClass}-month-select-arrow {
display: none;
}
}
&-prev-month-btn,
&-next-month-btn,
&-prev-year-btn,
&-next-year-btn {
position: absolute;
top: 0;
}
&-next-year-btn {
right: 0;
}
&-prev-year-btn {
left: 0;
.calendarPanelHeader(@prefixCalendarClass);
}
&-calendar-body {
padding: 9px 10px 10px;
padding: 5px 10px;
}
table {
@ -117,7 +132,7 @@
}
&-cell {
padding: 1px 0;
padding: 4px 0;
}
&-date {
@ -125,11 +140,11 @@
margin: 0 auto;
color: #666;
border-radius: 4px 4px;
width: 26px;
height: 26px;
width: 20px;
height: 20px;
line-height: 20px;
padding: 0;
background: transparent;
line-height: 26px;
text-align: center;
&:hover {
@ -174,23 +189,43 @@
}
&-footer {
padding: 3px 0;
text-align: center;
padding: 0 15px;
height: 42px;
line-height: 42px;
border-top: 1px solid #e9e9e9;
}
&-footer-btn {
margin-top: 2px;
text-align: center;
display: block;
}
.@{prefixCalendarClass}-today-btn, .@{prefixCalendarClass}-clear-btn {
&-footer > div {
display: inline-block;
}
.@{prefixCalendarClass}-today-btn,
.@{prefixCalendarClass}-clear-btn {
display: inline-block;
padding: 4px 5px;
text-align: center;
color: #f46830;
margin: 0 10px;
&:hover {
cursor: pointer;
color: #23c0fa;
}
}
}
.@{prefixCalendarClass}-ok-btn {
.btn;
.btn-primary;
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
letter-spacing: 3px;
text-indent: 3px;
padding-left: 8px;
padding-right: 8px;
position: absolute;
bottom: 9px;
right: 9px;
}
}

59
style/components/datepicker/DecadePanel.less
View File

@ -14,52 +14,13 @@
}
.@{prefixCalendarClass}-decade-panel-header {
padding: 0 10px;
height: 34px;
line-height: 34px;
position: relative;
text-align: center;
user-select: none;
-webkit-user-select: none;
border-bottom: 1px solid #ccc;
> a {
font-weight: bold;
display: inline-block;
padding: 1px 5px;
text-align: center;
width: 30px;
&:hover {
cursor: pointer;
color: #23c0fa;
}
}
}
.@{prefixCalendarClass}-decade-panel-prev-century-btn, .@{prefixCalendarClass}-decade-panel-next-century-btn {
position: absolute;
top: 0;
}
.@{prefixCalendarClass}-decade-panel-prev-century-btn {
user-select: none;
left: 0;
}
.@{prefixCalendarClass}-decade-panel-next-century-btn {
user-select: none;
right: 0;
}
.@{prefixCalendarClass}-decade-panel-body {
padding: 9px 10px 10px;
.calendarPanelHeader(~"@{prefixCalendarClass}-decade-panel");
}
.@{prefixCalendarClass}-decade-panel-table {
table-layout: fixed;
width: 100%;
height: 255px;
height: 248px;
border-collapse: separate;
}
@ -68,15 +29,15 @@
}
.@{prefixCalendarClass}-decade-panel-decade {
display: block;
display: inline-block;
margin: 0 auto;
color: #666;
border-radius: 4px 4px;
height: 36px;
padding: 0;
background: transparent;
line-height: 36px;
text-align: center;
height: 24px;
line-height: 24px;
padding: 0px 6px;
border-radius: 4px;
&:hover {
background: #ebfaff;
@ -100,8 +61,8 @@
-webkit-user-select: none;
}
.@{prefixCalendarClass}-decade-panel-decade:before {
content: "\e651";
font-family: "iconfont" !important;
content: "\e611";
font-family: "anticon" !important;
}
}
@ -110,4 +71,4 @@
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
}
}

62
style/components/datepicker/MonthPanel.less
View File

@ -14,60 +14,13 @@
}
.@{prefixCalendarClass}-month-panel-header {
padding: 0 10px;
height: 34px;
line-height: 30px;
position: relative;
text-align: center;
user-select: none;
-webkit-user-select: none;
border-bottom: 1px solid #ccc;
> a {
font-weight: bold;
display: inline-block;
padding: 4px 5px;
text-align: center;
width: 30px;
&:hover {
cursor: pointer;
color: #23c0fa;
}
}
}
.@{prefixCalendarClass}-month-panel-prev-year-btn, .@{prefixCalendarClass}-month-panel-next-year-btn {
position: absolute;
top: 0;
}
.@{prefixCalendarClass}-month-panel-prev-year-btn {
user-select: none;
left: 0;
}
.@{prefixCalendarClass}-month-panel .@{prefixCalendarClass}-month-panel-year-select {
width: 180px;
}
.@{prefixCalendarClass}-month-panel-year-select-arrow {
display: none;
}
.@{prefixCalendarClass}-month-panel-next-year-btn {
user-select: none;
right: 0;
}
.@{prefixCalendarClass}-month-panel-body {
padding: 9px 10px 10px;
.calendarPanelHeader(~"@{prefixCalendarClass}-month-panel");
}
.@{prefixCalendarClass}-month-panel-table {
table-layout: fixed;
width: 100%;
height:255px;
height: 248px;
border-collapse: separate;
}
@ -76,16 +29,15 @@
}
.@{prefixCalendarClass}-month-panel-month {
display: block;
width: 46px;
display: inline-block;
margin: 0 auto;
color: #666;
border-radius: 4px 4px;
height: 36px;
padding: 0;
background: transparent;
line-height: 36px;
text-align: center;
height: 24px;
line-height: 24px;
padding: 0px 6px;
border-radius: 4px;
&:hover {
background: #ebfaff;

54
style/components/datepicker/Picker.less
View File

@ -1,4 +1,5 @@
.@{prefixCalendarClass}-picker .@{prefixCalendarClass}, .@{prefixCalendarClass}-picker-container .@{prefixCalendarClass} {
.@{prefixCalendarClass}-picker .@{prefixCalendarClass},
.@{prefixCalendarClass}-picker-container .@{prefixCalendarClass} {
position: absolute;
display: none;
left: -9999px;
@ -8,47 +9,15 @@
.@{prefixCalendarClass}-picker {
position: relative;
&-open .@{prefixCalendarClass}, &-container-open .@{prefixCalendarClass} {
display: block;
}
}
.@{prefixCalendarClass}-picker {
display: inline-block;
&-input {
box-sizing: border-box;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
height: 32px;
width: 100%;
position: relative;
display: inline-block;
margin: 0 0;
padding: 7px 10px;
border-radius: 6px 6px;
border: 1px solid #d9d9d9;
background-color: #ffffff;
color: #666;
line-height: 1.5;
transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
font-family: inherit;
vertical-align: baseline;
&:focus {
border-color: #23c0fa;
box-shadow: 0 0 3px #23c0fa;
}
&:hover {
border-color: #23c0fa;
}
.ant-input;
}
&-icon {
position: absolute;
-webkit-user-select: none;
user-select: none;
.transition(all .3s @ease-in-out);
&:after {
position: relative;
left: -22px;
@ -56,8 +25,19 @@
content: "\e60c";
font-size: 14px;
color: #999;
top: 4px;
top: 5px;
margin-right: -20px;
}
}
&-open .@{prefixCalendarClass},
&-container-open .@{prefixCalendarClass} {
display: block;
}
&-open &-input {
border-color: #23c0fa;
box-shadow: 0 0 3px #23c0fa;
}
&-open &-icon:after {
color: @primary-color;
}
}

20
style/components/datepicker/Time.less
View File

@ -1,7 +1,19 @@
@import "../../mixins/input";
.@{prefixCalendarClass}-time {
> span {
margin: 0 2px;
}
~ .@{prefixCalendarClass}-footer-btn {
display: inline;
text-align: left;
}
}
.@{prefixCalendarClass}-time-input {
height: 25px;
width: 40px;
.rc-input;
}
.ant-input;
width: 30px;
height: 26px;
padding: 0;
text-align: center;
}

13
style/components/datepicker/TimePanel.less
View File

@ -17,11 +17,11 @@
text-align: center;
user-select: none;
-webkit-user-select: none;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #e9e9e9;
}
.@{prefixCalendarClass}-time-panel-body {
padding: 9px 10px 10px;
padding: 2px 10px;
}
.@{prefixCalendarClass}-time-panel-title {
@ -35,7 +35,6 @@
border-radius: 4px;
}
.@{prefixCalendarClass}-time-panel-table {
table-layout: fixed;
width: 100%;
@ -44,16 +43,16 @@
.@{prefixCalendarClass}-time-panel-cell {
text-align: center;
height: 42px;
height: 40px;
vertical-align: middle;
}
.@{prefixCalendarClass}-time-panel-time {
line-height: 26px;
line-height: 24px;
display: block;
border-radius: 4px;
width:26px;
margin: 0 auto;
color: #666;
&:hover {
background: #ebfaff;
@ -70,4 +69,4 @@
background: #3fc7fa;
color: #fff;
}
}
}

68
style/components/datepicker/YearPanel.less
View File

@ -14,60 +14,13 @@
}
.@{prefixCalendarClass}-year-panel-header {
padding: 0 10px;
height: 34px;
line-height: 30px;
position: relative;
text-align: center;
user-select: none;
-webkit-user-select: none;
border-bottom: 1px solid #ccc;
> a {
font-weight: bold;
display: inline-block;
padding: 4px 5px;
text-align: center;
width: 30px;
&:hover {
cursor: pointer;
color: #23c0fa;
}
}
}
.@{prefixCalendarClass}-year-panel-prev-decade-btn, .@{prefixCalendarClass}-year-panel-next-decade-btn {
position: absolute;
top: 0;
}
.@{prefixCalendarClass}-year-panel-prev-decade-btn {
user-select: none;
left: 0;
}
.@{prefixCalendarClass}-year-panel .@{prefixCalendarClass}-year-panel-decade-select {
width: 180px;
}
.@{prefixCalendarClass}-year-panel-decade-select-arrow {
display: none;
}
.@{prefixCalendarClass}-year-panel-next-decade-btn {
user-select: none;
right: 0;
}
.@{prefixCalendarClass}-year-panel-body {
padding: 9px 10px 10px;
.calendarPanelHeader(~"@{prefixCalendarClass}-year-panel");
}
.@{prefixCalendarClass}-year-panel-table {
table-layout: fixed;
width: 100%;
height: 255px;
height: 248px;
border-collapse: separate;
}
@ -76,16 +29,15 @@
}
.@{prefixCalendarClass}-year-panel-year {
display: block;
width: 46px;
display: inline-block;
margin: 0 auto;
color: #666;
border-radius: 4px 4px;
height: 36px;
padding: 0;
background: transparent;
line-height: 36px;
text-align: center;
height: 24px;
line-height: 24px;
padding: 0px 6px;
border-radius: 4px;
&:hover {
background: #ebfaff;
@ -109,8 +61,8 @@
-webkit-user-select: none;
}
.@{prefixCalendarClass}-year-panel-year:before {
content: "\e651";
font-family: "iconfont" !important;
content: "\e611";
font-family: "anticon" !important;
}
}
@ -119,4 +71,4 @@
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
}
}

4
style/components/dialog.less
View File

@ -1,10 +1,10 @@
@prefixDialogCls: rc-dialog;
@dialogPrefixCls: ant-modal;
@import "./dialog/Dialog.less";
@import "./dialog/Mask.less";
.@{prefixDialogCls}-footer button + button {
.@{dialogPrefixCls}-footer button + button {
margin-left: 10px;
margin-bottom: 0;
}

2
style/components/dialog/Dialog.less
View File

@ -1,4 +1,4 @@
.@{prefixDialogCls} {
.@{dialogPrefixCls} {
outline: none;
position: absolute;
left: -9999px;

2
style/components/dialog/Mask.less
View File

@ -1,4 +1,4 @@
.@{prefixDialogCls} {
.@{dialogPrefixCls} {
&-wrap-hidden > &-mask {
display: none;

2
style/components/dropdown.less
View File

@ -1,4 +1,4 @@
@dropdownPrefixCls: rc-dropdown;
@dropdownPrefixCls: ant-dropdown;
.@{dropdownPrefixCls} {
position: absolute;

239
style/components/select.less
View File

@ -0,0 +1,239 @@
@selectPrefixCls: rc-select;
//mixin
.selection__clear(){
cursor: pointer;
float: right;
font-weight: bold;
}
.@{selectPrefixCls} {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
color: #666;
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
> ul > li > a {
padding: 0;
background-color: #fff;
}
// arrow
&-arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
b {
border-color: #999999 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
}
&-selection {
outline: none;
user-select: none;
-webkit-user-select: none;
box-sizing: border-box;
display: block;
background-color: #fff;
border-radius: 6px;
border: 1px solid #d9d9d9;
&:hover {
border-color: #23c0fa;
}
&:active {
border-color: #2db7f5;
}
}
&-selection--single {
height: 28px;
cursor: pointer;
.@{selectPrefixCls}-selection__rendered {
display: block;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 10px;
padding-right: 20px;
line-height: 28px;
}
.@{selectPrefixCls}-selection__clear {
.selection__clear();
}
}
&-selection--multiple {
min-height: 32px;
cursor: text;
.@{selectPrefixCls}-selection__rendered {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 8px;
}
.@{selectPrefixCls}-selection__clear {
.selection__clear();
margin-top: 5px;
margin-right: 10px;
}
.@{selectPrefixCls}-selection__choice {
background-color: #f3f3f3;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 4px;
margin-top: 4px;
padding: 4px 8px;
}
.@{selectPrefixCls}-selection__choice__remove {
color: #919191;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0 0 0 8px;
&:hover {
color: #333;
}
}
}
&-search--inline {
float: left;
.@{selectPrefixCls}-search__field {
border: none;
font-size: 100%;
margin-top: 5px;
background: transparent;
outline: 0;
}
> i {
float: right;
}
}
&-dropdown {
display: none;
background-color: white;
border: 1px solid #d9d9d9;
box-shadow: 0 0px 4px #d9d9d9;
border-radius: 4px;
box-sizing: border-box;
width: 100%;
z-index: 100;
//border-top: none;
//border-top-left-radius: 0;
//border-top-right-radius: 0;
position: absolute;
top: 100%;
margin-top: 4px;
outline: none;
.@{selectPrefixCls}-menu-item[aria-selected=true] {
background-color: #ddd;
}
}
&-search--dropdown {
display: block;
padding: 4px;
.@{selectPrefixCls}-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
border: 1px solid #d9d9d9;
border-radius: 4px;
outline: none;
}
&.@{selectPrefixCls}-search--hide {
display: none;
}
}
&-open {
.@{selectPrefixCls}-arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
.@{selectPrefixCls}-dropdown {
display: block;
}
.@{selectPrefixCls}-selection {
//border-bottom-left-radius: 0;
//border-bottom-right-radius: 0;
}
}
&-menu {
outline: none;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
z-index: 9999;
> li {
margin: 0;
padding: 0;
}
& > &-item {
position: relative;
display: block;
padding: 7px 10px;
font-weight: normal;
color: #666666;
white-space: nowrap;
&:hover, &-active, &-selected {
background-color: rgba(142, 200, 249, 0.1) !important;
}
&-disabled {
color: #ccc;
cursor: not-allowed;
pointer-events: none;
&:hover {
color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
}
&-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0;
}
}
}
}

229
style/components/tab.less
View File

@ -0,0 +1,229 @@
@prefixClass: ant-tabs;
@easing-in-out: cubic-bezier(0.35, 0, 0.25, 1);
@effect-duration: .3s;
.@{prefixClass} {
outline: none;
box-sizing: border-box;
border-bottom: 2px solid #f3f3f3;
position: relative;
&-ink-bar {
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
box-sizing: border-box;
height: 4px;
margin-top: -3px;
background-color: #3fc7fa;
transform: scaleX(1);
transform-origin: 0 0;
&-transition-forward {
transition: right 0.3s @easing-in-out,
left 0.3s @easing-in-out 0.3s * 0.3;
}
&-transition-backward {
transition: right 0.3s @easing-in-out 0.3s * 0.3,
left 0.3s @easing-in-out;
}
}
&-nav-container {
font-size: 14px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
overflow: hidden;
position: relative;
white-space: nowrap;
padding-left: 32px;
padding-right: 32px;
border-bottom: 2px solid #f3f3f3;
}
&-tab-prev, &-tab-next {
user-select: none;
-webkit-user-select: none;
z-index: 1;
margin-right: -2px;
width: 32px;
height: 100%;
line-height: 36px;
cursor: pointer;
border: none;
background-color: transparent;
position: absolute;
&-icon {
position: relative;
display: inline-block;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: inherit;
vertical-align: baseline;
text-align: center;
text-transform: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0;
-moz-osx-font-smoothing: grayscale;
font-family: sans-serif;
&:before {
display: block;
font-family: "iconfont" !important;
}
}
}
&-tab-next {
right: 2px;
&-icon:before {
content: "\e651";
}
}
&-tab-prev {
left: 0;
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
&-icon:before {
content: "\e651";
}
}
&-nav-wrap {
width: 100%;
overflow: hidden;
}
&-nav-scroll {
width:99999px;
}
&-nav {
height: 36px;
box-sizing: border-box;
padding-left: 0;
transition: left 0.5s @easing-in-out;
position: relative;
margin: 0;
list-style: none;
display: inline-block;
&:before, &:after {
display: table;
content: " ";
}
&:after {
clear: both;
}
div.@{prefixClass}-tab-active {
> a, > a:hover, > a:focus {
color: #3fc7fa;
cursor: default;
text-decoration: none;
}
}
div.@{prefixClass}-tab-disabled {
pointer-events: none;
cursor: default;
a {
color: #ccc;
}
}
.@{prefixClass}-tab {
float: left;
height: 100%;
padding: 10px 20px;
margin-right: 30px;
box-sizing: border-box;
position: relative;
display: block;
> a {
transition: color 0.3s @easing-in-out;
margin-bottom: 4px;
font-weight: 500;
display: inline-block;
color: #666;
}
> a:hover {
color: #23c0fa;
cursor: pointer;
}
> a:hover, > a:focus {
text-decoration: none;
}
}
}
&-tabpane-hidden {
display: none;
}
&-content {
position: relative;
width: 100%;
overflow: hidden;
}
&-slide-horizontal-backward-enter {
transform: translateX(-100%);
}
&-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active {
transform: translateX(0);
transition: transform @effect-duration @easing-in-out;
}
&-slide-horizontal-backward-leave {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(0);
}
&-slide-horizontal-backward-leave&-slide-horizontal-backward-leave-active {
transform: translateX(100%);
transition: transform @effect-duration @easing-in-out;
}
&-slide-horizontal-forward-enter {
transform: translateX(100%);
}
&-slide-horizontal-forward-enter&-slide-horizontal-forward-enter-active {
transform: translateX(0);
transition: transform @effect-duration @easing-in-out;
}
&-slide-horizontal-forward-leave {
position: absolute;
transform: translateX(0);
top: 0;
right: 0;
left: 0;
bottom: 0;
}
&-slide-horizontal-forward-leave&-slide-horizontal-forward-leave-active {
transform: translateX(-100%);
transition: transform @effect-duration @easing-in-out;
}
}

29
style/components/tooltip.less
View File

@ -11,11 +11,13 @@
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #373737;
@tooltip-opacity: 1;
@tooltip-opacity: 0.9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-distance: @tooltip-arrow-width+4;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
// Base class
@ -24,24 +26,27 @@
z-index: 1070;
display: block;
visibility: visible;
left: -9999px;
top: -9999px;
font-size: @font-size-base;
line-height: 1.5;
line-height: @line-height-base;
opacity: @tooltip-opacity;
&-placement-top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&-placement-right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&-placement-bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&-placement-left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
&-placement-top { padding: @tooltip-arrow-width 0 @tooltip-distance 0; }
&-placement-right { padding: 0 @tooltip-arrow-width 0 @tooltip-distance; }
&-placement-bottom { padding: @tooltip-distance 0 @tooltip-arrow-width 0; }
&-placement-left { padding: 0 @tooltip-distance 0 @tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.@{tooltipPrefixClass}-inner {
max-width: @tooltip-max-width;
padding: 7px 10px;
padding: 8px 10px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: 6px;
border-radius: @border-radius-base;
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
@ -56,7 +61,7 @@
.@{tooltipPrefixClass} {
&-placement-top &-arrow {
bottom: 0;
bottom: @tooltip-distance - @tooltip-arrow-width;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
@ -64,20 +69,20 @@
}
&-placement-right &-arrow {
top: 50%;
left: 0;
left: @tooltip-distance - @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&-placement-left &-arrow {
top: 50%;
right: 0;
right: @tooltip-distance - @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&-placement-bottom &-arrow {
top: 0;
top: @tooltip-distance - @tooltip-arrow-width;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;

40
style/core/base.less
View File

@ -58,29 +58,27 @@ a {
}
// Utility classes
.fn-clear {
zoom:1;
&:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
.clearfix();
}
.fn-left,
.fn-right {
display:inline;
.center-block {
.center-block();
}
.fn-left {
float:left;
.pull-left {
float: left;
}
.fn-right {
float:right;
.pull-right {
float: right;
}
body .fn-hide {
display:none;
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.affix {
position: fixed;
}

96
style/core/iconfont.less
View File

@ -43,60 +43,68 @@
.@{iconfont-css-prefix}-caret-up:before {content:"\e60f";.rotate(180deg);}
.@{iconfont-css-prefix}-caret-right {.ie-rotate(3);}
.@{iconfont-css-prefix}-caret-right:before {content:"\e60f";.rotate(270deg);}
.@{iconfont-css-prefix}-caret-circle-right:before {content:"\e60d";}
.@{iconfont-css-prefix}-caret-round-right:before {content:"\e60d";}
.@{iconfont-css-prefix}-caret-round-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-caret-round-left:before {content:"\e60d";.rotate(180deg);}
.@{iconfont-css-prefix}-caret-circle-right:before {content:"\e60e";}
.@{iconfont-css-prefix}-caret-circle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-caret-circle-left:before {content:"\e60d";.rotate(180deg);}
.@{iconfont-css-prefix}-caret-circleo-right:before {content:"\e60e";}
.@{iconfont-css-prefix}-caret-circleo-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-caret-circleo-left:before {content:"\e60e";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-circle-right:before {content:"\e602";}
.@{iconfont-css-prefix}-angle-circle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-circle-left:before {content:"\e602";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-circleo-right:before {content:"\e603";}
.@{iconfont-css-prefix}-angle-circleo-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-circleo-left:before {content:"\e603";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-double-right:before {content:"\e604";}
.@{iconfont-css-prefix}-angle-double-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-double-left:before {content:"\e604";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";}
.@{iconfont-css-prefix}-angle-verticle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-verticle-left:before {content:"\e605";.rotate(180deg);}
.@{iconfont-css-prefix}-caret-circle-left:before {content:"\e60e";.rotate(180deg);}
.@{iconfont-css-prefix}-round-right:before {content:"\e602";}
.@{iconfont-css-prefix}-round-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-round-left:before {content:"\e602";.rotate(180deg);}
.@{iconfont-css-prefix}-circle-right:before {content:"\e603";}
.@{iconfont-css-prefix}-circle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-circle-left:before {content:"\e603";.rotate(180deg);}
.@{iconfont-css-prefix}-double-right:before {content:"\e604";}
.@{iconfont-css-prefix}-double-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-double-left:before {content:"\e604";.rotate(180deg);}
.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";}
.@{iconfont-css-prefix}-verticle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-verticle-left:before {content:"\e605";.rotate(180deg);}
.@{iconfont-css-prefix}-forward:before {content:"\e630";}
.@{iconfont-css-prefix}-backward {.ie-rotate(2);}
.@{iconfont-css-prefix}-backward:before {content:"\e630";.rotate(180deg);}
.@{iconfont-css-prefix}-rollback:before {content:"\e65a";}
.@{iconfont-css-prefix}-retweet:before {content:"\e659";}
.@{iconfont-css-prefix}-right:before {content:"\e611";}
.@{iconfont-css-prefix}-down {.ie-rotate(1);}
.@{iconfont-css-prefix}-down:before {content:"\e611";.rotate(90deg);}
.@{iconfont-css-prefix}-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-left:before {content:"\e611";.rotate(180deg);}
.@{iconfont-css-prefix}-up {.ie-rotate(3);}
.@{iconfont-css-prefix}-up:before {content:"\e611";.rotate(270deg);}
// 提示性图标
.@{iconfont-css-prefix}-question:before {content:"\e655";}
.@{iconfont-css-prefix}-question-circle:before {content:"\e656";}
.@{iconfont-css-prefix}-question-circleo:before {content:"\e657";}
.@{iconfont-css-prefix}-question-round:before {content:"\e656";}
.@{iconfont-css-prefix}-question-circle:before {content:"\e657";}
.@{iconfont-css-prefix}-plus:before {content:"\e651";}
.@{iconfont-css-prefix}-plus-circle:before {content:"\e652";}
.@{iconfont-css-prefix}-plus-circleo:before {content:"\e653";}
.@{iconfont-css-prefix}-plus-round:before {content:"\e652";}
.@{iconfont-css-prefix}-plus-circle:before {content:"\e653";}
.@{iconfont-css-prefix}-pause:before {content:"\e64c";}
.@{iconfont-css-prefix}-pause-circle:before {content:"\e64d";}
.@{iconfont-css-prefix}-pause-circleo:before {content:"\e64e";}
.@{iconfont-css-prefix}-pause-round:before {content:"\e64d";}
.@{iconfont-css-prefix}-pause-circle:before {content:"\e64e";}
.@{iconfont-css-prefix}-minus:before {content:"\e646";}
.@{iconfont-css-prefix}-minus-circle:before {content:"\e647";}
.@{iconfont-css-prefix}-minus-circleo:before {content:"\e648";}
.@{iconfont-css-prefix}-info-circle:before {content:"\e637";}
.@{iconfont-css-prefix}-info-circleo:before {content:"\e638";}
.@{iconfont-css-prefix}-minus-round:before {content:"\e647";}
.@{iconfont-css-prefix}-minus-circle:before {content:"\e648";}
.@{iconfont-css-prefix}-info-round:before {content:"\e637";}
.@{iconfont-css-prefix}-info-circle:before {content:"\e638";}
.@{iconfont-css-prefix}-info:before {content:"\e63a";}
.@{iconfont-css-prefix}-exclamation:before {content:"\e627";}
.@{iconfont-css-prefix}-exclamation-circle:before {content:"\e628";}
.@{iconfont-css-prefix}-exclamation-circleo:before {content:"\e629";}
.@{iconfont-css-prefix}-exclamation-round:before {content:"\e628";}
.@{iconfont-css-prefix}-exclamation-circle:before {content:"\e629";}
.@{iconfont-css-prefix}-cross:before {content:"\e61e";}
.@{iconfont-css-prefix}-cross-circle:before {content:"\e61f";}
.@{iconfont-css-prefix}-cross-circleo:before {content:"\e620";}
.@{iconfont-css-prefix}-cross-round:before {content:"\e61f";}
.@{iconfont-css-prefix}-cross-circle:before {content:"\e620";}
.@{iconfont-css-prefix}-check:before {content:"\e613";}
.@{iconfont-css-prefix}-check-circle:before {content:"\e614";}
.@{iconfont-css-prefix}-check-circleo:before {content:"\e615";}
.@{iconfont-css-prefix}-clock-circle:before {content:"\e616";}
.@{iconfont-css-prefix}-clock-circleo:before {content:"\e617";}
.@{iconfont-css-prefix}-check-round:before {content:"\e614";}
.@{iconfont-css-prefix}-check-circle:before {content:"\e615";}
.@{iconfont-css-prefix}-clock-round:before {content:"\e616";}
.@{iconfont-css-prefix}-clock-circle:before {content:"\e617";}
// 网站通用图标
.@{iconfont-css-prefix}-lock:before {content:"\e600";}
.@{iconfont-css-prefix}-lock:before {content:"\e641";}
.@{iconfont-css-prefix}-android:before {content:"\e601";}
.@{iconfont-css-prefix}-apple:before {content:"\e606";}
.@{iconfont-css-prefix}-area-chart:before {content:"\e607";}
@ -128,7 +136,6 @@
.@{iconfont-css-prefix}-large:before {content:"\e63e";}
.@{iconfont-css-prefix}-line-chart:before {content:"\e63f";}
.@{iconfont-css-prefix}-link:before {content:"\e640";}
.@{iconfont-css-prefix}-lock1:before {content:"\e641";}
.@{iconfont-css-prefix}-logout:before {content:"\e642";}
.@{iconfont-css-prefix}-mail:before {content:"\e643";}
.@{iconfont-css-prefix}-menu-fold:before {content:"\e644";}
@ -156,22 +163,25 @@
.@{iconfont-css-prefix}-windows:before {content:"\e66c";}
.@{iconfont-css-prefix}-loading:before {
display: inline-block;
.animation(loadingCircle @fc-duration-1000 infinite linear);
.animation(loadingCircle @duration-1000 infinite linear);
content:"\e610";
}
:root {
.@{iconfont-css-prefix}-step-forward,
.@{iconfont-css-prefix}-fast-forward,
.@{iconfont-css-prefix}-left,
.@{iconfont-css-prefix}-up,
.@{iconfont-css-prefix}-down,
.@{iconfont-css-prefix}-caret-left,
.@{iconfont-css-prefix}-caret-up,
.@{iconfont-css-prefix}-caret-right,
.@{iconfont-css-prefix}-caret-round-left,
.@{iconfont-css-prefix}-caret-circle-left,
.@{iconfont-css-prefix}-caret-circleo-left,
.@{iconfont-css-prefix}-angle-circle-left,
.@{iconfont-css-prefix}-angle-circleo-left,
.@{iconfont-css-prefix}-angle-double-left,
.@{iconfont-css-prefix}-angle-verticle-left,
.@{iconfont-css-prefix}-round-left,
.@{iconfont-css-prefix}-circle-left,
.@{iconfont-css-prefix}-double-left,
.@{iconfont-css-prefix}-verticle-left,
.@{iconfont-css-prefix}-backward {
filter: none;
}

88
style/core/layouts.less
View File

@ -0,0 +1,88 @@
// Layout
.layout-fixed {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
.layout-fluid {
.container-fixed()
}
// Grid system
.row {
.make-row();
display: block;
}
.row-flex {
.make-row();
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:before,
&:after {
display: flex;
}
}
// x轴原点
.row-flex-start {
justify-content: flex-start;
}
// x轴居中
.row-flex-center {
justify-content: center;
}
// x轴反方向
.row-flex-end {
justify-content: flex-end;
}
// x轴平分
.row-flex-space-between {
justify-content: space-between;
}
// x轴有间隔地平分
.row-flex-space-around {
justify-content: space-around;
}
// 顶部对齐
.row-flex-top {
align-items: flex-start;
}
// 居中对齐
.row-flex-middle {
align-items: center;
}
// 底部对齐
.row-flex-bottom {
align-items: flex-end;
}
.col {
position: relative;
display: block;
float: left;
flex: 0 0 auto;
}
.make-grid-columns();
.make-grid();

184
style/core/motion.less
View File

@ -5,10 +5,10 @@
// Fade - 透明度从 0 到 1，从 1 到 0
.fade {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @fc-duration-600;
animation-timing-function: @fc-ease-in;
animation-duration: @fc-duration-600;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-duration: @duration-600;
animation-timing-function: @ease-in;
animation-duration: @duration-600;
&.ng-enter,
&.fade-add,
@ -88,12 +88,12 @@
// zoom - 从中心点放大、缩小
.zoom {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-600;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-600;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-600;
animation-duration: @duration-600;
&.ng-enter,
&.zoom-add,
@ -134,12 +134,12 @@
}
.zoom-left {
-webkit-animation-timing-function: @fc-ease-in-out;
-webkit-animation-timing-function: @ease-in-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in-out;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-left-add,
@ -179,12 +179,12 @@
}
}
.zoom-right {
-webkit-animation-timing-function: @fc-ease-in-out;
-webkit-animation-timing-function: @ease-in-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in-out;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-right-add,
@ -225,12 +225,12 @@
}
.zoom-up {
-webkit-animation-timing-function: @fc-ease-in-out;
-webkit-animation-timing-function: @ease-in-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in-out;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-up-add,
@ -271,12 +271,12 @@
}
.zoom-down {
-webkit-animation-timing-function: @fc-ease-in-out;
-webkit-animation-timing-function: @ease-in-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in-out;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-down-add,
@ -317,12 +317,12 @@
}
.zoom-arr12 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr12-add,
@ -345,12 +345,12 @@
}
.zoom-arr1 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr1-add,
@ -373,12 +373,12 @@
}
.zoom-arr3 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr3-add,
@ -401,12 +401,12 @@
}
.zoom-arr5 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr5-add,
@ -429,12 +429,12 @@
}
.zoom-arr6 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr6-add,
@ -456,12 +456,12 @@
}
}
.zoom-arr7 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr7-add,
@ -485,12 +485,12 @@
}
.zoom-arr9 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr9-add,
@ -512,12 +512,12 @@
}
}
.zoom-arr11 {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.zoom-arr11-add,
@ -983,12 +983,12 @@
}
// puff - 从本身放大、缩小
.puff {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-500;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-500;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-500;
animation-duration: @duration-500;
&.ng-enter,
&.puff-add,
@ -1093,12 +1093,12 @@
.rotate-down {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-timing-function: @fc-ease-out;
-webkit-animation-timing-function: @ease-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-400;
animation-timing-function: @fc-ease-out;
-webkit-animation-duration: @duration-400;
animation-timing-function: @ease-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-400;
animation-duration: @duration-400;
&.ng-enter,
&.rotate-down-add,
@ -1143,12 +1143,12 @@
.rotate-up {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-timing-function: @fc-ease-out;
-webkit-animation-timing-function: @ease-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-400;
animation-timing-function: @fc-ease-out;
-webkit-animation-duration: @duration-400;
animation-timing-function: @ease-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-400;
animation-duration: @duration-400;
&.ng-enter,
&.rotate-up-add,
@ -1189,12 +1189,12 @@
.rotate-left {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-timing-function: @fc-ease-out;
-webkit-animation-timing-function: @ease-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-400;
animation-timing-function: @fc-ease-out;
-webkit-animation-duration: @duration-400;
animation-timing-function: @ease-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-400;
animation-duration: @duration-400;
&.ng-enter,
&.rotate-left-add,
@ -1236,12 +1236,12 @@
.rotate-right {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-timing-function: @fc-ease-out;
-webkit-animation-timing-function: @ease-out;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-400;
animation-timing-function: @fc-ease-out;
-webkit-animation-duration: @duration-400;
animation-timing-function: @ease-out;
animation-fill-mode: backwards;
animation-duration: @fc-duration-400;
animation-duration: @duration-400;
&.ng-enter,
&.rotate-right-add,
@ -1494,12 +1494,12 @@
// Slide - 滑动
.slide-down {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-600;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-600;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-600;
animation-duration: @duration-600;
&.ng-enter,
&.slide-down-add,
@ -1539,12 +1539,12 @@
}
}
.slide-left {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-600;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-600;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-600;
animation-duration: @duration-600;
&.ng-enter,
&.slide-left-add,
@ -1584,12 +1584,12 @@
}
}
.slide-right {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-600;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-600;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-600;
animation-duration: @duration-600;
&.ng-enter,
&.slide-right-add,
@ -1629,12 +1629,12 @@
}
}
.slide-up {
-webkit-animation-timing-function: @fc-ease-in;
-webkit-animation-timing-function: @ease-in;
-webkit-animation-fill-mode: backwards;
-webkit-animation-duration: @fc-duration-600;
animation-timing-function: @fc-ease-in;
-webkit-animation-duration: @duration-600;
animation-timing-function: @ease-in;
animation-fill-mode: backwards;
animation-duration: @fc-duration-600;
animation-duration: @duration-600;
&.ng-enter,
&.slide-up-add,

18
style/mixins/button.less
View File

@ -88,7 +88,7 @@
line-height: @line-height-base;
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
.user-select(none);
.transition(all .4s @fc-ease-in-out);
.transition(all .4s @ease-in-out);
-webkit-transform: translate3d(0, 0, 0);
> .@{iconfont-css-prefix} {
@ -133,15 +133,19 @@
// primary button style
.btn-primary() {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
&:hover,
&:active,
&.active {
.button-color(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
}
// default button style
.btn-default() {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
&:hover {
.button-color(@primary-color; @white; @primary-color);
}
&:hover,
&:active,
&.active {
.button-color(@primary-color; @white; @primary-color);
@ -152,9 +156,7 @@
.btn-ghost() {
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
&:hover {
.button-color(@primary-color; @white; @primary-color);
}
&:hover,
&:active,
&.active {
.button-color(@primary-color; @white; @primary-color);
@ -196,7 +198,7 @@
border-radius: 50% 50%;
content: " ";
.scale(0, 0);
.transition(all @fc-duration-300 @fc-ease-in-out);
.transition(all @duration-300 @ease-in-out);
z-index: 0;
background-color: @primary-color;
}

6
style/mixins/center-block.less Normal file
View File

@ -0,0 +1,6 @@
// Center-block a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

16
style/mixins/clearfix.less Normal file
View File

@ -0,0 +1,16 @@
// mixins for clearfix
// ------------------------
.clearfix() {
zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
}

73
style/mixins/grid.less Normal file
View File

@ -0,0 +1,73 @@
// mixins for grid system
// ------------------------
.container-fixed(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
&:extend(.clearfix all);
}
.make-row(@gutter: @grid-gutter-width) {
position: relative;
width: 100%;
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
height: auto;
&:extend(.clearfix all);
}
.make-grid-columns() {
.col(@index) {
@item: ~".col-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
@item: ~".col-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) {
@{list} {
position: relative;
display: block;
float: left;
flex: 0 0 auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1);
}
.loop-grid-columns(@index) when (@index > 0) {
.col-@{index} {
width: percentage((@index / @grid-columns));
flex: 0 0 percentage(@index / @grid-columns);
}
.col-push-@{index} {
left: percentage((@index / @grid-columns));
}
.col-pull-@{index} {
right: percentage((@index / @grid-columns));
}
.col-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
.col-order-@{index} {
order: @index;
}
.loop-grid-columns((@index - 1));
}
.loop-grid-columns(@index) when (@index = 0) {
.col-push-@{index} {
left: auto;
}
.col-pull-@{index} {
right: auto;
}
}
.make-grid() {
.loop-grid-columns(@grid-columns);
}

4
style/mixins/index.less
View File

@ -6,9 +6,13 @@
@import "opacity.less";
@import "size.less";
@import "compatibility";
@import "clearfix";
@import "center-block";
// for common elements
@import "button.less";
@import "input.less";
// Layout
@import "grid.less";

61
style/mixins/input.less
View File

@ -1,4 +1,4 @@
.rc-input(){
.ant-input(){
position: relative;
display: inline-block;
margin: 0 0;
@ -10,6 +10,7 @@
line-height: 1.5;
-webkit-transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
.transition(all .3s @ease-in-out);
&:hover {
border-color: #23c0fa;
@ -19,4 +20,60 @@
border-color: #23c0fa;
box-shadow: 0 0 3px #23c0fa;
}
}
}
.input() {
position: relative;
display: block;
padding: @input-padding-vertical-base @input-padding-horizontal;
width: 100%;
font-size: @input-font-size;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none;
border: 1px solid @input-border-color;
border-radius: @input-border-radius;
// Reset placeholder
.placeholder();
.transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
&:not([disabled]):hover {
border-color: @input-hover-border-color;
}
&:focus {
@color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
border-color: @input-focus-border-color;
outline: 0;
box-shadow: 0 0 3px @color-rgba;
}
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: @input-disabled-bg;
opacity: 1;
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
// Size
&-lg {
padding: @input-padding-lg;
font-size: @input-font-size-lg;
}
&-sm {
padding: @input-padding-vertical-sm @input-padding-horizontal;
font-size: @input-font-size-sm;
}
}

2
style/mixins/vendor-prefixes.less
View File

@ -98,7 +98,7 @@
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
.placeholder(@color: @input-placeholder-color) {
// Firefox
&::-moz-placeholder {
color: @color;

105
style/themes/default/custom.less
View File

@ -4,7 +4,7 @@
// color
@primary-color : #2db7f5;
// ------ Base & Require ------
// ------ Base & Require ------
@body-background : #fff;
@font-family : "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
@ -15,7 +15,7 @@
// ICONFONT
@iconfont-css-prefix : anticon;
@icon-url : "//at.alicdn.com/t/font_1433747417_2381783";
@icon-url : "//at.alicdn.com/t/font_1434092639_4910953";
// LINK
@link-color : #00abea;
@ -26,25 +26,25 @@
@cursor-disabled : not-allowed;
// Animation
@fc-duration-300 : .3s;
@fc-duration-400 : .4s;
@fc-duration-500 : .5s;
@fc-duration-600 : .6s;
@fc-duration-700 : .7s;
@fc-duration-800 : .8s;
@fc-duration-900 : .9s;
@fc-duration-1000 : 1.0s;
@fc-duration-1100 : 1.1s;
@fc-duration-1200 : 1.2s;
@fc-ease-out : cubic-bezier(0.25, 0.8, 0.25, 1);
@fc-ease-in : cubic-bezier(0.55, 0, 0.55, 0.2);
@fc-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1);
@fc-ease-out-back : cubic-bezier(0.18, 0.89, 0.32, 1.28);
@fc-ease-in-back : cubic-bezier(0.6, -0.3, 0.74, 0.05);
@fc-ease-in-out-back : cubic-bezier(0.68, -0.55, 0.27, 1.55);
@fc-ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
@fc-ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@fc-ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@duration-300 : .3s;
@duration-400 : .4s;
@duration-500 : .5s;
@duration-600 : .6s;
@duration-700 : .7s;
@duration-800 : .8s;
@duration-900 : .9s;
@duration-1000 : 1.0s;
@duration-1100 : 1.1s;
@duration-1200 : 1.2s;
@ease-out : cubic-bezier(0.25, 0.8, 0.25, 1);
@ease-in : cubic-bezier(0.55, 0, 0.55, 0.2);
@ease-in-out : cubic-bezier(0.35, 0, 0.25, 1);
@ease-out-back : cubic-bezier(0.18, 0.89, 0.32, 1.28);
@ease-in-back : cubic-bezier(0.6, -0.3, 0.74, 0.05);
@ease-in-out-back : cubic-bezier(0.68, -0.55, 0.27, 1.55);
@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
// BUTTONS
@btn-font-weight : normal;
@ -79,3 +79,66 @@
@btn-circle-size-lg : 32px;
@btn-circle-size-sm : 22px;
// Border
@border-radius-base : 6px;
// Media queries breakpoints
// Extra small screen / phone
@screen-xs : 480px;
@screen-xs-min : @screen-xs;
@screen-xs-max : (@screen-xs-min - 1);
// Small screen / tablet
@screen-sm : 768px;
@screen-sm-min : @screen-sm;
@screen-sm-max : (@screen-sm-min - 1);
// Medium screen / desktop
@screen-md : 992px;
@screen-md-min : @screen-md;
@screen-md-max : (@screen-md-min - 1);
// Large screen / wide desktop
@screen-lg : 1200px;
@screen-lg-min : @screen-lg;
@screen-lg-max : (@screen-lg-min - 1);
// Layout and Grid system
@grid-columns : 24;
@grid-gutter-width : 0;
// Container sizes
@container-sm : (720px + @grid-gutter-width);
@container-md : (940px + @grid-gutter-width);
@container-lg : (1140px + @grid-gutter-width);
// Form
// --------------------------------
// Legend
@legend-color : #222;
@legend-border-color : #e5e5e5;
// Input
@input-height-base: 28px;
@input-height-lg: 32px;
@input-height-sm: 22px;
@input-padding-horizontal : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm : 1px;
@input-padding-lg : 4px 7px 5px;
@input-placeholder-color : #ccc;
@input-color : #666;
@input-border-color : #d9d9d9;
@input-bg : #fff;
@input-border-radius : @border-radius-base;
@input-font-size-lg : 14px;
@input-font-size : @font-size-base;
@input-font-size-sm : @font-size-base;
@input-hover-border-color : #23c0fa;
@input-focus-border-color : #2db7f5;
@input-disabled-bg : #f3f5f7;

29
webpack.config.js
View File

@ -21,17 +21,30 @@ module.exports = {
},
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel'},
{test: /\.json$/, loader: 'json-loader'},
{test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
{test: /\.css/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}, {
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap!' +
'less?sourceMap'
)
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap'
)
}]
},
plugins: [
new ExtractTextPlugin("[name].css")
new ExtractTextPlugin('[name].css')
],
devtool: "#source-map"
devtool: '#source-map'
};