mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 21:59:41 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
953538d4e9
@ -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.
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -62,8 +62,7 @@
|
|||||||
.active();
|
.active();
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled],
|
&[disabled] {
|
||||||
fieldset[disabled] & {
|
|
||||||
.disabled();
|
.disabled();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user