;
10 | let context: TestNGComponent;
11 |
12 | beforeEach(() => {
13 | TestBed.configureTestingModule({
14 | declarations: [TestNGComponent],
15 | imports: [NzListModule]
16 | });
17 | TestBed.overrideComponent(TestNGComponent, {set: {template: html}});
18 | fixture = TestBed.createComponent(TestNGComponent);
19 | context = fixture.componentInstance;
20 | fixture.detectChanges();
21 | });
22 |
23 | it('fixture should not be null', () => {
24 | expect(fixture).not.toBeNull();
25 | });
26 | });
27 |
28 | @Component({
29 | selector: 'ng-zorro-antd-extra-test',
30 | template: ''
31 | })
32 | class TestNGComponent {
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/color/bezierEasing.less:
--------------------------------------------------------------------------------
1 | /* stylelint-disable declaration-bang-space-before */
2 | .bezierEasingMixin() {
3 | @functions: ~`(function() {
4 | var NEWTON_ITERATIONS = 4;
5 | var NEWTON_MIN_SLOPE = 0.001;
6 | var SUBDIVISION_PRECISION = 0.0000001;
7 | var SUBDIVISION_MAX_ITERATIONS = 10;
8 |
9 | var kSplineTableSize = 11;
10 | var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
11 |
12 | var float32ArraySupported = typeof Float32Array === 'function';
13 |
14 | function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
15 | function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
16 | function C (aA1) { return 3.0 * aA1; }
17 |
18 | // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
19 | function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
20 |
21 | // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
22 | function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
23 |
24 | function binarySubdivide (aX, aA, aB, mX1, mX2) {
25 | var currentX, currentT, i = 0;
26 | do {
27 | currentT = aA + (aB - aA) / 2.0;
28 | currentX = calcBezier(currentT, mX1, mX2) - aX;
29 | if (currentX > 0.0) {
30 | aB = currentT;
31 | } else {
32 | aA = currentT;
33 | }
34 | } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
35 | return currentT;
36 | }
37 |
38 | function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
39 | for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
40 | var currentSlope = getSlope(aGuessT, mX1, mX2);
41 | if (currentSlope === 0.0) {
42 | return aGuessT;
43 | }
44 | var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
45 | aGuessT -= currentX / currentSlope;
46 | }
47 | return aGuessT;
48 | }
49 |
50 | var BezierEasing = function (mX1, mY1, mX2, mY2) {
51 | if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
52 | throw new Error('bezier x values must be in [0, 1] range');
53 | }
54 |
55 | // Precompute samples table
56 | var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
57 | if (mX1 !== mY1 || mX2 !== mY2) {
58 | for (var i = 0; i < kSplineTableSize; ++i) {
59 | sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
60 | }
61 | }
62 |
63 | function getTForX (aX) {
64 | var intervalStart = 0.0;
65 | var currentSample = 1;
66 | var lastSample = kSplineTableSize - 1;
67 |
68 | for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
69 | intervalStart += kSampleStepSize;
70 | }
71 | --currentSample;
72 |
73 | // Interpolate to provide an initial guess for t
74 | var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
75 | var guessForT = intervalStart + dist * kSampleStepSize;
76 |
77 | var initialSlope = getSlope(guessForT, mX1, mX2);
78 | if (initialSlope >= NEWTON_MIN_SLOPE) {
79 | return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
80 | } else if (initialSlope === 0.0) {
81 | return guessForT;
82 | } else {
83 | return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
84 | }
85 | }
86 |
87 | return function BezierEasing (x) {
88 | if (mX1 === mY1 && mX2 === mY2) {
89 | return x; // linear
90 | }
91 | // Because JavaScript number are imprecise, we should guarantee the extremes are right.
92 | if (x === 0) {
93 | return 0;
94 | }
95 | if (x === 1) {
96 | return 1;
97 | }
98 | return calcBezier(getTForX(x), mY1, mY2);
99 | };
100 | };
101 |
102 | this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
103 | })()`;
104 | }
105 | // It is hacky way to make this function will be compiled preferentially by less
106 | // resolve error: `ReferenceError: colorPalette is not defined`
107 | // https://github.com/ant-design/ant-motion/issues/44
108 | .bezierEasingMixin();
109 |
--------------------------------------------------------------------------------
/src/style/color/colorPalette.less:
--------------------------------------------------------------------------------
1 | @import "bezierEasing";
2 | @import "tinyColor";
3 |
4 | // We create a very complex algorithm which take the place of original tint/shade color system
5 | // to make sure no one can understand it 👻
6 | // and create an entire color palette magicly by inputing just a single primary color.
7 | // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
8 | .colorPaletteMixin() {
9 | @functions: ~`(function() {
10 | var hueStep = 2;
11 | var saturationStep = 16;
12 | var saturationStep2 = 5;
13 | var brightnessStep1 = 5;
14 | var brightnessStep2 = 15;
15 | var lightColorCount = 5;
16 | var darkColorCount = 4;
17 |
18 | var getHue = function(hsv, i, isLight) {
19 | var hue;
20 | if (hsv.h >= 60 && hsv.h <= 240) {
21 | hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
22 | } else {
23 | hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
24 | }
25 | if (hue < 0) {
26 | hue += 360;
27 | } else if (hue >= 360) {
28 | hue -= 360;
29 | }
30 | return Math.round(hue);
31 | };
32 | var getSaturation = function(hsv, i, isLight) {
33 | var saturation;
34 | if (isLight) {
35 | saturation = Math.round(hsv.s * 100) - saturationStep * i;
36 | } else if (i == darkColorCount) {
37 | saturation = Math.round(hsv.s * 100) + saturationStep;
38 | } else {
39 | saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
40 | }
41 | if (saturation > 100) {
42 | saturation = 100;
43 | }
44 | if (isLight && i === lightColorCount && saturation > 10) {
45 | saturation = 10;
46 | }
47 | if (saturation < 6) {
48 | saturation = 6;
49 | }
50 | return Math.round(saturation);
51 | };
52 | var getValue = function(hsv, i, isLight) {
53 | if (isLight) {
54 | return Math.round(hsv.v * 100) + brightnessStep1 * i;
55 | }
56 | return Math.round(hsv.v * 100) - brightnessStep2 * i;
57 | };
58 |
59 | this.colorPalette = function(color, index) {
60 | var isLight = index <= 6;
61 | var hsv = tinycolor(color).toHsv();
62 | var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
63 | return tinycolor({
64 | h: getHue(hsv, i, isLight),
65 | s: getSaturation(hsv, i, isLight),
66 | v: getValue(hsv, i, isLight),
67 | }).toHexString();
68 | };
69 | })()`;
70 | }
71 | // It is hacky way to make this function will be compiled preferentially by less
72 | // resolve error: `ReferenceError: colorPalette is not defined`
73 | // https://github.com/ant-design/ant-motion/issues/44
74 | .colorPaletteMixin();
75 |
--------------------------------------------------------------------------------
/src/style/color/colors.less:
--------------------------------------------------------------------------------
1 | @import 'colorPalette';
2 |
3 | // color palettes
4 | @blue-1: color(~`colorPalette("@{blue-6}", 1)`);
5 | @blue-2: color(~`colorPalette("@{blue-6}", 2)`);
6 | @blue-3: color(~`colorPalette("@{blue-6}", 3)`);
7 | @blue-4: color(~`colorPalette("@{blue-6}", 4)`);
8 | @blue-5: color(~`colorPalette("@{blue-6}", 5)`);
9 | @blue-6: #1890ff;
10 | @blue-7: color(~`colorPalette("@{blue-6}", 7)`);
11 | @blue-8: color(~`colorPalette("@{blue-6}", 8)`);
12 | @blue-9: color(~`colorPalette("@{blue-6}", 9)`);
13 | @blue-10: color(~`colorPalette("@{blue-6}", 10)`);
14 |
15 | @purple-1: color(~`colorPalette("@{purple-6}", 1)`);
16 | @purple-2: color(~`colorPalette("@{purple-6}", 2)`);
17 | @purple-3: color(~`colorPalette("@{purple-6}", 3)`);
18 | @purple-4: color(~`colorPalette("@{purple-6}", 4)`);
19 | @purple-5: color(~`colorPalette("@{purple-6}", 5)`);
20 | @purple-6: #722ed1;
21 | @purple-7: color(~`colorPalette("@{purple-6}", 7)`);
22 | @purple-8: color(~`colorPalette("@{purple-6}", 8)`);
23 | @purple-9: color(~`colorPalette("@{purple-6}", 9)`);
24 | @purple-10: color(~`colorPalette("@{purple-6}", 10)`);
25 |
26 | @cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
27 | @cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
28 | @cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
29 | @cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
30 | @cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
31 | @cyan-6: #13c2c2;
32 | @cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
33 | @cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
34 | @cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
35 | @cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
36 |
37 | @green-1: color(~`colorPalette("@{green-6}", 1)`);
38 | @green-2: color(~`colorPalette("@{green-6}", 2)`);
39 | @green-3: color(~`colorPalette("@{green-6}", 3)`);
40 | @green-4: color(~`colorPalette("@{green-6}", 4)`);
41 | @green-5: color(~`colorPalette("@{green-6}", 5)`);
42 | @green-6: #52c41a;
43 | @green-7: color(~`colorPalette("@{green-6}", 7)`);
44 | @green-8: color(~`colorPalette("@{green-6}", 8)`);
45 | @green-9: color(~`colorPalette("@{green-6}", 9)`);
46 | @green-10: color(~`colorPalette("@{green-6}", 10)`);
47 |
48 | @magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
49 | @magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
50 | @magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
51 | @magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
52 | @magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
53 | @magenta-6: #eb2f96;
54 | @magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
55 | @magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
56 | @magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
57 | @magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
58 |
59 | // alias of magenta
60 | @pink-1: color(~`colorPalette("@{pink-6}", 1)`);
61 | @pink-2: color(~`colorPalette("@{pink-6}", 2)`);
62 | @pink-3: color(~`colorPalette("@{pink-6}", 3)`);
63 | @pink-4: color(~`colorPalette("@{pink-6}", 4)`);
64 | @pink-5: color(~`colorPalette("@{pink-6}", 5)`);
65 | @pink-6: #eb2f96;
66 | @pink-7: color(~`colorPalette("@{pink-6}", 7)`);
67 | @pink-8: color(~`colorPalette("@{pink-6}", 8)`);
68 | @pink-9: color(~`colorPalette("@{pink-6}", 9)`);
69 | @pink-10: color(~`colorPalette("@{pink-6}", 10)`);
70 |
71 | @red-1: color(~`colorPalette("@{red-6}", 1)`);
72 | @red-2: color(~`colorPalette("@{red-6}", 2)`);
73 | @red-3: color(~`colorPalette("@{red-6}", 3)`);
74 | @red-4: color(~`colorPalette("@{red-6}", 4)`);
75 | @red-5: color(~`colorPalette("@{red-6}", 5)`);
76 | @red-6: #f5222d;
77 | @red-7: color(~`colorPalette("@{red-6}", 7)`);
78 | @red-8: color(~`colorPalette("@{red-6}", 8)`);
79 | @red-9: color(~`colorPalette("@{red-6}", 9)`);
80 | @red-10: color(~`colorPalette("@{red-6}", 10)`);
81 |
82 | @orange-1: color(~`colorPalette("@{orange-6}", 1)`);
83 | @orange-2: color(~`colorPalette("@{orange-6}", 2)`);
84 | @orange-3: color(~`colorPalette("@{orange-6}", 3)`);
85 | @orange-4: color(~`colorPalette("@{orange-6}", 4)`);
86 | @orange-5: color(~`colorPalette("@{orange-6}", 5)`);
87 | @orange-6: #fa8c16;
88 | @orange-7: color(~`colorPalette("@{orange-6}", 7)`);
89 | @orange-8: color(~`colorPalette("@{orange-6}", 8)`);
90 | @orange-9: color(~`colorPalette("@{orange-6}", 9)`);
91 | @orange-10: color(~`colorPalette("@{orange-6}", 10)`);
92 |
93 | @yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
94 | @yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
95 | @yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
96 | @yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
97 | @yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
98 | @yellow-6: #fadb14;
99 | @yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
100 | @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
101 | @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
102 | @yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
103 |
104 | @volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
105 | @volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
106 | @volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
107 | @volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
108 | @volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
109 | @volcano-6: #fa541c;
110 | @volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
111 | @volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
112 | @volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
113 | @volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
114 |
115 | @geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
116 | @geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
117 | @geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
118 | @geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
119 | @geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
120 | @geekblue-6: #2f54eb;
121 | @geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
122 | @geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
123 | @geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
124 | @geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
125 |
126 | @lime-1: color(~`colorPalette("@{lime-6}", 1)`);
127 | @lime-2: color(~`colorPalette("@{lime-6}", 2)`);
128 | @lime-3: color(~`colorPalette("@{lime-6}", 3)`);
129 | @lime-4: color(~`colorPalette("@{lime-6}", 4)`);
130 | @lime-5: color(~`colorPalette("@{lime-6}", 5)`);
131 | @lime-6: #a0d911;
132 | @lime-7: color(~`colorPalette("@{lime-6}", 7)`);
133 | @lime-8: color(~`colorPalette("@{lime-6}", 8)`);
134 | @lime-9: color(~`colorPalette("@{lime-6}", 9)`);
135 | @lime-10: color(~`colorPalette("@{lime-6}", 10)`);
136 |
137 | @gold-1: color(~`colorPalette("@{gold-6}", 1)`);
138 | @gold-2: color(~`colorPalette("@{gold-6}", 2)`);
139 | @gold-3: color(~`colorPalette("@{gold-6}", 3)`);
140 | @gold-4: color(~`colorPalette("@{gold-6}", 4)`);
141 | @gold-5: color(~`colorPalette("@{gold-6}", 5)`);
142 | @gold-6: #faad14;
143 | @gold-7: color(~`colorPalette("@{gold-6}", 7)`);
144 | @gold-8: color(~`colorPalette("@{gold-6}", 8)`);
145 | @gold-9: color(~`colorPalette("@{gold-6}", 9)`);
146 | @gold-10: color(~`colorPalette("@{gold-6}", 10)`);
147 |
--------------------------------------------------------------------------------
/src/style/core/base.less:
--------------------------------------------------------------------------------
1 | /* stylelint-disable at-rule-no-unknown */
2 |
3 | // Reboot
4 | //
5 | // Normalization of HTML elements, manually forked from Normalize.css to emove
6 | // styles targeting irrelevant browsers while applying new styles.
7 | //
8 | // Normalize is licensed MIT. https://github.com/necolas/normalize.css
9 |
10 | // http://stackoverflow.com/a/13611748/3040605
11 | @font-face {
12 | font-family: "Helvetica Neue For Number";
13 | src: local("Helvetica Neue");
14 | unicode-range: U+30-39;
15 | }
16 |
17 | // HTML & Body reset
18 | html, body {
19 | .square(100%);
20 | }
21 |
22 | // emove the clear button of a text input control in IE10+
23 | input::-ms-clear, input::-ms-reveal {
24 | display: none;
25 | }
26 |
27 | // Document
28 | //
29 | // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
30 | // 2. Change the default font family in all browsers.
31 | // 3. Correct the line height in all browsers.
32 | // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
33 | // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
34 | // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
35 | // 6. Change the default tap highlight to be completely transparent in iOS.
36 |
37 | *,
38 | *::before,
39 | *::after {
40 | box-sizing: border-box; // 1
41 | }
42 |
43 | html {
44 | font-family: sans-serif; // 2
45 | line-height: 1.15; // 3
46 | -webkit-text-size-adjust: 100%; // 4
47 | -ms-text-size-adjust: 100%; // 4
48 | -ms-overflow-style: scrollbar; // 5
49 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
50 | }
51 |
52 | // IE10+ doesn't honor `` in some cases.
53 | @at-root {
54 | @-ms-viewport { width: device-width; }
55 | }
56 |
57 | // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
58 | article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
59 | display: block;
60 | }
61 |
62 | // Body
63 | //
64 | // 1. emove the margin in all browsers.
65 | // 2. As a best practice, apply a default `body-background`.
66 |
67 | body {
68 | margin: 0; // 1
69 | font-family: @font-family;
70 | font-size: @font-size-base;
71 | line-height: @line-height-base;
72 | color: @text-color;
73 | background-color: @body-background; // 2
74 | }
75 |
76 | // Suppress the focus outline on elements that cannot be accessed via keyboard.
77 | // This prevents an unwanted focus outline from appearing around elements that
78 | // might still respond to pointer events.
79 | //
80 | // Credit: https://github.com/suitcss/base
81 | [tabindex="-1"]:focus {
82 | outline: none !important;
83 | }
84 |
85 | // Content grouping
86 | //
87 | // 1. Add the correct box sizing in Firefox.
88 | // 2. Show the overflow in Edge and IE.
89 |
90 | hr {
91 | box-sizing: content-box; // 1
92 | height: 0; // 1
93 | overflow: visible; // 2
94 | }
95 |
96 | //
97 | // Typography
98 | //
99 |
100 | // emove top margins from headings
101 | //
102 | // By default, ``-`` all receive top and bottom margins. We nuke the top
103 | // margin for easier control within type scales as it avoids margin collapsing.
104 | h1, h2, h3, h4, h5, h6 {
105 | margin-top: 0;
106 | margin-bottom: .5em;
107 | color: @heading-color;
108 | font-weight: 500;
109 | }
110 |
111 | // Reset margins on paragraphs
112 | //
113 | // Similarly, the top margin on `
`s get reset. However, we also reset the
114 | // bottom margin to use `em` units instead of `em`.
115 | p {
116 | margin-top: 0;
117 | margin-bottom: 1em;
118 | }
119 |
120 | // Abbreviations
121 | //
122 | // 1. emove the bottom border in Firefox 39-.
123 | // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
124 | // 3. Add explicit cursor to indicate changed behavior.
125 | // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
126 |
127 | abbr[title],
128 | abbr[data-original-title] { // 4
129 | text-decoration: underline; // 2
130 | text-decoration: underline dotted; // 2
131 | cursor: help; // 3
132 | border-bottom: 0; // 1
133 | }
134 |
135 | address {
136 | margin-bottom: 1em;
137 | font-style: normal;
138 | line-height: inherit;
139 | }
140 |
141 | input[type="text"],
142 | textarea {
143 | -webkit-appearance: none;
144 | }
145 |
146 | ol,
147 | ul,
148 | dl {
149 | margin-top: 0;
150 | margin-bottom: 1em;
151 | }
152 |
153 | ol ol,
154 | ul ul,
155 | ol ul,
156 | ul ol {
157 | margin-bottom: 0;
158 | }
159 |
160 | dt {
161 | font-weight: 500;
162 | }
163 |
164 | dd {
165 | margin-bottom: .5em;
166 | margin-left: 0; // Undo browser default
167 | }
168 |
169 | blockquote {
170 | margin: 0 0 1em;
171 | }
172 |
173 | dfn {
174 | font-style: italic; // Add the correct font style in Android 4.3-
175 | }
176 |
177 | b,
178 | strong {
179 | font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
180 | }
181 |
182 | small {
183 | font-size: 80%; // Add the correct font size in all browsers
184 | }
185 |
186 | //
187 | // Prevent `sub` and `sup` elements from affecting the line height in
188 | // all browsers.
189 | //
190 |
191 | sub,
192 | sup {
193 | position: relative;
194 | font-size: 75%;
195 | line-height: 0;
196 | vertical-align: baseline;
197 | }
198 |
199 | sub { bottom: -.25em; }
200 | sup { top: -.5em; }
201 |
202 | //
203 | // Links
204 | //
205 |
206 | a {
207 | color: @link-color;
208 | background-color: transparent; // emove the gray background on active links in IE 10.
209 | text-decoration: @link-decoration;
210 | outline: none;
211 | cursor: pointer;
212 | transition: color .3s;
213 | -webkit-text-decoration-skip: objects; // emove gaps in links underline in iOS 8+ and Safari 8+.
214 |
215 | &:focus {
216 | text-decoration: underline;
217 | text-decoration-skip: ink;
218 | }
219 |
220 | &:hover {
221 | color: @link-hover-color;
222 | }
223 |
224 | &:active {
225 | color: @link-active-color;
226 | }
227 |
228 | &:active,
229 | &:hover {
230 | outline: 0;
231 | text-decoration: @link-hover-decoration;
232 | }
233 |
234 | &[disabled] {
235 | color: @disabled-color;
236 | cursor: not-allowed;
237 | pointer-events: none;
238 | }
239 | }
240 |
241 | //
242 | // Code
243 | //
244 |
245 | pre,
246 | code,
247 | kbd,
248 | samp {
249 | font-family: @code-family;
250 | font-size: 1em; // Correct the odd `em` font sizing in all browsers.
251 | }
252 |
253 | pre {
254 | // emove browser default top margin
255 | margin-top: 0;
256 | // Reset browser default of `1em` to use `em`s
257 | margin-bottom: 1em;
258 | // Don't allow content to break outside
259 | overflow: auto;
260 | }
261 |
262 | //
263 | // Figures
264 | //
265 | figure {
266 | // Apply a consistent margin strategy (matches our type styles).
267 | margin: 0 0 1em;
268 | }
269 |
270 | //
271 | // Images and content
272 | //
273 |
274 | img {
275 | vertical-align: middle;
276 | border-style: none; // emove the border on images inside links in IE 10-.
277 | }
278 |
279 | svg:not(:root) {
280 | overflow: hidden; // Hide the overflow in IE
281 | }
282 |
283 | // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
284 | //
285 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
286 | // DON'T emove the click delay when `` is present.
287 | // However, they DO support emoving the click delay via `touch-action: manipulation`.
288 | // See:
289 | // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
290 | // * http://caniuse.com/#feat=css-touch-action
291 | // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
292 |
293 | a,
294 | area,
295 | button,
296 | [role="button"],
297 | input:not([type=range]),
298 | label,
299 | select,
300 | summary,
301 | textarea {
302 | touch-action: manipulation;
303 | }
304 |
305 | //
306 | // Tables
307 | //
308 |
309 | table {
310 | border-collapse: collapse; // Prevent double borders
311 | }
312 |
313 | caption {
314 | padding-top: .75em;
315 | padding-bottom: .3em;
316 | color: @text-color-secondary;
317 | text-align: left;
318 | caption-side: bottom;
319 | }
320 |
321 | th {
322 | // Matches default `
` alignment by inheriting from the ``, or the
323 | // closest parent with a set `text-align`.
324 | text-align: inherit;
325 | }
326 |
327 | //
328 | // Forms
329 | //
330 |
331 | input,
332 | button,
333 | select,
334 | optgroup,
335 | textarea {
336 | margin: 0; // emove the margin in Firefox and Safari
337 | font-family: inherit;
338 | font-size: inherit;
339 | line-height: inherit;
340 | color: inherit;
341 | }
342 |
343 | input[type="text"],
344 | textarea {
345 | -webkit-appearance: none;
346 | }
347 |
348 | button,
349 | input {
350 | overflow: visible; // Show the overflow in Edge
351 | }
352 |
353 | button,
354 | select {
355 | text-transform: none; // emove the inheritance of text transform in Firefox
356 | }
357 |
358 | // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
359 | // controls in Android 4.
360 | // 2. Correct the inability to style clickable types in iOS and Safari.
361 | button,
362 | html [type="button"], // 1
363 | [type="reset"],
364 | [type="submit"] {
365 | -webkit-appearance: button; // 2
366 | }
367 |
368 | // emove inner border and padding from Firefox, but don't restore the outline like Normalize.
369 | button::-moz-focus-inner,
370 | [type="button"]::-moz-focus-inner,
371 | [type="reset"]::-moz-focus-inner,
372 | [type="submit"]::-moz-focus-inner {
373 | padding: 0;
374 | border-style: none;
375 | }
376 |
377 | input[type="radio"],
378 | input[type="checkbox"] {
379 | box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
380 | padding: 0; // 2. emove the padding in IE 10-
381 | }
382 |
383 | input[type="date"],
384 | input[type="time"],
385 | input[type="datetime-local"],
386 | input[type="month"] {
387 | // emove the default appearance of temporal inputs to avoid a Mobile Safari
388 | // bug where setting a custom line-height prevents text from being vertically
389 | // centered within the input.
390 | // See https://bugs.webkit.org/show_bug.cgi?id=139848
391 | // and https://github.com/twbs/bootstrap/issues/11266
392 | -webkit-appearance: listbox;
393 | }
394 |
395 | textarea {
396 | overflow: auto; // emove the default vertical scrollbar in IE.
397 | // Textareas should really only resize vertically so they don't break their (horizontal) containers.
398 | resize: vertical;
399 | }
400 |
401 | fieldset {
402 | // Browsers set a default `min-width: min-content;` on fieldsets,
403 | // unlike e.g. ` `s, which have `min-width: 0;` by default.
404 | // So we reset that to ensure fieldsets behave more like a standard block element.
405 | // See https://github.com/twbs/bootstrap/issues/12359
406 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
407 | min-width: 0;
408 | // Reset the default outline behavior of fieldsets so they don't affect page layout.
409 | padding: 0;
410 | margin: 0;
411 | border: 0;
412 | }
413 |
414 | // 1. Correct the text wrapping in Edge and IE.
415 | // 2. Correct the color inheritance from `fieldset` elements in IE.
416 | legend {
417 | display: block;
418 | width: 100%;
419 | max-width: 100%; // 1
420 | padding: 0;
421 | margin-bottom: .5em;
422 | font-size: 1.5em;
423 | line-height: inherit;
424 | color: inherit; // 2
425 | white-space: normal; // 1
426 | }
427 |
428 | progress {
429 | vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
430 | }
431 |
432 | // Correct the cursor style of incement and decement buttons in Chrome.
433 | [type="number"]::-webkit-inner-spin-button,
434 | [type="number"]::-webkit-outer-spin-button {
435 | height: auto;
436 | }
437 |
438 | [type="search"] {
439 | // This overrides the extra rounded corners on search inputs in iOS so that our
440 | // `.form-control` class can properly style them. Note that this cannot simply
441 | // be added to `.form-control` as it's not specific enough. For details, see
442 | // https://github.com/twbs/bootstrap/issues/11586.
443 | outline-offset: -2px; // 2. Correct the outline style in Safari.
444 | -webkit-appearance: none;
445 | }
446 |
447 | //
448 | // emove the inner padding and cancel buttons in Chrome and Safari on macOS.
449 | //
450 |
451 | [type="search"]::-webkit-search-cancel-button,
452 | [type="search"]::-webkit-search-decoration {
453 | -webkit-appearance: none;
454 | }
455 |
456 | //
457 | // 1. Correct the inability to style clickable types in iOS and Safari.
458 | // 2. Change font properties to `inherit` in Safari.
459 | //
460 |
461 | ::-webkit-file-upload-button {
462 | font: inherit; // 2
463 | -webkit-appearance: button; // 1
464 | }
465 |
466 | //
467 | // Correct element displays
468 | //
469 |
470 | output {
471 | display: inline-block;
472 | }
473 |
474 | summary {
475 | display: list-item; // Add the correct display in all browsers
476 | }
477 |
478 | template {
479 | display: none; // Add the correct display in IE
480 | }
481 |
482 | // Always hide an element with the `hidden` HTML attribute (from PureCSS).
483 | // Needed for proper display in IE 10-.
484 | [hidden] {
485 | display: none !important;
486 | }
487 |
488 | mark {
489 | padding: .2em;
490 | background-color: @yellow-1;
491 | }
492 |
493 | ::selection {
494 | background: @primary-color;
495 | color: #fff;
496 | }
497 |
498 | // Utility classes
499 | .clearfix {
500 | .clearfix();
501 | }
502 |
--------------------------------------------------------------------------------
/src/style/core/index.less:
--------------------------------------------------------------------------------
1 | @import "../mixins/index";
2 | @import "base";
3 | @import "iconfont";
4 | @import "motion";
5 |
--------------------------------------------------------------------------------
/src/style/core/motion.less:
--------------------------------------------------------------------------------
1 | @import "../mixins/motion";
2 | @import "motion/fade";
3 | @import "motion/move";
4 | @import "motion/other";
5 | @import "motion/slide";
6 | @import "motion/swing";
7 | @import "motion/zoom";
8 |
9 | // For common/openAnimation
10 | .ant-motion-collapse {
11 | overflow: hidden;
12 | &-active {
13 | transition: height .15s @ease-in-out, opacity .15s @ease-in-out !important;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/style/core/motion/fade.less:
--------------------------------------------------------------------------------
1 | .fade-motion(@className, @keyframeName) {
2 | .make-motion(@className, @keyframeName);
3 | .@{className}-enter,
4 | .@{className}-appear {
5 | opacity: 0;
6 | animation-timing-function: linear;
7 | }
8 | .@{className}-leave {
9 | animation-timing-function: linear;
10 | }
11 | }
12 |
13 | .fade-motion(fade, antFade);
14 |
15 | @keyframes antFadeIn {
16 | 0% {
17 | opacity: 0;
18 | }
19 | 100% {
20 | opacity: 1;
21 | }
22 | }
23 |
24 | @keyframes antFadeOut {
25 | 0% {
26 | opacity: 1;
27 | }
28 | 100% {
29 | opacity: 0;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/style/core/motion/move.less:
--------------------------------------------------------------------------------
1 | .move-motion(@className, @keyframeName) {
2 | .make-motion(@className, @keyframeName);
3 | .@{className}-enter,
4 | .@{className}-appear {
5 | opacity: 0;
6 | animation-timing-function: @ease-out-circ;
7 | }
8 | .@{className}-leave {
9 | animation-timing-function: @ease-in-circ;
10 | }
11 | }
12 |
13 | .move-motion(move-up, antMoveUp);
14 | .move-motion(move-down, antMoveDown);
15 | .move-motion(move-left, antMoveLeft);
16 | .move-motion(move-right, antMoveRight);
17 |
18 | @keyframes antMoveDownIn {
19 | 0% {
20 | transform-origin: 0 0;
21 | transform: translateY(100%);
22 | opacity: 0;
23 | }
24 | 100% {
25 | transform-origin: 0 0;
26 | transform: translateY(0%);
27 | opacity: 1;
28 | }
29 | }
30 |
31 | @keyframes antMoveDownOut {
32 | 0% {
33 | transform-origin: 0 0;
34 | transform: translateY(0%);
35 | opacity: 1;
36 | }
37 | 100% {
38 | transform-origin: 0 0;
39 | transform: translateY(100%);
40 | opacity: 0;
41 | }
42 | }
43 |
44 | @keyframes antMoveLeftIn {
45 | 0% {
46 | transform-origin: 0 0;
47 | transform: translateX(-100%);
48 | opacity: 0;
49 | }
50 | 100% {
51 | transform-origin: 0 0;
52 | transform: translateX(0%);
53 | opacity: 1;
54 | }
55 | }
56 |
57 | @keyframes antMoveLeftOut {
58 | 0% {
59 | transform-origin: 0 0;
60 | transform: translateX(0%);
61 | opacity: 1;
62 | }
63 | 100% {
64 | transform-origin: 0 0;
65 | transform: translateX(-100%);
66 | opacity: 0;
67 | }
68 | }
69 |
70 | @keyframes antMoveRightIn {
71 | 0% {
72 | opacity: 0;
73 | transform-origin: 0 0;
74 | transform: translateX(100%);
75 | }
76 | 100% {
77 | opacity: 1;
78 | transform-origin: 0 0;
79 | transform: translateX(0%);
80 | }
81 | }
82 |
83 | @keyframes antMoveRightOut {
84 | 0% {
85 | transform-origin: 0 0;
86 | transform: translateX(0%);
87 | opacity: 1;
88 | }
89 | 100% {
90 | transform-origin: 0 0;
91 | transform: translateX(100%);
92 | opacity: 0;
93 | }
94 | }
95 |
96 | @keyframes antMoveUpIn {
97 | 0% {
98 | transform-origin: 0 0;
99 | transform: translateY(-100%);
100 | opacity: 0;
101 | }
102 | 100% {
103 | transform-origin: 0 0;
104 | transform: translateY(0%);
105 | opacity: 1;
106 | }
107 | }
108 |
109 | @keyframes antMoveUpOut {
110 | 0% {
111 | transform-origin: 0 0;
112 | transform: translateY(0%);
113 | opacity: 1;
114 | }
115 | 100% {
116 | transform-origin: 0 0;
117 | transform: translateY(-100%);
118 | opacity: 0;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/style/core/motion/other.less:
--------------------------------------------------------------------------------
1 | @keyframes loadingCircle {
2 | 0% {
3 | transform-origin: 50% 50%;
4 | transform: rotate(0deg);
5 | }
6 | 100% {
7 | transform-origin: 50% 50%;
8 | transform: rotate(360deg);
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/style/core/motion/slide.less:
--------------------------------------------------------------------------------
1 | .slide-motion(@className, @keyframeName) {
2 | .make-motion(@className, @keyframeName);
3 | .@{className}-enter,
4 | .@{className}-appear {
5 | opacity: 0;
6 | animation-timing-function: @ease-out-quint;
7 | }
8 | .@{className}-leave {
9 | animation-timing-function: @ease-in-quint;
10 | }
11 | }
12 |
13 | .slide-motion(slide-up, antSlideUp);
14 | .slide-motion(slide-down, antSlideDown);
15 | .slide-motion(slide-left, antSlideLeft);
16 | .slide-motion(slide-right, antSlideRight);
17 |
18 | @keyframes antSlideUpIn {
19 | 0% {
20 | opacity: 0;
21 | transform-origin: 0% 0%;
22 | transform: scaleY(.8);
23 | }
24 | 100% {
25 | opacity: 1;
26 | transform-origin: 0% 0%;
27 | transform: scaleY(1);
28 | }
29 | }
30 |
31 | @keyframes antSlideUpOut {
32 | 0% {
33 | opacity: 1;
34 | transform-origin: 0% 0%;
35 | transform: scaleY(1);
36 | }
37 | 100% {
38 | opacity: 0;
39 | transform-origin: 0% 0%;
40 | transform: scaleY(.8);
41 | }
42 | }
43 |
44 | @keyframes antSlideDownIn {
45 | 0% {
46 | opacity: 0;
47 | transform-origin: 100% 100%;
48 | transform: scaleY(.8);
49 | }
50 | 100% {
51 | opacity: 1;
52 | transform-origin: 100% 100%;
53 | transform: scaleY(1);
54 | }
55 | }
56 |
57 | @keyframes antSlideDownOut {
58 | 0% {
59 | opacity: 1;
60 | transform-origin: 100% 100%;
61 | transform: scaleY(1);
62 | }
63 | 100% {
64 | opacity: 0;
65 | transform-origin: 100% 100%;
66 | transform: scaleY(.8);
67 | }
68 | }
69 |
70 | @keyframes antSlideLeftIn {
71 | 0% {
72 | opacity: 0;
73 | transform-origin: 0% 0%;
74 | transform: scaleX(.8);
75 | }
76 | 100% {
77 | opacity: 1;
78 | transform-origin: 0% 0%;
79 | transform: scaleX(1);
80 | }
81 | }
82 |
83 | @keyframes antSlideLeftOut {
84 | 0% {
85 | opacity: 1;
86 | transform-origin: 0% 0%;
87 | transform: scaleX(1);
88 | }
89 | 100% {
90 | opacity: 0;
91 | transform-origin: 0% 0%;
92 | transform: scaleX(.8);
93 | }
94 | }
95 |
96 | @keyframes antSlideRightIn {
97 | 0% {
98 | opacity: 0;
99 | transform-origin: 100% 0%;
100 | transform: scaleX(.8);
101 | }
102 | 100% {
103 | opacity: 1;
104 | transform-origin: 100% 0%;
105 | transform: scaleX(1);
106 | }
107 | }
108 |
109 | @keyframes antSlideRightOut {
110 | 0% {
111 | opacity: 1;
112 | transform-origin: 100% 0%;
113 | transform: scaleX(1);
114 | }
115 | 100% {
116 | opacity: 0;
117 | transform-origin: 100% 0%;
118 | transform: scaleX(.8);
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/style/core/motion/swing.less:
--------------------------------------------------------------------------------
1 | .swing-motion(@className, @keyframeName) {
2 | .@{className}-enter,
3 | .@{className}-appear {
4 | .motion-common();
5 | animation-play-state: paused;
6 | }
7 | .@{className}-enter.@{className}-enter-active,
8 | .@{className}-appear.@{className}-appear-active {
9 | animation-name: ~"@{keyframeName}In";
10 | animation-play-state: running;
11 | }
12 | }
13 |
14 | .swing-motion(swing, antSwing);
15 |
16 | @keyframes antSwingIn {
17 | 0%,
18 | 100% {
19 | transform: translateX(0);
20 | }
21 | 20% {
22 | transform: translateX(-10px);
23 | }
24 | 40% {
25 | transform: translateX(10px);
26 | }
27 | 60% {
28 | transform: translateX(-5px);
29 | }
30 | 80% {
31 | transform: translateX(5px);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/core/motion/zoom.less:
--------------------------------------------------------------------------------
1 | .zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
2 | .make-motion(@className, @keyframeName, @duration);
3 | .@{className}-enter,
4 | .@{className}-appear {
5 | transform: scale(0); // need this by yiminghe
6 | animation-timing-function: @ease-out-circ;
7 | }
8 | .@{className}-leave {
9 | animation-timing-function: @ease-in-out-circ;
10 | }
11 | }
12 |
13 | // For Modal, Select choosen item
14 | .zoom-motion(zoom, antZoom);
15 | // For Popover, Popconfirm, Dropdown
16 | .zoom-motion(zoom-big, antZoomBig);
17 | // For Tooltip
18 | .zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);
19 |
20 | .zoom-motion(zoom-up, antZoomUp);
21 | .zoom-motion(zoom-down, antZoomDown);
22 | .zoom-motion(zoom-left, antZoomLeft);
23 | .zoom-motion(zoom-right, antZoomRight);
24 |
25 | @keyframes antZoomIn {
26 | 0% {
27 | opacity: 0;
28 | transform: scale(0.2);
29 | }
30 | 100% {
31 | opacity: 1;
32 | transform: scale(1);
33 | }
34 | }
35 |
36 | @keyframes antZoomOut {
37 | 0% {
38 | transform: scale(1);
39 | }
40 | 100% {
41 | opacity: 0;
42 | transform: scale(0.2);
43 | }
44 | }
45 |
46 | @keyframes antZoomBigIn {
47 | 0% {
48 | opacity: 0;
49 | transform: scale(.8);
50 | }
51 | 100% {
52 | transform: scale(1);
53 | }
54 | }
55 |
56 | @keyframes antZoomBigOut {
57 | 0% {
58 | transform: scale(1);
59 | }
60 | 100% {
61 | opacity: 0;
62 | transform: scale(.8);
63 | }
64 | }
65 |
66 | @keyframes antZoomUpIn {
67 | 0% {
68 | opacity: 0;
69 | transform-origin: 50% 0%;
70 | transform: scale(.8);
71 | }
72 | 100% {
73 | transform-origin: 50% 0%;
74 | transform: scale(1);
75 | }
76 | }
77 |
78 | @keyframes antZoomUpOut {
79 | 0% {
80 | transform-origin: 50% 0%;
81 | transform: scale(1);
82 | }
83 | 100% {
84 | opacity: 0;
85 | transform-origin: 50% 0%;
86 | transform: scale(.8);
87 | }
88 | }
89 |
90 | @keyframes antZoomLeftIn {
91 | 0% {
92 | opacity: 0;
93 | transform-origin: 0% 50%;
94 | transform: scale(.8);
95 | }
96 | 100% {
97 | transform-origin: 0% 50%;
98 | transform: scale(1);
99 | }
100 | }
101 |
102 | @keyframes antZoomLeftOut {
103 | 0% {
104 | transform-origin: 0% 50%;
105 | transform: scale(1);
106 | }
107 | 100% {
108 | opacity: 0;
109 | transform-origin: 0% 50%;
110 | transform: scale(.8);
111 | }
112 | }
113 |
114 | @keyframes antZoomRightIn {
115 | 0% {
116 | opacity: 0;
117 | transform-origin: 100% 50%;
118 | transform: scale(.8);
119 | }
120 | 100% {
121 | transform-origin: 100% 50%;
122 | transform: scale(1);
123 | }
124 | }
125 |
126 | @keyframes antZoomRightOut {
127 | 0% {
128 | transform-origin: 100% 50%;
129 | transform: scale(1);
130 | }
131 | 100% {
132 | opacity: 0;
133 | transform-origin: 100% 50%;
134 | transform: scale(.8);
135 | }
136 | }
137 |
138 | @keyframes antZoomDownIn {
139 | 0% {
140 | opacity: 0;
141 | transform-origin: 50% 100%;
142 | transform: scale(.8);
143 | }
144 | 100% {
145 | transform-origin: 50% 100%;
146 | transform: scale(1);
147 | }
148 | }
149 |
150 | @keyframes antZoomDownOut {
151 | 0% {
152 | transform-origin: 50% 100%;
153 | transform: scale(1);
154 | }
155 | 100% {
156 | opacity: 0;
157 | transform-origin: 50% 100%;
158 | transform: scale(.8);
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
/src/style/index.less:
--------------------------------------------------------------------------------
1 | @import "./themes/default";
2 | @import "./core/index";
3 |
--------------------------------------------------------------------------------
/src/style/index.tsx:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/src/style/mixins/clearfix.less:
--------------------------------------------------------------------------------
1 | // mixins for clearfix
2 | // ------------------------
3 | .clearfix() {
4 | zoom: 1;
5 | &:before,
6 | &:after {
7 | content: " ";
8 | display: table;
9 | }
10 | &:after {
11 | clear: both;
12 | visibility: hidden;
13 | font-size: 0;
14 | height: 0;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/style/mixins/compatibility.less:
--------------------------------------------------------------------------------
1 | // Compatibility for browsers.
2 |
3 | // Placeholder text
4 | .placeholder(@color: @input-placeholder-color) {
5 | // Firefox
6 | &::-moz-placeholder {
7 | color: @color;
8 | opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
9 | }
10 | // Internet Explorer 10+
11 | &:-ms-input-placeholder {
12 | color: @color;
13 | }
14 | // Safari and Chrome
15 | &::-webkit-input-placeholder {
16 | color: @color;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/style/mixins/iconfont.less:
--------------------------------------------------------------------------------
1 | .iconfont-mixin() {
2 | display: inline-block;
3 | font-style: normal;
4 | vertical-align: baseline;
5 | text-align: center;
6 | text-transform: none;
7 | line-height: 1;
8 | text-rendering: optimizeLegibility;
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | &:before {
12 | display: block;
13 | font-family: "anticon" !important;
14 | }
15 | }
16 |
17 | .iconfont-font(@content) {
18 | font-family: 'anticon';
19 | text-rendering: optimizeLegibility;
20 | -webkit-font-smoothing: antialiased;
21 | -moz-osx-font-smoothing: grayscale;
22 | content: @content;
23 | }
24 |
25 | // for iconfont font size
26 | // fix chrome 12px bug, support ie
27 | .iconfont-size-under-12px(@size, @rotate: 0deg) {
28 | display: inline-block;
29 | @font-scale: unit(@size / 12px);
30 | font-size: 12px;
31 | // IE9
32 | font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
33 | transform: scale(@font-scale) rotate(@rotate);
34 | :root & {
35 | font-size: @font-size-sm; // reset IE9 and above
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/style/mixins/index.less:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------------------------------
3 | @import "opacity";
4 | @import "size";
5 | @import "compatibility";
6 | @import "clearfix";
7 | @import "iconfont";
8 | @import "motion";
9 | @import "reset";
10 |
--------------------------------------------------------------------------------
/src/style/mixins/motion.less:
--------------------------------------------------------------------------------
1 | @import '../themes/default';
2 |
3 | .motion-common(@duration: @animation-duration-base) {
4 | animation-duration: @duration;
5 | animation-fill-mode: both;
6 | }
7 |
8 | .motion-common-leave(@duration: @animation-duration-base) {
9 | animation-duration: @duration;
10 | animation-fill-mode: both;
11 | }
12 |
13 | .make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
14 | .@{className}-enter,
15 | .@{className}-appear {
16 | .motion-common(@duration);
17 | animation-play-state: paused;
18 | }
19 | .@{className}-leave {
20 | .motion-common-leave(@duration);
21 | animation-play-state: paused;
22 | }
23 | .@{className}-enter.@{className}-enter-active,
24 | .@{className}-appear.@{className}-appear-active {
25 | animation-name: ~"@{keyframeName}In";
26 | animation-play-state: running;
27 | }
28 | .@{className}-leave.@{className}-leave-active {
29 | animation-name: ~"@{keyframeName}Out";
30 | animation-play-state: running;
31 | pointer-events: none;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/mixins/opacity.less:
--------------------------------------------------------------------------------
1 | // Opacity
2 |
3 | .opacity(@opacity) {
4 | opacity: @opacity;
5 | // IE8 filter
6 | @opacity-ie: (@opacity * 100);
7 | filter: ~"alpha(opacity=@{opacity-ie})";
8 | }
9 |
--------------------------------------------------------------------------------
/src/style/mixins/reset.less:
--------------------------------------------------------------------------------
1 | @import '../themes/default';
2 |
3 | .reset-component() {
4 | font-family: @font-family;
5 | font-size: @font-size-base;
6 | line-height: @line-height-base;
7 | color: @text-color;
8 | box-sizing: border-box;
9 | margin: 0;
10 | padding: 0;
11 | list-style: none;
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/mixins/size.less:
--------------------------------------------------------------------------------
1 | // Sizing shortcuts
2 |
3 | .size(@width; @height) {
4 | width: @width;
5 | height: @height;
6 | }
7 |
8 | .square(@size) {
9 | .size(@size; @size);
10 | }
11 |
--------------------------------------------------------------------------------
/src/style/themes/default.less:
--------------------------------------------------------------------------------
1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2 | @import "../color/colors";
3 |
4 | // The prefix to use on all css classes from ant.
5 | @ant-prefix : ant;
6 |
7 | // -------- Colors -----------
8 | @primary-color : @blue-6;
9 | @info-color : @blue-6;
10 | @success-color : @green-6;
11 | @error-color : @red-6;
12 | @highlight-color : @red-6;
13 | @warning-color : @gold-6;
14 | @normal-color : #d9d9d9;
15 |
16 | // Color used by default to control hover and active backgrounds and for
17 | // alert info backgrounds.
18 | @primary-1: color(~`colorPalette("@{primary-color}", 1)`); // replace tint(@primary-color, 90%)
19 | @primary-2: color(~`colorPalette("@{primary-color}", 2)`); // replace tint(@primary-color, 80%)
20 | @primary-3: color(~`colorPalette("@{primary-color}", 3)`); // unused
21 | @primary-4: color(~`colorPalette("@{primary-color}", 4)`); // unused
22 | @primary-5: color(~`colorPalette("@{primary-color}", 5)`); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
23 | @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
24 | @primary-7: color(~`colorPalette("@{primary-color}", 7)`); // replace shade(@primary-color, 5%)
25 | @primary-8: color(~`colorPalette("@{primary-color}", 8)`); // unused
26 | @primary-9: color(~`colorPalette("@{primary-color}", 9)`); // unused
27 | @primary-10: color(~`colorPalette("@{primary-color}", 10)`); // unused
28 |
29 | // Base Scaffolding Variables
30 | // ---
31 |
32 | // Background color for ``
33 | @body-background : #fff;
34 | // Base background color for most components
35 | @component-background : #fff;
36 | @font-family-no-number : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
37 | @font-family : "Helvetica Neue For Number", @font-family-no-number;
38 | @code-family : Consolas, Menlo, Courier, monospace;
39 | @heading-color : fade(#000, 85%);
40 | @text-color : fade(#000, 65%);
41 | @text-color-secondary : fade(#000, 45%);
42 | @heading-color-dark : fade(#fff, 100%);
43 | @text-color-dark : fade(#fff,85%);
44 | @text-color-secondary-dark: fade(#fff, 65%);
45 | @font-size-base : 14px;
46 | @font-size-lg : @font-size-base + 2px;
47 | @font-size-sm : 12px;
48 | @line-height-base : 1.5;
49 | @border-radius-base : 4px;
50 | @border-radius-sm : 2px;
51 |
52 | // vertical paddings
53 | @padding-lg : 24px; // containers
54 | @padding-md : 16px; // small containers and buttons
55 | @padding-sm : 12px; // Form controls and items
56 | @padding-xs : 8px; // small items
57 |
58 | // vertical padding for all form controls
59 | @control-padding-horizontal: @padding-sm;
60 | @control-padding-horizontal-sm: @padding-xs;
61 |
62 | // The background colors for active and hover states for things like
63 | // list items or table cells.
64 | @item-active-bg : @primary-1;
65 | @item-hover-bg : @primary-1;
66 |
67 | // ICONFONT
68 | @iconfont-css-prefix : anticon;
69 | @icon-url : "https://at.alicdn.com/t/font_148784_imrz4lshfwimgqfr";
70 |
71 | // LINK
72 | @link-color : @primary-color;
73 | @link-hover-color : @primary-5;
74 | @link-active-color : @primary-7;
75 | @link-decoration : none;
76 | @link-hover-decoration : none;
77 |
78 | // Animation
79 | @ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
80 | @ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
81 | @ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
82 | @ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
83 | @ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
84 | @ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
85 | @ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
86 | @ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
87 | @ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
88 | @ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
89 | @ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
90 | @ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
91 |
92 | // Border color
93 | @border-color-base : hsv(0, 0, 85%); // base border outline a component
94 | @border-color-split : hsv(0, 0, 91%); // split border inside a component
95 | @border-width-base : 1px; // width of the border for a component
96 | @border-style-base : solid; // style of a components border
97 |
98 | // Outline
99 | @outline-blur-size : 0;
100 | @outline-width : 2px;
101 | @outline-color : @primary-color;
102 |
103 | @background-color-light : hsv(0, 0, 98%); // background of header and selected item
104 | @background-color-base : hsv(0, 0, 96%); // Default grey background color
105 |
106 | // Disabled states
107 | @disabled-color : fade(#000, 25%);
108 | @disabled-bg : @background-color-base;
109 | @disabled-color-dark : fade(#fff, 35%);
110 |
111 | // Shadow
112 | @shadow-color : rgba(0, 0, 0, .15);
113 | @box-shadow-base : @shadow-1-down;
114 | @shadow-1-up : 0 2px 8px @shadow-color;
115 | @shadow-1-down : 0 2px 8px @shadow-color;
116 | @shadow-1-left : -2px 0 8px @shadow-color;
117 | @shadow-1-right : 2px 0 8px @shadow-color;
118 | @shadow-2 : 0 4px 12px @shadow-color;
119 |
120 | // Buttons
121 | @btn-font-weight : 400;
122 | @btn-border-radius-base : @border-radius-base;
123 | @btn-border-radius-sm : @border-radius-base;
124 |
125 | @btn-primary-color : #fff;
126 | @btn-primary-bg : @primary-color;
127 |
128 | @btn-default-color : @text-color;
129 | @btn-default-bg : #fff;
130 | @btn-default-border : @border-color-base;
131 |
132 | @btn-danger-color : @error-color;
133 | @btn-danger-bg : @background-color-base;
134 | @btn-danger-border : @border-color-base;
135 |
136 | @btn-disable-color : @disabled-color;
137 | @btn-disable-bg : @disabled-bg;
138 | @btn-disable-border : @border-color-base;
139 |
140 | @btn-padding-base : 0 @padding-md - 1px;
141 | @btn-font-size-lg : @font-size-base;
142 | @btn-font-size-sm : @font-size-base;
143 | @btn-padding-lg : @btn-padding-base;
144 | @btn-padding-sm : 0 @padding-xs - 1px;
145 |
146 | @btn-height-base : 32px;
147 | @btn-height-lg : 40px;
148 | @btn-height-sm : 24px;
149 |
150 | @btn-circle-size : @btn-height-base;
151 | @btn-circle-size-lg : @btn-height-lg;
152 | @btn-circle-size-sm : @btn-height-sm;
153 |
154 | @btn-group-border : @primary-5;
155 |
156 | // Checkbox
157 | @checkbox-size : 16px;
158 |
159 | // Radio
160 | @radio-size : 16px;
161 |
162 | // Radio buttons
163 | @radio-button-bg : @btn-default-bg;
164 | @radio-button-color : @btn-default-color;
165 |
166 | // Media queries breakpoints
167 | // Extra small screen / phone
168 | @screen-xs : 480px;
169 | @screen-xs-min : @screen-xs;
170 |
171 | // Small screen / tablet
172 | @screen-sm : 576px;
173 | @screen-sm-min : @screen-sm;
174 |
175 | // Medium screen / desktop
176 | @screen-md : 768px;
177 | @screen-md-min : @screen-md;
178 |
179 | // Large screen / wide desktop
180 | @screen-lg : 992px;
181 | @screen-lg-min : @screen-lg;
182 |
183 | // Extra large screen / full hd
184 | @screen-xl : 1200px;
185 | @screen-xl-min : @screen-xl;
186 |
187 | // Extra extra large screen / large descktop
188 | @screen-xxl : 1600px;
189 | @screen-xxl-min : @screen-xxl;
190 |
191 | // provide a maximum
192 | @screen-xs-max : (@screen-sm-min - 1px);
193 | @screen-sm-max : (@screen-md-min - 1px);
194 | @screen-md-max : (@screen-lg-min - 1px);
195 | @screen-lg-max : (@screen-xl-min - 1px);
196 | @screen-xl-max : (@screen-xxl-min - 1px);
197 |
198 | // Grid system
199 | @grid-columns : 24;
200 | @grid-gutter-width : 0;
201 |
202 | // Layout
203 | @layout-body-background : #f0f2f5;
204 | @layout-header-background : #001529;
205 | @layout-footer-background : @layout-body-background;
206 | @layout-header-height : 64px;
207 | @layout-header-padding : 0 50px;
208 | @layout-footer-padding : 24px 50px;
209 | @layout-sider-background : @layout-header-background;
210 | @layout-trigger-height : 48px;
211 | @layout-trigger-background : #002140;
212 | @layout-trigger-color : #fff;
213 | @layout-zero-trigger-width : 36px;
214 | @layout-zero-trigger-height : 42px;
215 |
216 | // z-index list
217 | @zindex-affix : 10;
218 | @zindex-back-top : 10;
219 | @zindex-modal-mask : 1000;
220 | @zindex-modal : 1000;
221 | @zindex-notification : 1010;
222 | @zindex-message : 1010;
223 | @zindex-popover : 1030;
224 | @zindex-picker : 1050;
225 | @zindex-dropdown : 1050;
226 | @zindex-tooltip : 1060;
227 |
228 | // Animation
229 | @animation-duration-slow: .3s; // Modal
230 | @animation-duration-base: .2s;
231 | @animation-duration-fast: .1s; // Tooltip
232 |
233 | // Form
234 | // ---
235 | @label-required-color : @highlight-color;
236 | @label-color : @heading-color;
237 | @form-item-margin-bottom : 32px;
238 | @form-item-trailing-colon : true;
239 | @form-vertical-label-padding : 0 0 8px;
240 | @form-vertical-label-margin : 0;
241 |
242 | // Input
243 | // ---
244 | @input-height-base : 32px;
245 | @input-height-lg : 40px;
246 | @input-height-sm : 24px;
247 | @input-padding-horizontal : @control-padding-horizontal - 1px;
248 | @input-padding-horizontal-base: @input-padding-horizontal;
249 | @input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
250 | @input-padding-horizontal-lg : @input-padding-horizontal;
251 | @input-padding-vertical-base : 4px;
252 | @input-padding-vertical-sm : 1px;
253 | @input-padding-vertical-lg : 6px;
254 | @input-placeholder-color : hsv(0, 0, 75%);
255 | @input-color : @text-color;
256 | @input-border-color : @border-color-base;
257 | @input-bg : #fff;
258 | @input-addon-bg : @background-color-light;
259 | @input-hover-border-color : @primary-color;
260 | @input-disabled-bg : @disabled-bg;
261 |
262 | // Tooltip
263 | // ---
264 | //* Tooltip max width
265 | @tooltip-max-width: 250px;
266 | //** Tooltip text color
267 | @tooltip-color: #fff;
268 | //** Tooltip background color
269 | @tooltip-bg: rgba(0, 0, 0, .75);
270 | //** Tooltip arrow width
271 | @tooltip-arrow-width: 5px;
272 | //** Tooltip distance with trigger
273 | @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
274 | //** Tooltip arrow color
275 | @tooltip-arrow-color: @tooltip-bg;
276 |
277 | // Popover
278 | // ---
279 | //** Popover body background color
280 | @popover-bg: #fff;
281 | //** Popover text color
282 | @popover-color: @text-color;
283 | //** Popover maximum width
284 | @popover-min-width: 177px;
285 | //** Popover arrow width
286 | @popover-arrow-width: 5px;
287 | //** Popover arrow color
288 | @popover-arrow-color: @popover-bg;
289 | //** Popover outer arrow width
290 | //** Popover outer arrow color
291 | @popover-arrow-outer-color: @popover-bg;
292 | //** Popover distance with trigger
293 | @popover-distance: @popover-arrow-width + 4px;
294 |
295 | // Modal
296 | // --
297 | @modal-mask-bg: rgba(0, 0, 0, 0.65);
298 |
299 | // Progress
300 | // --
301 | @progress-default-color: @primary-color;
302 | @progress-remaining-color: @background-color-base;
303 |
304 | // Menu
305 | // ---
306 | @menu-dark-bg: @layout-header-background;
307 | @menu-dark-submenu-bg: #000c17;
308 | @menu-collapsed-width: 80px;
309 |
310 | // Spin
311 | // ---
312 | @spin-dot-size-sm: 14px;
313 | @spin-dot-size: 20px;
314 | @spin-dot-size-lg: 32px;
315 |
316 | // Table
317 | // --
318 | @table-header-bg: @background-color-light;
319 | @table-header-sort-bg: @background-color-base;
320 | @table-row-hover-bg: @primary-1;
321 | @table-padding-vertical: 16px;
322 | @table-padding-horizontal: 16px;
323 |
324 | // Tag
325 | // --
326 | @tag-default-bg: @background-color-light;
327 | @tag-default-color: @text-color;
328 | @tag-font-size: @font-size-sm;
329 |
330 | // TimePicker
331 | // ---
332 | @time-picker-panel-column-width: 56px;
333 | @time-picker-panel-width: @time-picker-panel-column-width * 3;
334 | @time-picker-selected-bg: @background-color-base;
335 |
336 | // Carousel
337 | // ---
338 | @carousel-dot-width: 16px;
339 | @carousel-dot-height: 3px;
340 | @carousel-dot-active-width: 24px;
341 |
342 | // Badge
343 | // ---
344 | @badge-height: 20px;
345 | @badge-dot-size: 6px;
346 | @badge-font-size: @font-size-sm;
347 | @badge-status-size: 6px;
348 |
349 | // Rate
350 | // ---
351 | @rate-star-color: @yellow-6;
352 | @rate-star-bg: @border-color-split;
353 |
354 | // Card
355 | // ---
356 | @card-head-color: @heading-color;
357 | @card-head-background: @component-background;
358 | @card-head-padding: 16px;
359 | @card-inner-head-padding: 12px;
360 | @card-padding-base: 24px;
361 | @card-padding-wider: 32px;
362 | @card-actions-background: @background-color-light;
363 | @card-shadow: 0 2px 8px rgba(0, 0, 0, .09);
364 |
365 | // Tabs
366 | // ---
367 | @tabs-card-head-background: @background-color-light;
368 | @tabs-card-height: 40px;
369 | @tabs-title-font-size: @font-size-base;
370 |
371 | // BackTop
372 | // ---
373 | @back-top-color: #fff;
374 | @back-top-bg: @text-color-secondary;
375 | @back-top-hover-bg: @text-color;
376 |
377 | // Avatar
378 | // ---
379 | @avatar-size-base: 32px;
380 | @avatar-size-lg: 40px;
381 | @avatar-size-sm: 24px;
382 | @avatar-font-size-base: 18px;
383 | @avatar-font-size-lg: 24px;
384 | @avatar-font-size-sm: 14px;
385 | @avatar-bg: #ccc;
386 | @avatar-color: #fff;
387 | @avatar-border-radius: @border-radius-base;
388 |
389 | // Switch
390 | // ---
391 | @switch-height: 22px;
392 | @switch-sm-height: 16px;
393 |
394 | // Pagination
395 | // ---
396 | @pagination-item-size: 32px;
397 | @pagination-item-size-sm: 24px;
398 |
--------------------------------------------------------------------------------
/src/style/v2-compatible-reset.less:
--------------------------------------------------------------------------------
1 | // For 2.x reset compatibility
2 | // import 'antd/style/v2-compatible-reset';
3 | // or
4 | // @import '~antd/style/v2-compatible-reset.css';
5 | // unify the setting of elements's margin and padding for browsers
6 | 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 {
7 | margin: 0;
8 | padding: 0;
9 | }
10 |
11 | ul,
12 | ol {
13 | list-style: none;
14 | }
15 |
--------------------------------------------------------------------------------
/src/style/v2-compatible-reset.tsx:
--------------------------------------------------------------------------------
1 | import './v2-compatible-reset.less';
2 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "../dist",
4 | "target": "es5",
5 | "module": "es2015",
6 | "moduleResolution": "node",
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "sourceMap": true,
10 | "inlineSources": true,
11 | "noImplicitAny": true,
12 | "declaration": true,
13 | "skipLibCheck": false,
14 | "stripInternal": true,
15 | "allowSyntheticDefaultImports": true,
16 | "noUnusedLocals": false,
17 | "noUnusedParameters": false,
18 | "lib": ["dom", "es2017"],
19 | "types": [
20 | "jasmine"
21 | ],
22 | "typeRoots": [
23 | "../node_modules/@types"
24 | ]
25 | },
26 | "exclude": [
27 | "node_modules"
28 | ],
29 | "files": [
30 | "../scripts/typings.d.ts",
31 | "./index.ts"
32 | ],
33 | "angularCompilerOptions": {
34 | "genDir": "../temp/factories",
35 | "strictMetadataEmit": true,
36 | "skipTemplateCodegen": true
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "../dist/out-tsc",
5 | "baseUrl": ".",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "sourceMap": true,
9 | "declaration": false,
10 | "moduleResolution": "node",
11 | "emitDecoratorMetadata": true,
12 | "experimentalDecorators": true,
13 | "typeRoots": [
14 | "../node_modules/@types"
15 | ],
16 | "types": [
17 | "jasmine",
18 | "webpack"
19 | ],
20 | "lib": [
21 | "es2016",
22 | "dom"
23 | ]
24 | },
25 | "include": [
26 | "../scripts/typings.d.ts",
27 | "../scripts/test.ts",
28 | "**/*.ts",
29 | "**/*.d.ts"
30 | ],
31 | "exclude": [
32 | "../demo",
33 | "../node_modules"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/src/util/convert.ts:
--------------------------------------------------------------------------------
1 | export function toBoolean(value: boolean | string): boolean {
2 | return value === '' || (value && value !== 'false');
3 | }
4 |
5 | const seenDeprecations: any = {};
6 | export function deprecation(msg: string) {
7 | if (seenDeprecations[msg] !== true) {
8 | seenDeprecations[msg] = true;
9 | // tslint:disable-next-line:no-unused-expression
10 | console && console.warn('DEPRECATION: ' + msg);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/tsconfig.publish.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "emitDecoratorMetadata": true,
5 | "experimentalDecorators": true,
6 | "lib": [
7 | "es7",
8 | "dom"
9 | ],
10 | "module": "es2015",
11 | "moduleResolution": "node",
12 | "noEmitOnError": true,
13 | "outDir": "./.lib",
14 | "rootDir": "./.ng_build",
15 | "sourceMap": true,
16 | "target": "es5",
17 | "inlineSources": true,
18 | "stripInternal": true,
19 | "baseUrl": ".",
20 | "paths": {
21 | },
22 | "skipLibCheck": true,
23 | "typeRoots": [
24 | "node_modules/@types"
25 | ]
26 | },
27 | "include": [
28 | "./.ng_build/**/*"
29 | ],
30 | "exclude": [
31 | "./.ng_build/**/*.e2e.ts",
32 | "./.ng_build/**/*.spec.ts"
33 | ],
34 | "angularCompilerOptions": {
35 | "skipTemplateCodegen": true,
36 | "strictMetadataEmit": true,
37 | "genDir": "./.ng_compiled"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": ["node_modules/codelyzer"],
3 | "rules": {
4 | "arrow-return-shorthand": true,
5 | "callable-types": true,
6 | "class-name": true,
7 | "comment-format": [true, "check-space"],
8 | "curly": false,
9 | "eofline": true,
10 | "forin": false,
11 | "import-blacklist": [true, "rxjs"],
12 | "import-spacing": true,
13 | "indent": [true, "spaces"],
14 | "interface-over-type-literal": true,
15 | "label-position": true,
16 | "max-line-length": [false, 140],
17 | "member-access": false,
18 | "member-ordering": [
19 | true,
20 | {
21 | "order": [
22 | "static-field",
23 | "instance-field",
24 | "static-method",
25 | "instance-method"
26 | ]
27 | }
28 | ],
29 | "no-arg": true,
30 | "no-bitwise": true,
31 | "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
32 | "no-construct": true,
33 | "no-debugger": true,
34 | "no-duplicate-super": true,
35 | "no-empty": false,
36 | "no-empty-interface": true,
37 | "no-eval": true,
38 | "no-inferrable-types": [true, "ignore-params"],
39 | "no-misused-new": true,
40 | "no-non-null-assertion": true,
41 | "no-shadowed-variable": true,
42 | "no-string-literal": false,
43 | "no-string-throw": true,
44 | "no-switch-case-fall-through": true,
45 | "no-trailing-whitespace": false,
46 | "no-unnecessary-initializer": true,
47 | "no-unused-expression": true,
48 | "no-use-before-declare": true,
49 | "no-var-keyword": true,
50 | "object-literal-sort-keys": false,
51 | "one-line": [
52 | true,
53 | "check-open-brace",
54 | "check-catch",
55 | "check-else",
56 | "check-whitespace"
57 | ],
58 | "prefer-const": true,
59 | "quotemark": [true, "single"],
60 | "radix": true,
61 | "semicolon": [true, "always"],
62 | "triple-equals": [true, "allow-null-check"],
63 | "typedef-whitespace": [
64 | true,
65 | {
66 | "call-signature": "nospace",
67 | "index-signature": "nospace",
68 | "parameter": "nospace",
69 | "property-declaration": "nospace",
70 | "variable-declaration": "nospace"
71 | }
72 | ],
73 | "typeof-compare": true,
74 | "unified-signatures": true,
75 | "variable-name": false,
76 | "whitespace": [
77 | true,
78 | "check-branch",
79 | "check-decl",
80 | "check-operator",
81 | "check-separator",
82 | "check-type"
83 | ],
84 | "directive-selector": [false, "attribute", "app", "camelCase"],
85 | "component-selector": [false, "element", "app", "kebab-case"],
86 | "use-input-property-decorator": true,
87 | "use-output-property-decorator": true,
88 | "use-host-property-decorator": true,
89 | "no-input-rename": false,
90 | "no-output-rename": false,
91 | "use-life-cycle-interface": true,
92 | "use-pipe-transform-interface": true,
93 | "component-class-suffix": true,
94 | "directive-class-suffix": true,
95 | "no-access-missing-member": true,
96 | "templates-use-public": true,
97 | "invoke-injectable": true
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
| 
10 | 
11 | 
23 | 
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/demo/src/main.ts:
--------------------------------------------------------------------------------
1 | import './polyfills.ts';
2 |
3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4 | import { enableProdMode } from '@angular/core';
5 | import { environment } from './environments/environment';
6 | import { AppDemoModule } from './app/app.module';
7 |
8 | if (environment.production) {
9 | enableProdMode();
10 | }
11 |
12 | platformBrowserDynamic().bootstrapModule(AppDemoModule);
13 |
--------------------------------------------------------------------------------
/demo/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 |
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 |
48 |
49 | /**
50 | * Required to support Web Animations `@angular/platform-browser/animations`.
51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 | **/
53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
54 |
55 |
56 |
57 | /***************************************************************************************************
58 | * Zone JS is required by Angular itself.
59 | */
60 | import 'zone.js/dist/zone'; // Included with Angular CLI.
61 |
62 |
63 |
64 | /***************************************************************************************************
65 | * APPLICATION IMPORTS
66 | */
67 |
68 | /**
69 | * Date, currency, decimal and percent pipes.
70 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
71 | */
72 | // import 'intl'; // Run `npm install --save intl`.
73 | /**
74 | * Need to import at least one locale-data with intl.
75 | */
76 | // import 'intl/locale-data/jsonp/en';
77 |
--------------------------------------------------------------------------------
/demo/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": false,
4 | "emitDecoratorMetadata": true,
5 | "experimentalDecorators": true,
6 | "lib": ["es2017", "dom"],
7 | "types": [
8 | "jasmine",
9 | "webpack"
10 | ],
11 | "mapRoot": "./",
12 | "module": "es6",
13 | "moduleResolution": "node",
14 | "outDir": "../temp/out-tsc",
15 | "sourceMap": true,
16 | "target": "es5",
17 | "typeRoots": [
18 | "../node_modules/@types"
19 | ]
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/demo/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
7 | declare namespace jasmine {
8 | interface Matchers