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

This commit is contained in:
afc163 2016-10-14 11:30:09 +08:00
commit 953538d4e9
5 changed files with 51 additions and 60 deletions

View File

@ -74,6 +74,7 @@ There are some breaking changes in `antd@2.0.0`, and you need to modify your cod
* `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`. * `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`.
* `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first. * `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first.
* Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns). * Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns).
* `Popover[overlay]` is removed, please use `Popover[content]` instead.
The following change will throw some warnings in the console and it will still work, but we recommend to update your code. The following change will throw some warnings in the console and it will still work, but we recommend to update your code.

View File

@ -6,21 +6,9 @@
border-radius: @border-radius; border-radius: @border-radius;
} }
.button-variant(@color; @background; @border) { .button-disabled() {
.button-color(@color; @background; @border);
&:hover,
&:focus {
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
}
&:active,
&.active {
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
}
&.disabled, &.disabled,
&[disabled], &[disabled] {
fieldset[disabled] & {
&, &,
&:hover, &:hover,
&:focus, &:focus,
@ -31,6 +19,38 @@
} }
} }
.button-variant-primary(@color; @background) {
.button-color(@color; @background; @background);
&:hover,
&:focus {
.button-color(@color; tint(@background, 20%); tint(@background, 20%));
}
&:active,
&.active {
.button-color(@color; shade(@background, 5%); shade(@background, 5%));
}
.button-disabled();
}
.button-variant-other(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover,
&:focus {
.button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%));
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%));
}
.button-disabled();
}
.button-color(@color; @background; @border) { .button-color(@color; @background; @border) {
color: @color; color: @color;
background-color: @background; background-color: @background;
@ -91,7 +111,6 @@
cursor: pointer; cursor: pointer;
background-image: none; background-image: none;
border: 1px solid transparent; border: 1px solid transparent;
// outline: none;
white-space: nowrap; white-space: nowrap;
line-height: @line-height-base; line-height: @line-height-base;
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base); .button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
@ -137,57 +156,29 @@
// primary button style // primary button style
.btn-primary() { .btn-primary() {
.button-variant(@btn-primary-color; @btn-primary-bg; @primary-color); .button-variant-primary(@btn-primary-color; @btn-primary-bg);
&:hover,
&:focus,
&:active,
&.active {
color: @btn-primary-color;
}
} }
// default button style // default button style
.btn-default() { .btn-default() {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
&:hover, &:hover,
&:focus { &:focus,
.button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
}
&:active, &:active,
&.active { &.active {
.button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%)); background: #fff;
} }
} }
// ghost button style // ghost button style
.btn-ghost() { .btn-ghost() {
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border); .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
&:hover,
&:focus {
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
}
} }
// ghost button style // ghost button style
.btn-dashed() { .btn-dashed() {
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border); .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
border-style: dashed; border-style: dashed;
&:hover,
&:focus {
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
}
} }
// circle button: the content only contains icon // circle button: the content only contains icon

View File

@ -31,8 +31,7 @@ label {
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
&[disabled], &[disabled],
&.disabled, &.disabled {
fieldset[disabled] & {
cursor: @cursor-disabled; cursor: @cursor-disabled;
} }
} }
@ -42,8 +41,7 @@ input[type="checkbox"] {
.@{ant-prefix}-radio-vertical, .@{ant-prefix}-radio-vertical,
.@{ant-prefix}-checkbox-inline, .@{ant-prefix}-checkbox-inline,
.@{ant-prefix}-checkbox-vertical { .@{ant-prefix}-checkbox-vertical {
&.disabled, &.disabled {
fieldset[disabled] & {
cursor: @cursor-disabled; cursor: @cursor-disabled;
} }
} }
@ -51,8 +49,7 @@ input[type="checkbox"] {
// These classes are used on elements with <label> descendants // These classes are used on elements with <label> descendants
.@{ant-prefix}-radio, .@{ant-prefix}-radio,
.@{ant-prefix}-checkbox { .@{ant-prefix}-checkbox {
&.disabled, &.disabled {
fieldset[disabled] & {
label { label {
cursor: @cursor-disabled; cursor: @cursor-disabled;
} }

View File

@ -62,8 +62,7 @@
.active(); .active();
} }
&[disabled], &[disabled] {
fieldset[disabled] & {
.disabled(); .disabled();
} }

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { injectIntl } from 'react-intl';
import DocumentTitle from 'react-document-title'; import DocumentTitle from 'react-document-title';
import Link from './Link'; import Link from './Link';
import Banner from './Banner'; import Banner from './Banner';
@ -86,9 +87,9 @@ function getStyle() {
`; `;
} }
export default function Home() { function Home(props) {
return ( return (
<DocumentTitle title="Ant Design - 一个 UI 设计语言"> <DocumentTitle title={`Ant Design - ${props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
<div className="main-wrapper"> <div className="main-wrapper">
<Link /> <Link />
<Banner /> <Banner />
@ -101,3 +102,5 @@ export default function Home() {
</DocumentTitle> </DocumentTitle>
); );
} }
export default injectIntl(Home);