diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md new file mode 100644 index 000000000..4ce1fa964 --- /dev/null +++ b/components/affix/demo/basic.md @@ -0,0 +1,17 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +var Affix = antd.Affix; + +React.render( + + + +, document.getElementById('components-affix-demo-basic')); +```` diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md new file mode 100644 index 000000000..a6a505cfb --- /dev/null +++ b/components/affix/demo/offset.md @@ -0,0 +1,17 @@ +# 偏移 + +- order: 1 + +达到一定的偏移量才触发。 + +--- + +````jsx +var Affix = antd.Affix; + +React.render( + + + +, document.getElementById('components-affix-demo-offset')); +```` diff --git a/components/affix/index.jsx b/components/affix/index.jsx new file mode 100644 index 000000000..02b60d4cf --- /dev/null +++ b/components/affix/index.jsx @@ -0,0 +1,102 @@ +import React from 'react'; +import joinClasses from 'react/lib/joinClasses'; +import rcUtil from 'rc-util'; + +function getScroll(w, top) { + var ret = w['page' + (top ? 'Y' : 'X') + 'Offset']; + var method = 'scroll' + (top ? 'Top' : 'Left'); + if (typeof ret !== 'number') { + var d = w.document; + //ie6,7,8 standard mode + ret = d.documentElement[method]; + if (typeof ret !== 'number') { + //quirks mode + ret = d.body[method]; + } + } + return ret; +} + +function getOffset(element) { + var rect = element.getBoundingClientRect(); + var body = document.body; + var clientTop = element.clientTop || body.clientTop || 0; + var clientLeft = element.clientLeft || body.clientLeft || 0; + var scrollTop = getScroll(window, true); + var scrollLeft = getScroll(window); + + return { + top: rect.top + scrollTop - clientTop, + left: rect.left + scrollLeft - clientLeft + }; +} + +var Affix = React.createClass({ + + getDefaultProps() { + return { + offset: 0 + }; + }, + + getInitialState() { + return { + affix: false, + affixStyle: null + }; + }, + + handleScroll() { + var affix = this.state.affix; + var scrollTop = getScroll(window, true); + var elemOffset = getOffset(this.getDOMNode()); + + if (!affix && (elemOffset.top - this.props.offset) < scrollTop) { + this.setState({ + affix: true, + affixStyle: { + top: this.props.offset, + left: elemOffset.left, + width: this.getDOMNode().offsetWidth + } + }); + } + + if (affix && (elemOffset.top - this.props.offset) > scrollTop) { + this.setState({ + affix: false, + affixStyle: null + }); + } + }, + + componentDidMount() { + this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll); + this.resizeEvent = rcUtil.Dom.addEventListener(window, 'resize', this.handleScroll); + }, + + componentWillUnmount() { + if (this.scrollEvent) { + this.scrollEvent.remove(); + } + if (this.resizeEvent) { + this.resizeEvent.remove(); + } + }, + + render() { + var affix = this.state.affix ? 'affix' : ''; + var className = this.props.className; + + return ( +
+
+ {this.props.children} +
+
+ ); + } + +}); + +module.exports = Affix; diff --git a/components/affix/index.md b/components/affix/index.md index 1adff4151..f9c572c7b 100644 --- a/components/affix/index.md +++ b/components/affix/index.md @@ -5,3 +5,10 @@ --- +## API + +属性如下 + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| offset | 达到指定偏移量后触发 | Number | 0 | diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md new file mode 100644 index 000000000..ec9416632 --- /dev/null +++ b/components/carousel/demo/autoplay.md @@ -0,0 +1,21 @@ +# 自动切换 + +- order: 3 + +定时切换下一张。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-autoplay')); +```` + diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md new file mode 100644 index 000000000..e5715e1f6 --- /dev/null +++ b/components/carousel/demo/basic.md @@ -0,0 +1,20 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-basic')); +```` diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md new file mode 100644 index 000000000..e04e18680 --- /dev/null +++ b/components/carousel/demo/fade.md @@ -0,0 +1,21 @@ +# 渐显 + +- order: 2 + +切换效果为渐显。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-fade')); +```` + diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md new file mode 100644 index 000000000..37726ba3b --- /dev/null +++ b/components/carousel/demo/vertical.md @@ -0,0 +1,20 @@ +# 垂直 + +- order: 1 + +垂直显示。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-vertical')); +```` diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx new file mode 100644 index 000000000..a3dd9d575 --- /dev/null +++ b/components/carousel/index.jsx @@ -0,0 +1,34 @@ +import Carousel from 'react-slick'; +import React from 'react'; +import assign from 'object-assign'; + +var AntCarousel = React.createClass({ + + getDefaultProps() { + return { + dots: true, + arrows: false + }; + }, + + render() { + var props = assign({}, this.props); + + if (props.effect === 'fade') { + props.fade = true; + } + + var className = 'ant-carousel'; + if (props.vertical) { + className = className + ' ant-carousel-vertical'; + } + + return ( +
+ +
+ ); + } +}); + +export default AntCarousel; diff --git a/components/carousel/index.md b/components/carousel/index.md index e3767bb4c..a0944e0a4 100644 --- a/components/carousel/index.md +++ b/components/carousel/index.md @@ -5,3 +5,33 @@ --- +旋转木马，轮播组件。 + +## 何时使用 + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|------------------|----------------------------------------------|----------|---------------------------------| +| effect | 动画效果函数，可取 scrollx, fade | String | scrollx | +| arrow | 是否显示前后翻页箭头 | Boolean | false | +| dots | 是否显示面板指示点 | Boolean | true | +| vertical | 垂直显示 | Boolean | false | +| autoplay | 是否自动切换 | Boolean | false | +| easing | 动画效果 | String | linear | +| onChange | 切换面板的回调 | Function | 无 + + diff --git a/components/datepicker/demo/size.md b/components/datepicker/demo/size.md new file mode 100644 index 000000000..9dcf44390 --- /dev/null +++ b/components/datepicker/demo/size.md @@ -0,0 +1,20 @@ +# 三种大小 + +- order: 1 + +三种大小的输入框，大的用在表单中，中的为默认。 + +--- + +````jsx +// or require('antd/lib/datepicker'); +var Datepicker = antd.Datepicker; + +React.render( +
+ + + +
+, document.getElementById('components-datepicker-demo-size')); +```` diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index a4fae950f..228a38e4f 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -69,12 +69,14 @@ export default React.createClass({ disabled={this.props.disabled} trigger={} calendar={calendar} - adjustOrientOnCalendarOverflow={false} + adjustOrientOnCalendarOverflow={true} formatter={new DateTimeFormat(this.props.format)} value={this.state.value} prefixCls="ant-calendar-picker" onChange={this.handleChange}> - + ); } diff --git a/components/datepicker/index.md b/components/datepicker/index.md index afa0e2636..0353d68ea 100644 --- a/components/datepicker/index.md +++ b/components/datepicker/index.md @@ -26,9 +26,13 @@ | onSelect | 选择日期的回调 | function | 无 | | showTime | 显示时间选择条 | boolean | false | | disabled | 禁用 | bool | false | +| size | 输入框大小，`lg`代表高为32px，`sm`代表高为22px，默认28px | string | 无 | diff --git a/components/notification/demo/top.md b/components/notification/demo/top.md new file mode 100644 index 000000000..947145f26 --- /dev/null +++ b/components/notification/demo/top.md @@ -0,0 +1,26 @@ +# 距离顶部距离 + +- order: 1 + +自定义通知框距离顶部的距离，在`config`方法里设置`top`的值， **只在初始化时设置有效** ，默认距离顶部`24px`。 + +--- + +````jsx +var notification = require('antd/lib/notification'); +notification.config({ + top: 100 +}); + +var openNotification = function() { + var args = { + message: "这是标题", + description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案", + }; + notification.open(args); +}; + +React.render( + +, document.getElementById('components-notification-demo-top')); +```` diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index caa9f70d9..fae11d88d 100644 --- a/components/notification/demo/with-icon.md +++ b/components/notification/demo/with-icon.md @@ -9,47 +9,21 @@ ````jsx var notification = require('antd/lib/notification'); -var openNotificationSuccess = function() { - var args = { - message: "这是成功通知提醒框的标题", - description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", - icon: "success" - }; - notification.open(args); -}; - -var openNotificationInfo = function() { - var args = { - message: "这是消息通知提醒框的标题", - description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", - icon: "info" - }; - notification.open(args); -}; - -var openNotificationWarn = function() { - var args = { - message: "这是警告通知提醒框的标题", - description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", - icon: "warn" - }; - notification.open(args); -}; - -var openNotificationError = function() { - var args = { - message: "这是错误通知提醒框的标题", - description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", - icon: "error" - }; - notification.open(args); +var openNotificationWithIcon = function(type) { + return function(){ + var args = { + message: "这是标题", + description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案" + }; + notification[type](args); + }; }; React.render(
- - - - + + + +
, document.getElementById('components-notification-demo-with-icon')); ```` diff --git a/components/notification/index.jsx b/components/notification/index.jsx index a98dcbb2a..6b045fca0 100644 --- a/components/notification/index.jsx +++ b/components/notification/index.jsx @@ -1,4 +1,6 @@ import Notification from 'rc-notification'; +import assign from 'object-assign'; +import React from 'react'; let top = 24; @@ -6,12 +8,12 @@ var notificationInstance; function getNotificationInstance() { notificationInstance = notificationInstance || Notification.newInstance({ - prefixCls: 'ant-notification', - style: { - top: top, - right: 0 - } - }); + prefixCls: 'ant-notification', + style: { + top: top, + right: 0 + } + }); return notificationInstance; } @@ -20,26 +22,28 @@ function notice(args) { let prefixCls = ' ant-notification-notice-content-icon-'; let iconClass = 'anticon anticon-'; switch (args.icon) { - case 'success': - iconClass += 'check-circle-o'; - break; - case 'info': - iconClass += 'info-circle-o'; - break; - case 'error': - iconClass += 'exclamation-circle-o'; - break; - case 'warn': - iconClass += 'question-circle-o'; - break; - default: - iconClass += 'info-circle'; + case 'success': + iconClass += 'check-circle-o'; + break; + case 'info': + iconClass += 'info-circle-o'; + break; + case 'error': + iconClass += 'exclamation-circle-o'; + break; + case 'warn': + iconClass += 'question-circle-o'; + break; + default: + iconClass += 'info-circle'; } getNotificationInstance().notice({ content:
+

{args.message}

+

{args.description}

, duration: null, @@ -53,6 +57,7 @@ function notice(args) { getNotificationInstance().notice({ content:

{args.message}

+

{args.description}

, duration: null, @@ -64,6 +69,7 @@ function notice(args) { getNotificationInstance().notice({ content:

{args.message}

+

{args.description}

{args.btn} @@ -79,14 +85,27 @@ function notice(args) { } } -export default { +var api = { open(args){ notice(args); }, close(key){ - notificationInstance.removeNotice(key); + if (notificationInstance) { + notificationInstance.removeNotice(key); + } }, config(options) { top = isNaN(options.top) ? 24 : options.top; } }; + +['success', 'info', 'warn', 'error'].forEach((type)=> { + api[type] = (args) => { + var newArgs = assign({}, args, { + icon: type + }); + return api.open(newArgs); + }; +}); + +export default api; diff --git a/components/notification/index.md b/components/notification/index.md index df9c2c7c8..62727786b 100644 --- a/components/notification/index.md +++ b/components/notification/index.md @@ -13,21 +13,33 @@ ## API +- `notification.success(config)` +- `notification.error(config)` +- `notification.info(config)` +- `notification.warn(config)` +- `notification.open(config)` +- `notification.close(key: String)` + +config 参数如下： + | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------- | ----------- |--------| -| message | 通知提醒标题，必选 | String | 无 | -| description | 通知提醒内容，必选 | String | 无 | -| icon | 通知提醒框的左侧Icon，默认没有，有四种选择`success`、`info`、`warn`、`error` | String | 无 | -| btn | 自定义关闭按钮 | String | 无 | -| top | 通知提醒框距离顶部的距离， **只在初始化时设置有效** ，默认`24` | Number | 24 | +| message | 通知提醒标题，必选 | React.Element or String | 无 | +| description | 通知提醒内容，必选 | React.Element or String | 无 | +| btn | 自定义关闭按钮 | React.Element | 无 | +| key | 当前通知唯一标志 | String | 无 | | onClose | 点击默认关闭按钮时触发的回调函数 | Function | 无 | -## 注意 +还提供了一个全局配置方法： -- 当需要自定义通知提醒框距离浏览器窗口顶部的距离时，必须在 **第一次** `notification.open()` 前设置才有效 - ```jsx - notification.config({ - top: 24 - }); - notification.open(args); - ``` \ No newline at end of file +- `notification.config(options)` + +```js +message.config({ + top: 100 +}); +``` + +| 参数 | 说明 | 类型 | 默认值 | +|------------|--------------------|----------------------------|--------------| +| top | 消息距离顶部的位置 | Number | 24px | diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx index 5686353d5..9c0207e08 100644 --- a/components/tabs/index.jsx +++ b/components/tabs/index.jsx @@ -20,3 +20,4 @@ AntTabs.defaultProps = { AntTabs.TabPane = Tabs.TabPane; export default AntTabs; + diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md new file mode 100644 index 000000000..6230a151d --- /dev/null +++ b/components/tree/demo/basic.md @@ -0,0 +1,32 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +var Tree = antd.Tree; +var TreeNode = Tree.TreeNode; +React.render( + + + leaf + + + leaf + leaf + + leaf + leaf + + + leaf + + leaf + + +, document.getElementById('components-tree-demo-basic')); +```` + diff --git a/components/tree/index.jsx b/components/tree/index.jsx new file mode 100644 index 000000000..adcdbbb4d --- /dev/null +++ b/components/tree/index.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Tree from 'rc-tree'; +var TreeNode = Tree.TreeNode; + +var antDTree = React.createClass({ + + render() { + return + {this.props.children} + ; + } +}); +antDTree.TreeNode = TreeNode; +module.exports = antDTree; diff --git a/docs/getting-started.md b/docs/getting-started.md index 313973455..13b81058b 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -155,7 +155,7 @@ Ant Design 支持所有的现代浏览器和 IE8+。 - + diff --git a/index.js b/index.js index a44f5004e..09a12847f 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,10 @@ require('./style/index.less'); var antd = { + Affix: require('./components/affix'), Datepicker: require('./components/datepicker'), Tooltip: require('./components/tooltip'), + Carousel: require('./components/carousel'), Tabs: require('./components/tabs'), Modal: require('./components/modal'), Menu: require('rc-menu'), @@ -28,7 +30,8 @@ var antd = { RadioGroup: require('./components/radio/group'), Notification: require('./components/notification'), Alert: require('./components/alert'), - Validation: require('./components/validation') + Validation: require('./components/validation'), + Tree: require('./components/Tree') }; module.exports = antd; diff --git a/package.json b/package.json index 1c3154260..19e31d9b6 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,10 @@ "rc-switch": "~1.2.0", "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", - "rc-tooltip": "~2.4.0" + "rc-tooltip": "~2.4.0", + "rc-tree": "~0.10.0", + "rc-util": "~2.0.3", + "react-slick": "~0.6.4" }, "devDependencies": { "autoprefixer-loader": "~2.0.0", diff --git a/site/templates/home.html b/site/templates/home.html index 89fd92817..4ea0e097b 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -21,6 +21,7 @@ 开始使用 +
v{{config.package.stableVersion}}
diff --git a/site/templates/layout.html b/site/templates/layout.html index d6082bead..77dd87d32 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -33,7 +33,7 @@ } })(this.console = this.console || {}); - + - - -
- -
- -> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/) - -## 响应互动 - -响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 - -比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。 - ### 可折叠面板 对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 @@ -57,3 +48,21 @@
+ + +### 页面转场 + +从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 + + - 大页面转场可采用左出右入的形式。 + + - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。 + + + + +
+ +
+ +> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/) diff --git a/static/style.css b/static/style.css index fa0644f59..6834f9b2e 100644 --- a/static/style.css +++ b/static/style.css @@ -585,6 +585,7 @@ footer ul li > a { empty-cells: show; border: 1px solid #e9e9e9; width: 100%; + margin-bottom: 24px; } .markdown > table th { @@ -1852,8 +1853,16 @@ a.entry-link:hover .icon-lego { animation: rotateCircle 0.5s 1 ease-in-out; } +.entry-version { + font-size: 12px; + margin-top: 15px; + position: absolute; + top: 36px; + right: -32px; +} + @media only screen and (min-width: 320px) and (max-width: 1024px) { - .code-boxes-col { + .code-boxes-col-2-1 { float: none; width: 100%; } diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less new file mode 100644 index 000000000..d5124f26f --- /dev/null +++ b/style/components/carousel/slick-theme.less @@ -0,0 +1,126 @@ + +.ant-carousel { + + /* Arrows */ + + .slick-prev, + .slick-next { + position: absolute; + display: block; + height: 20px; + width: 20px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + margin-top: -10px; + padding: 0; + border: none; + outline: none; + &:hover, &:focus { + outline: none; + background: transparent; + color: transparent; + &:before { + opacity: 1; + } + } + &.slick-disabled:before { + opacity: 0.25; + } + } + + .slick-prev { + left: -25px; + &:before { + content: "←"; + } + } + + .slick-next { + right: -25px; + &:before { + content: "→"; + } + } + + /* Dots */ + + .slick-slider { + padding-bottom: 45px; + } + + .slick-dots { + position: absolute; + bottom: 0px; + list-style: none; + display: block; + text-align: center; + padding: 0; + width: 100%; + li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; + button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; + &:hover, &:focus { + outline: none; + &:before { + opacity: 1; + } + } + &:before { + position: absolute; + top: 0; + left: 0; + content: "•"; + width: 20px; + height: 20px; + font-size: 18px; + font-family: arial, sans-serif; + line-height: 20px; + text-align: center; + color: gray; + opacity: 0.25; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + &.slick-active button:before { + color: black; + opacity: 0.75; + } + } + } +} + +.ant-carousel-vertical { + + .slick-slider { + padding-bottom: 0; + } + + .slick-dots { + width: 20px; + bottom: auto; + right: -35px; + top: 0; + } +} diff --git a/style/components/carousel/slick.less b/style/components/carousel/slick.less new file mode 100644 index 000000000..e5384c803 --- /dev/null +++ b/style/components/carousel/slick.less @@ -0,0 +1,94 @@ + +.ant-carousel { + + .slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-touch-callout: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; + } + .slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + + &:focus { + outline: none; + } + + &.dragging { + cursor: pointer; + cursor: hand; + } + } + .slick-slider .slick-track, + .slick-slider .slick-list { + transform: translate3d(0, 0, 0); + } + + .slick-track { + position: relative; + left: 0; + top: 0; + display: block; + + &:before, + &:after { + content: ""; + display: table; + } + + &:after { + clear: both; + } + + .slick-loading & { + visibility: hidden; + } + } + .slick-slide { + float: left; + height: 100%; + min-height: 1px; + [dir="rtl"] & { + float: right; + } + img { + display: block; + } + &.slick-loading img { + display: none; + } + + display: none; + + &.dragging img { + pointer-events: none; + } + } + + .slick-initialized .slick-slide { + display: block; + } + + .slick-loading .slick-slide { + visibility: hidden; + } + + .slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; + } + .slick-arrow.slick-hidden { + display: none; + } + +} diff --git a/style/components/form.less b/style/components/form.less index 2c08df511..6a6558206 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -127,9 +127,7 @@ form { .@{css-prefix}input, .@{css-prefix}input-group .@{css-prefix}input, .@{css-prefix}input-group .@{css-prefix}input-group-addon { - height: @input-height-lg; - font-size: @font-size-base; - padding: 6px 7px; + .input-lg(); } // Input combined with select @@ -266,9 +264,8 @@ form { bottom: 0; right: 0; font-family: "anticon" !important; - width: 32px; - height: 32px; - line-height: 32px; + .square(@input-height-lg); + line-height: @input-height-lg; text-align: center; font-size: 14px; } diff --git a/style/components/index.less b/style/components/index.less index 25ded2f78..89dfcf42c 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -26,3 +26,6 @@ @import "notification"; @import "tag"; @import "alert"; +@import "tree"; +@import "carousel/slick"; +@import "carousel/slick-theme"; diff --git a/style/components/notification.less b/style/components/notification.less index 1d5f4baf2..92a4dd746 100644 --- a/style/components/notification.less +++ b/style/components/notification.less @@ -83,7 +83,7 @@ color: #999; outline: none; } - + &-content-btn { float: right; margin-top: 16px; @@ -117,4 +117,4 @@ padding-top: 0; padding-bottom: 0; } -} \ No newline at end of file +} diff --git a/style/components/select.less b/style/components/select.less index 1836b7fd2..1494de375 100644 --- a/style/components/select.less +++ b/style/components/select.less @@ -243,16 +243,15 @@ margin: 0; padding: 0; - > li.@{selectPrefixCls}-menu-item { - padding-left: 20px; + > li.@{selectPrefixCls}-dropdown-menu-item { + padding-left: 24px; } } &-item-group-title { color: #999; line-height: 1.5; - padding: 8px 10px; - border-bottom: 1px solid #dedede; + padding: 8px 16px; } li&-item { diff --git a/style/components/tree.less b/style/components/tree.less new file mode 100644 index 000000000..a0393182e --- /dev/null +++ b/style/components/tree.less @@ -0,0 +1,88 @@ +@treePrefixCls: rc-tree; + +.@{treePrefixCls} { + margin:0; padding:5px; + + li { + padding: 0; + margin: 0; + list-style: none; + line-height: 14px; + white-space: nowrap; + outline: 0; + + ul{ margin:0; padding:0 0 0 18px} + ul.line{ + //background:url(./img/line_conn.gif) 0 0 repeat-y; + background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y; + } + a { + padding:1px 3px 0 0; margin:0; + cursor:pointer; height:17px; + background-color: transparent; + text-decoration:none; + vertical-align:top; display: inline-block + } + span {line-height:16px; margin-right:2px} + span.button { + line-height:0; margin:0; width:16px; height:16px; + display: inline-block; vertical-align:middle; + border:0 none; cursor: pointer;outline:none; + background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; + //background-image:url("./img/zTreeStandard.png"); + background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png"); + } + span.button.roots_open { background-position: -92px 0; } + span.button.roots_close{background-position:-74px 0} + span.button.center_open{background-position:-92px -18px} + span.button.center_close{background-position:-74px -18px} + span.button.bottom_open{background-position:-92px -36px} + span.button.bottom_close{background-position:-74px -36px} + + span.button.center_docu{background-position:-56px -18px} + span.button.bottom_docu{background-position:-56px -36px} + + span.button.chk { + width: 13px; height: 13px; + margin: 0 3px 0 0; + cursor: auto; + } + span.button.chk.checkbox_false_full {background-position:0 0} + span.button.chk.checkbox_false_full_focus {background-position:0 -14px} + span.button.chk.checkbox_false_part {background-position:0 -28px} + span.button.chk.checkbox_false_part_focus {background-position:0 -42px} + span.button.chk.checkbox_false_disable {background-position:0 -56px} + span.button.chk.checkbox_true_full {background-position:-14px 0} + span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} + span.button.chk.checkbox_true_part {background-position:-14px -28px} + span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} + span.button.chk.checkbox_true_disable {background-position:-14px -56px} + } + + &-selected{ + background-color:#FFE6B0; + border:1px #FFB951 solid; opacity:0.8; + } + + &-treenode-switcher { + display: inline-block; + width: 18px; + height: 18px; + } + &-icon__open { + margin-right: 2px; + background-position: -110px -16px; + vertical-align: top; + } + &-icon__close { + margin-right: 2px; + background-position: -110px 0; + vertical-align: top; + } + &-switcher__open { + //background-position: -92px 0; + } + &-switcher__close { + //background-position: -74px 0; + } +} diff --git a/style/mixins/input.less b/style/mixins/input.less index a19543680..0f1b20982 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -1,14 +1,12 @@ // size mixins for input .input-lg() { - padding: @input-padding-lg; + padding: @input-padding-vertical-lg @input-padding-horizontal; height: @input-height-lg; - font-size: @input-font-size-lg; } .input-sm() { padding: @input-padding-vertical-sm @input-padding-horizontal; height: @input-height-sm; - font-size: @input-font-size-sm; } // input status @@ -42,7 +40,7 @@ width: 100%; height: @input-height-base; cursor: text; - font-size: @input-font-size; + font-size: @font-size-base; line-height: @line-height-base; color: @input-color; background-color: @input-bg; diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index 772e8ca2e..503279bbe 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -121,17 +121,13 @@ @input-padding-horizontal : 7px; @input-padding-vertical-base : 4px; @input-padding-vertical-sm : 1px; -@input-padding-lg : 4px 7px 5px; +@input-padding-vertical-lg : 6px; @input-placeholder-color : #ccc; @input-color : #666; @input-border-color : #d9d9d9; @input-bg : #fff; -@input-font-size-lg : 14px; -@input-font-size : @font-size-base; -@input-font-size-sm : @font-size-base; - @input-hover-border-color : @primary-color; @input-focus-border-color : @primary-color; @input-disabled-bg : #f3f5f7;