Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 879573d4 编写于 作者: 罗 罗宪
浏览文件
操作

update motion ease and timer

上级 716dda94 32a5abdd
隐藏空白更改
内联 并排
Showing with 633 addition and 432 deletion
.npmignore
浏览文件 @ 879573d4
......@@ -31,7 +31,6 @@ site
dist
*.yml
CNAME
/components
nico.js
deploy.js
scripts
README.md
浏览文件 @ 879573d4
......@@ -9,11 +9,12 @@
## 特性
- 丰富实用的 UI 组件。
- 企业级金融产品的交互语言和视觉体系。
- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
- 基于 webpack 的调试构建方案，支持 ES6。
- 背靠 npm 生态圈。
- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch³ 设计。
- 基于 webpack 的调试构建方案，支持 ES6。
## 范例
......@@ -27,9 +28,12 @@ React.render(<Datepicker />, mountNode);
## 链接
- [首页](http://ant.design/)
- [使用文档](http://ant.design/docs/introduce)
- [文档](http://ant.design/docs/introduce)
- [组件](http://ant.design/components/)
- [发布计划](https://github.com/ant-design/ant-design/issues/9)
- [React 模块](http://react-component.github.io/)
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
## 如何贡献
......
components/breadcrumb/demo/router.md
浏览文件 @ 879573d4
......@@ -22,12 +22,6 @@ var Apps = React.createClass({
}
});
var App = React.createClass({
render() {
return <div></div>;
}
});
var App = React.createClass({
render() {
return (<div>
......
components/breadcrumb/demo/withIcon.md
浏览文件 @ 879573d4
......@@ -12,10 +12,10 @@ var Breadcrumb = require('antd/lib/breadcrumb');
React.render(
<Breadcrumb>
<Breadcrumb.Item href="">
<i className="anticon anticon-user"></i>
<i className="anticon anticon-home"></i>
</Breadcrumb.Item>
<Breadcrumb.Item href="">
<i className="anticon anticon-folder-open"></i>
<i className="anticon anticon-user"></i>
应用列表
</Breadcrumb.Item>
<Breadcrumb.Item>
......
components/breadcrumb/index.jsx
浏览文件 @ 879573d4
......@@ -17,7 +17,7 @@ let BreadcrumbItem = React.createClass({
let Breadcrumb = React.createClass({
contextTypes: {
router: React.PropTypes.func.isRequired
router: React.PropTypes.func
},
render() {
var crumbs, routes, params;
......@@ -35,7 +35,7 @@ let Breadcrumb = React.createClass({
} else {
link = <Link to={route.path} params={params}>{name}</Link>;
}
return <BreadcrumbItem>{link}</BreadcrumbItem>;
return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
});
} else {
crumbs = this.props.children;
......
components/form/demo/horizontal-form.md
浏览文件 @ 879573d4
......@@ -14,14 +14,9 @@
<form class="ant-form-horizontal">
<div class="ant-form-item">
<label for="userName" class="col-6" required>用户名：</label>
<div class="col-4">
<div class="col-6">
<p class="ant-form-text">大眼萌 minion</p>
</div>
<div class="col-9">
<p class="ant-form-text">
<a href="javascript:;">什么鬼？</a>
</p>
</div>
</div>
<div class="ant-form-item">
<label for="password" class="col-6" required>密码：</label>
......
components/form/demo/input-size.md
浏览文件 @ 879573d4
......@@ -9,16 +9,17 @@
---
````html
<div class="row">
<div class="col-6 pdrg-8">
<input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
</div>
<div class="col-6 pdrg-8">
<input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
<div class="ant-input-group">
<div class="col-6">
<input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
</div>
<div class="col-6">
<input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
</div>
<div class="col-6">
<input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
</div>
</div>
</div>
......
components/form/demo/inputs.md
浏览文件 @ 879573d4
......@@ -2,7 +2,10 @@
- order: 5
使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。
带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` `.ant-input-group-btn` 类可以创建带标签、按钮的 Input 输入框。
输入框组合：`.ant-inputs` 类由多个 `.ant-inputs-item` 组成，使多个 Input 可以在一行显示出来。
---
......@@ -13,7 +16,7 @@
<div class="col-16">
<div class="ant-input-group">
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
<input type="text" id="site1" class="ant-input" value="mysite.com">
<input type="text" id="site1" class="ant-input" value="mysite.com" />
</div>
</div>
</div>
......@@ -22,32 +25,18 @@
<div class="col-16">
<div class="ant-input-group">
<span class="ant-input-group-addon" id="basic-addon3">Http://</span>
<input type="text" class="ant-input" id="site3" value="mysite">
<input type="text" class="ant-input" id="site3" value="mysite" />
<span class="ant-input-group-addon" id="basic-addon4">.com</span>
</div>
</div>
</div>
<div class="ant-form-item">
<label class="col-6" for="site4">按钮式下拉输入框：</label>
<div class="col-16">
<div class="ant-input-group">
<input type="text" class="ant-input" id="site4" placeholder="Search for...">
<div class="ant-input-group-btn">
<button class="input-btn" type="button">
<span>.com</span>
<i class="anticon anticon-down"></i>
</button>
</div>
</div>
</div>
</div>
<div class="ant-form-item">
<label class="col-6" for="site5">带按钮的输入框：</label>
<div class="col-16">
<div class="ant-input-group">
<input type="text" class="ant-input" id="site5" placeholder="Search for...">
<input type="text" class="ant-input" id="site5" placeholder="Search for..." />
<div class="ant-input-group-btn">
<button class="input-btn" type="button">GO!</button>
<button class="ant-btn" type="button">GO!</button>
</div>
</div>
</div>
......@@ -55,44 +44,48 @@
<div class="ant-form-item">
<label class="col-6">输入身份证：</label>
<div class="col-16">
<div class="row">
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="certNo1" />
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="certNo2" />
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="certNo3" />
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="certNo4" />
<div class="ant-input-group">
<div class="col-6">
<input class="ant-input" type="text" id="certNo1" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo2" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo3" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo4" />
</div>
</div>
</div>
</div>
</div>
<div class="ant-form-item has-error">
<label class="col-6">电话号码：</label>
<div class="col-16">
<div class="row">
<div class="col-4 pdrg-8">
<div class="col-4">
<input class="ant-input" type="text" id="tel1" value="086" />
</div>
<div class="col-2 pdrg-8">
<div class="col-2">
<p class="ant-form-split">--</p>
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="tel2" />
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="tel3" />
</div>
<div class="col-6 pdrg-8">
<input class="ant-input" type="text" id="tel4" />
<div class="col-18">
<div class="ant-input-group">
<div class="col-6">
<input class="ant-input" type="text" id="tel1" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="tel2" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="tel3" />
</div>
</div>
</div>
<p class="ant-form-explain">请输入正确的电话号码</p>
</div>
</div>
</div>
</form>
</form>
````
components/form/demo/mix.md
浏览文件 @ 879573d4
......@@ -11,13 +11,27 @@ var Select = antd.Select;
var Option = Select.Option;
var InputNumber = antd.InputNumber;
var Datepicker = antd.Datepicker;
var Switch = antd.Switch;
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
var menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">.net</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">.jp</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">.org</a>
</Menu.Item>
</Menu>;
function handleSelectChange(value) {
console.log('selected ' + value);
}
function onChange(v){
function onInputNumberChange(v){
console.log('changed',v);
}
......@@ -25,14 +39,14 @@ React.render(
<form className="ant-form-horizontal">
<div className="ant-form-item">
<label className="col-6" required>Input-Number:</label>
<div className="col-6 pdrg-8">
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/>
<div className="col-6">
<InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
</div>
<div className="col-3"><p className="ant-form-text"> 台机器</p></div>
</div>
<div className="ant-form-item">
<label className="col-6" required><i className="anticon anticon-exclamation-circle"></i>我是标题:</label>
<div className="col-7 pdrg-8">
<div className="col-7">
<p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
</div>
<div className="col-9">
......@@ -44,7 +58,7 @@ React.render(
<div className="ant-form-item">
<label for="" className="col-6" required>Switch 开关:</label>
<div className="col-10">
<p className="ant-form-text">请填写 switch</p>
<Switch />
</div>
</div>
<div className="ant-form-item">
......@@ -54,7 +68,7 @@ React.render(
</div>
</div>
<div className="ant-form-item">
<label for="password" className="col-6" required>Select 选择器:</label>
<label for="" className="col-6" required>Select 选择器:</label>
<div className="col-18">
<Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
......@@ -64,6 +78,21 @@ React.render(
</Select>
</div>
</div>
<div className="ant-form-item">
<label className="col-6" for="site4">按钮式下拉输入框：</label>
<div className="col-16">
<div className="ant-input-group">
<input type="text" className="ant-input" id="site4" placeholder="Search for..." />
<div className="ant-input-group-btn">
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-menu">
.com <i className="anticon anticon-down"></i>
</button>
</Dropdown>
</div>
</div>
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>ant-radio:</label>
<div className="col-10">
......
components/iconfont/index.md
浏览文件 @ 879573d4
......@@ -11,7 +11,7 @@
## 图标的命名规范
我们为每个图标赋予了语义化的命名。我们的命名规范如下：
我们为每个图标赋予了语义化的命名。我们的命名规范如：
- 1. 使用 `-` 来连接单词；
......@@ -498,6 +498,18 @@
<i class="anticon anticon-windows"></i>
<span class="anticon-class">windows</span>
</li>
<li>
<i class="anticon anticon-ie"></i>
<span class="anticon-class">ie</span>
</li>
<li>
<i class="anticon anticon-chrome"></i>
<span class="anticon-class">chrome</span>
</li>
<li>
<i class="anticon anticon-home"></i>
<span class="anticon-class">home</span>
</li>
<li>
<i class="anticon anticon-loading"></i>
<span class="anticon-class">loading</span>
......
components/input-number/demo/basic.md
浏览文件 @ 879573d4
......@@ -13,8 +13,26 @@ function onChange(v){
console.log('changed',v);
}
React.render(
<div><InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/></div>
, document.getElementById('components-input-number-demo-basic'));
var Test = React.createClass({
getInitialState(){
return {
disabled:false
};
},
toggle(){
this.setState({
disabled:!this.state.disabled
});
},
render(){
return <div>
<InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} onChange={onChange} style={{width:100}}/>
&nbsp;&nbsp;&nbsp;
<button onClick={this.toggle} className="ant-btn ant-btn-primary"> toggle disabled</button>
</div>;
}
});
React.render(<Test />, document.getElementById('components-input-number-demo-basic'));
````
components/modal/demo/footer.md
浏览文件 @ 879573d4
......@@ -37,8 +37,8 @@ var Test = React.createClass({
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}>
<button key="back" className="ant-btn" onClick={this.handleCancel}>返 回</button>,
<button key="submit" className="ant-btn ant-btn-primary" onClick={this.handleOk}>
提 交
<i className={'anticon anticon-loading'+(this.state.loading?'':'hide')}></i>
</button>
......
components/modal/index.jsx
浏览文件 @ 879573d4
......@@ -44,8 +44,8 @@ var Modal = React.createClass({
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>
<button key="cancel" type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
<button key="confirm" type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
];
return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
}
......
components/popover/demo/basic.md
浏览文件 @ 879573d4
......@@ -8,10 +8,10 @@
````jsx
var Popover = antd.Popover;
var content = [
<p>内容</p>,
var content = <div>
<p>内容</p>
];
<p>内容</p>
</div>;
React.render(
<Popover overlay={content} title="标题">
......
components/popover/demo/placement.md
浏览文件 @ 879573d4
......@@ -9,10 +9,10 @@
````jsx
var Popover = antd.Popover;
var text = <span>标题</span>;
var content = [
<p>内容</p>,
var content = <div>
<p>内容</p>
];
<p>内容</p>
</div>;
React.render(<div>
<Popover placement="left" title={text} overlay={content}>
......
components/popover/demo/triggerType.md
浏览文件 @ 879573d4
......@@ -8,10 +8,10 @@
````jsx
var Popover = antd.Popover;
var content = [
<p>内容</p>,
var content = <div>
<p>内容</p>
];
<p>内容</p>
</div>;
React.render(<div>
<Popover overlay={content} title="标题" trigger="hover">
......
components/progress/index.jsx
浏览文件 @ 879573d4
......@@ -3,6 +3,7 @@
var Progressline = require('rc-progress').Line;
var Progresscircle = require('rc-progress').Circle;
var React = require('react');
var assign = require('object-assign');
var Line = React.createClass({
getDefaultProps() {
......@@ -20,28 +21,30 @@ var Line = React.createClass({
'success': '#85D262'
};
if (parseInt(this.props.percent) === 100) {
this.props.status = 'success';
var props = assign({}, this.props);
if (parseInt(props.percent) === 100) {
props.status = 'success';
}
var style = {
'width': this.props.width
'width': props.width
};
var fontSize = (this.props.width / 100 * this.props.strokeWidth);
var fontSize = (props.width / 100 * props.strokeWidth);
var iconStyle = {
'font-size': (fontSize < 14) ? 14 : fontSize
'fontSize': (fontSize < 12) ? 12 : fontSize
};
var textStyle = {
'color': statusColorMap[this.props.status]
'color': statusColorMap[props.status]
};
var progressInfo;
if (this.props.status === 'exception') {
if (props.status === 'exception') {
progressInfo = (
<span style={textStyle} className='ant-progress-line-text'>
<i style={iconStyle} className="anticon anticon-exclamation-circle"></i>
</span>
);
} else if (this.props.status === 'success') {
} else if (props.status === 'success') {
progressInfo = (
<span style={textStyle} className='ant-progress-line-text'>
<i style={iconStyle} className="anticon anticon-check-circle"></i>
......@@ -49,15 +52,15 @@ var Line = React.createClass({
);
} else {
progressInfo = (
<span className='ant-progress-line-text'>{this.props.percent}%</span>
<span className='ant-progress-line-text'>{props.percent}%</span>
);
}
return (
<div className='ant-progress-line-wrap'>
<div className='ant-progress-line-inner' style={style}>
<Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth}
strokeColor={statusColorMap[this.props.status]} trailColor="#e9e9e9" />
<Progressline percent={props.percent} strokeWidth={props.strokeWidth}
strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />
</div>
{progressInfo}
</div>
......@@ -81,28 +84,30 @@ var Circle = React.createClass({
'success': '#85D262'
};
if (parseInt(this.props.percent) === 100) {
this.props.status = 'success';
var props = assign({}, this.props);
if (parseInt(props.percent) === 100) {
props.status = 'success';
}
var style = {
'width': this.props.width,
'height': this.props.width
'width': props.width,
'height': props.width
};
var wrapStyle = {
'font-size': this.props.width * 0.16 + 6
'fontSize': props.width * 0.16 + 6
};
var textStyle = {
'color': statusColorMap[this.props.status]
'color': statusColorMap[props.status]
};
var progressInfo;
if (this.props.status === 'exception') {
if (props.status === 'exception') {
progressInfo = (
<span style={textStyle} className='ant-progress-circle-text'>
<i className='anticon anticon-exclamation'></i>
</span>
);
} else if (this.props.status === 'success') {
} else if (props.status === 'success') {
progressInfo = (
<span style={textStyle} className='ant-progress-circle-text'>
<i className="anticon anticon-check"></i>
......@@ -110,15 +115,15 @@ var Circle = React.createClass({
);
} else {
progressInfo = (
<span className="ant-progress-circle-text">{this.props.percent}%</span>
<span className="ant-progress-circle-text">{props.percent}%</span>
);
}
return (
<div className="ant-progress-circle-wrap" style={wrapStyle}>
<div className="ant-progress-circle-inner" style={style}>
<Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth}
strokeColor={statusColorMap[this.props.status]} trailColor="#e9e9e9" />
<Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />
{progressInfo}
</div>
</div>
......
components/select/demo/combobox.md
浏览文件 @ 879573d4
......@@ -24,7 +24,7 @@ var Test = React.createClass({
} else {
options = ['gmail.com', '163.com', 'qq.com'].map(function(domain) {
var email = value + '@' + domain;
return <Option value={email}>{email}</Option>;
return <Option key={email}>{email}</Option>;
});
}
this.setState({
......
components/select/demo/multiple.md
浏览文件 @ 879573d4
......@@ -13,7 +13,7 @@ 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>);
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
......
components/select/demo/tags.md
浏览文件 @ 879573d4
......@@ -13,7 +13,7 @@ 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>);
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
......
components/select/index.jsx
浏览文件 @ 879573d4
......@@ -17,3 +17,5 @@ module.exports = React.createClass({
);
}
});
module.exports.Option = Select.Option;
components/switch/demo/basic.md 0 → 100644
浏览文件 @ 879573d4
# 用法示例
- order: 0
switch 用法
---
````jsx
var Switch = antd.Switch;
var container = document.getElementById('components-switch-demo-basic');
function onChange(checked){
console.log('switch to ' + checked);
}
React.render(<div>
<p>
simple:&nbsp;
<Switch defaultChecked={false} onChange={onChange}/><br/>&nbsp;
</p>
<p>
disabled:&nbsp;
<Switch disabled/><br/>&nbsp;
</p>
<p>
children:&nbsp;
<Switch checkedChildren="开" unCheckedChildren="关"/><br/>&nbsp;
</p>
<p>
icon children:&nbsp;
<Switch checkedChildren={<i className="anticon anticon-check"></i>} unCheckedChildren={<i className="anticon anticon-cross"></i>}/>
</p>
</div>, container);
````
components/switch/index.jsx
浏览文件 @ 879573d4
var Switch = require('rc-switch');
var React = require('react');
var AntSwitch = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-switch'
};
},
render() {
return <Switch {...this.props}/>;
}
});
module.exports = AntSwitch;
components/switch/index.md
浏览文件 @ 879573d4
......@@ -11,3 +11,15 @@
- 需要表示开关状态/两种状态之间的切换时；
- 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
## API
### Switch
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| checked | 指定当前是否选中 | boolean | | false |
| defaultChecked | 初始是否选中 | boolean | | false |
| onChange | 变化时回调函数 | Function(checked:boolean) | | |
| checkedChildren | 选中时的内容 | React Node | | |
| unCheckedChildren | 非选中时的内容 | React Node | | |
\ No newline at end of file
docs/getting-started.md
浏览文件 @ 879573d4
......@@ -101,7 +101,7 @@ $ touch index.html
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="http://ant.design/dist/antd.css">
<link rel="stylesheet" href="/index.css">
<script src="https://a.alipayobjects.com/react/0.13.3/react.min.js"></script>
</head>
<body>
......@@ -127,7 +127,7 @@ $ npm run build
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
> 上述例子帮助你理解 Ant Design 的使用流程，并非真实的开发过程，你可以根据自己的项目流程进行改造接入。
> 上述例子用于帮助你理解 Ant Design 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
## 兼容性
......@@ -164,5 +164,5 @@ Ant Design 支持所有的现代浏览器和 IE8+。
## 小甜点
- 你可以使用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`，建议采用 [ES6](https://babeljs.io/docs/learn-es2015/) 的写法来提升编码的愉悦感。
- 你可以享用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`，试试用 [ES6](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/) 的写法来提升编码的愉悦感。
docs/introduce.md
浏览文件 @ 879573d4
......@@ -11,11 +11,12 @@
## 特性
- 企业级金融产品的交互语言和视觉体系。
- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
- 基于 webpack 的调试构建方案，支持 ES6。
- 背靠 npm 生态圈。
- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch³ 设计。
- 基于 webpack 的调试构建方案，支持 ES6。
## 范例
......
index.js
浏览文件 @ 879573d4
......@@ -14,7 +14,8 @@ var antd = {
Popconfirm: require('./components/popconfirm'),
confirm: require('./components/modal/confirm'),
Steps: require('./components/steps'),
InputNumber: require('./components/input-number')
InputNumber: require('./components/input-number'),
Switch: require('./components/switch')
};
module.exports = antd;
......
package.json
浏览文件 @ 879573d4
......@@ -11,19 +11,22 @@
"bugs": {
"url": "https://github.com/ant-design/ant-design/issues"
},
"license": "MIT",
"dependencies": {
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"object-assign": "~3.0.0",
"rc-calendar": "~3.10.0",
"rc-dialog": "~4.3.5",
"rc-dialog": "~4.4.0",
"rc-dropdown": "~1.1.1",
"rc-input-number": "~2.0.0",
"rc-input-number": "~2.0.1",
"rc-menu": "~3.4.0",
"rc-progress": "~1.0.0",
"rc-select": "~4.0.0",
"rc-select": "~4.2.1",
"rc-steps": "~1.1.3",
"rc-tabs": "~5.1.0",
"rc-tooltip": "~2.3.0"
"rc-switch": "~1.2.0",
"rc-tabs": "~5.2.0",
"rc-tooltip": "~2.4.0"
},
"devDependencies": {
"css-animation": "~1.0.3",
......@@ -42,10 +45,10 @@
"lodash": "^3.10.0",
"nico-jsx": "~0.5.8",
"precommit-hook": "^1.0.7",
"react-router": "~0.13.3",
"webpack": "^1.10.1",
"webpack-dev-middleware": "^1.2.0"
},
"scripts": {
"babel": "babel components --out-dir lib",
"build": "npm run clean && webpack && nico build",
......
scripts/demo.js
浏览文件 @ 879573d4
window['react-router'] = require('react-router');
window['css-animation'] = require('css-animation');
window['react-router'] = window.ReactRouter;
site/templates/layout.html
浏览文件 @ 879573d4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
<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 href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
<script src="/static/script.js"></script>
<script>
window.antdVersion = {
latest: '{{config.package.version}}',
stable: '{{config.package.stableVersion}}'
};
</script>
{% block scripts %}{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
<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 href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script>
(function (con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function () {
};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) {
con[prop] = con[prop] || empty;
}
while (method = methods.pop()) {
con[method] = con[method] || dummy;
}
})(this.console = this.console || {});
</script>
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
<script src="/static/script.js"></script>
<script>
window.antdVersion = {
latest: '{{config.package.version}}',
stable: '{{config.package.stableVersion}}'
};
</script>
{% block scripts %}{% endblock %}
</head>
<body {% block bodyAttribute %}{% endblock %}>
<header id="header">
<header id="header">
<a class="logo" href="/">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"> {{ config.site.name }}
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"> {{ config.site.name }}
</a>
<div class="search">
<form>
<input type="text" placeholder="search">
<button type="submit"></button>
</form>
<form>
<input type="text" placeholder="search">
<button type="submit"></button>
</form>
</div>
<nav class="nav">
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('docs') %}current{%- endif %}">
<a href="/docs/introduce">使用</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('design') %}current{%- endif %}">
<a class="disabled" href="/design/">设计</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
<a href="/components">组件</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
</li>
</ul>
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('docs') %}current{%- endif %}">
<a href="/docs/introduce">使用</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('design') %}current{%- endif %}">
<a class="disabled" href="/design/">设计</a>
</li>
<li class="{%- if post.directory|rootDirectoryIs('components') %}current{%- endif %}">
<a href="/components">组件</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
</header>
<div class="main-wrapper">
{% block aside %}{% endblock %} {% block content %}{% endblock %}
</div>
{%- include "footer.html" %}
</div>
{%- include "footer.html" %}
</body>
</html>
static/style.css
浏览文件 @ 879573d4
......@@ -532,10 +532,10 @@ footer ul li > a {
}
.markdown {
width: 75%;
color: #777;
font-size: 14px;
line-height: 1.8;
width: 80%;
}
.markdown img {
......
style/components/breadcrumb.less
浏览文件 @ 879573d4
......@@ -23,7 +23,6 @@
}
.anticon {
font-size: 14px;
position: relative;
top: -1px;
}
......
style/components/button.less
浏览文件 @ 879573d4
......@@ -11,18 +11,22 @@
.btn-primary;
.@{btnPrefixClass}-group &:not(:first-child):not(:last-child) {
border-right-color: @btn-primary-border;
border-left-color: btn-primary-border;
border-right-color: @btn-group-border;
border-left-color: @btn-group-border;
}
.@{btnPrefixClass}-group &:first-child {
&:not(:last-child) {
border-right-color: @btn-primary-border;
border-right-color: @btn-group-border;
}
}
.@{btnPrefixClass}-group &:last-child:not(:first-child) {
border-left-color: @btn-primary-border;
border-left-color: @btn-group-border;
}
.@{btnPrefixClass}-group & + .@{btnPrefixClass} {
border-left-color: @btn-group-border;
}
}
......@@ -40,7 +44,6 @@
&-menu {
> .@{iconfont-css-prefix} {
top: -1px;
font-size: @font-size-base;
font-size: ~"10px \9"; // ie8-9
.scale(0.83);
......
style/components/datepicker/Picker.less
浏览文件 @ 879573d4
......@@ -16,18 +16,21 @@
-webkit-user-select: none;
user-select: none;
.transition(all .3s @ease-in-out);
width: 14px;
height: 14px;
line-height: 14px;
width: 12px;
height: 12px;
line-height: 12px;
right: 8px;
color: #999;
top: 50%;
margin-top: -7px;
margin-top: -6px;
&:after {
content: "\e60c";
font-family: "anticon";
font-size: 14px;
font-size: 12px;
color: #999;
display: inline-block;
line-height: 1;
vertical-align: bottom;
}
}
&-open .@{prefixCalendarClass},
......
style/components/dialog/Dialog.less
浏览文件 @ 879573d4
......@@ -43,6 +43,7 @@
filter: alpha(opacity=20);
opacity: .2;
text-decoration: none;
transition: opacity .3s ease;
&-x {
position: absolute;
......@@ -58,7 +59,9 @@
-moz-osx-font-smoothing: grayscale;
width: 12px;
height: 12px;
font-size: 12px;
font-size: @font-size-base;
font-size: ~"10px \9"; // ie8-9
.scale(0.83);
line-height: 12px;
color:#000;
top:18px;
......@@ -109,52 +112,4 @@
&-wrap-hidden > &&-zoom-leave {
display: block;
}
&-zoom-enter {
opacity: 0;
.effect();
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
animation-play-state: paused;
}
&-zoom-leave {
.effect();
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
animation-play-state: paused;
}
&-zoom-enter&-zoom-enter-active {
animation-name: rcDialogZoomIn;
animation-play-state: running;
}
&-zoom-leave&-zoom-leave-active {
animation-name: rcDialogZoomOut;
animation-play-state: running;
}
@keyframes rcDialogZoomIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
@keyframes rcDialogZoomOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
}
}
style/components/form.less
浏览文件 @ 879573d4
@import "../mixins/index";
@btnClass: ~"@{css-prefix}btn";
.reset-form();
......@@ -43,28 +44,23 @@ label {
.input-with-icon();
}
//== Style for input-group
//== Style for input-group: input with label, with button or dropdown...
.@{css-prefix}input-group {
.input-group(~"@{css-prefix}input");
.input-group(~"@{css-prefix}input"; @btnClass)
}
// 表单下的输入框尺寸唯一: 大尺寸
form {
.@{css-prefix}input {
height: @input-height-lg;
font-size: @font-size-base;
padding: @input-padding-horizontal;
}
.has-feedback {
.@{iconfont-css-prefix} {
.square(@input-height-lg);
line-height: @input-height-lg;
}
}
.@{css-prefix}input-group > .@{css-prefix}input,
.@{css-prefix}input-group > .@{css-prefix}input-group-addon,
.@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
.@{css-prefix}input,
.@{css-prefix}input-group .@{css-prefix}input,
.@{css-prefix}input-group .@{css-prefix}input-group-addon,
.@{css-prefix}input-group .@{css-prefix}input-group-btn .@{btnClass} {
height: @input-height-lg;
font-size: @font-size-base;
padding: @input-padding-horizontal;
......@@ -175,12 +171,11 @@ input[type="checkbox"] {
//== Inline Form
// Attention: Inline form does only apply to within viewports that are at least 768px wide
// TODO: 用 float 代替 inline-block
// TODO: 优化
.@{css-prefix}form-inline {
&:extend(.clearfix all);
@media (min-width: @screen-sm-min) {
.@{css-prefix}form-item {
float: left;
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
margin-right: 10px;
......
style/components/index.less
浏览文件 @ 879573d4
@import "button";
@import "switch";
@import "dropdown";
@import "progress";
@import "select";
......
style/components/inputNumber.less
浏览文件 @ 879573d4
@inputNumberPrefixCls: ant-input-number;
@import "../mixins/iconfont";
@import "../mixins/input";
.@{inputNumberPrefixCls} {
margin: 0;
padding: 0;
line-height: 26px;
line-height: 29px;
font-size: 12px;
height: 26px;
height: 29px;
display: inline-block;
vertical-align: middle;
border: 1px solid #D9D9D9;
......@@ -16,40 +17,45 @@
&-handler {
text-align: center;
line-height: 12px;
height: 12px;
line-height: 0;
height: 15px;
overflow: hidden;
}
&-handler-down {
height: 14px;
}
&-handler-up-inner, &-handler-down-inner {
color: #666666;
.iconfont-mixin();
line-height: 12px;
color: #999;
user-select: none;
-webkit-user-select: none;
}
&-handler-up-inner {
margin-left: -1px;
position: absolute;
width: 12px;
height: 12px;
right: 4px;
&:hover {
color: #666;
}
}
&:hover {
border-color: @primary-color;
.@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
border-color: @primary-color;
}
.hover();
}
&-disabled:hover {
border-color: #d9d9d9;
&-focused {
.active();
}
.@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
border-color: #d9d9d9;
}
&-disabled {
.disabled();
}
&-input-wrap {
overflow: hidden;
height: 26px;
height: 29px;
}
&-input {
......@@ -57,33 +63,38 @@
text-align: center;
outline: 0;
-moz-appearance: textfield;
line-height: 26px;
line-height: 29px;
height: 22px;
transition: all 0.3s ease;
color: #666666;
border: 0;
border-radius: 5px;
padding: 0;
padding: 0 8px;
&[disabled] {
.disabled();
}
}
&-handler-wrap {
float: right;
border-left: 1px solid #D9D9D9;
width: 20px;
height: 26px;
width: 22px;
height: 29px;
margin-top: -1px;
position: relative;
}
&-handler-up {
padding-top: 1px;
border-bottom: 1px solid #D9D9D9;
cursor: pointer;
&-inner {
.iconfont-mixin();
top:-2px;
top: 2px;
left: 4px;
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
&:before {
content: "\e611";
transform: rotate(270deg) scale(0.8);
}
}
}
......@@ -91,26 +102,30 @@
&-handler-down {
cursor: pointer;
&-inner {
.iconfont-mixin();
bottom: 2px;
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
&:before {
content: "\e611";
transform: rotate(90deg) scale(0.8);
}
}
}
.handler-disabled() {
opacity: 0.72;
color: #ccc;
cursor: default;
&:hover {
color: #ccc;
cursor: default;
color: #999;
border-color: #d9d9d9;
}
}
&-handler-down-disabled, &-handler-up-disabled {
.handler-disabled();
&-handler-down-disabled, &-handler-up-disabled, &-disabled {
.@{inputNumberPrefixCls}-handler-down-inner,
.@{inputNumberPrefixCls}-handler-up-inner {
.handler-disabled();
}
}
&-disabled {
......
style/components/popover.less
浏览文件 @ 879573d4
......@@ -127,10 +127,10 @@
padding: 8px 8px 12px 8px;
font-size: 14px;
.anticon {
font-size: 16px;
margin-right: 6px;
line-height: 18px;
color: #FC8C6E;
vertical-align: text-bottom;
}
}
......
style/components/progress.less
浏览文件 @ 879573d4
......@@ -24,7 +24,7 @@
line-height: 1;
.anticon {
font-size: 1.2em;
font-size: 12px;
}
}
......
style/components/select.less
浏览文件 @ 879573d4
@selectPrefixCls: ant-select;
@import "../mixins/iconfont";
//mixin
.selection__clear(){
.selection__clear() {
cursor: pointer;
float: right;
font-weight: bold;
......@@ -29,19 +30,25 @@
// arrow
&-arrow {
.iconfont-mixin();
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
font-size: @font-size-base;
font-size: ~"10px \9"; // ie8-9
.scale(0.83);
width: 26px;
line-height: 26px;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
.rotate(90deg);
* {
display: none;
}
font-family: 'anticon';
&:before {
content: '\e611';
.rotate(90deg);
position: absolute;
top: 4px;
left: 3px;
}
}
......@@ -59,11 +66,10 @@
.transition(all .3s @ease-in-out);
&:hover {
border-color: #23c0fa;
box-shadow: 0 0 2px tint(@primary-color, 20%);
border-color: @primary-color;
}
&:active {
border-color: @primary-color;
border-color: shade(@primary-color, 5%);
}
}
......@@ -131,14 +137,25 @@
}
.@{selectPrefixCls}-selection__choice__remove {
.iconfont-mixin();
color: #919191;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0 0 0 8px;
font-size: @font-size-base;
font-size: ~"8px \9"; // ie8-9
.scale(0.67);
padding: 0 0 0 4px;
position: relative;
top: -1px;
left: 4px;
&:hover {
color: #333;
}
&:before {
content: "\e61e";
}
}
}
......@@ -157,7 +174,6 @@
}
}
&-dropdown {
display: none;
background-color: white;
......@@ -197,17 +213,15 @@
&-open {
.@{selectPrefixCls}-arrow {
&:before {
.rotate(270deg);
}
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
.rotate(270deg);
}
.@{selectPrefixCls}-dropdown {
display: block;
}
.@{selectPrefixCls}-selection {
border-color: #23c0fa;
box-shadow: 0 0 3px #23c0fa;
border-color: @primary-color;
box-shadow: 0 0 3px tint(@primary-color, 20%);
}
}
......@@ -247,7 +261,7 @@
position: absolute;
top: 6px;
right: 16px;
color: #3CB8F0;
color: @primary-color;
}
}
......
style/components/steps.less
浏览文件 @ 879573d4
......@@ -14,7 +14,6 @@
@finish-description-color: @finish-title-color;
@finish-tail-color: @process-icon-color;
.transition(@transition) {
transition: @transition;
-webkit-transition: @transition;
......@@ -90,11 +89,11 @@
.@{stepsPrefixClass}-head-inner {
background: none;
border: 0;
font-size: 20px;
width: auto;
height: auto;
> .@{stepsPrefixClass}-icon {
top: -4px;
font-size: 20px;
top: 0;
}
}
&.@{stepsPrefixClass}-status-process {
......@@ -103,7 +102,6 @@
}
}
}
}
.@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main {
......@@ -130,11 +128,13 @@
> .@{stepsPrefixClass}-icon {
line-height: 1;
display: inline-block;
vertical-align: middle;
top: -2px;
top: -1px;
color: @primary-color;
position: relative;
&.anticon {
font-size: 12px;
}
}
}
.@{stepsPrefixClass}-main {
......@@ -183,6 +183,11 @@
border-radius: 18px;
font-size: 12px;
margin-right: 10px;
> .@{stepsPrefixClass}-icon.anticon {
font-size: 12px;
font-size: ~"9px \9"; // ie8-9
.scale(0.75);
}
}
.@{stepsPrefixClass}-main {
margin-top: 0;
......
style/components/switch.less 0 → 100644
浏览文件 @ 879573d4
@switchPrefixCls:ant-switch;
@duration:.3s;
.@{switchPrefixCls}{
position: relative;
display: inline-block;
box-sizing: border-box;
width: 44px;
height: 22px;
line-height: 20px;
vertical-align: middle;
border-radius: 20px 20px;
border: 1px solid #ccc;
background-color: #ccc;
cursor: pointer;
transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);
&-inner {
color:#fff;
font-size: 12px;
position: absolute;
left:24px;
}
&:after{
position: absolute;
width: 18px;
height: 18px;
left: 2px;
top:1px;
border-radius: 50% 50%;
background-color: #ffffff;
content: " ";
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
transform: scale(1);
transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
animation-duration: @duration;
animation-name: rcSwitchOff;
}
&:hover:after{
transform: scale(1.1);
animation-name: rcSwitchOn;
}
&-checked{
border: 1px solid #87d068;
background-color: #87d068;
.@{switchPrefixCls}-inner {
left:6px;
}
&:after{
left: 22px;
}
}
&-disabled{
cursor: no-drop;
background: #ccc;
border-color:#ccc;
&:after{
background: #9e9e9e;
animation-name: none;
cursor: no-drop;
}
&:hover:after{
transform: scale(1);
animation-name: none;
}
}
&-label {
display: inline-block;
line-height: 20px;
font-size: 14px;
padding-left: 10px;
vertical-align: middle;
white-space: normal;
pointer-events: none;
user-select: text;
}
}
@keyframes rcSwitchOn {
0% {
transform: scale(1);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1.1);
}
}
@keyframes rcSwitchOff {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
style/components/tabs.less
浏览文件 @ 879573d4
......@@ -68,6 +68,7 @@
text-align: center;
text-transform: none;
font-family: sans-serif;
font-size: 12px;
&:before {
display: block;
......
style/components/typography.less
浏览文件 @ 879573d4
//== Typography
//** Headings: h1 h2 h3 h4 h5 h6
.pdrg-8 {
padding-right: 8px;
}
.pdlf-8 {
padding-left: 8px;
}
\ No newline at end of file
//** Headings: h1 h2 h3 h4 h5 h6
\ No newline at end of file
style/core/iconfont.less
浏览文件 @ 879573d4
......@@ -125,7 +125,7 @@
.@{iconfont-css-prefix}-link:before {content:"\e640";}
.@{iconfont-css-prefix}-logout:before {content:"\e642";}
.@{iconfont-css-prefix}-mail:before {content:"\e643";}
.@{iconfont-css-prefix}-menu-fold:before {content:"\e644";}
.@{iconfont-css-prefix}-menu-fold:before {content:"\e645";.rotate(180deg);}
.@{iconfont-css-prefix}-menu-unfold:before {content:"\e645";}
.@{iconfont-css-prefix}-mobile:before {content:"\e649";}
.@{iconfont-css-prefix}-notification:before {content:"\e64a";}
......@@ -142,12 +142,15 @@
.@{iconfont-css-prefix}-tablet:before {content:"\e664";}
.@{iconfont-css-prefix}-tag:before {content:"\e665";}
.@{iconfont-css-prefix}-tags:before {content:"\e666";}
.@{iconfont-css-prefix}-to-top:before {content:"\e667";}
.@{iconfont-css-prefix}-to-top:before {content:"\e667";}
.@{iconfont-css-prefix}-unlock:before {content:"\e668";}
.@{iconfont-css-prefix}-upload:before {content:"\e669";}
.@{iconfont-css-prefix}-user:before {content:"\e66a";}
.@{iconfont-css-prefix}-video-camera:before {content:"\e66b";}
.@{iconfont-css-prefix}-windows:before {content:"\e66c";}
.@{iconfont-css-prefix}-ie:before {content:"\e66d";}
.@{iconfont-css-prefix}-chrome:before {content:"\e66e";}
.@{iconfont-css-prefix}-home:before {content:"\e612";}
.@{iconfont-css-prefix}-loading:before {
display: inline-block;
.animation(loadingCircle 1s infinite linear);
......
style/core/motion/fade.less
浏览文件 @ 879573d4
......@@ -37,4 +37,4 @@
100% {
opacity: 0;
}
}
\ No newline at end of file
}
style/core/motion/slide.less
浏览文件 @ 879573d4
......@@ -116,4 +116,4 @@
transform-origin: 100% 0%;
transform: scaleX(0);
}
}
\ No newline at end of file
}
style/core/motion/zoom.less
浏览文件 @ 879573d4
......@@ -6,6 +6,7 @@
}
.@{className}-leave {
animation-timing-function: @ease-in-circ;
transform: scale(0, 0);
}
}
......
style/mixins/button.less
浏览文件 @ 879573d4
......@@ -14,7 +14,7 @@
}
&:active,
&.active {
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@border, 5%));
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
}
&:active,
&.active {
......@@ -57,9 +57,6 @@
// size
&-lg > .@{btnClassName} {
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-lg);
> .@{iconfont-css-prefix} {
font-size: @btn-font-size-lg + 2;
}
}
&-sm > .@{btnClassName} {
......@@ -91,9 +88,8 @@
transform: translate3d(0, 0, 0);
> .@{iconfont-css-prefix} {
font-size: @font-size-base + 2;
line-height: 1;
z-index: 2;
line-height: 1;
}
&,
......@@ -118,22 +114,16 @@
&-lg {
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-lg);
> .@{iconfont-css-prefix} {
font-size: @btn-font-size-lg + 2;
}
}
&-sm {
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
> .@{iconfont-css-prefix} {
font-size: @font-size-base;
}
}
}
// primary button style
.btn-primary() {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
&:hover,
&:active,
......
style/mixins/input.less
浏览文件 @ 879573d4
......@@ -11,14 +11,37 @@
font-size: @input-font-size-sm;
}
// input status
// == when focus or actived
.active(@color: @input-hover-border-color) {
border-color: @color;
outline: 0;
box-shadow: 0 0 3px tint(@color, 20%);
}
// == when hoverd
.hover(@color: @input-hover-border-color ) {
border-color: @color;
}
.disabled() {
background-color: @input-disabled-bg;
opacity: 1;
cursor: @cursor-disabled;
&:hover {
.hover(@input-border-color);
}
}
// Basic style for input
.input() {
position: relative;
display: inline-block;
padding: @input-padding-vertical-base @input-padding-horizontal;
width: 100%;
cursor: text;
height: @input-height-base;
cursor: text;
font-size: @input-font-size;
line-height: @line-height-base;
color: @input-color;
......@@ -30,27 +53,16 @@
.transition(~"border .3s @{ease-in-out}, background .3s @{ease-in-out}, box-shadow .3s @{ease-in-out}");
&:hover {
border-color: @input-hover-border-color;
.hover();
}
&:focus {
border-color: @input-focus-border-color;
outline: 0;
box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
.active();
}
&[disabled],
fieldset[disabled] & {
background-color: @input-disabled-bg;
opacity: 1;
&:hover {
border-color: @input-border-color;
}
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
.disabled();
}
// Reset height for `textarea`s
......@@ -85,11 +97,8 @@
}
}
// Input-group
.input-group(@inputClass) {
// define the button style for input-group
@inputBtn: input-btn;
// label input
.input-group(@inputClass; @btnclass) {
position: relative;
display: table;
border-collapse: separate;
......@@ -101,10 +110,13 @@
padding-right: 0;
}
&-addon,
&-btn,
&-btn-vertical,
.@{inputClass} {
> [class*="col-"] {
padding-right: 8px;
}
&-addon,
&-btn,
> .@{inputClass} {
display: table-cell;
&:not(:first-child):not(:last-child) {
......@@ -112,9 +124,8 @@
}
}
&-addon,
&-btn,
&-btn-vertical {
&-addon,
&-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
......@@ -138,24 +149,18 @@
background-color: #eee;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
.@{inputBtn} {
.btn();
.button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @border-radius-base);
.@{btnclass} {
border-radius: @border-radius-base;
.button-variant(@input-color; #eee; @input-border-color);
margin-left: -1px;
&:hover {
.button-color(tint(@input-color, 20%); #eee; @input-border-color);
.button-color(@input-color; tint(#eee, 20%); @input-border-color);
}
&:active,
&.active {
.button-color(shade(@input-color, 5%); #eee; @input-border-color);
&:active, &.active {
.button-color(@input-color; shade(#eee, 5%); @input-border-color);
}
.@{iconfont-css-prefix} {
......@@ -164,34 +169,9 @@
}
}
&-btn {
position: relative;
> .@{inputBtn} {
position: relative;
+ .@{inputBtn} {
margin-left: -1px;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .@{inputBtn} {
margin-right: -1px;
}
}
&:last-child {
> .@{inputBtn} {
margin-left: -1px;
}
}
}
// Reset rounded corners
.@{inputClass}:first-child,
&-addon:first-child,
&-btn:first-child > .@{inputBtn},
&-btn:last-child > .@{inputBtn}:not(:last-child):not(.dropdown-toggle) {
> .@{inputClass}:first-child,
&-addon:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
......@@ -199,33 +179,31 @@
&-addon:first-child {
border-right: 0;
}
&-addon:last-child {
border-left: 0;
}
.@{inputClass}:last-child,
> .@{inputClass}:last-child,
&-addon:last-child,
&-btn:last-child > .@{inputBtn},
&-btn:first-child > .@{inputBtn}:not(:first-child) {
&-btn .@{btnclass}{
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&-addon:last-child {
border-left: 0;
}
// Sizing options
&-lg > .@{inputClass},
&-lg .@{inputClass},
&-lg > &-addon,
&-lg > &-btn > .@{inputBtn} {
&-lg > &-btn .@{btnclass} {
.input-lg();
}
&-sm > .@{inputClass},
&-sm .@{inputClass},
&-sm > &-addon,
&-sm > &-btn > .@{inputBtn} {
&-sm > &-btn .@{btnclass} {
.input-sm();
}
&-sm > &-btn > .@{inputBtn} {
&-sm > &-btn .@{btnclass} {
margin-top: ~"-2px \9";
}
}
style/themes/default/custom.less
浏览文件 @ 879573d4
......@@ -15,12 +15,12 @@
@text-color : #666;
@font-size-base : 12px;
@line-height-base : 1.5;
@line-height-computed: floor((@font-size-base * @line-height-base));
@line-height-computed : floor((@font-size-base * @line-height-base));
@border-radius-base : 6px;
// ICONFONT
@iconfont-css-prefix : anticon;
@icon-url : "//at.alicdn.com/t/font_1434092639_4910953";
@icon-url : "//at.alicdn.com/t/font_1436443521_8072257";
// LINK
@link-color : @primary-color;
......@@ -46,10 +46,10 @@
@btn-primary-color : #fff;
@btn-primary-bg : @primary-color;
@btn-primary-border : shade(@primary-color, 5%);
@btn-group-border : shade(@primary-color, 5%);
@btn-default-color : #666;
@btn-default-bg : #f3f5f7;
@btn-default-bg : #f4f4f4;
@btn-default-border : #d9d9d9;
@btn-ghost-color : #666;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或