Hangzhou
Shanghai
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index d573a96d7..a71288263 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -1,5 +1,6 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
+@import "../../style/mixins/index";
@radio-prefix-cls: ~"@{ant-prefix}-radio";
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@@ -7,13 +8,14 @@
@radio-duration: .3s;
.@{radio-group-prefix-cls} {
+ .reset-component;
display: inline-block;
- font-size: @font-size-base;
+ line-height: unset;
}
// 一般状态
.@{radio-prefix-cls}-wrapper {
- font-size: @font-size-base;
+ .reset-component;
display: inline-block;
position: relative;
white-space: nowrap;
@@ -22,6 +24,7 @@
}
.@{radio-prefix-cls} {
+ .reset-component;
white-space: nowrap;
outline: none;
display: inline-block;
@@ -55,11 +58,12 @@
}
&-inner {
&:after {
+ @radio-dot-size: @radio-size - 8px;
position: absolute;
- width: 6px;
- height: 6px;
- left: 3px;
- top: 3px;
+ width: @radio-dot-size;
+ height: @radio-dot-size;
+ left: (@radio-size - @radio-dot-size) / 2 - 1px;
+ top: (@radio-size - @radio-dot-size) / 2 - 1px;
border-radius: @border-radius-base;
display: table;
border-top: 0;
@@ -75,11 +79,11 @@
top: 0;
left: 0;
display: block;
- width: 14px;
- height: 14px;
+ width: @radio-size;
+ height: @radio-size;
border-width: 1px;
border-style: solid;
- border-radius: 14px;
+ border-radius: 100px;
border-color: @border-color-base;
background-color: @radio-button-bg;
transition: all @radio-duration;
@@ -102,7 +106,7 @@
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
&:after {
- transform: scale(1);
+ transform: scale(.875);
opacity: 1;
transition: all @radio-duration @ease-in-out-circ;
}
@@ -134,18 +138,20 @@ span.@{radio-prefix-cls} + * {
}
.@{radio-prefix-cls}-button-wrapper {
- float: left;
margin: 0;
- height: @input-height-base;
- line-height: @input-height-base - 2px;
+ height: @btn-height-base;
+ line-height: @btn-height-base - 2px;
color: @radio-button-color;
display: inline-block;
transition: all 0.3s ease;
cursor: pointer;
border: @border-width-base @border-style-base @border-color-base;
border-left: 0;
+ // strange align fix for chrome but works
+ // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
+ border-top-width: @border-width-base + 0.02px;
background: @radio-button-bg;
- padding: 0 16px;
+ padding: 0 @padding-md - 1px;
position: relative;
a {
@@ -162,18 +168,13 @@ span.@{radio-prefix-cls} + * {
.@{radio-group-prefix-cls}-large & {
height: @input-height-lg;
line-height: @input-height-lg - 2px;
+ font-size: @font-size-lg;
}
.@{radio-group-prefix-cls}-small & {
height: @input-height-sm;
line-height: @input-height-sm - 2px;
- padding: 0 12px;
- &:first-child {
- border-radius: @border-radius-sm 0 0 @border-radius-sm;
- }
- &:last-child {
- border-radius: 0 @border-radius-sm @border-radius-sm 0;
- }
+ padding: 0 @control-padding-horizontal-sm - 1px;
}
&:not(:first-child) {
@@ -210,7 +211,7 @@ span.@{radio-prefix-cls} + * {
.@{radio-prefix-cls}-inner,
input[type="checkbox"],
input[type="radio"] {
- .opacity(0);
+ opacity: 0;
width: 0;
height: 0;
}
diff --git a/components/style/color/bezierEasing.less b/components/style/color/bezierEasing.less
index bcad6c1dc..78d94d550 100644
--- a/components/style/color/bezierEasing.less
+++ b/components/style/color/bezierEasing.less
@@ -1,4 +1,4 @@
-/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
.bezierEasingMixin() {
@functions: ~`(function() {
var NEWTON_ITERATIONS = 4;
diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less
index 7c84cef7e..069991137 100644
--- a/components/style/color/colorPalette.less
+++ b/components/style/color/colorPalette.less
@@ -1,3 +1,4 @@
+/* stylelint-disable no-duplicate-selectors */
@import "bezierEasing";
@import "tinyColor";
@@ -7,36 +8,64 @@
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(function() {
- var warmDark = 0.5; // warm color darken radio
- var warmRotate = -26; // warm color rotate degree
- var coldDark = 0.55; // cold color darken radio
- var coldRotate = 10; // cold color rotate degree
- var getShadeColor = function(c) {
- var shadeColor = tinycolor(c);
- // warm and cold color will darken in different radio, and rotate in different degree
- // warmer color
- if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
- return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
+ var hueStep = 2;
+ var saturationStep = 16;
+ var saturationStep2 = 5;
+ var brightnessStep1 = 5;
+ var brightnessStep2 = 15;
+ var lightColorCount = 5;
+ var darkColorCount = 4;
+
+ var getHue = function(hsv, i, isLight) {
+ var hue;
+ if (hsv.h >= 60 && hsv.h <= 240) {
+ hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+ } else {
+ hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
}
- // colder color
- return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
- }
- var primaryEasing = colorEasing(0.6);
+ if (hue < 0) {
+ hue += 360;
+ } else if (hue >= 360) {
+ hue -= 360;
+ }
+ return Math.round(hue);
+ };
+ var getSaturation = function(hsv, i, isLight) {
+ var saturation;
+ if (isLight) {
+ saturation = Math.round(hsv.s * 100) - saturationStep * i;
+ } else if (i == darkColorCount) {
+ saturation = Math.round(hsv.s * 100) + saturationStep;
+ } else {
+ saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+ }
+ if (saturation > 100) {
+ saturation = 100;
+ }
+ if (isLight && i === lightColorCount && saturation > 10) {
+ saturation = 10;
+ }
+ if (saturation < 6) {
+ saturation = 6;
+ }
+ return Math.round(saturation);
+ };
+ var getValue = function(hsv, i, isLight) {
+ if (isLight) {
+ return Math.round(hsv.v * 100) + brightnessStep1 * i;
+ }
+ return Math.round(hsv.v * 100) - brightnessStep2 * i;
+ };
+
this.colorPalette = function(color, index) {
- var currentEasing = colorEasing(index * 0.1);
- // return light colors after tint
- if (index <= 6) {
- return tinycolor.mix(
- '#ffffff',
- color,
- currentEasing * 100 / primaryEasing
- ).toHexString();
- }
- return tinycolor.mix(
- getShadeColor(color),
- color,
- (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
- ).toHexString();
+ var isLight = index <= 6;
+ var hsv = tinycolor(color).toHsv();
+ var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+ return tinycolor({
+ h: getHue(hsv, i, isLight),
+ s: getSaturation(hsv, i, isLight),
+ v: getValue(hsv, i, isLight),
+ }).toHexString();
};
})()`;
}
diff --git a/components/style/color/colors.less b/components/style/color/colors.less
index 53f16229e..9793a86d2 100644
--- a/components/style/color/colors.less
+++ b/components/style/color/colors.less
@@ -6,7 +6,7 @@
@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
-@blue-6: #108ee9;
+@blue-6: #1890ff;
@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
@@ -17,7 +17,7 @@
@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
-@purple-6: #7265e6;
+@purple-6: #722ed1;
@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
@@ -28,7 +28,7 @@
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
-@cyan-6: #00a2ae;
+@cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
@@ -39,18 +39,30 @@
@green-3: color(~`colorPalette("@{green-6}", 3)`);
@green-4: color(~`colorPalette("@{green-6}", 4)`);
@green-5: color(~`colorPalette("@{green-6}", 5)`);
-@green-6: #00a854;
+@green-6: #52c41a;
@green-7: color(~`colorPalette("@{green-6}", 7)`);
@green-8: color(~`colorPalette("@{green-6}", 8)`);
@green-9: color(~`colorPalette("@{green-6}", 9)`);
@green-10: color(~`colorPalette("@{green-6}", 10)`);
+@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
+@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
+@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
+@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
+@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
+@magenta-6: #eb2f96;
+@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
+@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
+@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
+@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
+
+// alias of magenta
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
-@pink-6: #f5317f;
+@pink-6: #eb2f96;
@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
@@ -61,7 +73,7 @@
@red-3: color(~`colorPalette("@{red-6}", 3)`);
@red-4: color(~`colorPalette("@{red-6}", 4)`);
@red-5: color(~`colorPalette("@{red-6}", 5)`);
-@red-6: #f04134;
+@red-6: #f5222d;
@red-7: color(~`colorPalette("@{red-6}", 7)`);
@red-8: color(~`colorPalette("@{red-6}", 8)`);
@red-9: color(~`colorPalette("@{red-6}", 9)`);
@@ -72,7 +84,7 @@
@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
-@orange-6: #f56a00;
+@orange-6: #fa8c16;
@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
@@ -83,8 +95,52 @@
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
-@yellow-6: #ffbf00;
+@yellow-6: #fadb14;
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
+
+@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
+@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
+@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
+@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
+@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
+@volcano-6: #fa541c;
+@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
+@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
+@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
+@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
+
+@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
+@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
+@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
+@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
+@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
+@geekblue-6: #2f54eb;
+@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
+@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
+@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
+@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
+
+@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
+@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
+@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
+@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
+@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
+@lime-6: #a0d911;
+@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
+@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
+@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
+@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
+
+@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
+@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
+@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
+@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
+@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
+@gold-6: #faad14;
+@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
+@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
+@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
+@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
diff --git a/components/style/color/tinyColor.less b/components/style/color/tinyColor.less
index 00aad3931..570f0ce69 100644
--- a/components/style/color/tinyColor.less
+++ b/components/style/color/tinyColor.less
@@ -1,4 +1,4 @@
-/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
.tinyColorMixin() {
@functions: ~`(function() {
// TinyColor v1.4.1
diff --git a/components/style/core/base.less b/components/style/core/base.less
index d3d2149f1..050480a97 100644
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@@ -1,4 +1,11 @@
-@import "./normalize.less";
+/* stylelint-disable at-rule-no-unknown */
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// http://stackoverflow.com/a/13611748/3040605
@font-face {
@@ -7,14 +14,10 @@
unicode-range: U+30-39;
}
-* {
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
-}
-
-*:before,
-*:after {
- box-sizing: border-box;
+@font-face {
+ font-family: "Chinese Quote";
+ src: local("PingFang SC"), local("SimSun");
+ unicode-range: U+2018, U+2019, U+201c, U+201d;
}
// HTML & Body reset
@@ -22,58 +25,200 @@ html, body {
.square(100%);
}
-body {
- font-family: @font-family;
- font-size: @font-size-base;
- line-height: @line-height-base;
- color: @text-color;
- background-color: @body-background;
-}
-
-// unify the setting of elements's margin and padding for browsers
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
- margin: 0;
- padding: 0;
-}
-
-// Reset fonts for relevant elements
-button,input,select,textarea {
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- color: inherit;
- -webkit-appearance: none;
-}
-
-ul,
-ol {
- list-style: none;
-}
-
-// Remove the clear button of a text input control in IE10+
+// remove the clear button of a text input control in IE10+
input::-ms-clear, input::-ms-reveal {
display: none;
}
-::selection {
- background: @primary-color;
- color: #fff;
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 6. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box; // 1
}
-// Headers
+html {
+ font-family: sans-serif; // 2
+ line-height: 1.15; // 3
+ -webkit-text-size-adjust: 100%; // 4
+ -ms-text-size-adjust: 100%; // 4
+ -ms-overflow-style: scrollbar; // 5
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
+}
+
+// IE10+ doesn't honor `` in some cases.
+@at-root {
+ @-ms-viewport { width: device-width; }
+}
+
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+ display: block;
+}
+
+// Body
+//
+// 1. remove the margin in all browsers.
+// 2. As a best practice, apply a default `body-background`.
+
+body {
+ margin: 0; // 1
+ font-family: @font-family;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ color: @text-color;
+ background-color: @body-background; // 2
+}
+
+// Suppress the focus outline on elements that cannot be accessed via keyboard.
+// This prevents an unwanted focus outline from appearing around elements that
+// might still respond to pointer events.
+//
+// Credit: https://github.com/suitcss/base
+[tabindex="-1"]:focus {
+ outline: none !important;
+}
+
+// Content grouping
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+
+hr {
+ box-sizing: content-box; // 1
+ height: 0; // 1
+ overflow: visible; // 2
+}
+
+//
+// Typography
+//
+
+// remove top margins from headings
+//
+// By default, ``-`` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
h1, h2, h3, h4, h5, h6 {
+ margin-top: 0;
+ margin-bottom: .5em;
color: @heading-color;
font-weight: 500;
}
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `
`s get reset. However, we also reset the
+// bottom margin to use `em` units instead of `em`.
+p {
+ margin-top: 0;
+ margin-bottom: 1em;
+}
+
+// Abbreviations
+//
+// 1. remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+
+abbr[title],
+abbr[data-original-title] { // 4
+ text-decoration: underline; // 2
+ text-decoration: underline dotted; // 2
+ cursor: help; // 3
+ border-bottom: 0; // 1
+}
+
+address {
+ margin-bottom: 1em;
+ font-style: normal;
+ line-height: inherit;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="number"],
+textarea {
+ -webkit-appearance: none;
+}
+
+ol,
+ul,
+dl {
+ margin-top: 0;
+ margin-bottom: 1em;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+ margin-bottom: 0;
+}
+
+dt {
+ font-weight: 500;
+}
+
+dd {
+ margin-bottom: .5em;
+ margin-left: 0; // Undo browser default
+}
+
+blockquote {
+ margin: 0 0 1em;
+}
+
+dfn {
+ font-style: italic; // Add the correct font style in Android 4.3-
+}
+
+b,
+strong {
+ font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+ font-size: 80%; // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+//
// Links
+//
+
a {
color: @link-color;
- background: transparent;
+ background-color: transparent; // remove the gray background on active links in IE 10.
text-decoration: @link-decoration;
outline: none;
cursor: pointer;
- transition: color .3s ease;
+ transition: color .3s;
+ -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
&:focus {
text-decoration: underline;
@@ -101,19 +246,256 @@ a {
}
}
-.@{ant-prefix}-divider {
- margin: 0 6px;
- display: inline-block;
- height: 8px;
- width: 1px;
- background: #ccc;
-}
+//
+// Code
+//
+pre,
code,
kbd,
-pre,
samp {
font-family: @code-family;
+ font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+}
+
+pre {
+ // remove browser default top margin
+ margin-top: 0;
+ // Reset browser default of `1em` to use `em`s
+ margin-bottom: 1em;
+ // Don't allow content to break outside
+ overflow: auto;
+}
+
+//
+// Figures
+//
+figure {
+ // Apply a consistent margin strategy (matches our type styles).
+ margin: 0 0 1em;
+}
+
+//
+// Images and content
+//
+
+img {
+ vertical-align: middle;
+ border-style: none; // remove the border on images inside links in IE 10-.
+}
+
+svg:not(:root) {
+ overflow: hidden; // Hide the overflow in IE
+}
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `` is present.
+// However, they DO support emoving the click delay via `touch-action: manipulation`.
+// See:
+// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+ touch-action: manipulation;
+}
+
+//
+// Tables
+//
+
+table {
+ border-collapse: collapse; // Prevent double borders
+}
+
+caption {
+ padding-top: .75em;
+ padding-bottom: .3em;
+ color: @text-color-secondary;
+ text-align: left;
+ caption-side: bottom;
+}
+
+th {
+ // Matches default `
` alignment by inheriting from the ``, or the
+ // closest parent with a set `text-align`.
+ text-align: inherit;
+}
+
+//
+// Forms
+//
+
+input,
+button,
+select,
+optgroup,
+textarea {
+ margin: 0; // remove the margin in Firefox and Safari
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+}
+
+button,
+input {
+ overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+ text-transform: none; // remove the inheritance of text transform in Firefox
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+// controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; // 2
+}
+
+// remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+ padding: 0; // 2. remove the padding in IE 10-
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+ // remove the default appearance of temporal inputs to avoid a Mobile Safari
+ // bug where setting a custom line-height prevents text from being vertically
+ // centered within the input.
+ // See https://bugs.webkit.org/show_bug.cgi?id=139848
+ // and https://github.com/twbs/bootstrap/issues/11266
+ -webkit-appearance: listbox;
+}
+
+textarea {
+ overflow: auto; // remove the default vertical scrollbar in IE.
+ // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+ resize: vertical;
+}
+
+fieldset {
+ // Browsers set a default `min-width: min-content;` on fieldsets,
+ // unlike e.g. ` `s, which have `min-width: 0;` by default.
+ // So we reset that to ensure fieldsets behave more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/12359
+ // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+ min-width: 0;
+ // Reset the default outline behavior of fieldsets so they don't affect page layout.
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+ display: block;
+ width: 100%;
+ max-width: 100%; // 1
+ padding: 0;
+ margin-bottom: .5em;
+ font-size: 1.5em;
+ line-height: inherit;
+ color: inherit; // 2
+ white-space: normal; // 1
+}
+
+progress {
+ vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of incement and decement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+[type="search"] {
+ // This overrides the extra rounded corners on search inputs in iOS so that our
+ // `.form-control` class can properly style them. Note that this cannot simply
+ // be added to `.form-control` as it's not specific enough. For details, see
+ // https://github.com/twbs/bootstrap/issues/11586.
+ outline-offset: -2px; // 2. Correct the outline style in Safari.
+ -webkit-appearance: none;
+}
+
+//
+// remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+ font: inherit; // 2
+ -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+ display: inline-block;
+}
+
+summary {
+ display: list-item; // Add the correct display in all browsers
+}
+
+template {
+ display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+ display: none !important;
+}
+
+mark {
+ padding: .2em;
+ background-color: @yellow-1;
+}
+
+::selection {
+ background: @primary-color;
+ color: #fff;
}
// Utility classes
diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less
index a62853fcd..57e36acae 100644
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@@ -6,8 +6,6 @@
font-family: 'anticon';
src: url('@{icon-url}.eot'); /* IE9*/
src:
- /* IE6-IE8 */
- url('@{icon-url}.eot?#iefix') format('embedded-opentype'),
/* chrome、firefox */
url('@{icon-url}.woff') format('woff'),
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
@@ -97,7 +95,6 @@
.@{iconfont-css-prefix}-credit-card:before { content: "\e635"; }
.@{iconfont-css-prefix}-code-o:before { content: "\e636"; }
.@{iconfont-css-prefix}-book:before { content: "\e637"; }
-.@{iconfont-css-prefix}-bar-chart:before { content: "\e638"; }
.@{iconfont-css-prefix}-bars:before { content: "\e639"; }
.@{iconfont-css-prefix}-question:before { content: "\e63a"; }
.@{iconfont-css-prefix}-question-circle:before { content: "\e63b"; }
@@ -115,7 +112,7 @@
.@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown
.@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; }
.@{iconfont-css-prefix}-copy:before { content: "\e648"; }
-.@{iconfont-css-prefix}-menu-fold:before { content: "\e658"; }
+.@{iconfont-css-prefix}-menu-fold:before { content: "\e9ac"; }
.@{iconfont-css-prefix}-mail:before { content: "\e659"; }
.@{iconfont-css-prefix}-logout:before { content: "\e65a"; }
.@{iconfont-css-prefix}-link:before { content: "\e65b"; }
@@ -149,7 +146,7 @@
.@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; }
.@{iconfont-css-prefix}-notification:before { content: "\e677"; }
.@{iconfont-css-prefix}-mobile:before { content: "\e678"; }
-.@{iconfont-css-prefix}-menu-unfold:before { content: "\e679"; }
+.@{iconfont-css-prefix}-menu-unfold:before { content: "\e9ad"; }
.@{iconfont-css-prefix}-inbox:before { content: "\e67a"; }
.@{iconfont-css-prefix}-lock:before { content: "\e67b"; }
.@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; }
@@ -295,7 +292,38 @@
.@{iconfont-css-prefix}-global:before { content: "\e6f1"; }
.@{iconfont-css-prefix}-shake:before { content: "\e94f"; }
.@{iconfont-css-prefix}-fork:before { content: "\e6f2"; }
+.@{iconfont-css-prefix}-dashboard:before { content: "\e99a"; }
+.@{iconfont-css-prefix}-profile:before { content: "\e999"; }
+.@{iconfont-css-prefix}-table:before { content: "\e998"; }
+.@{iconfont-css-prefix}-warning:before { content: "\e997"; }
+.@{iconfont-css-prefix}-form:before { content: "\e996"; }
.@{iconfont-css-prefix}-spin:before {
display: inline-block;
animation: loadingCircle 1s infinite linear;
}
+
+.@{iconfont-css-prefix}-weibo-square:before { content: "\e6f5"; }
+.@{iconfont-css-prefix}-weibo-circle:before { content: "\e6f4"; }
+.@{iconfont-css-prefix}-taobao-circle:before { content: "\e6f3"; }
+.@{iconfont-css-prefix}-html5:before { content: "\e9c7"; }
+.@{iconfont-css-prefix}-weibo:before { content: "\e9c6"; }
+.@{iconfont-css-prefix}-twitter:before { content: "\e9c5"; }
+.@{iconfont-css-prefix}-wechat:before { content: "\e9c4"; }
+.@{iconfont-css-prefix}-youtube:before { content: "\e9c3"; }
+.@{iconfont-css-prefix}-alipay-circle:before { content: "\e9c2"; }
+.@{iconfont-css-prefix}-taobao:before { content: "\e9c1"; }
+.@{iconfont-css-prefix}-skype:before { content: "\e9c0"; }
+.@{iconfont-css-prefix}-qq:before { content: "\e9bf"; }
+.@{iconfont-css-prefix}-medium-workmark:before { content: "\e9be"; }
+.@{iconfont-css-prefix}-gitlab:before { content: "\e9bd"; }
+.@{iconfont-css-prefix}-medium:before { content: "\e9bc"; }
+.@{iconfont-css-prefix}-linkedin:before { content: "\e9bb"; }
+.@{iconfont-css-prefix}-google-plus:before { content: "\e9ba"; }
+.@{iconfont-css-prefix}-dropbox:before { content: "\e9b9"; }
+.@{iconfont-css-prefix}-facebook:before { content: "\e9b8"; }
+.@{iconfont-css-prefix}-codepen:before { content: "\e9b7"; }
+.@{iconfont-css-prefix}-amazon:before { content: "\e9b6"; }
+.@{iconfont-css-prefix}-google:before { content: "\e9b5"; }
+.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
+.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
+.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }
diff --git a/components/style/core/normalize.less b/components/style/core/normalize.less
deleted file mode 100644
index bfc3448ea..000000000
--- a/components/style/core/normalize.less
+++ /dev/null
@@ -1,447 +0,0 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
- ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- * IE on Windows Phone and in iOS.
- */
-
-html {
- line-height: 1.15; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
- -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
- ========================================================================== */
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
- margin: 0;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-article,
-aside,
-footer,
-header,
-nav,
-section {
- display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-
-/* Grouping content
- ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
- display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
- margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
- box-sizing: content-box; /* 1 */
- height: 0; /* 1 */
- overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
- font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */
- font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
- ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
- background-color: transparent; /* 1 */
- -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
- border-bottom: none; /* 1 */
- text-decoration: underline; /* 2 */
- text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
- font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
- font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
- font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */
- font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
- font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
- background-color: #ff0;
- color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
- font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-sup {
- top: -0.5em;
-}
-
-/* Embedded content
- ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
- display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
- border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
- overflow: hidden;
-}
-
-/* Forms
- ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
- font-family: sans-serif; /* 1 */
- font-size: 100%; /* 1 */
- line-height: 1.15; /* 1 */
- margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
- overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
- text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- * controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
- -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
- border-style: none;
- padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
- outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
- padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- * `fieldset` elements in all browsers.
- */
-
-legend {
- box-sizing: border-box; /* 1 */
- color: inherit; /* 2 */
- display: table; /* 1 */
- max-width: 100%; /* 1 */
- padding: 0; /* 3 */
- white-space: normal; /* 1 */
-}
-
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
- overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
- -webkit-appearance: textfield; /* 1 */
- outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
- -webkit-appearance: button; /* 1 */
- font: inherit; /* 2 */
-}
-
-/* Interactive
- ========================================================================== */
-
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
-
-details, /* 1 */
-menu {
- display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
- display: list-item;
-}
-
-/* Scripting
- ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- */
-
-canvas {
- display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
- */
-
-template {
- display: none;
-}
-
-/* Hidden
- ========================================================================== */
-
-/**
- * Add the correct display in IE 10-.
- */
-
-[hidden] {
- display: none;
-}
diff --git a/components/style/index.js b/components/style/index.js
index 1526e4dff..d74e52ee9 100644
--- a/components/style/index.js
+++ b/components/style/index.js
@@ -1 +1 @@
-import './index.less'
+import './index.less';
diff --git a/components/style/mixins/compatibility.less b/components/style/mixins/compatibility.less
index 7e1202af4..89269ebfb 100644
--- a/components/style/mixins/compatibility.less
+++ b/components/style/mixins/compatibility.less
@@ -1,32 +1,5 @@
// Compatibility for browsers.
-// rotate for ie8 and blow
-.ie-rotate(@rotation) {
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
-}
-
-// rotate for ie8 and blow
-// degrees unit
-.ie-rotate-via-degrees(@degrees) {
- /* IE6-IE8 */
- @radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`;
- @costheta: ~`Math.cos("@{radians}")`;
- @sintheta: ~`Math.sin("@{radians}")`;
- @negsintheta: ~`"@{sintheta}" * -1`;
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";
- zoom: 1;
-
- :root & {
- filter: none;
- }
-}
-
-// support rotate for all browsers
-.cross-rotate(@degrees) {
- .rotate(@degrees);
- .ie-rotate-via-degrees(@degrees);
-}
-
// Placeholder text
.placeholder(@color: @input-placeholder-color) {
// Firefox
diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less
index cb85ddb51..f7ed4f96b 100644
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@@ -27,12 +27,11 @@
.iconfont-size-under-12px(@size, @rotate: 0deg) {
display: inline-block;
@font-scale: unit(@size / 12px);
- font-size: @font-size-base;
- // ie8-9
+ font-size: 12px;
+ // IE9
font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
transform: scale(@font-scale) rotate(@rotate);
- .ie-rotate-via-degrees(@rotate);
:root & {
- font-size: @font-size-base; // reset ie9 and above
+ font-size: @font-size-sm; // reset IE9 and above
}
}
diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less
index 2c86242c6..ccf2212a6 100644
--- a/components/style/mixins/index.less
+++ b/components/style/mixins/index.less
@@ -1,6 +1,5 @@
// Mixins
// --------------------------------------------------
-@import "opacity";
@import "size";
@import "compatibility";
@import "clearfix";
diff --git a/components/style/mixins/motion.less b/components/style/mixins/motion.less
index 411143c7f..84b2c82eb 100644
--- a/components/style/mixins/motion.less
+++ b/components/style/mixins/motion.less
@@ -20,22 +20,11 @@
.motion-common-leave(@duration);
animation-play-state: paused;
}
- .@{className}-enter-active,
- .@{className}-appear-active {
- animation-name: ~"@{keyframeName}In";
- animation-play-state: running;
- .motion-common(@duration);
- }
.@{className}-enter.@{className}-enter-active,
.@{className}-appear.@{className}-appear-active {
animation-name: ~"@{keyframeName}In";
animation-play-state: running;
}
- .@{className}-leave-active {
- animation-name: ~"@{keyframeName}Out";
- animation-play-state: running;
- .motion-common(@duration);
- }
.@{className}-leave.@{className}-leave-active {
animation-name: ~"@{keyframeName}Out";
animation-play-state: running;
diff --git a/components/style/mixins/opacity.less b/components/style/mixins/opacity.less
deleted file mode 100644
index 33ed25ce6..000000000
--- a/components/style/mixins/opacity.less
+++ /dev/null
@@ -1,8 +0,0 @@
-// Opacity
-
-.opacity(@opacity) {
- opacity: @opacity;
- // IE8 filter
- @opacity-ie: (@opacity * 100);
- filter: ~"alpha(opacity=@{opacity-ie})";
-}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index e68c83ebd..7cccc45ce 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -8,9 +8,10 @@
@primary-color : @blue-6;
@info-color : @blue-6;
@success-color : @green-6;
+@processing-color : @primary-color;
@error-color : @red-6;
@highlight-color : @red-6;
-@warning-color : @yellow-6;
+@warning-color : @gold-6;
@normal-color : #d9d9d9;
// Color used by default to control hover and active backgrounds and for
@@ -33,16 +34,16 @@
@body-background : #fff;
// Base background color for most components
@component-background : #fff;
-@font-family-no-number : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family : "Helvetica Neue For Number", @font-family-no-number;
@code-family : Consolas, Menlo, Courier, monospace;
@heading-color : fade(#000, 85%);
@text-color : fade(#000, 65%);
-@text-color-secondary : fade(#000, 43%);
-@heading-color-dark : fade(#fff, 97%);
-@text-color-dark : fade(#fff, 91%);
-@text-color-secondary-dark: fade(#fff, 67%);
-@font-size-base : 12px;
+@text-color-secondary : fade(#000, 45%);
+@heading-color-dark : fade(#fff, 100%);
+@text-color-dark : fade(#fff,85%);
+@text-color-secondary-dark: fade(#fff, 65%);
+@font-size-base : 14px;
@font-size-lg : @font-size-base + 2px;
@font-size-sm : 12px;
@line-height-base : 1.5;
@@ -66,7 +67,7 @@
// ICONFONT
@iconfont-css-prefix : anticon;
-@icon-url : "https://at.alicdn.com/t/font_zck90zmlh7hf47vi";
+@icon-url : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi";
// LINK
@link-color : @primary-color;
@@ -90,8 +91,8 @@
@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
// Border color
-@border-color-base : #d9d9d9; // base border outline a component
-@border-color-split : #e9e9e9; // split border inside a component
+@border-color-base : hsv(0, 0, 85%); // base border outline a component
+@border-color-split : hsv(0, 0, 91%); // split border inside a component
@border-width-base : 1px; // width of the border for a component
@border-style-base : solid; // style of a components border
@@ -100,10 +101,8 @@
@outline-width : 2px;
@outline-color : @primary-color;
-// Default background color for disabled states, Collapse wrappers,
-// and several active and hover states.
-@background-color-base : #f7f7f7;
-@background-color-active: #eee;
+@background-color-light : hsv(0, 0, 98%); // background of header and selected item
+@background-color-base : hsv(0, 0, 96%); // Default grey background color
// Disabled states
@disabled-color : fade(#000, 25%);
@@ -111,16 +110,16 @@
@disabled-color-dark : fade(#fff, 35%);
// Shadow
-@shadow-color : rgba(0, 0, 0, .2);
+@shadow-color : rgba(0, 0, 0, .15);
@box-shadow-base : @shadow-1-down;
-@shadow-1-up : 0 -1px 6px @shadow-color;
-@shadow-1-down : 0 1px 6px @shadow-color;
-@shadow-1-left : -1px 0 6px @shadow-color;
-@shadow-1-right : 1px 0 6px @shadow-color;
-@shadow-2 : 0 2px 8px @shadow-color;
+@shadow-1-up : 0 2px 8px @shadow-color;
+@shadow-1-down : 0 2px 8px @shadow-color;
+@shadow-1-left : -2px 0 8px @shadow-color;
+@shadow-1-right : 2px 0 8px @shadow-color;
+@shadow-2 : 0 4px 12px @shadow-color;
// Buttons
-@btn-font-weight : 500;
+@btn-font-weight : 400;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm : @border-radius-base;
@@ -139,23 +138,27 @@
@btn-disable-bg : @disabled-bg;
@btn-disable-border : @border-color-base;
-@btn-padding-base : 0 15px;
+@btn-padding-base : 0 @padding-md - 1px;
@btn-font-size-lg : @font-size-lg;
+@btn-font-size-sm : @font-size-base;
@btn-padding-lg : @btn-padding-base;
-@btn-padding-sm : 0 7px;
+@btn-padding-sm : 0 @padding-xs - 1px;
-@btn-height-base : 28px;
-@btn-height-lg : 32px;
-@btn-height-sm : 22px;
+@btn-height-base : 32px;
+@btn-height-lg : 40px;
+@btn-height-sm : 24px;
@btn-circle-size : @btn-height-base;
@btn-circle-size-lg : @btn-height-lg;
@btn-circle-size-sm : @btn-height-sm;
-@btn-group-border : @primary-7;
+@btn-group-border : @primary-5;
// Checkbox
-@checkbox-size : 14px;
+@checkbox-size : 16px;
+
+// Radio
+@radio-size : 16px;
// Radio buttons
@radio-button-bg : @btn-default-bg;
@@ -167,41 +170,46 @@
@screen-xs-min : @screen-xs;
// Small screen / tablet
-@screen-sm : 768px;
+@screen-sm : 576px;
@screen-sm-min : @screen-sm;
// Medium screen / desktop
-@screen-md : 992px;
+@screen-md : 768px;
@screen-md-min : @screen-md;
// Large screen / wide desktop
-@screen-lg : 1200px;
+@screen-lg : 992px;
@screen-lg-min : @screen-lg;
-// Extra Large screen / full hd
-@screen-xl : 1600px;
+// Extra large screen / full hd
+@screen-xl : 1200px;
@screen-xl-min : @screen-xl;
+// Extra extra large screen / large descktop
+@screen-xxl : 1600px;
+@screen-xxl-min : @screen-xxl;
+
// provide a maximum
@screen-xs-max : (@screen-sm-min - 1px);
@screen-sm-max : (@screen-md-min - 1px);
@screen-md-max : (@screen-lg-min - 1px);
@screen-lg-max : (@screen-xl-min - 1px);
+@screen-xl-max : (@screen-xxl-min - 1px);
// Grid system
@grid-columns : 24;
@grid-gutter-width : 0;
// Layout
-@layout-body-background : #ececec;
-@layout-header-background : #404040;
+@layout-body-background : #f0f2f5;
+@layout-header-background : #001529;
@layout-footer-background : @layout-body-background;
@layout-header-height : 64px;
@layout-header-padding : 0 50px;
@layout-footer-padding : 24px 50px;
@layout-sider-background : @layout-header-background;
@layout-trigger-height : 48px;
-@layout-trigger-background : tint(@heading-color, 20%);
+@layout-trigger-background : #002140;
@layout-trigger-color : #fff;
@layout-zero-trigger-width : 36px;
@layout-zero-trigger-height : 42px;
@@ -234,23 +242,23 @@
// Input
// ---
-@input-height-base : 28px;
-@input-height-lg : 32px;
-@input-height-sm : 22px;
-@input-padding-horizontal : 7px;
-@input-padding-horizontal-base : @input-padding-horizontal;
-@input-padding-horizontal-sm : @input-padding-horizontal;
-@input-padding-horizontal-lg : @input-padding-horizontal;
-@input-padding-vertical-base : 4px;
-@input-padding-vertical-sm : 1px;
-@input-padding-vertical-lg : 6px;
-@input-placeholder-color : hsv(0, 0, 75%);
-@input-color : @text-color;
-@input-border-color : @border-color-base;
-@input-bg : #fff;
-@input-addon-bg : #eee;
-@input-hover-border-color : @primary-color;
-@input-disabled-bg : @disabled-bg;
+@input-height-base : 32px;
+@input-height-lg : 40px;
+@input-height-sm : 24px;
+@input-padding-horizontal : @control-padding-horizontal - 1px;
+@input-padding-horizontal-base: @input-padding-horizontal;
+@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
+@input-padding-horizontal-lg : @input-padding-horizontal;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-sm : 1px;
+@input-padding-vertical-lg : 6px;
+@input-placeholder-color : hsv(0, 0, 75%);
+@input-color : @text-color;
+@input-border-color : @border-color-base;
+@input-bg : #fff;
+@input-addon-bg : @background-color-light;
+@input-hover-border-color : @primary-color;
+@input-disabled-bg : @disabled-bg;
// Tooltip
// ---
@@ -276,30 +284,29 @@
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
-@popover-arrow-width: 4px;
+@popover-arrow-width: 5px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1px);
//** Popover outer arrow color
-@popover-arrow-outer-color: fadeout(@border-color-base, 30%);
+@popover-arrow-outer-color: @popover-bg;
//** Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;
// Modal
// --
-@modal-mask-bg: rgba(55, 55, 55, 0.6);
+@modal-mask-bg: rgba(0, 0, 0, 0.65);
// Progress
// --
-@process-default-color: @primary-color;
+@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
// Menu
// ---
@menu-dark-bg: @layout-header-background;
-@menu-dark-submenu-bg: #333;
-@menu-collapsed-width: 64px;
+@menu-dark-submenu-bg: #000c17;
+@menu-collapsed-width: 80px;
// Spin
// ---
@@ -309,18 +316,18 @@
// Table
// --
-@table-header-bg: @background-color-base;
-@table-header-sort-bg: @background-color-active;
+@table-header-bg: @background-color-light;
+@table-header-sort-bg: @background-color-base;
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-padding-vertical: 16px;
-@table-padding-horizontal: 8px;
+@table-padding-horizontal: 16px;
// Tag
// --
-@tag-default-bg: #f3f3f3;
+@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
-@tag-font-size: @font-size-base;
+@tag-font-size: @font-size-sm;
// TimePicker
// ---
@@ -337,31 +344,40 @@
// Badge
// ---
@badge-height: 20px;
-@badge-dot-size: 8px;
-@badge-font-size: @font-size-base;
+@badge-dot-size: 6px;
+@badge-font-size: @font-size-sm;
+@badge-status-size: 6px;
// Rate
// ---
-@rate-star-color: #f5a623;
-@rate-star-bg: #e9e9e9;
+@rate-star-color: @yellow-6;
+@rate-star-bg: @border-color-split;
// Card
// ---
-@card-head-height: 48px;
@card-head-color: @heading-color;
@card-head-background: @component-background;
+@card-head-padding: 16px;
+@card-inner-head-padding: 12px;
+@card-padding-base: 24px;
+@card-padding-wider: 32px;
+@card-actions-background: @background-color-light;
+@card-shadow: 0 2px 8px rgba(0, 0, 0, .09);
// Tabs
// ---
-@tabs-card-head-background: #f9f9f9;
-@tabs-title-font-size: @font-size-lg;
+@tabs-card-head-background: @background-color-light;
+@tabs-card-height: 40px;
+@tabs-title-font-size: @font-size-base;
// BackTop
+// ---
@back-top-color: #fff;
-@back-top-bg: rgba(64, 64, 64, 0.4);
-@back-top-hover-bg: rgba(64, 64, 64, 0.6);
+@back-top-bg: @text-color-secondary;
+@back-top-hover-bg: @text-color;
// Avatar
+// ---
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@@ -371,3 +387,15 @@
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;
+
+// Switch
+// ---
+@switch-height: 22px;
+@switch-sm-height: 16px;
+@switch-disabled-opacity: 0.4;
+@switch-color: @primary-color;
+
+// Pagination
+// ---
+@pagination-item-size: 32px;
+@pagination-item-size-sm: 24px;
diff --git a/components/style/v2-compatible-reset.js b/components/style/v2-compatible-reset.js
new file mode 100644
index 000000000..8fed6241d
--- /dev/null
+++ b/components/style/v2-compatible-reset.js
@@ -0,0 +1 @@
+import './v2-compatible-reset.less';
diff --git a/components/style/v2-compatible-reset.less b/components/style/v2-compatible-reset.less
new file mode 100644
index 000000000..c60350ebb
--- /dev/null
+++ b/components/style/v2-compatible-reset.less
@@ -0,0 +1,14 @@
+// For 2.x reset compatibility
+// import 'antd/style/v2-compatible-reset';
+// or
+// @import '~antd/style/v2-compatible-reset.css';
+// unify the setting of elements's margin and padding for browsers
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+ margin: 0;
+ padding: 0;
+}
+
+ul,
+ol {
+ list-style: none;
+}
diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
index 7c3e25ca9..174fccc16 100644
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@@ -1,33 +1,32 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
+
@tab-prefix-cls: ~"@{ant-prefix}-tabs";
// card style
.@{tab-prefix-cls} {
&&-card > &-bar &-nav-container {
- height: 32px;
+ height: @tabs-card-height;
}
&&-card > &-bar &-ink-bar {
visibility: hidden;
}
&&-card > &-bar &-tab {
margin: 0;
- border: @border-width-base @border-style-base @border-color-base;
+ border: @border-width-base @border-style-base @border-color-split;
border-bottom: 0;
border-radius: @border-radius-base @border-radius-base 0 0;
- transition: all 0.3s @ease-in-out;
background: @tabs-card-head-background;
margin-right: 2px;
- }
- &&-card > &-bar &-tab {
- padding: 5px 16px 4px;
+ padding: 0 16px;
transition: all 0.3s @ease-in-out;
+ line-height: @tabs-card-height - 2px;
}
&&-card > &-bar &-tab-active {
background: @component-background;
- border-color: @border-color-base;
+ border-color: @border-color-split;
color: @primary-color;
- padding-bottom: 5px;
+ padding-bottom: 1px;
}
&&-card > &-bar &-tab-inactive {
padding: 0;
@@ -38,19 +37,14 @@
&&-card > &-bar &-tab .@{iconfont-css-prefix}-close {
color: @text-color-secondary;
transition: all .3s;
- .iconfont-size-under-12px(10px);
- margin-right: 0;
- opacity: 0;
- position: absolute;
- right: 2px;
- top: 50%;
- margin-top: -5px;
+ font-size: @font-size-sm;
+ margin-left: 3px;
+ margin-right: -5px;
overflow: hidden;
- text-align: center;
- border-radius: 2px;
- width: 14px;
- height: 14px;
- line-height: 1;
+ vertical-align: middle;
+ width: 16px;
+ height: 16px;
+ height: @font-size-base;
&:hover {
color: @heading-color;
}
@@ -69,7 +63,7 @@
}
&-extra-content {
- line-height: 32px;
+ line-height: @tabs-card-height;
.@{tab-prefix-cls}-new-tab {
width: 20px;
@@ -77,11 +71,10 @@
line-height: 20px;
text-align: center;
cursor: pointer;
- border-radius: @border-radius-base;
- border: @border-width-base @border-style-base @border-color-base;
- font-size: @font-size-base;
- .iconfont-size-under-12px(10px);
- color: @text-color-secondary;
+ border-radius: @border-radius-sm;
+ border: @border-width-base @border-style-base @border-color-split;
+ font-size: 12px;
+ color: @text-color;
transition: all .3s;
&:hover {
color: @primary-color;
@@ -96,7 +89,7 @@
height: auto;
}
.@{tab-prefix-cls}-tab {
- border-bottom: @border-width-base @border-style-base @border-color-base;
+ border-bottom: @border-width-base @border-style-base @border-color-split;
margin-bottom: 8px;
&-active {
padding-bottom: 4px;
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index a15b4bc16..160d2fcf7 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -5,11 +5,10 @@
@import "./card-style";
.@{tab-prefix-cls} {
- box-sizing: border-box;
+ .reset-component;
position: relative;
overflow: hidden;
.clearfix;
- color: @text-color;
&-ink-bar {
z-index: 1;
@@ -23,7 +22,7 @@
}
&-bar {
- border-bottom: @border-width-base @border-style-base @border-color-base;
+ border-bottom: @border-width-base @border-style-base @border-color-split;
margin-bottom: 16px;
outline: none;
transition: padding .3s @ease-in-out;
@@ -52,7 +51,6 @@
z-index: 2;
width: 0;
height: 100%;
- line-height: 32px;
cursor: pointer;
border: 0;
background-color: transparent;
@@ -159,7 +157,7 @@
.@{tab-prefix-cls}-tab {
display: inline-block;
height: 100%;
- margin-right: 24px;
+ margin-right: 32px;
box-sizing: border-box;
position: relative;
@@ -167,7 +165,7 @@
margin-right: 0;
}
- padding: 8px 20px;
+ padding: 12px 16px;
transition: color 0.3s @ease-in-out;
cursor: pointer;
text-decoration: none;
@@ -179,24 +177,31 @@
&:active {
color: @primary-7;
}
+
.@{iconfont-css-prefix} {
- width: 14px;
- height: 14px;
margin-right: 8px;
}
}
.@{tab-prefix-cls}-tab-active {
color: @primary-color;
+ font-weight: 500;
}
}
- &-mini &-nav-container {
+ &-large &-nav-container {
+ font-size: @font-size-lg;
+ }
+
+ &-large &-tab {
+ padding: 16px;
+ }
+
+ &-small &-nav-container {
font-size: @font-size-base;
}
- &-mini &-tab {
- margin-right: 0;
+ &-small &-tab {
padding: 8px 16px;
}
@@ -288,15 +293,7 @@
height: auto;
top: 0;
}
- }
- > .@{tab-prefix-cls}-content {
- overflow: hidden;
- width: auto;
- margin-top: 0 !important;
- }
-
- > .@{tab-prefix-cls}-bar {
.@{tab-prefix-cls}-tab-next {
width: 100%;
bottom: 0;
@@ -315,6 +312,12 @@
}
}
}
+
+ > .@{tab-prefix-cls}-content {
+ overflow: hidden;
+ width: auto;
+ margin-top: 0 !important;
+ }
}
&-vertical&-left {
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index dae1ed5bb..39cc525a5 100644
--- a/components/tooltip/style/index.less
+++ b/components/tooltip/style/index.less
@@ -5,12 +5,11 @@
// Base class
.@{tooltip-prefix-cls} {
+ .reset-component;
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
- font-size: @font-size-base;
- line-height: @line-height-base;
&-hidden {
display: none;
@@ -36,31 +35,29 @@
&-placement-leftBottom {
padding-right: @tooltip-distance;
}
-}
-// Wrapper for the tooltip content
-.@{tooltip-prefix-cls}-inner {
- max-width: @tooltip-max-width;
- padding: 8px 10px;
- color: @tooltip-color;
- text-align: left;
- text-decoration: none;
- background-color: @tooltip-bg;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- min-height: 34px;
-}
+ // Wrapper for the tooltip content
+ &-inner {
+ max-width: @tooltip-max-width;
+ padding: 6px 8px;
+ color: @tooltip-color;
+ text-align: left;
+ text-decoration: none;
+ background-color: @tooltip-bg;
+ border-radius: @border-radius-base;
+ box-shadow: @box-shadow-base;
+ min-height: 32px;
+ }
-// Arrows
-.@{tooltip-prefix-cls}-arrow {
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
-}
+ // Arrows
+ &-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ }
-.@{tooltip-prefix-cls} {
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
diff --git a/examples/routes.js b/examples/routes.js
index e34276ff7..03faeafb0 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
const com = pathnameArr[1] || 'button'
const demo = pathnameArr[2] || 'index'
return {
- component: import(`../components/${com}/demo/${demo}.vue`),
+ component: import(`../components/radio/demo/${demo}.vue`),
}
}
export default [
|