mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 03:29:39 +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`.
|
||||
* `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).
|
||||
* `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.
|
||||
|
||||
|
@ -6,21 +6,9 @@
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.button-variant(@color; @background; @border) {
|
||||
.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%));
|
||||
}
|
||||
|
||||
.button-disabled() {
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&[disabled] {
|
||||
&,
|
||||
&:hover,
|
||||
&: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) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
@ -91,7 +111,6 @@
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
// outline: none;
|
||||
white-space: nowrap;
|
||||
line-height: @line-height-base;
|
||||
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
|
||||
@ -137,57 +156,29 @@
|
||||
|
||||
// primary button style
|
||||
.btn-primary() {
|
||||
.button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: @btn-primary-color;
|
||||
}
|
||||
.button-variant-primary(@btn-primary-color; @btn-primary-bg);
|
||||
}
|
||||
|
||||
// default button style
|
||||
.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,
|
||||
&:focus {
|
||||
.button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// ghost button style
|
||||
.btn-ghost() {
|
||||
.button-variant(@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%));
|
||||
}
|
||||
.button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
|
||||
}
|
||||
|
||||
// ghost button style
|
||||
.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;
|
||||
|
||||
&: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
|
||||
|
@ -31,8 +31,7 @@ label {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&[disabled],
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
&.disabled {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
@ -42,8 +41,7 @@ input[type="checkbox"] {
|
||||
.@{ant-prefix}-radio-vertical,
|
||||
.@{ant-prefix}-checkbox-inline,
|
||||
.@{ant-prefix}-checkbox-vertical {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
&.disabled {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
@ -51,8 +49,7 @@ input[type="checkbox"] {
|
||||
// These classes are used on elements with <label> descendants
|
||||
.@{ant-prefix}-radio,
|
||||
.@{ant-prefix}-checkbox {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
&.disabled {
|
||||
label {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
@ -62,9 +62,8 @@
|
||||
.active();
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
.disabled();
|
||||
&[disabled] {
|
||||
.disabled();
|
||||
}
|
||||
|
||||
// Reset height for `textarea`s
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
import Link from './Link';
|
||||
import Banner from './Banner';
|
||||
@ -86,9 +87,9 @@ function getStyle() {
|
||||
`;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
function Home(props) {
|
||||
return (
|
||||
<DocumentTitle title="Ant Design - 一个 UI 设计语言">
|
||||
<DocumentTitle title={`Ant Design - ${props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
|
||||
<div className="main-wrapper">
|
||||
<Link />
|
||||
<Banner />
|
||||
@ -101,3 +102,5 @@ export default function Home() {
|
||||
</DocumentTitle>
|
||||
);
|
||||
}
|
||||
|
||||
export default injectIntl(Home);
|
||||
|
Loading…
Reference in New Issue
Block a user