- var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-
- // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
- var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-
- // Actual matching.
- // Parentheses and commas are optional, but not required.
- // Whitespace can take the place of commas or opening paren
- var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
- var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-
- return {
- CSS_UNIT: new RegExp(CSS_UNIT),
- rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
- rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
- hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
- hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
- hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
- hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
- hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
- hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
- hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
- hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
- };
-})();
-
-// isValidCSSUnit
-// Take in a single string / number and check to see if it looks like a CSS unit
-// (see matchers above for definition).
-function isValidCSSUnit(color) {
- return !!matchers.CSS_UNIT.exec(color);
-}
-
-// stringInputToObject
-// Permissive string parsing. Take in a number of formats, and output an object
-// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v}
-function stringInputToObject(color) {
-
- color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
- var named = false;
- if (names[color]) {
- color = names[color];
- named = true;
- }
- else if (color == 'transparent') {
- return { r: 0, g: 0, b: 0, a: 0, format: "name" };
- }
-
- // Try to match string input using regular expressions.
- // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
- // Just return an object and let the conversion functions handle that.
- // This way the result will be the same whether the tinycolor is initialized with string or object.
- var match;
- if ((match = matchers.rgb.exec(color))) {
- return { r: match[1], g: match[2], b: match[3] };
- }
- if ((match = matchers.rgba.exec(color))) {
- return { r: match[1], g: match[2], b: match[3], a: match[4] };
- }
- if ((match = matchers.hsl.exec(color))) {
- return { h: match[1], s: match[2], l: match[3] };
- }
- if ((match = matchers.hsla.exec(color))) {
- return { h: match[1], s: match[2], l: match[3], a: match[4] };
- }
- if ((match = matchers.hsv.exec(color))) {
- return { h: match[1], s: match[2], v: match[3] };
- }
- if ((match = matchers.hsva.exec(color))) {
- return { h: match[1], s: match[2], v: match[3], a: match[4] };
- }
- if ((match = matchers.hex8.exec(color))) {
- return {
- r: parseIntFromHex(match[1]),
- g: parseIntFromHex(match[2]),
- b: parseIntFromHex(match[3]),
- a: convertHexToDecimal(match[4]),
- format: named ? "name" : "hex8"
- };
- }
- if ((match = matchers.hex6.exec(color))) {
- return {
- r: parseIntFromHex(match[1]),
- g: parseIntFromHex(match[2]),
- b: parseIntFromHex(match[3]),
- format: named ? "name" : "hex"
- };
- }
- if ((match = matchers.hex4.exec(color))) {
- return {
- r: parseIntFromHex(match[1] + '' + match[1]),
- g: parseIntFromHex(match[2] + '' + match[2]),
- b: parseIntFromHex(match[3] + '' + match[3]),
- a: convertHexToDecimal(match[4] + '' + match[4]),
- format: named ? "name" : "hex8"
- };
- }
- if ((match = matchers.hex3.exec(color))) {
- return {
- r: parseIntFromHex(match[1] + '' + match[1]),
- g: parseIntFromHex(match[2] + '' + match[2]),
- b: parseIntFromHex(match[3] + '' + match[3]),
- format: named ? "name" : "hex"
- };
- }
-
- return false;
-}
-
-function validateWCAG2Parms(parms) {
- // return valid WCAG2 parms for isReadable.
- // If input parms are invalid, return {"level":"AA", "size":"small"}
- var level, size;
- parms = parms || {"level":"AA", "size":"small"};
- level = (parms.level || "AA").toUpperCase();
- size = (parms.size || "small").toLowerCase();
- if (level !== "AA" && level !== "AAA") {
- level = "AA";
- }
- if (size !== "small" && size !== "large") {
- size = "small";
- }
- return {"level":level, "size":size};
-}
-
-this.tinycolor = tinycolor;
-
-})()`;
-}
-// It is hacky way to make this function will be compiled preferentially by less
-// resolve error: `ReferenceError: colorPalette is not defined`
-// https://github.com/ant-design/ant-motion/issues/44
-.tinyColorMixin();
-
-// We create a very complex algorithm which take the place of original tint/shade color system
-// to make sure no one can understand it 👻
-// and create an entire color palette magicly by inputing just a single primary color.
-// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
-.colorPaletteMixin() {
-@functions: ~`(function() {
- 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;
- }
- 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 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();
- };
-})()`;
-}
-// It is hacky way to make this function will be compiled preferentially by less
-// resolve error: `ReferenceError: colorPalette is not defined`
-// https://github.com/ant-design/ant-motion/issues/44
-.colorPaletteMixin();
-
-// color palettes
-@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
-@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
-@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
-@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
-@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
-@blue-6: #1890ff;
-@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
-@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
-@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
-@blue-10: color(~`colorPalette('@{blue-6}', 10) `);
-
-@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
-@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
-@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
-@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
-@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
-@purple-6: #722ed1;
-@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
-@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
-@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
-@purple-10: color(~`colorPalette('@{purple-6}', 10) `);
-
-@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
-@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
-@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
-@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
-@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
-@cyan-6: #13c2c2;
-@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
-@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
-@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
-@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);
-
-@green-1: color(~`colorPalette('@{green-6}', 1) `);
-@green-2: color(~`colorPalette('@{green-6}', 2) `);
-@green-3: color(~`colorPalette('@{green-6}', 3) `);
-@green-4: color(~`colorPalette('@{green-6}', 4) `);
-@green-5: color(~`colorPalette('@{green-6}', 5) `);
-@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: #eb2f96;
-@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
-@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
-@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
-@pink-10: color(~`colorPalette('@{pink-6}', 10) `);
-
-@red-1: color(~`colorPalette('@{red-6}', 1) `);
-@red-2: color(~`colorPalette('@{red-6}', 2) `);
-@red-3: color(~`colorPalette('@{red-6}', 3) `);
-@red-4: color(~`colorPalette('@{red-6}', 4) `);
-@red-5: color(~`colorPalette('@{red-6}', 5) `);
-@red-6: #f5222d;
-@red-7: color(~`colorPalette('@{red-6}', 7) `);
-@red-8: color(~`colorPalette('@{red-6}', 8) `);
-@red-9: color(~`colorPalette('@{red-6}', 9) `);
-@red-10: color(~`colorPalette('@{red-6}', 10) `);
-
-@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
-@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
-@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
-@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
-@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
-@orange-6: #fa8c16;
-@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
-@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
-@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
-@orange-10: color(~`colorPalette('@{orange-6}', 10) `);
-
-@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
-@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
-@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
-@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
-@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
-@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) `);
-
-// The prefix to use on all css classes from ant.
-@ant-prefix : ant;
-
-// -------- Colors -----------
-@primary-color : @blue-6;
-@info-color : @blue-6;
-@success-color : @green-6;
-@processing-color : @blue-6;
-@error-color : @red-6;
-@highlight-color : @red-6;
-@warning-color : @gold-6;
-@normal-color : #d9d9d9;
-
-// Color used by default to control hover and active backgrounds and for
-// alert info backgrounds.
-@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
-@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
-@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
-@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
-@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%)
-@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
-@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
-@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
-@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
-@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
-
-// Base Scaffolding Variables
-// ---
-
-// Background color for ``
-@body-background : #fff;
-// Base background color for most components
-@component-background : #fff;
-@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
-"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-@heading-color : fade(#000, 85%);
-@text-color : fade(#000, 65%);
-@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-variant-base : tabular-nums;
-@font-size-base : 14px;
-@font-size-lg : @font-size-base + 2px;
-@font-size-sm : 12px;
-@line-height-base : 1.5;
-@border-radius-base : 4px;
-@border-radius-sm : 2px;
-
-// vertical paddings
-@padding-lg : 24px; // containers
-@padding-md : 16px; // small containers and buttons
-@padding-sm : 12px; // Form controls and items
-@padding-xs : 8px; // small items
-
-// vertical padding for all form controls
-@control-padding-horizontal: @padding-sm;
-@control-padding-horizontal-sm: @padding-xs;
-
-// The background colors for active and hover states for things like
-// list items or table cells.
-@item-active-bg : @primary-1;
-@item-hover-bg : @primary-1;
-
-// ICONFONT
-@iconfont-css-prefix : anticon;
-
-// LINK
-@link-color : @primary-color;
-@link-hover-color : color(~`colorPalette("@{link-color}", 5)`);
-@link-active-color : color(~`colorPalette("@{link-color}", 7)`);
-@link-decoration : none;
-@link-hover-decoration : none;
-
-// Animation
-@ease-base-out : cubic-bezier(0.7, 0.3, 0.1, 1);
-@ease-base-in : cubic-bezier(0.9, 0, 0.3, 0.7);
-@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
-@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
-@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
-@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
-@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
-@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
-@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
-@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
-@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
-@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
-@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
-@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
-
-// Border color
-@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
-
-// Outline
-@outline-blur-size : 0;
-@outline-width : 2px;
-@outline-color : @primary-color;
-
-@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%);
-@disabled-bg : @background-color-base;
-@disabled-color-dark : fade(#fff, 35%);
-
-// Shadow
-@shadow-color : rgba(0, 0, 0, .15);
-@box-shadow-base : @shadow-1-down;
-@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 : 400;
-@btn-border-radius-base : @border-radius-base;
-@btn-border-radius-sm : @border-radius-base;
-
-@btn-primary-color : #fff;
-@btn-primary-bg : @primary-color;
-
-@btn-default-color : @text-color;
-@btn-default-bg : #fff;
-@btn-default-border : @border-color-base;
-
-@btn-danger-color : @error-color;
-@btn-danger-bg : @background-color-base;
-@btn-danger-border : @border-color-base;
-
-@btn-disable-color : @disabled-color;
-@btn-disable-bg : @disabled-bg;
-@btn-disable-border : @border-color-base;
-
-@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 @padding-xs - 1px;
-
-@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-5;
-
-// Checkbox
-@checkbox-size : 16px;
-@checkbox-color : @primary-color;
-@checkbox-check-color : #fff;
-@checkbox-border-width : @border-width-base;
-
-// Radio
-@radio-size : 16px;
-@radio-dot-color : @primary-color;
-
-// Radio buttons
-@radio-button-bg : @btn-default-bg;
-@radio-button-color : @btn-default-color;
-@radio-button-hover-color : @primary-5;
-@radio-button-active-color : @primary-7;
-
-// Media queries breakpoints
-// Extra small screen / phone
-@screen-xs : 480px;
-@screen-xs-min : @screen-xs;
-
-// Small screen / tablet
-@screen-sm : 576px;
-@screen-sm-min : @screen-sm;
-
-// Medium screen / desktop
-@screen-md : 768px;
-@screen-md-min : @screen-md;
-
-// Large screen / wide desktop
-@screen-lg : 992px;
-@screen-lg-min : @screen-lg;
-
-// 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 : #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 : #002140;
-@layout-trigger-color : #fff;
-@layout-zero-trigger-width : 36px;
-@layout-zero-trigger-height : 42px;
-// Layout light theme
-@layout-sider-background-light : #fff;
-@layout-trigger-background-light: #fff;
-@layout-trigger-color-light : @text-color;
-
-// z-index list
-@zindex-affix : 10;
-@zindex-back-top : 10;
-@zindex-modal-mask : 1000;
-@zindex-modal : 1000;
-@zindex-notification : 1010;
-@zindex-message : 1010;
-@zindex-popover : 1030;
-@zindex-picker : 1050;
-@zindex-dropdown : 1050;
-@zindex-tooltip : 1060;
-
-// Animation
-@animation-duration-slow: 0.3s; // Modal
-@animation-duration-base: 0.2s;
-@animation-duration-fast: 0.1s; // Tooltip
-
-// Form
-// ---
-@label-required-color : @highlight-color;
-@label-color : @heading-color;
-@form-item-margin-bottom : 24px;
-@form-item-trailing-colon : true;
-@form-vertical-label-padding : 0 0 8px;
-@form-vertical-label-margin : 0;
-
-// Input
-// ---
-@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;
-@input-outline-offset : 0 0;
-
-// Tooltip
-// ---
-//* Tooltip max width
-@tooltip-max-width: 250px;
-//** Tooltip text color
-@tooltip-color: #fff;
-//** Tooltip background color
-@tooltip-bg: rgba(0, 0, 0, 0.75);
-//** Tooltip arrow width
-@tooltip-arrow-width: 5px;
-//** Tooltip distance with trigger
-@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
-//** Tooltip arrow color
-@tooltip-arrow-color: @tooltip-bg;
-
-// Popover
-// ---
-//** Popover body background color
-@popover-bg: #fff;
-//** Popover text color
-@popover-color: @text-color;
-//** Popover maximum width
-@popover-min-width: 177px;
-//** Popover arrow width
-@popover-arrow-width: 6px;
-//** Popover arrow color
-@popover-arrow-color: @popover-bg;
-//** Popover outer arrow width
-//** Popover outer arrow color
-@popover-arrow-outer-color: @popover-bg;
-//** Popover distance with trigger
-@popover-distance: @popover-arrow-width + 4px;
-
-// Modal
-// --
-@modal-header-bg: @component-background;
-@modal-mask-bg: rgba(0, 0, 0, 0.65);
-
-// Progress
-// --
-@progress-default-color: @processing-color;
-@progress-remaining-color: @background-color-base;
-@progress-text-color: @text-color;
-
-// Menu
-// ---
-@menu-inline-toplevel-item-height: 40px;
-@menu-item-height: 40px;
-@menu-collapsed-width: 80px;
-@menu-bg: @component-background;
-@menu-popup-bg: @component-background;
-@menu-item-color: @text-color;
-@menu-highlight-color: @primary-color;
-@menu-item-active-bg: @item-active-bg;
-@menu-item-active-border-width: 3px;
-@menu-item-group-title-color: @text-color-secondary;
-// dark theme
-@menu-dark-color: @text-color-secondary-dark;
-@menu-dark-bg: @layout-header-background;
-@menu-dark-arrow-color: #fff;
-@menu-dark-submenu-bg: #000c17;
-@menu-dark-highlight-color: #fff;
-@menu-dark-item-active-bg: @primary-color;
-
-// Spin
-// ---
-@spin-dot-size-sm: 14px;
-@spin-dot-size: 20px;
-@spin-dot-size-lg: 32px;
-
-// Table
-// --
-@table-header-bg: @background-color-light;
-@table-header-color: @heading-color;
-@table-header-sort-bg: @background-color-base;
-@table-body-sort-bg: rgba(0, 0, 0, 0.01);
-@table-row-hover-bg: @primary-1;
-@table-selected-row-bg: #fafafa;
-@table-expanded-row-bg: #fbfbfb;
-@table-padding-vertical: 16px;
-@table-padding-horizontal: 16px;
-@table-border-radius-base : @border-radius-base;
-
-// Tag
-// --
-@tag-default-bg: @background-color-light;
-@tag-default-color: @text-color;
-@tag-font-size: @font-size-sm;
-
-// TimePicker
-// ---
-@time-picker-panel-column-width: 56px;
-@time-picker-panel-width: @time-picker-panel-column-width * 3;
-@time-picker-selected-bg: @background-color-base;
-
-// Carousel
-// ---
-@carousel-dot-width: 16px;
-@carousel-dot-height: 3px;
-@carousel-dot-active-width: 24px;
-
-// Badge
-// ---
-@badge-height: 20px;
-@badge-dot-size: 6px;
-@badge-font-size: @font-size-sm;
-@badge-font-weight: normal;
-@badge-status-size: 6px;
-
-// Rate
-// ---
-@rate-star-color: @yellow-6;
-@rate-star-bg: @border-color-split;
-
-// Card
-// ---
-@card-head-color: @heading-color;
-@card-head-background: transparent;
-@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, 0.09);
-
-// Comment
-// ---
-@comment-padding-base: 16px 0;
-@comment-nest-indent: 44px;
-@comment-author-name-color: @text-color-secondary;
-@comment-author-time-color: #ccc;
-@comment-action-color: @text-color-secondary;
-@comment-action-hover-color: #595959;
-
-// Tabs
-// ---
-@tabs-card-head-background: @background-color-light;
-@tabs-card-height: 40px;
-@tabs-card-active-color: @primary-color;
-@tabs-title-font-size: @font-size-base;
-@tabs-title-font-size-lg: @font-size-lg;
-@tabs-title-font-size-sm: @font-size-base;
-@tabs-ink-bar-color: @primary-color;
-@tabs-bar-margin: 0 0 16px 0;
-@tabs-horizontal-margin: 0 32px 0 0;
-@tabs-horizontal-padding: 12px 16px;
-@tabs-horizontal-padding-lg: 16px;
-@tabs-horizontal-padding-sm: 8px 16px;
-@tabs-vertical-padding: 8px 24px;
-@tabs-vertical-margin: 0 0 16px 0;
-@tabs-scrolling-size: 32px;
-@tabs-highlight-color: @primary-color;
-@tabs-hover-color: @primary-5;
-@tabs-active-color: @primary-7;
-
-// BackTop
-// ---
-@back-top-color: #fff;
-@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;
-@avatar-font-size-base: 18px;
-@avatar-font-size-lg: 24px;
-@avatar-font-size-sm: 14px;
-@avatar-bg: #ccc;
-@avatar-color: #fff;
-@avatar-border-radius: @border-radius-base;
-
-// Switch
-// ---
-@switch-height: 22px;
-@switch-sm-height: 16px;
-@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
-@switch-disabled-opacity: 0.4;
-@switch-color: @primary-color;
-
-// Pagination
-// ---
-@pagination-item-size: 32px;
-@pagination-item-size-sm: 24px;
-@pagination-font-family: Arial;
-@pagination-font-weight-active: 500;
-
-// Breadcrumb
-// ---
-@breadcrumb-base-color: @text-color-secondary;
-@breadcrumb-last-item-color: @text-color;
-@breadcrumb-font-size: @font-size-base;
-@breadcrumb-icon-font-size: @font-size-base;
-@breadcrumb-link-color: @text-color-secondary;
-@breadcrumb-link-color-hover: @primary-5;
-@breadcrumb-separator-color: @text-color-secondary;
-@breadcrumb-separator-margin: 0 @padding-xs;
-
-// Slider
-// ---
-@slider-margin: 14px 6px 10px;
-@slider-rail-background-color: @background-color-base;
-@slider-rail-background-color-hover: #e1e1e1;
-@slider-track-background-color: @primary-5;
-@slider-track-background-color-hover: @primary-6;
-@slider-handle-color: @primary-5;
-@slider-handle-color-hover: @primary-6;
-@slider-handle-color-focus: tint(@primary-color, 20%);
-@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
-@slider-handle-color-tooltip-open: @primary-color;
-@slider-dot-border-color: @border-color-split;
-@slider-dot-border-color-active: @primary-5;
-@slider-disabled-color: @disabled-color;
-@slider-disabled-background-color: @component-background;
-
-// Tree
-// ---
-@tree-title-height: 24px;
-@tree-child-padding: 18px;
-@tree-directory-selected-color: #fff;
-@tree-directory-selected-bg: @primary-color;
-
-// Collapse
-// ---
-@collapse-header-padding: 12px 0 12px 40px;
-@collapse-header-bg: @background-color-light;
-@collapse-content-padding: @padding-md;
-@collapse-content-bg: @component-background;
-
-// Skeleton
-// ---
-@skeleton-color: #f2f2f2;
-
-// Transfer
-// ---
-@transfer-disabled-bg: @disabled-bg;
-
-// Message
-// ---
-@message-notice-content-padding: 10px 16px;
-
-// Motion
-// ---
-@wave-animation-width: 6px;
-
-// Alert
-// ---
-@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
-@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
-@alert-success-icon-color: @success-color;
-@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
-@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
-@alert-info-icon-color: @info-color;
-@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
-@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
-@alert-warning-icon-color: @warning-color;
-@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
-@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
-@alert-error-icon-color: @error-color;
-
-// List
-// ---
-@list-empty-text-padding: @padding-md;
-@list-item-padding: @padding-sm 0;
-@list-item-content-margin: 0 0 @padding-md 0;
-@list-item-meta-margin-bottom: @padding-md;
-@list-item-meta-avatar-margin-right: @padding-md;
-@list-item-meta-title-margin-bottom: @padding-sm;
-
-// Mixins
-// --------------------------------------------------
-// Sizing shortcuts
-
-.size(@width; @height) {
- width: @width;
- height: @height;
-}
-
-.square(@size) {
- .size(@size; @size);
-}
-
-// Compatibility for browsers.
-
-// Placeholder text
-.placeholder(@color: @input-placeholder-color) {
- // Firefox
- &::-moz-placeholder {
- color: @color;
- opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
- }
- // Internet Explorer 10+
- &:-ms-input-placeholder {
- color: @color;
- }
- // Safari and Chrome
- &::-webkit-input-placeholder {
- color: @color;
- }
-}
-
-// mixins for clearfix
-// ------------------------
-.clearfix() {
- zoom: 1;
- &:before,
- &:after {
- content: '';
- display: table;
- }
- &:after {
- clear: both;
- }
-}
-
-.iconfont-mixin() {
- display: inline-block;
- font-style: normal;
- vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
- text-align: center;
- text-transform: none;
- line-height: 0;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- > * {
- line-height: 1;
- }
-
- svg {
- display: inline-block;
- }
-
- &:before {
- display: none; // dont display old icon.
- }
-
- & &-icon {
- display: block;
- }
-}
-
-// for iconfont font size
-// fix chrome 12px bug, support ie
-.iconfont-size-under-12px(@size, @rotate: 0deg) {
- display: inline-block;
- @font-scale: unit(@size / 12px);
- font-size: 12px;
- // IE9
- font-size: ~'@{size} \9';
- transform: scale(@font-scale) rotate(@rotate);
- :root & {
- font-size: @font-size-sm; // reset IE9 and above
- }
-}
-
-.motion-common(@duration: @animation-duration-base) {
- animation-duration: @duration;
- animation-fill-mode: both;
-}
-
-.motion-common-leave(@duration: @animation-duration-base) {
- animation-duration: @duration;
- animation-fill-mode: both;
-}
-
-.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
- .@{className}-enter,
- .@{className}-appear {
- .motion-common(@duration);
- animation-play-state: paused;
- }
- .@{className}-leave {
- .motion-common-leave(@duration);
- animation-play-state: paused;
- }
- .@{className}-enter.@{className}-enter-active,
- .@{className}-appear.@{className}-appear-active {
- animation-name: ~'@{keyframeName}In';
- animation-play-state: running;
- }
- .@{className}-leave.@{className}-leave-active {
- animation-name: ~'@{keyframeName}Out';
- animation-play-state: running;
- pointer-events: none;
- }
-}
-
-.reset-component() {
- font-family: @font-family;
- font-size: @font-size-base;
- font-variant: @font-variant-base;
- line-height: @line-height-base;
- color: @text-color;
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-/* 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
-
-@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
-html,
-body {
- .square(100%);
-}
-
-// remove the clear button of a text input control in IE10+
-input::-ms-clear,
-input::-ms-reveal {
- display: none;
-}
-
-// 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
-}
-
-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 ``-`` 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: 0.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: 0.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: -0.25em;
-}
-sup {
- top: -0.5em;
-}
-
-//
-// Links
-//
-
-a {
- color: @link-color;
- background-color: transparent; // remove the gray background on active links in IE 10.
- text-decoration: @link-decoration;
- outline: none;
- cursor: pointer;
- transition: color 0.3s;
- -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
-
- &:focus {
- text-decoration: underline;
- text-decoration-skip: ink;
- }
-
- &:hover {
- color: @link-hover-color;
- }
-
- &:active {
- color: @link-active-color;
- }
-
- &:active,
- &:hover {
- outline: 0;
- text-decoration: @link-hover-decoration;
- }
-
- &[disabled] {
- color: @disabled-color;
- cursor: not-allowed;
- pointer-events: none;
- }
-}
-
-//
-// Code
-//
-
-pre,
-code,
-kbd,
-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 `
` 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: 0.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: 0.2em;
- background-color: @yellow-1;
-}
-
-::selection {
- background: @primary-color;
- color: #fff;
-}
-
-// Utility classes
-.clearfix {
- .clearfix();
-}
-
-.@{iconfont-css-prefix} {
- .iconfont-mixin();
-}
-
-.@{iconfont-css-prefix}-spin:before {
- display: inline-block;
- animation: loadingCircle 1s infinite linear;
-}
-.@{iconfont-css-prefix}-spin {
- display: inline-block;
- animation: loadingCircle 1s infinite linear;
-}
-
-.fade-motion(@className, @keyframeName) {
- .make-motion(@className, @keyframeName);
- .@{className}-enter,
- .@{className}-appear {
- opacity: 0;
- animation-timing-function: linear;
- }
- .@{className}-leave {
- animation-timing-function: linear;
- }
-}
-
-.fade-motion(fade, antFade);
-
-@keyframes antFadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes antFadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
-
-.move-motion(@className, @keyframeName) {
- .make-motion(@className, @keyframeName);
- .@{className}-enter,
- .@{className}-appear {
- opacity: 0;
- animation-timing-function: @ease-out-circ;
- }
- .@{className}-leave {
- animation-timing-function: @ease-in-circ;
- }
-}
-
-.move-motion(move-up, antMoveUp);
-.move-motion(move-down, antMoveDown);
-.move-motion(move-left, antMoveLeft);
-.move-motion(move-right, antMoveRight);
-
-@keyframes antMoveDownIn {
- 0% {
- transform-origin: 0 0;
- transform: translateY(100%);
- opacity: 0;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateY(0%);
- opacity: 1;
- }
-}
-
-@keyframes antMoveDownOut {
- 0% {
- transform-origin: 0 0;
- transform: translateY(0%);
- opacity: 1;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateY(100%);
- opacity: 0;
- }
-}
-
-@keyframes antMoveLeftIn {
- 0% {
- transform-origin: 0 0;
- transform: translateX(-100%);
- opacity: 0;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateX(0%);
- opacity: 1;
- }
-}
-
-@keyframes antMoveLeftOut {
- 0% {
- transform-origin: 0 0;
- transform: translateX(0%);
- opacity: 1;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateX(-100%);
- opacity: 0;
- }
-}
-
-@keyframes antMoveRightIn {
- 0% {
- opacity: 0;
- transform-origin: 0 0;
- transform: translateX(100%);
- }
- 100% {
- opacity: 1;
- transform-origin: 0 0;
- transform: translateX(0%);
- }
-}
-
-@keyframes antMoveRightOut {
- 0% {
- transform-origin: 0 0;
- transform: translateX(0%);
- opacity: 1;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateX(100%);
- opacity: 0;
- }
-}
-
-@keyframes antMoveUpIn {
- 0% {
- transform-origin: 0 0;
- transform: translateY(-100%);
- opacity: 0;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateY(0%);
- opacity: 1;
- }
-}
-
-@keyframes antMoveUpOut {
- 0% {
- transform-origin: 0 0;
- transform: translateY(0%);
- opacity: 1;
- }
- 100% {
- transform-origin: 0 0;
- transform: translateY(-100%);
- opacity: 0;
- }
-}
-
-@keyframes loadingCircle {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-[ant-click-animating],
-[ant-click-animating-without-extra-node] {
- position: relative;
-}
-
-[ant-click-animating-without-extra-node]:after,
-.ant-click-animating-node {
- content: '';
- position: absolute;
- top: -1px;
- left: -1px;
- bottom: -1px;
- right: -1px;
- border-radius: inherit;
- border: 0 solid @primary-color;
- opacity: 0.2;
- animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
- animation-fill-mode: forwards;
- display: block;
- pointer-events: none;
-}
-
-@keyframes waveEffect {
- 100% {
- top: -@wave-animation-width;
- left: -@wave-animation-width;
- bottom: -@wave-animation-width;
- right: -@wave-animation-width;
- border-width: @wave-animation-width;
- }
-}
-
-@keyframes fadeEffect {
- 100% {
- opacity: 0;
- }
-}
-
-.slide-motion(@className, @keyframeName) {
- .make-motion(@className, @keyframeName);
- .@{className}-enter,
- .@{className}-appear {
- opacity: 0;
- animation-timing-function: @ease-out-quint;
- }
- .@{className}-leave {
- animation-timing-function: @ease-in-quint;
- }
-}
-
-.slide-motion(slide-up, antSlideUp);
-.slide-motion(slide-down, antSlideDown);
-.slide-motion(slide-left, antSlideLeft);
-.slide-motion(slide-right, antSlideRight);
-
-@keyframes antSlideUpIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(0.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
-}
-
-@keyframes antSlideUpOut {
- 0% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(0.8);
- }
-}
-
-@keyframes antSlideDownIn {
- 0% {
- opacity: 0;
- transform-origin: 100% 100%;
- transform: scaleY(0.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 100% 100%;
- transform: scaleY(1);
- }
-}
-
-@keyframes antSlideDownOut {
- 0% {
- opacity: 1;
- transform-origin: 100% 100%;
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 100% 100%;
- transform: scaleY(0.8);
- }
-}
-
-@keyframes antSlideLeftIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleX(0.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleX(1);
- }
-}
-
-@keyframes antSlideLeftOut {
- 0% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleX(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleX(0.8);
- }
-}
-
-@keyframes antSlideRightIn {
- 0% {
- opacity: 0;
- transform-origin: 100% 0%;
- transform: scaleX(0.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 100% 0%;
- transform: scaleX(1);
- }
-}
-
-@keyframes antSlideRightOut {
- 0% {
- opacity: 1;
- transform-origin: 100% 0%;
- transform: scaleX(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 100% 0%;
- transform: scaleX(0.8);
- }
-}
-
-.swing-motion(@className, @keyframeName) {
- .@{className}-enter,
- .@{className}-appear {
- .motion-common();
- animation-play-state: paused;
- }
- .@{className}-enter.@{className}-enter-active,
- .@{className}-appear.@{className}-appear-active {
- animation-name: ~'@{keyframeName}In';
- animation-play-state: running;
- }
-}
-
-.swing-motion(swing, antSwing);
-
-@keyframes antSwingIn {
- 0%,
- 100% {
- transform: translateX(0);
- }
- 20% {
- transform: translateX(-10px);
- }
- 40% {
- transform: translateX(10px);
- }
- 60% {
- transform: translateX(-5px);
- }
- 80% {
- transform: translateX(5px);
- }
-}
-
-.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
- .make-motion(@className, @keyframeName, @duration);
- .@{className}-enter,
- .@{className}-appear {
- transform: scale(0); // need this by yiminghe
- animation-timing-function: @ease-out-circ;
- }
- .@{className}-leave {
- animation-timing-function: @ease-in-out-circ;
- }
-}
-
-// For Modal, Select choosen item
-.zoom-motion(zoom, antZoom);
-// For Popover, Popconfirm, Dropdown
-.zoom-motion(zoom-big, antZoomBig);
-// For Tooltip
-.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);
-
-.zoom-motion(zoom-up, antZoomUp);
-.zoom-motion(zoom-down, antZoomDown);
-.zoom-motion(zoom-left, antZoomLeft);
-.zoom-motion(zoom-right, antZoomRight);
-
-@keyframes antZoomIn {
- 0% {
- opacity: 0;
- transform: scale(0.2);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
-}
-
-@keyframes antZoomOut {
- 0% {
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform: scale(0.2);
- }
-}
-
-@keyframes antZoomBigIn {
- 0% {
- opacity: 0;
- transform: scale(0.8);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@keyframes antZoomBigOut {
- 0% {
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform: scale(0.8);
- }
-}
-
-@keyframes antZoomUpIn {
- 0% {
- opacity: 0;
- transform-origin: 50% 0%;
- transform: scale(0.8);
- }
- 100% {
- transform-origin: 50% 0%;
- transform: scale(1);
- }
-}
-
-@keyframes antZoomUpOut {
- 0% {
- transform-origin: 50% 0%;
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 50% 0%;
- transform: scale(0.8);
- }
-}
-
-@keyframes antZoomLeftIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 50%;
- transform: scale(0.8);
- }
- 100% {
- transform-origin: 0% 50%;
- transform: scale(1);
- }
-}
-
-@keyframes antZoomLeftOut {
- 0% {
- transform-origin: 0% 50%;
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 50%;
- transform: scale(0.8);
- }
-}
-
-@keyframes antZoomRightIn {
- 0% {
- opacity: 0;
- transform-origin: 100% 50%;
- transform: scale(0.8);
- }
- 100% {
- transform-origin: 100% 50%;
- transform: scale(1);
- }
-}
-
-@keyframes antZoomRightOut {
- 0% {
- transform-origin: 100% 50%;
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 100% 50%;
- transform: scale(0.8);
- }
-}
-
-@keyframes antZoomDownIn {
- 0% {
- opacity: 0;
- transform-origin: 50% 100%;
- transform: scale(0.8);
- }
- 100% {
- transform-origin: 50% 100%;
- transform: scale(1);
- }
-}
-
-@keyframes antZoomDownOut {
- 0% {
- transform-origin: 50% 100%;
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 50% 100%;
- transform: scale(0.8);
- }
-}
-
-// For common/openAnimation
-.ant-motion-collapse {
- overflow: hidden;
- &-active {
- transition: height 0.15s @ease-in-out, opacity 0.15s @ease-in-out !important;
- }
-}
-
-// grid muse be first
-
-// mixins for grid system
-// ------------------------
-.make-row(@gutter: @grid-gutter-width) {
- position: relative;
- margin-left: (@gutter / -2);
- margin-right: (@gutter / -2);
- height: auto;
- .clearfix;
-}
-
-.make-grid-columns() {
- .col(@index) {
- @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
- .col((@index + 1), @item);
- }
- .col(@index, @list) when (@index =< @grid-columns) {
- @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
- .col((@index + 1), ~'@{list}, @{item}');
- }
- .col(@index, @list) when (@index > @grid-columns) {
- @{list} {
- position: relative;
- // Prevent columns from collapsing when empty
- min-height: 1px;
- padding-left: (@grid-gutter-width / 2);
- padding-right: (@grid-gutter-width / 2);
- }
- }
- .col(1);
-}
-
-.float-grid-columns(@class) {
- .col(@index) {
- // initial
- @item: ~'.@{ant-prefix}-col@{class}-@{index}';
- .col((@index + 1), @item);
- }
- .col(@index, @list) when (@index =< @grid-columns) {
- // general
- @item: ~'.@{ant-prefix}-col@{class}-@{index}';
- .col((@index + 1), ~'@{list}, @{item}');
- }
- .col(@index, @list) when (@index > @grid-columns) {
- // terminal
- @{list} {
- float: left;
- flex: 0 0 auto;
- }
- }
- .col(1); // kickstart it
-}
-
-.loop-grid-columns(@index, @class) when (@index > 0) {
- .@{ant-prefix}-col@{class}-@{index} {
- display: block;
- box-sizing: border-box;
- width: percentage((@index / @grid-columns));
- }
- .@{ant-prefix}-col@{class}-push-@{index} {
- left: percentage((@index / @grid-columns));
- }
- .@{ant-prefix}-col@{class}-pull-@{index} {
- right: percentage((@index / @grid-columns));
- }
- .@{ant-prefix}-col@{class}-offset-@{index} {
- margin-left: percentage((@index / @grid-columns));
- }
- .@{ant-prefix}-col@{class}-order-@{index} {
- order: @index;
- }
- .loop-grid-columns((@index - 1), @class);
-}
-
-.loop-grid-columns(@index, @class) when (@index = 0) {
- .@{ant-prefix}-col@{class}-@{index} {
- display: none;
- }
- .@{ant-prefix}-col-push-@{index} {
- left: auto;
- }
- .@{ant-prefix}-col-pull-@{index} {
- right: auto;
- }
- .@{ant-prefix}-col@{class}-push-@{index} {
- left: auto;
- }
- .@{ant-prefix}-col@{class}-pull-@{index} {
- right: auto;
- }
- .@{ant-prefix}-col@{class}-offset-@{index} {
- margin-left: 0;
- }
- .@{ant-prefix}-col@{class}-order-@{index} {
- order: 0;
- }
-}
-
-.make-grid(@class: ~'') {
- .float-grid-columns(@class);
- .loop-grid-columns(@grid-columns, @class);
-}
-
-// Grid system
-.@{ant-prefix}-row {
- .make-row();
- display: block;
- box-sizing: border-box;
-}
-
-.@{ant-prefix}-row-flex {
- display: flex;
- flex-flow: row wrap;
-
- &:before,
- &:after {
- display: flex;
- }
-}
-
-// x轴原点
-.@{ant-prefix}-row-flex-start {
- justify-content: flex-start;
-}
-
-// x轴居中
-.@{ant-prefix}-row-flex-center {
- justify-content: center;
-}
-
-// x轴反方向
-.@{ant-prefix}-row-flex-end {
- justify-content: flex-end;
-}
-
-// x轴平分
-.@{ant-prefix}-row-flex-space-between {
- justify-content: space-between;
-}
-
-// x轴有间隔地平分
-.@{ant-prefix}-row-flex-space-around {
- justify-content: space-around;
-}
-
-// 顶部对齐
-.@{ant-prefix}-row-flex-top {
- align-items: flex-start;
-}
-
-// 居中对齐
-.@{ant-prefix}-row-flex-middle {
- align-items: center;
-}
-
-// 底部对齐
-.@{ant-prefix}-row-flex-bottom {
- align-items: flex-end;
-}
-
-.@{ant-prefix}-col {
- position: relative;
- display: block;
-}
-
-.make-grid-columns();
-.make-grid();
-
-// Extra small grid
-//
-// Columns, offsets, pushes, and pulls for extra small devices like
-// smartphones.
-
-.make-grid(-xs);
-
-// Small grid
-//
-// Columns, offsets, pushes, and pulls for the small device range, from phones
-// to tablets.
-
-@media (min-width: @screen-sm-min) {
- .make-grid(-sm);
-}
-
-// Medium grid
-//
-// Columns, offsets, pushes, and pulls for the desktop device range.
-
-@media (min-width: @screen-md-min) {
- .make-grid(-md);
-}
-
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
-
-@media (min-width: @screen-lg-min) {
- .make-grid(-lg);
-}
-
-// Extra Large grid
-//
-// Columns, offsets, pushes, and pulls for the full hd device range.
-
-@media (min-width: @screen-xl-min) {
- .make-grid(-xl);
-}
-
-// Extra Extra Large grid
-//
-// Columns, offsets, pushes, and pulls for the full hd device range.
-
-@media (min-width: @screen-xxl-min) {
- .make-grid(-xxl);
-}
-
-.@{ant-prefix}-affix {
- position: fixed;
- z-index: @zindex-affix;
-}
-
-@alert-prefix-cls: ~'@{ant-prefix}-alert';
-
-@alert-message-color: @heading-color;
-@alert-text-color: @text-color;
-@alert-close-color: @text-color-secondary;
-@alert-close-hover-color: #404040;
-
-.@{alert-prefix-cls} {
- .reset-component;
- position: relative;
- padding: 8px 15px 8px 37px;
- border-radius: @border-radius-base;
-
- &&-no-icon {
- padding: 8px 15px;
- }
-
- &&-closable {
- padding-right: 30px;
- }
-
- &-icon {
- top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
- left: 16px;
- position: absolute;
- }
-
- &-description {
- font-size: @font-size-base;
- line-height: 22px;
- display: none;
- }
-
- &-success {
- border: @border-width-base @border-style-base @alert-success-border-color;
- background-color: @alert-success-bg-color;
- .@{alert-prefix-cls}-icon {
- color: @alert-success-icon-color;
- }
- }
-
- &-info {
- border: @border-width-base @border-style-base @alert-info-border-color;
- background-color: @alert-info-bg-color;
- .@{alert-prefix-cls}-icon {
- color: @alert-info-icon-color;
- }
- }
-
- &-warning {
- border: @border-width-base @border-style-base @alert-warning-border-color;
- background-color: @alert-warning-bg-color;
- .@{alert-prefix-cls}-icon {
- color: @alert-warning-icon-color;
- }
- }
-
- &-error {
- border: @border-width-base @border-style-base @alert-error-border-color;
- background-color: @alert-error-bg-color;
- .@{alert-prefix-cls}-icon {
- color: @alert-error-icon-color;
- }
- }
-
- &-close-icon {
- font-size: @font-size-sm;
- position: absolute;
- right: 16px;
- top: 8px;
- line-height: 22px;
- overflow: hidden;
- cursor: pointer;
-
- .@{iconfont-css-prefix}-close {
- color: @alert-close-color;
- transition: color 0.3s;
- &:hover {
- color: @alert-close-hover-color;
- }
- }
- }
-
- &-close-text {
- position: absolute;
- right: 16px;
- }
-
- &-with-description {
- padding: 15px 15px 15px 64px;
- position: relative;
- border-radius: @border-radius-base;
- color: @alert-text-color;
- line-height: @line-height-base;
- }
-
- &-with-description&-no-icon {
- padding: 15px;
- }
-
- &-with-description &-icon {
- position: absolute;
- top: 16px;
- left: 24px;
- font-size: 24px;
- }
-
- &-with-description &-close-icon {
- position: absolute;
- top: 16px;
- right: 16px;
- cursor: pointer;
- font-size: @font-size-base;
- }
-
- &-with-description &-message {
- font-size: @font-size-lg;
- color: @alert-message-color;
- display: block;
- margin-bottom: 4px;
- }
-
- &-with-description &-description {
- display: block;
- }
-
- &&-close {
- height: 0 !important;
- margin: 0;
- padding-top: 0;
- padding-bottom: 0;
- transition: all 0.3s @ease-in-out-circ;
- transform-origin: 50% 0;
- }
-
- &-slide-up-leave {
- animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
- animation-fill-mode: both;
- }
-
- &-banner {
- border-radius: 0;
- border: 0;
- margin-bottom: 0;
- }
-}
-
-@keyframes antAlertSlideUpIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(0);
- }
- 100% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
-}
-
-@keyframes antAlertSlideUpOut {
- 0% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(0);
- }
-}
-
-@anchor-border-width: 2px;
-
-.@{ant-prefix}-anchor {
- .reset-component;
- position: relative;
- padding-left: @anchor-border-width;
-
- &-wrapper {
- background-color: @component-background;
- overflow: auto;
- padding-left: 4px;
- margin-left: -4px;
- }
-
- &-ink {
- position: absolute;
- height: 100%;
- left: 0;
- top: 0;
- &:before {
- content: ' ';
- position: relative;
- width: @anchor-border-width;
- height: 100%;
- display: block;
- background-color: @border-color-split;
- margin: 0 auto;
- }
- &-ball {
- display: none;
- position: absolute;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- border: 2px solid @primary-color;
- background-color: @component-background;
- left: 50%;
- transition: top 0.3s ease-in-out;
- transform: translateX(-50%);
- &.visible {
- display: inline-block;
- }
- }
- }
-
- &.fixed &-ink &-ink-ball {
- display: none;
- }
-
- &-link {
- padding: 7px 0 7px 16px;
- line-height: 1.143;
-
- &-title {
- display: block;
- position: relative;
- transition: all 0.3s;
- color: @text-color;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 6px;
-
- &:only-child {
- margin-bottom: 0;
- }
- }
-
- &-active > &-title {
- color: @primary-color;
- }
- }
-
- &-link &-link {
- padding-top: 5px;
- padding-bottom: 5px;
- }
-}
-
-@avatar-prefix-cls: ~'@{ant-prefix}-avatar';
-
-.@{avatar-prefix-cls} {
- .reset-component;
- display: inline-block;
- text-align: center;
- background: @avatar-bg;
- color: @avatar-color;
- white-space: nowrap;
- position: relative;
- overflow: hidden;
- vertical-align: middle;
-
- &-image {
- background: transparent;
- }
-
- .avatar-size(@avatar-size-base, @avatar-font-size-base);
-
- &-lg {
- .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
- }
-
- &-sm {
- .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
- }
-
- &-square {
- border-radius: @avatar-border-radius;
- }
-
- & > img {
- width: 100%;
- height: 100%;
- display: block;
- }
-}
-
-.avatar-size(@size, @font-size) {
- width: @size;
- height: @size;
- line-height: @size;
- border-radius: 50%;
-
- &-string {
- position: absolute;
- left: 50%;
- transform-origin: 0 center;
- }
-
- &.@{avatar-prefix-cls}-icon {
- font-size: @font-size;
- }
-}
-
-@backtop-prefix-cls: ~'@{ant-prefix}-back-top';
-
-.@{backtop-prefix-cls} {
- .reset-component;
- z-index: @zindex-back-top;
- position: fixed;
- right: 100px;
- bottom: 50px;
- height: 40px;
- width: 40px;
- cursor: pointer;
-
- &-content {
- height: 40px;
- width: 40px;
- border-radius: 20px;
- background-color: @back-top-bg;
- color: @back-top-color;
- text-align: center;
- transition: all 0.3s @ease-in-out;
- overflow: hidden;
-
- &:hover {
- background-color: @back-top-hover-bg;
- transition: all 0.3s @ease-in-out;
- }
- }
-
- &-icon {
- margin: 12px auto;
- width: 14px;
- height: 16px;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
- ~'100%/100%' no-repeat;
- }
-}
-
-@media screen and (max-width: @screen-md) {
- .@{backtop-prefix-cls} {
- right: 60px;
- }
-}
-
-@media screen and (max-width: @screen-xs) {
- .@{backtop-prefix-cls} {
- right: 20px;
- }
-}
-
-@badge-prefix-cls: ~'@{ant-prefix}-badge';
-@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
-
-.@{badge-prefix-cls} {
- .reset-component;
- position: relative;
- display: inline-block;
- line-height: 1;
- color: unset;
-
- &-count {
- top: -@badge-height / 2;
- height: @badge-height;
- border-radius: @badge-height / 2;
- min-width: @badge-height;
- background: @highlight-color;
- color: #fff;
- line-height: @badge-height;
- text-align: center;
- padding: 0 6px;
- font-size: @badge-font-size;
- font-weight: @badge-font-weight;
- white-space: nowrap;
- box-shadow: 0 0 0 1px #fff;
- z-index: 10;
- a,
- a:hover {
- color: #fff;
- }
- }
-
- &-multiple-words {
- padding: 0 8px;
- }
-
- &-dot {
- top: -@badge-dot-size / 2;
- height: @badge-dot-size;
- width: @badge-dot-size;
- border-radius: 100%;
- background: @highlight-color;
- z-index: 10;
- box-shadow: 0 0 0 1px #fff;
- }
-
- &-count,
- &-dot,
- .@{number-prefix-cls}-custom-component {
- position: absolute;
- right: 0;
- transform: translateX(50%);
- transform-origin: 100%;
- }
-
- .@{number-prefix-cls}-custom-component {
- transform: translate(50%, -50%);
- }
-
- &-status {
- line-height: inherit;
- vertical-align: baseline;
-
- &-dot {
- width: @badge-status-size;
- height: @badge-status-size;
- display: inline-block;
- border-radius: 50%;
- vertical-align: middle;
- position: relative;
- top: -1px;
- }
- &-success {
- background-color: @success-color;
- }
- &-processing {
- background-color: @processing-color;
- position: relative;
- &:after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- border: 1px solid @processing-color;
- content: '';
- animation: antStatusProcessing 1.2s infinite ease-in-out;
- }
- }
- &-default {
- background-color: @normal-color;
- }
- &-error {
- background-color: @error-color;
- }
- &-warning {
- background-color: @warning-color;
- }
- &-text {
- color: @text-color;
- font-size: @font-size-base;
- margin-left: 8px;
- }
- }
-
- &-zoom-appear,
- &-zoom-enter {
- animation: antZoomBadgeIn 0.3s @ease-out-back;
- animation-fill-mode: both;
- }
-
- &-zoom-leave {
- animation: antZoomBadgeOut 0.3s @ease-in-back;
- animation-fill-mode: both;
- }
-
- &-not-a-wrapper {
- vertical-align: middle;
-
- .@{ant-prefix}-scroll-number {
- top: auto;
- display: block;
- position: relative;
- }
-
- .@{badge-prefix-cls}-count {
- transform: none;
- }
- }
-}
-
-@keyframes antStatusProcessing {
- 0% {
- transform: scale(0.8);
- opacity: 0.5;
- }
- 100% {
- transform: scale(2.4);
- opacity: 0;
- }
-}
-
-.@{number-prefix-cls} {
- overflow: hidden;
- &-only {
- display: inline-block;
- transition: all 0.3s @ease-in-out;
- height: @badge-height;
- > p {
- height: @badge-height;
- margin: 0;
- }
- }
-}
-
-@keyframes antZoomBadgeIn {
- 0% {
- opacity: 0;
- transform: scale(0) translateX(50%);
- }
- 100% {
- transform: scale(1) translateX(50%);
- }
-}
-
-@keyframes antZoomBadgeOut {
- 0% {
- transform: scale(1) translateX(50%);
- }
- 100% {
- opacity: 0;
- transform: scale(0) translateX(50%);
- }
-}
-
-@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
-
-.@{breadcrumb-prefix-cls} {
- .reset-component;
- color: @breadcrumb-base-color;
- font-size: @breadcrumb-font-size;
-
- .@{iconfont-css-prefix} {
- font-size: @breadcrumb-icon-font-size;
- }
-
- a {
- color: @breadcrumb-link-color;
- transition: color 0.3s;
- &:hover {
- color: @breadcrumb-link-color-hover;
- }
- }
-
- & > span:last-child {
- color: @breadcrumb-last-item-color;
- }
-
- & > span:last-child &-separator {
- display: none;
- }
-
- &-separator {
- margin: @breadcrumb-separator-margin;
- color: @breadcrumb-separator-color;
- }
-
- &-link {
- > .@{iconfont-css-prefix} + span {
- margin-left: 4px;
- }
- }
-}
-
-// mixins for button
-// ------------------------
-.button-size(@height; @padding; @font-size; @border-radius) {
- padding: @padding;
- font-size: @font-size;
- border-radius: @border-radius;
- height: @height;
-}
-
-.button-disabled() {
- &.disabled,
- &[disabled] {
- &,
- &:hover,
- &:focus,
- &:active,
- &.active {
- .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
- text-shadow: none;
- box-shadow: none;
- }
- }
-}
-
-.button-variant-primary(@color; @background) {
- .button-color(@color; @background; @background);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
- box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-
- &:hover,
- &:focus {
- .button-color(
- @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
- );
- }
-
- &:active,
- &.active {
- .button-color(
- @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
- );
- }
-
- .button-disabled();
-}
-
-.button-variant-other(@color; @background; @border) {
- .button-color(@color; @background; @border);
-
- &:hover,
- &:focus {
- .button-color(@primary-5; @background; @primary-5);
- }
-
- &:active,
- &.active {
- .button-color(@primary-7; @background; @primary-7);
- }
-
- .button-disabled();
-}
-
-.button-variant-danger(@color; @background; @border) {
- .button-color(@color; @background; @border);
-
- &:hover {
- .button-color(
- @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
- );
- }
-
- &:focus {
- .button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `);
- }
-
- &:active,
- &.active {
- .button-color(
- @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) `
- );
- }
-
- .button-disabled();
-}
-
-.button-variant-ghost(@color) {
- .button-color(@color; transparent; @color);
- text-shadow: none;
-
- &:hover,
- &:focus {
- .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
- }
-
- &:active,
- &.active {
- .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
- }
-
- .button-disabled();
-}
-
-.button-color(@color; @background; @border) {
- color: @color;
- background-color: @background;
- border-color: @border;
- // a inside Button which only work in Chrome
- // http://stackoverflow.com/a/17253457
- > a:only-child {
- color: currentColor;
- &:after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background: transparent;
- }
- }
-}
-
-.button-group-base(@btnClassName) {
- position: relative;
- display: inline-block;
- > .@{btnClassName},
- > span > .@{btnClassName} {
- position: relative;
-
- &:hover,
- &:focus,
- &:active,
- &.active {
- z-index: 2;
- }
-
- &:disabled {
- z-index: 0;
- }
- }
-
- // size
- &-lg > .@{btnClassName},
- &-lg > span > .@{btnClassName} {
- .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
- line-height: @btn-height-lg - 2px;
- }
-
- &-sm > .@{btnClassName},
- &-sm > span > .@{btnClassName} {
- .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
- line-height: @btn-height-sm - 2px;
- > .@{iconfont-css-prefix} {
- font-size: @font-size-base;
- }
- }
-}
-
-// Base styles of buttons
-// --------------------------------------------------
-.btn() {
- display: inline-block;
- font-weight: @btn-font-weight;
- text-align: center;
- touch-action: manipulation;
- cursor: pointer;
- background-image: none;
- border: @border-width-base @border-style-base transparent;
- white-space: nowrap;
- .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
- user-select: none;
- transition: all 0.3s @ease-in-out;
- position: relative;
- box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
-
- > .@{iconfont-css-prefix} {
- line-height: 1;
- }
-
- &,
- &:active,
- &:focus {
- outline: 0;
- }
-
- &:not([disabled]):hover {
- text-decoration: none;
- }
-
- &:not([disabled]):active {
- outline: 0;
- box-shadow: none;
- }
-
- &.disabled,
- &[disabled] {
- cursor: not-allowed;
- > * {
- pointer-events: none;
- }
- }
-
- &-lg {
- .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
- }
-
- &-sm {
- .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
- }
-}
-
-// primary button style
-.btn-primary() {
- .button-variant-primary(@btn-primary-color; @btn-primary-bg);
-}
-
-// default button style
-.btn-default() {
- .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
- &:hover,
- &:focus,
- &:active,
- &.active {
- background: @btn-default-bg;
- text-decoration: none;
- }
-}
-
-// ghost button style
-.btn-ghost() {
- .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
-}
-
-// dashed button style
-.btn-dashed() {
- .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
- border-style: dashed;
-}
-
-// danger button style
-.btn-danger() {
- .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
-}
-
-// circle button: the content only contains icon
-.btn-circle(@btnClassName: btn) {
- .square(@btn-circle-size);
- .button-size(@btn-circle-size; 0; @font-size-base + 2px; 50%);
-
- &.@{btnClassName}-lg {
- .square(@btn-circle-size-lg);
- .button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2px; 50%);
- }
-
- &.@{btnClassName}-sm {
- .square(@btn-circle-size-sm);
- .button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
- }
-}
-
-// Horizontal button groups styl
-// --------------------------------------------------
-.btn-group(@btnClassName: btn) {
- .button-group-base(@btnClassName);
-
- .@{btnClassName} + .@{btnClassName},
- .@{btnClassName} + &,
- span + .@{btnClassName},
- .@{btnClassName} + span,
- > span + span,
- & + .@{btnClassName},
- & + & {
- margin-left: -1px;
- }
-
- .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
- border-left-color: transparent;
- }
-
- .@{btnClassName} {
- border-radius: 0;
- }
-
- > .@{btnClassName}:first-child,
- > span:first-child > .@{btnClassName} {
- margin-left: 0;
- }
- > .@{btnClassName}:only-child {
- border-radius: @btn-border-radius-base;
- }
- > span:only-child > .@{btnClassName} {
- border-radius: @btn-border-radius-base;
- }
-
- > .@{btnClassName}:first-child:not(:last-child),
- > span:first-child:not(:last-child) > .@{btnClassName} {
- border-bottom-left-radius: @btn-border-radius-base;
- border-top-left-radius: @btn-border-radius-base;
- }
-
- > .@{btnClassName}:last-child:not(:first-child),
- > span:last-child:not(:first-child) > .@{btnClassName} {
- border-bottom-right-radius: @btn-border-radius-base;
- border-top-right-radius: @btn-border-radius-base;
- }
-
- &-sm {
- > .@{btnClassName}:only-child {
- border-radius: @btn-border-radius-sm;
- }
- > span:only-child > .@{btnClassName} {
- border-radius: @btn-border-radius-sm;
- }
- > .@{btnClassName}:first-child:not(:last-child),
- > span:first-child:not(:last-child) > .@{btnClassName} {
- border-bottom-left-radius: @btn-border-radius-sm;
- border-top-left-radius: @btn-border-radius-sm;
- }
- > .@{btnClassName}:last-child:not(:first-child),
- > span:last-child:not(:first-child) > .@{btnClassName} {
- border-bottom-right-radius: @btn-border-radius-sm;
- border-top-right-radius: @btn-border-radius-sm;
- }
- }
-
- & > & {
- float: left;
- }
-
- & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
- border-radius: 0;
- }
-
- & > &:first-child:not(:last-child) {
- > .@{btnClassName}:last-child {
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
- padding-right: 8px;
- }
- }
-
- & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- padding-left: 8px;
- }
-}
-
-@btn-prefix-cls: ~'@{ant-prefix}-btn';
-
-// for compatible
-@btn-ghost-color: @text-color;
-@btn-ghost-bg: transparent;
-@btn-ghost-border: @border-color-base;
-
-// Button styles
-// -----------------------------
-.@{btn-prefix-cls} {
- // Fixing https://github.com/ant-design/ant-design/issues/12978
- // It is a render problem of chrome, which is only happened in the codesandbox demo
- // 0.001px solution works and I don't why
- line-height: @line-height-base - 0.001;
- .btn;
- .btn-default;
-
- // Make sure that the target of Button's click event always be `button`
- // Ref: https://github.com/ant-design/ant-design/issues/7034
- > i,
- > span {
- pointer-events: none;
- display: inline-block;
- }
-
- &-primary {
- .btn-primary;
-
- .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
- border-right-color: @btn-group-border;
- border-left-color: @btn-group-border;
-
- &:disabled {
- border-color: @btn-default-border;
- }
- }
-
- .@{btn-prefix-cls}-group &:first-child {
- &:not(:last-child) {
- border-right-color: @btn-group-border;
- &[disabled] {
- border-right-color: @btn-default-border;
- }
- }
- }
-
- .@{btn-prefix-cls}-group &:last-child:not(:first-child),
- .@{btn-prefix-cls}-group & + & {
- border-left-color: @btn-group-border;
- &[disabled] {
- border-left-color: @btn-default-border;
- }
- }
- }
-
- &-ghost {
- .btn-ghost;
- }
-
- &-dashed {
- .btn-dashed;
- }
-
- &-danger {
- .btn-danger;
- }
-
- &-circle,
- &-circle-outline {
- .btn-circle(@btn-prefix-cls);
- }
-
- &:before {
- position: absolute;
- top: -1px;
- left: -1px;
- bottom: -1px;
- right: -1px;
- background: #fff;
- opacity: 0.35;
- content: '';
- border-radius: inherit;
- z-index: 1;
- transition: opacity 0.2s;
- pointer-events: none;
- display: none;
- }
-
- .@{iconfont-css-prefix} {
- transition: margin-left 0.3s @ease-in-out;
- }
-
- &&-loading:before {
- display: block;
- }
-
- &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
- padding-left: 29px;
- pointer-events: none;
- position: relative;
- .@{iconfont-css-prefix}:not(:last-child) {
- margin-left: -14px;
- }
- }
-
- &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
- padding-left: 24px;
- .@{iconfont-css-prefix} {
- margin-left: -17px;
- }
- }
-
- &-group {
- .btn-group(@btn-prefix-cls);
- }
-
- &:not(&-circle):not(&-circle-outline)&-icon-only {
- padding-left: 8px;
- padding-right: 8px;
- }
-
- // http://stackoverflow.com/a/21281554/3040605
- &:focus > span,
- &:active > span {
- position: relative;
- }
-
- // To ensure that a space will be placed between character and `Icon`.
- > .@{iconfont-css-prefix} + span,
- > span + .@{iconfont-css-prefix} {
- margin-left: 8px;
- }
-
- &-background-ghost {
- background: transparent !important;
- border-color: #fff;
- color: #fff;
- }
-
- &-background-ghost&-primary {
- .button-variant-ghost(@btn-primary-bg);
- }
-
- &-background-ghost&-danger {
- .button-variant-ghost(@btn-danger-color);
- }
-
- &-two-chinese-chars:first-letter {
- letter-spacing: 0.34em;
- }
-
- &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
- letter-spacing: 0.34em;
- margin-right: -0.34em;
- }
-
- &-block {
- width: 100%;
- }
-
- .christmas&-primary:before {
- content: '';
- display: block;
- position: absolute;
- top: -6px;
- left: 0;
- right: 0;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC)
- no-repeat 50% 0;
- background-size: 64px;
- opacity: 1;
- }
-
- .christmas&-primary&-lg:before {
- background-size: 72px;
- }
-
- .christmas&-primary&-sm:before {
- background-size: 56px;
- }
-
- // https://github.com/ant-design/ant-design/issues/12681
- &:empty {
- vertical-align: top;
- }
-}
-
-a.@{btn-prefix-cls} {
- line-height: @btn-height-base - 2px;
- &-lg {
- line-height: @btn-height-lg - 2px;
- }
- &-sm {
- line-height: @btn-height-sm - 2px;
- }
-}
-
-@full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';
-
-.@{full-calendar-prefix-cls} {
- .reset-component;
- outline: none;
- border-top: @border-width-base @border-style-base @border-color-base;
-
- &-month-select {
- margin-left: 5px;
- }
-
- &-header {
- padding: 11px 16px 11px 0;
- text-align: right;
-
- .@{ant-prefix}-select-dropdown {
- text-align: left;
- }
-
- .@{ant-prefix}-radio-group {
- margin-left: 8px;
- text-align: left;
- }
-
- label.@{ant-prefix}-radio-button {
- height: 22px;
- line-height: 20px;
- padding: 0 10px;
- }
- }
-
- &-date-panel {
- position: relative;
- outline: none;
- }
-
- &-calendar-body {
- padding: 8px 12px;
- }
-
- table {
- border-collapse: collapse;
- max-width: 100%;
- background-color: transparent;
- width: 100%;
- height: 256px;
- }
-
- table,
- th,
- td {
- border: 0;
- }
-
- td {
- position: relative;
- }
-
- &-calendar-table {
- border-spacing: 0;
- margin-bottom: 0;
- }
-
- &-column-header {
- line-height: 18px;
- padding: 0;
- width: 33px;
- text-align: center;
- .@{full-calendar-prefix-cls}-column-header-inner {
- display: block;
- font-weight: normal;
- }
- }
-
- &-week-number-header {
- .@{full-calendar-prefix-cls}-column-header-inner {
- display: none;
- }
- }
-
- &-month,
- &-date {
- text-align: center;
- transition: all 0.3s;
- }
-
- &-value {
- display: block;
- margin: 0 auto;
- color: @text-color;
- border-radius: @border-radius-sm;
- width: 24px;
- height: 24px;
- padding: 0;
- background: transparent;
- line-height: 24px;
- transition: all 0.3s;
-
- &:hover {
- background: @item-hover-bg;
- cursor: pointer;
- }
-
- &:active {
- background: @primary-color;
- color: #fff;
- }
- }
-
- &-month-panel-cell &-value {
- width: 48px;
- }
-
- &-today &-value,
- &-month-panel-current-cell &-value {
- box-shadow: 0 0 0 1px @primary-color inset;
- }
-
- &-selected-day &-value,
- &-month-panel-selected-cell &-value {
- background: @primary-color;
- color: #fff;
- }
-
- &-disabled-cell-first-of-row &-value {
- border-top-left-radius: @border-radius-base;
- border-bottom-left-radius: @border-radius-base;
- }
-
- &-disabled-cell-last-of-row &-value {
- border-top-right-radius: @border-radius-base;
- border-bottom-right-radius: @border-radius-base;
- }
-
- &-last-month-cell &-value,
- &-next-month-btn-day &-value {
- color: @disabled-color;
- }
-
- &-month-panel-table {
- table-layout: fixed;
- width: 100%;
- border-collapse: separate;
- }
-
- &-content {
- position: absolute;
- width: 100%;
- left: 0;
- bottom: -9px;
- }
-
- &-fullscreen {
- border-top: 0;
- }
-
- &-fullscreen &-table {
- table-layout: fixed;
- }
-
- &-fullscreen &-header {
- .@{ant-prefix}-radio-group {
- margin-left: 16px;
- }
- label.@{ant-prefix}-radio-button {
- height: @input-height-base;
- line-height: @input-height-base - 2px;
- }
- }
-
- &-fullscreen &-month,
- &-fullscreen &-date {
- text-align: left;
- margin: 0 4px;
- display: block;
- color: @text-color;
- height: 116px;
- padding: 4px 8px;
- border-top: 2px solid @border-color-split;
- transition: background 0.3s;
-
- &:hover {
- background: @item-hover-bg;
- cursor: pointer;
- }
-
- &:active {
- background: @primary-2;
- }
- }
-
- &-fullscreen &-column-header {
- text-align: right;
- padding-right: 12px;
- padding-bottom: 5px;
- }
-
- &-fullscreen &-value {
- text-align: right;
- background: transparent;
- width: auto;
- }
-
- &-fullscreen &-today &-value {
- color: @text-color;
- }
-
- &-fullscreen &-month-panel-current-cell &-month,
- &-fullscreen &-today &-date {
- border-top-color: @primary-color;
- background: transparent;
- }
-
- &-fullscreen &-month-panel-current-cell &-value,
- &-fullscreen &-today &-value {
- box-shadow: none;
- }
-
- &-fullscreen &-month-panel-selected-cell &-month,
- &-fullscreen &-selected-day &-date {
- background: @primary-1;
- }
-
- &-fullscreen &-month-panel-selected-cell &-value,
- &-fullscreen &-selected-day &-value {
- color: @primary-color;
- }
-
- &-fullscreen &-last-month-cell &-date,
- &-fullscreen &-next-month-btn-day &-date {
- color: @disabled-color;
- }
-
- &-fullscreen &-content {
- height: 88px;
- overflow-y: auto;
- position: static;
- width: auto;
- left: auto;
- bottom: auto;
- }
-
- &-disabled-cell &-date {
- &,
- &:hover {
- cursor: not-allowed;
- }
- }
-
- &-disabled-cell:not(&-today) &-date {
- &,
- &:hover {
- background: transparent;
- }
- }
-
- &-disabled-cell &-value {
- color: @disabled-color;
- border-radius: 0;
- width: auto;
- cursor: not-allowed;
- }
-}
-
-@card-prefix-cls: ~'@{ant-prefix}-card';
-@card-head-height: 48px;
-@card-hover-border: rgba(0, 0, 0, 0.09);
-@card-radius: @border-radius-sm;
-
-.@{card-prefix-cls} {
- .reset-component;
- background: @component-background;
- border-radius: @card-radius;
- position: relative;
- transition: all 0.3s;
-
- &-hoverable {
- cursor: pointer;
- &:hover {
- box-shadow: @card-shadow;
- border-color: @card-hover-border;
- }
- }
-
- &-bordered {
- border: @border-width-base @border-style-base @border-color-split;
- }
-
- &-head {
- background: @card-head-background;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- padding: 0 @card-padding-base;
- border-radius: @card-radius @card-radius 0 0;
- .clearfix;
- margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
- min-height: @card-head-height;
- font-size: @font-size-lg;
- color: @card-head-color;
- font-weight: 500;
-
- &-wrapper {
- display: flex;
- align-items: center;
- }
-
- &-title {
- padding: @card-head-padding 0;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: 1;
- display: inline-block;
- }
-
- .@{ant-prefix}-tabs {
- margin-bottom: -17px;
- clear: both;
- font-size: @font-size-base;
- color: @text-color;
- font-weight: normal;
-
- &-bar {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
- }
- }
-
- &-extra {
- float: right;
- padding: @card-head-padding 0;
- font-size: @font-size-base;
- color: @text-color;
- font-weight: normal;
- // https://stackoverflow.com/a/22429853/3040605
- margin-left: auto;
- }
-
- &-body {
- padding: @card-padding-base;
- .clearfix;
- }
-
- &-contain-grid:not(&-loading) &-body {
- margin: -1px 0 0 -1px;
- padding: 0;
- }
-
- &-grid {
- border-radius: 0;
- border: 0;
- box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
- 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
- 0 1px 0 0 @border-color-split inset;
- width: 33.33%;
- float: left;
- padding: @card-padding-base;
- transition: all 0.3s;
- &:hover {
- position: relative;
- z-index: 1;
- box-shadow: @box-shadow-base;
- }
- }
-
- &-contain-tabs > &-head &-head-title {
- padding-bottom: 0;
- min-height: @card-head-height - @card-head-padding;
- }
-
- &-contain-tabs &-extra {
- padding-bottom: 0;
- }
-
- &-cover {
- > * {
- width: 100%;
- display: block;
- }
- img {
- border-radius: @card-radius @card-radius 0 0;
- }
- }
-
- &-actions {
- border-top: @border-width-base @border-style-base @border-color-split;
- background: @card-actions-background;
- .clearfix;
- list-style: none;
- margin: 0;
- padding: 0;
-
- & > li {
- float: left;
- text-align: center;
- margin: 12px 0;
- color: @text-color-secondary;
-
- & > span {
- display: inline-block;
- font-size: 14px;
- cursor: pointer;
- line-height: 22px;
- min-width: 32px;
- position: relative;
-
- &:hover {
- color: @primary-color;
- transition: color 0.3s;
- }
-
- & > .anticon {
- font-size: 16px;
- line-height: 22px;
- }
-
- a {
- color: @text-color-secondary;
- line-height: 22px;
- display: inline-block;
- width: 100%;
-
- &:hover {
- color: @primary-color;
- }
- }
- }
-
- &:not(:last-child) {
- border-right: @border-width-base @border-style-base @border-color-split;
- }
- }
- }
-
- &-wider-padding &-head {
- padding: 0 @card-padding-wider;
- }
-
- &-wider-padding &-body {
- padding: @card-padding-base @card-padding-wider;
- }
-
- &-padding-transition &-head,
- &-padding-transition &-body {
- transition: padding 0.3s;
- }
-
- &-type-inner &-head {
- padding: 0 @card-padding-base;
- background: @background-color-light;
-
- &-title {
- padding: @card-inner-head-padding 0;
- font-size: @font-size-base;
- }
- }
-
- &-type-inner &-body {
- padding: 16px @card-padding-base;
- }
-
- &-type-inner &-extra {
- padding: @card-inner-head-padding + 1.5px 0;
- }
-
- &-meta {
- margin: -4px 0;
- .clearfix;
-
- &-avatar {
- padding-right: 16px;
- float: left;
- }
-
- &-detail {
- overflow: hidden;
- > div:not(:last-child) {
- margin-bottom: 8px;
- }
- }
-
- &-title {
- font-size: @font-size-lg;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- color: @card-head-color;
- font-weight: 500;
- }
-
- &-description {
- color: @text-color-secondary;
- }
- }
-
- &-loading {
- overflow: hidden;
- position: relative;
-
- &:after {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: @card-padding-base;
- background: @component-background;
- content: '';
- }
- }
-
- &-loading &-body {
- user-select: none;
- }
-
- &-loading-content {
- p {
- margin: 0;
- }
- }
-
- &-loading-block {
- height: 14px;
- margin: 4px 0;
- border-radius: @card-radius;
- background: linear-gradient(
- 90deg,
- rgba(207, 216, 220, 0.2),
- rgba(207, 216, 220, 0.4),
- rgba(207, 216, 220, 0.2)
- );
- animation: card-loading 1.4s ease infinite;
- background-size: 600% 600%;
- }
-}
-
-@keyframes card-loading {
- 0%,
- 100% {
- background-position: 0 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
-}
-
-.@{ant-prefix}-carousel {
- .reset-component;
-
- .slick-slider {
- position: relative;
- display: block;
- box-sizing: border-box;
- -webkit-touch-callout: none;
- -ms-touch-action: pan-y;
- touch-action: pan-y;
- -webkit-tap-highlight-color: transparent;
- }
- .slick-list {
- position: relative;
- overflow: hidden;
- display: block;
- margin: 0;
- padding: 0;
-
- &:focus {
- outline: none;
- }
-
- &.dragging {
- cursor: pointer;
- }
-
- .slick-slide {
- pointer-events: none;
-
- &.slick-active {
- pointer-events: auto;
- }
- }
- }
- .slick-slider .slick-track,
- .slick-slider .slick-list {
- transform: translate3d(0, 0, 0);
- }
-
- .slick-track {
- position: relative;
- left: 0;
- top: 0;
- display: block;
-
- &:before,
- &:after {
- content: '';
- display: table;
- }
-
- &:after {
- clear: both;
- }
-
- .slick-loading & {
- visibility: hidden;
- }
- }
- .slick-slide {
- float: left;
- height: 100%;
- min-height: 1px;
- [dir='rtl'] & {
- float: right;
- }
- img {
- display: block;
- }
- &.slick-loading img {
- display: none;
- }
-
- display: none;
-
- &.dragging img {
- pointer-events: none;
- }
- }
-
- .slick-initialized .slick-slide {
- display: block;
- }
-
- .slick-loading .slick-slide {
- visibility: hidden;
- }
-
- .slick-vertical .slick-slide {
- display: block;
- height: auto;
- border: @border-width-base @border-style-base transparent;
- }
- .slick-arrow.slick-hidden {
- display: none;
- }
-
- // Arrows
- .slick-prev,
- .slick-next {
- position: absolute;
- display: block;
- height: 20px;
- width: 20px;
- line-height: 0;
- font-size: 0;
- cursor: pointer;
- background: transparent;
- color: transparent;
- top: 50%;
- margin-top: -10px;
- padding: 0;
- border: 0;
- outline: none;
- &:hover,
- &:focus {
- outline: none;
- background: transparent;
- color: transparent;
- &:before {
- opacity: 1;
- }
- }
- &.slick-disabled:before {
- opacity: 0.25;
- }
- }
-
- .slick-prev {
- left: -25px;
- &:before {
- content: '←';
- }
- }
-
- .slick-next {
- right: -25px;
- &:before {
- content: '→';
- }
- }
-
- // Dots
- .slick-dots {
- position: absolute;
- bottom: 12px;
- list-style: none;
- display: block;
- text-align: center;
- margin: 0;
- padding: 0;
- width: 100%;
- height: @carousel-dot-height;
- li {
- position: relative;
- display: inline-block;
- vertical-align: top;
- text-align: center;
- margin: 0 2px;
- padding: 0;
- button {
- border: 0;
- cursor: pointer;
- background: #fff;
- opacity: 0.3;
- display: block;
- width: @carousel-dot-width;
- height: @carousel-dot-height;
- border-radius: 1px;
- outline: none;
- font-size: 0;
- color: transparent;
- transition: all 0.5s;
- padding: 0;
- &:hover,
- &:focus {
- opacity: 0.75;
- }
- }
- &.slick-active button {
- background: #fff;
- opacity: 1;
- width: @carousel-dot-active-width;
- &:hover,
- &:focus {
- opacity: 1;
- }
- }
- }
- }
-}
-
-.@{ant-prefix}-carousel-vertical {
- .slick-dots {
- width: @carousel-dot-height;
- bottom: auto;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- height: auto;
- li {
- margin: 0 2px;
- vertical-align: baseline;
- button {
- width: @carousel-dot-height;
- height: @carousel-dot-width;
- }
- &.slick-active button {
- width: @carousel-dot-height;
- height: @carousel-dot-active-width;
- }
- }
- }
-}
-
-@input-affix-width: 19px;
-
-// size mixins for input
-.input-lg() {
- padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
- height: @input-height-lg;
- font-size: @font-size-lg;
-}
-
-.input-sm() {
- padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
- height: @input-height-sm;
-}
-
-// input status
-// == when focus or actived
-.active(@color: @outline-color) {
- border-color: ~`colorPalette('@{color}', 5) `;
- outline: 0;
- box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
- border-right-width: @border-width-base !important;
-}
-
-// == when hoverd
-.hover(@color: @input-hover-border-color) {
- border-color: ~`colorPalette('@{color}', 5) `;
- border-right-width: @border-width-base !important;
-}
-
-.disabled() {
- background-color: @input-disabled-bg;
- opacity: 1;
- cursor: not-allowed;
- color: @disabled-color;
- &:hover {
- .hover(@input-border-color);
- }
-}
-
-// Basic style for input
-.input() {
- position: relative;
- display: inline-block;
- padding: @input-padding-vertical-base @input-padding-horizontal-base;
- width: 100%;
- height: @input-height-base;
- font-size: @font-size-base;
- line-height: @line-height-base;
- color: @input-color;
- background-color: @input-bg;
- background-image: none;
- border: @border-width-base @border-style-base @input-border-color;
- border-radius: @border-radius-base;
- .placeholder(); // Reset placeholder
- transition: all 0.3s;
-
- &:hover {
- .hover();
- }
-
- &:focus {
- .active();
- }
-
- &-disabled {
- .disabled();
- }
-
- // Reset height for `textarea`s
- textarea& {
- max-width: 100%; // prevent textearea resize from coming out of its container
- height: auto;
- vertical-align: bottom;
- transition: all 0.3s, height 0s;
- min-height: @input-height-base;
- }
-
- // Size
- &-lg {
- .input-lg();
- }
-
- &-sm {
- .input-sm();
- }
-}
-
-// label input
-.input-group(@inputClass) {
- position: relative;
- display: table;
- border-collapse: separate;
- border-spacing: 0;
- width: 100%;
-
- // Undo padding and float of grid classes
- &[class*='col-'] {
- float: none;
- padding-left: 0;
- padding-right: 0;
- }
-
- > [class*='col-'] {
- padding-right: 8px;
- &:last-child {
- padding-right: 0;
- }
- }
-
- &-addon,
- &-wrap,
- > .@{inputClass} {
- display: table-cell;
-
- &:not(:first-child):not(:last-child) {
- border-radius: 0;
- }
- }
-
- &-addon,
- &-wrap {
- width: 1px; // To make addon/wrap as small as possible
- white-space: nowrap;
- vertical-align: middle;
- }
-
- &-wrap > * {
- display: block !important;
- }
-
- .@{inputClass} {
- float: left;
- width: 100%;
- margin-bottom: 0;
- &:focus {
- z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
- border-right-width: 1px;
- }
- &:hover {
- z-index: 1;
- border-right-width: 1px;
- }
- }
-
- &-addon {
- padding: 0 @input-padding-horizontal-base;
- font-size: @font-size-base;
- font-weight: normal;
- line-height: 1;
- color: @input-color;
- text-align: center;
- background-color: @input-addon-bg;
- border: @border-width-base @border-style-base @input-border-color;
- border-radius: @border-radius-base;
- position: relative;
- transition: all 0.3s;
-
- // Reset Select's style in addon
- .@{ant-prefix}-select {
- margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
-
- .@{ant-prefix}-select-selection {
- background-color: inherit;
- margin: -1px;
- border: @border-width-base @border-style-base transparent;
- box-shadow: none;
- }
-
- &-open,
- &-focused {
- .@{ant-prefix}-select-selection {
- color: @primary-color;
- }
- }
- }
-
- // Expand addon icon click area
- // https://github.com/ant-design/ant-design/issues/3714
- > i:only-child:after {
- position: absolute;
- content: '';
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- }
-
- // Reset rounded corners
- > .@{inputClass}:first-child,
- &-addon:first-child {
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
-
- // Reset Select's style in addon
- .@{ant-prefix}-select .@{ant-prefix}-select-selection {
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
- }
- }
-
- > .@{inputClass}-affix-wrapper {
- &:not(:first-child) .@{inputClass} {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- }
-
- &:not(:last-child) .@{inputClass} {
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
- }
- }
-
- &-addon:first-child {
- border-right: 0;
- }
- &-addon:last-child {
- border-left: 0;
- }
-
- > .@{inputClass}:last-child,
- &-addon:last-child {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
-
- // Reset Select's style in addon
- .@{ant-prefix}-select .@{ant-prefix}-select-selection {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- }
- }
-
- // Sizing options
- &-lg .@{inputClass},
- &-lg > &-addon {
- .input-lg();
- }
-
- &-sm .@{inputClass},
- &-sm > &-addon {
- .input-sm();
- }
-
- // Fix https://github.com/ant-design/ant-design/issues/5754
- &-lg .@{ant-prefix}-select-selection--single {
- height: @input-height-lg;
- }
-
- &-sm .@{ant-prefix}-select-selection--single {
- height: @input-height-sm;
- }
-
- .@{inputClass}-affix-wrapper {
- display: table-cell;
- width: 100%;
- float: left;
- }
-
- &&-compact {
- display: block;
- .clearfix;
-
- &-addon,
- &-wrap,
- > .@{inputClass} {
- &:not(:first-child):not(:last-child) {
- border-right-width: @border-width-base;
- &:hover {
- z-index: 1;
- }
- &:focus {
- z-index: 1;
- }
- }
- }
-
- & > * {
- border-radius: 0;
- vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
- float: none;
- display: inline-block;
- }
-
- & > *:not(:last-child) {
- border-right-width: @border-width-base;
- margin-right: -@border-width-base;
- }
-
- // Undo float for .ant-input-group .ant-input
- .@{inputClass} {
- float: none;
- }
-
- // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker
- & > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
- & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
- border-radius: 0;
- border-right-width: @border-width-base;
- &:hover {
- z-index: 1;
- }
- &:focus {
- z-index: 1;
- }
- }
-
- & > *:first-child,
- & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
- & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
- border-top-left-radius: @border-radius-base;
- border-bottom-left-radius: @border-radius-base;
- }
-
- & > *:last-child,
- & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
- & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
- border-top-right-radius: @border-radius-base;
- border-bottom-right-radius: @border-radius-base;
- border-right-width: @border-width-base;
- }
-
- // https://github.com/ant-design/ant-design/issues/12493
- & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
- vertical-align: top;
- }
- }
-}
-
-.input-affix-wrapper(@inputClass) {
- position: relative;
- display: inline-block;
- width: 100%;
-
- &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
- .hover();
- }
-
- .@{inputClass} {
- position: relative;
- }
-
- .@{inputClass}-prefix,
- .@{inputClass}-suffix {
- position: absolute;
- top: 50%;
- z-index: 2;
- transform: translateY(-50%);
- line-height: 0;
- color: @input-color;
- :not(.anticon) {
- line-height: @line-height-base;
- }
- }
-
- .@{inputClass}-prefix {
- left: @input-padding-horizontal-base + 1px;
- }
-
- .@{inputClass}-suffix {
- right: @input-padding-horizontal-base + 1px;
- }
-
- .@{inputClass}:not(:first-child) {
- padding-left: @input-padding-horizontal-base + @input-affix-width;
- }
-
- .@{inputClass}:not(:last-child) {
- padding-right: @input-padding-horizontal-base + @input-affix-width;
- }
-}
-
-@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
-
-.@{cascader-prefix-cls} {
- .reset-component;
-
- &-input.@{ant-prefix}-input {
- // Add important to fix https://github.com/ant-design/ant-design/issues/5078
- // because input.less will compile after cascader.less
- background-color: transparent !important;
- cursor: pointer;
- width: 100%;
- position: relative;
- }
-
- &-picker-show-search &-input.@{ant-prefix}-input {
- position: relative;
- }
-
- &-picker {
- .reset-component;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background-color: @component-background;
- border-radius: @border-radius-base;
- outline: 0;
- transition: color 0.3s;
-
- &-with-value &-label {
- color: transparent;
- }
-
- &-disabled {
- cursor: not-allowed;
- background: @input-disabled-bg;
- color: @disabled-color;
- .@{cascader-prefix-cls}-input {
- cursor: not-allowed;
- }
- }
-
- &:focus .@{cascader-prefix-cls}-input {
- .active;
- }
-
- &-show-search&-focused {
- color: @disabled-color;
- }
-
- &-label {
- position: absolute;
- left: 0;
- height: 20px;
- line-height: 20px;
- top: 50%;
- margin-top: -10px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 100%;
- padding: 0 @control-padding-horizontal;
- }
-
- &-clear {
- opacity: 0;
- position: absolute;
- right: @control-padding-horizontal;
- z-index: 2;
- background: @component-background;
- top: 50%;
- font-size: @font-size-sm;
- color: @disabled-color;
- width: 12px;
- height: 12px;
- margin-top: -6px;
- line-height: 12px;
- cursor: pointer;
- transition: color 0.3s ease, opacity 0.15s ease;
- &:hover {
- color: @text-color-secondary;
- }
- }
-
- &:hover &-clear {
- opacity: 1;
- }
-
- // arrow
- &-arrow {
- position: absolute;
- z-index: 1;
- top: 50%;
- right: @control-padding-horizontal;
- width: 12px;
- height: 12px;
- font-size: 12px;
- margin-top: -6px;
- line-height: 12px;
- color: @disabled-color;
- transition: transform 0.2s;
- &&-expand {
- transform: rotate(180deg);
- }
- }
- }
-
- &-picker-small &-picker-clear,
- &-picker-small &-picker-arrow {
- right: @control-padding-horizontal-sm;
- }
-
- &-menus {
- font-size: @font-size-base;
- background: @component-background;
- position: absolute;
- z-index: @zindex-dropdown;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- white-space: nowrap;
-
- ul,
- ol {
- list-style: none;
- margin: 0;
- padding: 0;
- }
-
- &-empty,
- &-hidden {
- display: none;
- }
- &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
- animation-name: antSlideUpIn;
- }
-
- &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
- animation-name: antSlideDownIn;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
- animation-name: antSlideUpOut;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
- animation-name: antSlideDownOut;
- }
- }
- &-menu {
- display: inline-block;
- vertical-align: top;
- min-width: 111px;
- height: 180px;
- list-style: none;
- margin: 0;
- padding: 0;
- border-right: @border-width-base @border-style-base @border-color-split;
- overflow: auto;
- -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
-
- &:first-child {
- border-radius: @border-radius-base 0 0 @border-radius-base;
- }
- &:last-child {
- border-right-color: transparent;
- margin-right: -1px;
- border-radius: 0 @border-radius-base @border-radius-base 0;
- }
- &:only-child {
- border-radius: @border-radius-base;
- }
- }
- &-menu-item {
- padding: 5px @control-padding-horizontal;
- line-height: 22px;
- cursor: pointer;
- white-space: nowrap;
- transition: all 0.3s;
- &:hover {
- background: @item-hover-bg;
- }
- &-disabled {
- cursor: not-allowed;
- color: @disabled-color;
- &:hover {
- background: transparent;
- }
- }
- &-active:not(&-disabled) {
- &,
- &:hover {
- background: @background-color-base;
- font-weight: 600;
- }
- }
- &-expand {
- position: relative;
- padding-right: 24px;
- }
-
- &-expand &-expand-icon,
- &-expand &-loading-icon {
- .iconfont-size-under-12px(10px);
- color: @text-color-secondary;
- position: absolute;
- right: @control-padding-horizontal;
- }
-
- & &-keyword {
- color: @highlight-color;
- }
- }
-}
-
-.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
- @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
- // 一般状态
- .@{checkbox-prefix-cls} {
- .reset-component;
- white-space: nowrap;
- cursor: pointer;
- outline: none;
- display: inline-block;
- line-height: 1;
- position: relative;
- vertical-align: middle;
- top: -0.09em;
-
- .@{checkbox-prefix-cls}-wrapper:hover &-inner,
- &:hover &-inner,
- &-input:focus + &-inner {
- border-color: @checkbox-color;
- }
-
- &-checked:after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: @border-radius-sm;
- border: 1px solid @checkbox-color;
- content: '';
- animation: antCheckboxEffect 0.36s ease-in-out;
- animation-fill-mode: both;
- visibility: hidden;
- }
-
- &:hover:after,
- .@{checkbox-prefix-cls}-wrapper:hover &:after {
- visibility: visible;
- }
-
- &-inner {
- position: relative;
- top: 0;
- left: 0;
- display: block;
- width: @checkbox-size;
- height: @checkbox-size;
- border: @checkbox-border-width @border-style-base @border-color-base;
- border-radius: @border-radius-sm;
- background-color: @checkbox-check-color;
- transition: all 0.3s;
- // Fix IE checked style
- // https://github.com/ant-design/ant-design/issues/12597
- border-collapse: separate;
-
- &:after {
- @check-width: (@checkbox-size / 14) * 5px;
- @check-height: (@checkbox-size / 14) * 8px;
- transform: rotate(45deg) scale(0);
- position: absolute;
- left: (@checkbox-size - @check-width) / 2 - 0.5px * (@checkbox-size / 14);
- top: (@checkbox-size - @check-height) / 2 - 2px * (@checkbox-size / 14);
- display: table;
- width: @check-width;
- height: @check-height;
- border: 2px solid @checkbox-check-color;
- border-top: 0;
- border-left: 0;
- content: ' ';
- transition: all 0.1s @ease-in-back, opacity 0.1s;
- opacity: 0;
- }
- }
-
- &-input {
- position: absolute;
- left: 0;
- z-index: 1;
- cursor: pointer;
- opacity: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
- }
- }
-
- // 选中状态
- .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
- transform: rotate(45deg) scale(1);
- position: absolute;
- display: table;
- border: 2px solid @checkbox-check-color;
- border-top: 0;
- border-left: 0;
- content: ' ';
- transition: all 0.2s @ease-out-back 0.1s;
- opacity: 1;
- }
-
- .@{checkbox-prefix-cls}-checked {
- .@{checkbox-inner-prefix-cls} {
- background-color: @checkbox-color;
- border-color: @checkbox-color;
- }
- }
-
- .@{checkbox-prefix-cls}-disabled {
- cursor: not-allowed;
-
- &.@{checkbox-prefix-cls}-checked {
- .@{checkbox-inner-prefix-cls}:after {
- animation-name: none;
- border-color: @disabled-color;
- }
- }
-
- .@{checkbox-prefix-cls}-input {
- cursor: not-allowed;
- }
-
- .@{checkbox-inner-prefix-cls} {
- border-color: @border-color-base !important;
- background-color: @input-disabled-bg;
- &:after {
- animation-name: none;
- border-color: @input-disabled-bg;
- border-collapse: separate;
- }
- }
-
- & + span {
- color: @disabled-color;
- cursor: not-allowed;
- }
- }
-
- .@{checkbox-prefix-cls}-wrapper {
- .reset-component;
- line-height: unset;
- cursor: pointer;
- display: inline-block;
- & + & {
- margin-left: 8px;
- }
- }
-
- .@{checkbox-prefix-cls}-wrapper + span,
- .@{checkbox-prefix-cls} + span {
- padding-left: 8px;
- padding-right: 8px;
- }
-
- .@{checkbox-prefix-cls}-group {
- .reset-component;
- display: inline-block;
- &-item {
- display: inline-block;
- margin-right: 8px;
- &:last-child {
- margin-right: 0;
- }
- }
- &-item + &-item {
- margin-left: 0;
- }
- }
-
- // 半选状态
- .@{checkbox-prefix-cls}-indeterminate {
- .@{checkbox-inner-prefix-cls} {
- background-color: #fff;
- border-color: @border-color-base;
- }
- .@{checkbox-inner-prefix-cls}:after {
- @indeterminate-width: @checkbox-size - 8px;
- @indeterminate-height: @checkbox-size - 8px;
- content: ' ';
- transform: translate(-50%, -50%) scale(1);
- border: 0;
- left: 50%;
- top: 50%;
- width: @indeterminate-width;
- height: @indeterminate-height;
- background-color: @checkbox-color;
- opacity: 1;
- }
-
- &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
- border-color: @disabled-color;
- background-color: @disabled-color;
- }
- }
-}
-
-@keyframes antCheckboxEffect {
- 0% {
- transform: scale(1);
- opacity: 0.5;
- }
- 100% {
- transform: scale(1.6);
- opacity: 0;
- }
-}
-
-.antCheckboxFn();
-
-@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
-
-.collapse-close() {
- transform: rotate(0);
-}
-.collapse-open() {
- transform: rotate(90deg);
-}
-
-.@{collapse-prefix-cls} {
- .reset-component;
- background-color: @collapse-header-bg;
- border-radius: @border-radius-base;
- border: @border-width-base @border-style-base @border-color-base;
- border-bottom: 0;
-
- & > &-item {
- border-bottom: @border-width-base @border-style-base @border-color-base;
-
- &:last-child {
- &,
- & > .@{collapse-prefix-cls}-header {
- border-radius: 0 0 @border-radius-base @border-radius-base;
- }
- }
-
- > .@{collapse-prefix-cls}-header {
- line-height: 22px;
- padding: @collapse-header-padding;
- color: @heading-color;
- cursor: pointer;
- position: relative;
- transition: all 0.3s;
-
- .arrow {
- .iconfont-mixin();
- font-size: @font-size-sm;
- position: absolute;
- display: inline-block;
- line-height: 46px;
- vertical-align: top;
- top: 50%;
- transform: translateY(-50%);
- left: @padding-md;
- & svg {
- .collapse-close();
- transition: transform 0.24s;
- }
- }
-
- &:focus {
- outline: none;
- }
- }
-
- &.@{collapse-prefix-cls}-no-arrow {
- > .@{collapse-prefix-cls}-header {
- padding-left: 12px;
- }
- }
- }
-
- &-anim-active {
- transition: height 0.2s @ease-out;
- }
-
- &-content {
- overflow: hidden;
- color: @text-color;
- background-color: @collapse-content-bg;
- border-top: @border-width-base @border-style-base @border-color-base;
-
- & > &-box {
- padding: @collapse-content-padding;
- }
-
- &-inactive {
- display: none;
- }
- }
-
- &-item:last-child {
- > .@{collapse-prefix-cls}-content {
- border-radius: 0 0 @border-radius-base @border-radius-base;
- }
- }
-
- & > &-item > &-header[aria-expanded='true'] {
- .anticon-right svg {
- .collapse-open();
- }
- }
-
- &-borderless {
- background-color: @component-background;
- border: 0;
- }
-
- &-borderless > &-item {
- border-bottom: 1px solid @border-color-base;
- }
-
- &-borderless > &-item:last-child,
- &-borderless > &-item:last-child &-header {
- border-radius: 0;
- }
-
- &-borderless > &-item > &-content {
- background-color: transparent;
- border-top: 0;
- }
-
- &-borderless > &-item > &-content > &-content-box {
- padding-top: 4px;
- }
-
- & &-item-disabled > &-header {
- &,
- & > .arrow {
- cursor: not-allowed;
- color: @disabled-color;
- }
- }
-}
-
-.cdk-overlay-container {
- pointer-events: none;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- position: fixed;
- z-index: 1000;
-}
-
-.cdk-overlay-backdrop {
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-tap-highlight-color: transparent;
- transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
- opacity: 0;
- position: absolute;
- pointer-events: auto;
- z-index: 1000;
-}
-
-.cdk-overlay-pane {
- position: absolute;
- pointer-events: auto;
- z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal
-}
-
-.cdk-overlay-connected-position-bounding-box {
- position: absolute;
- z-index: 1000;
- display: flex;
- flex-direction: column;
- min-width: 1px;
- min-height: 1px;
-}
-
-.box-shadow-left() {
- .ant-table-th-right-sticky, .ant-table-td-right-sticky {
- box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
- }
-}
-
-.box-shadow-right() {
- .ant-table-th-left-sticky, .ant-table-td-left-sticky {
- box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05);
- }
-}
-
-.border-left() {
- .ant-table-th-right-sticky, .ant-table-td-right-sticky {
- border-right: @border-width-base @border-style-base @border-color-split;
- }
-}
-
-.border-right() {
- .ant-table-th-left-sticky, .ant-table-td-left-sticky {
- border-left: @border-width-base @border-style-base @border-color-split;
- }
-}
-
-.ant-table-td-right-sticky + .ant-table-td-right-sticky {
- box-shadow: none;
-}
-
-.ant-table-th-right-sticky + .ant-table-th-right-sticky {
- box-shadow: none;
-}
-
-.ant-table-th-left-sticky, .ant-table-th-right-sticky, .ant-table-td-right-sticky, .ant-table-td-left-sticky {
- position: sticky !important;
- z-index: 1;
-}
-
-.ant-table-td-left-sticky, .ant-table-td-right-sticky {
- background: @component-background;
-}
-
-.ant-table-tbody {
- & > tr {
- &:hover {
- & > td {
- &.ant-table-td-left-sticky {
- background: @table-row-hover-bg;
- }
-
- &.ant-table-td-right-sticky {
- background: @table-row-hover-bg;
- }
- }
- }
- }
-}
-
-.ant-table-scroll-position-middle {
- .box-shadow-right;
- .box-shadow-left;
-}
-
-.ant-table-scroll-position-left {
- .box-shadow-left;
-}
-
-.ant-table-scroll-position-right {
- .box-shadow-right;
-}
-
-.ant-table-bordered {
- &.ant-table-scroll-position-middle {
- .border-right;
- .border-left;
- }
-
- &.ant-table-scroll-position-left {
- .border-left;
- }
-
- &.ant-table-scroll-position-right {
- .border-right;
- }
-}
-
-// hack tree css
-.ant-tree {
- &.ant-tree-show-line {
- > nz-tree-node:not(:last-child), .ant-tree-child-tree > nz-tree-node:not(:last-child) {
- > li:before {
- content: ' ';
- width: 1px;
- border-left: 1px solid @border-color-base;
- height: 100%;
- position: absolute;
- left: 12px;
- margin: 22px 0;
- }
- }
- .ant-tree-child-tree > nz-tree-node:last-child {
- > li:before {
- content: ' ';
- width: 1px;
- border-left: 0px solid @border-color-base;
- height: 100%;
- position: absolute;
- left: 12px;
- margin: 22px 0;
- }
- }
- }
- .font-highlight {
- color: @highlight-color;
- }
-}
-
-textarea.cdk-textarea-autosize-measuring {
- height: auto !important;
- overflow: hidden !important;
- // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
- // measurement. We just have to account for it later and subtract it off the final result.
- padding: 2px 0 !important;
- box-sizing: content-box !important;
-}
-
-@divider-prefix-cls: ~'@{ant-prefix}-divider';
-
-.@{divider-prefix-cls} {
- .reset-component;
- background: @border-color-split;
-
- &, // for compatiable
- &-vertical {
- margin: 0 8px;
- display: inline-block;
- height: 0.9em;
- width: 1px;
- vertical-align: middle;
- position: relative;
- top: -0.06em;
- }
- &-horizontal {
- display: block;
- height: 1px;
- width: 100%;
- min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
- margin: 24px 0;
- clear: both;
- }
-
- &-horizontal&-with-text,
- &-horizontal&-with-text-left,
- &-horizontal&-with-text-right {
- display: table;
- white-space: nowrap;
- text-align: center;
- background: transparent;
- font-weight: 500;
- color: @heading-color;
- font-size: @font-size-lg;
- margin: 16px 0;
- &:before,
- &:after {
- content: '';
- display: table-cell;
- position: relative;
- top: 50%;
- width: 50%;
- border-top: 1px solid @border-color-split;
- transform: translateY(50%);
- }
- }
-
- &-horizontal&-with-text-left,
- &-horizontal&-with-text-right {
- .@{divider-prefix-cls}-inner-text {
- display: inline-block;
- padding: 0 10px;
- }
- }
-
- &-horizontal&-with-text-left {
- &:before {
- top: 50%;
- width: 5%;
- }
- &:after {
- top: 50%;
- width: 95%;
- }
- }
-
- &-horizontal&-with-text-right {
- &:before {
- top: 50%;
- width: 95%;
- }
- &:after {
- top: 50%;
- width: 5%;
- }
- }
-
- &-inner-text {
- display: inline-block;
- padding: 0 24px;
- }
-
- &-dashed {
- background: none;
- border-top: 1px dashed @border-color-split;
- }
- &-horizontal&-with-text&-dashed,
- &-horizontal&-with-text-left&-dashed,
- &-horizontal&-with-text-right&-dashed {
- border-top: 0;
- &:before,
- &:after {
- border-style: dashed none none;
- }
- }
-}
-
-@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
-
-.@{dropdown-prefix-cls} {
- .reset-component;
- position: absolute;
- left: -9999px;
- top: -9999px;
- z-index: @zindex-dropdown;
- display: block;
-
- &:before {
- position: absolute;
- top: -7px;
- left: -7px;
- right: 0;
- bottom: -7px;
- content: ' ';
- opacity: 0.0001;
- }
-
- &-wrap {
- position: relative;
-
- .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
- .iconfont-size-under-12px(10px);
- }
-
- .@{iconfont-css-prefix}-down:before {
- transition: transform 0.2s;
- }
- }
-
- &-wrap-open {
- .@{iconfont-css-prefix}-down:before {
- transform: rotate(180deg);
- }
- }
-
- &-hidden,
- &-menu-hidden {
- display: none;
- }
-
- &-menu {
- outline: none;
- position: relative;
- list-style-type: none;
- padding: 4px 0;
- margin: 0;
- text-align: left;
- background-color: @component-background;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- background-clip: padding-box;
- -webkit-transform: translate3d(0, 0, 0);
-
- &-item-group-title {
- color: @text-color-secondary;
- padding: 5px @control-padding-horizontal;
- transition: all 0.3s;
- }
-
- &-submenu-popup {
- position: absolute;
- z-index: @zindex-dropdown;
-
- > .@{dropdown-prefix-cls}-menu {
- transform-origin: 0 0;
- }
- }
-
- &-item,
- &-submenu-title {
- padding: 5px @control-padding-horizontal;
- margin: 0;
- clear: both;
- font-size: @font-size-base;
- font-weight: normal;
- color: @text-color;
- white-space: nowrap;
- cursor: pointer;
- transition: all 0.3s;
- line-height: 22px;
-
- > .anticon:first-child {
- min-width: 12px;
- margin-right: 8px;
- }
-
- > a {
- color: @text-color;
- display: block;
- padding: 5px @control-padding-horizontal;
- margin: -5px -@control-padding-horizontal;
- transition: all 0.3s;
- &:focus {
- text-decoration: none;
- }
- }
-
- &-selected,
- &-selected > a {
- color: @primary-color;
- background-color: @item-active-bg;
- }
-
- &:hover {
- background-color: @item-hover-bg;
- }
-
- &-disabled {
- color: @disabled-color;
- cursor: not-allowed;
-
- &:hover {
- color: @disabled-color;
- background-color: @component-background;
- cursor: not-allowed;
- }
- }
-
- &-divider {
- height: 1px;
- overflow: hidden;
- background-color: @border-color-split;
- line-height: 0;
- margin: 4px 0;
- }
- .@{dropdown-prefix-cls}-menu-submenu-arrow {
- position: absolute;
- right: @padding-xs;
- &-icon {
- font-style: normal;
- color: @text-color-secondary;
- .iconfont-size-under-12px(10px);
- }
- }
- }
-
- &-submenu-title {
- padding-right: 26px;
- }
-
- &-submenu-vertical {
- position: relative;
- }
-
- &-submenu-vertical > & {
- top: 0;
- left: 100%;
- position: absolute;
- min-width: 100%;
- margin-left: 4px;
- transform-origin: 0 0;
- }
-
- &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
- &,
- .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
- color: @disabled-color;
- }
- }
- }
-
- &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
- &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
- &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
- &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
- &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
- &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
- animation-name: antSlideUpIn;
- }
-
- &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
- &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
- &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
- &.slide-up-enter.slide-up-enter-active&-placement-topRight,
- &.slide-up-appear.slide-up-appear-active&-placement-topRight {
- animation-name: antSlideDownIn;
- }
-
- &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
- &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
- &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
- animation-name: antSlideUpOut;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
- &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
- &.slide-up-leave.slide-up-leave-active&-placement-topRight {
- animation-name: antSlideDownOut;
- }
-}
-
-.@{dropdown-prefix-cls}-trigger,
-.@{dropdown-prefix-cls}-link {
- > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
- .iconfont-size-under-12px(10px);
- }
-}
-
-.@{dropdown-prefix-cls}-button {
- white-space: nowrap;
-
- &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
- padding-left: @padding-xs;
- padding-right: @padding-xs;
- }
- .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
- .iconfont-size-under-12px(10px);
- }
-}
-
-// https://github.com/ant-design/ant-design/issues/4903
-.@{dropdown-prefix-cls}-menu-dark {
- &,
- .@{dropdown-prefix-cls}-menu {
- background: @menu-dark-bg;
- }
- .@{dropdown-prefix-cls}-menu-item,
- .@{dropdown-prefix-cls}-menu-submenu-title,
- .@{dropdown-prefix-cls}-menu-item > a {
- color: @text-color-secondary-dark;
- .@{dropdown-prefix-cls}-menu-submenu-arrow:after {
- color: @text-color-secondary-dark;
- }
- &:hover {
- color: #fff;
- background: transparent;
- }
- }
- .@{dropdown-prefix-cls}-menu-item-selected {
- &,
- &:hover,
- > a {
- background: @primary-color;
- color: #fff;
- }
- }
-}
-
-.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
- .@{ant-prefix}-form-explain,
- .@{ant-prefix}-form-split {
- color: @text-color;
- }
- // 输入框的不同校验状态
- .@{ant-prefix}-input {
- &,
- &:hover {
- border-color: @border-color;
- }
-
- &:focus {
- .active(@border-color);
- }
-
- &:not([disabled]):hover {
- border-color: @border-color;
- }
- }
-
- .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
- .active(@border-color);
- }
-
- // Input prefix
- .@{ant-prefix}-input-affix-wrapper {
- .@{ant-prefix}-input {
- &,
- &:hover {
- border-color: @border-color;
- }
-
- &:focus {
- .active(@border-color);
- }
- }
-
- &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
- border-color: @border-color;
- }
- }
-
- .@{ant-prefix}-input-prefix {
- color: @text-color;
- }
-
- .@{ant-prefix}-input-group-addon {
- color: @text-color;
- border-color: @border-color;
- background-color: @background-color;
- }
-
- .has-feedback {
- color: @text-color;
- }
-}
-
-// Reset form styles
-// -----------------------------
-// Based on Bootstrap framework
-.reset-form() {
- legend {
- display: block;
- width: 100%;
- padding: 0;
- margin-bottom: 20px;
- font-size: @font-size-lg;
- line-height: inherit;
- color: @text-color-secondary;
- border: 0;
- border-bottom: @border-width-base @border-style-base @border-color-base;
- }
-
- label {
- font-size: @font-size-base;
- }
-
- input[type='search'] {
- box-sizing: border-box;
- }
-
- // Position radios and checkboxes better
- input[type='radio'],
- input[type='checkbox'] {
- line-height: normal;
- }
-
- input[type='file'] {
- display: block;
- }
-
- // Make range inputs behave like textual form controls
- input[type='range'] {
- display: block;
- width: 100%;
- }
-
- // Make multiple select elements height not fixed
- select[multiple],
- select[size] {
- height: auto;
- }
-
- // Focus for file, radio, and checkbox
- input[type='file']:focus,
- input[type='radio']:focus,
- input[type='checkbox']:focus {
- outline: thin dotted;
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
- }
-
- // Adjust output element
- output {
- display: block;
- padding-top: 15px;
- font-size: @font-size-base;
- line-height: @line-height-base;
- color: @input-color;
- }
-}
-
-@form-prefix-cls: ~'@{ant-prefix}-form';
-@form-component-height: @input-height-base;
-@form-component-max-height: @input-height-lg;
-@form-feedback-icon-size: @font-size-base;
-@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;
-
-.@{form-prefix-cls} {
- .reset-component;
- .reset-form;
-}
-
-.@{form-prefix-cls}-item-required:before {
- display: inline-block;
- margin-right: 4px;
- content: '*';
- font-family: SimSun;
- line-height: 1;
- font-size: @font-size-base;
- color: @label-required-color;
- .@{form-prefix-cls}-hide-required-mark & {
- display: none;
- }
-}
-
-// Radio && Checkbox
-input[type='radio'],
-input[type='checkbox'] {
- &[disabled],
- &.disabled {
- cursor: not-allowed;
- }
-}
-
-// These classes are used directly on
s
-.@{ant-prefix}-radio-inline,
-.@{ant-prefix}-radio-vertical,
-.@{ant-prefix}-checkbox-inline,
-.@{ant-prefix}-checkbox-vertical {
- &.disabled {
- cursor: not-allowed;
- }
-}
-
-// These classes are used on elements with descendants
-.@{ant-prefix}-radio,
-.@{ant-prefix}-checkbox {
- &.disabled {
- label {
- cursor: not-allowed;
- }
- }
-}
-
-// Form items
-// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
-.@{form-prefix-cls}-item {
- label {
- position: relative;
-
- > .@{iconfont-css-prefix} {
- vertical-align: top;
- font-size: @font-size-base;
- }
- }
-
- .reset-component;
- margin-bottom: @form-item-margin-bottom;
- vertical-align: top;
-
- &-control {
- line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
- position: relative;
- .clearfix;
- }
-
- &-children {
- position: relative;
- }
-
- &-with-help {
- margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
- @form-help-margin-top;
- }
-
- &-label {
- text-align: right;
- vertical-align: middle;
- line-height: @form-component-max-height - 0.0001px;
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
-
- label {
- color: @label-color;
-
- &:after {
- & when (@form-item-trailing-colon=true) {
- content: ':';
- }
- & when not (@form-item-trailing-colon=true) {
- content: ' ';
- }
- margin: 0 8px 0 2px;
- position: relative;
- top: -0.5px;
- }
- }
- }
-
- .@{ant-prefix}-switch {
- margin: 2px 0 4px;
- }
-
- &-no-colon &-label label:after {
- content: ' ';
- }
-}
-
-.@{form-prefix-cls}-explain,
-.@{form-prefix-cls}-extra {
- color: @text-color-secondary;
- // Magic tweak pixel number to float line-height diff in windows
- // Fix https://github.com/ant-design/ant-design/issues/12803
- line-height: @line-height-base + 0.024;
- transition: color 0.3s @ease-out; // sync input color transition
- margin-top: @form-help-margin-top;
- clear: both;
-}
-
-.@{form-prefix-cls}-extra {
- padding-top: 4px;
-}
-
-.@{form-prefix-cls}-text {
- display: inline-block;
- padding-right: 8px;
-}
-
-.@{form-prefix-cls}-split {
- display: block;
- text-align: center;
-}
-
-// 表单下的输入框尺寸唯一: 大尺寸
-form {
- .has-feedback {
- .@{ant-prefix}-input {
- padding-right: 24px;
- }
-
- // Fix overlapping between feedback icon and 's arrow.
- // https://github.com/ant-design/ant-design/issues/4431
- > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
- > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
- :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
- :not(.@{ant-prefix}-input-group-addon)
- > .@{ant-prefix}-select
- .@{ant-prefix}-select-selection__clear {
- right: 28px;
- }
- > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
- :not(.@{ant-prefix}-input-group-addon)
- > .@{ant-prefix}-select
- .@{ant-prefix}-select-selection-selected-value {
- padding-right: 42px;
- }
-
- .@{ant-prefix}-cascader-picker {
- &-arrow {
- margin-right: 17px;
- }
- &-clear {
- right: 28px;
- }
- }
-
- // Fix issue: https://github.com/ant-design/ant-design/issues/7854
- .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
- .@{ant-prefix}-input-suffix {
- right: 28px;
- }
- }
-
- // Fix issue: https://github.com/ant-design/ant-design/issues/4783
- .@{ant-prefix}-calendar-picker,
- .@{ant-prefix}-time-picker {
- &-icon,
- &-clear {
- right: 28px;
- }
- }
- }
-
- textarea.@{ant-prefix}-input {
- height: auto;
- margin-bottom: 4px;
- }
-
- // input[type=file]
- .@{ant-prefix}-upload {
- background: transparent;
- }
-
- input[type='radio'],
- input[type='checkbox'] {
- width: 14px;
- height: 14px;
- }
-
- // Radios and checkboxes on same line
- .@{ant-prefix}-radio-inline,
- .@{ant-prefix}-checkbox-inline {
- display: inline-block;
- vertical-align: middle;
- font-weight: normal;
- cursor: pointer;
- margin-left: 8px;
-
- &:first-child {
- margin-left: 0;
- }
- }
-
- .@{ant-prefix}-checkbox-vertical,
- .@{ant-prefix}-radio-vertical {
- display: block;
- }
-
- .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
- .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
- margin-left: 0;
- }
-
- .@{ant-prefix}-input-number {
- + .@{form-prefix-cls}-text {
- margin-left: 8px;
- }
- &-handler-wrap {
- z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
- }
- }
-
- .@{ant-prefix}-select,
- .@{ant-prefix}-cascader-picker {
- width: 100%;
- }
-
- // Don't impact select inside input group
- .@{ant-prefix}-input-group .@{ant-prefix}-select,
- .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
- width: auto;
- }
-
- // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
- :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
- .@{ant-prefix}-input-group-wrapper {
- display: inline-block;
- vertical-align: middle;
- position: relative;
- top: -1px;
- }
-}
-
-// Input combined with select
-.@{ant-prefix}-input-group-wrap {
- .@{ant-prefix}-select-selection {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- &:hover {
- border-color: @border-color-base;
- }
- }
-
- .@{ant-prefix}-select-selection--single {
- margin-left: -1px;
- height: @input-height-lg;
- background-color: #eee;
- .@{ant-prefix}-select-selection__rendered {
- padding-left: 8px;
- padding-right: 25px;
- line-height: 30px;
- }
- }
-
- .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
- border-color: @border-color-base;
- box-shadow: none;
- }
-}
-
-// Form layout
-//== Vertical Form
-.make-vertical-layout-label() {
- padding: @form-vertical-label-padding;
- margin: @form-vertical-label-margin;
- display: block;
- text-align: left;
- line-height: @line-height-base;
-
- label:after {
- display: none;
- }
-}
-
-.make-vertical-layout() {
- .@{form-prefix-cls}-item-label,
- .@{form-prefix-cls}-item-control-wrapper {
- display: block;
- width: 100%;
- }
- .@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
- // when labelCol is 24, it is a vertical form
-.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
-.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
-}
-
-.@{form-prefix-cls}-vertical {
- .@{form-prefix-cls}-item {
- padding-bottom: 8px;
- }
- .@{form-prefix-cls}-item-control {
- line-height: @line-height-base;
- }
- .@{form-prefix-cls}-explain,
- .@{form-prefix-cls}-extra {
- margin-top: 2px;
- margin-bottom: -4px;
- }
-}
-
-@media (max-width: @screen-xs-max) {
- .make-vertical-layout();
- .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-sm-max) {
- .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-md-max) {
- .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-lg-max) {
- .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-xl-max) {
- .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-//== Inline Form
-.@{form-prefix-cls}-inline {
- .@{form-prefix-cls}-item {
- display: inline-block;
- margin-right: 16px;
- margin-bottom: 0;
-
- &-with-help {
- margin-bottom: 24px;
- }
-
- > .@{form-prefix-cls}-item-control-wrapper,
- > .@{form-prefix-cls}-item-label {
- display: inline-block;
- vertical-align: top;
- }
- }
-
- .@{form-prefix-cls}-text {
- display: inline-block;
- }
-
- .has-feedback {
- display: inline-block;
- }
-}
-
-// Validation state
-.has-success,
-.has-warning,
-.has-error,
-.is-validating {
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- position: absolute;
- top: 50%;
- right: 0;
- visibility: visible;
- pointer-events: none;
- width: @form-component-height;
- height: 20px;
- line-height: 20px;
- margin-top: -10px;
- text-align: center;
- font-size: @form-feedback-icon-size;
- animation: zoomIn 0.3s @ease-out-back;
- z-index: 1;
-
- & svg {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- }
- }
-}
-
-.has-success {
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- animation-name: diffZoomIn1 !important;
- color: @success-color;
- }
-}
-
-.has-warning {
- .form-control-validation(@warning-color; @warning-color;);
-
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- color: @warning-color;
- animation-name: diffZoomIn3 !important;
- }
-
- //select
- .@{ant-prefix}-select {
- &-selection {
- border-color: @warning-color;
- &:hover {
- border-color: @warning-color;
- }
- }
- &-open .@{ant-prefix}-select-selection,
- &-focused .@{ant-prefix}-select-selection {
- .active(@warning-color);
- }
- }
-
- // arrow and icon
- .@{ant-prefix}-calendar-picker-icon:after,
- .@{ant-prefix}-time-picker-icon:after,
- .@{ant-prefix}-picker-icon:after,
- .@{ant-prefix}-select-arrow,
- .@{ant-prefix}-cascader-picker-arrow {
- color: @warning-color;
- }
-
- //input-number, timepicker
- .@{ant-prefix}-input-number,
- .@{ant-prefix}-time-picker-input {
- border-color: @warning-color;
- &-focused,
- &:focus {
- .active(@warning-color);
- }
- &:not([disabled]):hover {
- border-color: @warning-color;
- }
- }
-
- .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
- .active(@warning-color);
- }
-}
-
-.has-error {
- .form-control-validation(@error-color; @error-color;);
-
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- color: @error-color;
- animation-name: diffZoomIn2 !important;
- }
-
- //select
- .@{ant-prefix}-select {
- &-selection {
- border-color: @error-color;
- &:hover {
- border-color: @error-color;
- }
- }
- &-open .@{ant-prefix}-select-selection,
- &-focused .@{ant-prefix}-select-selection {
- .active(@error-color);
- }
- }
-
- .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
- .@{ant-prefix}-input:focus {
- border-color: @error-color;
- }
- }
-
- .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
- &-selection {
- border-color: transparent;
- box-shadow: none;
- }
- }
-
- // arrow and icon
- .@{ant-prefix}-calendar-picker-icon:after,
- .@{ant-prefix}-time-picker-icon:after,
- .@{ant-prefix}-picker-icon:after,
- .@{ant-prefix}-select-arrow,
- .@{ant-prefix}-cascader-picker-arrow {
- color: @error-color;
- }
-
- //input-number, timepicker
- .@{ant-prefix}-input-number,
- .@{ant-prefix}-time-picker-input {
- border-color: @error-color;
- &-focused,
- &:focus {
- .active(@error-color);
- }
- &:not([disabled]):hover {
- border-color: @error-color;
- }
- }
- .@{ant-prefix}-mention-wrapper {
- .@{ant-prefix}-mention-editor {
- &,
- &:not([disabled]):hover {
- border-color: @error-color;
- }
- }
- &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
- .@{ant-prefix}-mention-editor:not([disabled]):focus {
- .active(@error-color);
- }
- }
-
- .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
- .active(@error-color);
- }
-
- // transfer
- .@{ant-prefix}-transfer {
- &-list {
- border-color: @error-color;
-
- &-search:not([disabled]) {
- border-color: @input-border-color;
-
- &:hover {
- .hover();
- }
-
- &:focus {
- .active();
- }
- }
- }
- }
-}
-
-.is-validating {
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- display: inline-block;
- color: @primary-color;
- }
-}
-
-.@{ant-prefix}-advanced-search-form {
- .@{form-prefix-cls}-item {
- margin-bottom: @form-item-margin-bottom;
-
- &-with-help {
- margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
- @form-help-margin-top;
- }
- }
-}
-
-.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
- .make-motion(@className, @keyframeName, @duration);
- .@{className}-enter,
- .@{className}-appear {
- opacity: 0;
- animation-timing-function: @ease-in-out;
- }
- .@{className}-leave {
- animation-timing-function: @ease-in-out;
- }
-}
-
-.show-help-motion(show-help, antShowHelp, 0.3s);
-
-@keyframes antShowHelpIn {
- 0% {
- opacity: 0;
- transform: translateY(-5px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@keyframes antShowHelpOut {
- to {
- opacity: 0;
- transform: translateY(-5px);
- }
-}
-
-// need there different zoom animation
-// otherwise won't trigger anim
-@keyframes diffZoomIn1 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@keyframes diffZoomIn2 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@keyframes diffZoomIn3 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-// Input styles
-.@{ant-prefix}-input {
- .reset-component;
- .input;
-}
-
-//== Style for input-group: input with label, with button or dropdown...
-.@{ant-prefix}-input-group {
- .reset-component;
- .input-group(~'@{ant-prefix}-input');
- &-wrapper {
- display: inline-block;
- vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
- width: 100%;
- }
-}
-
-// Input with affix: prefix or suffix
-.@{ant-prefix}-input-affix-wrapper {
- .reset-component;
- .input-affix-wrapper(~'@{ant-prefix}-input');
-
- // https://github.com/ant-design/ant-design/issues/6144
- .@{ant-prefix}-input {
- min-height: 100%; // use min-height, assume that no smaller height to override
- }
-}
-
-@search-prefix: ~'@{ant-prefix}-input-search';
-
-.@{search-prefix} {
- &-icon {
- color: @text-color-secondary;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- color: #333;
- }
- }
-
- &:not(&-small) > .@{ant-prefix}-input-suffix {
- right: @control-padding-horizontal;
- }
-
- > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- > .@{iconfont-css-prefix}-search {
- font-size: @font-size-lg;
- }
- }
-
- &.@{search-prefix}-enter-button > .@{ant-prefix}-input {
- padding-right: 46px;
- }
-
- &.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix {
- right: 0;
- }
-}
-
-@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
-
-.@{input-number-prefix-cls} {
- .reset-component;
- .input;
- margin: 0;
- padding: 0;
- display: inline-block;
- border: @border-width-base @border-style-base @border-color-base;
- border-radius: @border-radius-base;
- width: 90px;
-
- &-handler {
- text-align: center;
- line-height: 0;
- height: 50%;
- overflow: hidden;
- color: @text-color-secondary;
- position: relative;
- transition: all 0.1s linear;
- display: block;
- width: 100%;
- font-weight: bold;
- &:active {
- background: #f4f4f4;
- }
- &:hover &-up-inner,
- &:hover &-down-inner {
- color: @primary-5;
- }
- }
-
- &-handler-up-inner,
- &-handler-down-inner {
- .iconfont-mixin();
- line-height: 12px;
- user-select: none;
- position: absolute;
- width: 12px;
- height: 12px;
- transition: all 0.1s linear;
- .iconfont-size-under-12px(7px);
- right: 4px;
- color: @text-color-secondary;
- }
-
- &:hover {
- .hover();
- }
-
- &-focused {
- .active();
- }
-
- &-disabled {
- .disabled();
- .@{input-number-prefix-cls}-input {
- cursor: not-allowed;
- }
- .@{input-number-prefix-cls}-handler-wrap {
- display: none;
- }
- }
-
- &-input {
- width: 100%;
- text-align: left;
- outline: 0;
- -moz-appearance: textfield;
- height: @input-height-base - 2px;
- transition: all 0.3s linear;
- background-color: transparent;
- border: 0;
- border-radius: @border-radius-base;
- padding: 0 @control-padding-horizontal - 1px;
- .placeholder();
- }
-
- &-lg {
- padding: 0;
- font-size: @font-size-lg;
-
- input {
- height: @input-height-lg - 2px;
- }
- }
-
- &-sm {
- padding: 0;
-
- input {
- height: @input-height-sm - 2px;
- padding: 0 @control-padding-horizontal-sm - 1px;
- }
- }
-
- &-handler-wrap {
- border-left: @border-width-base @border-style-base @border-color-base;
- width: 22px;
- height: 100%;
- background: @component-background;
- position: absolute;
- top: 0;
- right: 0;
- opacity: 0;
- border-radius: 0 @border-radius-base @border-radius-base 0;
- transition: opacity 0.24s linear 0.1s;
- }
-
- &-handler-wrap:hover &-handler {
- height: 40%;
- }
-
- &:hover &-handler-wrap {
- opacity: 1;
- }
-
- &-handler-up {
- cursor: pointer;
- &-inner {
- top: 50%;
- margin-top: -5px;
- text-align: center;
- }
- &:hover {
- height: 60% !important;
- }
- }
-
- &-handler-down {
- border-top: @border-width-base @border-style-base @border-color-base;
- top: 0;
- cursor: pointer;
- &-inner {
- top: 50%;
- margin-top: -6px;
- text-align: center;
- }
- &:hover {
- height: 60% !important;
- }
- }
-
- &-handler-up-disabled,
- &-handler-down-disabled {
- cursor: not-allowed;
- }
-
- &-handler-up-disabled:hover &-handler-up-inner,
- &-handler-down-disabled:hover &-handler-down-inner {
- color: @disabled-color;
- }
-}
-
-@layout-prefix-cls: ~'@{ant-prefix}-layout';
-
-.@{layout-prefix-cls} {
- display: flex;
- flex-direction: column;
- flex: auto;
- background: @layout-body-background;
- /* fix firefox can't set height smaller than content on flex item */
- min-height: 0;
-
- &,
- * {
- box-sizing: border-box;
- }
-
- &&-has-sider {
- flex-direction: row;
- > .@{layout-prefix-cls},
- > .@{layout-prefix-cls}-content {
- overflow-x: hidden;
- }
- }
-
- &-header,
- &-footer {
- flex: 0 0 auto;
- }
-
- &-header {
- background: @layout-header-background;
- padding: @layout-header-padding;
- height: @layout-header-height;
- line-height: @layout-header-height;
- }
-
- &-footer {
- background: @layout-footer-background;
- padding: @layout-footer-padding;
- color: @text-color;
- font-size: @font-size-base;
- }
-
- &-content {
- flex: auto;
- /* fix firefox can't set height smaller than content on flex item */
- min-height: 0;
- }
-
- &-sider {
- transition: all 0.2s;
- position: relative;
- background: @layout-sider-background;
-
- /* fix firefox can't set width smaller than content on flex item */
- min-width: 0;
-
- &-children {
- height: 100%;
- // Hack for fixing margin collaspe bug
- // https://github.com/ant-design/ant-design/issues/7967
- // solution from https://stackoverflow.com/a/33132624/3040605
- padding-top: 0.1px;
- margin-top: -0.1px;
- }
-
- &-has-trigger {
- padding-bottom: @layout-trigger-height;
- }
-
- &-right {
- order: 1;
- }
-
- &-trigger {
- position: fixed;
- text-align: center;
- bottom: 0;
- cursor: pointer;
- height: @layout-trigger-height;
- line-height: @layout-trigger-height;
- color: @layout-trigger-color;
- background: @layout-trigger-background;
- z-index: 1;
- transition: all 0.2s;
- }
-
- &-zero-width {
- & > * {
- overflow: hidden;
- }
-
- &-trigger {
- position: absolute;
- top: @layout-header-height;
- right: -@layout-zero-trigger-width;
- text-align: center;
- width: @layout-zero-trigger-width;
- height: @layout-zero-trigger-height;
- line-height: @layout-zero-trigger-height;
- background: @layout-sider-background;
- color: @layout-trigger-color;
- font-size: @layout-zero-trigger-width / 2;
- border-radius: 0 @border-radius-base @border-radius-base 0;
- cursor: pointer;
- transition: background 0.3s ease;
-
- &:hover {
- background: tint(@layout-sider-background, 10%);
- }
- }
- }
- }
-}
-
-.@{layout-prefix-cls} {
- &-sider {
- &-light {
- background: @layout-sider-background-light;
- }
- &-light &-trigger {
- color: @layout-trigger-color-light;
- background: @layout-trigger-background-light;
- }
- &-light &-zero-width-trigger {
- color: @layout-trigger-color-light;
- background: @layout-trigger-background-light;
- }
- }
-}
-
-@list-prefix-cls: ~'@{ant-prefix}-list';
-
-.@{list-prefix-cls} {
- .reset-component;
- position: relative;
- * {
- outline: none;
- }
- &-pagination {
- margin-top: 24px;
- text-align: right;
- }
- &-more {
- margin-top: 12px;
- text-align: center;
- button {
- padding-left: 32px;
- padding-right: 32px;
- }
- }
- &-spin {
- text-align: center;
- min-height: 40px;
- }
- &-empty-text {
- color: @text-color-secondary;
- font-size: @font-size-base;
- padding: @list-empty-text-padding;
- text-align: center;
- }
- &-item {
- align-items: center;
- display: flex;
- padding: @list-item-padding;
- &-meta {
- align-items: flex-start;
- display: flex;
- flex: 1;
- font-size: 0;
- &-avatar {
- margin-right: @list-item-meta-avatar-margin-right;
- }
- &-content {
- flex: 1 0;
- }
- &-title {
- color: @text-color;
- margin-bottom: 4px;
- font-size: @font-size-base;
- line-height: 22px;
- > a {
- color: @text-color;
- transition: all 0.3s;
- &:hover {
- color: @primary-color;
- }
- }
- }
- &-description {
- color: @text-color-secondary;
- font-size: @font-size-base;
- line-height: 22px;
- }
- }
- &-content {
- display: flex;
- flex: 1;
- justify-content: flex-end;
- }
- &-content-single {
- justify-content: flex-start;
- }
- &-action {
- font-size: 0;
- flex: 0 0 auto;
- margin-left: 48px;
- padding: 0;
- list-style: none;
- & > li {
- display: inline-block;
- color: @text-color-secondary;
- cursor: pointer;
- padding: 0 8px;
- position: relative;
- font-size: @font-size-base;
- line-height: 22px;
- text-align: center;
- }
- & > li:first-child {
- padding-left: 0;
- }
- &-split {
- background-color: @border-color-split;
- margin-top: -7px;
- position: absolute;
- top: 50%;
- right: 0;
- width: 1px;
- height: 14px;
- }
- }
- &-main {
- display: flex;
- flex: 1;
- }
- }
-
- &-header,
- &-footer {
- padding-top: 12px;
- padding-bottom: 12px;
- }
-
- &-empty {
- color: @text-color-secondary;
- padding: 16px 0;
- font-size: 12px;
- text-align: center;
- }
-
- &-split &-item {
- border-bottom: 1px solid @border-color-split;
- &:last-child {
- border-bottom: none;
- }
- }
-
- &-split &-header {
- border-bottom: 1px solid @border-color-split;
- }
-
- &-loading &-spin-nested-loading {
- min-height: 32px;
- }
-
- &-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
- border-bottom: 1px solid @border-color-split;
- }
-
- &-lg &-item {
- padding-top: 16px;
- padding-bottom: 16px;
- }
-
- &-sm &-item {
- padding-top: 8px;
- padding-bottom: 8px;
- }
-
- &-vertical &-item {
- display: block;
- &-extra-wrap {
- display: flex;
- }
- &-main {
- display: block;
- flex: 1;
- }
- &-extra {
- margin-left: 58px;
- }
- &-meta {
- margin-bottom: @list-item-meta-margin-bottom;
- &-title {
- color: @heading-color;
- margin-bottom: @list-item-meta-title-margin-bottom;
- font-size: @font-size-lg;
- line-height: 24px;
- }
- }
- &-content {
- display: block;
- color: @text-color;
- font-size: @font-size-base;
- margin: @list-item-content-margin;
- }
- &-action {
- margin-left: auto;
- > li {
- padding: 0 16px;
- &:first-child {
- padding-left: 0;
- }
- }
- }
- }
-
- &-grid &-item {
- border-bottom: none;
- padding-top: 0;
- padding-bottom: 0;
- margin-bottom: 16px;
- &-content {
- display: block;
- max-width: 100%;
- }
- }
-}
-
-.@{list-prefix-cls}-bordered {
- border-radius: @border-radius-base;
- border: 1px solid @border-color-base;
- .@{list-prefix-cls}-header {
- padding-left: 24px;
- padding-right: 24px;
- }
-
- .@{list-prefix-cls}-footer {
- padding-left: 24px;
- padding-right: 24px;
- }
-
- .@{list-prefix-cls}-item {
- border-bottom: 1px solid @border-color-split;
- padding-left: 24px;
- padding-right: 24px;
- }
-
- .@{list-prefix-cls}-pagination {
- margin: 16px 24px;
- }
-
- &.@{list-prefix-cls}-sm {
- .@{list-prefix-cls}-item {
- padding-left: 16px;
- padding-right: 16px;
- }
- .@{list-prefix-cls}-header,
- .@{list-prefix-cls}-footer {
- padding: 8px 16px;
- }
- }
-
- &.@{list-prefix-cls}-lg {
- .@{list-prefix-cls}-header,
- .@{list-prefix-cls}-footer {
- padding: 16px 24px;
- }
- }
-}
-
-@media screen and (max-width: @screen-md) {
- .@{list-prefix-cls} {
- &-item {
- &-action {
- margin-left: 24px;
- }
- }
- }
-
- .@{list-prefix-cls}-vertical {
- .@{list-prefix-cls}-item {
- &-extra {
- margin-left: 24px;
- }
- }
- }
-}
-
-@media screen and (max-width: @screen-xs) {
- .@{list-prefix-cls} {
- &-item {
- flex-wrap: wrap;
- &-action {
- margin-left: 12px;
- }
- }
- }
-
- .@{list-prefix-cls}-vertical {
- .@{list-prefix-cls}-item {
- &-extra-wrap {
- flex-wrap: wrap-reverse;
- }
- &-main {
- min-width: 220px;
- }
- &-extra {
- margin-left: 0;
- }
- }
- }
-}
-
-@menu-prefix-cls: ~'@{ant-prefix}-menu';
-
-// default theme
-.@{menu-prefix-cls} {
- .reset-component;
- outline: none;
- margin-bottom: 0;
- padding-left: 0; // Override default ul/ol
- list-style: none;
- box-shadow: @box-shadow-base;
- color: @menu-item-color;
- background: @menu-bg;
- line-height: 0; // Fix display inline-block gap
- transition: background 0.3s, width 0.2s;
- .clearfix;
-
- ul,
- ol {
- list-style: none;
- margin: 0;
- padding: 0;
- }
-
- &-hidden {
- display: none;
- }
-
- &-item-group-title {
- color: @menu-item-group-title-color;
- font-size: @font-size-base;
- line-height: @line-height-base;
- padding: 8px 16px;
- transition: all 0.3s;
- }
-
- &-submenu,
- &-submenu-inline {
- transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
- padding 0.15s @ease-in-out;
- }
-
- &-item:active,
- &-submenu-title:active {
- background: @menu-item-active-bg;
- }
-
- &-submenu &-sub {
- cursor: initial;
- transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
- }
-
- &-item > a {
- display: block;
- color: @menu-item-color;
- &:hover {
- color: @menu-highlight-color;
- }
- &:focus {
- text-decoration: none;
- }
- &:before {
- position: absolute;
- background-color: transparent;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- content: '';
- }
- }
-
- &-item-divider {
- height: 1px;
- overflow: hidden;
- background-color: @border-color-split;
- line-height: 0;
- }
-
- &-item:hover,
- &-item-active,
- &:not(&-inline) &-submenu-open,
- &-submenu-active,
- &-submenu-title:hover {
- color: @menu-highlight-color;
- }
-
- &-horizontal &-item,
- &-horizontal &-submenu {
- margin-top: -1px;
- }
-
- &-horizontal > &-item:hover,
- &-horizontal > &-item-active,
- &-horizontal > &-submenu &-submenu-title:hover {
- background-color: transparent;
- }
-
- &-item-selected {
- color: @menu-highlight-color;
- > a,
- > a:hover {
- color: @menu-highlight-color;
- }
- }
-
- &:not(&-horizontal) &-item-selected {
- background-color: @menu-item-active-bg;
- }
-
- &-inline,
- &-vertical,
- &-vertical-left {
- border-right: @border-width-base @border-style-base @border-color-split;
- }
- &-vertical-right {
- border-left: @border-width-base @border-style-base @border-color-split;
- }
-
- &-vertical&-sub,
- &-vertical-left&-sub,
- &-vertical-right&-sub {
- border-right: 0;
- padding: 0;
- transform-origin: 0 0;
- .@{menu-prefix-cls}-item {
- border-right: 0;
- margin-left: 0;
- left: 0;
- &:after {
- border-right: 0;
- }
- }
- > .@{menu-prefix-cls}-item,
- > .@{menu-prefix-cls}-submenu {
- transform-origin: 0 0;
- }
- }
-
- &-horizontal&-sub,
- &-vertical&-sub,
- &-vertical-left&-sub,
- &-vertical-right&-sub {
- min-width: 160px;
- }
-
- &-item,
- &-submenu-title {
- cursor: pointer;
- margin: 0;
- padding: 0 20px;
- position: relative;
- display: block;
- white-space: nowrap;
- transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
- background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
- .@{iconfont-css-prefix} {
- min-width: 14px;
- margin-right: 10px;
- font-size: @font-size-base;
- transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
- + span {
- transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
- opacity: 1;
- }
- }
- }
-
- & > &-item-divider {
- height: 1px;
- margin: 1px 0;
- overflow: hidden;
- padding: 0;
- line-height: 0;
- background-color: @border-color-split;
- }
-
- &-submenu {
- &-popup {
- position: absolute;
- border-radius: @border-radius-base;
- z-index: @zindex-dropdown;
- background: @menu-popup-bg;
-
- .submenu-title-wrapper {
- padding-right: 20px;
- }
-
- &:before {
- position: absolute;
- top: -7px;
- left: 0;
- right: 0;
- bottom: 0;
- content: ' ';
- opacity: 0.0001;
- }
- }
-
- > .@{menu-prefix-cls} {
- background-color: @menu-bg;
- border-radius: @border-radius-base;
- &-submenu-title:after {
- transition: transform 0.3s @ease-in-out;
- }
- }
-
- &-vertical,
- &-vertical-left,
- &-vertical-right,
- &-inline {
- > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
- transition: transform 0.3s @ease-in-out;
- position: absolute;
- top: 50%;
- right: 16px;
- width: 10px;
- &:before,
- &:after {
- content: '';
- position: absolute;
- vertical-align: baseline;
- background: #fff;
- background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
- width: 6px;
- height: 1.5px;
- border-radius: 2px;
- transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
- top 0.3s @ease-in-out;
- }
- &:before {
- transform: rotate(45deg) translateY(-2px);
- }
- &:after {
- transform: rotate(-45deg) translateY(2px);
- }
- }
- > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
- &:after,
- &:before {
- background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
- }
- }
- }
-
- &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
- &:before {
- transform: rotate(-45deg) translateX(2px);
- }
- &:after {
- transform: rotate(45deg) translateX(-2px);
- }
- }
-
- &-open {
- &.@{menu-prefix-cls}-submenu-inline
- > .@{menu-prefix-cls}-submenu-title
- .@{menu-prefix-cls}-submenu-arrow {
- transform: translateY(-2px);
- &:after {
- transform: rotate(-45deg) translateX(-2px);
- }
- &:before {
- transform: rotate(45deg) translateX(2px);
- }
- }
- }
- }
-
- &-vertical &-submenu-selected,
- &-vertical-left &-submenu-selected,
- &-vertical-right &-submenu-selected {
- color: @menu-highlight-color;
- > a {
- color: @menu-highlight-color;
- }
- }
-
- &-horizontal {
- border: 0;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- box-shadow: none;
- line-height: 46px;
- white-space: nowrap;
-
- > .@{menu-prefix-cls}-item,
- > .@{menu-prefix-cls}-submenu {
- position: relative;
- top: 1px;
- display: inline-block;
- vertical-align: bottom;
- border-bottom: 2px solid transparent;
-
- &:hover,
- &-active,
- &-open,
- &-selected {
- border-bottom: 2px solid @menu-highlight-color;
- color: @menu-highlight-color;
- }
- }
-
- > .@{menu-prefix-cls}-item {
- > a {
- display: block;
- color: @menu-item-color;
- &:hover {
- color: @menu-highlight-color;
- }
- &:before {
- bottom: -2px;
- }
- }
- &-selected > a {
- color: @menu-highlight-color;
- }
- }
-
- &:after {
- content: '\20';
- display: block;
- height: 0;
- clear: both;
- }
- }
-
- &-vertical,
- &-vertical-left,
- &-vertical-right,
- &-inline {
- .@{menu-prefix-cls}-item {
- position: relative;
- &:after {
- content: '';
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- border-right: @menu-item-active-border-width solid @menu-highlight-color;
- transform: scaleY(0.0001);
- opacity: 0;
- transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
- }
- }
-
- .@{menu-prefix-cls}-item,
- .@{menu-prefix-cls}-submenu-title {
- padding: 0 16px;
- font-size: @font-size-base;
- line-height: @menu-item-height;
- height: @menu-item-height;
- margin-top: 4px;
- margin-bottom: 4px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- // disable margin collapsed
- .@{menu-prefix-cls}-submenu {
- padding-bottom: 0.01px;
- }
-
- .@{menu-prefix-cls}-item:not(:last-child) {
- margin-bottom: 8px;
- }
-
- > .@{menu-prefix-cls}-item,
- > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
- line-height: @menu-inline-toplevel-item-height;
- height: @menu-inline-toplevel-item-height;
- }
- }
-
- &-inline {
- width: 100%;
- .@{menu-prefix-cls}-selected,
- .@{menu-prefix-cls}-item-selected {
- &:after {
- transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
- opacity: 1;
- transform: scaleY(1);
- }
- }
-
- .@{menu-prefix-cls}-item,
- .@{menu-prefix-cls}-submenu-title {
- width: ~'calc(100% + 1px)';
- }
-
- .@{menu-prefix-cls}-submenu-title {
- padding-right: 34px;
- }
- }
-
- &-inline-collapsed {
- width: @menu-collapsed-width;
- > .@{menu-prefix-cls}-item,
- > .@{menu-prefix-cls}-item-group
- > .@{menu-prefix-cls}-item-group-list
- > .@{menu-prefix-cls}-item,
- > .@{menu-prefix-cls}-item-group
- > .@{menu-prefix-cls}-item-group-list
- > .@{menu-prefix-cls}-submenu
- > .@{menu-prefix-cls}-submenu-title,
- > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
- left: 0;
- text-overflow: clip;
- padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
- .@{menu-prefix-cls}-submenu-arrow {
- display: none;
- }
- .@{iconfont-css-prefix} {
- font-size: 16px;
- line-height: @menu-item-height;
- margin: 0;
- + span {
- max-width: 0;
- display: inline-block;
- opacity: 0;
- }
- }
- }
- &-tooltip {
- pointer-events: none;
- .@{iconfont-css-prefix} {
- display: none;
- }
- a {
- color: @text-color-dark;
- }
- }
-
- .@{menu-prefix-cls}-item-group-title {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-left: 4px;
- padding-right: 4px;
- }
- }
-
- &-item-group-list {
- margin: 0;
- padding: 0;
- .@{menu-prefix-cls}-item,
- .@{menu-prefix-cls}-submenu-title {
- padding: 0 16px 0 28px;
- }
- }
-
- &-root&-vertical,
- &-root&-vertical-left,
- &-root&-vertical-right,
- &-root&-inline {
- box-shadow: none;
- }
-
- &-sub&-inline {
- padding: 0;
- border: 0;
- box-shadow: none;
- border-radius: 0;
- & > .@{menu-prefix-cls}-item,
- & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
- line-height: @menu-item-height;
- height: @menu-item-height;
- list-style-type: disc;
- list-style-position: inside;
- }
-
- & .@{menu-prefix-cls}-item-group-title {
- padding-left: 32px;
- }
- }
-
- // Disabled state sets text to gray and nukes hover/tab effects
- &-item-disabled,
- &-submenu-disabled {
- color: @disabled-color !important;
- cursor: not-allowed;
- background: none;
- border-color: transparent !important;
- > a {
- color: @disabled-color !important;
- pointer-events: none;
- }
- > .@{menu-prefix-cls}-submenu-title {
- color: @disabled-color !important;
- cursor: not-allowed;
- > .@{menu-prefix-cls}-submenu-arrow {
- &:before,
- &:after {
- background: @disabled-color !important;
- }
- }
- }
- }
-}
-
-.@{menu-prefix-cls} {
- // dark theme
- &-dark,
- &-dark &-sub {
- color: @menu-dark-color;
- background: @menu-dark-bg;
- .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
- opacity: 0.45;
- transition: all 0.3s;
- &:after,
- &:before {
- background: @menu-dark-arrow-color;
- }
- }
- }
-
- &-dark&-submenu-popup {
- background: transparent;
- }
-
- &-dark &-inline&-sub {
- background: @menu-dark-submenu-bg;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
- }
-
- &-dark&-horizontal {
- border-bottom: 0;
- }
-
- &-dark&-horizontal > &-item,
- &-dark&-horizontal > &-submenu {
- border-color: @menu-dark-bg;
- border-bottom: 0;
- top: 0;
- margin-top: 0;
- }
-
- &-dark&-horizontal > &-item > a:before {
- bottom: 0;
- }
-
- &-dark &-item,
- &-dark &-item-group-title,
- &-dark &-item > a {
- color: @menu-dark-color;
- }
-
- &-dark&-inline,
- &-dark&-vertical,
- &-dark&-vertical-left,
- &-dark&-vertical-right {
- border-right: 0;
- }
-
- &-dark&-inline &-item,
- &-dark&-vertical &-item,
- &-dark&-vertical-left &-item,
- &-dark&-vertical-right &-item {
- border-right: 0;
- margin-left: 0;
- left: 0;
- &:after {
- border-right: 0;
- }
- }
-
- &-dark&-inline &-item,
- &-dark&-inline &-submenu-title {
- width: 100%;
- }
-
- &-dark &-item:hover,
- &-dark &-item-active,
- &-dark &-submenu-active,
- &-dark &-submenu-open,
- &-dark &-submenu-selected,
- &-dark &-submenu-title:hover {
- background-color: transparent;
- color: @menu-dark-highlight-color;
- > a {
- color: @menu-dark-highlight-color;
- }
- > .@{menu-prefix-cls}-submenu-title,
- > .@{menu-prefix-cls}-submenu-title:hover {
- > .@{menu-prefix-cls}-submenu-arrow {
- opacity: 1;
- &:after,
- &:before {
- background: @menu-dark-highlight-color;
- }
- }
- }
- }
-
- &-dark &-item-selected {
- border-right: 0;
- color: @menu-dark-highlight-color;
- &:after {
- border-right: 0;
- }
- > a,
- > a:hover {
- color: @menu-dark-highlight-color;
- }
- }
-
- &&-dark &-item-selected,
- &-submenu-popup&-dark &-item-selected {
- background-color: @menu-dark-item-active-bg;
- }
-
- // Disabled state sets text to dark gray and nukes hover/tab effects
- &-dark &-item-disabled,
- &-dark &-submenu-disabled {
- &,
- > a {
- opacity: 0.8;
- color: @disabled-color-dark !important;
- }
- > .@{menu-prefix-cls}-submenu-title {
- color: @disabled-color-dark !important;
- > .@{menu-prefix-cls}-submenu-arrow {
- &:before,
- &:after {
- background: @disabled-color-dark !important;
- }
- }
- }
- }
-}
-
-@mention-prefix-cls: ~'@{ant-prefix}-mention';
-
-.@{mention-prefix-cls}-wrapper {
- .reset-component;
- position: relative;
- display: inline-block;
- width: 100%;
- vertical-align: middle;
-
- .@{mention-prefix-cls}-editor {
- .input;
- min-height: @input-height-base;
- height: auto; // To override height in .input mixin
- line-height: @line-height-base;
- padding: 0;
- display: block;
- &-wrapper {
- overflow-y: auto;
- height: auto;
- }
- }
- &.@{mention-prefix-cls}-active:not(.disabled) .@{mention-prefix-cls}-editor {
- .active;
- }
- &.disabled .@{mention-prefix-cls}-editor {
- .disabled();
- }
- .public-DraftEditorPlaceholder-root {
- position: absolute;
- pointer-events: none;
- .public-DraftEditorPlaceholder-inner {
- color: @input-placeholder-color;
- opacity: 1;
- outline: none;
- white-space: pre-wrap;
- word-wrap: break-word;
- height: auto;
- padding: 5px @control-padding-horizontal - 1px;
- }
- }
- .DraftEditor-editorContainer .public-DraftEditor-content {
- height: auto;
- padding: 5px @control-padding-horizontal - 1px;
- }
-}
-
-.@{mention-prefix-cls}-dropdown {
- .reset-component;
- margin-top: 1.5em;
- max-height: 250px;
- min-width: 120px;
- background-color: @component-background;
- box-shadow: @box-shadow-base;
- border-radius: @border-radius-base;
- z-index: @zindex-dropdown;
- left: -9999px;
- top: -9999px;
- position: absolute;
- outline: none;
- overflow-x: hidden;
- overflow-y: auto;
-
- &-placement-top {
- margin-top: -0.1em;
- }
-
- &-notfound&-item {
- color: @disabled-color;
-
- .@{iconfont-css-prefix}-loading {
- color: @primary-color;
- text-align: center;
- display: block;
- }
- }
- &-item {
- position: relative;
- display: block;
- padding: 5px @control-padding-horizontal;
- line-height: 22px;
- font-weight: normal;
- color: @text-color;
- white-space: nowrap;
- cursor: pointer;
- text-overflow: ellipsis;
- overflow: hidden;
- transition: background 0.3s;
-
- &:hover {
- background-color: @item-hover-bg;
- }
-
- &.focus,
- &-active {
- background-color: @item-active-bg;
- }
-
- &-disabled {
- color: @disabled-color;
- cursor: not-allowed;
-
- &:hover {
- color: @disabled-color;
- background-color: @component-background;
- cursor: not-allowed;
- }
- }
-
- &-selected {
- &,
- &:hover {
- background-color: @background-color-base;
- font-weight: bold;
- color: @text-color;
- }
- }
-
- &-divider {
- height: 1px;
- margin: 1px 0;
- overflow: hidden;
- background-color: @border-color-split;
- line-height: 0;
- }
- }
-}
-
-@message-prefix-cls: ~'@{ant-prefix}-message';
-
-.@{message-prefix-cls} {
- .reset-component;
- position: fixed;
- z-index: @zindex-message;
- width: 100%;
- top: 16px;
- left: 0;
- pointer-events: none;
-
- &-notice {
- padding: 8px;
- text-align: center;
- &:first-child {
- margin-top: -8px;
- }
- }
-
- &-notice-content {
- padding: @message-notice-content-padding;
- border-radius: @border-radius-base;
- box-shadow: @shadow-2;
- background: @component-background;
- display: inline-block;
- pointer-events: all;
- }
-
- &-success .@{iconfont-css-prefix} {
- color: @success-color;
- }
-
- &-error .@{iconfont-css-prefix} {
- color: @error-color;
- }
-
- &-warning .@{iconfont-css-prefix} {
- color: @warning-color;
- }
-
- &-info .@{iconfont-css-prefix},
- &-loading .@{iconfont-css-prefix} {
- color: @info-color;
- }
-
- .@{iconfont-css-prefix} {
- margin-right: 8px;
- font-size: @font-size-lg;
- top: 1px;
- position: relative;
- }
-
- &-notice.move-up-leave.move-up-leave-active {
- animation-name: MessageMoveOut;
- overflow: hidden;
- animation-duration: 0.3s;
- }
-}
-
-@keyframes MessageMoveOut {
- 0% {
- opacity: 1;
- max-height: 150px;
- padding: 8px;
- }
- 100% {
- opacity: 0;
- max-height: 0;
- padding: 0;
- }
-}
-
-@dialog-prefix-cls: ~'@{ant-prefix}-modal';
-@table-prefix-cls: ~'@{ant-prefix}-table';
-
-.@{dialog-prefix-cls} {
- .reset-component;
- position: relative;
- width: auto;
- margin: 0 auto;
- top: 100px;
- padding-bottom: 24px;
-
- &-wrap {
- position: fixed;
- overflow: auto;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: @zindex-modal;
- -webkit-overflow-scrolling: touch;
- outline: 0;
- }
-
- &-title {
- margin: 0;
- font-size: @font-size-lg;
- line-height: 22px;
- font-weight: 500;
- color: @heading-color;
- }
-
- &-content {
- position: relative;
- background-color: @component-background;
- border: 0;
- border-radius: @border-radius-base;
- background-clip: padding-box;
- box-shadow: @shadow-2;
- }
-
- &-close {
- cursor: pointer;
- border: 0;
- background: transparent;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 10;
- font-weight: 700;
- line-height: 1;
- text-decoration: none;
- transition: color 0.3s;
- color: @text-color-secondary;
- outline: 0;
- padding: 0;
-
- &-x {
- display: block;
- font-style: normal;
- vertical-align: baseline;
- text-align: center;
- text-transform: none;
- text-rendering: auto;
- width: 56px;
- height: 56px;
- line-height: 56px;
- font-size: @font-size-lg;
- }
-
- &:focus,
- &:hover {
- color: #444;
- text-decoration: none;
- }
- }
-
- &-header {
- padding: 16px 24px;
- border-radius: @border-radius-base @border-radius-base 0 0;
- background: @modal-header-bg;
- color: @text-color;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
-
- &-body {
- padding: 24px;
- font-size: @font-size-base;
- line-height: @line-height-base;
- word-wrap: break-word;
- }
-
- &-footer {
- border-top: @border-width-base @border-style-base @border-color-split;
- padding: 10px 16px;
- text-align: right;
- border-radius: 0 0 @border-radius-base @border-radius-base;
- button + button {
- margin-left: 8px;
- margin-bottom: 0;
- }
- }
-
- &.zoom-enter,
- &.zoom-appear {
- animation-duration: @animation-duration-slow;
- transform: none; // reset scale avoid mousePosition bug
- opacity: 0;
- user-select: none; // https://github.com/ant-design/ant-design/issues/11777
- }
-
- &-mask {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- background-color: @modal-mask-bg;
- height: 100%;
- z-index: @zindex-modal-mask;
- filter: ~'alpha(opacity=50)';
-
- &-hidden {
- display: none;
- }
- }
-
- &-open {
- overflow: hidden;
- }
-}
-
-.@{dialog-prefix-cls}-centered {
- text-align: center;
- &:before {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 0;
- }
- .@{dialog-prefix-cls} {
- display: inline-block;
- vertical-align: middle;
- top: 0;
- text-align: left;
- }
-}
-
-@media (max-width: @screen-sm-max) {
- .@{dialog-prefix-cls} {
- width: auto !important;
- margin: 10px;
- }
- .@{dialog-prefix-cls}-centered {
- .@{dialog-prefix-cls} {
- flex: 1;
- }
- }
-}
-
-@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
-
-.@{confirm-prefix-cls} {
- .@{ant-prefix}-modal-header {
- display: none;
- }
-
- .@{ant-prefix}-modal-close {
- display: none;
- }
-
- .@{ant-prefix}-modal-body {
- padding: 32px 32px 24px;
- }
-
- &-body-wrapper {
- .clearfix();
- }
-
- &-body {
- .@{confirm-prefix-cls}-title {
- color: @heading-color;
- font-weight: 500;
- font-size: @font-size-lg;
- line-height: 1.4;
- display: block;
- // create BFC to avoid
- // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
- overflow: hidden;
- }
-
- .@{confirm-prefix-cls}-content {
- margin-left: 38px;
- font-size: @font-size-base;
- color: @text-color;
- margin-top: 8px;
- }
-
- > .@{iconfont-css-prefix} {
- font-size: 22px;
- margin-right: 16px;
- float: left;
- }
- }
-
- .@{confirm-prefix-cls}-btns {
- margin-top: 24px;
- float: right;
-
- button + button {
- margin-left: 8px;
- margin-bottom: 0;
- }
- }
-
- &-error &-body > .@{iconfont-css-prefix} {
- color: @error-color;
- }
-
- &-warning &-body > .@{iconfont-css-prefix},
- &-confirm &-body > .@{iconfont-css-prefix} {
- color: @warning-color;
- }
-
- &-info &-body > .@{iconfont-css-prefix} {
- color: @info-color;
- }
-
- &-success &-body > .@{iconfont-css-prefix} {
- color: @success-color;
- }
-}
-
-@notification-prefix-cls: ~'@{ant-prefix}-notification';
-@notification-width: 384px;
-@notification-padding-vertical: 16px;
-@notification-padding-horizontal: 24px;
-@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
-@notification-margin-bottom: 16px;
-
-.@{notification-prefix-cls} {
- .reset-component;
-
- position: fixed;
- z-index: @zindex-notification;
- width: @notification-width;
- max-width: ~'calc(100vw - 32px)';
- margin-right: 24px;
-
- &-topLeft,
- &-bottomLeft {
- margin-left: 24px;
- margin-right: 0;
-
- .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
- .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
- animation-name: NotificationLeftFadeIn;
- }
- }
-
- &-close-icon {
- font-size: @font-size-base;
- cursor: pointer;
- }
-
- &-notice {
- padding: @notification-padding;
- border-radius: @border-radius-base;
- box-shadow: @shadow-2;
- background: @component-background;
- line-height: 1.5;
- position: relative;
- margin-bottom: @notification-margin-bottom;
- overflow: hidden;
-
- &-message {
- font-size: @font-size-lg;
- color: @heading-color;
- margin-bottom: 8px;
- line-height: 24px;
- display: inline-block;
-
- // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
- &-single-line-auto-margin {
- width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
- background-color: transparent;
- pointer-events: none;
- display: block;
- max-width: 4px;
- &:before {
- content: '';
- display: block;
- }
- }
- }
-
- &-description {
- font-size: @font-size-base;
- }
-
- &-closable &-message {
- padding-right: 24px;
- }
-
- &-with-icon &-message {
- font-size: @font-size-lg;
- margin-left: 48px;
- margin-bottom: 4px;
- }
-
- &-with-icon &-description {
- margin-left: 48px;
- font-size: @font-size-base;
- }
-
- &-icon {
- position: absolute;
- font-size: 24px;
- line-height: 24px;
- margin-left: 4px;
-
- &-success {
- color: @success-color;
- }
- &-info {
- color: @info-color;
- }
- &-warning {
- color: @warning-color;
- }
- &-error {
- color: @error-color;
- }
- }
-
- &-close {
- position: absolute;
- right: 22px;
- top: 16px;
- color: @text-color-secondary;
- outline: none;
-
- a&:focus {
- text-decoration: none;
- }
-
- &:hover {
- color: shade(@text-color-secondary, 40%);
- }
- }
-
- &-btn {
- float: right;
- margin-top: 16px;
- }
- }
-
- .notification-fade-effect {
- animation-duration: 0.24s;
- animation-fill-mode: both;
- animation-timing-function: @ease-in-out;
- }
-
- &-fade-enter,
- &-fade-appear {
- opacity: 0;
- .notification-fade-effect();
- animation-play-state: paused;
- }
-
- &-fade-leave {
- .notification-fade-effect();
- animation-duration: 0.2s;
- animation-play-state: paused;
- }
-
- &-fade-enter&-fade-enter-active,
- &-fade-appear&-fade-appear-active {
- animation-name: NotificationFadeIn;
- animation-play-state: running;
- }
-
- &-fade-leave&-fade-leave-active {
- animation-name: NotificationFadeOut;
- animation-play-state: running;
- }
-}
-
-@keyframes NotificationFadeIn {
- 0% {
- opacity: 0;
- left: @notification-width;
- }
- 100% {
- left: 0;
- opacity: 1;
- }
-}
-
-@keyframes NotificationLeftFadeIn {
- 0% {
- opacity: 0;
- right: @notification-width;
- }
- 100% {
- right: 0;
- opacity: 1;
- }
-}
-
-@keyframes NotificationFadeOut {
- 0% {
- opacity: 1;
- margin-bottom: @notification-margin-bottom;
- padding-top: @notification-padding;
- padding-bottom: @notification-padding;
- max-height: 150px;
- }
- 100% {
- opacity: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
- max-height: 0;
- }
-}
-
-@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
-
-.@{pagination-prefix-cls} {
- .reset-component;
-
- ul,
- ol {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- &:after {
- content: ' ';
- display: block;
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
- }
-
- &-total-text {
- display: inline-block;
- vertical-align: middle;
- height: @pagination-item-size;
- line-height: @pagination-item-size - 2px;
- margin-right: 8px;
- }
-
- &-item {
- cursor: pointer;
- border-radius: @border-radius-base;
- user-select: none;
- min-width: @pagination-item-size;
- height: @pagination-item-size;
- line-height: @pagination-item-size - 2px;
- text-align: center;
- list-style: none;
- display: inline-block;
- vertical-align: middle;
- border: @border-width-base @border-style-base @border-color-base;
- background-color: @component-background;
- margin-right: 8px;
- font-family: @pagination-font-family;
- outline: 0;
-
- a {
- text-decoration: none;
- color: @text-color;
- transition: none;
- margin: 0 6px;
- }
-
- &:focus,
- &:hover {
- transition: all 0.3s;
- border-color: @primary-color;
- a {
- color: @primary-color;
- }
- }
-
- &-active {
- border-color: @primary-color;
- font-weight: @pagination-font-weight-active;
-
- a {
- color: @primary-color;
- }
-
- &:focus,
- &:hover {
- border-color: @primary-5;
- }
-
- &:focus a,
- &:hover a {
- color: @primary-5;
- }
- }
- }
-
- &-jump-prev,
- &-jump-next {
- outline: 0;
- .@{pagination-prefix-cls}-item-container {
- position: relative;
-
- .@{pagination-prefix-cls}-item-link-icon {
- .iconfont-size-under-12px(12px);
- color: @primary-color;
- letter-spacing: -1px;
- opacity: 0;
- transition: all 0.2s;
- &-svg {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- }
- }
-
- .@{pagination-prefix-cls}-item-ellipsis {
- position: absolute;
- display: block;
- letter-spacing: 2px;
- color: @disabled-color;
- text-align: center;
- opacity: 1;
- transition: all 0.2s;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- }
- }
-
- &:focus,
- &:hover {
- .@{pagination-prefix-cls}-item-link-icon {
- opacity: 1;
- }
- .@{pagination-prefix-cls}-item-ellipsis {
- opacity: 0;
- }
- }
- }
-
- &-prev,
- &-jump-prev,
- &-jump-next {
- margin-right: 8px;
- }
- &-prev,
- &-next,
- &-jump-prev,
- &-jump-next {
- font-family: @pagination-font-family;
- cursor: pointer;
- color: @text-color;
- border-radius: @border-radius-base;
- list-style: none;
- min-width: @pagination-item-size;
- height: @pagination-item-size;
- line-height: @pagination-item-size;
- text-align: center;
- transition: all 0.3s;
- display: inline-block;
- vertical-align: middle;
- }
-
- &-prev,
- &-next {
- outline: 0;
-
- a {
- color: @text-color;
- user-select: none;
- }
-
- &:hover a {
- border-color: @primary-5;
- }
-
- .@{pagination-prefix-cls}-item-link {
- border: @border-width-base @border-style-base @border-color-base;
- background-color: @component-background;
- border-radius: @border-radius-base;
- outline: none;
- display: block;
- transition: all 0.3s;
- font-size: 12px;
- height: 100%;
- text-align: center;
- }
-
- &:focus .@{pagination-prefix-cls}-item-link,
- &:hover .@{pagination-prefix-cls}-item-link {
- border-color: @primary-color;
- color: @primary-color;
- }
- }
-
- &-disabled {
- &,
- &:hover,
- &:focus {
- cursor: not-allowed;
- a,
- .@{pagination-prefix-cls}-item-link {
- border-color: @border-color-base;
- color: @disabled-color;
- cursor: not-allowed;
- }
- }
- }
-
- &-slash {
- margin: 0 10px 0 5px;
- }
-
- &-options {
- display: inline-block;
- vertical-align: middle;
- margin-left: 16px;
-
- &-size-changer.@{ant-prefix}-select {
- display: inline-block;
- width: auto;
- margin-right: 8px;
- }
-
- &-quick-jumper {
- display: inline-block;
- vertical-align: top;
- height: @input-height-base;
- line-height: @input-height-base;
-
- input {
- .input;
- margin: 0 8px;
- width: 50px;
- }
- }
- }
-
- &-simple &-prev,
- &-simple &-next {
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
- vertical-align: top;
- .@{pagination-prefix-cls}-item-link {
- border: 0;
- height: @pagination-item-size-sm;
- &:after {
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
- }
- }
- }
-
- &-simple &-simple-pager {
- display: inline-block;
- margin-right: 8px;
- height: @pagination-item-size-sm;
-
- input {
- margin-right: 8px;
- box-sizing: border-box;
- background-color: @component-background;
- border-radius: @border-radius-base;
- border: @border-width-base @border-style-base @border-color-base;
- outline: none;
- padding: 0 6px;
- height: 100%;
- text-align: center;
- transition: border-color 0.3s;
-
- &:hover {
- border-color: @primary-color;
- }
- }
- }
-
- &.mini &-total-text,
- &.mini &-simple-pager {
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
- }
-
- &.mini &-item {
- margin: 0;
- min-width: @pagination-item-size-sm;
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm - 2px;
- }
-
- &.mini &-item:not(&-item-active) {
- background: transparent;
- border-color: transparent;
- }
-
- &.mini &-prev,
- &.mini &-next {
- margin: 0;
- min-width: @pagination-item-size-sm;
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
- }
-
- &.mini &-prev &-item-link,
- &.mini &-next &-item-link {
- border-color: transparent;
- background: transparent;
- &:after {
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
- }
- }
-
- &.mini &-jump-prev,
- &.mini &-jump-next {
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
- margin-right: 0;
- }
-
- &.mini &-options {
- margin-left: 2px;
- &-quick-jumper {
- height: @pagination-item-size-sm;
- line-height: @pagination-item-size-sm;
-
- input {
- .input-sm;
- width: 44px;
- }
- }
- }
-}
-
-@media only screen and (max-width: @screen-lg) {
- .@{pagination-prefix-cls}-item {
- &-after-jump-prev,
- &-before-jump-next {
- display: none;
- }
- }
-}
-
-@media only screen and (max-width: @screen-sm) {
- .@{pagination-prefix-cls}-options {
- display: none;
- }
-}
-
-//@import '../../style/index.less';
-//
-//// style dependencies
-//@import '../../popover/style';
-//@import '../../button/style';
-
-@popover-prefix-cls: ~'@{ant-prefix}-popover';
-
-.@{popover-prefix-cls} {
- .reset-component;
- position: absolute;
- top: 0;
- left: 0;
- z-index: @zindex-popover;
- cursor: auto;
- user-select: text;
- white-space: normal;
- font-weight: normal;
- text-align: left;
-
- &:after {
- content: '';
- position: absolute;
- background: rgba(255, 255, 255, 0.01);
- }
-
- &-hidden {
- display: none;
- }
-
- // Offset the popover to account for the popover arrow
- &-placement-top,
- &-placement-topLeft,
- &-placement-topRight {
- padding-bottom: @popover-distance;
- }
-
- &-placement-right,
- &-placement-rightTop,
- &-placement-rightBottom {
- padding-left: @popover-distance;
- }
-
- &-placement-bottom,
- &-placement-bottomLeft,
- &-placement-bottomRight {
- padding-top: @popover-distance;
- }
-
- &-placement-left,
- &-placement-leftTop,
- &-placement-leftBottom {
- padding-right: @popover-distance;
- }
-
- &-inner {
- background-color: @popover-bg;
- background-clip: padding-box;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- }
-
- &-title {
- min-width: @popover-min-width;
- margin: 0; // reset heading margin
- padding: 5px @padding-md 4px;
- min-height: 32px;
- border-bottom: 1px solid @border-color-split;
- color: @heading-color;
- font-weight: 500;
- }
-
- &-inner-content {
- padding: 12px @padding-md;
- color: @popover-color;
- }
-
- &-message {
- padding: 4px 0 12px;
- font-size: @font-size-base;
- color: @popover-color;
- position: relative;
- > .@{iconfont-css-prefix} {
- position: absolute;
- top: 8px; // 4px for padding-top, 4px for vertical middle;
- color: @warning-color;
- font-size: @font-size-base;
- }
- &-title {
- padding-left: @font-size-base + 8px;
- }
- }
-
- &-buttons {
- text-align: right;
- margin-bottom: 4px;
- button {
- margin-left: 8px;
- }
- }
-
- // Arrows
- // .popover-arrow is outer, .popover-arrow:after is inner
-
- &-arrow {
- background: @popover-bg;
- background-color: inherit;
- width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
- height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
- transform: rotate(45deg);
- position: absolute;
- display: block;
- border-color: transparent;
- border-style: solid;
- }
-
- &-placement-top > &-content > &-arrow,
- &-placement-topLeft > &-content > &-arrow,
- &-placement-topRight > &-content > &-arrow {
- bottom: @popover-distance - @popover-arrow-width + 1.5px;
- box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
- }
- &-placement-top > &-content > &-arrow {
- left: 50%;
- transform: translateX(-50%) rotate(45deg);
- }
- &-placement-topLeft > &-content > &-arrow {
- left: 16px;
- }
- &-placement-topRight > &-content > &-arrow {
- right: 16px;
- }
-
- &-placement-right > &-content > &-arrow,
- &-placement-rightTop > &-content > &-arrow,
- &-placement-rightBottom > &-content > &-arrow {
- left: @popover-distance - @popover-arrow-width + 2px;
- box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
- }
- &-placement-right > &-content > &-arrow {
- top: 50%;
- transform: translateY(-50%) rotate(45deg);
- }
- &-placement-rightTop > &-content > &-arrow {
- top: 12px;
- }
- &-placement-rightBottom > &-content > &-arrow {
- bottom: 12px;
- }
-
- &-placement-bottom > &-content > &-arrow,
- &-placement-bottomLeft > &-content > &-arrow,
- &-placement-bottomRight > &-content > &-arrow {
- top: @popover-distance - @popover-arrow-width + 2px;
- box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
- }
- &-placement-bottom > &-content > &-arrow {
- left: 50%;
- transform: translateX(-50%) rotate(45deg);
- }
- &-placement-bottomLeft > &-content > &-arrow {
- left: 16px;
- }
- &-placement-bottomRight > &-content > &-arrow {
- right: 16px;
- }
-
- &-placement-left > &-content > &-arrow,
- &-placement-leftTop > &-content > &-arrow,
- &-placement-leftBottom > &-content > &-arrow {
- right: @popover-distance - @popover-arrow-width + 2px;
- box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
- }
- &-placement-left > &-content > &-arrow {
- top: 50%;
- transform: translateY(-50%) rotate(45deg);
- }
- &-placement-leftTop > &-content > &-arrow {
- top: 12px;
- }
- &-placement-leftBottom > &-content > &-arrow {
- bottom: 12px;
- }
-}
-
-@progress-prefix-cls: ~'@{ant-prefix}-progress';
-
-.@{progress-prefix-cls} {
- .reset-component;
- display: inline-block;
-
- &-line {
- width: 100%;
- font-size: @font-size-base;
- position: relative;
- }
-
- &-small&-line,
- &-small&-line &-text .@{iconfont-css-prefix} {
- font-size: @font-size-sm;
- }
-
- &-outer {
- display: inline-block;
- width: 100%;
- margin-right: 0;
- padding-right: 0;
- .@{progress-prefix-cls}-show-info & {
- padding-right: ~'calc(2em + 8px)';
- margin-right: ~'calc(-2em - 8px)';
- }
- }
-
- &-inner {
- display: inline-block;
- width: 100%;
- background-color: @progress-remaining-color;
- border-radius: 100px;
- vertical-align: middle;
- position: relative;
- }
-
- &-circle-trail {
- stroke: @progress-remaining-color;
- }
-
- &-circle-path {
- stroke: @progress-default-color;
- animation: ~'@{ant-prefix}-progress-appear' 0.3s;
- }
-
- &-success-bg,
- &-bg {
- background-color: @progress-default-color;
- transition: all 0.4s @ease-out-circ 0s;
- position: relative;
- }
-
- &-success-bg {
- background-color: @success-color;
- position: absolute;
- top: 0;
- left: 0;
- }
-
- &-text {
- word-break: normal;
- width: 2em;
- text-align: left;
- font-size: 1em;
- margin-left: 8px;
- vertical-align: middle;
- display: inline-block;
- white-space: nowrap;
- color: @text-color-secondary;
- line-height: 1;
- .@{iconfont-css-prefix} {
- font-size: @font-size-base;
- }
- }
-
- &-status-active {
- .@{progress-prefix-cls}-bg:before {
- content: '';
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: @component-background;
- border-radius: 10px;
- animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
- }
- }
-
- &-status-exception {
- .@{progress-prefix-cls}-bg {
- background-color: @error-color;
- }
- .@{progress-prefix-cls}-text {
- color: @error-color;
- }
- .@{progress-prefix-cls}-circle-path {
- stroke: @error-color;
- }
- }
-
- &-status-success {
- .@{progress-prefix-cls}-bg {
- background-color: @success-color;
- }
- .@{progress-prefix-cls}-text {
- color: @success-color;
- }
- .@{progress-prefix-cls}-circle-path {
- stroke: @success-color;
- }
- }
-
- &-circle &-inner {
- position: relative;
- line-height: 1;
- background-color: transparent;
- }
-
- &-circle &-text {
- display: block;
- position: absolute;
- width: 100%;
- text-align: center;
- line-height: 1;
- top: 50%;
- transform: translateY(-50%);
- left: 0;
- margin: 0;
- color: @progress-text-color;
- white-space: normal;
- padding: 0 6px;
-
- .@{iconfont-css-prefix} {
- font-size: 14 / 12em;
- }
- }
-
- &-circle&-status-exception {
- .@{progress-prefix-cls}-text {
- color: @error-color;
- }
- }
- &-circle&-status-success {
- .@{progress-prefix-cls}-text {
- color: @success-color;
- }
- }
-}
-
-@keyframes ~"@{ant-prefix}-progress-active" {
- 0% {
- opacity: 0.1;
- width: 0;
- }
- 20% {
- opacity: 0.5;
- width: 0;
- }
- 100% {
- opacity: 0;
- width: 100%;
- }
-}
-
-@radio-prefix-cls: ~'@{ant-prefix}-radio';
-@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
-@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
-@radio-duration: 0.3s;
-
-.@{radio-group-prefix-cls} {
- .reset-component;
- display: inline-block;
- line-height: unset;
-}
-
-// 一般状态
-.@{radio-prefix-cls}-wrapper {
- .reset-component;
- display: inline-block;
- position: relative;
- white-space: nowrap;
- margin-right: 8px;
- cursor: pointer;
-}
-
-.@{radio-prefix-cls} {
- .reset-component;
- white-space: nowrap;
- outline: none;
- display: inline-block;
- position: relative;
- line-height: 1;
- vertical-align: sub;
- cursor: pointer;
- .@{radio-prefix-cls}-wrapper:hover &,
- &:hover,
- &-focused {
- .@{radio-inner-prefix-cls} {
- border-color: @radio-dot-color;
- }
- }
- &-checked:after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- border: 1px solid @radio-dot-color;
- content: '';
- animation: antRadioEffect 0.36s ease-in-out;
- animation-fill-mode: both;
- visibility: hidden;
- }
- &:hover:after,
- .@{radio-prefix-cls}-wrapper:hover &:after {
- visibility: visible;
- }
- &-inner {
- &:after {
- @radio-dot-size: @radio-size - 8px;
- position: absolute;
- 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: @radio-dot-size;
- display: table;
- border-top: 0;
- border-left: 0;
- content: ' ';
- background-color: @radio-dot-color;
- opacity: 0;
- transform: scale(0);
- transition: all @radio-duration @ease-in-out-circ;
- }
-
- position: relative;
- top: 0;
- left: 0;
- display: block;
- width: @radio-size;
- height: @radio-size;
- border-width: 1px;
- border-style: solid;
- border-radius: 100px;
- border-color: @border-color-base;
- background-color: @radio-button-bg;
- transition: all @radio-duration;
- }
-
- &-input {
- position: absolute;
- left: 0;
- z-index: 1;
- cursor: pointer;
- opacity: 0;
- top: 0;
- bottom: 0;
- right: 0;
- }
-}
-
-// 选中状态
-.@{radio-prefix-cls}-checked {
- .@{radio-inner-prefix-cls} {
- border-color: @radio-dot-color;
- &:after {
- transform: scale(0.875);
- opacity: 1;
- transition: all @radio-duration @ease-in-out-circ;
- }
- }
-}
-
-.@{radio-prefix-cls}-disabled {
- .@{radio-inner-prefix-cls} {
- border-color: @border-color-base !important;
- background-color: @input-disabled-bg;
- cursor: not-allowed;
- &:after {
- background-color: #ccc;
- }
- }
-
- .@{radio-prefix-cls}-input {
- cursor: not-allowed;
- }
-
- & + span {
- color: @disabled-color;
- cursor: not-allowed;
- }
-}
-
-span.@{radio-prefix-cls} + * {
- padding-left: 8px;
- padding-right: 8px;
-}
-
-.@{radio-prefix-cls}-button-wrapper {
- margin: 0;
- 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 @padding-md - 1px;
- position: relative;
-
- a {
- color: @radio-button-color;
- }
-
- > .@{radio-prefix-cls}-button {
- margin-left: 0;
- display: block;
- width: 0;
- height: 0;
- }
-
- .@{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 @control-padding-horizontal-sm - 1px;
- }
-
- &:not(:first-child) {
- &::before {
- content: '';
- display: block;
- top: 0;
- left: -1px;
- width: 1px;
- height: 100%;
- position: absolute;
- background-color: @border-color-base;
- }
- }
- &:first-child {
- border-radius: @border-radius-base 0 0 @border-radius-base;
- border-left: @border-width-base @border-style-base @border-color-base;
- }
-
- &:last-child {
- border-radius: 0 @border-radius-base @border-radius-base 0;
- }
-
- &:first-child:last-child {
- border-radius: @border-radius-base;
- }
-
- &:hover,
- &-focused {
- color: @radio-dot-color;
- position: relative;
- }
-
- .@{radio-prefix-cls}-inner,
- input[type='checkbox'],
- input[type='radio'] {
- opacity: 0;
- width: 0;
- height: 0;
- }
-
- &-checked {
- background: @radio-button-bg;
- border-color: @radio-dot-color;
- color: @radio-dot-color;
- box-shadow: -1px 0 0 0 @radio-dot-color;
- z-index: 1;
- &::before {
- background-color: @radio-dot-color !important;
- opacity: 0.1;
- }
- &:first-child {
- border-color: @radio-dot-color;
- box-shadow: none !important;
- }
-
- &:hover {
- border-color: @radio-button-hover-color;
- box-shadow: -1px 0 0 0 @radio-button-hover-color;
- color: @radio-button-hover-color;
- }
-
- &:active {
- border-color: @radio-button-active-color;
- box-shadow: -1px 0 0 0 @radio-button-active-color;
- color: @radio-button-active-color;
- }
- }
-
- .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
- background: @radio-dot-color;
- border-color: @radio-dot-color;
- color: #fff;
- &:hover {
- border-color: @radio-button-hover-color;
- background: @radio-button-hover-color;
- color: #fff;
- }
- &:active {
- border-color: @radio-button-active-color;
- background: @radio-button-active-color;
- color: #fff;
- }
- }
-
- &-disabled {
- border-color: @border-color-base;
- background-color: @input-disabled-bg;
- cursor: not-allowed;
- color: @disabled-color;
-
- &:first-child,
- &:hover {
- border-color: @border-color-base;
- background-color: @input-disabled-bg;
- color: @disabled-color;
- }
- &:first-child {
- border-left-color: @border-color-base;
- }
- }
-
- &-disabled&-checked {
- color: #fff;
- background-color: #e6e6e6;
- border-color: @border-color-base;
- box-shadow: none;
- }
-}
-
-@keyframes antRadioEffect {
- 0% {
- transform: scale(1);
- opacity: 0.5;
- }
- 100% {
- transform: scale(1.6);
- opacity: 0;
- }
-}
-
-// Firefox hack
-@supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
- .@{radio-prefix-cls} {
- vertical-align: text-bottom;
- }
-}
-
-@rate-prefix-cls: ~'@{ant-prefix}-rate';
-
-.@{rate-prefix-cls} {
- .reset-component;
- line-height: unset;
- margin: 0;
- padding: 0;
- list-style: none;
- font-size: 20px;
- display: inline-block;
- color: @rate-star-color;
- outline: none;
-
- &-disabled &-star {
- cursor: default;
- &:hover {
- transform: scale(1);
- }
- }
-
- &-star {
- margin: 0;
- padding: 0;
- display: inline-block;
- margin-right: 8px;
- position: relative;
- transition: all 0.3s;
- color: inherit;
- cursor: pointer;
-
- &:focus {
- outline: 0;
- }
-
- &-first,
- &-second {
- user-select: none;
- transition: all 0.3s;
- color: @rate-star-bg;
- .@{iconfont-css-prefix} {
- vertical-align: middle;
- }
- }
-
- &:hover,
- &:focus {
- transform: scale(1.1);
- }
-
- &-first {
- position: absolute;
- left: 0;
- top: 0;
- width: 50%;
- height: 100%;
- overflow: hidden;
- opacity: 0;
- }
-
- &-half &-first,
- &-half &-second {
- opacity: 1;
- }
-
- &-half &-first,
- &-full &-second {
- color: inherit;
- }
- }
-
- &-text {
- margin-left: 8px;
- display: inline-block;
- font-size: @font-size-base;
- }
-}
-
-@select-prefix-cls: ~'@{ant-prefix}-select';
-
-.selection__clear() {
- display: inline-block;
- font-style: normal;
- vertical-align: baseline;
- text-align: center;
- text-transform: none;
- text-rendering: auto;
- opacity: 0;
- position: absolute;
- right: @control-padding-horizontal - 1px;
- z-index: 1;
- background: @component-background;
- top: 50%;
- font-size: @font-size-sm;
- color: @disabled-color;
- width: 12px;
- height: 12px;
- margin-top: -6px;
- line-height: 12px;
- cursor: pointer;
- transition: color 0.3s ease, opacity 0.15s ease;
- &:before {
- display: block;
- }
- &:hover {
- color: @text-color-secondary;
- }
-}
-
-.@{select-prefix-cls} {
- .reset-component;
- display: inline-block;
- position: relative;
- outline: 0;
-
- ul,
- ol {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- > ul > li > a {
- padding: 0;
- background-color: @component-background;
- }
-
- // arrow
- &-arrow {
- .iconfont-mixin();
- position: absolute;
- top: 50%;
- right: @control-padding-horizontal - 1px;
- line-height: 1;
- margin-top: -@font-size-sm / 2;
- transform-origin: 50% 50%;
- color: @disabled-color;
- font-size: @font-size-sm;
-
- & &-icon svg {
- transition: transform 0.3s;
- }
- }
-
- &-selection {
- outline: none;
- user-select: none;
-
- box-sizing: border-box;
- display: block;
-
- background-color: @component-background;
- border-radius: @border-radius-base;
- border: @border-width-base @border-style-base @border-color-base;
- // strange align fix for chrome but works
- // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
- border-top-width: @border-width-base + 0.02px;
- transition: all 0.3s @ease-in-out;
-
- &:hover {
- .hover;
- }
-
- .@{select-prefix-cls}-focused &,
- &:focus,
- &:active {
- .active;
- }
-
- &__clear {
- .selection__clear();
- }
-
- &:hover &__clear {
- opacity: 1;
- }
-
- &-selected-value {
- float: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 100%;
- padding-right: 20px;
- }
- }
-
- &-no-arrow &-selection-selected-value {
- padding-right: 0;
- }
-
- &-disabled {
- color: @disabled-color;
- }
-
- &-disabled &-selection {
- background: @input-disabled-bg;
- cursor: not-allowed;
- &:hover,
- &:focus,
- &:active {
- border-color: @border-color-base;
- box-shadow: none;
- }
-
- &__clear {
- display: none;
- visibility: hidden;
- pointer-events: none;
- }
- }
-
- &-disabled &-selection--multiple &-selection__choice {
- background: @background-color-base;
- color: #aaa;
- padding-right: 10px;
- &__remove {
- display: none;
- }
- }
-
- &-selection--single {
- height: @input-height-base;
- position: relative;
- cursor: pointer;
- }
-
- &-selection__rendered {
- display: block;
- margin-left: @control-padding-horizontal - 1px;
- margin-right: @control-padding-horizontal - 1px;
- position: relative;
- line-height: @input-height-base - 2px;
- // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
- &:after {
- content: '.';
- visibility: hidden;
- pointer-events: none;
- display: inline-block;
- width: 0;
- }
- }
-
- &-lg {
- font-size: @font-size-lg;
- .@{select-prefix-cls}-selection--single {
- height: @input-height-lg;
- }
- .@{select-prefix-cls}-selection__rendered {
- line-height: @input-height-lg - 2px;
- }
- .@{select-prefix-cls}-selection--multiple {
- min-height: @input-height-lg;
- .@{select-prefix-cls}-selection__rendered {
- li {
- height: @input-height-lg - 8px;
- line-height: @input-height-lg - 8px;
- }
- }
- .@{select-prefix-cls}-selection__clear {
- top: @input-height-lg / 2;
- }
- }
- }
-
- &-sm {
- .@{select-prefix-cls}-selection--single {
- height: @input-height-sm;
- }
- .@{select-prefix-cls}-selection__rendered {
- line-height: @input-height-sm - 2px;
- margin: 0 @control-padding-horizontal-sm - 1px;
- }
- .@{select-prefix-cls}-selection--multiple {
- min-height: @input-height-sm;
- .@{select-prefix-cls}-selection__rendered {
- li {
- height: @input-height-sm - 8px;
- line-height: @input-height-sm - 10px;
- }
- }
- .@{select-prefix-cls}-selection__clear {
- top: @input-height-sm / 2;
- }
- }
- .@{select-prefix-cls}-selection__clear,
- .@{select-prefix-cls}-arrow {
- right: @control-padding-horizontal-sm;
- }
- }
-
- &-disabled &-selection__choice__remove {
- color: @disabled-color;
- cursor: default;
- &:hover {
- color: @disabled-color;
- }
- }
-
- &-search__field__wrap {
- display: inline-block;
- position: relative;
- }
-
- &-selection__placeholder,
- &-search__field__placeholder {
- // for TreeSelect compatibility
- position: absolute;
- top: 50%;
- left: 0;
- right: 9px;
- color: @input-placeholder-color;
- line-height: 20px;
- height: 20px;
- max-width: 100%;
- margin-top: -10px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: left;
- }
-
- &-search__field__placeholder {
- left: @control-padding-horizontal;
- }
-
- &-search__field__mirror {
- position: absolute;
- top: 0;
- left: 0;
- white-space: pre;
- pointer-events: none;
- opacity: 0;
- }
-
- &-search--inline {
- position: absolute;
- height: 100%;
- width: 100%;
-
- .@{select-prefix-cls}-search__field__wrap {
- width: 100%;
- height: 100%;
- }
-
- .@{select-prefix-cls}-search__field {
- border-width: 0;
- font-size: 100%;
- height: 100%;
- width: 100%;
- background: transparent;
- outline: 0;
- border-radius: @border-radius-base;
- line-height: 1;
- }
-
- > i {
- float: right;
- }
- }
-
- &-selection--multiple {
- min-height: @input-height-base;
- cursor: text;
- padding-bottom: 3px;
- .clearfix;
-
- .@{select-prefix-cls}-search--inline {
- float: left;
- position: static;
- width: auto;
- padding: 0;
- max-width: 100%;
- .@{select-prefix-cls}-search__field {
- max-width: 100%;
- width: 0.75em;
- }
- }
-
- .@{select-prefix-cls}-selection__rendered {
- margin-left: 5px;
- margin-bottom: -3px;
- height: auto;
- }
-
- .@{select-prefix-cls}-selection__placeholder {
- margin-left: 6px;
- }
-
- > ul > li,
- .@{select-prefix-cls}-selection__rendered > ul > li {
- // for tree-select
- margin-top: 3px;
- height: @input-height-base - 8px;
- line-height: @input-height-base - 8px - 2px;
- }
-
- .@{select-prefix-cls}-selection__choice {
- color: @tag-default-color;
- background-color: @tag-default-bg;
- border: 1px solid @border-color-split;
- border-radius: @border-radius-sm;
- cursor: default;
- float: left;
- margin-right: 4px;
- max-width: 99%;
- position: relative;
- overflow: hidden;
- transition: padding 0.3s @ease-in-out;
- padding: 0 20px 0 10px;
- &__disabled {
- padding: 0 10px;
- }
- }
-
- .@{select-prefix-cls}-selection__choice__content {
- display: inline-block;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
- transition: margin 0.3s @ease-in-out;
- }
-
- .@{select-prefix-cls}-selection__choice__remove {
- .iconfont-mixin();
- color: @text-color-secondary;
- line-height: inherit;
- cursor: pointer;
- display: inline-block;
- font-weight: bold;
- transition: all 0.3s;
- font-size: @font-size-sm;
- .iconfont-size-under-12px(10px);
- position: absolute;
- right: 4px;
- &:hover {
- color: #404040;
- }
- }
-
- .@{select-prefix-cls}-selection__clear {
- top: @input-height-base / 2;
- }
- }
-
- &-allow-clear &-selection--single &-selection-selected-value {
- padding-right: 16px;
- }
-
- &-allow-clear &-selection--multiple &-selection__rendered {
- margin-right: 20px; // In case that clear button will overlap content
- }
-
- &-open {
- .@{select-prefix-cls}-arrow {
- &-icon svg {
- transform: rotate(180deg);
- }
- }
- .@{select-prefix-cls}-selection {
- .active();
- }
- }
-
- &-combobox {
- .@{select-prefix-cls}-arrow {
- display: none;
- }
- .@{select-prefix-cls}-search--inline {
- height: 100%;
- width: 100%;
- float: none;
- }
- .@{select-prefix-cls}-search__field__wrap {
- width: 100%;
- height: 100%;
- }
- .@{select-prefix-cls}-search__field {
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 1;
- transition: all 0.3s @ease-in-out, height 0s;
- box-shadow: none;
- }
- }
- &-combobox&-allow-clear &-selection:hover &-selection__rendered {
- margin-right: 20px; // In case that clear button will overlap content
- }
-}
-
-.@{select-prefix-cls}-dropdown {
- .reset-component;
- // Fix select render lag of long text in chrome
- // https://github.com/ant-design/ant-design/issues/11456
- // https://github.com/ant-design/ant-design/issues/11843
- font-variant: initial;
-
- &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
- animation-name: antSlideUpIn;
- }
-
- &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
- animation-name: antSlideDownIn;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
- animation-name: antSlideUpOut;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
- animation-name: antSlideDownOut;
- }
-
- &-hidden {
- display: none;
- }
-
- background-color: @component-background;
- box-shadow: @box-shadow-base;
- border-radius: @border-radius-base;
- box-sizing: border-box;
- z-index: @zindex-dropdown;
- left: -9999px;
- top: -9999px;
- position: absolute;
- outline: none;
- font-size: @font-size-base;
-
- &-menu {
- outline: none;
- margin-bottom: 0;
- padding-left: 0; // Override default ul/ol
- list-style: none;
- max-height: 250px;
- overflow: auto;
-
- &-item-group-list {
- margin: 0;
- padding: 0;
-
- > .@{select-prefix-cls}-dropdown-menu-item {
- padding-left: 20px;
- }
- }
-
- &-item-group-title {
- color: @text-color-secondary;
- padding: 0 @control-padding-horizontal;
- height: 32px;
- line-height: 32px;
- font-size: @font-size-sm;
- }
-
- &-item-group-list &-item:first-child:not(:last-child),
- &-item-group:not(:last-child) &-item-group-list &-item:last-child {
- border-radius: 0;
- }
-
- &-item {
- position: relative;
- display: block;
- padding: 5px @control-padding-horizontal;
- line-height: 22px;
- font-weight: normal;
- color: @text-color;
- white-space: nowrap;
- cursor: pointer;
- overflow: hidden;
- text-overflow: ellipsis;
- transition: background 0.3s ease;
-
- &:hover {
- background-color: @item-hover-bg;
- }
-
- &:first-child {
- border-radius: @border-radius-base @border-radius-base 0 0;
- }
-
- &:last-child {
- border-radius: 0 0 @border-radius-base @border-radius-base;
- }
-
- &-disabled {
- color: @disabled-color;
- cursor: not-allowed;
-
- &:hover {
- color: @disabled-color;
- background-color: @component-background;
- cursor: not-allowed;
- }
- }
-
- &-selected {
- &,
- &:hover {
- background-color: @background-color-light;
- font-weight: 600;
- color: @text-color;
- }
- }
-
- &-active {
- background-color: @item-active-bg;
- }
-
- &-divider {
- height: 1px;
- margin: 1px 0;
- overflow: hidden;
- background-color: @border-color-split;
- line-height: 0;
- }
- }
- }
-
- &&--multiple {
- .@{select-prefix-cls}-dropdown-menu-item {
- padding-right: @control-padding-horizontal + 20;
- & .@{select-prefix-cls}-selected-icon {
- color: transparent;
- .iconfont-size-under-12px(10px);
- transition: all 0.2s ease;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- right: @control-padding-horizontal;
- font-weight: bold;
- text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
- }
-
- &:hover .@{select-prefix-cls}-selected-icon {
- color: #ddd;
- }
-
- &-disabled .@{select-prefix-cls}-selected-icon {
- display: none;
- }
-
- &-selected .@{select-prefix-cls}-selected-icon,
- &-selected:hover .@{select-prefix-cls}-selected-icon {
- color: @primary-color;
- display: inline-block;
- }
- }
- }
-
- &-container-open,
- &-open {
- .@{select-prefix-cls}-dropdown {
- display: block;
- }
- }
-}
-
-@slider-prefix-cls: ~'@{ant-prefix}-slider';
-
-.@{slider-prefix-cls} {
- .reset-component;
- position: relative;
- margin: @slider-margin;
- padding: 4px 0;
- height: 12px;
- cursor: pointer;
- touch-action: none;
-
- .vertical();
-
- &-with-marks {
- margin-bottom: 28px;
- }
-
- &-rail {
- position: absolute;
- width: 100%;
- height: 4px;
- border-radius: 2px;
- background-color: @slider-rail-background-color;
- transition: background-color 0.3s;
- }
-
- &-track {
- position: absolute;
- height: 4px;
- border-radius: @border-radius-base;
- background-color: @slider-track-background-color;
- transition: background-color 0.3s ease;
- }
-
- &-handle {
- position: absolute;
- margin-left: -7px;
- margin-top: -5px;
- width: 14px;
- height: 14px;
- cursor: pointer;
- border-radius: 50%;
- border: solid 2px @slider-handle-color;
- background-color: @component-background;
- box-shadow: 0;
- transition: border-color 0.3s, box-shadow 0.6s,
- transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-
- &:focus {
- border-color: @slider-handle-color-focus;
- box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
- outline: none;
- }
-
- &.@{ant-prefix}-tooltip-open {
- border-color: @slider-handle-color-tooltip-open;
- }
- }
-
- &:hover {
- .@{slider-prefix-cls}-rail {
- background-color: @slider-rail-background-color-hover;
- }
- .@{slider-prefix-cls}-track {
- background-color: @slider-track-background-color-hover;
- }
- .@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
- border-color: @slider-handle-color-hover;
- }
- }
-
- &-mark {
- position: absolute;
- top: 14px;
- left: 0;
- width: 100%;
- font-size: @font-size-base;
- }
-
- &-mark-text {
- position: absolute;
- display: inline-block;
- vertical-align: middle;
- text-align: center;
- cursor: pointer;
- color: @text-color-secondary;
-
- &-active {
- color: @text-color;
- }
- }
-
- &-step {
- position: absolute;
- width: 100%;
- height: 4px;
- background: transparent;
- }
-
- &-dot {
- position: absolute;
- top: -2px;
- margin-left: -4px;
- width: 8px;
- height: 8px;
- border: 2px solid @slider-dot-border-color;
- background-color: @component-background;
- cursor: pointer;
- border-radius: 50%;
- vertical-align: middle;
- &:first-child {
- margin-left: -4px;
- }
- &:last-child {
- margin-left: -4px;
- }
- &-active {
- border-color: @slider-dot-border-color-active;
- }
- }
-
- &-disabled {
- cursor: not-allowed;
-
- .@{slider-prefix-cls}-track {
- background-color: @slider-disabled-color !important;
- }
-
- .@{slider-prefix-cls}-handle,
- .@{slider-prefix-cls}-dot {
- border-color: @slider-disabled-color !important;
- background-color: @component-background;
- cursor: not-allowed;
- box-shadow: none;
- }
-
- .@{slider-prefix-cls}-mark-text,
- .@{slider-prefix-cls}-dot {
- cursor: not-allowed !important;
- }
- }
-}
-
-.vertical() {
- &-vertical {
- width: 12px;
- height: 100%;
- margin: 6px 10px;
- padding: 0 4px;
-
- .@{slider-prefix-cls}-rail {
- height: 100%;
- width: 4px;
- }
-
- .@{slider-prefix-cls}-track {
- width: 4px;
- }
-
- .@{slider-prefix-cls}-handle {
- margin-left: -5px;
- margin-bottom: -7px;
- }
-
- .@{slider-prefix-cls}-mark {
- top: 0;
- left: 12px;
- width: 18px;
- height: 100%;
- }
-
- .@{slider-prefix-cls}-mark-text {
- left: 4px;
- white-space: nowrap;
- }
-
- .@{slider-prefix-cls}-step {
- width: 4px;
- height: 100%;
- }
-
- .@{slider-prefix-cls}-dot {
- top: auto;
- left: 2px;
- margin-bottom: -4px;
- }
- }
-}
-
-@spin-prefix-cls: ~'@{ant-prefix}-spin';
-@spin-dot-default: @text-color-secondary;
-
-.@{spin-prefix-cls} {
- .reset-component;
- color: @primary-color;
- vertical-align: middle;
- text-align: center;
- opacity: 0;
- position: absolute;
- transition: transform 0.3s @ease-in-out-circ;
- display: none;
-
- &-spinning {
- opacity: 1;
- position: static;
- display: inline-block;
- }
-
- &-nested-loading {
- position: relative;
- > div > .@{spin-prefix-cls} {
- display: block;
- position: absolute;
- height: 100%;
- max-height: 400px;
- width: 100%;
- z-index: 4;
- .@{spin-prefix-cls}-dot {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -@spin-dot-size / 2;
- }
- .@{spin-prefix-cls}-text {
- position: absolute;
- top: 50%;
- width: 100%;
- padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
- text-shadow: 0 1px 2px #fff;
- }
- &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
- margin-top: -@spin-dot-size / 2 - 10px;
- }
- }
-
- > div > .@{spin-prefix-cls}-sm {
- .@{spin-prefix-cls}-dot {
- margin: -@spin-dot-size-sm / 2;
- }
- .@{spin-prefix-cls}-text {
- padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px;
- }
- &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
- margin-top: -@spin-dot-size-sm / 2 - 10px;
- }
- }
-
- > div > .@{spin-prefix-cls}-lg {
- .@{spin-prefix-cls}-dot {
- margin: -@spin-dot-size-lg / 2;
- }
- .@{spin-prefix-cls}-text {
- padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px;
- }
- &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
- margin-top: -@spin-dot-size-lg / 2 - 10px;
- }
- }
- }
-
- &-container {
- position: relative;
- transition: opacity 0.3s;
-
- &:after {
- content: '';
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: #fff;
- opacity: 0;
- pointer-events: none;
- transition: all 0.3s;
- height: 100%;
- width: 100%;
- z-index: 10;
- }
- }
-
- &-blur {
- pointer-events: none;
- user-select: none;
- overflow: hidden;
- opacity: 0.5;
-
- &:after {
- opacity: 0.4;
- pointer-events: auto;
- }
- }
-
- // tip
- // ------------------------------
- &-tip {
- color: @spin-dot-default;
- }
-
- // dots
- // ------------------------------
-
- &-dot {
- position: relative;
- display: inline-block;
- font-size: @spin-dot-size;
-
- .square(@spin-dot-size);
-
- i {
- width: 9px;
- height: 9px;
- border-radius: 100%;
- background-color: @primary-color;
- transform: scale(0.75);
- display: block;
- position: absolute;
- opacity: 0.3;
- animation: antSpinMove 1s infinite linear alternate;
- transform-origin: 50% 50%;
- &:nth-child(1) {
- left: 0;
- top: 0;
- }
- &:nth-child(2) {
- right: 0;
- top: 0;
- animation-delay: 0.4s;
- }
- &:nth-child(3) {
- right: 0;
- bottom: 0;
- animation-delay: 0.8s;
- }
- &:nth-child(4) {
- left: 0;
- bottom: 0;
- animation-delay: 1.2s;
- }
- }
-
- &-spin {
- transform: rotate(45deg);
- animation: antRotate 1.2s infinite linear;
- }
- }
-
- // Sizes
- // ------------------------------
-
- // small
- &-sm &-dot {
- font-size: @spin-dot-size-sm;
-
- .square(@spin-dot-size-sm);
- i {
- width: 6px;
- height: 6px;
- }
- }
-
- // large
- &-lg &-dot {
- font-size: @spin-dot-size-lg;
-
- .square(@spin-dot-size-lg);
- i {
- width: 14px;
- height: 14px;
- }
- }
-
- &&-show-text &-text {
- display: block;
- }
-}
-
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- /* IE10+ */
- .@{spin-prefix-cls}-blur {
- background: @component-background;
- opacity: 0.5;
- }
-}
-
-@keyframes antSpinMove {
- to {
- opacity: 1;
- }
-}
-
-@keyframes antRotate {
- to {
- transform: rotate(405deg);
- }
-}
-
-@steps-prefix-cls: ~'@{ant-prefix}-steps';
-@process-icon-color: @primary-color;
-@process-title-color: @heading-color;
-@process-description-color: @text-color;
-@process-tail-color: @border-color-split;
-@process-icon-text-color: #fff;
-@wait-icon-color: @disabled-color;
-@wait-title-color: @text-color-secondary;
-@wait-description-color: @wait-title-color;
-@wait-tail-color: @process-tail-color;
-@finish-icon-color: @process-icon-color;
-@finish-title-color: @text-color;
-@finish-description-color: @text-color-secondary;
-@finish-tail-color: @primary-color;
-@error-icon-color: @error-color;
-@error-title-color: @error-color;
-@error-description-color: @error-color;
-@error-tail-color: @wait-tail-color;
-@steps-background: @component-background;
-
-@steps-icon-size: 32px;
-@steps-small-icon-size: 24px;
-@steps-dot-size: 8px;
-@steps-current-dot-size: 10px;
-@steps-desciption-max-width: 140px;
-
-.@{steps-prefix-cls} {
- .reset-component;
- font-size: 0;
- width: 100%;
- display: flex;
-}
-
-.@{steps-prefix-cls}-item {
- position: relative;
- display: inline-block;
- vertical-align: top;
- flex: 1;
- overflow: hidden;
-
- &:last-child {
- flex: none;
- }
-
- &:last-child &-tail,
- &:last-child &-title:after {
- display: none;
- }
-
- &-icon,
- &-content {
- display: inline-block;
- vertical-align: top;
- }
-
- &-icon {
- border: @border-width-base @border-style-base @wait-icon-color;
- width: @steps-icon-size;
- height: @steps-icon-size;
- line-height: @steps-icon-size;
- text-align: center;
- border-radius: @steps-icon-size;
- font-size: @font-size-lg;
- margin-right: 8px;
- transition: background-color 0.3s, border-color 0.3s;
- font-family: @font-family;
-
- > .@{steps-prefix-cls}-icon {
- line-height: 1;
- top: -1px;
- color: @primary-color;
- position: relative;
- }
- }
- &-tail {
- position: absolute;
- left: 0;
- width: 100%;
- top: 12px;
- padding: 0 10px;
- &:after {
- content: '';
- display: inline-block;
- background: @border-color-split;
- height: 1px;
- border-radius: 1px;
- width: 100%;
- transition: background 0.3s;
- }
- }
- &-title {
- font-size: @font-size-lg;
- color: @text-color;
- display: inline-block;
- padding-right: 16px;
- position: relative;
- line-height: @steps-icon-size;
- &:after {
- content: '';
- height: 1px;
- width: 9999px;
- background: @wait-tail-color;
- display: block;
- position: absolute;
- top: @steps-icon-size / 2;
- left: 100%;
- }
- }
- &-description {
- font-size: @font-size-base;
- color: @text-color-secondary;
- }
- .step-item-status(wait);
- .step-item-status(process);
- &-process &-icon {
- background: @process-icon-color;
- > .@{steps-prefix-cls}-icon {
- color: @process-icon-text-color;
- }
- }
- &-process &-title {
- font-weight: 500;
- }
- .step-item-status(finish);
- .step-item-status(error);
-
- &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title:after {
- background: @error-icon-color;
- }
-}
-
-.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
- .@{steps-prefix-cls}-item {
- margin-right: 16px;
- white-space: nowrap;
- &:last-child {
- margin-right: 0;
- }
- &:last-child .@{steps-prefix-cls}-item-title {
- padding-right: 0;
- }
- &-tail {
- display: none;
- }
- &-description {
- max-width: @steps-desciption-max-width;
- white-space: normal;
- }
- }
-}
-
-.step-item-status(@status) {
- @icon-color: '@{status}-icon-color';
- @title-color: '@{status}-title-color';
- @description-color: '@{status}-description-color';
- @tail-color: '@{status}-tail-color';
- &-@{status} &-icon {
- border-color: @@icon-color;
- background-color: @steps-background;
- > .@{steps-prefix-cls}-icon {
- color: @@icon-color;
- .@{steps-prefix-cls}-icon-dot {
- background: @@icon-color;
- }
- }
- }
- &-@{status} > &-content > &-title {
- color: @@title-color;
- &:after {
- background-color: @@tail-color;
- }
- }
- &-@{status} > &-content > &-description {
- color: @@description-color;
- }
- &-@{status} > &-tail:after {
- background-color: @@tail-color;
- }
-}
-
-.@{steps-prefix-cls}-item-custom {
- .@{steps-prefix-cls}-item-icon {
- background: none;
- border: 0;
- width: auto;
- height: auto;
- > .@{steps-prefix-cls}-icon {
- font-size: 24px;
- line-height: @steps-icon-size;
- top: 0;
- left: 0.5px;
- width: @steps-icon-size;
- height: @steps-icon-size;
- }
- }
- &.@{steps-prefix-cls}-item-process {
- .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
- color: @process-icon-color;
- }
- }
-}
-
-.@{steps-prefix-cls}-small {
- &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
- .@{steps-prefix-cls}-item {
- margin-right: 12px;
- &:last-child {
- margin-right: 0;
- }
- }
- .@{steps-prefix-cls}-item-icon {
- width: @steps-small-icon-size;
- height: @steps-small-icon-size;
- line-height: @steps-small-icon-size;
- text-align: center;
- border-radius: @steps-small-icon-size;
- font-size: @font-size-sm;
- }
- .@{steps-prefix-cls}-item-title {
- font-size: @font-size-base;
- line-height: @steps-small-icon-size;
- padding-right: 12px;
- &:after {
- top: @steps-small-icon-size / 2;
- }
- }
- .@{steps-prefix-cls}-item-description {
- font-size: @font-size-base;
- color: @text-color-secondary;
- }
- .@{steps-prefix-cls}-item-tail {
- top: 8px;
- padding: 0 8px;
- }
- .@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
- width: inherit;
- height: inherit;
- line-height: inherit;
- border-radius: 0;
- border: 0;
- background: none;
- > .@{steps-prefix-cls}-icon {
- font-size: @steps-small-icon-size;
- line-height: @steps-small-icon-size;
- transform: none;
- }
- }
-}
-
-.steps-vertical() {
- display: block;
- .@{steps-prefix-cls}-item {
- display: block;
- overflow: visible;
- &-icon {
- float: left;
- margin-right: 16px;
- }
- &-content {
- min-height: 48px;
- overflow: hidden;
- display: block;
- }
- &-title {
- line-height: @steps-icon-size;
- }
- &-description {
- padding-bottom: 12px;
- }
- }
-
- > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
- position: absolute;
- left: 16px;
- top: 0;
- height: 100%;
- width: 1px;
- padding: @steps-icon-size + 6px 0 6px;
- &:after {
- height: 100%;
- width: 1px;
- }
- }
-
- > .@{steps-prefix-cls}-item:not(:last-child) > .@{steps-prefix-cls}-item-tail {
- display: block;
- }
-
- > .@{steps-prefix-cls}-item
- > .@{steps-prefix-cls}-item-content
- > .@{steps-prefix-cls}-item-title {
- &:after {
- display: none;
- }
- }
-
- &.@{steps-prefix-cls}-small {
- .@{steps-prefix-cls}-item-tail {
- position: absolute;
- left: 12px;
- top: 0;
- padding: @steps-small-icon-size + 6px 0 6px;
- }
- .@{steps-prefix-cls}-item-title {
- line-height: @steps-small-icon-size;
- }
- }
-}
-
-.@{steps-prefix-cls}-vertical {
- .steps-vertical;
-}
-
-@media (max-width: @screen-xs) {
- .@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
- .steps-vertical;
- }
-}
-
-.@{steps-prefix-cls}-label-vertical {
- .@{steps-prefix-cls}-item {
- overflow: visible;
- &-tail {
- padding: 0 24px;
- margin-left: 48px;
- }
- &-content {
- display: block;
- text-align: center;
- margin-top: 8px;
- // icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
- width: (@steps-icon-size / 2 + 36px) * 2;
- }
- &-icon {
- display: inline-block;
- margin-left: 36px;
- }
- &-title {
- padding-right: 0;
- &:after {
- display: none;
- }
- }
- }
-}
-
-.@{steps-prefix-cls}-dot {
- .@{steps-prefix-cls}-item {
- &-title {
- line-height: @line-height-base;
- }
- &-tail {
- width: 100%;
- top: 2px;
- margin: 0 0 0 @steps-desciption-max-width / 2;
- padding: 0;
- &:after {
- height: 3px;
- width: ~'calc(100% - 20px)';
- margin-left: 12px;
- }
- }
- &:first-child .@{steps-prefix-cls}-icon-dot {
- left: 2px;
- }
- &-icon {
- padding-right: 0;
- width: @steps-dot-size;
- height: @steps-dot-size;
- line-height: @steps-dot-size;
- border: 0;
- margin-left: 67px;
- background: transparent;
- .@{steps-prefix-cls}-icon-dot {
- float: left;
- width: 100%;
- height: 100%;
- border-radius: 100px;
- position: relative;
- transition: all 0.3s;
- /* expand hover area */
- &:after {
- content: '';
- background: rgba(0, 0, 0, 0.001);
- width: 60px;
- height: 32px;
- position: absolute;
- top: -12px;
- left: -26px;
- }
- }
- }
- &-content {
- width: @steps-desciption-max-width;
- }
- &-process .@{steps-prefix-cls}-item-icon {
- width: @steps-current-dot-size;
- height: @steps-current-dot-size;
- line-height: @steps-current-dot-size;
- .@{steps-prefix-cls}-icon-dot {
- top: -1px;
- }
- }
- }
-}
-
-.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
- .@{steps-prefix-cls}-item-icon {
- margin-left: 0;
- margin-top: 8px;
- }
- .@{steps-prefix-cls}-item-tail {
- margin: 0;
- left: -9px;
- top: 2px;
- padding: 22px 0 4px;
- }
- .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
- left: 0;
- }
- .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
- left: -2px;
- }
-}
-
-@switch-prefix-cls: ~'@{ant-prefix}-switch';
-@switch-duration: 0.36s;
-
-.@{switch-prefix-cls} {
- .reset-component;
- position: relative;
- display: inline-block;
- box-sizing: border-box;
- height: @switch-height;
- min-width: 44px;
- line-height: @switch-height - 2px;
- vertical-align: middle;
- border-radius: 100px;
- border: 1px solid transparent;
- background-color: @disabled-color;
- cursor: pointer;
- transition: all @switch-duration;
- user-select: none;
-
- &-inner {
- color: #fff;
- font-size: @font-size-sm;
- margin-left: 24px;
- margin-right: 6px;
- display: block;
- }
-
- &-loading-icon,
- &:after {
- position: absolute;
- width: @switch-height - 4px;
- height: @switch-height - 4px;
- left: 1px;
- top: 1px;
- border-radius: 18px;
- background-color: @component-background;
- content: ' ';
- cursor: pointer;
- transition: all @switch-duration @ease-in-out-circ;
- }
-
- &:after {
- box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
- }
-
- &:active:before,
- &:active:after {
- width: 24px;
- }
-
- &-loading-icon {
- // loading default use animation
- // animation: loadingCircle 1s infinite linear;
- background: transparent;
- z-index: 1;
- display: none;
- font-size: 12px;
- svg {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
- }
-
- &-loading &-loading-icon {
- display: inline-block;
- color: @text-color;
- }
-
- &-checked&-loading &-loading-icon {
- color: @switch-color;
- }
-
- &:focus {
- box-shadow: 0 0 0 2px fade(@switch-color, 20%);
- outline: 0;
- }
-
- &:focus:hover {
- box-shadow: none;
- }
-
- &-small {
- height: @switch-sm-height;
- min-width: 28px;
- line-height: @switch-sm-height - 2px;
-
- .@{switch-prefix-cls}-inner {
- margin-left: 18px;
- margin-right: 3px;
- font-size: @font-size-sm;
- }
-
- &:after {
- width: @switch-sm-height - 4px;
- height: @switch-sm-height - 4px;
- }
-
- &:active:before,
- &:active:after {
- width: 16px;
- }
- }
-
- &-small &-loading-icon {
- width: @switch-sm-height - 4px;
- height: @switch-sm-height - 4px;
- }
-
- &-small&-checked {
- .@{switch-prefix-cls}-inner {
- margin-left: 3px;
- margin-right: 18px;
- }
- }
-
- &-small&-checked &-loading-icon {
- left: 100%;
- margin-left: @switch-sm-checked-margin-left;
- }
-
- &-small&-loading &-loading-icon {
- // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
- transform: scale(0.66667);
- font-weight: bold;
- }
-
- &-checked {
- background-color: @switch-color;
-
- .@{switch-prefix-cls}-inner {
- margin-left: 6px;
- margin-right: 24px;
- }
-
- &:after {
- left: 100%;
- transform: translateX(-100%);
- margin-left: -1px;
- }
- }
-
- &-checked &-loading-icon {
- left: 100%;
- margin-left: -19px;
- }
-
- &-loading,
- &-disabled {
- cursor: not-allowed;
- opacity: @switch-disabled-opacity;
- * {
- cursor: not-allowed;
- }
- }
-}
-
-@keyframes AntSwitchSmallLoadingCircle {
- 0% {
- transform-origin: 50% 50%;
- transform: rotate(0deg) scale(0.66667);
- }
- 100% {
- transform-origin: 50% 50%;
- transform: rotate(360deg) scale(0.66667);
- }
-}
-
-@table-prefix-cls: ~'@{ant-prefix}-table';
-@table-header-icon-color: #bfbfbf;
-@table-header-sort-active-bg: darken(@table-header-bg, 3%);
-@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
-
-.@{table-prefix-cls}-wrapper {
- .clearfix;
-}
-
-.@{table-prefix-cls} {
- .reset-component;
- position: relative;
- clear: both;
-
- &-body {
- transition: opacity 0.3s;
- }
-
- &-empty &-body {
- overflow: auto !important;
- }
-
- table {
- width: 100%;
- border-collapse: collapse;
- text-align: left;
- border-radius: @table-border-radius-base @table-border-radius-base 0 0;
- }
-
- &-thead > tr > th {
- background: @table-header-bg;
- transition: background 0.3s ease;
- text-align: left;
- color: @table-header-color;
- font-weight: 500;
- border-bottom: @border-width-base @border-style-base @border-color-split;
-
- &[colspan] {
- text-align: center;
- }
-
- .@{iconfont-css-prefix}-filter,
- .@{table-prefix-cls}-filter-icon {
- font-size: @font-size-sm;
- cursor: pointer;
- color: @table-header-icon-color;
- transition: all 0.3s;
- width: 28px;
- position: absolute;
- top: 0;
- right: 0;
- height: 100%;
- text-align: center;
-
- > svg {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -@font-size-sm / 2 + 1px;
- margin-left: -@font-size-sm / 2;
- }
- }
-
- .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
- color: @primary-color;
- }
-
- .@{table-prefix-cls}-column-sorter {
- position: absolute;
- right: 6px;
- top: 50%;
- width: 14px;
- height: @font-size-lg + 1px;
- margin-top: -(@font-size-lg + 1px) / 2;
- text-align: center;
- color: @table-header-icon-color;
- transition: all 0.3s;
-
- &-up,
- &-down {
- .iconfont-size-under-12px(11px);
- line-height: 4px;
- height: 4px;
- transition: all 0.3s;
- display: block;
- &.on {
- color: @primary-color;
- }
- }
-
- &-down {
- margin-top: 4px;
- }
- }
-
- &.@{table-prefix-cls}-column-has-actions {
- position: relative;
- background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
-
- &.@{table-prefix-cls}-column-has-filters {
- .@{iconfont-css-prefix}-filter,
- .@{table-prefix-cls}-filter-icon {
- &.@{table-prefix-cls}-filter-open {
- color: @text-color-secondary;
- background: @table-header-filter-active-bg;
- }
- }
- // Very complicated styles logic but neccessary
- &:hover {
- .@{iconfont-css-prefix}-filter,
- .@{table-prefix-cls}-filter-icon {
- &:hover {
- color: @text-color-secondary;
- background: @table-header-filter-active-bg;
- }
- &:active {
- color: @text-color;
- }
- }
- }
- }
-
- &.@{table-prefix-cls}-column-has-sorters {
- cursor: pointer;
- &:hover {
- background: @table-header-sort-active-bg;
- .@{iconfont-css-prefix}-filter,
- .@{table-prefix-cls}-filter-icon {
- background: @table-header-sort-active-bg;
- }
- }
- &:active {
- .@{table-prefix-cls}-column-sorter-up:not(.on),
- .@{table-prefix-cls}-column-sorter-down:not(.on) {
- color: @text-color-secondary;
- }
- }
- }
-
- // https://github.com/ant-design/ant-design/issues/12650
- &.@{table-prefix-cls}-column-has-sorters,
- &.@{table-prefix-cls}-column-has-filters {
- padding-right: 30px !important;
- }
-
- &.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
- padding-right: 54px !important;
- }
- }
-
- .@{table-prefix-cls}-column-sorters {
- &:before {
- position: absolute;
- content: '';
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: transparent;
- transition: all 0.3s;
- }
- &:hover:before {
- background: rgba(0, 0, 0, 0.04);
- }
- }
-
- &.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
- right: 28px + 6px;
- }
-
- &.@{table-prefix-cls}-column-has-sorters {
- user-select: none;
- }
- }
-
- &-thead > tr:first-child > th {
- &:first-child {
- border-top-left-radius: @table-border-radius-base;
- }
-
- &:last-child {
- border-top-right-radius: @table-border-radius-base;
- }
- }
-
- &-thead > tr:not(:last-child) > th {
- &[colspan] {
- border-bottom: 0;
- }
- }
-
- &-tbody > tr > td {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- transition: all 0.3s, border 0s;
- }
-
- &-thead > tr,
- &-tbody > tr {
- transition: all 0.3s, height 0s;
- &.@{table-prefix-cls}-row-hover,
- &:hover {
- &:not(.@{table-prefix-cls}-expanded-row) > td {
- background: @table-row-hover-bg;
- }
- }
- }
-
- &-thead > tr:hover {
- background: none;
- }
-
- &-footer {
- padding: @table-padding-vertical @table-padding-horizontal;
- background: @table-header-bg;
- border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
- position: relative;
- border-top: @border-width-base @border-style-base @border-color-split;
- &:before {
- content: '';
- height: 1px;
- background: @table-header-bg;
- position: absolute;
- top: -1px;
- width: 100%;
- left: 0;
- }
- }
-
- &.@{table-prefix-cls}-bordered &-footer {
- border: @border-width-base @border-style-base @border-color-split;
- }
-
- &-title {
- padding: @table-padding-vertical 0;
- position: relative;
- top: 1px;
- border-radius: @table-border-radius-base @table-border-radius-base 0 0;
- }
-
- &.@{table-prefix-cls}-bordered &-title {
- border: @border-width-base @border-style-base @border-color-split;
- padding-left: @table-padding-horizontal;
- padding-right: @table-padding-horizontal;
- }
-
- &-title + &-content {
- position: relative;
- border-radius: @table-border-radius-base @table-border-radius-base 0 0;
- overflow: hidden;
- .@{table-prefix-cls}-bordered & {
- &,
- table,
- .@{table-prefix-cls}-thead > tr:first-child > th {
- border-radius: 0;
- }
- }
- }
-
- // https://github.com/ant-design/ant-design/issues/4373
- &-without-column-header &-title + &-content,
- &-without-column-header table {
- border-radius: 0;
- }
-
- &-tbody > tr.@{table-prefix-cls}-row-selected td {
- background: @table-selected-row-bg;
- }
-
- &-thead > tr > th.@{table-prefix-cls}-column-sort {
- background: @table-header-sort-bg;
- }
-
- &-tbody > tr > td.@{table-prefix-cls}-column-sort {
- background: @table-body-sort-bg;
- }
-
- &-thead > tr > th,
- &-tbody > tr > td {
- padding: @table-padding-vertical @table-padding-horizontal;
- }
-
- &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
- .@{table-prefix-cls}-selection {
- margin-right: -15px;
- }
- }
-
- &-thead > tr > th.@{table-prefix-cls}-selection-column,
- &-tbody > tr > td.@{table-prefix-cls}-selection-column {
- text-align: center;
- min-width: 62px;
- width: 62px;
- .@{ant-prefix}-radio-wrapper {
- margin-right: 0;
- }
- }
-
- &-expand-icon-th,
- &-row-expand-icon-cell {
- text-align: center;
- min-width: 50px;
- width: 50px;
- }
-
- &-header {
- background: @table-header-bg;
- overflow: hidden;
- }
-
- &-header table {
- border-radius: @table-border-radius-base @table-border-radius-base 0 0;
- }
-
- &-loading {
- position: relative;
- .@{table-prefix-cls}-body {
- background: @component-background;
- opacity: 0.5;
- }
- .@{table-prefix-cls}-spin-holder {
- height: 20px;
- line-height: 20px;
- left: 50%;
- top: 50%;
- margin-left: -30px;
- position: absolute;
- }
- .@{table-prefix-cls}-with-pagination {
- margin-top: -20px;
- }
- .@{table-prefix-cls}-without-pagination {
- margin-top: 10px;
- }
- }
-
- &-bordered {
- .@{table-prefix-cls}-header > table,
- .@{table-prefix-cls}-body > table,
- .@{table-prefix-cls}-fixed-left table,
- .@{table-prefix-cls}-fixed-right table {
- border: @border-width-base @border-style-base @border-color-split;
- border-right: 0;
- border-bottom: 0;
- }
-
- &.@{table-prefix-cls}-empty {
- .@{table-prefix-cls}-placeholder {
- border-left: @border-width-base @border-style-base @border-color-split;
- border-right: @border-width-base @border-style-base @border-color-split;
- }
- }
-
- &.@{table-prefix-cls}-fixed-header {
- .@{table-prefix-cls}-header > table {
- border-bottom: 0;
- }
-
- .@{table-prefix-cls}-body > table {
- border-top: 0;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
-
- .@{table-prefix-cls}-body-inner > table {
- border-top: 0;
- }
-
- .@{table-prefix-cls}-placeholder {
- border: 0;
- }
- }
-
- .@{table-prefix-cls}-thead > tr:not(:last-child) > th {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
-
- .@{table-prefix-cls}-thead > tr > th,
- .@{table-prefix-cls}-tbody > tr > td {
- border-right: @border-width-base @border-style-base @border-color-split;
- }
- }
-
- &-placeholder {
- position: relative;
- padding: @table-padding-vertical @table-padding-horizontal;
- background: @component-background;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- text-align: center;
- font-size: @font-size-base;
- color: @text-color-secondary;
- z-index: 1;
- .@{iconfont-css-prefix} {
- margin-right: 4px;
- }
- }
-
- &-pagination.@{ant-prefix}-pagination {
- margin: 16px 0;
- float: right;
- }
-
- &-filter-dropdown {
- min-width: 96px;
- margin-left: -8px;
- background: @component-background;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- position: relative;
-
- .@{ant-prefix}-dropdown-menu {
- border: 0;
- box-shadow: none;
- border-radius: @border-radius-base @border-radius-base 0 0;
-
- // https://github.com/ant-design/ant-design/issues/4916
- &-without-submenu {
- max-height: 400px;
- overflow-x: hidden;
- }
-
- &-item > label + span {
- padding-right: 0;
- }
-
- &-sub {
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- }
-
- .@{ant-prefix}-dropdown-submenu-contain-selected {
- .@{ant-prefix}-dropdown-menu-submenu-title:after {
- color: @primary-color;
- font-weight: bold;
- text-shadow: 0 0 2px @primary-2;
- }
- }
- }
-
- .@{ant-prefix}-dropdown-menu-item {
- overflow: hidden;
- }
-
- > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
- > .@{ant-prefix}-dropdown-menu
- > .@{ant-prefix}-dropdown-menu-submenu:last-child
- .@{ant-prefix}-dropdown-menu-submenu-title {
- border-radius: 0;
- }
-
- &-btns {
- overflow: hidden;
- padding: 7px 8px;
- border-top: @border-width-base @border-style-base @border-color-split;
- }
-
- &-link {
- color: @link-color;
- &:hover {
- color: @link-hover-color;
- }
- &:active {
- color: @link-active-color;
- }
- &.confirm {
- float: left;
- }
- &.clear {
- float: right;
- }
- }
- }
-
- &-selection {
- &-select-all-custom {
- margin-right: 4px !important;
- }
-
- .@{iconfont-css-prefix}-down {
- color: @table-header-icon-color;
- transition: all 0.3s;
- }
-
- &-menu {
- min-width: 96px;
- margin-top: 5px;
- margin-left: -30px;
- background: @component-background;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
-
- .@{ant-prefix}-action-down {
- color: @table-header-icon-color;
- }
- }
-
- &-down {
- cursor: pointer;
- padding: 0;
- display: inline-block;
- line-height: 1;
- &:hover .@{iconfont-css-prefix}-down {
- color: #666;
- }
- }
- }
-
- &-row {
- &-expand-icon {
- cursor: pointer;
- display: inline-block;
- width: 17px;
- height: 17px;
- text-align: center;
- line-height: 14px;
- border: @border-width-base @border-style-base @border-color-split;
- user-select: none;
- background: @component-background;
- }
-
- &-expanded:after {
- content: '-';
- }
-
- &-collapsed:after {
- content: '+';
- }
-
- &-spaced {
- visibility: hidden;
- &:after {
- content: '.';
- }
- }
-
- &[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
- display: inline-block;
- }
- }
-
- tr&-expanded-row {
- &,
- &:hover {
- background: @table-expanded-row-bg;
- }
-
- td > .@{table-prefix-cls}-wrapper {
- margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical - 1px;
- }
- }
-
- .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
- margin-right: 8px;
- }
-
- &-scroll {
- overflow: auto;
- overflow-x: hidden;
- table {
- width: auto;
- min-width: 100%;
- }
- }
-
- &-body-inner {
- height: 100%;
- }
-
- &-fixed-header > &-content > &-scroll > &-body {
- position: relative;
- background: @component-background;
- }
-
- &-fixed-header &-body-inner {
- overflow: scroll;
- }
-
- &-fixed-header &-scroll &-header {
- overflow: scroll;
- padding-bottom: 20px;
- margin-bottom: -20px;
- // Workaround for additional scroll bar on the table header
- // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
- opacity: 0.9999;
- }
-
- &-fixed-left,
- &-fixed-right {
- position: absolute;
- top: 0;
- overflow: hidden;
- transition: box-shadow 0.3s ease;
- border-radius: 0;
- table {
- width: auto;
- background: @component-background;
- }
- }
-
- &-fixed-header &-fixed-left &-body-outer &-fixed,
- &-fixed-header &-fixed-right &-body-outer &-fixed {
- border-radius: 0;
- }
-
- &-fixed-left {
- left: 0;
- box-shadow: 6px 0 6px -4px @shadow-color;
- .@{table-prefix-cls}-header {
- overflow-y: hidden;
- }
- // hide scrollbar in left fixed columns
- .@{table-prefix-cls}-body-inner {
- margin-right: -20px;
- padding-right: 20px;
- }
- .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
- padding-right: 0;
- }
- &,
- table {
- border-radius: @table-border-radius-base 0 0 0;
- }
- .ant-table-thead > tr > th:last-child {
- border-top-right-radius: 0;
- }
- }
-
- &-fixed-right {
- right: 0;
- box-shadow: -6px 0 6px -4px @shadow-color;
- &,
- table {
- border-radius: 0 @table-border-radius-base 0 0;
- }
- // hide expand row content in right-fixed Table
- // https://github.com/ant-design/ant-design/issues/1898
- .@{table-prefix-cls}-expanded-row {
- color: transparent;
- pointer-events: none;
- }
- .ant-table-thead > tr > th:first-child {
- border-top-left-radius: 0;
- }
- }
-
- &&-scroll-position-left &-fixed-left {
- box-shadow: none;
- }
-
- &&-scroll-position-right &-fixed-right {
- box-shadow: none;
- }
-}
-
-@table-padding-vertical-md: @table-padding-vertical * 3 / 4;
-@table-padding-horizontal-md: @table-padding-horizontal / 2;
-@table-padding-vertical-sm: @table-padding-vertical / 2;
-@table-padding-horizontal-sm: @table-padding-horizontal / 2;
-
-.@{table-prefix-cls}-middle {
- > .@{table-prefix-cls}-title,
- > .@{table-prefix-cls}-footer {
- padding: @table-padding-vertical-md @table-padding-horizontal-md;
- }
- > .@{table-prefix-cls}-content {
- > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-body > table,
- > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
- > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-fixed-left
- > .@{table-prefix-cls}-body-outer
- > .@{table-prefix-cls}-body-inner
- > table,
- > .@{table-prefix-cls}-fixed-right
- > .@{table-prefix-cls}-body-outer
- > .@{table-prefix-cls}-body-inner
- > table {
- > .@{table-prefix-cls}-thead > tr > th,
- > .@{table-prefix-cls}-tbody > tr > td {
- padding: @table-padding-vertical-md @table-padding-horizontal-md;
- }
- }
- }
-
- tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
- margin: -@table-padding-vertical-md -@table-padding-horizontal -@table-padding-vertical-md - 1px;
- }
-}
-
-.@{table-prefix-cls}-small {
- border: @border-width-base @border-style-base @border-color-split;
- border-radius: @table-border-radius-base;
-
- > .@{table-prefix-cls}-title,
- > .@{table-prefix-cls}-footer {
- padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
- }
-
- > .@{table-prefix-cls}-title {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- top: 0;
- }
-
- > .@{table-prefix-cls}-content {
- > .@{table-prefix-cls}-body {
- margin: 0 @table-padding-horizontal-sm;
- }
-
- > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-body > table,
- > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
- > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-fixed-left
- > .@{table-prefix-cls}-body-outer
- > .@{table-prefix-cls}-body-inner
- > table,
- > .@{table-prefix-cls}-fixed-right
- > .@{table-prefix-cls}-body-outer
- > .@{table-prefix-cls}-body-inner
- > table {
- border: 0;
- > .@{table-prefix-cls}-thead > tr > th,
- > .@{table-prefix-cls}-tbody > tr > td {
- padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
- }
- > .@{table-prefix-cls}-thead > tr > th {
- background-color: @component-background;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
- > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
- background-color: @table-body-sort-bg;
- }
- }
-
- > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
- > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
- > .@{table-prefix-cls}-fixed-left
- > .@{table-prefix-cls}-body-outer
- > .@{table-prefix-cls}-body-inner
- > table,
- > .@{table-prefix-cls}-fixed-right
- > .@{table-prefix-cls}-body-outer
- > .@{table-prefix-cls}-body-inner
- > table {
- padding: 0;
- }
-
- .@{table-prefix-cls}-header {
- background-color: @component-background;
- }
-
- .@{table-prefix-cls}-placeholder,
- .@{table-prefix-cls}-row:last-child td {
- border-bottom: 0;
- }
- }
-
- &.@{table-prefix-cls}-bordered {
- border-right: 0;
-
- .@{table-prefix-cls}-title {
- border: 0;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- border-right: @border-width-base @border-style-base @border-color-split;
- }
-
- .@{table-prefix-cls}-content {
- border-right: @border-width-base @border-style-base @border-color-split;
- }
-
- .@{table-prefix-cls}-footer {
- border: 0;
- border-top: @border-width-base @border-style-base @border-color-split;
- border-right: @border-width-base @border-style-base @border-color-split;
- &:before {
- display: none;
- }
- }
-
- .@{table-prefix-cls}-placeholder {
- border-left: 0;
- border-bottom: 0;
- border-right: 0;
- }
-
- .@{table-prefix-cls}-thead > tr > th:last-child,
- .@{table-prefix-cls}-tbody > tr > td:last-child {
- border-right: none;
- }
-
- .@{table-prefix-cls}-fixed-left {
- .@{table-prefix-cls}-thead > tr > th:last-child,
- .@{table-prefix-cls}-tbody > tr > td:last-child {
- border-right: @border-width-base @border-style-base @border-color-split;
- }
- }
-
- .@{table-prefix-cls}-fixed-right {
- border-left: @border-width-base @border-style-base @border-color-split;
- border-right: @border-width-base @border-style-base @border-color-split;
- }
- }
-
- tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
- margin: -@table-padding-vertical-sm -@table-padding-horizontal -@table-padding-vertical-sm - 1px;
- }
-}
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-// card style
-.@{tab-prefix-cls} {
- &&-card &-card-bar &-nav-container {
- height: @tabs-card-height;
- }
- &&-card &-card-bar &-ink-bar {
- visibility: hidden;
- }
- &&-card &-card-bar &-tab {
- margin: 0;
- border: @border-width-base @border-style-base @border-color-split;
- border-bottom: 0;
- border-radius: @border-radius-base @border-radius-base 0 0;
- background: @tabs-card-head-background;
- margin-right: 2px;
- padding: 0 16px;
- transition: all 0.3s @ease-in-out;
- line-height: @tabs-card-height - 2px;
- }
- &&-card &-card-bar &-tab-active {
- background: @component-background;
- border-color: @border-color-split;
- color: @tabs-card-active-color;
- padding-bottom: 1px;
- }
- &&-card &-card-bar &-tab-inactive {
- padding: 0;
- }
- &&-card &-card-bar &-nav-wrap {
- margin-bottom: 0;
- }
- &&-card &-card-bar &-tab &-close-x {
- color: @text-color-secondary;
- transition: all 0.3s;
- font-size: @font-size-sm;
- margin-left: 3px;
- margin-right: -5px;
- overflow: hidden;
- vertical-align: middle;
- width: 16px;
- height: 16px;
- height: @font-size-base;
- &:hover {
- color: @heading-color;
- }
- }
-
- &&-card &-card-content > &-tabpane,
- &&-editable-card &-card-content > &-tabpane {
- transition: none !important;
- &-inactive {
- overflow: hidden;
- }
- }
-
- &&-card &-card-bar &-tab:hover .@{iconfont-css-prefix}-close {
- opacity: 1;
- }
-
- &-extra-content {
- line-height: @tabs-card-height;
-
- .@{tab-prefix-cls}-new-tab {
- position: relative;
- width: 20px;
- height: 20px;
- line-height: 20px;
- text-align: center;
- cursor: pointer;
- border-radius: @border-radius-sm;
- border: @border-width-base @border-style-base @border-color-split;
- font-size: 12px;
- color: @text-color;
- transition: all 0.3s;
- &:hover {
- color: @tabs-card-active-color;
- border-color: @tabs-card-active-color;
- }
- svg {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- }
- }
- }
-
- // https://github.com/ant-design/ant-design/issues/4669
- &-vertical&-card &-card-bar&-left-bar,
- &-vertical&-card &-card-bar&-right-bar {
- .@{tab-prefix-cls}-nav-container {
- height: auto;
- }
- .@{tab-prefix-cls}-tab {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- margin-bottom: 8px;
- &-active {
- padding-bottom: 4px;
- }
- &:last-child {
- margin-bottom: 8px;
- }
- }
- .@{tab-prefix-cls}-new-tab {
- width: 90%;
- }
- }
-
- &-vertical&-card&-left &-card-bar&-left-bar {
- .@{tab-prefix-cls}-nav-wrap {
- margin-right: 0;
- }
- .@{tab-prefix-cls}-tab {
- border-right: 0;
- border-radius: @border-radius-base 0 0 @border-radius-base;
- margin-right: 1px;
- &-active {
- margin-right: -1px;
- padding-right: 18px;
- }
- }
- }
-
- &-vertical&-card&-right &-card-bar&-right-bar {
- .@{tab-prefix-cls}-nav-wrap {
- margin-left: 0;
- }
- .@{tab-prefix-cls}-tab {
- border-left: 0;
- border-radius: 0 @border-radius-base @border-radius-base 0;
- margin-left: 1px;
- &-active {
- margin-left: -1px;
- padding-left: 18px;
- }
- }
- }
-
- // https://github.com/ant-design/ant-design/issues/9104
- & &-card-bar&-bottom-bar &-tab {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- border-top: 0;
- border-radius: 0 0 @border-radius-base @border-radius-base;
- }
-
- & &-card-bar&-bottom-bar &-tab-active {
- color: @primary-color;
- padding-bottom: 0;
- padding-top: 1px;
- }
-}
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls} {
- .reset-component;
- position: relative;
- overflow: hidden;
- .clearfix;
-
- &-ink-bar {
- z-index: 1;
- position: absolute;
- left: 0;
- bottom: 1px;
- box-sizing: border-box;
- height: 2px;
- background-color: @tabs-ink-bar-color;
- transform-origin: 0 0;
- }
-
- &-bar {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- margin: @tabs-bar-margin;
- outline: none;
- transition: padding 0.3s @ease-in-out;
- }
-
- &-nav-container {
- overflow: hidden;
- font-size: @tabs-title-font-size;
- line-height: @line-height-base;
- box-sizing: border-box;
- position: relative;
- white-space: nowrap;
- margin-bottom: -1px;
- transition: padding 0.3s @ease-in-out;
- .clearfix;
-
- &-scrolling {
- padding-left: @tabs-scrolling-size;
- padding-right: @tabs-scrolling-size;
- }
- }
-
- // https://github.com/ant-design/ant-design/issues/9104
- &-bottom &-bottom-bar {
- margin-bottom: 0;
- margin-top: 16px;
- border-bottom: none;
- border-top: @border-width-base @border-style-base @border-color-split;
- }
-
- &-bottom &-bottom-bar &-ink-bar {
- bottom: auto;
- top: 1px;
- }
-
- &-bottom &-bottom-bar &-nav-container {
- margin-bottom: 0;
- margin-top: -1px;
- }
-
- &-tab-prev,
- &-tab-next {
- user-select: none;
- z-index: 2;
- width: 0;
- height: 100%;
- cursor: pointer;
- border: 0;
- background-color: transparent;
- position: absolute;
- text-align: center;
- color: @text-color-secondary;
- transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
- opacity: 0;
- pointer-events: none;
-
- &.@{tab-prefix-cls}-tab-arrow-show {
- opacity: 1;
- width: @tabs-scrolling-size;
- height: 100%;
- pointer-events: auto;
- }
-
- &:hover {
- color: @text-color;
- }
-
- &-icon {
- font-style: normal;
- font-weight: bold;
- font-variant: normal;
- line-height: inherit;
- vertical-align: baseline;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- text-transform: none;
-
- &-target {
- display: block;
- .iconfont-size-under-12px(10px);
- }
- }
- }
-
- &-tab-btn-disabled {
- cursor: not-allowed;
- &,
- &:hover {
- color: @disabled-color;
- }
- }
-
- &-tab-next {
- right: 2px;
- }
-
- &-tab-prev {
- left: 0;
- :root & {
- filter: none;
- }
- }
-
- &-nav-wrap {
- overflow: hidden;
- margin-bottom: -1px;
- }
-
- &-nav-scroll {
- overflow: hidden;
- white-space: nowrap;
- }
-
- &-nav {
- box-sizing: border-box;
- padding-left: 0;
- transition: transform 0.3s @ease-in-out;
- position: relative;
- margin: 0;
- list-style: none;
- display: inline-block;
-
- &:before,
- &:after {
- display: table;
- content: ' ';
- }
-
- &:after {
- clear: both;
- }
-
- .@{tab-prefix-cls}-tab {
- display: inline-block;
- height: 100%;
- margin: @tabs-horizontal-margin;
- padding: @tabs-horizontal-padding;
- box-sizing: border-box;
- position: relative;
-
- &:last-child {
- margin-right: 0;
- }
-
- transition: color 0.3s @ease-in-out;
- cursor: pointer;
- text-decoration: none;
-
- &:hover {
- color: @tabs-hover-color;
- }
-
- &:active {
- color: @tabs-active-color;
- }
-
- .@{iconfont-css-prefix} {
- margin-right: 8px;
- }
-
- &-disabled {
- &,
- &:hover {
- cursor: not-allowed;
- color: @disabled-color;
- }
- }
-
- &-active {
- color: @tabs-highlight-color;
- font-weight: 500;
- }
- }
- }
-
- .@{tab-prefix-cls}-large-bar {
- .@{tab-prefix-cls}-nav-container {
- font-size: @tabs-title-font-size-lg;
- }
- .@{tab-prefix-cls}-tab {
- padding: @tabs-horizontal-padding-lg;
- }
- }
-
- .@{tab-prefix-cls}-small-bar {
- .@{tab-prefix-cls}-nav-container {
- font-size: @tabs-title-font-size-sm;
- }
- .@{tab-prefix-cls}-tab {
- padding: @tabs-horizontal-padding-sm;
- }
- }
-
- // Horizontal Content
- .@{tab-prefix-cls}-top-content,
- .@{tab-prefix-cls}-bottom-content {
- width: 100%;
-
- > .@{tab-prefix-cls}-tabpane {
- flex-shrink: 0;
- width: 100%;
- transition: opacity 0.45s;
- opacity: 1;
- }
-
- > .@{tab-prefix-cls}-tabpane-inactive {
- opacity: 0;
- height: 0;
- padding: 0 !important;
- pointer-events: none;
- input {
- visibility: hidden;
- }
- }
-
- &.@{tab-prefix-cls}-content-animated {
- display: flex;
- flex-direction: row;
- will-change: margin-left;
- transition: margin-left 0.3s @ease-in-out;
- }
- }
-
- // Vertical Bar
- .@{tab-prefix-cls}-left-bar,
- .@{tab-prefix-cls}-right-bar {
- border-bottom: 0;
- height: 100%;
- &-tab-prev,
- &-tab-next {
- width: @tabs-scrolling-size;
- height: 0;
- transition: height 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
- }
- &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
- &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
- width: 100%;
- height: @tabs-scrolling-size;
- }
-
- .@{tab-prefix-cls}-tab {
- float: none;
- margin: @tabs-vertical-margin;
- padding: @tabs-vertical-padding;
- display: block;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .@{tab-prefix-cls}-extra-content {
- text-align: center;
- }
-
- .@{tab-prefix-cls}-nav-scroll {
- width: auto;
- }
-
- .@{tab-prefix-cls}-nav-container,
- .@{tab-prefix-cls}-nav-wrap {
- height: 100%;
- }
-
- .@{tab-prefix-cls}-nav-container {
- margin-bottom: 0;
-
- &.@{tab-prefix-cls}-nav-container-scrolling {
- padding: @tabs-scrolling-size 0;
- }
- }
-
- .@{tab-prefix-cls}-nav-wrap {
- margin-bottom: 0;
- }
-
- .@{tab-prefix-cls}-nav {
- width: 100%;
- }
-
- .@{tab-prefix-cls}-ink-bar {
- width: 2px;
- top: 0;
- left: auto;
- height: auto;
- bottom: auto;
- }
-
- .@{tab-prefix-cls}-tab-next {
- width: 100%;
- bottom: 0;
- height: @tabs-scrolling-size;
- }
-
- .@{tab-prefix-cls}-tab-prev {
- top: 0;
- width: 100%;
- height: @tabs-scrolling-size;
- }
- }
-
- // Vertical Content
- .@{tab-prefix-cls}-left-content,
- .@{tab-prefix-cls}-right-content {
- overflow: hidden;
- width: auto;
- margin-top: 0 !important;
- }
-
- // Vertical - Left
- .@{tab-prefix-cls}-left-bar {
- float: left;
- border-right: @border-width-base @border-style-base @border-color-split;
- margin-right: -1px;
- margin-bottom: 0;
- .@{tab-prefix-cls}-tab {
- text-align: right;
- }
- .@{tab-prefix-cls}-nav-container {
- margin-right: -1px;
- }
- .@{tab-prefix-cls}-nav-wrap {
- margin-right: -1px;
- }
- .@{tab-prefix-cls}-ink-bar {
- right: 1px;
- }
- }
- .@{tab-prefix-cls}-left-content {
- padding-left: 24px;
- border-left: @border-width-base @border-style-base @border-color-split;
- }
-
- // Vertical - Right
- .@{tab-prefix-cls}-right-bar {
- float: right;
- border-left: @border-width-base @border-style-base @border-color-split;
- margin-left: -1px;
- margin-bottom: 0;
- .@{tab-prefix-cls}-nav-container {
- margin-left: -1px;
- }
- .@{tab-prefix-cls}-nav-wrap {
- margin-left: -1px;
- }
- .@{tab-prefix-cls}-ink-bar {
- left: 1px;
- }
- }
- .@{tab-prefix-cls}-right-content {
- padding-right: 24px;
- border-right: @border-width-base @border-style-base @border-color-split;
- }
-}
-
-.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
-.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
- transition: transform 0.3s @ease-in-out, width 0.3s @ease-in-out, left 0.3s @ease-in-out;
-}
-
-.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
-.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
- transition: transform 0.3s @ease-in-out, height 0.3s @ease-in-out, top 0.3s @ease-in-out;
-}
-
-// No animation
-.tabs-no-animation() {
- > .@{tab-prefix-cls}-content-animated {
- transform: none !important;
- margin-left: 0 !important;
- }
- > .@{tab-prefix-cls}-tabpane-inactive {
- display: none;
- }
-}
-
-.no-flex,
-.@{tab-prefix-cls}-no-animation {
- > .@{tab-prefix-cls}-content {
- .tabs-no-animation();
- }
-}
-
-.@{tab-prefix-cls}-left-content,
-.@{tab-prefix-cls}-right-content {
- .tabs-no-animation();
-}
-
-@tag-prefix-cls: ~'@{ant-prefix}-tag';
-
-.@{tag-prefix-cls} {
- .reset-component;
- display: inline-block;
- line-height: 20px;
- height: 22px;
- padding: 0 7px;
- border-radius: @border-radius-base;
- border: @border-width-base @border-style-base @border-color-base;
- background: @tag-default-bg;
- font-size: @tag-font-size;
- transition: all 0.3s @ease-out;
- opacity: 1;
- margin-right: 8px;
- cursor: pointer;
- white-space: nowrap;
-
- &:hover {
- opacity: 0.85;
- }
-
- &,
- a,
- a:hover {
- color: @tag-default-color;
- }
-
- > a:first-child:last-child {
- display: inline-block;
- margin: 0 -8px;
- padding: 0 8px;
- }
-
- .@{iconfont-css-prefix}-close {
- .iconfont-size-under-12px(10px);
- cursor: pointer;
- margin-left: 3px;
- transition: all 0.3s;
- color: @text-color-secondary;
- font-weight: bold;
-
- &:hover {
- color: @heading-color;
- }
- }
-
- &-has-color {
- border-color: transparent;
- &,
- a,
- a:hover,
- .@{iconfont-css-prefix}-close,
- .@{iconfont-css-prefix}-close:hover {
- color: #fff;
- }
- }
-
- &-checkable {
- background-color: transparent;
- border-color: transparent;
- &:not(&-checked):hover {
- color: @primary-color;
- }
- &:active,
- &-checked {
- color: #fff;
- }
- &-checked {
- background-color: @primary-6;
- }
- &:active {
- background-color: @primary-7;
- }
- }
-
- &-close {
- width: 0 !important;
- padding: 0;
- margin: 0;
- }
-
- &-zoom-enter,
- &-zoom-appear {
- animation: antFadeIn 0.2s @ease-in-out-circ;
- animation-fill-mode: both;
- }
-
- &-zoom-leave {
- animation: antZoomOut 0.3s @ease-in-out-circ;
- animation-fill-mode: both;
- }
-
- &-hidden {
- display: none;
- }
-
- @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
- purple;
-
- // mixin to iterate over colors and create CSS class for each one
- .make-color-classes(@i: length(@colors)) when (@i > 0) {
- .make-color-classes(@i - 1);
- @color: extract(@colors, @i);
- @lightColor: '@{color}-1';
- @lightBorderColor: '@{color}-3';
- @darkColor: '@{color}-6';
- &-@{color} {
- color: @@darkColor;
- background: @@lightColor;
- border-color: @@lightBorderColor;
- }
- &-@{color}-inverse {
- background: @@darkColor;
- border-color: @@darkColor;
- color: #fff;
- }
- }
-
- .make-color-classes();
-}
-
-@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker';
-@timepicker-item-height: 32px;
-
-.@{timepicker-prefix-cls}-panel {
- .reset-component;
- font-family: @font-family;
- z-index: @zindex-picker;
- position: absolute;
-
- &-inner {
- position: relative;
- outline: none;
- list-style: none;
- font-size: @font-size-base;
- text-align: left;
- background-color: @component-background;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- background-clip: padding-box;
- left: -2px;
- }
-
- &-input {
- width: 100%;
- margin: 0;
- padding: 0;
- border: 0;
- max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
- cursor: auto;
- outline: 0;
- line-height: normal;
-
- .placeholder;
-
- &-wrap {
- box-sizing: border-box;
- position: relative;
- padding: 7px 2px 7px @control-padding-horizontal;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
-
- &-invalid {
- border-color: @error-color;
- }
- }
-
- &-clear-btn {
- position: absolute;
- right: 8px;
- cursor: pointer;
- overflow: hidden;
- width: 20px;
- height: 20px;
- text-align: center;
- line-height: 20px;
- top: 7px;
- margin: 0;
-
- &-icon svg {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- font-size: @font-size-base;
- color: @disabled-color;
- display: inline-block;
- transition: color 0.3s ease;
-
- &:hover {
- color: @text-color-secondary;
- }
- }
- }
-
- &-narrow &-input-wrap {
- max-width: @time-picker-panel-column-width * 2;
- }
-
- &-select {
- float: left;
- font-size: @font-size-base;
- border-left: @border-width-base @border-style-base @border-color-split;
- box-sizing: border-box;
- width: @time-picker-panel-column-width;
- overflow: hidden;
- position: relative; // Fix chrome weird render bug
- max-height: @timepicker-item-height * 6;
-
- &:hover {
- overflow-y: auto;
- }
-
- &:first-child {
- border-left: 0;
- margin-left: 0;
- }
-
- &:last-child {
- border-right: 0;
- }
-
- &:only-child {
- width: 100%;
- }
-
- ul {
- list-style: none;
- box-sizing: border-box;
- margin: 0;
- padding: 0 0 @timepicker-item-height * 5;
- width: 100%;
- }
-
- li {
- list-style: none;
- box-sizing: content-box;
- margin: 0;
- padding: 0 0 0 @control-padding-horizontal;
- width: 100%;
- height: @timepicker-item-height;
- line-height: @timepicker-item-height;
- text-align: left;
- cursor: pointer;
- user-select: none;
- transition: background 0.3s;
- }
-
- li:hover {
- background: @item-hover-bg;
- }
-
- li&-option-selected {
- background: @time-picker-selected-bg;
- font-weight: bold;
- &:hover {
- background: @time-picker-selected-bg;
- }
- }
-
- li&-option-disabled {
- color: @btn-disable-color;
- &:hover {
- background: transparent;
- cursor: not-allowed;
- }
- }
- }
-
- &-combobox {
- .clearfix;
- }
-
- &-addon {
- padding: 8px;
- border-top: @border-width-base @border-style-base @border-color-split;
- }
-
- &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
- &.slide-up-enter.slide-up-enter-active&-placement-topRight,
- &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-topRight {
- animation-name: antSlideDownIn;
- }
-
- &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
- &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
- &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
- animation-name: antSlideUpIn;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
- &.slide-up-leave.slide-up-leave-active&-placement-topRight {
- animation-name: antSlideDownOut;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
- &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
- animation-name: antSlideUpOut;
- }
-}
-
-.@{timepicker-prefix-cls} {
- .reset-component;
- position: relative;
- display: inline-block;
- outline: none;
- transition: opacity 0.3s;
- width: 128px;
-
- &-input {
- .input;
- &[disabled] {
- .disabled;
- }
- }
-
- &-open {
- opacity: 0;
- }
-
- &-icon {
- position: absolute;
- user-select: none;
- transition: all 0.3s @ease-in-out;
- width: 14px;
- height: 14px;
- line-height: 14px;
- right: @control-padding-horizontal - 1px;
- color: @disabled-color;
- top: 50%;
- margin-top: -7px;
- .@{timepicker-prefix-cls}-clock-icon {
- color: @disabled-color;
- display: block;
- line-height: 1;
- }
- }
-
- &-large &-input {
- .input-lg;
- }
-
- &-small &-input {
- .input-sm;
- }
-
- &-small &-icon {
- right: @control-padding-horizontal-sm - 1px;
- }
-}
-
-@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
-@timeline-color: @border-color-split;
-
-.@{timeline-prefix-cls} {
- .reset-component;
- list-style: none;
- margin: 0;
- padding: 0;
-
- &-item {
- position: relative;
- padding: 0 0 20px;
- list-style: none;
- margin: 0;
- font-size: @font-size-base;
-
- &-tail {
- position: absolute;
- left: 4px;
- top: 0.75em;
- height: 100%;
- border-left: 2px solid @timeline-color;
- }
-
- &-pending &-head {
- font-size: @font-size-sm;
- }
-
- &-pending &-tail {
- display: none;
- }
-
- &-head {
- position: absolute;
- width: 10px;
- height: 10px;
- background-color: @component-background;
- border-radius: 100px;
- border: 2px solid transparent;
-
- &-blue {
- border-color: @primary-color;
- color: @primary-color;
- }
- &-red {
- border-color: @error-color;
- color: @error-color;
- }
- &-green {
- border-color: @success-color;
- color: @success-color;
- }
- }
-
- &-head-custom {
- position: absolute;
- text-align: center;
- line-height: 1;
- margin-top: 0;
- border: 0;
- height: auto;
- border-radius: 0;
- padding: 3px 1px;
- transform: translate(-50%, -50%);
- top: 5.5px;
- left: 5px;
- width: auto;
- }
-
- &-content {
- margin: 0 0 0 18px;
- position: relative;
- top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
- }
-
- &-last {
- .@{timeline-prefix-cls}-item-tail {
- display: none;
- }
- .@{timeline-prefix-cls}-item-content {
- min-height: 48px;
- }
- }
- }
-
- &.@{timeline-prefix-cls}-alternate,
- &.@{timeline-prefix-cls}-right {
- .@{timeline-prefix-cls}-item {
- &-tail,
- &-head,
- &-head-custom {
- left: 50%;
- }
-
- &-head {
- margin-left: -4px;
- &-custom {
- margin-left: 1px;
- }
- }
-
- &-left {
- .@{timeline-prefix-cls}-item-content {
- text-align: left;
- left: 50%;
- width: 50%;
- }
- }
-
- &-right {
- .@{timeline-prefix-cls}-item-content {
- text-align: right;
- right: 50%;
- margin-right: 18px;
- width: 50%;
- left: -30px;
- }
- }
- }
- }
-
- &.@{timeline-prefix-cls}-right {
- .@{timeline-prefix-cls}-item-right {
- .@{timeline-prefix-cls}-item-tail,
- .@{timeline-prefix-cls}-item-head,
- .@{timeline-prefix-cls}-item-head-custom {
- left: 100%;
- }
- .@{timeline-prefix-cls}-item-content {
- right: 0;
- width: 100%;
- left: -30px;
- }
- }
- }
-
- &&-pending &-item-last &-item-tail {
- border-left: 2px dotted @timeline-color;
- display: block;
- }
-
- &&-reverse &-item-last &-item-tail {
- display: none;
- }
-
- &&-reverse &-item-pending {
- .@{timeline-prefix-cls}-item-tail {
- border-left: 2px dotted @timeline-color;
- display: block;
- }
- .@{timeline-prefix-cls}-item-content {
- min-height: 48px;
- }
- }
-}
-
-@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
-
-// Base class
-.@{tooltip-prefix-cls} {
- .reset-component;
- position: absolute;
- z-index: @zindex-tooltip;
- display: block;
- visibility: visible;
- max-width: @tooltip-max-width;
-
- &-hidden {
- display: none;
- }
-
- &-placement-top,
- &-placement-topLeft,
- &-placement-topRight {
- padding-bottom: @tooltip-distance;
- }
- &-placement-right,
- &-placement-rightTop,
- &-placement-rightBottom {
- padding-left: @tooltip-distance;
- }
- &-placement-bottom,
- &-placement-bottomLeft,
- &-placement-bottomRight {
- padding-top: @tooltip-distance;
- }
- &-placement-left,
- &-placement-leftTop,
- &-placement-leftBottom {
- padding-right: @tooltip-distance;
- }
-
- // Wrapper for the tooltip content
- &-inner {
- 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;
- word-wrap: break-word;
- }
-
- // Arrows
- &-arrow {
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- }
-
- &-placement-top &-arrow,
- &-placement-topLeft &-arrow,
- &-placement-topRight &-arrow {
- bottom: @tooltip-distance - @tooltip-arrow-width;
- border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
- border-top-color: @tooltip-arrow-color;
- }
-
- &-placement-top &-arrow {
- left: 50%;
- margin-left: -@tooltip-arrow-width;
- }
-
- &-placement-topLeft &-arrow {
- left: 16px;
- }
-
- &-placement-topRight &-arrow {
- right: 16px;
- }
-
- &-placement-right &-arrow,
- &-placement-rightTop &-arrow,
- &-placement-rightBottom &-arrow {
- left: @tooltip-distance - @tooltip-arrow-width;
- border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
- border-right-color: @tooltip-arrow-color;
- }
-
- &-placement-right &-arrow {
- top: 50%;
- margin-top: -@tooltip-arrow-width;
- }
-
- &-placement-rightTop &-arrow {
- top: 8px;
- }
-
- &-placement-rightBottom &-arrow {
- bottom: 8px;
- }
-
- &-placement-left &-arrow,
- &-placement-leftTop &-arrow,
- &-placement-leftBottom &-arrow {
- right: @tooltip-distance - @tooltip-arrow-width;
- border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
- border-left-color: @tooltip-arrow-color;
- }
-
- &-placement-left &-arrow {
- top: 50%;
- margin-top: -@tooltip-arrow-width;
- }
-
- &-placement-leftTop &-arrow {
- top: 8px;
- }
-
- &-placement-leftBottom &-arrow {
- bottom: 8px;
- }
-
- &-placement-bottom &-arrow,
- &-placement-bottomLeft &-arrow,
- &-placement-bottomRight &-arrow {
- top: @tooltip-distance - @tooltip-arrow-width;
- border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
- border-bottom-color: @tooltip-arrow-color;
- }
-
- &-placement-bottom &-arrow {
- left: 50%;
- margin-left: -@tooltip-arrow-width;
- }
-
- &-placement-bottomLeft &-arrow {
- left: 16px;
- }
-
- &-placement-bottomRight &-arrow {
- right: 16px;
- }
-}
-
-@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
-
-.@{transfer-prefix-cls} {
- .reset-component;
- position: relative;
-
- &-disabled {
- .@{transfer-prefix-cls}-list {
- background: @transfer-disabled-bg;
- }
- }
-
- &-list {
- border: @border-width-base @border-style-base @border-color-base;
- display: inline-block;
- border-radius: @border-radius-base;
- vertical-align: middle;
- position: relative;
- width: 180px;
- height: 200px;
- padding-top: 34px;
-
- &-with-footer {
- padding-bottom: 34px;
- }
-
- &-search {
- padding: 0 @control-padding-horizontal-sm;
- &-action {
- color: @disabled-color;
- position: absolute;
- top: 4px;
- right: 4px;
- bottom: 4px;
- width: 28px;
- line-height: @input-height-base;
- text-align: center;
- .@{iconfont-css-prefix} {
- transition: all 0.3s;
- color: @disabled-color;
- &:hover {
- color: @text-color-secondary;
- }
- }
- span& {
- pointer-events: none;
- }
- }
- }
-
- &-header {
- padding: 6px @control-padding-horizontal;
- border-radius: @border-radius-base @border-radius-base 0 0;
- background: @component-background;
- color: @text-color;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
-
- &-title {
- position: absolute;
- right: 12px;
- }
- }
-
- &-body {
- font-size: @font-size-base;
- position: relative;
- height: 100%;
-
- &-search-wrapper {
- position: absolute;
- top: 0;
- left: 0;
- padding: 4px;
- width: 100%;
- }
- }
-
- &-body-with-search {
- padding-top: @input-height-base + 8px;
- }
-
- &-content {
- height: 100%;
- overflow: auto;
- list-style: none;
- padding: 0;
- margin: 0;
- > .LazyLoad {
- animation: transferHighlightIn 1s;
- }
-
- &-item {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding: 6px @control-padding-horizontal;
- min-height: 32px;
- transition: all 0.3s;
- > span {
- padding-right: 0;
- }
- }
-
- &-item:not(&-item-disabled):hover {
- cursor: pointer;
- background-color: @item-hover-bg;
- }
-
- &-item-disabled {
- cursor: not-allowed;
- color: @btn-disable-color;
- }
- }
-
- &-body-not-found {
- padding-top: 0;
- color: @disabled-color;
- text-align: center;
- position: absolute;
- top: 50%;
- width: 100%;
- margin-top: -10px;
- }
-
- &-footer {
- border-top: @border-width-base @border-style-base @border-color-split;
- border-radius: 0 0 @border-radius-base @border-radius-base;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- }
- }
-
- &-operation {
- display: inline-block;
- overflow: hidden;
- margin: 0 8px;
- vertical-align: middle;
-
- .@{ant-prefix}-btn {
- display: block;
-
- &:first-child {
- margin-bottom: 4px;
- }
-
- .@{iconfont-css-prefix} {
- font-size: 12px;
- }
- }
- }
-}
-
-@keyframes transferHighlightIn {
- 0% {
- background: @primary-2;
- }
- 100% {
- background: transparent;
- }
-}
-
-@upload-prefix-cls: ~'@{ant-prefix}-upload';
-@upload-item: ~'@{ant-prefix}-upload-list-item';
-@upload-pictrue-card-size: 104px;
-
-.@{upload-prefix-cls} {
- .reset-component;
- outline: 0;
-
- p {
- margin: 0;
- }
-
- &-btn {
- display: block;
- width: 100%;
- outline: none;
- }
-
- input[type='file'] {
- cursor: pointer;
- }
-
- &&-select {
- display: inline-block;
- }
-
- &&-select-picture-card {
- border: @border-width-base dashed @border-color-base;
- width: @upload-pictrue-card-size;
- height: @upload-pictrue-card-size;
- border-radius: @border-radius-base;
- background-color: @background-color-light;
- text-align: center;
- cursor: pointer;
- transition: border-color 0.3s ease;
- vertical-align: top;
- margin-right: 8px;
- margin-bottom: 8px;
- display: table;
-
- > .@{upload-prefix-cls} {
- width: 100%;
- height: 100%;
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- padding: 8px;
- }
-
- &:hover {
- border-color: @primary-color;
- }
- }
-
- &&-drag {
- border: @border-width-base dashed @border-color-base;
- transition: border-color 0.3s;
- cursor: pointer;
- border-radius: @border-radius-base;
- text-align: center;
- width: 100%;
- height: 100%;
- position: relative;
- background: @background-color-light;
-
- .@{upload-prefix-cls} {
- padding: 16px 0;
- }
-
- &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
- border: 2px dashed @primary-5;
- }
-
- &.@{upload-prefix-cls}-disabled {
- cursor: not-allowed;
- }
-
- .@{upload-prefix-cls}-btn {
- display: table;
- height: 100%;
- }
-
- .@{upload-prefix-cls}-drag-container {
- display: table-cell;
- vertical-align: middle;
- }
-
- &:not(.@{upload-prefix-cls}-disabled):hover {
- border-color: @primary-5;
- }
-
- p.@{upload-prefix-cls}-drag-icon {
- .@{iconfont-css-prefix} {
- font-size: 48px;
- color: @primary-5;
- }
- margin-bottom: 20px;
- }
- p.@{upload-prefix-cls}-text {
- font-size: @font-size-lg;
- margin: 0 0 4px;
- color: @heading-color;
- }
- p.@{upload-prefix-cls}-hint {
- font-size: @font-size-base;
- color: @text-color-secondary;
- }
- .@{iconfont-css-prefix}-plus {
- font-size: 30px;
- transition: all 0.3s;
- color: @disabled-color;
- &:hover {
- color: @text-color-secondary;
- }
- }
- &:hover .@{iconfont-css-prefix}-plus {
- color: @text-color-secondary;
- }
- }
-}
-
-.@{upload-prefix-cls}-list {
- .reset-component;
- .clearfix;
- &-item {
- margin-top: 8px;
- font-size: @font-size-base;
- position: relative;
- height: 22px;
- &-name {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- padding-left: @font-size-base + 8px;
- width: 100%;
- display: inline-block;
- }
-
- &-info {
- height: 100%;
- padding: 0 12px 0 4px;
- transition: background-color 0.3s;
-
- > span {
- display: block;
- }
-
- .@{iconfont-css-prefix}-loading,
- .@{iconfont-css-prefix}-paper-clip {
- font-size: @font-size-base;
- color: @text-color-secondary;
- position: absolute;
- top: @font-size-base / 2 - 2px;
- }
- }
-
- .@{iconfont-css-prefix}-close {
- .iconfont-size-under-12px(10px);
- transition: all 0.3s;
- opacity: 0;
- cursor: pointer;
- position: absolute;
- top: 6px;
- right: 4px;
- color: @text-color-secondary;
- line-height: 0;
- &:hover {
- color: @text-color;
- }
- }
-
- &:hover &-info {
- background-color: @item-hover-bg;
- }
-
- &:hover .@{iconfont-css-prefix}-close {
- opacity: 1;
- }
-
- &-error,
- &-error .@{iconfont-css-prefix}-paper-clip,
- &-error &-name {
- color: @error-color;
- }
-
- &-error .@{iconfont-css-prefix}-close {
- opacity: 1;
- color: @error-color !important;
- }
-
- &-progress {
- line-height: 0;
- font-size: @font-size-base;
- position: absolute;
- width: 100%;
- bottom: -12px;
- padding-left: @font-size-base + 12px;
- }
- }
-
- &-picture,
- &-picture-card {
- .@{upload-item} {
- padding: 8px;
- border-radius: @border-radius-base;
- border: @border-width-base @border-style-base @border-color-base;
- height: 66px;
- position: relative;
- &:hover {
- background: transparent;
- }
- &-error {
- border-color: @error-color;
- }
- }
-
- .@{upload-item}-info {
- padding: 0;
- }
-
- .@{upload-item}:hover .@{upload-item}-info {
- background: transparent;
- }
-
- .@{upload-item}-uploading {
- border-style: dashed;
- }
-
- .@{upload-item}-thumbnail {
- width: 48px;
- height: 48px;
- position: absolute;
- top: 8px;
- left: 8px;
- text-align: center;
- line-height: 54px;
- font-size: 26px;
- opacity: 0.8;
- }
-
- .@{upload-item}-icon {
- font-size: 26px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-
- .@{upload-item}-thumbnail img {
- width: 48px;
- height: 48px;
- display: block;
- overflow: hidden;
- }
-
- .@{upload-item}-name {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin: 0 0 0 8px;
- line-height: 44px;
- transition: all 0.3s;
- padding-left: 48px;
- padding-right: 8px;
- max-width: 100%;
- display: inline-block;
- box-sizing: border-box;
- }
-
- .@{upload-item}-uploading .@{upload-item}-name {
- line-height: 28px;
- }
-
- .@{upload-item}-progress {
- padding-left: 56px;
- margin-top: 0;
- bottom: 14px;
- width: ~'calc(100% - 24px)';
- }
-
- .@{iconfont-css-prefix}-close {
- position: absolute;
- right: 8px;
- top: 8px;
- line-height: 1;
- opacity: 1;
- }
- }
-
- &-picture-card {
- // https://github.com/ant-design/ant-design/issues/11183
- float: left;
-
- &.@{upload-prefix-cls}-list:after {
- display: none;
- }
- .@{upload-item} {
- float: left;
- width: @upload-pictrue-card-size;
- height: @upload-pictrue-card-size;
- margin: 0 8px 8px 0;
- }
-
- .@{upload-item}-info {
- height: 100%;
- position: relative;
- overflow: hidden;
-
- &:before {
- content: ' ';
- position: absolute;
- z-index: 1;
- background-color: rgba(0, 0, 0, 0.5);
- transition: all 0.3s;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- }
-
- .@{upload-item}:hover .@{upload-item}-info:before {
- opacity: 1;
- }
-
- .@{upload-item}-actions {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- z-index: 10;
- white-space: nowrap;
- opacity: 0;
- transition: all 0.3s;
-
- .@{iconfont-css-prefix}-eye-o,
- .@{iconfont-css-prefix}-delete {
- z-index: 10;
- transition: all 0.3s;
- cursor: pointer;
- font-size: 16px;
- width: 16px;
- color: @text-color-dark;
- margin: 0 4px;
- &:hover {
- color: #fff;
- }
- }
- }
-
- .@{upload-item}-info:hover + .@{upload-item}-actions,
- .@{upload-item}-actions:hover {
- opacity: 1;
- }
-
- .@{upload-item}-thumbnail,
- .@{upload-item}-thumbnail img {
- display: block;
- width: 100%;
- height: 100%;
- position: static;
- }
-
- .@{upload-item}-name {
- margin: 8px 0 0;
- padding: 0;
- text-align: center;
- line-height: @line-height-base;
- display: none;
- }
-
- .anticon-picture + .@{upload-item}-name {
- display: block;
- }
-
- .@{upload-item}-uploading {
- &.@{upload-item} {
- background-color: @background-color-light;
- }
-
- .@{upload-item}-info {
- height: auto;
- &:before,
- .@{iconfont-css-prefix}-eye-o,
- .@{iconfont-css-prefix}-delete {
- display: none;
- }
- }
-
- &-text {
- margin-top: 18px;
- color: @text-color-secondary;
- }
- }
-
- .@{upload-item}-progress {
- padding-left: 0;
- bottom: 32px;
- }
- }
-
- .@{upload-prefix-cls}-success-icon {
- color: @success-color;
- font-weight: bold;
- }
-
- .@{upload-prefix-cls}-animate-enter,
- .@{upload-prefix-cls}-animate-leave,
- .@{upload-prefix-cls}-animate-inline-enter,
- .@{upload-prefix-cls}-animate-inline-leave {
- animation-duration: 0.3s;
- animation-fill-mode: @ease-in-out-circ;
- }
-
- .@{upload-prefix-cls}-animate-enter {
- animation-name: uploadAnimateIn;
- }
-
- .@{upload-prefix-cls}-animate-leave {
- animation-name: uploadAnimateOut;
- }
-
- .@{upload-prefix-cls}-animate-inline-enter {
- animation-name: uploadAnimateInlineIn;
- }
-
- .@{upload-prefix-cls}-animate-inline-leave {
- animation-name: uploadAnimateInlineOut;
- }
-}
-
-@keyframes uploadAnimateIn {
- from {
- height: 0;
- margin: 0;
- opacity: 0;
- padding: 0;
- }
-}
-
-@keyframes uploadAnimateOut {
- to {
- height: 0;
- margin: 0;
- padding: 0;
- opacity: 0;
- }
-}
-
-@keyframes uploadAnimateInlineIn {
- from {
- width: 0;
- height: 0;
- margin: 0;
- opacity: 0;
- padding: 0;
- }
-}
-
-@keyframes uploadAnimateInlineOut {
- to {
- width: 0;
- height: 0;
- margin: 0;
- padding: 0;
- opacity: 0;
- }
-}
-
-@input-prefix-cls: ~'@{ant-prefix}-input';
-@select-prefix-cls: ~'@{ant-prefix}-select';
-@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
-
-.@{autocomplete-prefix-cls} {
- .reset-component;
-
- &.@{select-prefix-cls} {
- .@{select-prefix-cls} {
- &-selection {
- border: 0;
- box-shadow: none;
- &__rendered {
- margin-left: 0;
- margin-right: 0;
- height: 100%;
- line-height: @input-height-base;
- }
- &__placeholder {
- margin-left: (@input-padding-horizontal-base + 1px);
- margin-right: (@input-padding-horizontal-base + 1px);
- }
-
- &--single {
- height: auto;
- }
- }
- }
-
- // Fix https://github.com/ant-design/ant-design/issues/7800
- .@{select-prefix-cls}-search--inline {
- position: static;
- float: left;
- }
-
- &-allow-clear {
- .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
- margin-right: 0 !important;
- }
- }
-
- .@{input-prefix-cls} {
- background: transparent;
- border-width: @border-width-base;
- line-height: @line-height-base;
- height: @input-height-base;
- &:focus,
- &:hover {
- .hover;
- }
- &[disabled] {
- .disabled;
- }
- }
-
- &-lg {
- .@{select-prefix-cls}-selection__rendered {
- line-height: @input-height-lg;
- }
- .@{input-prefix-cls} {
- padding-top: @input-padding-vertical-lg;
- padding-bottom: @input-padding-vertical-lg;
- height: @input-height-lg;
- }
- }
-
- &-sm {
- .@{select-prefix-cls}-selection__rendered {
- line-height: @input-height-sm;
- }
- .@{input-prefix-cls} {
- padding-top: @input-padding-vertical-sm;
- padding-bottom: @input-padding-vertical-sm;
- height: @input-height-sm;
- }
- }
- }
-}
-
-@tree-prefix-cls: ~'@{ant-prefix}-tree';
-@tree-select-prefix-cls: ~'@{ant-prefix}-select';
-
-.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
- .@{tree-prefix-cls}-switcher-icon,
- .@{tree-select-prefix-cls}-switcher-icon {
- .iconfont-size-under-12px(10px);
- display: inline-block;
- font-weight: bold;
- svg {
- transition: transform 0.3s;
- }
- }
-}
-
-.antTreeShowLineIcon(@type) {
- .@{tree-prefix-cls}-switcher-icon,
- .@{tree-select-prefix-cls}-switcher-icon {
- font-size: 12px;
- display: inline-block;
- font-weight: normal;
- svg {
- transition: transform 0.3s;
- }
- }
-}
-
-@tree-prefix-cls: ~'@{ant-prefix}-tree';
-
-.@{tree-prefix-cls} {
- &.@{tree-prefix-cls}-directory {
- position: relative;
-
- // Stretch selector width
- > li,
- .@{tree-prefix-cls}-child-tree > li {
- span {
- &.@{tree-prefix-cls}-switcher {
- position: relative;
- z-index: 1;
-
- &.@{tree-prefix-cls}-switcher-noop {
- pointer-events: none;
- }
- }
-
- &.@{tree-prefix-cls}-checkbox {
- position: relative;
- z-index: 1;
- }
-
- &.@{tree-prefix-cls}-node-content-wrapper {
- user-select: none;
- border-radius: 0;
-
- &:hover {
- background: transparent;
-
- &:before {
- background: @item-hover-bg;
- }
- }
-
- &.@{tree-prefix-cls}-node-selected {
- color: @tree-directory-selected-color;
- background: transparent;
- }
-
- &:before {
- content: '';
- position: absolute;
- left: 0;
- right: 0;
- height: @tree-title-height;
- transition: all 0.3s;
- }
-
- > span {
- position: relative;
- z-index: 1;
- }
- }
- }
-
- &.@{tree-prefix-cls}-treenode-selected {
- > span {
- &.@{tree-prefix-cls}-switcher {
- color: @tree-directory-selected-color;
- }
-
- &.@{tree-prefix-cls}-checkbox {
- .@{tree-prefix-cls}-checkbox-inner {
- border-color: @primary-color;
- }
-
- &.@{tree-prefix-cls}-checkbox-checked {
- &:after {
- border-color: @checkbox-check-color;
- }
-
- .@{tree-prefix-cls}-checkbox-inner {
- background: @checkbox-check-color;
-
- &:after {
- border-color: @primary-color;
- }
- }
- }
- }
-
- &.@{tree-prefix-cls}-node-content-wrapper {
- &:before {
- background: @tree-directory-selected-bg;
- }
- }
- }
- }
- }
- }
-}
-
-@tree-prefix-cls: ~'@{ant-prefix}-tree';
-@tree-showline-icon-color: @text-color-secondary;
-
-.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
-
-.@{tree-prefix-cls} {
- .reset-component;
- margin: 0;
- padding: 0;
-
- ol,
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
-
- li {
- padding: 4px 0;
- margin: 0;
- list-style: none;
- white-space: nowrap;
- outline: 0;
- span[draggable],
- span[draggable='true'] {
- user-select: none;
- border-top: 2px transparent solid;
- border-bottom: 2px transparent solid;
- /* Required to make elements draggable in old WebKit */
- -khtml-user-drag: element;
- -webkit-user-drag: element;
-
- line-height: @tree-title-height - 4px;
- }
- &.drag-over {
- > span[draggable] {
- background-color: @primary-color;
- color: white;
- opacity: 0.8;
- }
- }
- &.drag-over-gap-top {
- > span[draggable] {
- border-top-color: @primary-color;
- }
- }
- &.drag-over-gap-bottom {
- > span[draggable] {
- border-bottom-color: @primary-color;
- }
- }
- &.filter-node {
- > span {
- color: @highlight-color !important;
- font-weight: 500 !important;
- }
- }
-
- // When node is loading
- &.@{tree-prefix-cls}-treenode-loading {
- span {
- &.@{tree-prefix-cls}-switcher {
- &.@{tree-prefix-cls}-switcher_open,
- &.@{tree-prefix-cls}-switcher_close {
- .@{tree-prefix-cls}-switcher-loading-icon {
- display: inline-block;
- position: absolute;
- left: 0;
- width: 24px;
- height: 24px;
- color: @primary-color;
- transform: none;
- font-size: 14px;
- svg {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- }
- }
-
- :root &:after {
- opacity: 0;
- }
- }
- }
- }
- }
-
- ul {
- margin: 0;
- padding: 0 0 0 @tree-child-padding;
- }
- .@{tree-prefix-cls}-node-content-wrapper {
- display: inline-block;
- padding: 0 5px;
- border-radius: @border-radius-sm;
- margin: 0;
- cursor: pointer;
- text-decoration: none;
- vertical-align: top;
- color: @text-color;
- transition: all 0.3s;
- height: @tree-title-height;
- line-height: @tree-title-height;
- &:hover {
- background-color: @item-hover-bg;
- }
- &.@{tree-prefix-cls}-node-selected {
- background-color: @primary-2;
- }
- }
- span {
- &.@{tree-prefix-cls}-checkbox {
- margin: 4px 4px 0 2px;
- }
- &.@{tree-prefix-cls}-switcher,
- &.@{tree-prefix-cls}-iconEle {
- margin: 0;
- width: 24px;
- height: 24px;
- line-height: @tree-title-height;
- display: inline-block;
- vertical-align: top;
- border: 0 none;
- cursor: pointer;
- outline: none;
- text-align: center;
- }
-
- &.@{tree-prefix-cls}-switcher {
- position: relative;
-
- &.@{tree-prefix-cls}-switcher-noop {
- cursor: default;
- }
- &.@{tree-prefix-cls}-switcher_open {
- .antTreeSwitcherIcon();
- }
- &.@{tree-prefix-cls}-switcher_close {
- .antTreeSwitcherIcon();
- .@{tree-prefix-cls}-switcher-icon {
- svg {
- transform: rotate(-90deg);
- }
- }
- }
- }
- }
- &:last-child > span {
- &.@{tree-prefix-cls}-switcher,
- &.@{tree-prefix-cls}-iconEle {
- &:before {
- display: none;
- }
- }
- }
- }
-
- > li {
- &:first-child {
- padding-top: 7px;
- }
- &:last-child {
- padding-bottom: 7px;
- }
- }
- &-child-tree {
- display: none;
- &-open {
- display: block;
- }
- }
- li&-treenode-disabled {
- > span:not(.@{tree-prefix-cls}-switcher),
- > .@{tree-prefix-cls}-node-content-wrapper,
- > .@{tree-prefix-cls}-node-content-wrapper span {
- color: @disabled-color;
- cursor: not-allowed;
- }
- > .@{tree-prefix-cls}-node-content-wrapper:hover {
- background: transparent;
- }
- }
- &-icon__open {
- margin-right: 2px;
- vertical-align: top;
- }
- &-icon__close {
- margin-right: 2px;
- vertical-align: top;
- }
- // Tree with line
- &&-show-line {
- li {
- position: relative;
- span {
- &.@{tree-prefix-cls}-switcher {
- background: @component-background;
- color: @tree-showline-icon-color;
- &.@{tree-prefix-cls}-switcher-noop {
- .antTreeShowLineIcon('tree-doc-icon');
- }
- &.@{tree-prefix-cls}-switcher_open {
- .antTreeShowLineIcon('tree-showline-open-icon');
- }
- &.@{tree-prefix-cls}-switcher_close {
- .antTreeShowLineIcon('tree-showline-close-icon');
- }
- }
- }
- }
- li:not(:last-child):before {
- content: ' ';
- width: 1px;
- border-left: 1px solid @border-color-base;
- height: 100%;
- position: absolute;
- left: 12px;
- margin: 22px 0;
- }
- }
-
- &.@{tree-prefix-cls}-icon-hide {
- .@{tree-prefix-cls}-treenode-loading {
- .@{tree-prefix-cls}-iconEle {
- display: none;
- }
- }
- }
-}
-
-@calendar-prefix-cls: ~'@{ant-prefix}-calendar';
-@calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker';
-
-.@{calendar-prefix-cls}-picker-container {
- .reset-component;
- font-family: @font-family;
- position: absolute;
- z-index: @zindex-picker;
-
- &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
- &.slide-up-enter.slide-up-enter-active&-placement-topRight,
- &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-topRight {
- animation-name: antSlideDownIn;
- }
-
- &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
- &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
- &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
- &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
- animation-name: antSlideUpIn;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
- &.slide-up-leave.slide-up-leave-active&-placement-topRight {
- animation-name: antSlideDownOut;
- }
-
- &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
- &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
- animation-name: antSlideUpOut;
- }
-}
-
-.@{calendar-prefix-cls}-picker {
- .reset-component;
- position: relative;
- display: inline-block;
- outline: none;
- transition: opacity 0.3s;
-
- &-input {
- outline: none;
- }
-
- &-input.@{ant-prefix}-input-sm {
- padding-top: 0;
- padding-bottom: 0;
- }
-
- &:hover &-input:not(.@{ant-prefix}-input-disabled) {
- border-color: @primary-color;
- }
-
- &:focus &-input:not(.@{ant-prefix}-input-disabled) {
- .active();
- }
-
- &-clear,
- &-icon {
- position: absolute;
- width: 14px;
- height: 14px;
- right: @control-padding-horizontal;
- top: 50%;
- margin-top: -7px;
- line-height: 14px;
- font-size: @font-size-sm;
- transition: all 0.3s;
- user-select: none;
- z-index: 1;
- }
-
- &-clear {
- opacity: 0;
- z-index: 2;
- font-size: @font-size-base;
- color: @disabled-color;
- background: @input-bg;
- pointer-events: none;
- cursor: pointer;
- &:hover {
- color: @text-color-secondary;
- }
- }
-
- &:hover &-clear {
- opacity: 1;
- pointer-events: auto;
- }
-
- &-icon {
- font-family: 'anticon';
- font-size: @font-size-base;
- color: @disabled-color;
- display: inline-block;
- line-height: 1;
- }
-
- &-small &-clear,
- &-small &-icon {
- right: @control-padding-horizontal-sm;
- }
-}
-
-.calendarPanelHeader(@calendar-prefix-cls) {
- height: 40px;
- line-height: 40px;
- text-align: center;
- user-select: none;
- border-bottom: @border-width-base @border-style-base @border-color-split;
-
- a:hover {
- color: @link-hover-color;
- }
-
- .@{calendar-prefix-cls}-century-select,
- .@{calendar-prefix-cls}-decade-select,
- .@{calendar-prefix-cls}-year-select,
- .@{calendar-prefix-cls}-month-select {
- padding: 0 2px;
- font-weight: 500;
- display: inline-block;
- color: @heading-color;
- line-height: 40px;
- }
-
- .@{calendar-prefix-cls}-century-select-arrow,
- .@{calendar-prefix-cls}-decade-select-arrow,
- .@{calendar-prefix-cls}-year-select-arrow,
- .@{calendar-prefix-cls}-month-select-arrow {
- display: none;
- }
-
- .@{calendar-prefix-cls}-prev-century-btn,
- .@{calendar-prefix-cls}-next-century-btn,
- .@{calendar-prefix-cls}-prev-decade-btn,
- .@{calendar-prefix-cls}-next-decade-btn,
- .@{calendar-prefix-cls}-prev-month-btn,
- .@{calendar-prefix-cls}-next-month-btn,
- .@{calendar-prefix-cls}-prev-year-btn,
- .@{calendar-prefix-cls}-next-year-btn {
- position: absolute;
- top: 0;
- color: @text-color-secondary;
- font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
- padding: 0 5px;
- font-size: 16px;
- display: inline-block;
- line-height: 40px;
- }
-
- .@{calendar-prefix-cls}-prev-century-btn,
- .@{calendar-prefix-cls}-prev-decade-btn,
- .@{calendar-prefix-cls}-prev-year-btn {
- left: 7px;
-
- &:after {
- content: '«';
- }
- }
-
- .@{calendar-prefix-cls}-next-century-btn,
- .@{calendar-prefix-cls}-next-decade-btn,
- .@{calendar-prefix-cls}-next-year-btn {
- right: 7px;
-
- &:after {
- content: '»';
- }
- }
-
- .@{calendar-prefix-cls}-prev-month-btn {
- left: 29px;
-
- &:after {
- content: '‹';
- }
- }
-
- .@{calendar-prefix-cls}-next-month-btn {
- right: 29px;
-
- &:after {
- content: '›';
- }
- }
-}
-
-.@{calendar-prefix-cls} {
- position: relative;
- outline: none;
- width: 280px;
- border: @border-width-base @border-style-base #fff;
- list-style: none;
- font-size: @font-size-base;
- text-align: left;
- background-color: @component-background;
- border-radius: @border-radius-base;
- box-shadow: @box-shadow-base;
- background-clip: padding-box;
- line-height: @line-height-base;
-
- &-input-wrap {
- height: 34px;
- padding: 6px @control-padding-horizontal - 2px;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
-
- &-input {
- border: 0;
- width: 100%;
- cursor: auto;
- outline: 0;
- height: 22px;
- color: @input-color;
- background: @input-bg;
- .placeholder;
- }
-
- &-week-number {
- width: 286px;
-
- &-cell {
- text-align: center;
- }
- }
-
- &-header {
- .calendarPanelHeader(@calendar-prefix-cls);
- }
-
- &-body {
- padding: 8px 12px;
- }
-
- table {
- border-collapse: collapse;
- max-width: 100%;
- background-color: transparent;
- width: 100%;
- }
-
- table,
- th,
- td {
- border: 0;
- text-align: center;
- }
-
- &-calendar-table {
- border-spacing: 0;
- margin-bottom: 0;
- }
-
- &-column-header {
- line-height: 18px;
- width: 33px;
- padding: 6px 0;
- text-align: center;
- .@{calendar-prefix-cls}-column-header-inner {
- display: block;
- font-weight: normal;
- }
- }
-
- &-week-number-header {
- .@{calendar-prefix-cls}-column-header-inner {
- display: none;
- }
- }
-
- &-cell {
- padding: 3px 0;
- height: 30px;
- }
-
- &-date {
- display: block;
- margin: 0 auto;
- color: @text-color;
- border-radius: @border-radius-sm;
- width: 24px;
- height: 24px;
- line-height: 22px;
- border: @border-width-base @border-style-base transparent;
- padding: 0;
- background: transparent;
- text-align: center;
- transition: background 0.3s ease;
-
- &-panel {
- position: relative;
- }
-
- &:hover {
- background: @item-hover-bg;
- cursor: pointer;
- }
-
- &:active {
- color: #fff;
- background: @primary-5;
- }
- }
-
- &-today &-date {
- border-color: @primary-color;
- font-weight: bold;
- color: @primary-color;
- }
-
- &-last-month-cell &-date,
- &-next-month-btn-day &-date {
- color: @disabled-color;
- }
-
- &-selected-day &-date {
- background: tint(@primary-color, 80%);
- }
-
- &-selected-date,
- &-selected-start-date,
- &-selected-end-date {
- .@{calendar-prefix-cls}-date {
- background: @primary-color;
- color: #fff;
- border: @border-width-base @border-style-base transparent;
-
- &:hover {
- background: @primary-color;
- }
- }
- }
-
- &-disabled-cell &-date {
- cursor: not-allowed;
- color: #bcbcbc;
- background: @disabled-bg;
- border-radius: 0;
- width: auto;
- border: @border-width-base @border-style-base transparent;
-
- &:hover {
- background: @disabled-bg;
- }
- }
- &-disabled-cell&-today &-date {
- position: relative;
- padding-right: 5px;
- padding-left: 5px;
- &:before {
- content: ' ';
- position: absolute;
- top: -1px;
- left: 5px;
- width: 24px;
- height: 24px;
- border: @border-width-base @border-style-base #bcbcbc;
- border-radius: @border-radius-sm;
- }
- }
-
- &-disabled-cell-first-of-row &-date {
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
- }
-
- &-disabled-cell-last-of-row &-date {
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-
- &-footer {
- border-top: @border-width-base @border-style-base @border-color-split;
- line-height: 38px;
- padding: 0 12px;
- &:empty {
- border-top: 0;
- }
- &-btn {
- text-align: center;
- display: block;
- }
- &-extra {
- text-align: left;
- }
- }
-
- .@{calendar-prefix-cls}-today-btn,
- .@{calendar-prefix-cls}-clear-btn {
- display: inline-block;
- text-align: center;
- margin: 0 0 0 8px;
- &-disabled {
- color: @disabled-color;
- cursor: not-allowed;
- }
- &:only-child {
- margin: 0;
- }
- }
-
- .@{calendar-prefix-cls}-clear-btn {
- display: none;
- position: absolute;
- right: 5px;
- text-indent: -76px;
- overflow: hidden;
- width: 20px;
- height: 20px;
- text-align: center;
- line-height: 20px;
- top: 7px;
- margin: 0;
- }
-
- .@{calendar-prefix-cls}-clear-btn:after {
- font-size: @font-size-base;
- color: @disabled-color;
- display: inline-block;
- line-height: 1;
- width: 20px;
- text-indent: 43px;
- transition: color 0.3s ease;
- }
-
- .@{calendar-prefix-cls}-clear-btn:hover:after {
- color: @text-color-secondary;
- }
-
- .@{calendar-prefix-cls}-ok-btn {
- .btn;
- .btn-primary;
- .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
- line-height: @btn-height-sm - 2px;
-
- &-disabled {
- .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
- cursor: not-allowed;
- &:hover {
- .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
- }
- }
- }
-}
-
-@input-box-height: 34px;
-
-.@{calendar-prefix-cls}-range-picker-input {
- background-color: transparent;
- border: 0;
- height: 99%;
- outline: 0;
- width: 44%;
- text-align: center;
- .placeholder();
-
- &[disabled] {
- cursor: not-allowed;
- }
-}
-
-.@{calendar-prefix-cls}-range-picker-separator {
- color: @text-color-secondary;
- width: 10px;
- display: inline-block;
- height: 100%;
- vertical-align: top;
-}
-
-.@{calendar-prefix-cls}-range {
- width: 552px;
- overflow: hidden;
-
- .@{calendar-prefix-cls}-date-panel {
- &::after {
- content: '.';
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
- }
- &-part {
- width: 50%;
- position: relative;
- }
-
- &-left {
- float: left;
- .@{calendar-prefix-cls} {
- &-time-picker-inner {
- border-right: 1px solid @border-color-split;
- }
- }
- }
-
- &-right {
- float: right;
- .@{calendar-prefix-cls} {
- &-time-picker-inner {
- border-left: 1px solid @border-color-split;
- }
- }
- }
-
- &-middle {
- position: absolute;
- left: 50%;
- width: 20px;
- margin-left: -132px;
- text-align: center;
- height: @input-box-height;
- line-height: @input-box-height;
- color: @text-color-secondary;
- }
-
- &-right .@{calendar-prefix-cls}-date-input-wrap {
- margin-left: -118px;
- }
-
- &.@{calendar-prefix-cls}-time &-middle {
- margin-left: -12px;
- }
-
- &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
- margin-left: 0;
- }
-
- .@{calendar-prefix-cls}-input-wrap {
- position: relative;
- height: @input-box-height;
- }
-
- .@{calendar-prefix-cls}-input,
- .@{calendar-timepicker-prefix-cls}-input {
- .input;
- height: @input-height-sm;
- border: 0;
- box-shadow: none;
- padding-left: 0;
- padding-right: 0;
-
- &:focus {
- box-shadow: none;
- }
- }
-
- .@{calendar-timepicker-prefix-cls}-icon {
- display: none;
- }
-
- &.@{calendar-prefix-cls}-week-number {
- width: 574px;
-
- .@{calendar-prefix-cls}-range-part {
- width: 286px;
- }
- }
-
- .@{calendar-prefix-cls}-year-panel,
- .@{calendar-prefix-cls}-month-panel,
- .@{calendar-prefix-cls}-decade-panel {
- top: @input-box-height;
- }
- .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
- top: 0;
- }
- .@{calendar-prefix-cls}-decade-panel-table,
- .@{calendar-prefix-cls}-year-panel-table,
- .@{calendar-prefix-cls}-month-panel-table {
- height: 208px;
- }
-
- .@{calendar-prefix-cls}-in-range-cell {
- border-radius: 0;
- position: relative;
- > div {
- position: relative;
- z-index: 1;
- }
- &:before {
- content: '';
- display: block;
- background: @item-active-bg;
- border-radius: 0;
- border: 0;
- position: absolute;
- top: 4px;
- bottom: 4px;
- left: 0;
- right: 0;
- }
- }
-
- .@{calendar-prefix-cls}-footer-extra {
- float: left;
- }
-
- // `div` for selector specificity
- div&-quick-selector {
- text-align: left;
-
- > a {
- margin-right: 8px;
- }
- }
-
- .@{calendar-prefix-cls},
- .@{calendar-prefix-cls}-month-panel,
- .@{calendar-prefix-cls}-year-panel {
- &-header {
- border-bottom: 0;
- }
- &-body {
- border-top: @border-width-base @border-style-base @border-color-split;
- }
- }
-
- &.@{calendar-prefix-cls}-time {
- .@{calendar-timepicker-prefix-cls} {
- height: 207px;
- width: 100%;
- top: 68px;
- z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
- &-panel {
- height: 267px;
- margin-top: -34px;
- }
-
- &-inner {
- padding-top: 40px;
- height: 100%;
- background: none;
- }
-
- &-combobox {
- display: inline-block;
- height: 100%;
- background-color: @component-background;
- border-top: @border-width-base @border-style-base @border-color-split;
- }
- &-select {
- height: 100%;
- ul {
- max-height: 100%;
- }
- }
- }
- .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
- margin-right: 8px;
- }
- .@{calendar-prefix-cls}-today-btn {
- margin: 8px 12px;
- height: 22px;
- line-height: 22px;
- }
- }
-
- &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
- height: 233px;
- }
-}
-
-.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
- .@{calendar-prefix-cls}-body {
- border-top-color: transparent;
- }
-}
-
-.@{calendar-timepicker-prefix-cls} {
- position: absolute;
- width: 100%;
- top: 40px;
- background-color: @component-background;
-
- &-panel {
- z-index: @zindex-picker;
- position: absolute;
- width: 100%;
- }
-
- &-inner {
- display: inline-block;
- position: relative;
- outline: none;
- list-style: none;
- font-size: @font-size-base;
- text-align: left;
- background-color: @component-background;
- background-clip: padding-box;
- line-height: 1.5;
- overflow: hidden;
- width: 100%;
- }
- &-combobox {
- width: 100%;
- }
-
- &-column-1,
- &-column-1 &-select {
- width: 100%;
- }
- &-column-2 &-select {
- width: 50%;
- }
- &-column-3 &-select {
- width: 33.33%;
- }
- &-column-4 &-select {
- width: 25%;
- }
-
- &-input-wrap {
- display: none;
- }
-
- &-select {
- float: left;
- font-size: @font-size-base;
- border-right: @border-width-base @border-style-base @border-color-split;
- box-sizing: border-box;
- overflow: hidden;
- position: relative; // Fix chrome weird render bug
- height: 226px;
-
- &:hover {
- overflow-y: auto;
- }
-
- &:first-child {
- border-left: 0;
- margin-left: 0;
- }
-
- &:last-child {
- border-right: 0;
- }
-
- ul {
- list-style: none;
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- width: 100%;
- max-height: 206px;
- }
-
- li {
- padding-left: 32px;
- list-style: none;
- box-sizing: content-box;
- margin: 0;
- width: 100%;
- height: 24px;
- line-height: 24px;
- cursor: pointer;
- user-select: none;
- transition: background 0.3s ease;
- }
-
- li:last-child:after {
- content: '';
- height: 202px;
- display: block;
- }
-
- li:hover {
- background: @item-hover-bg;
- }
-
- li&-option-selected {
- background: @time-picker-selected-bg;
- font-weight: bold;
- }
-
- li&-option-disabled {
- color: @btn-disable-color;
- &:hover {
- background: transparent;
- cursor: not-allowed;
- }
- }
- }
-}
-
-.@{calendar-prefix-cls}-time {
- .@{calendar-prefix-cls}-day-select {
- padding: 0 2px;
- font-weight: 500;
- display: inline-block;
- color: @heading-color;
- line-height: 34px;
- }
-
- .@{calendar-prefix-cls}-footer {
- position: relative;
- height: auto;
-
- &-btn {
- text-align: right;
- }
-
- .@{calendar-prefix-cls}-today-btn {
- float: left;
- margin: 0;
- }
-
- .@{calendar-prefix-cls}-time-picker-btn {
- display: inline-block;
- margin-right: 8px;
-
- &-disabled {
- color: @disabled-color;
- }
- }
- }
-}
-
-.@{calendar-prefix-cls}-month-panel {
- position: absolute;
- top: 1px;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 10;
- border-radius: @border-radius-base;
- background: @component-background;
- outline: none;
-
- > div {
- // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
- height: 100%;
- }
-}
-
-.@{calendar-prefix-cls}-month-panel-hidden {
- display: none;
-}
-
-.@{calendar-prefix-cls}-month-panel-header {
- .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
-}
-
-.@{calendar-prefix-cls}-month-panel-body {
- height: ~'calc(100% - 40px)';
-}
-
-.@{calendar-prefix-cls}-month-panel-table {
- table-layout: fixed;
- width: 100%;
- height: 100%;
- border-collapse: separate;
-}
-
-.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
- background: @primary-color;
- color: #fff;
-
- &:hover {
- background: @primary-color;
- color: #fff;
- }
-}
-
-.@{calendar-prefix-cls}-month-panel-cell {
- text-align: center;
-
- &-disabled .@{calendar-prefix-cls}-month-panel-month {
- &,
- &:hover {
- cursor: not-allowed;
- color: #bcbcbc;
- background: @disabled-bg;
- }
- }
-}
-
-.@{calendar-prefix-cls}-month-panel-month {
- display: inline-block;
- margin: 0 auto;
- color: @text-color;
- background: transparent;
- text-align: center;
- height: 24px;
- line-height: 24px;
- padding: 0 8px;
- border-radius: @border-radius-sm;
- transition: background 0.3s ease;
-
- &:hover {
- background: @item-hover-bg;
- cursor: pointer;
- }
-}
-
-.@{calendar-prefix-cls}-year-panel {
- position: absolute;
- top: 1px;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 10;
- border-radius: @border-radius-base;
- background: @component-background;
- outline: none;
-
- > div {
- // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
- height: 100%;
- }
-}
-
-.@{calendar-prefix-cls}-year-panel-hidden {
- display: none;
-}
-
-.@{calendar-prefix-cls}-year-panel-header {
- .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
-}
-
-.@{calendar-prefix-cls}-year-panel-body {
- height: ~'calc(100% - 40px)';
-}
-
-.@{calendar-prefix-cls}-year-panel-table {
- table-layout: fixed;
- width: 100%;
- height: 100%;
- border-collapse: separate;
-}
-
-.@{calendar-prefix-cls}-year-panel-cell {
- text-align: center;
-}
-
-.@{calendar-prefix-cls}-year-panel-year {
- display: inline-block;
- margin: 0 auto;
- color: @text-color;
- background: transparent;
- text-align: center;
- height: 24px;
- line-height: 24px;
- padding: 0 8px;
- border-radius: @border-radius-sm;
- transition: background 0.3s ease;
-
- &:hover {
- background: @item-hover-bg;
- cursor: pointer;
- }
-}
-
-.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
- background: @primary-color;
- color: #fff;
-
- &:hover {
- background: @primary-color;
- color: #fff;
- }
-}
-
-.@{calendar-prefix-cls}-year-panel-last-decade-cell,
-.@{calendar-prefix-cls}-year-panel-next-decade-cell {
- .@{calendar-prefix-cls}-year-panel-year {
- user-select: none;
- color: @disabled-color;
- }
-}
-
-.@{calendar-prefix-cls}-decade-panel {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 10;
- background: @component-background;
- border-radius: @border-radius-base;
- outline: none;
-}
-
-.@{calendar-prefix-cls}-decade-panel-hidden {
- display: none;
-}
-
-.@{calendar-prefix-cls}-decade-panel-header {
- .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
-}
-
-.@{calendar-prefix-cls}-decade-panel-body {
- height: ~'calc(100% - 40px)';
-}
-
-.@{calendar-prefix-cls}-decade-panel-table {
- table-layout: fixed;
- width: 100%;
- height: 100%;
- border-collapse: separate;
-}
-
-.@{calendar-prefix-cls}-decade-panel-cell {
- text-align: center;
- white-space: nowrap;
-}
-
-.@{calendar-prefix-cls}-decade-panel-decade {
- display: inline-block;
- margin: 0 auto;
- color: @text-color;
- background: transparent;
- text-align: center;
- height: 24px;
- line-height: 24px;
- padding: 0 6px;
- border-radius: @border-radius-sm;
- transition: background 0.3s ease;
-
- &:hover {
- background: @item-hover-bg;
- cursor: pointer;
- }
-}
-
-.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
- background: @primary-color;
- color: #fff;
-
- &:hover {
- background: @primary-color;
- color: #fff;
- }
-}
-
-.@{calendar-prefix-cls}-decade-panel-last-century-cell,
-.@{calendar-prefix-cls}-decade-panel-next-century-cell {
- .@{calendar-prefix-cls}-decade-panel-decade {
- user-select: none;
- color: @disabled-color;
- }
-}
-
-.@{calendar-prefix-cls}-month {
- .@{calendar-prefix-cls}-month-header-wrap {
- position: relative;
- height: 288px;
- }
- .@{calendar-prefix-cls}-month-panel,
- .@{calendar-prefix-cls}-year-panel {
- top: 0;
- height: 100%;
- }
-}
-
-.@{calendar-prefix-cls}-week-number {
- &-cell {
- opacity: 0.5;
- }
- .@{calendar-prefix-cls}-body tr {
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- background: @primary-1;
- }
- &.@{calendar-prefix-cls}-active-week {
- background: @primary-2;
- font-weight: bold;
- }
- .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
- .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
- background: transparent;
- color: @text-color;
- }
- }
-}
-
-@dawer-prefix-cls: ~'@{ant-prefix}-drawer';
-
-.@{dawer-prefix-cls} {
- position: fixed;
- top: 0;
- width: 0%;
- height: 100%;
- z-index: @zindex-modal;
- > * {
- transition: transform @animation-duration-slow @ease-base-in;
- }
-
- &-content-wrapper {
- position: fixed;
- }
- .@{dawer-prefix-cls}-content {
- width: 100%;
- height: 100%;
- }
- &-left,
- &-right {
- width: 0%;
- height: 100%;
- .@{dawer-prefix-cls}-content-wrapper {
- height: 100%;
- }
- &.@{dawer-prefix-cls}-open {
- width: 100%;
- }
- &.@{dawer-prefix-cls}-open.no-mask {
- width: 0%;
- }
- }
- &-left {
- &.@{dawer-prefix-cls}-open {
- .@{dawer-prefix-cls}-content-wrapper {
- box-shadow: @shadow-1-right;
- }
- }
- }
- &-right {
- .@{dawer-prefix-cls} {
- &-content-wrapper {
- right: 0;
- }
- }
- &.@{dawer-prefix-cls}-open {
- .@{dawer-prefix-cls}-content-wrapper {
- box-shadow: @shadow-1-left;
- }
- }
- }
-
- &-top,
- &-bottom {
- width: 100%;
- height: 0%;
- .@{dawer-prefix-cls}-content-wrapper {
- width: 100%;
- }
- &.@{dawer-prefix-cls}-open {
- height: 100%;
- }
- &.@{dawer-prefix-cls}-open.no-mask {
- height: 0%;
- }
- }
- &-top {
- &.@{dawer-prefix-cls}-open {
- .@{dawer-prefix-cls}-content-wrapper {
- box-shadow: @shadow-1-down;
- }
- }
- }
- &-bottom {
- .@{dawer-prefix-cls} {
- &-content-wrapper {
- bottom: 0;
- }
- }
- &.@{dawer-prefix-cls}-open {
- .@{dawer-prefix-cls}-content-wrapper {
- box-shadow: @shadow-1-up;
- }
- }
- }
- &.@{dawer-prefix-cls}-open {
- .@{dawer-prefix-cls} {
- &-mask {
- opacity: 0.3;
- height: 100%;
- animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
- transition: none;
- }
- }
- }
-
- &-title {
- margin: 0;
- font-size: @font-size-lg;
- line-height: 22px;
- font-weight: 500;
- color: @heading-color;
- }
-
- &-content {
- position: relative;
- background-color: @component-background;
- border: 0;
- background-clip: padding-box;
- z-index: 1;
- }
-
- &-close {
- cursor: pointer;
- border: 0;
- background: transparent;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 10;
- font-weight: 700;
- line-height: 1;
- text-decoration: none;
- transition: color @animation-duration-slow;
- color: @text-color-secondary;
- outline: 0;
- padding: 0;
-
- &-x {
- display: block;
- font-style: normal;
- text-align: center;
- text-transform: none;
- text-rendering: auto;
- width: 56px;
- height: 56px;
- line-height: 56px;
- font-size: @font-size-lg;
- }
-
- &:focus,
- &:hover {
- color: #444;
- text-decoration: none;
- }
- }
-
- &-header {
- padding: 16px 24px;
- border-radius: @border-radius-base @border-radius-base 0 0;
- background: @component-background;
- color: @text-color;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
-
- &-body {
- padding: 24px;
- font-size: @font-size-base;
- line-height: @line-height-base;
- word-wrap: break-word;
- }
-
- &-mask {
- position: fixed;
- width: 100%;
- height: 0;
- opacity: 0;
- background-color: @modal-mask-bg;
- filter: ~'alpha(opacity=50)';
- transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
- }
- &-open {
- transition: transform @animation-duration-slow @ease-base-out;
- &-content {
- box-shadow: @shadow-2;
- }
- }
-}
-
-@keyframes antdDrawerFadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 0.3;
- }
-}
-
-@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
-@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
-@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
-@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
-
-@skeleton-to-color: shade(@skeleton-color, 5%);
-
-.@{skeleton-prefix-cls} {
- display: table;
- width: 100%;
-
- &-header {
- display: table-cell;
- vertical-align: top;
- padding-right: 16px;
-
- // Avatar
- .@{skeleton-avatar-prefix-cls} {
- display: inline-block;
- vertical-align: top;
- background: @skeleton-color;
-
- .avatar-size(@avatar-size-base);
-
- &-lg {
- .avatar-size(@avatar-size-lg);
- }
-
- &-sm {
- .avatar-size(@avatar-size-sm);
- }
- }
- }
-
- &-content {
- display: table-cell;
- vertical-align: top;
- width: 100%;
-
- // Title
- .@{skeleton-title-prefix-cls} {
- margin-top: 16px;
- height: 16px;
- width: 100%;
- background: @skeleton-color;
-
- + .@{skeleton-paragraph-prefix-cls} {
- margin-top: 24px;
- }
- }
-
- // paragraph
- .@{skeleton-paragraph-prefix-cls} {
- > li {
- height: 16px;
- background: @skeleton-color;
- list-style: none;
- width: 100%;
-
- &:last-child:not(:first-child):not(:nth-child(2)) {
- width: 61%;
- }
-
- + li {
- margin-top: 16px;
- }
- }
- }
- }
-
- &-with-avatar &-content {
- // Title
- .@{skeleton-title-prefix-cls} {
- margin-top: 12px;
-
- + .@{skeleton-paragraph-prefix-cls} {
- margin-top: 28px;
- }
- }
- }
-
- // With active animation
- &.@{skeleton-prefix-cls}-active {
- & .@{skeleton-prefix-cls}-content {
- .@{skeleton-title-prefix-cls},
- .@{skeleton-paragraph-prefix-cls} > li {
- .skeleton-color();
- }
- }
-
- .@{skeleton-avatar-prefix-cls} {
- .skeleton-color();
- }
- }
-}
-
-.avatar-size(@size) {
- width: @size;
- height: @size;
- line-height: @size;
-
- &.@{skeleton-avatar-prefix-cls}-circle {
- border-radius: 50%;
- }
-}
-
-.skeleton-color() {
- background: linear-gradient(
- 90deg,
- @skeleton-color 25%,
- @skeleton-to-color 37%,
- @skeleton-color 63%
- );
- animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
- background-size: 400% 100%;
-}
-
-@keyframes ~"@{skeleton-prefix-cls}-loading" {
- 0% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0 50%;
- }
-}
-
-// app
-.freakMixin() {
- @functions: ~`(function() {
- function toColorList(list) {
- list = list.slice(1, list.length - 1).split(',');
- var ret = [];
- for (var i = 0, c = list.length; i < c; i++) {
- ret.push(list[i].trim().split(' '));
- }
- return ret;
- }
-
- var catchColors;
- function _initColor(list) {
- if (!catchColors) catchColors = toColorList(list);
- }
-
- this.getColor = function(list, name, position) {
- _initColor(list);
- var ret = '';
- for (var i = 0, c = catchColors.length; i < c; i++) {
- if (catchColors[i][0] === name) {
- ret = catchColors[i][position - 1];
- break;
- }
- }
- return ret;
- }
- })()`;
-}
-.freakMixin();
-// Color contrast
-.color-yiq(@color) {
-
- .yiq-mixin (@v) when (@v >= 150) {
- color: #111;
- }
- .yiq-mixin (@v) when (default()) {
- color: #fff;
- }
-
- @r: red(@color);
- @g: green(@color);
- @b: blue(@color);
-
- @yiq: ((@r * 299) + (@g * 587) + (@b * 114)) / 1000;
- .yiq-mixin(@yiq);
-}
-
-// Basic loop
-.for(@adList, @adCode) {
- & {
- .loop(@adI:1) when (@adI =< length(@adList)) {
- @adIndex: @adI - 1;
- @adItem: extract(@adList, @adI);
-
- @adCode();
-
- .loop(@adI + 1);
- }
- .loop();
- }
-}
-
-.for-each(@adList, @adCode) {
- & {
- .loop(@adI:1) when (@adI =< length(@adList)) {
- @adIndex: @adI - 1;
- @adItem: extract(@adList, @adI);
- @adKey: extract(@adItem, 1);
- @adValue: extract(@adItem, 2);
-
- @adCode();
-
- .loop(@adI + 1);
- }
- .loop();
- }
-}
-
-// Angular
-// router ant
-@router-animation-name: antFadeIn;
-@router-animation-duration: 1s;
-
-// https://github.com/angular/angular/issues/9845
-// 一种路由切换动画的简单实现
-app-layout router-outlet + * {
- display: block;
- animation-duration: @router-animation-duration;
- // animation-fill-mode: both;
- animation-name: @router-animation-name; // fadeIn;
-}
-
-.preserve-white-spaces-mixin(@enabled) when(@enabled=true) {
-
- sf + st {
- margin-top: @preserve-sf-and-st-spaces;
- }
-
- // button + button
- .@{ant-prefix}-btn + .@{ant-prefix}-btn,
- // button + popconfirm
- .@{ant-prefix}-btn + nz-popconfirm,
- nz-popconfirm + .@{ant-prefix}-btn,
- // popconfirm + popconfirm
- nz-popconfirm + nz-popconfirm,
- // button + button group
- .@{ant-prefix}-btn + nz-button-group,
- nz-button-group + .@{ant-prefix}-btn,
- // dropdown + button
- .@{ant-prefix}-btn + nz-dropdown,
- nz-dropdown +.@{ant-prefix}-btn,
- // popconfirm + button group
- nz-popconfirm + nz-button-group,
- nz-button-group + nz-popconfirm {
- margin-left: @preserve-buttons-spaces;
- }
- .@{ant-prefix}-btn-group {
- .@{ant-prefix}-btn + .@{ant-prefix}-btn {
- margin-left: -1px;
- }
- }
-}
-
-.preserve-white-spaces-mixin(@preserve-white-spaces-enabled);
-
-@form-state-visual-feedback-enabled: false;
-
-.form-state-visual-feedback-mixin(@enabled) when(@enabled = true) {
- .ng-invalid {
- &:focus {
- box-shadow: 0 0 @outline-blur-size @outline-width fade-out(@error-color, .8);
- }
- &,
- &:hover {
- border-color: @error-color;
- }
- }
-}
-.form-state-visual-feedback-mixin(@form-state-visual-feedback-enabled);
-
-// Antd patch
-// 修复点击后，鼠标的移动会倒置目标出现下划线
-a:focus {
- text-decoration: none;
-}
-
-.@{ant-prefix}-card {
- margin-bottom: @md;
-}
-
-// Body no padding
-.@{ant-prefix}-card__body-nopadding {
- .@{ant-prefix}-card-body {
- padding: 0 !important;
- }
-}
-
-@media (min-width: @drawer-sm) {
- .drawer-sm {
- max-width: @drawer-sm;
- width: auto !important;
- }
-}
-@media (max-width: @drawer-sm - 1) {
- .drawer-sm {
- width: 100% !important;
- }
-}
-
-@media (min-width: @drawer-md) {
- .drawer-md {
- max-width: @drawer-md;
- width: auto !important;
- }
-}
-@media (max-width: @drawer-md - 1) {
- .drawer-md {
- width: 100% !important;
- }
-}
-
-@media (min-width: @drawer-lg) {
- .drawer-lg {
- max-width: @drawer-lg;
- width: auto !important;
- }
-}
-@media (max-width: @drawer-lg - 1) {
- .drawer-lg {
- width: 100% !important;
- }
-}
-
-@media (min-width: @drawer-xl) {
- .drawer-xl {
- max-width: @drawer-xl;
- width: auto !important;
- }
-}
-@media (max-width: @drawer-xl - 1) {
- .drawer-xl {
- width: 100% !important;
- }
-}
-
-.drawer {
- &-footer {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- border-top: @border-width-base @border-style-base @border-color-split;
- padding: 10px 16px;
- text-align: right;
- border-radius: 0 0 @border-radius-base @border-radius-base;
- background: #fff;
- }
-}
-
-.@{ant-prefix}-form-item-label {
- em {
- color: @grey-6;
- }
-}
-
-.@{ant-prefix}-form-item-children {
- em {
- margin-left: @layout-gutter;
- }
-}
-
-// Small screen / tablet
-@media (min-width: @screen-sm) {
- .modal-sm .@{ant-prefix}-modal {
- max-width: @modal-sm;
- width: auto !important;
- }
-}
-
-// Medium screen / desktop
-@media (min-width: @screen-md) {
- .modal-md .@{ant-prefix}-modal {
- max-width: @modal-md;
- width: auto !important;
- }
-}
-
-// Large screen / wide desktop
-@media (min-width: @screen-lg) {
- .modal-lg .@{ant-prefix}-modal {
- max-width: @modal-lg;
- width: auto !important;
- }
-}
-
-// Extra large screen / large descktop
-@media (min-width: @screen-xxl) {
- .modal-xl .@{ant-prefix}-modal {
- max-width: @modal-xl;
- width: auto !important;
- }
-}
-
-// 自定义模态框时非常有用，主要运用于查看、编辑页
-.modal {
- &-header {
- padding: 16px 24px;
- margin: -24px -24px 24px -24px;
- border-radius: @border-radius-base @border-radius-base 0 0;
- background: @component-background;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- display: flex;
- justify-content: space-between;
- }
- &-title {
- font-size: @font-size-lg;
- font-weight: 500;
- line-height: 22px;
- color: @heading-color;
- small {
- color: @muted-color;
- font-size: 12px;
- margin-left: @layout-gutter;
- }
- }
- &-spin {
- display: block;
- min-height: 150px;
- line-height: 150px;
- text-align: center;
- }
- &-footer {
- border-top: @border-width-base @border-style-base @border-color-split;
- padding: 10px 16px;
- text-align: right;
- border-radius: 0 0 @border-radius-base @border-radius-base;
- margin: 24px -24px -24px -24px;
- }
- &-include-tabs {
- nz-tabset {
- margin-top: -16px;
- }
- }
- &-body-nopadding {
- .@{ant-prefix}-modal-body {
- padding: 0 !important;
- }
- }
-}
-
-.@{ant-prefix}-table {
- td {
- > img,
- .img {
- border-radius: @nz-table-img-radius;
- vertical-align: middle;
- margin-right: @nz-table-img-margin-right;
- max-height: @nz-table-img-max-height;
- max-width: @nz-table-img-max-width;
- }
- }
-}
-
-.@{ant-prefix}-table-rep {
- &__title {
- display: none;
- }
- &__hide-header-footer {
- .@{ant-prefix}-table-title,
- .@{ant-prefix}-table-footer {
- display: none;
- }
- }
-}
-
-@media screen and (max-width: @nz-table-rep-max-width) {
- .@{ant-prefix}-table {
- &-rep {
- &__title {
- display: inline-block;
- width: @nz-table-rep-column-name-width;
- text-align: @nz-table-rep-column-name-text-align;
- padding-right: @nz-table-rep-column-name-padding-right;
- color: @nz-table-rep-column-name-color;
- }
- &__hide-header-footer {
- .@{ant-prefix}-table-title,
- .@{ant-prefix}-table-footer {
- display: block;
- }
- }
- }
- &-thead {
- display: none;
- }
- &-title {
- background: @nz-table-rep-header-background;
- text-align: center;
- }
- &-tbody {
- > tr {
- &:nth-child(3n) {
- background: @nz-table-rep-even-background;
- }
- > td {
- width: 100%;
- display: flex;
- align-items: center;
- text-align: left !important;
- border-bottom: none;
- padding: @nz-table-rep-padding-vertical
- @nz-table-rep-padding-horizontal;
-
- .@{ant-prefix}-table-rep__title + *:not(.@{ant-prefix}-avatar) {
- flex: 1;
- }
- }
- }
- }
- }
-}
-
-.@{ant-prefix}-tag {
- &__plus {
- .@{ant-prefix}-tag {
- background: rgb(255, 255, 255);
- border-style: dashed;
- }
- }
-}
-
-.forced-turn-off-nz-modal-animation-mixin(@enabled) when(@enabled=true) {
- .@{ant-prefix}-modal {
- &,
- &-mask {
- animation-duration: unset !important;
- }
- }
-}
-
-.forced-turn-off-nz-modal-animation-mixin(@forced-turn-off-nz-modal-animation-enabled);
-
-// Core CSS
-.h1,
-.h2,
-.h3 {
- small,
- .small {
- font-size: 65%;
- }
-}
-
-.h4,
-.h5,
-.h6 {
- small,
- .small {
- font-size: 75%;
- }
-}
-
-.h1 { font-size: @h1-font-size !important; }
-.h2 { font-size: @h2-font-size !important; }
-.h3 { font-size: @h3-font-size !important; }
-.h4 { font-size: @h4-font-size !important; }
-.h5 { font-size: @h5-font-size !important; }
-.h6 { font-size: @h6-font-size !important; }
-
-// List
-.list-styled {
- padding-left: @ul-ol-margin;
- list-style: inherit;
-}
-
-.list-unstyled {
- padding-left: 0;
- list-style: none;
-}
-
-// Forms
-fieldset {
- border: none;
-}
-
-// Display
-.display-1 {
- font-size: 32px;
-}
-
-.display-2 {
- font-size: 24px;
-}
-
-.display-3 {
- font-size: 20px;
-}
-
-// widgets
-// 中心元素
-@abs-enabled: true;
-
-.widget-abs-mixin(@enabled) when(@enabled=true) {
-
- .abs-center-container {
- position: relative;
- }
-
- .abs-center {
- overflow: auto;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- &.abs-fixed {
- position: fixed;
- z-index: 999;
- }
- &.abs-right {
- left: auto;
- right: 20px;
- text-align: right;
- }
- &.abs-left {
- right: auto;
- left: 20px;
- text-align: left;
- }
- }
-
- @media (max-width: 320px) {
- .abs-center {
- padding: 0 10px;
- }
- }
-
- @media (max-height: @mobile-max) {
- .abs-center {
- position: relative;
- }
- }
-
-}
-
-.widget-abs-mixin(@abs-enabled);
-
-// Badges
-@badge-enabled: true;
-@badge-color: @white;
-@badge-font-size: @font-size-base;
-@badge-padding: 0 8px;
-
-.widget-badge-mixin(@enabled) when(@enabled=true) {
-
- .badge {
- display: inline-block;
- padding: @badge-padding;
- font-size: @badge-font-size;
- line-height: 20px;
- color: @badge-color;
- text-align: center;
- white-space: nowrap;
- vertical-align: baseline;
- border-radius: @border-radius-base;
-
- // Empty badges collapse automatically
- &:empty {
- display: none;
- }
-
- em {
- font-style: normal;
- }
-
- &-dot {
- display: inline-block;
- width: @layout-gutter;
- height: @layout-gutter;
- padding: 0;
- border-radius: 50%;
- > * {
- display: none;
- }
- }
- }
-
- // Colors
- .badge-variant(@bg) {
- .color-yiq(@bg);
- background-color: @bg;
- }
-
- .for-each(@colors, {
- .badge-@{adKey} {
- .badge-variant(extract(@adItem, @color-basic-position));
- }
- });
-
- .for-each(@aliasColors, {
- @aliasColor: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})`;
- .badge-@{adKey} {
- .badge-variant(color(@aliasColor))
- }
- });
-
-}
-
-.widget-badge-mixin(@badge-enabled);
-
-@search-form-enabled: false;
-@search-form-bg: #fbfbfb;
-@search-form-radius: 4px;
-
-@search__form-enabled: true;
-
-.search-form-mixin(@enabled) when(@enabled = true) {
- .search-form {
- background: @search-form-bg;
- padding: @layout-gutter;
- border: @border-width-base @border-style-base @border-color-split;
- border-radius: @search-form-radius;
- margin-bottom: @layout-gutter * 2;
- }
-}
-.search-form-mixin(@search-form-enabled);
-
-.search__form-mixin(@enabled) when(@enabled = true) {
- .search {
- &__form {
- // BUG: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1202
- &.@{ant-prefix}-form-inline {
- .@{ant-prefix}-form-item-label,
- .@{ant-prefix}-form-item-control-wrapper {
- padding: 0 !important;
- }
- }
- .@{ant-prefix}-form-item {
- margin-bottom: 24px;
- margin-right: 0;
- display: flex;
- > .@{ant-prefix}-form-item-label {
- width: auto;
- line-height: 32px;
- padding-right: 8px;
- }
- .@{ant-prefix}-form-item-control {
- line-height: 32px;
- }
- }
- .@{ant-prefix}-form-item-control-wrapper {
- flex: 1;
- }
- }
- }
-}
-.search__form-mixin(@search__form-enabled);
-
-@hafl-enabled: true;
-@hafl-float-size:
- sm @layout-gutter * 8,
- md @layout-gutter * 10,
- lg @layout-gutter * 12;
-
-.widget-hafl-mixin(@enabled) when(@enabled=true) {
-
- .half-float {
- position: relative;
- img {
- display: block;
- max-width: 100%;
- height: auto;
- }
- .half-float-bottom {
- position: absolute;
- left: 50%;
- z-index: 2;
- }
-
- .for-each(@hafl-float-size, {
- &.half-float-@{adKey} {
- margin-bottom: (@adValue / 2) + 10;
- .half-float-bottom {
- bottom: -(@adValue / 2);
- width: @adValue;
- height: @adValue;
- margin-left: -(@adValue / 2);
- }
- }
- });
- }
-
-}
-
-.widget-hafl-mixin(@hafl-enabled);
-
-// masonry
-@masonry-enabled: true;
-@masonry-column-gap: @layout-gutter * 2;
-
-.widget-masonry-mixin(@enabled) when(@enabled=true) {
-
- .row-masonry {
- position: relative;
- margin: 0;
- padding: 0;
- width: 100%;
- column-gap: @masonry-column-gap;
- > .col-masonry {
- display: inline-block;
- width: 100%;
- min-height: 1em;
- margin-bottom: 15px;
- }
- img {
- max-width: 100%;
- }
- }
-
- .for-each(@grid-breakpoints, {
- @media only screen and (min-width: @adValue) {
- .loopColumn(@pos: 1) when (@pos < 10) {
- .row-masonry-@{adKey}-@{pos} {
- column-count: @pos;
- columns: @pos;
- }
- .loopColumn(@pos + 1);
- }
- .loopColumn();
- }
- });
-
-}
-
-.widget-masonry-mixin(@masonry-enabled);
-
-.header-dropdown {
- background-color: #fff;
- box-shadow: @shadow-1-down;
- border-radius: 4px;
-}
-
-@media screen and (max-width: @screen-xs) {
- .header-dropdown {
- width: 100% !important;
- right: 0 !important;
- left: 0 !important;
- border-radius: 0 !important;
- }
-}
-
-// @delon
-.sf {
- display: block;
- // mode
- &-search + .ad-st {
- margin-top: @layout-gutter * 2;
- }
- &__optional {
- color: rgba(0, 0, 0, 0.45);
- }
- // 固定 label
- &__fixed {
- display: flex !important;
- nz-form-control,
- .@{ant-prefix}-form-item-control-wrapper {
- flex: 1;
- }
- }
- // Array
- &-array-container {
- nz-card {
- margin: 0 16px 0 0;
- .remove {
- display: none;
- position: absolute;
- right: -16px;
- top: -16px;
- font-size: 20px;
- text-align: center;
- height: 32px;
- line-height: 32px;
- width: 32px;
- background: rgba(0, 0, 0, 0.26);
- border-radius: 50%;
- cursor: pointer;
- i {
- color: #fff;
- }
- }
- &:hover {
- .remove {
- display: block;
- }
- }
- }
- }
- sf-array {
- .add {
- margin-right: 16px;
- }
- }
- &__checkbox-list {
- width: 100%;
- display: block;
- @media (min-width: @mobile-min) {
- nz-col {
- margin-top: 8px;
- }
- }
- }
- // upload
- .@{ant-prefix}-upload-select-picture-card i {
- font-size: 32px;
- color: #999;
- }
- .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
- height: 180px;
- }
- // transfer
- .@{ant-prefix}-transfer {
- &-list {
- background: #fff;
- &-header {
- label {
- position: unset;
- }
- }
- }
- .@{ant-prefix}-btn + .@{ant-prefix}-btn {
- margin-left: 0;
- }
- }
- // fix select width when inline mode
- .@{ant-prefix}-form-inline {
- sf-select {
- .@{ant-prefix}-form-item {
- display: inline-flex;
- > .@{ant-prefix}-form-item-control-wrapper {
- flex: 1 0 0;
- }
- }
- }
- }
- &__no-error {
- .@{ant-prefix}-form-item {
- margin-bottom: 8px;
- }
- }
-}
-
-.acl__hide {
- display: none !important;
-}
-
-@setting-drawer-enabled: true;
-@setting-drawer-prefix: ~'.setting-drawer';
-@setting-drawer-width: 500px;
-
-.widget-setting-drawer-mixin(@enabled) when(@enabled=true) {
-
- @{setting-drawer-prefix} {
- &__content {
- min-height: 100%;
- background: #fff;
- position: relative;
- }
- &__body {
- &-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-bottom: 12px;
- padding-top: 12px;
- &:first-child {
- padding-top: 0;
- }
- &:last-child {
- padding-bottom: 0;
- }
- }
- }
- &__title {
- font-size: 14px;
- color: @heading-color;
- line-height: 22px;
- margin-bottom: 12px;
- }
- &__theme {
- margin-top: 24px;
- overflow: hidden;
- &-tag {
- width: 20px;
- height: 20px;
- border-radius: 2px;
- float: left;
- cursor: pointer;
- margin-right: 8px;
- text-align: center;
- color: #fff;
- font-weight: bold;
- }
- }
- &__handle {
- position: fixed;
- top: 240px;
- background: @primary-color;
- width: 48px;
- height: 48px;
- right: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- pointer-events: auto;
- z-index: @zindex-modal-mask - 1;
- text-align: center;
- font-size: 16px;
- border-radius: 4px 0 0 4px;
- transition: right @animation-duration-slow @ease-base-in;
- &-icon {
- color: #fff;
- font-size: 20px;
- }
- &-opened {
- right: @setting-drawer-width;
- z-index: @zindex-modal-mask + 1;
- }
- }
- }
-
-}
-
-.widget-setting-drawer-mixin(@setting-drawer-enabled);
-
-// Utils
-.align-baseline { vertical-align: baseline !important; } // Browser default
-.align-top { vertical-align: top !important; }
-.align-middle { vertical-align: middle !important; }
-.align-bottom { vertical-align: bottom !important; }
-.align-text-bottom { vertical-align: text-bottom !important; }
-.align-text-top { vertical-align: text-top !important; }
-
-// see https://ant.design/docs/spec/colors#Neutral-color-application
-@border-color: @border-color-split;
-@border-grids:
- sm @border-radius-sm,
- md @border-radius-md,
- lg @border-radius-lg;
-
-.border { border: 1px solid @border-color !important; }
-
-@border-width-list: 0, 1;
-.for(@border-width-list, {
- .border-css-mixin(@i) when(@i > 0) {
- @css-value: ~"@{i}px solid @{border-color}";
- }
- .border-css-mixin(@i) when(default()) {
- @css-value: 0;
- }
- .border-css-mixin(@adIndex);
- .border-@{adIndex} { border: @css-value !important; }
- .border-top-@{adIndex} { border-top: @css-value !important; }
- .border-right-@{adIndex} { border-right: @css-value !important; }
- .border-bottom-@{adIndex} { border-bottom: @css-value !important; }
- .border-left-@{adIndex} { border-left: @css-value !important; }
-});
-
-// color
-.for-each(@colors, {
- .border-@{adKey} {
- border-color: extract(@adItem, @color-basic-position) !important;
- }
-});
-
-.for-each(@aliasColors, {
- .border-@{adKey} {
- border-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important;
- }
-});
-
-.border-white {
- border-color: #fff !important;
-}
-
-// Border-radius
-.for-each(@border-grids, {
- .rounded-@{adKey} { border-radius: @adValue !important; }
- .rounded-top-left-@{adKey} { border-top-left-radius: @adValue !important; }
- .rounded-top-right-@{adKey} { border-top-right-radius: @adValue !important; }
- .rounded-bottom-left-@{adKey} { border-bottom-left-radius: @adValue !important; }
- .rounded-bottom-right-@{adKey} { border-bottom-right-radius: @adValue !important; }
-});
-
-.rounded-circle {
- border-radius: 50%;
-}
-
-.rounded-0 {
- border-radius: 0;
-}
-
-// Inline code
-code {
- padding: 2px 4px;
- margin: 0 4px;
- font-size: 90%;
- background-color: @code-bg;
- border: 1px solid @code-border-color;
- border-radius: @border-radius-base;
-}
-
-// color
-.bg-white { background-color: #fff !important; }
-.bg-transparent { background-color: transparent !important; }
-.text-white { color: #fff !important; }
-.text-hover {
- cursor: pointer;
- &:hover { color: @primary-color !important; }
-}
-
-.for-each(@colors, {
- .bg-@{adKey}-light { background-color: extract(@adItem, @color-light-position) !important; }
- .bg-@{adKey} { background-color: extract(@adItem, @color-basic-position) !important; }
- .bg-@{adKey}-dark { background-color: extract(@adItem, @color-dark-position) !important; }
-
- .bg-@{adKey}-light-h { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-light-position) !important; } }
- .bg-@{adKey}-h { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-basic-position) !important; } }
- .bg-@{adKey}-dark-h { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-dark-position) !important; } }
-
- .text-@{adKey}-light { color: extract(@adItem, @color-light-position) !important; }
- .text-@{adKey} { color: extract(@adItem, @color-basic-position) !important; }
- .text-@{adKey}-dark { color: extract(@adItem, @color-dark-position) !important; }
-});
-
-.for-each(@aliasColors, {
- .bg-@{adKey}-light { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; }
- .bg-@{adKey} { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; }
- .bg-@{adKey}-dark { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; }
-
- .bg-@{adKey}-light-h { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; } }
- .bg-@{adKey}-h { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; } }
- .bg-@{adKey}-dark-h { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; } }
-
- .text-@{adKey}-light { color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; }
- .text-@{adKey} { color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; }
- .text-@{adKey}-dark { color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; }
-});
-
-// grey
-.for-each(@greyColorer, {
- .bg-grey-@{adKey} { background-color: @adValue !important; }
- .bg-grey-@{adKey}-h { &:hover { background-color: @adValue !important; } }
- .text-grey-@{adKey} { color: @adValue !important; }
-});
-
-.all-colors-minin(@enabled) when (@enabled = true) {
-
- .loop-no(@adKey, @adValue, @i: 1) when (@i =< length(@color-no-list)) {
- // @color-no-list
- @name: "@{adKey}-@{i}";
- .bg-@{adKey}-@{i} { background-color: @@name !important; }
- .bg-@{adKey}-@{i}-h { transition: background-color 300ms; &:hover { background-color: @@name !important; } }
- .text-@{adKey}-@{i} { color: @@name !important; }
- .loop-no(@adKey, @adValue, @i + 1);
- }
-
- .for-each(@colors, {
- .loop-no(@adKey, @adValue, 1);
- });
-
-}
-.all-colors-minin(@enable-all-colors);
-
-.d-none { display: none !important; }
-.d-block { display: block !important; }
-.d-inline-block { display: inline-block !important; }
-.d-flex { display: flex !important; }
-.d-inline-flex { display: inline-flex !important; }
-
-.justify-content-start { justify-content: flex-start !important; }
-.justify-content-end { justify-content: flex-end !important; }
-.justify-content-center { justify-content: center !important; }
-.justify-content-between { justify-content: space-between !important; }
-.justify-content-around { justify-content: space-around !important; }
-
-.align-items-start { align-items: flex-start !important; }
-.align-items-end { align-items: flex-end !important; }
-.align-items-center { align-items: center !important; }
-.align-items-baseline { align-items: baseline !important; }
-.align-items-stretch { align-items: stretch !important; }
-
-.align-content-start { align-content: flex-start !important; }
-.align-content-end { align-content: flex-end !important; }
-.align-content-center { align-content: center !important; }
-.align-content-between { align-content: space-between !important; }
-.align-content-around { align-content: space-around !important; }
-.align-content-stretch { align-content: stretch !important; }
-
-.align-self-auto { align-self: auto !important; }
-.align-self-start { align-self: flex-start !important; }
-.align-self-end { align-self: flex-end !important; }
-.align-self-center { align-self: center !important; }
-.align-self-baseline { align-self: baseline !important; }
-.align-self-stretch { align-self: stretch !important; }
-
-.flex-1 { flex: 1 !important; }
-.flex-column { flex-direction: column !important; }
-.flex-column-reverse { flex-direction: column-reverse !important; }
-.flex-wrap { flex-wrap: wrap !important; }
-.flex-nowrap { flex-wrap: nowrap !important; }
-.flex-shrink-0 { flex-shrink: 0 !important; }
-.flex-shrink-1 { flex-shrink: 1 !important; }
-.flex-grow-0 { flex-grow: 0 !important; }
-.flex-grow-1 { flex-grow: 1 !important; }
-
-.float-none { float:none !important; }
-.float-left { float:left !important; }
-.float-right { float:right !important; }
-
-// Sizing
-.icon-sm { font-size: @icon-sm !important; }
-.icon-md { font-size: @icon-md !important; }
-.icon-lg { font-size: @icon-lg !important; }
-
-.img-fluid {
- // Part 1: Set a maximum relative to the parent
- max-width: 100%;
- // Part 2: Override the height to auto, otherwise images will be stretched
- // when setting a width and height attribute on the img element.
- height: auto;
-}
-
-.img-fluid {
- .img-fluid;
-}
-
-.point {
- cursor: pointer;
-}
-
-.no {
- &-resize {
- resize: none;
- max-width: 100%;
- min-width: 100%;
- }
- &-data {
- color: rgba(0, 0, 0, 0.25);
- text-align: center;
- line-height: 64px;
- font-size: 16px;
- i {
- font-size: 24px;
- margin-right: 16px;
- position: relative;
- top: 3px;
- }
- }
-}
-
-.block-center {
- margin: 0 auto;
-}
-
-// Background image
-.bg-center {
- background-position: center center;
- background-size: cover;
-}
-
-.page-loading {
- background: @background-color-base;
- z-index: 10000;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- padding-top: 200px;
- text-align: center;
-}
-
-.color-weak {
- filter: invert(80%);
- display: block;
-}
-
-.for-each(@positions, {
- .position-@{adKey} { position: @adKey !important; }
-});
-
-.fixed-top {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: @zindex-fixed;
-}
-
-.fixed-bottom {
- position: fixed;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: @zindex-fixed;
-}
-
-.for-each(@overflows, {
- .overflow-@{adKey} { overflow: @adKey !important; }
-});
-
-@media (max-width: @screen-xs-max) {
- .hidden-xs {
- display: none !important;
- }
-}
-
-@media (max-width: @screen-sm-max) {
- .hidden-sm {
- display: none !important;
- }
-}
-
-@media (max-width: @screen-md-max) {
- .hidden-md {
- display: none !important;
- }
-}
-
-@media (max-width: @screen-lg-max) {
- .hidden-lg {
- display: none !important;
- }
-}
-
-@media (min-width: @mobile-min) {
- .hidden-pc {
- display: none !important;
- }
-}
-
-@media (max-width: @mobile-max) {
- .hidden-mobile {
- display: none !important;
- }
-}
-
-@rotate-count: 24;
-.rotate-loop (@i) when (@i > 0) {
- @num: @i * 15;
- .rotate-@{num} {
- transform: rotate(~'@{num}deg');
- }
- .rotate-loop(@i - 1);
-}
-
-.rotate-loop(@rotate-count);
-
-@mp-list: margin m, padding p;
-
-.loop-mp(@infix, @adKey, @adValue, @i: 1) when (@i =< length(@mp-list)) {
- @item: extract(@mp-list, @i);
- @abbrev: extract(@item, 2);
- @prop: extract(@item, 1);
- .@{abbrev}@{infix} { @{prop}: @adValue !important; }
- .@{abbrev}t@{infix} { @{prop}-top: @adValue !important; }
- .@{abbrev}r@{infix} { @{prop}-right: @adValue !important; }
- .@{abbrev}b@{infix} { @{prop}-bottom: @adValue !important; }
- .@{abbrev}l@{infix} { @{prop}-left: @adValue !important; }
- .@{abbrev}x@{infix} {
- @{prop}-right: @adValue !important;
- @{prop}-left: @adValue !important;
- }
- .@{abbrev}y@{infix} {
- @{prop}-top: @adValue !important;
- @{prop}-bottom: @adValue !important;
- }
-
- .loop-mp(@infix, @adKey, @adValue, @i + 1);
-}
-
-.for-each(@spacings, {
- .infix-mixin(@adKey) when(@adKey = 0) {
- @infix: 0;
- }
- .infix-mixin(@adKey) when(default()) {
- @infix: ~"-@{adKey}";
- }
- .infix-mixin(@adKey);
-
- .loop-mp(@infix, @adKey, @adValue, 1);
-
-});
-
-// Alignment
-.text-left { text-align: left !important; }
-.text-center { text-align: center !important; }
-.text-right { text-align: right !important; }
-
-// Transformation
-.text-lowercase { text-transform: lowercase !important; }
-.text-uppercase { text-transform: uppercase !important; }
-.text-capitalize { text-transform: capitalize !important; }
-.text-deleted { text-decoration: line-through; }
-
-// wrapping
-.text-nowrap { white-space: nowrap !important; }
-.text-wrap { white-space: pre-wrap !important; }
-.text-truncate { .text-truncate(); }
-
-// Weight and italics
-
-.font-weight-normal { font-weight: normal; }
-.font-weight-bold { font-weight: 700; }
-.font-italic { font-style: italic; }
-
-// Sizing
-.text-xs { font-size: @text-xs !important; }
-.text-sm { font-size: @text-sm !important; }
-.text-md { font-size: @text-md !important; }
-.text-lg { font-size: @text-lg !important; }
-.text-xl { font-size: @text-xl !important; }
-
-.for-each(@widths, {
- .width-@{adKey} { width: @adValue !important; }
- .max-width-@{adKey} { max-width: @adValue !important; }
- .min-width-@{adKey} { min-width: @adValue !important; }
-});
-
-@media (max-width: @mobile-max) {
- .width-sm,
- .max-width-sm,
- .min-width-sm {
- width: 100% !important;
- }
-}
-
-.scrollbar-mixin(@element-name) {
- .scrollbar-inner-mixin(@enabled) when(@enabled=true) {
- @{element-name} {
- // FireFox
- scrollbar-color: @scrollbar-track-color @scrollbar-thumb-color;
- scrollbar-width: thin;
- // Other
- &::-webkit-scrollbar {
- height: @scrollbar-width;
- width: @scrollbar-height;
- }
- &::-webkit-scrollbar-track {
- box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
- }
- &::-webkit-scrollbar-thumb {
- background-color: @scrollbar-thumb-color;
- outline: 1px solid #333;
- }
- }
- }
- .scrollbar-inner-mixin(@scrollbar-enabled);
-}
-
-// 自定义div scrollbar
-@scrollbar-prefix: ~'.scrollbar';
-@{scrollbar-prefix} {
- overflow: auto;
-
- &-x {
- overflow-x: auto;
- overflow-y: hidden;
- }
- &-y {
- overflow-x: hidden;
- overflow-y: auto;
- }
-}
-
-// scrollbar
-// TODO: (.nz-measure-scrollbar-placeholder) https://github.com/NG-ZORRO/ng-zorro-antd/pull/2617
-.scrollbar-mixin(~'body, @{scrollbar-prefix}, .@{ant-prefix}-dialog-wrap, .@{ant-prefix}-drawer-body, .@{ant-prefix}-drawer-wrapper-body, .@{ant-prefix}-anchor-wrapper, textarea.@{ant-prefix}-input');
-
-// table
-.scrollbar-table-mixin(@enabled) when(@enabled=true) {
- .scrollbar-mixin(~'.@{ant-prefix}-table-header, .@{ant-prefix}-table-body');
-}
-.scrollbar-table-mixin(@scrollbar-table-enabled);
-
-@alain-default-prefix: ~'.alain-default';
-@alain-default-zindex: @zindex-base;
-@alain-default-ease: cubic-bezier(.25, 0, .15, 1);
-@alain-default-header-hg: 64px;
-@alain-default-header-bg: @primary-color;
-@alain-default-header-padding: @layout-gutter * 2;
-@alain-default-header-search-enabled: true;
-@alain-default-header-search-height: 34px;
-@alain-default-header-icon-fs: 18px;
-
-@alain-default-aside-wd: 200px;
-@alain-default-aside-bg: #fff;
-@alain-default-aside-scrollbar-width: 0;
-@alain-default-aside-scrollbar-height: 0;
-@alain-default-aside-scrollbar-track-color: transparent;
-@alain-default-aside-scrollbar-thumb-color: transparent;
-
-@alain-default-aside-nav-fs: 14px;
-@alain-default-aside-nav-icon-width: 14px;
-@alain-default-aside-nav-img-wh: 14px;
-@alain-default-aside-nav-padding-top-bottom: @layout-gutter;
-@alain-default-aside-nav-text-color: @text-color;
-@alain-default-aside-nav-text-hover-color: @primary-color;
-@alain-default-aside-nav-group-text-color: @text-color-secondary;
-@alain-default-aside-nav-selected-text-color: @primary-color;
-@alain-default-aside-nav-selected-bg: #fcfcfc;
-@alain-default-aside-nav-item-height: 38px;
-@alain-default-aside-collapsed-wd: @layout-gutter * 8;
-@alain-default-aside-collapsed-nav-fs: 24px;
-@alain-default-aside-collapsed-nav-img-wh: 24px;
-
-@alain-default-content-heading-bg: #fafbfc;
-@alain-default-content-heading-border: #efe3e5;
-@alain-default-content-padding: @layout-gutter * 3;
-@alain-default-content-bg: #f5f7fa;
-
-@alain-default-widget-app-icons-enabled: true;
-@alain-default-aside-user-enabled: true;
-
-html {
- direction: ltr;
- height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
- touch-action: manipulation;
-}
-
-html,
-body,
-app-root {
- // overflow-x: hidden;
- height: 100%;
-}
-
-body {
- color: @text-color;
- background-color: @alain-default-content-bg;
-}
-
-@{alain-default-prefix} {
- display: block;
- position: relative;
- width: 100%;
- height: auto;
- min-height: 100%;
- overflow-x: hidden;
- &__unwrap {
- margin-right: -@alain-default-content-padding;
- margin-left: -@alain-default-content-padding;
- @media (max-width: @mobile-max) {
- margin-right: 0;
- margin-left: 0;
- }
- }
- &__content {
- margin: 0 @alain-default-content-padding @alain-default-content-padding @alain-default-content-padding;
- &-title {
- display: flex;
- align-items: center;
- justify-content: space-between;
- color: #929292;
- padding: @alain-default-content-padding;
- padding-top: @alain-default-content-padding - 12;
- padding-bottom: @alain-default-content-padding - 12;
- margin-right: -@alain-default-content-padding;
- margin-left: -@alain-default-content-padding;
- margin-bottom: @alain-default-content-padding;
- background-color: @alain-default-content-heading-bg;
- border-bottom: 1px solid @alain-default-content-heading-border;
- > h1 {
- font-size: 18px;
- font-weight: normal;
- margin-bottom: 0;
- > small {
- display: block;
- font-size: 12px;
- color: @muted-color;
- }
- }
- }
- // fix width
- nz-input-group {
- width: auto;
- }
- }
-}
-
-// Desktop
-@media (min-width: @mobile-min) {
- @{alain-default-prefix}__content {
- margin-left: (@alain-default-aside-wd + @alain-default-content-padding);
- }
- @{alain-default-prefix}__collapsed {
- @{alain-default-prefix} {
- &__sidebar {
- width: @alain-default-aside-collapsed-wd;
- }
- &__content {
- margin-left: (@alain-default-aside-collapsed-wd + @alain-default-content-padding);
- }
- }
- }
-}
-
-@{alain-default-prefix} {
- &__header {
- display: flex;
- align-items: center;
- padding: 0 @alain-default-header-padding;
- width: 100%;
- height: @alain-default-header-hg;
- background-color: @alain-default-header-bg;
- box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
- z-index: @alain-default-zindex + 10;
- &-logo {
- margin-left: -@alain-default-header-padding;
- width: @alain-default-aside-wd;
- transition: width 0.2s @alain-default-ease;
- &-link {
- display: block;
- text-align: center;
- }
- &-expanded,
- &-collapsed {
- vertical-align: middle;
- max-width: 100%;
- animation: fadeIn 1s;
- }
- &-collapsed {
- display: none;
- }
- &-expanded {
- display: inline;
- }
- }
- }
- &__nav {
- &-wrap {
- flex: 1;
- display: flex;
- justify-content: space-between;
- }
- margin: 0;
- padding: 0;
- display: flex;
- align-items: center;
- > li {
- display: inline-block;
- vertical-align: middle;
- }
- &-item,
- nz-badge {
- color: #fff;
- }
- &-item {
- display: block;
- border-radius: 2px;
- text-align: center;
- line-height: 100%;
- padding: 8px 2px;
- min-width: 50px;
- transition: background-color 300ms;
- cursor: pointer;
- outline: none;
- &:hover {
- color: #fff;
- background-color: rgba(255, 255, 255, 0.2) !important;
- }
- > i,
- &-icon {
- font-size: @alain-default-header-icon-fs !important;
- // fix ant-dropdown-trigger
- transform: none !important;
- }
- }
- }
-}
-
-// Search
-.header-search-mixin(@enabled) when(@enabled =true) {
- @{alain-default-prefix}__search {
- flex: 1;
- margin: 0 @layout-gutter * 3;
- position: relative;
- display: flex;
- align-items: center;
- .@{ant-prefix}-input {
- padding-left: 0;
- &:focus {
- box-shadow: none;
- }
- }
- .@{ant-prefix}-input,
- .@{ant-prefix}-input-group-addon {
- background-color: rgba(255, 255, 255, 0.2);
- color: #fff;
- border: none;
- &::placeholder {
- color: #fff;
- opacity: 1;
- }
- }
- .@{ant-prefix}-input-group-addon {
- i {
- transition: color 300ms, transform 400ms;
- font-size: 18px;
- color: #fff;
- }
- }
- &-focus {
- .@{ant-prefix}-input,
- .@{ant-prefix}-input-group-addon {
- background-color: #f3f3f3;
- color: @grey-8;
- &::placeholder {
- color: @grey-8;
- opacity: 1;
- }
- }
- .@{ant-prefix}-input-group-addon {
- i {
- transform: rotate(90deg);
- color: @grey-8;
- }
- }
- }
- }
-
- @media (max-width: @mobile-max) {
- @{alain-default-prefix}__search {
- align-items: center;
- transition: transform 300ms;
- padding: 0 @alain-default-header-padding;
- margin: 0;
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- background-color: #fff;
- z-index: @zindex+20;
- &-toggled {
- display: flex;
- }
- &:not(&-toggled) {
- transform: translate3d(0, -105%, 0);
- }
- }
- }
-}
-
-.header-search-mixin(@alain-default-header-search-enabled);
-
-// Collapsed
-@{alain-default-prefix}__collapsed {
- @{alain-default-prefix}__header {
- &-logo {
- width: @alain-default-aside-collapsed-wd;
- &-collapsed {
- display: inline;
- }
- &-expanded {
- display: none;
- }
- }
- }
-}
-
-// Desktop
-// @media (min-width: @mobile-min) {}
-// Under pad
-@media (max-width: @mobile-max) {
- @{alain-default-prefix}__header {
- &-logo {
- width: @alain-default-aside-collapsed-wd;
- &-collapsed {
- display: inline;
- }
- &-expanded {
- display: none;
- }
- }
- }
-}
-
-@{alain-default-prefix}__aside {
- position: absolute;
- top: 0;
- bottom: 0;
- margin-top: @alain-default-header-hg;
- width: @alain-default-aside-wd;
- background-color: @alain-default-aside-bg;
- transition: width 0.2s @alain-default-ease, translate 0.2s @alain-default-ease;
- z-index: @zindex + 5;
- overflow: hidden;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: touch;
- &:after {
- content: '';
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- border-right: 1px solid @alain-default-content-heading-border;
- }
- &-inner {
- overflow-x: hidden;
- overflow-y: scroll;
- height: 100%;
- -webkit-overflow-scrolling: touch;
- // IE
- -ms-scroll-chaining: chained;
- -ms-overflow-style: none;
- -ms-content-zooming: zoom;
- -ms-scroll-rails: none;
- -ms-content-zoom-limit-min: 100%;
- -ms-content-zoom-limit-max: 500%;
- -ms-scroll-snap-type: proximity;
- -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
- -ms-overflow-style: none;
- // Firefox
- scrollbar-width: none;
- // Chrome
- &::-webkit-scrollbar {
- height: @alain-default-aside-scrollbar-width;
- width: @alain-default-aside-scrollbar-height;
- }
- &::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 @alain-default-aside-scrollbar-width
- @alain-default-aside-scrollbar-track-color;
- }
- &::-webkit-scrollbar-thumb {
- background-color: @alain-default-aside-scrollbar-thumb-color;
- }
- }
-}
-
-// Desktop
-@media (min-width: @mobile-min) {
- @{alain-default-prefix}__collapsed {
- @{alain-default-prefix}__aside {
- width: @alain-default-aside-collapsed-wd;
- }
- }
-}
-
-// Under pad
-@media (max-width: @mobile-max) {
- @{alain-default-prefix}__aside,
- @{alain-default-prefix}__content {
- transition: transform 0.3s ease;
- }
- @{alain-default-prefix}__content {
- transform: translate3d(@alain-default-aside-wd, 0, 0);
- }
- @{alain-default-prefix}__collapsed {
- @{alain-default-prefix}__aside {
- transform: translate3d(-100%, 0, 0);
- }
- @{alain-default-prefix}__content {
- transform: translateZ(0);
- }
- }
-}
-
-@{alain-default-prefix}__progress-bar {
- width: 100vw;
- height: 4px;
- overflow: hidden;
- background: fade(#ddd, 40%);
- position: fixed;
- z-index: @zindex-base + 20;
- &::after {
- content: ' ';
- height: 100%;
- width: 33.3vw;
- animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
- display: block;
- transform-origin: top left;
- }
-}
-
-.grad(@hex) {
- background:
- linear-gradient(
- 90deg,
- fade(@hex, 0) 0%,
- @hex 30%,
- @hex 50%,
- @hex 70%,
- fade(@hex, 0) 100%
- );
-}
-
-@keyframes loadthird {
- 0% { transform: translateX(-33.3vw); }
- 100% { transform: translateX(100vw); }
-}
-
-@keyframes gradcolours {
- 0% { .grad(#e88098); }
- 20% { .grad(#84bebe); }
- 40% { .grad(#e98724); }
- 60% { .grad(#afc94e); }
- 80% { .grad(#6297a4); }
-}
-
-// Main Nav
-@sidebar-nav-prefix-cls: sidebar-nav;
-
-.@{sidebar-nav-prefix-cls} {
- display: block;
- font-size: @alain-default-aside-nav-fs;
- margin: 0;
- padding: 0;
- &__item {
- position: relative;
- border-left: 3px solid transparent;
- transition: border-left-color 0.4s ease;
- display: flex;
- flex-direction: column;
- &-link {
- color: @alain-default-aside-nav-text-color;
- text-decoration: none !important;
- padding: @alain-default-aside-nav-padding-top-bottom @layout-gutter * 2;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- position: relative;
- display: flex;
- align-items: center;
- user-select: none;
- &:hover {
- color: @alain-default-aside-nav-text-hover-color;
- }
- }
- &-icon {
- min-width: @alain-default-aside-nav-icon-width;
- display: inline-block;
- margin-right: @layout-gutter;
- transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
- }
- &-img {
- height: @alain-default-aside-nav-img-wh;
- width: @alain-default-aside-nav-img-wh;
- }
- &-text {
- transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
- opacity: 1;
- }
- &-disabled {
- opacity: .6;
- }
- }
- // Selected
- &__selected {
- border-left-color: @alain-default-aside-nav-selected-text-color;
- background-color: @alain-default-aside-nav-selected-bg;
- > .@{sidebar-nav-prefix-cls}__item-link {
- color: @alain-default-aside-nav-selected-text-color;
- }
- }
- // Open Submenu
- &__open {
- > .@{sidebar-nav-prefix-cls}__sub {
- display: block;
- animation: fadeIn 0.5s;
- }
- > .@{sidebar-nav-prefix-cls}__item-link {
- .@{sidebar-nav-prefix-cls}__sub-arrow {
- transform: translateY(-2px);
- &:before {
- transform: rotate(45deg) translateX(2px);
- }
- &:after {
- transform: rotate(-45deg) translateX(-2px);
- }
- }
- }
- }
- &__group-title {
- color: @alain-default-aside-nav-group-text-color;
- padding: @alain-default-aside-nav-padding-top-bottom @layout-gutter * 2;
- }
- &__sub {
- display: none;
- overflow: hidden;
- .@{sidebar-nav-prefix-cls}__item {
- border-left: 0 !important;
- }
- &-arrow {
- transition: transform .3s @ease-in-out;
- position: absolute;
- top: 50%;
- right: @layout-gutter * 2;
- width: 10px;
- &:before,
- &:after {
- content: '';
- position: absolute;
- vertical-align: baseline;
- background: #fff;
- background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
- width: 6px;
- height: 1.5px;
- border-radius: 2px;
- transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
- }
- &:before {
- transform: rotate(-45deg) translateX(2px);
- }
- &:after {
- transform: rotate(45deg) translateX(-2px);
- }
- }
- }
- // Badge
- .badge {
- position: absolute;
- right: @layout-gutter * 2;
- @badge-height: @layout-gutter * 2;
- &:not(.badge-dot) {
- top: (@alain-default-aside-nav-item-height - @badge-height) / 2;
- height: @badge-height;
- width: @badge-height;
- line-height: @badge-height;
- padding: 0;
- overflow: hidden;
- }
- &-dot {
- top: (@alain-default-aside-nav-item-height - @layout-gutter) / 2;
- }
- }
- // Dept
- &__depth1 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: (@layout-gutter * 3) + @alain-default-aside-nav-icon-width;
- }
- }
- &__depth2 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: (@layout-gutter * 4) + @alain-default-aside-nav-icon-width;
- }
- }
- &__depth3 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: (@layout-gutter * 5) + @alain-default-aside-nav-icon-width;
- }
- }
- &__depth4 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: (@layout-gutter * 6) + @alain-default-aside-nav-icon-width;
- }
- }
- // Floating
- &__floating {
- position: absolute;
- z-index: @zindex + 7;
- min-width: 160px;
- border: 1px solid @alain-default-content-heading-border;
- background-color: @alain-default-aside-bg;
- border-radius: 4px;
- display: none;
- .@{sidebar-nav-prefix-cls}__item {
- &-link {
- padding-left: @layout-gutter * 2;
- }
- }
- &-show {
- display: block;
- }
- .@{sidebar-nav-prefix-cls}__sub {
- display: block;
- &-arrow {
- display: none;
- }
- }
- // Dept
- .@{sidebar-nav-prefix-cls}__depth2 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: @layout-gutter * 3;
- }
- }
- .@{sidebar-nav-prefix-cls}__depth3 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: @layout-gutter * 4;
- }
- }
- .@{sidebar-nav-prefix-cls}__depth4 {
- .@{sidebar-nav-prefix-cls}__item-link {
- padding-left: @layout-gutter * 5;
- }
- }
- }
-}
-
-@media (min-width: @mobile-min) {
- @{alain-default-prefix}__collapsed {
- .@{sidebar-nav-prefix-cls}:not(.@{sidebar-nav-prefix-cls}__sub) {
- .@{sidebar-nav-prefix-cls}__item {
- border: none;
- &-link {
- justify-content: center;
- padding: (@layout-gutter * 3) 0;
- .@{sidebar-nav-prefix-cls}__item-icon {
- margin-right: 0;
- font-size: @alain-default-aside-collapsed-nav-fs;
- }
- .@{sidebar-nav-prefix-cls}__item-img {
- width: @alain-default-aside-collapsed-nav-img-wh;
- height: @alain-default-aside-collapsed-nav-img-wh;
- }
- .@{sidebar-nav-prefix-cls}__item-text {
- opacity: 0;
- display: none;
- }
- }
- }
- .@{sidebar-nav-prefix-cls}__group-title {
- display: none;
- }
- }
- .@{sidebar-nav-prefix-cls} {
- &__sub {
- display: none !important;
- &-arrow {
- display: none;
- }
- }
- }
- }
-}
-
-@{footer-toolbar-prefix} {
- &__left {
- margin-left: @alain-default-aside-wd;
- }
-}
-
-@{alain-default-prefix}__collapsed {
- @{footer-toolbar-prefix} {
- &__left {
- margin-left: @alain-default-aside-collapsed-wd;
- }
- }
-}
-
-@{footer-toolbar-prefix}__body {
- @{alain-default-prefix}__content {
- margin-bottom: @layout-gutter + @footer-toolbar-height;
- }
-}
-
-@{full-content-prefix} {
- &__body {
- .alain-default__content {
- router-outlet + * {
- display: block;
- height: 100%;
- width: 100%;
- }
- }
- .alain-default__content-title {
- margin-left: -24px;
- }
- }
- &__opened {
- .alain-default__header,
- .alain-default__aside,
- reuse-tab {
- display: none !important;
- }
- .alain-default__content {
- margin: 24px !important;
- }
- }
- &__hidden-title {
- .alain-default__content-title,
- .page-header {
- display: none !important;
- }
- }
-}
-
-@{alain-default-prefix} {
- @{page-header-prefix} {
- padding: @alain-default-content-padding - 12 @alain-default-content-padding 0 @alain-default-content-padding;
- margin-right: -@alain-default-content-padding;
- margin-left: -@alain-default-content-padding;
- margin-bottom: @alain-default-content-padding;
- border-bottom: 1px solid @alain-default-content-heading-border;
- }
-}
-
-@{quick-menu-prefix} {
- @media (max-width: @mobile-max) {
- right: -(@alain-default-content-padding + @quick-menu-border-width) !important;
- }
-}
-
-@{reuse-tab-prefix} {
- margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding;
-}
-
-@{alain-default-prefix}__fixed {
- @{reuse-tab-prefix} {
- position: fixed;
- top: @alain-default-header-hg;
- left: @alain-default-aside-wd + @alain-default-content-padding;
- right: @alain-default-content-padding;
- z-index: @zindex-fixed + 1;
- }
-}
-
-@{alain-default-prefix}__collapsed {
- @{reuse-tab-prefix} {
- left: @alain-default-aside-collapsed-wd + @alain-default-content-padding;
- }
-}
-
-@media (min-width: @mobile-min) {
- @{alain-default-prefix}__fixed {
- @{reuse-tab-prefix} {
- + router-outlet {
- display: block;
- height: @reuse-tab-height;
- }
- }
- }
-}
-
-@media (max-width: @mobile-max) {
- @{alain-default-prefix}__fixed {
- @{reuse-tab-prefix} {
- position: unset;
- margin-top: @reuse-tab-height;
- width: initial;
- }
- }
-}
-
-@{alain-default-prefix}__nav-item .@{ant-prefix}-badge-count {
- top: -6px;
- right: 18px;
-}
-
-.alain-default-widget-app-icons-mixin(@enabled) when(@enabled=true) {
- .app-icons {
- padding: @layout-gutter * 2;
- .@{ant-prefix}-col-6 {
- padding: (@layout-gutter * 2) 0;
- border-radius: 4px;
- text-align: center;
- transition: background-color 300ms;
- cursor: pointer;
- &:hover {
- background-color: #ececec;
- }
- }
- i {
- border-radius: 50%;
- font-size: 22px;
- padding: 15px;
- }
- small {
- font-size: 14px;
- padding-top: 4px;
- color: #9c9c9c;
- display: block;
- }
- }
-}
-.alain-default-widget-app-icons-mixin(@alain-default-widget-app-icons-enabled);
-
-@alain-default-user-block-width: @alain-default-aside-wd - (@layout-gutter * 6);
-@alain-default-user-block-avatar-hw: @avatar-size-lg;
-
-.alain-default-aside-user-mixin(@enabled) when(@enabled=true) {
-
- @{alain-default-prefix}__aside-user {
- padding-top: (@layout-gutter * 3);
- margin: 0 auto;
- display: block !important;
- width: @alain-default-user-block-width;
- cursor: pointer;
- .@{ant-prefix}-dropdown-trigger {
- display: flex;
- align-items: center;
- }
- &-info {
- color: @text-color;
- width: @alain-default-user-block-width - @alain-default-user-block-avatar-hw - @layout-gutter;
- }
- &-avatar {
- margin-right: @layout-gutter;
- }
- }
-
- // Desktop
- @media (min-width: @mobile-min) {
- @{alain-default-prefix}__collapsed {
- @{alain-default-prefix}__aside-user {
- width: @alain-default-aside-collapsed-wd;
- &-info {
- display: none;
- }
- &-avatar {
- margin: 0 auto;
- }
- }
- }
- }
-}
-.alain-default-aside-user-mixin(@alain-default-aside-user-enabled);
-
-@{alain-default-prefix}__fixed {
- @{alain-default-prefix} {
- &__header {
- position: fixed;
- top: 0;
- left: 0;
- }
- &__aside {
- position: fixed;
- }
- &__content {
- margin-top: @alain-default-header-hg;
- }
- }
-}
-
-@alain-fullscreen-prefix: ~'.alain-fullscreen';
-@alain-fullscreen-zindex: @zindex-base;
-
-@alain-fullscreen-bg: #f5f7fa;
-@alain-fullscreen-content-padding-vertical: 0;
-@alain-fullscreen-content-padding-horizontal: @layout-gutter * 2;
-
-@{alain-fullscreen-prefix} {
- display: block;
- background-color: @alain-fullscreen-bg;
- padding: @alain-fullscreen-content-padding-vertical @alain-fullscreen-content-padding-horizontal;
-}
-
-@{alain-fullscreen-prefix} {
-@{page-header-prefix} {
- padding: @alain-fullscreen-content-padding-horizontal;
- padding-top: @alain-fullscreen-content-padding-horizontal - 12;
- padding-bottom: @alain-fullscreen-content-padding-horizontal - 12;
- margin-right: -@alain-fullscreen-content-padding-horizontal;
- margin-left: -@alain-fullscreen-content-padding-horizontal;
- margin-bottom: @alain-fullscreen-content-padding-vertical;
-}
-
-}
-
-@st-prefix: ~'.st';
-
-@{st-prefix} {
- display: block;
- &__selection {
- cursor: pointer;
- padding-left: 2px;
- }
- &__p-left {
- .@{ant-prefix}-table-pagination {
- float: none;
- display: block;
- text-align: left;
- }
- }
- &__p-center {
- .@{ant-prefix}-table-pagination {
- float: none;
- display: block;
- text-align: center;
- }
- }
- // 清除页码底部间距，在大部分列表中会包裹 `nz-card` 导致底部间距过大，若有需求可自行使用 `mb-md` 来调整
- .@{ant-prefix}-table-pagination.@{ant-prefix}-pagination {
- margin-bottom: 0;
- }
-}
-
-@sv-prefix: ~'.sv';
-@sv-label-color: rgba(0, 0, 0, 0.5);
-@sv-detail-color: @text-color;
-@sv-type-primary-color: @primary-color;
-@sv-type-success-color: @success-color;
-@sv-type-danger-color: @error-color;
-@sv-type-warning-color: @warning-color;
-@sv-bottom: @layout-gutter * 2;
-@sv-default-text: '-';
-
-@{sv-prefix} {
- display: block;
- + @{sv-prefix} {
- margin-top: @sv-bottom;
- }
- &__container {
- display: block;
- // offset the padding-bottom of last row
- .@{ant-prefix}-row {
- margin-bottom: -@sv-bottom;
- overflow: hidden;
- }
- }
- &__item {
- &-fixed {
- display: flex;
- @{sv-prefix}__label {
- text-align: right;
- flex: 0 0 auto;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- @{sv-prefix}__detail {
- flex: 1 0 0;
- }
- }
- }
- &__title {
- display: block;
- font-size: 14px;
- color: @heading-color;
- font-weight: 500;
- margin-bottom: @sv-bottom;
- }
- &__label {
- line-height: 22px;
- padding-bottom: @sv-bottom;
- margin-right: 8px;
- color: @sv-label-color;
- white-space: nowrap;
- display: table-cell;
- &:not(@{sv-prefix}__label-empty) {
- &:after {
- content: ':';
- margin: 0 8px 0 2px;
- position: relative;
- top: -0.5px;
- }
- }
- }
- &__detail {
- line-height: 22px;
- width: 100%;
- padding-bottom: @sv-bottom;
- color: @sv-detail-color;
- display: table-cell;
- word-break: break-all;
- }
- &__type {
- &-primary @{sv-prefix}__detail {
- color: @sv-type-primary-color;
- }
- &-success @{sv-prefix}__detail {
- color: @sv-type-success-color;
- }
- &-danger @{sv-prefix}__detail {
- color: @sv-type-danger-color;
- }
- &-warning @{sv-prefix}__detail {
- color: @sv-type-warning-color;
- }
- }
- &__default {
- &:before {
- content: @sv-default-text;
- }
- }
- &__small {
- // offset the padding-bottom of last row
- .@{ant-prefix}-row {
- margin-bottom: -8px;
- }
- @{sv-prefix}__title {
- margin-bottom: 12px;
- color: @text-color;
- }
- @{sv-prefix}__label,
- @{sv-prefix}__detail {
- padding-bottom: 8px;
- }
- }
- &__large {
- @{sv-prefix}__title {
- font-size: 16px;
- }
- }
- &__vertical {
- @{sv-prefix}__label {
- padding-bottom: 8px;
- }
-
- @{sv-prefix}__label,
- @{sv-prefix}__detail {
- display: block;
- }
- }
-}
-
-@se-prefix: ~'.se';
-@se-label-color: rgba(0, 0, 0, 0.85);
-@se-compact-bottom: @layout-gutter;
-
-@{se-prefix} {
- &__title {
- display: block;
- font-size: 14px;
- color: @heading-color;
- font-weight: 500;
- line-height: @form-component-max-height - 0.0001px;
- }
- &__item {
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- }
- }
- &__label {
- text-align: right;
- color: @se-label-color;
- white-space: nowrap;
- display: table-cell;
- flex: 0 0 auto;
- width: initial;
- &-optional {
- color: rgba(0, 0, 0, 0.45);
- }
- }
- &__control {
- flex: 1 0 0;
- width: 100%;
- }
- &__compact {
- @{se-prefix}__title,
- @{se-prefix}__item {
- margin-bottom: @se-compact-bottom;
- }
- .@{ant-prefix}-form-extra {
- display: none;
- }
- }
- &__line {
- border-bottom: 1px dashed #e8e8e8;
- @{se-prefix}__label,
- @{se-prefix}__control {
- padding-bottom: @se-compact-bottom;
- }
- }
- &__inline,
- &__vertical {
- @{se-prefix}__nolabel {
- display: none !important;
- }
- }
- &__horizontal {
- @{se-prefix}__item {
- display: flex;
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- &__vertical {
- @{se-prefix}__item {
- display: block;
- }
- }
- &__inline {
- @{se-prefix}__label,
- @{se-prefix}__control {
- text-align: left;
- width: initial;
- flex: none;
- }
- @{se-prefix}__item {
- &:last-child {
- margin-right: 0;
- }
- }
- }
- // fix angular & ng-zorro-antd
- .@{ant-prefix}-form-explain {
- display: block;
- }
-}
-
-@media (min-width: @mobile-min) {
-}
-
-@media (max-width: @mobile-max) {
- @{se-prefix} {
- &__horizontal {
- @{se-prefix}__item {
- display: block;
- }
- }
- &__horizontal,
- &__vertical {
- @{se-prefix}__label,
- @{se-prefix}__control {
- width: 100% !important;
- }
- }
- }
-}
-
-@avatar-list-prefix: ~'.avatar-list';
-
-@{avatar-list-prefix} {
- display: inline-block;
- &__wrap {
- display: inline-block;
- margin-left: 8px;
- font-size: 0;
- padding: 0;
- }
- &__item {
- display: inline-block;
- font-size: @font-size-base;
- margin-left: -8px;
- width: @avatar-size-base;
- height: @avatar-size-base;
- .@{ant-prefix}-avatar {
- border: 1px solid #fff;
- cursor: pointer;
- }
- }
- &__large {
- width: @avatar-size-lg;
- height: @avatar-size-lg;
- }
- &__small {
- width: @avatar-size-sm;
- height: @avatar-size-sm;
- }
- &__mini {
- width: 20px;
- height: 20px;
- .@{ant-prefix}-avatar {
- width: 20px;
- height: 20px;
- line-height: 20px;
- &-string {
- font-size: 12px;
- line-height: 18px;
- }
- }
- }
-}
-
-.ellipsis {
- overflow: hidden;
- display: -webkit-box;
-}
-
-.error-collect {
- color: #f5222d;
- padding-right: 24px;
- cursor: pointer;
-}
-
-@exception-prefix: ~'.exception';
-@{exception-prefix} {
- display: flex;
- align-items: center;
- height: 100%;
- &__img-block {
- flex: 0 0 62.5%;
- width: 62.5%;
- padding-right: 152px;
- zoom: 1;
- &:before,
- &:after {
- content: ' ';
- display: table;
- }
- &:after {
- clear: both;
- visibility: hidden;
- font-size: 0;
- height: 0;
- }
- }
- &__img {
- height: 360px;
- width: 100%;
- max-width: 430px;
- float: right;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: 100% 100%;
- }
- &__cont {
- flex: auto;
- &-title {
- color: #434e59;
- font-size: 72px;
- font-weight: 600;
- line-height: 72px;
- margin-bottom: 24px;
- }
- &-desc {
- color: @text-color-secondary;
- font-size: 20px;
- line-height: 28px;
- margin-bottom: 16px;
- }
- &-actions {
- button:not(:last-child) {
- margin-right: 8px;
- }
- }
- }
-}
-
-@media screen and (max-width: @screen-xl) {
- @{exception-prefix} {
- &__img-block {
- padding-right: 88px;
- }
- }
-}
-
-@media screen and (max-width: @screen-sm) {
- @{exception-prefix} {
- display: block;
- text-align: center;
- &__img-block {
- padding-right: 0;
- margin: 0 auto 24px;
- }
- }
-}
-
-@media screen and (max-width: @screen-xs) {
- @{exception-prefix} {
- &__img-block {
- margin-bottom: -24px;
- overflow: hidden;
- }
- }
-}
-
-@footer-toolbar-prefix: ~'.footer-toolbar';
-@footer-toolbar-height: 56px;
-@footer-toolbar-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
-@footer-toolbar-bg: #fff;
-@footer-toolbar-border-top: 1px solid @border-color-split;
-@footer-toolbar-padding: 0 24px;
-
-@{footer-toolbar-prefix} {
- display: flex;
- position: fixed;
- width: 100%;
- bottom: 0;
- right: 0;
- height: @footer-toolbar-height;
- line-height: @footer-toolbar-height;
- box-shadow: @footer-toolbar-box-shadow;
- background: @footer-toolbar-bg;
- border-top: @footer-toolbar-border-top;
- padding: @footer-toolbar-padding;
- transition: all 0.3s;
- z-index: @zindex;
- &__left {
- flex: 1;
- }
-}
-
-@full-content-prefix: ~'.full-content';
-
-@{full-content-prefix} {
- display: block;
- height: 100%;
- overflow: hidden;
- &__body {
- overflow: hidden;
- }
- &__opened {
- }
- &__hidden-title {
- }
-}
-
-@global-footer-prefix: ~'.global-footer';
-
-@{global-footer-prefix} {
- display: block;
- padding: 0 16px;
- margin: 48px 0 24px;
- text-align: center;
- &__links {
- margin-bottom: 8px;
- &-item {
- display: inline-block;
- color: @text-color-secondary;
- transition: all 0.3s;
- &:not(:last-child) {
- margin-right: 40px;
- }
- &:hover {
- color: @text-color;
- }
- }
- }
- &__copyright {
- color: @text-color-secondary;
- font-size: @font-size-base;
- }
-}
-
-@notice-icon-prefix: ~'.notice-icon';
-
-@{notice-icon-prefix} {
- &__btn {
- cursor: pointer;
- display: inline-block;
- transition: all 0.3s;
- }
-
- & {
- width: 336px;
- }
-
- .@{ant-prefix}-popover-inner-content {
- padding: 0;
- }
- .@{ant-prefix}-tabs {
- &-bar {
- margin-bottom: 4px;
- }
- &-nav {
- .@{ant-prefix}-tabs-tab {
- margin-right: 32px;
- padding: 12px 16px;
- &:last-child {
- margin-right: 0;
- }
- }
- &-scroll {
- text-align: center;
- }
- }
- }
- .@{ant-prefix}-list {
- max-height: 400px;
- overflow: auto;
- &-item {
- transition: all 0.3s;
- overflow: hidden;
- cursor: pointer;
- padding-left: 24px;
- padding-right: 24px;
- &:last-child {
- border-bottom: 0;
- }
- &:hover {
- background: @primary-1;
- }
- &-meta {
- width: 100%;
- &-title {
- font-weight: normal;
- margin-bottom: 8px;
- }
- }
- .@{ant-prefix}-avatar {
- background: #fff;
- margin-top: 4px;
- }
- }
- }
- &__notfound {
- text-align: center;
- padding: 73px 0 88px;
- color: @text-color-secondary;
- &-img {
- display: inline-block;
- margin-bottom: 16px;
- height: 76px;
- }
- }
- &__clear {
- height: 46px;
- line-height: 46px;
- text-align: center;
- color: @text-color;
- border-radius: 0 0 @border-radius-base @border-radius-base;
- border-top: 1px solid @border-color-split;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- color: @heading-color;
- }
- }
- &__item {
- .@{ant-prefix}-badge-count {
- top: -10px;
- }
- &-read {
- opacity: 0.4;
- }
- &-desc {
- font-size: 12px;
- line-height: @line-height-base;
- }
- &-time {
- font-size: 12px;
- margin-top: 4px;
- line-height: @line-height-base;
- }
- &-extra {
- float: right;
- color: @text-color-secondary;
- font-weight: normal;
- margin-right: 0;
- margin-top: -1.5px;
- }
- }
-}
-
-@page-header-prefix: ~'.page-header';
-@page-header-bg: #fff;
-@page-header-wide: 1200px;
-
-@{page-header-prefix} {
- display: block;
- background-color: @page-header-bg;
- padding: 16px 32px 0 32px;
- border-bottom: @border-width-base @border-style-base @border-color-split;
- &__wide {
- max-width: @page-header-wide;
- margin: auto;
- }
- .@{ant-prefix}-breadcrumb {
- margin-bottom: 16px;
- }
- .@{ant-prefix}-tabs {
- margin: 0 0 -17px -8px;
- &-bar {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
- }
- &__detail {
- display: flex;
- }
- &__row {
- display: flex;
- width: 100%;
- }
- &__logo {
- flex: 0 1 auto;
- margin-right: 16px;
- padding-top: 1px;
- img {
- width: 28px;
- height: 28px;
- border-radius: @border-radius-base;
- display: block;
- }
- }
- &__title {
- font-size: 20px;
- font-weight: 500;
- color: @heading-color;
- small {
- font-weight: normal;
- font-size: 14px;
- padding-left: @layout-gutter;
- }
- }
- &__action {
- margin-left: 56px;
- min-width: 266px;
- }
-
- &__title,
- &__desc {
- flex: auto;
- }
-
- &__action,
- &__extra,
- &__main {
- flex: 0 1 auto;
- }
-
- &__main {
- width: 100%;
- }
-
- &__title,
- &__action {
- margin-bottom: 16px;
- }
-
- &__logo,
- &__desc,
- &__extra {
- margin-bottom: 16px;
- }
-
- &__action,
- &__extra {
- text-align: right;
- }
-
- &__extra {
- margin-left: 88px;
- min-width: 242px;
- }
- @media screen and (max-width: @screen-xl) {
- &__extra {
- margin-left: 44px;
- }
- }
- @media screen and (max-width: @screen-lg) {
- &__extra {
- margin-left: 20px;
- }
- }
- @media screen and (max-width: @screen-md) {
- &__row {
- display: block;
- }
- &__action,
- &__extra {
- margin-left: 0;
- text-align: left;
- }
- }
- @media screen and (max-width: @screen-sm) {
- &__detail {
- display: block;
- }
- }
- @media screen and (max-width: @screen-xs) {
- &__action {
- .@{ant-prefix}-btn-group,
- .@{ant-prefix}-btn {
- display: block;
- margin-bottom: 8px;
- }
- .@{ant-prefix}-input-search-enter-button {
- .@{ant-prefix}-btn {
- margin-bottom: 0;
- }
- }
- .@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
- display: inline-block;
- margin-bottom: 0;
- }
- }
- }
-}
-
-@quick-menu-prefix: ~'.quick-menu';
-@quick-menu-border-width: 1px;
-@quick-menu-ctrl-hw: 50px;
-@quick-menu-border-color: #fff;
-
-@{quick-menu-prefix} {
- display: block;
- position: fixed;
- right: -@quick-menu-border-width;
- left: auto;
- backface-visibility: hidden;
- border: @quick-menu-border-width solid @quick-menu-border-color;
- z-index: @zindex + 2;
- transition: margin 0.3s cubic-bezier(1, 0, 0, 1);
- &__inner {
- position: relative;
- padding: 0 12px;
- }
- &__ctrl {
- position: absolute;
- top: -1px;
- left: -@quick-menu-ctrl-hw;
- width: @quick-menu-ctrl-hw;
- height: @quick-menu-ctrl-hw;
- border: @quick-menu-border-width solid @quick-menu-border-color;
- border-right: 0;
- text-align: center;
- cursor: pointer;
- border-radius: 3px 0 0 3px;
- &-icon {
- line-height: @quick-menu-ctrl-hw - 1;
- font-size: 20px;
- }
- }
-}
-
-.qr {
- display: inline-block;
- &__img {
- max-width: 100%;
- max-height: 100%;
- }
-}
-
-@result-extra-bg: #fafafa;
-
-.result {
- display: block;
- text-align: center;
- width: 72%;
- margin: 0 auto;
-
- @media screen and (max-width: @screen-xs) {
- width: 100%;
- }
-
- &__icon {
- font-size: 72px;
- line-height: 72px;
- margin-bottom: 24px;
- &-success {
- color: @success-color;
- }
- &-error {
- color: @error-color;
- }
- }
- &__title {
- font-size: 24px;
- color: @heading-color;
- font-weight: 500;
- line-height: 32px;
- margin-bottom: 16px;
- }
- &__desc {
- font-size: 14px;
- line-height: 22px;
- color: @text-color-secondary;
- margin-bottom: 24px;
- }
- &__extra {
- background: @result-extra-bg;
- padding: 24px 40px;
- border-radius: @border-radius-sm;
- text-align: left;
-
- @media screen and (max-width: @screen-xs) {
- padding: 18px 20px;
- }
- }
- &__actions {
- margin-top: 32px;
- button:not(:last-child) {
- margin-right: 8px;
- }
- }
- .@{ant-prefix}-steps .@{ant-prefix}-steps-head,
- .@{ant-prefix}-steps .@{ant-prefix}-steps-title {
- background: @result-extra-bg;
- }
-}
-
-@reuse-tab-prefix: ~'.reuse-tab';
-@reuse-tab-height: 52px;
-@reuse-tab-bg: #fff;
-@reuse-tab-padding: 8px;
-@reuse-tab-border-color: #d9d9d9;
-
-@{reuse-tab-prefix} {
- display: block;
- background-color: @reuse-tab-bg;
- padding: @reuse-tab-padding;
- border-bottom: 1px solid @reuse-tab-border-color;
- outline: none;
- user-select: none;
- .@{ant-prefix}-tabs-bar {
- margin-bottom: 0;
- border-bottom: none;
- }
- .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
- padding: 0;
- .name {
- display: inline-block;
- padding: 8px 20px;
- }
- @{reuse-tab-prefix}__op {
- display: none;
- position: absolute;
- top: 14px;
- right: 2px;
- margin: 0;
- font-size: 10px;
- }
- &:hover {
- @{reuse-tab-prefix}__op {
- display: block;
- }
- }
- }
-}
-
-@{reuse-tab-prefix}__cm {
- .@{ant-prefix}-menu {
- border: 1px solid #e9e9e9;
- }
-}
-
-.tag-select {
- user-select: none;
- margin-left: -8px;
- position: relative;
- overflow: hidden;
- max-height: @form-component-max-height - 0.0001px;
- line-height: @form-component-max-height - 0.0001px;
- transition: all 0.3s;
- display: block;
- &__expanded {
- transition: all 0.3s;
- max-height: 200px;
- }
- &__has-expand {
- padding-right: 50px;
- }
- .@{ant-prefix}-tag {
- padding: 0 8px;
- margin-right: 24px;
- }
- &__trigger {
- position: absolute;
- top: 0;
- right: 0;
- &-icon {
- margin-left: 8px;
- font-size: 12px;
- }
- }
-}
-
-g2-chart,
-g2-bar,
-g2-gauge,
-g2-mini-area,
-g2-mini-bar,
-g2-single-bar,
-g2-tag-cloud,
-g2-timeline,
-g2,
-g2-custom {
- display: block;
-}
-
-g2-bar,
-g2-tag-cloud {
- width: 100%;
-}
-
-@g2-card-prefix: ~'.g2-card';
-
-@{g2-card-prefix} {
- position: relative;
- &__top {
- position: relative;
- overflow: hidden;
- width: 100%;
- &-margin {
- margin-bottom: 12px;
- }
- &-has-margin {
- margin-bottom: 20px;
- }
- }
- &__meta {
- &-wrap {
- float: left;
- }
- color: @text-color-secondary;
- font-size: @font-size-base;
- line-height: 22px;
- height: 22px;
- &-action {
- cursor: pointer;
- position: absolute;
- top: 4px;
- right: 0;
- line-height: 1;
- }
- }
- &__avatar {
- position: relative;
- top: 4px;
- float: left;
- margin-right: 20px;
- img {
- border-radius: 100%;
- }
- }
- &__total {
- overflow: hidden;
- text-overflow: ellipsis;
- word-break: break-all;
- white-space: nowrap;
- color: @heading-color;
- margin-top: 4px;
- margin-bottom: 0;
- font-size: 30px;
- line-height: 38px;
- height: 38px;
- }
- &__desc {
- margin-bottom: 12px;
- width: 100%;
- }
- &__footer {
- border-top: 1px solid @border-color-split;
- padding-top: 9px;
- margin-top: 8px;
- & > * {
- position: relative;
- }
- }
-}
-
-@g2-gauge-prefix: ~'.g2-gauge';
-
-@{g2-gauge-prefix} {
- &__desc {
- width: 300px;
- text-align: center;
- font-size: 12px;
- }
- &__title {
- font-size: 14px;
- color: rgba(0,0,0,0.43);
- }
- &__percent {
- font-size: 24px;
- color: rgba(0,0,0,0.85);
- }
-}
-
-@g2-mini-progress-prefix: ~'.g2-mini-progress';
-
-@{g2-mini-progress-prefix} {
- display: block;
- padding: 5px 0;
- position: relative;
- width: 100%;
- &__wrap {
- background-color: @background-color-base;
- position: relative;
- }
- &__value {
- transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
- border-radius: 1px 0 0 1px;
- background-color: @primary-color;
- width: 0;
- height: 100%;
- }
- &__target {
- position: absolute;
- top: 0;
- bottom: 0;
- &-item {
- border-radius: 100px;
- position: absolute;
- top: 0;
- left: 0;
- height: 4px;
- width: 2px;
- &:last-child {
- top: auto;
- bottom: 0;
- }
- }
- }
-}
-
-@g2-pie-prefix: ~'.g2-pie';
-
-@{g2-pie-prefix} {
- display: block;
- position: relative;
- &__chart {
- position: relative;
- }
- &__legend {
- position: absolute;
- right: 0;
- min-width: 200px;
- top: 50%;
- transform: translateY(-50%);
- margin: 0 20px;
- list-style: none;
- padding: 0;
- &-item {
- cursor: pointer;
- margin-bottom: 16px;
- height: 22px;
- line-height: 22px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- &-title {
- color: @text-color;
- }
- &-dot {
- border-radius: 8px;
- display: inline-block;
- margin-right: 8px;
- position: relative;
- top: -1px;
- height: 8px;
- width: 8px;
- }
- &-percent {
- color: @text-color-secondary;
- }
- &-value {
- position: absolute;
- right: 0;
- }
- &-has {
- @{g2-pie-prefix}__chart {
- width: ~'calc(100% - 240px)';
- }
- }
- &-block {
- @{g2-pie-prefix}__chart {
- width: 100%;
- margin: 0 0 32px;
- }
- @{g2-pie-prefix}__legend {
- position: relative;
- transform: none;
- }
- }
- }
- &__total {
- position: absolute;
- left: 50%;
- top: 50%;
- text-align: center;
- height: 62px;
- transform: translate(-50%, -50%);
- &-title {
- color: @text-color-secondary;
- font-size: 14px;
- line-height: 22px;
- height: 22px;
- margin-bottom: 8px;
- font-weight: normal;
- }
- &-stat {
- color: @heading-color;
- display: block;
- font-size: 1.2em;
- height: 32px;
- line-height: 32px;
- white-space: nowrap;
- }
- }
- &__mini {
- @{g2-pie-prefix}__total {
- &-title {
- margin-bottom: 0;
- margin-top: 4px;
- }
- }
- }
-}
-
-@g2-radar-prefix: ~'.g2-radar';
-
-@{g2-radar-prefix} {
- display: block;
- &__legend {
- margin-top: 16px;
- &-item {
- position: relative;
- text-align: center;
- cursor: pointer;
- color: @text-color-secondary;
- line-height: 22px;
- &:after {
- background-color: @border-color-split;
- position: absolute;
- top: 8px;
- right: 0;
- height: 40px;
- width: 1px;
- content: '';
- }
- &:last-child::after {
- display: none;
- }
- }
- &-title {
- color: @heading-color;
- padding-left: 16px;
- font-size: 24px;
- line-height: 32px;
- margin-top: 4px;
- margin-bottom: 0;
- }
- &-dot {
- border-radius: 6px;
- display: inline-block;
- margin-right: 6px;
- position: relative;
- top: -1px;
- height: 6px;
- width: 6px;
- }
- }
-}
-
-@g2-water-wave-prefix: ~'.g2-water-wave';
-
-@{g2-water-wave-prefix} {
- display: inline-block;
- position: relative;
- transform-origin: left;
- &__desc {
- position: absolute;
- left: 0;
- top: 32px;
- text-align: center;
- width: 100%;
- &-title {
- color: @text-color-secondary;
- font-size: 14px;
- line-height: 22px;
- }
- &-percent {
- color: @heading-color;
- line-height: 32px;
- font-size: 24px;
- }
- }
- &__canvas {
- transform: scale(0.5);
- transform-origin: 0 0;
- }
-}
-
-@number-info-prefix: ~'.number-info';
-@{number-info-prefix} {
- display: block;
- &__title {
- color: @text-color;
- font-size: @font-size-lg;
- margin-bottom: 16px;
- transition: all 0.3s;
- &-sub {
- color: @text-color-secondary;
- font-size: @font-size-base;
- height: 22px;
- line-height: 22px;
- overflow: hidden;
- text-overflow: ellipsis;
- word-break: break-all;
- white-space: nowrap;
- }
- }
- &__value {
- margin-top: 4px;
- font-size: 0;
- overflow: hidden;
- text-overflow: ellipsis;
- word-break: break-all;
- white-space: nowrap;
- &-suffix {
- color: @text-color;
- font-size: 16px;
- font-style: normal;
- margin-left: 4px;
- }
- &-text {
- color: @heading-color;
- display: inline-block;
- line-height: 32px;
- height: 32px;
- font-size: 24px;
- margin-right: 32px;
- }
- &-sub {
- color: @text-color-secondary;
- font-size: @font-size-lg;
- vertical-align: top;
- margin-right: 0;
- .anticon {
- font-size: 12px;
- transform: scale(0.82);
- margin-left: 4px;
- }
- .anticon-caret-up {
- color: @red-6;
- }
- .anticon-caret-down {
- color: @green-6;
- }
- }
- }
- &__light {
- @{number-info-prefix}__value-text {
- color: @text-color;
- }
- }
-}
-
-@trend-prefix: ~'.trend';
-
-@{trend-prefix} {
- display: inline-block;
- font-size: @font-size-base;
- line-height: 22px;
- &__up,
- &__down {
- margin-left: 4px;
- position: relative;
- top: 1px;
- i {
- font-size: 12px;
- transform: scale(0.83);
- }
- }
- &__up {
- color: @red-6;
- }
- &__down {
- color: @green-6;
- top: -1px;
- }
- &__grey {
- @{trend-prefix}__up,
- @{trend-prefix}__down {
- color: @text-color;
- }
- }
- &__reverse {
- @{trend-prefix}__up {
- color: @green-6;
- }
- @{trend-prefix}__down {
- color: @red-6;
- }
- }
-}
-
-/* You can add global styles to this file, and also import other style files */
-
-// 可以通过 https://ng-alain.github.io/ng-alain/ 获取主题参数代码
-// The theme paraments can be generated at https://ng-alain.github.io/ng-alain/
diff --git a/src/assets/icon/home/Github.png b/src/assets/icon/home/Github.png
deleted file mode 100755
index 1ab9f8f..0000000
Binary files a/src/assets/icon/home/Github.png and /dev/null differ
diff --git a/src/assets/icon/home/andro.png b/src/assets/icon/home/andro.png
deleted file mode 100755
index 41100de..0000000
Binary files a/src/assets/icon/home/andro.png and /dev/null differ
diff --git a/src/assets/icon/home/android.png b/src/assets/icon/home/android.png
deleted file mode 100755
index 4939817..0000000
Binary files a/src/assets/icon/home/android.png and /dev/null differ
diff --git a/src/assets/icon/home/back.png b/src/assets/icon/home/back.png
deleted file mode 100644
index 58cfc11..0000000
Binary files a/src/assets/icon/home/back.png and /dev/null differ
diff --git a/src/assets/icon/home/code.png b/src/assets/icon/home/code.png
deleted file mode 100644
index 0abd59b..0000000
Binary files a/src/assets/icon/home/code.png and /dev/null differ
diff --git a/src/assets/icon/home/icon-left.png b/src/assets/icon/home/icon-left.png
deleted file mode 100755
index 1a66e87..0000000
Binary files a/src/assets/icon/home/icon-left.png and /dev/null differ
diff --git a/src/assets/icon/home/icon-right.png b/src/assets/icon/home/icon-right.png
deleted file mode 100755
index 7c701b7..0000000
Binary files a/src/assets/icon/home/icon-right.png and /dev/null differ
diff --git a/src/assets/icon/home/ios(1).png b/src/assets/icon/home/ios(1).png
deleted file mode 100755
index 2f8e2c5..0000000
Binary files a/src/assets/icon/home/ios(1).png and /dev/null differ
diff --git "a/src/assets/icon/home/ios+\344\272\214\347\273\264\347\240\201.png" "b/src/assets/icon/home/ios+\344\272\214\347\273\264\347\240\201.png"
deleted file mode 100755
index 22823b3..0000000
Binary files "a/src/assets/icon/home/ios+\344\272\214\347\273\264\347\240\201.png" and /dev/null differ
diff --git a/src/assets/icon/home/ios.png b/src/assets/icon/home/ios.png
deleted file mode 100755
index 659033c..0000000
Binary files a/src/assets/icon/home/ios.png and /dev/null differ
diff --git a/src/assets/icon/home/logo-footer.png b/src/assets/icon/home/logo-footer.png
deleted file mode 100755
index 66a901b..0000000
Binary files a/src/assets/icon/home/logo-footer.png and /dev/null differ
diff --git a/src/assets/icon/home/logo.png b/src/assets/icon/home/logo.png
deleted file mode 100755
index 31969a7..0000000
Binary files a/src/assets/icon/home/logo.png and /dev/null differ
diff --git a/src/assets/icon/home/project.jpeg b/src/assets/icon/home/project.jpeg
deleted file mode 100644
index 377f9b2..0000000
Binary files a/src/assets/icon/home/project.jpeg and /dev/null differ
diff --git a/src/assets/icon/home/search.png b/src/assets/icon/home/search.png
deleted file mode 100755
index f24eac6..0000000
Binary files a/src/assets/icon/home/search.png and /dev/null differ
diff --git "a/src/assets/icon/home/\345\244\264\345\203\217-\345\234\210\345\234\210.png" "b/src/assets/icon/home/\345\244\264\345\203\217-\345\234\210\345\234\210.png"
deleted file mode 100755
index 4921282..0000000
Binary files "a/src/assets/icon/home/\345\244\264\345\203\217-\345\234\210\345\234\210.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\345\244\264\345\203\217.png" "b/src/assets/icon/home/\345\244\264\345\203\217.png"
deleted file mode 100755
index 9fa126f..0000000
Binary files "a/src/assets/icon/home/\345\244\264\345\203\217.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\345\276\256\344\277\241 icon.png" "b/src/assets/icon/home/\345\276\256\344\277\241 icon.png"
deleted file mode 100755
index bc28024..0000000
Binary files "a/src/assets/icon/home/\345\276\256\344\277\241 icon.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\345\276\256\345\215\232-icon.png" "b/src/assets/icon/home/\345\276\256\345\215\232-icon.png"
deleted file mode 100755
index 44fb688..0000000
Binary files "a/src/assets/icon/home/\345\276\256\345\215\232-icon.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\345\277\253\351\200\237\347\273\204\351\230\237-button.png" "b/src/assets/icon/home/\345\277\253\351\200\237\347\273\204\351\230\237-button.png"
deleted file mode 100755
index d1c326d..0000000
Binary files "a/src/assets/icon/home/\345\277\253\351\200\237\347\273\204\351\230\237-button.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\346\226\260\345\273\272\351\241\271\347\233\256-button.png" "b/src/assets/icon/home/\346\226\260\345\273\272\351\241\271\347\233\256-button.png"
deleted file mode 100755
index 1ba343a..0000000
Binary files "a/src/assets/icon/home/\346\226\260\345\273\272\351\241\271\347\233\256-button.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\346\265\217\350\247\210icon.png" "b/src/assets/icon/home/\346\265\217\350\247\210icon.png"
deleted file mode 100755
index fe7119e..0000000
Binary files "a/src/assets/icon/home/\346\265\217\350\247\210icon.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\347\202\271\350\265\236icon.png" "b/src/assets/icon/home/\347\202\271\350\265\236icon.png"
deleted file mode 100755
index 1da1c76..0000000
Binary files "a/src/assets/icon/home/\347\202\271\350\265\236icon.png" and /dev/null differ
diff --git "a/src/assets/icon/home/\350\203\214\346\231\257\345\233\276(1).png" "b/src/assets/icon/home/\350\203\214\346\231\257\345\233\276(1).png"
deleted file mode 100755
index 39bffad..0000000
Binary files "a/src/assets/icon/home/\350\203\214\346\231\257\345\233\276(1).png" and /dev/null differ
diff --git "a/src/assets/icon/home/\350\203\214\346\231\257\345\233\276.png" "b/src/assets/icon/home/\350\203\214\346\231\257\345\233\276.png"
deleted file mode 100755
index b242cf5..0000000
Binary files "a/src/assets/icon/home/\350\203\214\346\231\257\345\233\276.png" and /dev/null differ
diff --git a/src/assets/imgs/bg_passport.png b/src/assets/imgs/bg_passport.png
new file mode 100644
index 0000000..5962dbc
Binary files /dev/null and b/src/assets/imgs/bg_passport.png differ
diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png
new file mode 100644
index 0000000..1f24834
Binary files /dev/null and b/src/assets/imgs/logo.png differ
diff --git a/src/assets/logo-color.svg b/src/assets/logo-color.svg
deleted file mode 100644
index 8944a81..0000000
--- a/src/assets/logo-color.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-]>
-
-
-
-
diff --git a/src/assets/logo-full.svg b/src/assets/logo-full.svg
deleted file mode 100644
index c7d8318..0000000
--- a/src/assets/logo-full.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-]>
-
-
-
-
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 28fa8f6..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-]>
-
-
-
-
diff --git a/src/assets/zorro.svg b/src/assets/zorro.svg
deleted file mode 100644
index 059bf56..0000000
--- a/src/assets/zorro.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/environments/environment.hmr.ts b/src/environments/environment.hmr.ts
deleted file mode 100644
index 9a98b65..0000000
--- a/src/environments/environment.hmr.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- SERVER_URL: `./`,
- production: false,
- useHash: true,
- hmr: true,
-};
-
-/*
- * In development mode, to ignore zone related error stack frames such as
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
- * import the following file, but please comment it out in production mode
- * because it will have performance impact when throw error
- */
-// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 68de55e..3612073 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,6 +1,3 @@
export const environment = {
- SERVER_URL: `./`,
- production: true,
- useHash: true,
- hmr: false,
+ production: true
};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index f5138e0..7b4f817 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,18 +1,16 @@
// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
- SERVER_URL: `./`,
- production: false,
- useHash: true,
- hmr: false,
+ production: false
};
/*
- * In development mode, to ignore zone related error stack frames such as
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
- * import the following file, but please comment it out in production mode
- * because it will have performance impact when throw error
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/src/hmr.ts b/src/hmr.ts
deleted file mode 100644
index 0548e44..0000000
--- a/src/hmr.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModuleRef, ApplicationRef } from '@angular/core';
-import { createNewHosts } from '@angularclass/hmr';
-import { NzModalService } from 'ng-zorro-antd';
-
-export const hmrBootstrap = (
- module: any,
- bootstrap: () => Promise>,
-) => {
- let ngModule: NgModuleRef;
- module.hot.accept();
- bootstrap().then(mod => (ngModule = mod));
- module.hot.dispose(() => {
- const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
- const modalService = ngModule.injector.get(NzModalService, null) as NzModalService;
- if (modalService) { modalService.closeAll(); }
- const elements = appRef.components.map(c => c.location.nativeElement);
- const makeVisible = createNewHosts(elements);
- ngModule.destroy();
- makeVisible();
- });
-};
diff --git a/src/index.html b/src/index.html
index db6d417..cc78b7c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,15 +1,15 @@
-
+
Demo
+ Coderiver
diff --git a/src/karma.conf.js b/src/karma.conf.js
new file mode 100644
index 0000000..ee9caa1
--- /dev/null
+++ b/src/karma.conf.js
@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular-devkit/build-angular'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage-istanbul-reporter'),
+ require('@angular-devkit/build-angular/plugins/karma')
+ ],
+ client: {
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ coverageIstanbulReporter: {
+ dir: require('path').join(__dirname, '../coverage'),
+ reports: ['html', 'lcovonly', 'text-summary'],
+ fixWebpackSourcePaths: true
+ },
+ reporters: ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false
+ });
+};
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index f43ba69..fa4e0ae 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,40 +1,13 @@
-import { enableProdMode, ViewEncapsulation } from '@angular/core';
+import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
-import { preloaderFinished } from '@delon/theme';
-preloaderFinished();
-
-import { hmrBootstrap } from './hmr';
-
if (environment.production) {
enableProdMode();
}
-const bootstrap = () => {
- return platformBrowserDynamic()
- .bootstrapModule(AppModule, {
- defaultEncapsulation: ViewEncapsulation.Emulated,
- preserveWhitespaces: false
- })
- .then(res => {
- if ((
window).appBootstrap) {
- (window).appBootstrap();
- }
- return res;
- });
-};
-
-if (environment.hmr) {
- const nodeModule = module as any;
- if (nodeModule['hot']) {
- hmrBootstrap(module, bootstrap);
- } else {
- console.error('HMR is not enabled for webpack-dev-server!');
- console.log('Are you using the --hmr flag for ng serve?');
- }
-} else {
- bootstrap();
-}
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch(err => console.error(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
index ee8b84d..a6d34ea 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -18,7 +18,10 @@
* BROWSER POLYFILLS
*/
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
+ * This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
+ */
+
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
@@ -34,13 +37,6 @@
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
@@ -51,24 +47,33 @@
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
+ */
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ * (window as any).__Zone_enable_cross_context_check = true;
+ *
*/
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
diff --git a/src/style-icons-auto.ts b/src/style-icons-auto.ts
deleted file mode 100644
index 4fb3b24..0000000
--- a/src/style-icons-auto.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-* Automatically generated by 'ng g ng-alain:plugin icon'
-* @see https://ng-alain.com/cli/plugin#icon
-*/
-
-import {
- AlipayCircleOutline,
- ApiOutline,
- AppstoreOutline,
- ArrowDownOutline,
- BookOutline,
- CloudOutline,
- CopyrightOutline,
- CustomerServiceOutline,
- DashboardOutline,
- DatabaseOutline,
- DingdingOutline,
- DislikeOutline,
- DownloadOutline,
- EditOutline,
- EllipsisOutline,
- FileOutline,
- ForkOutline,
- FrownOutline,
- FullscreenExitOutline,
- FullscreenOutline,
- GithubOutline,
- GlobalOutline,
- HddOutline,
- LaptopOutline,
- LikeOutline,
- LockOutline,
- LogoutOutline,
- MailOutline,
- MenuFoldOutline,
- MenuUnfoldOutline,
- MessageOutline,
- PayCircleOutline,
- PieChartOutline,
- PrinterOutline,
- RocketOutline,
- ScanOutline,
- SearchOutline,
- SettingOutline,
- ShareAltOutline,
- ShoppingCartOutline,
- SoundOutline,
- StarOutline,
- TaobaoCircleOutline,
- TaobaoOutline,
- TeamOutline,
- ToolOutline,
- TrophyOutline,
- UsbOutline,
- UserOutline,
- WeiboCircleOutline
-} from '@ant-design/icons-angular/icons';
-
-export const ICONS_AUTO = [
- AlipayCircleOutline,
- ApiOutline,
- AppstoreOutline,
- ArrowDownOutline,
- BookOutline,
- CloudOutline,
- CopyrightOutline,
- CustomerServiceOutline,
- DashboardOutline,
- DatabaseOutline,
- DingdingOutline,
- DislikeOutline,
- DownloadOutline,
- EditOutline,
- EllipsisOutline,
- FileOutline,
- ForkOutline,
- FrownOutline,
- FullscreenExitOutline,
- FullscreenOutline,
- GithubOutline,
- GlobalOutline,
- HddOutline,
- LaptopOutline,
- LikeOutline,
- LockOutline,
- LogoutOutline,
- MailOutline,
- MenuFoldOutline,
- MenuUnfoldOutline,
- MessageOutline,
- PayCircleOutline,
- PieChartOutline,
- PrinterOutline,
- RocketOutline,
- ScanOutline,
- SearchOutline,
- SettingOutline,
- ShareAltOutline,
- ShoppingCartOutline,
- SoundOutline,
- StarOutline,
- TaobaoCircleOutline,
- TaobaoOutline,
- TeamOutline,
- ToolOutline,
- TrophyOutline,
- UsbOutline,
- UserOutline,
- WeiboCircleOutline
-];
diff --git a/src/style-icons.ts b/src/style-icons.ts
deleted file mode 100644
index cececfc..0000000
--- a/src/style-icons.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Custom icon static resources
-
-import {
- InfoOutline,
- BulbOutline,
- ProfileOutline,
- ExceptionOutline,
- LinkOutline,
-} from '@ant-design/icons-angular/icons';
-
-export const ICONS = [
- InfoOutline,
- BulbOutline,
- ProfileOutline,
- ExceptionOutline,
- LinkOutline,
-];
diff --git a/src/styles.less b/src/styles.less
deleted file mode 100644
index 63b11ad..0000000
--- a/src/styles.less
+++ /dev/null
@@ -1,10 +0,0 @@
-// region: PLACEHOLDER, IMPORTANT: don't remove
-@import '~@delon/theme/styles/index';
-@import '~@delon/theme/styles/layout/default/index';
-@import '~@delon/theme/styles/layout/fullscreen/index';
-@import '~@delon/abc/index';
-@import '~@delon/chart/index';
-
-@import './styles/index';
-@import './styles/theme';
-// endregion
diff --git a/src/styles/theme.less b/src/styles/theme.less
deleted file mode 100644
index 680be45..0000000
--- a/src/styles/theme.less
+++ /dev/null
@@ -1,2 +0,0 @@
-// 可以通过 https://ng-alain.github.io/ng-alain/ 获取主题参数代码
-// The theme paraments can be generated at https://ng-alain.github.io/ng-alain/
diff --git a/src/test.ts b/src/test.ts
new file mode 100644
index 0000000..1631789
--- /dev/null
+++ b/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/src/testing/common.spec.ts b/src/testing/common.spec.ts
deleted file mode 100644
index 9c55aed..0000000
--- a/src/testing/common.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-// from: https://github.com/angular/angular/issues/12409
-
-import { TestBed, async, TestModuleMetadata } from '@angular/core/testing';
-import { Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
-import {
- ALAIN_I18N_TOKEN,
- SettingsService,
- MenuService,
- ScrollService,
- _HttpClient
-} from '@delon/theme';
-import { DelonAuthModule } from '@delon/auth';
-import { CoreModule } from '@core/core.module';
-import { SharedModule } from '@shared/shared.module';
-
-import { DelonModule } from '../app/delon.module';
-
-const resetTestingModule = TestBed.resetTestingModule,
- preventAngularFromResetting = () =>
- (TestBed.resetTestingModule = () => TestBed);
-const allowAngularToReset = () =>
- (TestBed.resetTestingModule = resetTestingModule);
-
-export const setUpTestBed = (moduleDef: TestModuleMetadata) => {
- beforeAll(done =>
- (async () => {
- resetTestingModule();
- preventAngularFromResetting();
-
- if (!moduleDef.schemas) {
- moduleDef.schemas = [];
- }
- moduleDef.schemas.push(CUSTOM_ELEMENTS_SCHEMA);
-
- if (!moduleDef.imports) {
- moduleDef.imports = [];
- }
- moduleDef.imports.push(RouterTestingModule);
- moduleDef.imports.push(HttpClientModule);
- moduleDef.imports.push(DelonModule);
- moduleDef.imports.push(SharedModule);
- // auth
- moduleDef.imports.push(DelonAuthModule);
-
- if (!moduleDef.providers) {
- moduleDef.providers = [];
- }
- // load full services
- [SettingsService, MenuService, ScrollService, _HttpClient].forEach(
- (item: any) => {
- if (moduleDef.providers.includes(item)) {
- return;
- }
- moduleDef.providers.push(item);
- }
- );
-
- TestBed.configureTestingModule(moduleDef);
- await TestBed.compileComponents();
-
- // prevent Angular from resetting testing module
- TestBed.resetTestingModule = () => TestBed;
- })()
- .then(done)
- .catch(done.fail)
- );
-
- afterAll(() => allowAngularToReset());
-};
-
-/**
- * get service instance
- */
-export const getService = (type: Type): T => TestBed.get(type);
diff --git a/src/theme.less b/src/theme.less
new file mode 100644
index 0000000..409c0e7
--- /dev/null
+++ b/src/theme.less
@@ -0,0 +1,542 @@
+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
+// The prefix to use on all css classes from ant.
+@ant-prefix : ant;
+
+// -------- Colors -----------
+@primary-color : @blue-6;
+@info-color : @blue-6;
+@success-color : @green-6;
+@processing-color : @blue-6;
+@error-color : @red-6;
+@highlight-color : @red-6;
+@warning-color : @gold-6;
+@normal-color : #d9d9d9;
+
+// Color used by default to control hover and active backgrounds and for
+// alert info backgrounds.
+@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
+@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
+@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
+@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
+@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%)
+@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
+@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
+@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
+@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
+@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
+
+// Base Scaffolding Variables
+// ---
+
+// Background color for ``
+@body-background : #fff;
+// Base background color for most components
+@component-background : #fff;
+@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
+"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+@heading-color : fade(#000, 85%);
+@text-color : fade(#000, 65%);
+@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-variant-base : tabular-nums;
+@font-size-base : 14px;
+@font-size-lg : @font-size-base + 2px;
+@font-size-sm : 12px;
+@line-height-base : 1.5;
+@border-radius-base : 4px;
+@border-radius-sm : 2px;
+
+// vertical paddings
+@padding-lg : 24px; // containers
+@padding-md : 16px; // small containers and buttons
+@padding-sm : 12px; // Form controls and items
+@padding-xs : 8px; // small items
+
+// vertical padding for all form controls
+@control-padding-horizontal: @padding-sm;
+@control-padding-horizontal-sm: @padding-xs;
+
+// The background colors for active and hover states for things like
+// list items or table cells.
+@item-active-bg : @primary-1;
+@item-hover-bg : @primary-1;
+
+// ICONFONT
+@iconfont-css-prefix : anticon;
+
+// LINK
+@link-color : @primary-color;
+@link-hover-color : color(~`colorPalette("@{link-color}", 5)`);
+@link-active-color : color(~`colorPalette("@{link-color}", 7)`);
+@link-decoration : none;
+@link-hover-decoration : none;
+
+// Animation
+@ease-base-out : cubic-bezier(0.7, 0.3, 0.1, 1);
+@ease-base-in : cubic-bezier(0.9, 0, 0.3, 0.7);
+@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
+@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
+@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
+@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
+@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
+@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
+@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
+@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
+@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
+@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
+
+// Border color
+@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
+
+// Outline
+@outline-blur-size : 0;
+@outline-width : 2px;
+@outline-color : @primary-color;
+
+@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%);
+@disabled-bg : @background-color-base;
+@disabled-color-dark : fade(#fff, 35%);
+
+// Shadow
+@shadow-color : rgba(0, 0, 0, .15);
+@box-shadow-base : @shadow-1-down;
+@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 : 400;
+@btn-border-radius-base : @border-radius-base;
+@btn-border-radius-sm : @border-radius-base;
+
+@btn-primary-color : #fff;
+@btn-primary-bg : @primary-color;
+
+@btn-default-color : @text-color;
+@btn-default-bg : #fff;
+@btn-default-border : @border-color-base;
+
+@btn-danger-color : @error-color;
+@btn-danger-bg : @background-color-base;
+@btn-danger-border : @border-color-base;
+
+@btn-disable-color : @disabled-color;
+@btn-disable-bg : @disabled-bg;
+@btn-disable-border : @border-color-base;
+
+@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 @padding-xs - 1px;
+
+@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-5;
+
+// Checkbox
+@checkbox-size : 16px;
+@checkbox-color : @primary-color;
+@checkbox-check-color : #fff;
+@checkbox-border-width : @border-width-base;
+
+// Radio
+@radio-size : 16px;
+@radio-dot-color : @primary-color;
+
+// Radio buttons
+@radio-button-bg : @btn-default-bg;
+@radio-button-color : @btn-default-color;
+@radio-button-hover-color : @primary-5;
+@radio-button-active-color : @primary-7;
+
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs : 480px;
+@screen-xs-min : @screen-xs;
+
+// Small screen / tablet
+@screen-sm : 576px;
+@screen-sm-min : @screen-sm;
+
+// Medium screen / desktop
+@screen-md : 768px;
+@screen-md-min : @screen-md;
+
+// Large screen / wide desktop
+@screen-lg : 992px;
+@screen-lg-min : @screen-lg;
+
+// 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 : #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 : #002140;
+@layout-trigger-color : #fff;
+@layout-zero-trigger-width : 36px;
+@layout-zero-trigger-height : 42px;
+// Layout light theme
+@layout-sider-background-light : #fff;
+@layout-trigger-background-light: #fff;
+@layout-trigger-color-light : @text-color;
+
+// z-index list
+@zindex-affix : 10;
+@zindex-back-top : 10;
+@zindex-modal-mask : 1000;
+@zindex-modal : 1000;
+@zindex-notification : 1010;
+@zindex-message : 1010;
+@zindex-popover : 1030;
+@zindex-picker : 1050;
+@zindex-dropdown : 1050;
+@zindex-tooltip : 1060;
+
+// Animation
+@animation-duration-slow: 0.3s; // Modal
+@animation-duration-base: 0.2s;
+@animation-duration-fast: 0.1s; // Tooltip
+
+// Form
+// ---
+@label-required-color : @highlight-color;
+@label-color : @heading-color;
+@form-item-margin-bottom : 24px;
+@form-item-trailing-colon : true;
+@form-vertical-label-padding : 0 0 8px;
+@form-vertical-label-margin : 0;
+
+// Input
+// ---
+@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;
+@input-outline-offset : 0 0;
+
+// Tooltip
+// ---
+//* Tooltip max width
+@tooltip-max-width: 250px;
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: rgba(0, 0, 0, 0.75);
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip distance with trigger
+@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+// Popover
+// ---
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover text color
+@popover-color: @text-color;
+//** Popover maximum width
+@popover-min-width: 177px;
+//** Popover arrow width
+@popover-arrow-width: 6px;
+//** Popover arrow color
+@popover-arrow-color: @popover-bg;
+//** Popover outer arrow width
+//** Popover outer arrow color
+@popover-arrow-outer-color: @popover-bg;
+//** Popover distance with trigger
+@popover-distance: @popover-arrow-width + 4px;
+
+// Modal
+// --
+@modal-header-bg: @component-background;
+@modal-mask-bg: rgba(0, 0, 0, 0.65);
+
+// Progress
+// --
+@progress-default-color: @processing-color;
+@progress-remaining-color: @background-color-base;
+@progress-text-color: @text-color;
+
+// Menu
+// ---
+@menu-inline-toplevel-item-height: 40px;
+@menu-item-height: 40px;
+@menu-collapsed-width: 80px;
+@menu-bg: @component-background;
+@menu-popup-bg: @component-background;
+@menu-item-color: @text-color;
+@menu-highlight-color: @primary-color;
+@menu-item-active-bg: @item-active-bg;
+@menu-item-active-border-width: 3px;
+@menu-item-group-title-color: @text-color-secondary;
+// dark theme
+@menu-dark-color: @text-color-secondary-dark;
+@menu-dark-bg: @layout-header-background;
+@menu-dark-arrow-color: #fff;
+@menu-dark-submenu-bg: #000c17;
+@menu-dark-highlight-color: #fff;
+@menu-dark-item-active-bg: @primary-color;
+
+// Spin
+// ---
+@spin-dot-size-sm: 14px;
+@spin-dot-size: 20px;
+@spin-dot-size-lg: 32px;
+
+// Table
+// --
+@table-header-bg: @background-color-light;
+@table-header-color: @heading-color;
+@table-header-sort-bg: @background-color-base;
+@table-body-sort-bg: rgba(0, 0, 0, 0.01);
+@table-row-hover-bg: @primary-1;
+@table-selected-row-bg: #fafafa;
+@table-expanded-row-bg: #fbfbfb;
+@table-padding-vertical: 16px;
+@table-padding-horizontal: 16px;
+
+// Tag
+// --
+@tag-default-bg: @background-color-light;
+@tag-default-color: @text-color;
+@tag-font-size: @font-size-sm;
+
+// TimePicker
+// ---
+@time-picker-panel-column-width: 56px;
+@time-picker-panel-width: @time-picker-panel-column-width * 3;
+@time-picker-selected-bg: @background-color-base;
+
+// Carousel
+// ---
+@carousel-dot-width: 16px;
+@carousel-dot-height: 3px;
+@carousel-dot-active-width: 24px;
+
+// Badge
+// ---
+@badge-height: 20px;
+@badge-dot-size: 6px;
+@badge-font-size: @font-size-sm;
+@badge-font-weight: normal;
+@badge-status-size: 6px;
+
+// Rate
+// ---
+@rate-star-color: @yellow-6;
+@rate-star-bg: @border-color-split;
+
+// Card
+// ---
+@card-head-color: @heading-color;
+@card-head-background: transparent;
+@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, 0.09);
+
+// Comment
+// ---
+@comment-padding-base: 16px 0;
+@comment-nest-indent: 44px;
+@comment-author-name-color: @text-color-secondary;
+@comment-author-time-color: #ccc;
+@comment-action-color: @text-color-secondary;
+@comment-action-hover-color: #595959;
+
+// Tabs
+// ---
+@tabs-card-head-background: @background-color-light;
+@tabs-card-height: 40px;
+@tabs-card-active-color: @primary-color;
+@tabs-title-font-size: @font-size-base;
+@tabs-title-font-size-lg: @font-size-lg;
+@tabs-title-font-size-sm: @font-size-base;
+@tabs-ink-bar-color: @primary-color;
+@tabs-bar-margin: 0 0 16px 0;
+@tabs-horizontal-margin: 0 32px 0 0;
+@tabs-horizontal-padding: 12px 16px;
+@tabs-vertical-padding: 8px 24px;
+@tabs-vertical-margin: 0 0 16px 0;
+@tabs-scrolling-size: 32px;
+@tabs-highlight-color: @primary-color;
+@tabs-hover-color: @primary-5;
+@tabs-active-color: @primary-7;
+
+// BackTop
+// ---
+@back-top-color: #fff;
+@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;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-base;
+
+// Switch
+// ---
+@switch-height: 22px;
+@switch-sm-height: 16px;
+@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
+@switch-disabled-opacity: 0.4;
+@switch-color: @primary-color;
+
+// Pagination
+// ---
+@pagination-item-size: 32px;
+@pagination-item-size-sm: 24px;
+@pagination-font-family: Arial;
+@pagination-font-weight-active: 500;
+
+// Breadcrumb
+// ---
+@breadcrumb-base-color: @text-color-secondary;
+@breadcrumb-last-item-color: @text-color;
+@breadcrumb-font-size: @font-size-base;
+@breadcrumb-icon-font-size: @font-size-base;
+@breadcrumb-link-color: @text-color-secondary;
+@breadcrumb-link-color-hover: @primary-5;
+@breadcrumb-separator-color: @text-color-secondary;
+@breadcrumb-separator-margin: 0 @padding-xs;
+
+// Slider
+// ---
+@slider-margin: 14px 6px 10px;
+@slider-rail-background-color: @background-color-base;
+@slider-rail-background-color-hover: #e1e1e1;
+@slider-track-background-color: @primary-5;
+@slider-track-background-color-hover: @primary-6;
+@slider-handle-color: @primary-5;
+@slider-handle-color-hover: @primary-6;
+@slider-handle-color-focus: tint(@primary-color, 20%);
+@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
+@slider-handle-color-tooltip-open: @primary-color;
+@slider-dot-border-color: @border-color-split;
+@slider-dot-border-color-active: @primary-5;
+@slider-disabled-color: @disabled-color;
+@slider-disabled-background-color: @component-background;
+
+// Tree
+// ---
+@tree-title-height: 24px;
+@tree-child-padding: 18px;
+@tree-directory-selected-color: #fff;
+@tree-directory-selected-bg: @primary-color;
+
+// Collapse
+// ---
+@collapse-header-padding: 12px 0 12px 40px;
+@collapse-header-bg: @background-color-light;
+@collapse-content-padding: @padding-md;
+@collapse-content-bg: @component-background;
+
+// Skeleton
+// ---
+@skeleton-color: #f2f2f2;
+
+// Transfer
+// ---
+@transfer-disabled-bg: @disabled-bg;
+
+// Message
+// ---
+@message-notice-content-padding: 10px 16px;
+
+// Motion
+// ---
+@wave-animation-width: 6px;
+
+// Alert
+// ---
+@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
+@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
+@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
+@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
+@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
+@alert-error-icon-color: @error-color;
+
+// List
+// ---
+@list-empty-text-padding: @padding-md;
+@list-item-padding: @padding-sm 0;
+@list-item-content-margin: 0 0 @padding-md 0;
+@list-item-meta-margin-bottom: @padding-md;
+@list-item-meta-avatar-margin-right: @padding-md;
+@list-item-meta-title-margin-bottom: @padding-sm;
+
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index a8179ef..190fd30 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -2,33 +2,10 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
- "types": [
- "node"
- ],
- "target": "es2015",
- "lib": [
- "es5",
- "es6",
- "dom",
- "es2018",
- "es2017",
- "es2015.core",
- "es2015.collection",
- "es2015.generator",
- "es2015.iterable",
- "es2015.promise",
- "es2015.proxy",
- "es2015.reflect",
- "es2015.symbol",
- "es2015.symbol.wellknown",
- "esnext.asynciterable"
- ]
+ "types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
- ],
- "include": [
- "**/*.ts"
]
-}
\ No newline at end of file
+}
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
index 2cad7f1..de77336 100644
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -1,27 +1,10 @@
{
"extends": "../tsconfig.json",
- "baseUrl": "./",
"compilerOptions": {
"outDir": "../out-tsc/spec",
- "module": "commonjs",
- "types": ["jest"],
- "target": "es2015",
- "lib": [
- "es5",
- "es6",
- "dom",
- "es2018",
- "es2017",
- "es2015.core",
- "es2015.collection",
- "es2015.generator",
- "es2015.iterable",
- "es2015.promise",
- "es2015.proxy",
- "es2015.reflect",
- "es2015.symbol",
- "es2015.symbol.wellknown",
- "esnext.asynciterable"
+ "types": [
+ "jasmine",
+ "node"
]
},
"files": [
@@ -30,10 +13,6 @@
],
"include": [
"**/*.spec.ts",
- "**/*.d.ts",
- "**/*.ts"
- ],
- "exclude": [
- "testing/common.spec.ts"
+ "**/*.d.ts"
]
}
diff --git a/src/tslint.json b/src/tslint.json
index f84f3ff..52e2c1a 100644
--- a/src/tslint.json
+++ b/src/tslint.json
@@ -1,30 +1,17 @@
{
- "extends": "../tslint.json",
- "rules": {
- "directive-selector": [
- true,
- "attribute",
- [
- "app",
- "passport",
- "exception",
- "layout",
- "header"
- ],
- "camelCase"
- ],
- "component-selector": [
- true,
- "element",
- [
- "app",
- "passport",
- "exception",
- "layout",
- "header",
- "page"
- ],
- "kebab-case"
- ]
- }
+ "extends": "../tslint.json",
+ "rules": {
+ "directive-selector": [
+ true,
+ "attribute",
+ "app",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "app",
+ "kebab-case"
+ ]
+ }
}
diff --git a/src/typings.d.ts b/src/typings.d.ts
deleted file mode 100644
index 9d737bc..0000000
--- a/src/typings.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// # 3rd Party Library
-// If the library doesn't have typings available at `@types/`,
-// you can still use it by manually adding typings for it
diff --git a/tsconfig.json b/tsconfig.json
index 6b94f2e..9fcb8f7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,72 +1,22 @@
{
"compileOnSave": false,
"compilerOptions": {
- "baseUrl": "src/",
- "importHelpers": true,
+ "baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
- "module": "es2015",
+ "module": "esnext",
"moduleResolution": "node",
- "allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "noImplicitAny": true,
- "removeComments": true,
+ "importHelpers": true,
"target": "es5",
- "types": ["jest"],
"typeRoots": [
"node_modules/@types"
],
"lib": [
- "es2016",
- "es2017",
"es2018",
"dom"
- ],
- "paths": {
- "@shared": [
- "app/shared"
- ],
- "@shared/*": [
- "app/shared/*"
- ],
- "@core": [
- "app/core"
- ],
- "@core/*": [
- "app/core/*"
- ],
- "@testing": [
- "testing"
- ],
- "@testing/*": [
- "testing/*"
- ],
- "@env": [
- "environments"
- ],
- "@env/*": [
- "environments/*"
- ],
- "@components": [
- "app/components"
- ],
- "@components/*": [
- "app/components/*"
- ],
- "@services": [
- "app/services"
- ],
- "@services/*": [
- "app/services/*"
- ],
- "@layout": [
- "app/layout"
- ],
- "@layout/*": [
- "app/layout/*"
- ]
- }
+ ]
}
}
diff --git a/tslint.json b/tslint.json
index 1e6cbae..c740a7b 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,5 +1,7 @@
{
- "extends": ["codelyzer"],
+ "rulesDirectory": [
+ "codelyzer"
+ ],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
@@ -12,13 +14,23 @@
"deprecation": {
"severity": "warn"
},
+ "eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
+ "import-spacing": true,
+ "indent": [
+ true,
+ "spaces"
+ ],
"interface-over-type-literal": true,
"label-position": true,
+ "max-line-length": [
+ true,
+ 140
+ ],
"member-access": false,
"member-ordering": [
true,
@@ -58,20 +70,53 @@
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
+ "no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
+ "one-line": [
+ true,
+ "check-open-brace",
+ "check-catch",
+ "check-else",
+ "check-whitespace"
+ ],
"prefer-const": true,
+ "quotemark": [
+ true,
+ "single"
+ ],
"radix": true,
- "trailing-comma": false,
+ "semicolon": [
+ true,
+ "always"
+ ],
"triple-equals": [
true,
"allow-null-check"
],
+ "typedef-whitespace": [
+ true,
+ {
+ "call-signature": "nospace",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
"unified-signatures": true,
"variable-name": false,
+ "whitespace": [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
@@ -81,31 +126,6 @@
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
- "directive-class-suffix": true,
- "directive-selector": [
- true,
- "attribute",
- [
- "app",
- "passport",
- "exception",
- "layout",
- "header"
- ],
- "camelCase"
- ],
- "component-selector": [
- true,
- "element",
- [
- "app",
- "passport",
- "exception",
- "layout",
- "header",
- "page"
- ],
- "kebab-case"
- ]
+ "directive-class-suffix": true
}
}
diff --git a/wallaby.js b/wallaby.js
deleted file mode 100644
index c02f096..0000000
--- a/wallaby.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const ngxWallabyJest = require('ngx-wallaby-jest');
-
-module.exports = function (wallaby) {
- return {
- files: [
- 'src/**/*.+(ts|html|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
- 'tsconfig.json',
- 'tsconfig.spec.json',
- 'jest.config.js',
- '!src/**/*.spec.ts',
- ],
-
- tests: ['src/**/*.spec.ts'],
-
- env: {
- type: 'node',
- runner: 'node'
- },
- compilers: {
- '**/*.ts?(x)': wallaby.compilers.typeScript({ module: 'commonjs' }),
- },
- preprocessors: {
- // This translate templateUrl and styleUrls to the right implementation
- // For wallaby
- 'projects/**/*.component.ts': ngxWallabyJest,
- },
- testFramework: 'jest'
- };
-};
diff --git a/yarn-error.log b/yarn-error.log
new file mode 100644
index 0000000..8c687f0
--- /dev/null
+++ b/yarn-error.log
@@ -0,0 +1,86 @@
+Arguments:
+ /usr/local/bin/node /usr/local/bin/yarn
+
+PATH:
+ /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+
+Yarn version:
+ 1.13.0
+
+Node version:
+ 10.13.0
+
+Platform:
+ darwin x64
+
+Trace:
+ Error: http://registry.npm.taobao.org/@angular/compiler/download/@angular/compiler-7.2.6.tgz: Request failed "500 Internal Server Error"
+ at ResponseError.ExtendableBuiltin (/usr/local/lib/node_modules/yarn/lib/cli.js:702:66)
+ at new ResponseError (/usr/local/lib/node_modules/yarn/lib/cli.js:808:124)
+ at Request. (/usr/local/lib/node_modules/yarn/lib/cli.js:66325:16)
+ at Request.emit (events.js:182:13)
+ at Request.module.exports.Request.onRequestResponse (/usr/local/lib/node_modules/yarn/lib/cli.js:130274:10)
+ at ClientRequest.emit (events.js:187:15)
+ at HTTPParser.parserOnIncomingClient (_http_client.js:555:21)
+ at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
+ at Socket.socketOnData (_http_client.js:441:20)
+ at Socket.emit (events.js:182:13)
+
+npm manifest:
+ {
+ "name": "coderiver-angular",
+ "version": "0.0.1",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "test": "ng test",
+ "lint": "ng lint",
+ "e2e": "ng e2e"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/animations": "^7.2.1",
+ "@angular/cdk": "^7.2.1",
+ "@angular/common": "~7.2.0",
+ "@angular/compiler": "~7.2.0",
+ "@angular/core": "~7.2.0",
+ "@angular/forms": "~7.2.0",
+ "@angular/platform-browser": "~7.2.0",
+ "@angular/platform-browser-dynamic": "~7.2.0",
+ "@angular/router": "~7.2.0",
+ "core-js": "^2.5.4",
+ "ng-zorro-antd": "^7.0.0-rc.3",
+ "normalize.css": "^8.0.1",
+ "rxjs": "~6.3.3",
+ "tslib": "^1.9.0",
+ "zone.js": "~0.8.26"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "~0.12.0",
+ "@angular/cli": "~7.2.1",
+ "@angular/compiler-cli": "~7.2.0",
+ "@angular/language-service": "~7.2.0",
+ "@types/jasmine": "~2.8.8",
+ "@types/jasminewd2": "~2.0.3",
+ "@types/node": "~8.9.4",
+ "codelyzer": "~4.5.0",
+ "jasmine-core": "~2.99.1",
+ "jasmine-spec-reporter": "~4.2.1",
+ "karma": "~3.1.1",
+ "karma-chrome-launcher": "~2.2.0",
+ "karma-coverage-istanbul-reporter": "~2.0.1",
+ "karma-jasmine": "~1.1.2",
+ "karma-jasmine-html-reporter": "^0.2.2",
+ "protractor": "~5.4.0",
+ "ts-node": "~7.0.0",
+ "tslint": "~5.11.0",
+ "typescript": "~3.2.2"
+ }
+ }
+
+yarn manifest:
+ No manifest
+
+Lockfile:
+ No lockfile
-
-
- .png){kind=icon}
- 
- 
- {{item.name}}
- {{item.introduce}}
-