feat: dark theme (#3410)
* chore: update style * chore: add dark css build * test: update snapshot * chore: remove compact var * chore: update style * test: update snapshotpull/3541/head
zkwolf
GitHub
parent
b7943b38ee
commit
b07190e13d
|
|
@ -170,9 +170,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-background-ghost {
|
&-background-ghost {
|
||||||
color: @component-background;
|
color: @btn-default-ghost-color;
|
||||||
background: transparent !important;
|
background: @btn-default-ghost-bg !important;
|
||||||
border-color: @component-background;
|
border-color: @btn-default-ghost-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-background-ghost&-primary {
|
&-background-ghost&-primary {
|
||||||
|
|
|
||||||
|
|
@ -32,16 +32,30 @@
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
.button-color(
|
& when (@theme = dark) {
|
||||||
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
.button-color(
|
||||||
);
|
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& when not (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
.button-color(
|
& when (@theme = dark) {
|
||||||
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
.button-color(
|
||||||
);
|
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& when not (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-disabled();
|
.button-disabled();
|
||||||
|
|
@ -52,17 +66,27 @@
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
.button-color(
|
& when (@theme = dark) {
|
||||||
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
|
.button-color(@primary-5; @background; @primary-5);
|
||||||
`
|
}
|
||||||
);
|
& when not (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
|
||||||
|
~`colorPalette('@{btn-primary-bg}', 5) `
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
.button-color(
|
& when (@theme = dark) {
|
||||||
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
|
.button-color(@primary-7; @background; @primary-7);
|
||||||
`
|
}
|
||||||
);
|
& when not (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
|
||||||
|
~`colorPalette('@{btn-primary-bg}', 7) `
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.button-disabled();
|
.button-disabled();
|
||||||
}
|
}
|
||||||
|
|
@ -72,19 +96,47 @@
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
& when (@border = transparent) {
|
& when (@border = transparent) {
|
||||||
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
|
& when (@theme = dark) {
|
||||||
|
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
|
||||||
|
}
|
||||||
|
& when not (@theme = dark) {
|
||||||
|
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
& when not(@border = transparent) {
|
& when not(@border = transparent) {
|
||||||
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
|
& when (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& when not (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
& when (@border = transparent) {
|
& when (@border = transparent) {
|
||||||
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
|
& when (@theme = dark) {
|
||||||
|
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
|
||||||
|
}
|
||||||
|
& when not (@theme = dark) {
|
||||||
|
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
& when not(@border = transparent) {
|
& when not(@border = transparent) {
|
||||||
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
|
& when (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& when not (@theme = dark) {
|
||||||
|
.button-color(
|
||||||
|
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button-disabled();
|
.button-disabled();
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,8 @@
|
||||||
|
|
||||||
&-hoverable {
|
&-hoverable {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: box-shadow 0.3s border-color 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: @card-hover-border;
|
border-color: @card-hover-border;
|
||||||
box-shadow: @card-shadow;
|
box-shadow: @card-shadow;
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: @component-background;
|
background-color: @cascader-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -127,7 +127,7 @@
|
||||||
z-index: @zindex-dropdown;
|
z-index: @zindex-dropdown;
|
||||||
font-size: @cascader-dropdown-font-size;
|
font-size: @cascader-dropdown-font-size;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
background: @component-background;
|
background: @cascader-menu-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
box-shadow: @box-shadow-base;
|
box-shadow: @box-shadow-base;
|
||||||
|
|
||||||
|
|
@ -168,7 +168,7 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
border-right: @border-width-base @border-style-base @border-color-split;
|
border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
|
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
|
@ -203,7 +203,7 @@
|
||||||
&,
|
&,
|
||||||
&:hover {
|
&:hover {
|
||||||
font-weight: @select-item-selected-font-weight;
|
font-weight: @select-item-selected-font-weight;
|
||||||
background-color: @background-color-light;
|
background-color: @cascader-item-selected-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-expand {
|
&-expand {
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: @checkbox-size;
|
width: @checkbox-size;
|
||||||
height: @checkbox-size;
|
height: @checkbox-size;
|
||||||
background-color: @checkbox-check-color;
|
background-color: @checkbox-check-bg;
|
||||||
border: @checkbox-border-width @border-style-base @border-color-base;
|
border: @checkbox-border-width @border-style-base @border-color-base;
|
||||||
border-radius: @border-radius-sm;
|
border-radius: @border-radius-sm;
|
||||||
// Fix IE checked style
|
// Fix IE checked style
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
.@{comment-prefix-cls} {
|
.@{comment-prefix-cls} {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background-color: @comment-bg;
|
||||||
|
|
||||||
&-inner {
|
&-inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -153,6 +153,9 @@
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: @border-width-base @border-style-base @border-color-inverse;
|
border: @border-width-base @border-style-base @border-color-inverse;
|
||||||
|
& when (@theme = dark) {
|
||||||
|
border-color: @black;
|
||||||
|
}
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: @box-shadow-base;
|
box-shadow: @box-shadow-base;
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
background: @input-bg;
|
background: @component-background;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
|
||||||
|
|
@ -62,33 +62,33 @@
|
||||||
&-horizontal&-with-text-left {
|
&-horizontal&-with-text-left {
|
||||||
&::before {
|
&::before {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 5%;
|
width: @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 95%;
|
width: 100% - @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-horizontal&-with-text-right {
|
&-horizontal&-with-text-right {
|
||||||
&::before {
|
&::before {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 95%;
|
width: 100% - @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 5%;
|
width: @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-inner-text {
|
&-inner-text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 24px;
|
padding: 0 @divider-text-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dashed {
|
&-dashed {
|
||||||
background: none;
|
background: none;
|
||||||
border-color: @border-color-split;
|
border-color: @divider-color;
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
border-width: 1px 0 0;
|
border-width: 1px 0 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -141,7 +141,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: @component-background;
|
background-color: @drawer-bg;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -181,14 +181,14 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: @drawer-header-padding;
|
padding: @drawer-header-padding;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
background: @component-background;
|
background: @drawer-bg;
|
||||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-header-no-title {
|
&-header-no-title {
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
background: @component-background;
|
background: @drawer-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-body {
|
&-body {
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,9 @@
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -7px;
|
top: -@popover-distance + @popover-arrow-width;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: -7px;
|
bottom: -@popover-distance + @popover-arrow-width;
|
||||||
left: -7px;
|
left: -7px;
|
||||||
z-index: -9999;
|
z-index: -9999;
|
||||||
opacity: 0.0001;
|
opacity: 0.0001;
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
padding: @dropdown-edge-child-vertical-padding 0;
|
padding: @dropdown-edge-child-vertical-padding 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
background-color: @component-background;
|
background-color: @dropdown-menu-bg;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -111,6 +111,9 @@
|
||||||
padding: @dropdown-vertical-padding @control-padding-horizontal;
|
padding: @dropdown-vertical-padding @control-padding-horizontal;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
&:hover {
|
||||||
|
color: @text-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
|
@ -192,7 +195,7 @@
|
||||||
&,
|
&,
|
||||||
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
background-color: @component-background;
|
background-color: @dropdown-menu-submenu-disabled-bg;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { defaultConfigProvider } from '../config-provider';
|
||||||
|
|
||||||
const Simple = () => {
|
const Simple = () => {
|
||||||
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
|
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
|
||||||
const prefixCls = getPrefixCls('empty-img-default');
|
const prefixCls = getPrefixCls('empty-img-simple');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg class={prefixCls} width="64" height="41" viewBox="0 0 64 41">
|
<svg class={prefixCls} width="64" height="41" viewBox="0 0 64 41">
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #333;
|
color: @input-icon-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: fade(@black, 80%);
|
color: @input-icon-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,12 @@ exports[`List renders empty list 1`] = `
|
||||||
<div class="ant-spin-container">
|
<div class="ant-spin-container">
|
||||||
<div class="ant-list-empty-text">
|
<div class="ant-list-empty-text">
|
||||||
<div class="ant-empty ant-empty-normal">
|
<div class="ant-empty ant-empty-normal">
|
||||||
<div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
|
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
|
||||||
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
||||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||||
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
||||||
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
|
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg></div>
|
</svg></div>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -60,6 +60,9 @@
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
& when (@theme = dark) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
.placeholder();
|
.placeholder();
|
||||||
|
|
||||||
&:read-only {
|
&:read-only {
|
||||||
|
|
@ -95,7 +98,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
font-variant: initial;
|
font-variant: initial;
|
||||||
background-color: @component-background;
|
background-color: @mentions-dropdown-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: @box-shadow-base;
|
box-shadow: @box-shadow-base;
|
||||||
|
|
@ -144,7 +147,7 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
background-color: @component-background;
|
background-color: @mentions-dropdown-menu-item-hover-bg;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
&-notice-content {
|
&-notice-content {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: @message-notice-content-padding;
|
padding: @message-notice-content-padding;
|
||||||
background: @component-background;
|
background: @message-notice-content-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
box-shadow: @shadow-2;
|
box-shadow: @shadow-2;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: @component-background;
|
background-color: @modal-content-bg;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
padding: @notification-padding;
|
padding: @notification-padding;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
background: @component-background;
|
background: @notification-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
box-shadow: @shadow-2;
|
box-shadow: @shadow-2;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: @component-background;
|
background-color: @pagination-item-bg;
|
||||||
border: @border-width-base @border-style-base @border-color-base;
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
@ -180,7 +180,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: @component-background;
|
background-color: @pagination-item-link-bg;
|
||||||
border: @border-width-base @border-style-base @border-color-base;
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -264,7 +264,7 @@
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: @component-background;
|
background-color: @pagination-item-input-bg;
|
||||||
border: @border-width-base @border-style-base @border-color-base;
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -350,10 +350,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
background: darken(@disabled-bg, 10%);
|
background: @pagination-item-disabled-bg-active;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
a {
|
a {
|
||||||
color: #fff;
|
color: @pagination-item-disabled-color-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@ exports[`Progress render format 1`] = `
|
||||||
<!---->
|
<!---->
|
||||||
<path d="M 50,50 m 0,-47
|
<path d="M 50,50 m 0,-47
|
||||||
a 47,47 0 1 1 0,94
|
a 47,47 0 1 1 0,94
|
||||||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
|
||||||
<path d="M 50,50 m 0,-47
|
<path d="M 50,50 m 0,-47
|
||||||
a 47,47 0 1 1 0,94
|
a 47,47 0 1 1 0,94
|
||||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
|
||||||
</svg><span class="ant-progress-text" title="50%">50%</span></div>
|
</svg><span class="ant-progress-text" title="50%">50%</span></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,8 @@ export default defineComponent({
|
||||||
type: 'line',
|
type: 'line',
|
||||||
percent: 0,
|
percent: 0,
|
||||||
showInfo: true,
|
showInfo: true,
|
||||||
trailColor: '#f3f3f3',
|
// null for different theme definition
|
||||||
|
trailColor: null,
|
||||||
size: 'default',
|
size: 'default',
|
||||||
gapDegree: 0,
|
gapDegree: 0,
|
||||||
strokeLinecap: 'round',
|
strokeLinecap: 'round',
|
||||||
|
|
|
||||||
|
|
@ -69,8 +69,8 @@
|
||||||
@radio-dot-size: @radio-size - 8px;
|
@radio-dot-size: @radio-size - 8px;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: ((@radio-size - @radio-dot-size) / 2) - 1px;
|
top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
|
||||||
left: ((@radio-size - @radio-dot-size) / 2) - 1px;
|
left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
|
||||||
display: table;
|
display: table;
|
||||||
width: @radio-dot-size;
|
width: @radio-dot-size;
|
||||||
height: @radio-dot-size;
|
height: @radio-dot-size;
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
background-color: @radio-button-bg;
|
background-color: @radio-button-bg;
|
||||||
border-color: @border-color-base;
|
border-color: @border-color-base;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: @radio-border-width;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
transition: all @radio-duration;
|
transition: all @radio-duration;
|
||||||
}
|
}
|
||||||
|
|
@ -128,7 +128,7 @@
|
||||||
border-color: @border-color-base !important;
|
border-color: @border-color-base !important;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
&::after {
|
&::after {
|
||||||
background-color: fade(@black, 20%);
|
background-color: @radio-dot-disabled-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -265,16 +265,16 @@ span.@{radio-prefix-cls} + * {
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
|
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
|
||||||
color: @component-background;
|
color: @radio-solid-checked-color;
|
||||||
background: @radio-dot-color;
|
background: @radio-dot-color;
|
||||||
border-color: @radio-dot-color;
|
border-color: @radio-dot-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @component-background;
|
color: @radio-solid-checked-color;
|
||||||
background: @radio-button-hover-color;
|
background: @radio-button-hover-color;
|
||||||
border-color: @radio-button-hover-color;
|
border-color: @radio-button-hover-color;
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
color: @component-background;
|
color: @radio-solid-checked-color;
|
||||||
background: @radio-button-active-color;
|
background: @radio-button-active-color;
|
||||||
border-color: @radio-button-active-color;
|
border-color: @radio-button-active-color;
|
||||||
}
|
}
|
||||||
|
|
@ -301,8 +301,8 @@ span.@{radio-prefix-cls} + * {
|
||||||
}
|
}
|
||||||
|
|
||||||
&-disabled&-checked {
|
&-disabled&-checked {
|
||||||
color: @text-color-inverse;
|
color: @radio-disabled-button-checked-color;
|
||||||
background-color: tint(@black, 90%);
|
background-color: @radio-disabled-button-checked-bg;
|
||||||
border-color: @border-color-base;
|
border-color: @border-color-base;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,6 @@
|
||||||
@error-title-color: @error-color;
|
@error-title-color: @error-color;
|
||||||
@error-description-color: @error-color;
|
@error-description-color: @error-color;
|
||||||
@error-tail-color: @wait-tail-color;
|
@error-tail-color: @wait-tail-color;
|
||||||
@steps-background: @component-background;
|
|
||||||
@steps-nav-arrow-color: fade(@black, 25%);
|
|
||||||
@steps-nav-active-color: @primary-color;
|
@steps-nav-active-color: @primary-color;
|
||||||
|
|
||||||
@steps-icon-size: 32px;
|
@steps-icon-size: 32px;
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,158 @@
|
||||||
@import 'colorPalette';
|
@import 'colorPalette';
|
||||||
|
|
||||||
// color palettes
|
// color palettes
|
||||||
|
@blue-base: #1890ff;
|
||||||
@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
|
@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
|
||||||
@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
|
@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
|
||||||
@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
|
@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
|
||||||
@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
|
@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
|
||||||
@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
|
@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
|
||||||
@blue-6: #1890ff;
|
@blue-6: @blue-base;
|
||||||
@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
|
@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
|
||||||
@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
|
@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
|
||||||
@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
|
@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
|
||||||
@blue-10: color(~`colorPalette('@{blue-6}', 10) `);
|
@blue-10: color(~`colorPalette('@{blue-6}', 10) `);
|
||||||
|
|
||||||
|
@purple-base: #722ed1;
|
||||||
@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
|
@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
|
||||||
@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
|
@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
|
||||||
@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
|
@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
|
||||||
@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
|
@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
|
||||||
@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
|
@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
|
||||||
@purple-6: #722ed1;
|
@purple-6: @purple-base;
|
||||||
@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
|
@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
|
||||||
@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
|
@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
|
||||||
@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
|
@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
|
||||||
@purple-10: color(~`colorPalette('@{purple-6}', 10) `);
|
@purple-10: color(~`colorPalette('@{purple-6}', 10) `);
|
||||||
|
|
||||||
|
@cyan-base: #13c2c2;
|
||||||
@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
|
@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
|
||||||
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
|
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
|
||||||
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
|
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
|
||||||
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
|
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
|
||||||
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
|
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
|
||||||
@cyan-6: #13c2c2;
|
@cyan-6: @cyan-base;
|
||||||
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
|
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
|
||||||
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
|
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
|
||||||
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
|
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
|
||||||
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);
|
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);
|
||||||
|
|
||||||
|
@green-base: #52c41a;
|
||||||
@green-1: color(~`colorPalette('@{green-6}', 1) `);
|
@green-1: color(~`colorPalette('@{green-6}', 1) `);
|
||||||
@green-2: color(~`colorPalette('@{green-6}', 2) `);
|
@green-2: color(~`colorPalette('@{green-6}', 2) `);
|
||||||
@green-3: color(~`colorPalette('@{green-6}', 3) `);
|
@green-3: color(~`colorPalette('@{green-6}', 3) `);
|
||||||
@green-4: color(~`colorPalette('@{green-6}', 4) `);
|
@green-4: color(~`colorPalette('@{green-6}', 4) `);
|
||||||
@green-5: color(~`colorPalette('@{green-6}', 5) `);
|
@green-5: color(~`colorPalette('@{green-6}', 5) `);
|
||||||
@green-6: #52c41a;
|
@green-6: @green-base;
|
||||||
@green-7: color(~`colorPalette('@{green-6}', 7) `);
|
@green-7: color(~`colorPalette('@{green-6}', 7) `);
|
||||||
@green-8: color(~`colorPalette('@{green-6}', 8) `);
|
@green-8: color(~`colorPalette('@{green-6}', 8) `);
|
||||||
@green-9: color(~`colorPalette('@{green-6}', 9) `);
|
@green-9: color(~`colorPalette('@{green-6}', 9) `);
|
||||||
@green-10: color(~`colorPalette('@{green-6}', 10) `);
|
@green-10: color(~`colorPalette('@{green-6}', 10) `);
|
||||||
|
|
||||||
|
@magenta-base: #eb2f96;
|
||||||
@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
|
@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
|
||||||
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
|
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
|
||||||
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
|
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
|
||||||
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
|
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
|
||||||
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
|
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
|
||||||
@magenta-6: #eb2f96;
|
@magenta-6: @magenta-base;
|
||||||
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
|
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
|
||||||
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
|
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
|
||||||
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
|
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
|
||||||
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);
|
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);
|
||||||
|
|
||||||
// alias of magenta
|
// alias of magenta
|
||||||
|
@pink-base: #eb2f96;
|
||||||
@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
|
@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
|
||||||
@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
|
@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
|
||||||
@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
|
@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
|
||||||
@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
|
@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
|
||||||
@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
|
@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
|
||||||
@pink-6: #eb2f96;
|
@pink-6: @pink-base;
|
||||||
@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
|
@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
|
||||||
@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
|
@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
|
||||||
@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
|
@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
|
||||||
@pink-10: color(~`colorPalette('@{pink-6}', 10) `);
|
@pink-10: color(~`colorPalette('@{pink-6}', 10) `);
|
||||||
|
|
||||||
|
@red-base: #f5222d;
|
||||||
@red-1: color(~`colorPalette('@{red-6}', 1) `);
|
@red-1: color(~`colorPalette('@{red-6}', 1) `);
|
||||||
@red-2: color(~`colorPalette('@{red-6}', 2) `);
|
@red-2: color(~`colorPalette('@{red-6}', 2) `);
|
||||||
@red-3: color(~`colorPalette('@{red-6}', 3) `);
|
@red-3: color(~`colorPalette('@{red-6}', 3) `);
|
||||||
@red-4: color(~`colorPalette('@{red-6}', 4) `);
|
@red-4: color(~`colorPalette('@{red-6}', 4) `);
|
||||||
@red-5: color(~`colorPalette('@{red-6}', 5) `);
|
@red-5: color(~`colorPalette('@{red-6}', 5) `);
|
||||||
@red-6: #f5222d;
|
@red-6: @red-base;
|
||||||
@red-7: color(~`colorPalette('@{red-6}', 7) `);
|
@red-7: color(~`colorPalette('@{red-6}', 7) `);
|
||||||
@red-8: color(~`colorPalette('@{red-6}', 8) `);
|
@red-8: color(~`colorPalette('@{red-6}', 8) `);
|
||||||
@red-9: color(~`colorPalette('@{red-6}', 9) `);
|
@red-9: color(~`colorPalette('@{red-6}', 9) `);
|
||||||
@red-10: color(~`colorPalette('@{red-6}', 10) `);
|
@red-10: color(~`colorPalette('@{red-6}', 10) `);
|
||||||
|
|
||||||
|
@orange-base: #fa8c16;
|
||||||
@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
|
@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
|
||||||
@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
|
@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
|
||||||
@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
|
@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
|
||||||
@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
|
@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
|
||||||
@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
|
@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
|
||||||
@orange-6: #fa8c16;
|
@orange-6: @orange-base;
|
||||||
@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
|
@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
|
||||||
@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
|
@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
|
||||||
@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
|
@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
|
||||||
@orange-10: color(~`colorPalette('@{orange-6}', 10) `);
|
@orange-10: color(~`colorPalette('@{orange-6}', 10) `);
|
||||||
|
|
||||||
|
@yellow-base: #fadb14;
|
||||||
@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
|
@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
|
||||||
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
|
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
|
||||||
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
|
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
|
||||||
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
|
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
|
||||||
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
|
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
|
||||||
@yellow-6: #fadb14;
|
@yellow-6: @yellow-base;
|
||||||
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
|
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
|
||||||
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
|
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
|
||||||
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
|
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
|
||||||
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);
|
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);
|
||||||
|
|
||||||
|
@volcano-base: #fa541c;
|
||||||
@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
|
@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
|
||||||
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
|
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
|
||||||
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
|
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
|
||||||
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
|
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
|
||||||
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
|
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
|
||||||
@volcano-6: #fa541c;
|
@volcano-6: @volcano-base;
|
||||||
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
|
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
|
||||||
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
|
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
|
||||||
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
|
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
|
||||||
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);
|
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);
|
||||||
|
|
||||||
|
@geekblue-base: #2f54eb;
|
||||||
@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
|
@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
|
||||||
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
|
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
|
||||||
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
|
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
|
||||||
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
|
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
|
||||||
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
|
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
|
||||||
@geekblue-6: #2f54eb;
|
@geekblue-6: @geekblue-base;
|
||||||
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
|
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
|
||||||
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
|
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
|
||||||
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
|
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
|
||||||
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);
|
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);
|
||||||
|
|
||||||
|
@lime-base: #a0d911;
|
||||||
@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
|
@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
|
||||||
@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
|
@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
|
||||||
@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
|
@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
|
||||||
@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
|
@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
|
||||||
@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
|
@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
|
||||||
@lime-6: #a0d911;
|
@lime-6: @lime-base;
|
||||||
@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
|
@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
|
||||||
@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
|
@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
|
||||||
@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
|
@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
|
||||||
@lime-10: color(~`colorPalette('@{lime-6}', 10) `);
|
@lime-10: color(~`colorPalette('@{lime-6}', 10) `);
|
||||||
|
|
||||||
|
@gold-base: #faad14;
|
||||||
@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
|
@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
|
||||||
@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
|
@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
|
||||||
@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
|
@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
|
||||||
@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
|
@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
|
||||||
@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
|
@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
|
||||||
@gold-6: #faad14;
|
@gold-6: @gold-base;
|
||||||
@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
|
@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
|
||||||
@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
|
@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
|
||||||
@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
|
@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
|
||||||
|
|
|
||||||
|
|
@ -1,510 +1,17 @@
|
||||||
/* stylelint-disable at-rule-no-unknown */
|
// Config global less under antd
|
||||||
|
[class^=~'@{ant-prefix}-'],
|
||||||
// Reboot
|
[class*=~' @{ant-prefix}-'] {
|
||||||
//
|
// remove the clear button of a text input control in IE10+
|
||||||
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
&::-ms-clear,
|
||||||
// styles targeting irrelevant browsers while applying new styles.
|
input::-ms-clear,
|
||||||
//
|
input::-ms-reveal {
|
||||||
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
display: none;
|
||||||
|
|
||||||
// HTML & Body reset
|
|
||||||
@{html-selector},
|
|
||||||
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-selector} {
|
|
||||||
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: fade(@black, 0%); // 6
|
|
||||||
}
|
|
||||||
|
|
||||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
|
||||||
@-ms-viewport {
|
|
||||||
width: device-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
dialog,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
main,
|
|
||||||
nav,
|
|
||||||
section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Body
|
|
||||||
//
|
|
||||||
// 1. remove the margin in all browsers.
|
|
||||||
// 2. As a best practice, apply a default `body-background`.
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0; // 1
|
|
||||||
color: @text-color;
|
|
||||||
font-size: @font-size-base;
|
|
||||||
font-family: @font-family;
|
|
||||||
font-variant: @font-variant-base;
|
|
||||||
line-height: @line-height-base;
|
|
||||||
background-color: @body-background; // 2
|
|
||||||
font-feature-settings: @font-feature-settings-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
|
||||||
// This prevents an unwanted focus outline from appearing around elements that
|
|
||||||
// might still respond to pointer events.
|
|
||||||
//
|
|
||||||
// Credit: https://github.com/suitcss/base
|
|
||||||
[tabindex='-1']:focus {
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Content grouping
|
|
||||||
//
|
|
||||||
// 1. Add the correct box sizing in Firefox.
|
|
||||||
// 2. Show the overflow in Edge and IE.
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box; // 1
|
|
||||||
height: 0; // 1
|
|
||||||
overflow: visible; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Typography
|
|
||||||
//
|
|
||||||
|
|
||||||
// remove top margins from headings
|
|
||||||
//
|
|
||||||
// By default, `<h1>`-`<h6>` 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 `<p>`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
|
|
||||||
border-bottom: 0; // 1
|
|
||||||
cursor: help; // 3
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
text-decoration: @link-decoration;
|
|
||||||
background-color: transparent; // remove the gray background on active links in IE 10.
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.3s;
|
|
||||||
-webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: @link-hover-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&,
|
||||||
color: @link-active-color;
|
*,
|
||||||
}
|
*::before,
|
||||||
|
*::after {
|
||||||
&:active,
|
box-sizing: border-box; // 1
|
||||||
&:hover {
|
|
||||||
text-decoration: @link-hover-decoration;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
color: @disabled-color;
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
|
||||||
// Code
|
|
||||||
//
|
|
||||||
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
|
||||||
font-family: @code-family;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 `<meta name="viewport" content="width=device-width">` is present.
|
|
||||||
// However, they DO support emoving the click delay via `touch-action: manipulation`.
|
|
||||||
// See:
|
|
||||||
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
|
|
||||||
// * http://caniuse.com/#feat=css-touch-action
|
|
||||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
|
||||||
|
|
||||||
a,
|
|
||||||
area,
|
|
||||||
button,
|
|
||||||
[role='button'],
|
|
||||||
input:not([type='range']),
|
|
||||||
label,
|
|
||||||
select,
|
|
||||||
summary,
|
|
||||||
textarea {
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Tables
|
|
||||||
//
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse; // Prevent double borders
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: 0.75em;
|
|
||||||
padding-bottom: 0.3em;
|
|
||||||
color: @text-color-secondary;
|
|
||||||
text-align: left;
|
|
||||||
caption-side: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
// Matches default `<td>` alignment by inheriting from the `<body>`, 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
|
|
||||||
color: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
line-height: 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-selector} [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. `<div>`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;
|
|
||||||
margin: 0;
|
|
||||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
|
||||||
padding: 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
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
padding: 0;
|
|
||||||
color: inherit; // 2
|
|
||||||
font-size: 1.5em;
|
|
||||||
line-height: inherit;
|
|
||||||
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 {
|
|
||||||
color: @text-color-inverse;
|
|
||||||
background: @text-selection-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Utility classes
|
|
||||||
.clearfix {
|
|
||||||
.clearfix();
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,501 @@
|
||||||
|
/* 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
|
||||||
|
|
||||||
|
// HTML & Body reset
|
||||||
|
@{html-selector},
|
||||||
|
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-selector} {
|
||||||
|
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: fade(@black, 0%); // 6
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||||
|
@-ms-viewport {
|
||||||
|
width: device-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Body
|
||||||
|
//
|
||||||
|
// 1. remove the margin in all browsers.
|
||||||
|
// 2. As a best practice, apply a default `body-background`.
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0; // 1
|
||||||
|
color: @text-color;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
font-family: @font-family;
|
||||||
|
font-variant: @font-variant-base;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
background-color: @body-background; // 2
|
||||||
|
font-feature-settings: @font-feature-settings-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||||
|
// This prevents an unwanted focus outline from appearing around elements that
|
||||||
|
// might still respond to pointer events.
|
||||||
|
//
|
||||||
|
// Credit: https://github.com/suitcss/base
|
||||||
|
[tabindex='-1']:focus {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Content grouping
|
||||||
|
//
|
||||||
|
// 1. Add the correct box sizing in Firefox.
|
||||||
|
// 2. Show the overflow in Edge and IE.
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; // 1
|
||||||
|
height: 0; // 1
|
||||||
|
overflow: visible; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Typography
|
||||||
|
//
|
||||||
|
|
||||||
|
// remove top margins from headings
|
||||||
|
//
|
||||||
|
// By default, `<h1>`-`<h6>` 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 `<p>`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
|
||||||
|
border-bottom: 0; // 1
|
||||||
|
cursor: help; // 3
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
text-decoration: @link-decoration;
|
||||||
|
background-color: transparent; // remove the gray background on active links in IE 10.
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.3s;
|
||||||
|
-webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @link-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: @link-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:hover {
|
||||||
|
text-decoration: @link-hover-decoration;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/22503
|
||||||
|
&:focus {
|
||||||
|
text-decoration: @link-focus-decoration;
|
||||||
|
outline: @link-focus-outline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
color: @disabled-color;
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Code
|
||||||
|
//
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||||
|
font-family: @code-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 `<meta name="viewport" content="width=device-width">` is present.
|
||||||
|
// However, they DO support emoving the click delay via `touch-action: manipulation`.
|
||||||
|
// See:
|
||||||
|
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
|
||||||
|
// * http://caniuse.com/#feat=css-touch-action
|
||||||
|
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||||
|
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
[role='button'],
|
||||||
|
input:not([type='range']),
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea {
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Tables
|
||||||
|
//
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse; // Prevent double borders
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: 0.75em;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
text-align: left;
|
||||||
|
caption-side: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
// Matches default `<td>` alignment by inheriting from the `<body>`, 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
|
||||||
|
color: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: 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-selector} [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. `<div>`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;
|
||||||
|
margin: 0;
|
||||||
|
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||||
|
padding: 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
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
padding: 0;
|
||||||
|
color: inherit; // 2
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: inherit;
|
||||||
|
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 {
|
||||||
|
color: @text-color-inverse;
|
||||||
|
background: @text-selection-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility classes
|
||||||
|
.clearfix {
|
||||||
|
.clearfix();
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
@import '../mixins/index';
|
@import '../mixins/index';
|
||||||
@import 'base';
|
@import 'base';
|
||||||
|
@import 'global';
|
||||||
@import 'iconfont';
|
@import 'iconfont';
|
||||||
@import 'motion';
|
@import 'motion';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import './themes/dark.less';
|
||||||
|
@import './core/index';
|
||||||
|
|
@ -409,7 +409,6 @@
|
||||||
|
|
||||||
// Skeleton
|
// Skeleton
|
||||||
// ---
|
// ---
|
||||||
@skeleton-color: #303030;
|
|
||||||
@skeleton-to-color: fade(@white, 16%);
|
@skeleton-to-color: fade(@white, 16%);
|
||||||
|
|
||||||
// Alert
|
// Alert
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,8 @@
|
||||||
@body-background: #fff;
|
@body-background: #fff;
|
||||||
// Base background color for most components
|
// Base background color for most components
|
||||||
@component-background: #fff;
|
@component-background: #fff;
|
||||||
|
// Popover background color
|
||||||
|
@popover-background: @component-background;
|
||||||
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
||||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
|
|
@ -92,6 +94,8 @@
|
||||||
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
|
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
|
||||||
@link-decoration: none;
|
@link-decoration: none;
|
||||||
@link-hover-decoration: none;
|
@link-hover-decoration: none;
|
||||||
|
@link-focus-decoration: none;
|
||||||
|
@link-focus-outline: 0;
|
||||||
|
|
||||||
// Animation
|
// Animation
|
||||||
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
|
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||||
|
|
@ -164,6 +168,10 @@
|
||||||
@btn-disable-bg: @disabled-bg;
|
@btn-disable-bg: @disabled-bg;
|
||||||
@btn-disable-border: @border-color-base;
|
@btn-disable-border: @border-color-base;
|
||||||
|
|
||||||
|
@btn-default-ghost-color: @component-background;
|
||||||
|
@btn-default-ghost-bg: transparent;
|
||||||
|
@btn-default-ghost-border: @component-background;
|
||||||
|
|
||||||
@btn-padding-base: 0 @padding-md - 1px;
|
@btn-padding-base: 0 @padding-md - 1px;
|
||||||
@btn-font-size-lg: @font-size-lg;
|
@btn-font-size-lg: @font-size-lg;
|
||||||
@btn-font-size-sm: @font-size-base;
|
@btn-font-size-sm: @font-size-base;
|
||||||
|
|
@ -184,10 +192,13 @@
|
||||||
|
|
||||||
@btn-group-border: @primary-5;
|
@btn-group-border: @primary-5;
|
||||||
|
|
||||||
|
@btn-text-hover-bg: rgba(0, 0, 0, 0.018);
|
||||||
|
|
||||||
// Checkbox
|
// Checkbox
|
||||||
@checkbox-size: 16px;
|
@checkbox-size: 16px;
|
||||||
@checkbox-color: @primary-color;
|
@checkbox-color: @primary-color;
|
||||||
@checkbox-check-color: #fff;
|
@checkbox-check-color: #fff;
|
||||||
|
@checkbox-check-bg: @checkbox-check-color;
|
||||||
@checkbox-border-width: @border-width-base;
|
@checkbox-border-width: @border-width-base;
|
||||||
|
|
||||||
// Descriptions
|
// Descriptions
|
||||||
|
|
@ -202,15 +213,26 @@
|
||||||
@descriptions-item-label-colon-margin-left: 2px;
|
@descriptions-item-label-colon-margin-left: 2px;
|
||||||
@descriptions-extra-color: @text-color;
|
@descriptions-extra-color: @text-color;
|
||||||
|
|
||||||
|
// Divider
|
||||||
|
@divider-text-padding: 1em;
|
||||||
|
@divider-orientation-margin: 5%;
|
||||||
|
@divider-color: rgba(0, 0, 0, 6%);
|
||||||
|
|
||||||
// Dropdown
|
// Dropdown
|
||||||
@dropdown-selected-color: @primary-color;
|
@dropdown-selected-color: @primary-color;
|
||||||
|
@dropdown-menu-submenu-disabled-bg: @component-background;
|
||||||
|
|
||||||
// Empty
|
// Empty
|
||||||
@empty-font-size: @font-size-base;
|
@empty-font-size: @font-size-base;
|
||||||
|
|
||||||
// Radio
|
// Radio
|
||||||
@radio-size: 16px;
|
@radio-size: 16px;
|
||||||
|
@radio-top: 0px;
|
||||||
|
@radio-border-width: 1px;
|
||||||
|
@radio-dot-size: @radio-size - 8px;
|
||||||
@radio-dot-color: @primary-color;
|
@radio-dot-color: @primary-color;
|
||||||
|
@radio-dot-disabled-color: fade(@black, 20%);
|
||||||
|
@radio-solid-checked-color: @component-background;
|
||||||
|
|
||||||
// Radio buttons
|
// Radio buttons
|
||||||
@radio-button-bg: @btn-default-bg;
|
@radio-button-bg: @btn-default-bg;
|
||||||
|
|
@ -218,6 +240,9 @@
|
||||||
@radio-button-color: @btn-default-color;
|
@radio-button-color: @btn-default-color;
|
||||||
@radio-button-hover-color: @primary-5;
|
@radio-button-hover-color: @primary-5;
|
||||||
@radio-button-active-color: @primary-7;
|
@radio-button-active-color: @primary-7;
|
||||||
|
@radio-disabled-button-checked-bg: tint(@black, 90%);
|
||||||
|
@radio-disabled-button-checked-color: @disabled-color;
|
||||||
|
@radio-wrapper-margin-right: 8px;
|
||||||
|
|
||||||
// Media queries breakpoints
|
// Media queries breakpoints
|
||||||
// Extra small screen / phone
|
// Extra small screen / phone
|
||||||
|
|
@ -299,6 +324,7 @@
|
||||||
@collapse-panel-border-radius: @border-radius-base;
|
@collapse-panel-border-radius: @border-radius-base;
|
||||||
|
|
||||||
//Dropdown
|
//Dropdown
|
||||||
|
@dropdown-menu-bg: @component-background;
|
||||||
@dropdown-vertical-padding: 5px;
|
@dropdown-vertical-padding: 5px;
|
||||||
@dropdown-edge-child-vertical-padding: 4px;
|
@dropdown-edge-child-vertical-padding: 4px;
|
||||||
@dropdown-font-size: @font-size-base;
|
@dropdown-font-size: @font-size-base;
|
||||||
|
|
@ -331,6 +357,7 @@
|
||||||
@input-padding-vertical-lg: 6.5px;
|
@input-padding-vertical-lg: 6.5px;
|
||||||
@input-placeholder-color: hsv(0, 0, 75%);
|
@input-placeholder-color: hsv(0, 0, 75%);
|
||||||
@input-color: @text-color;
|
@input-color: @text-color;
|
||||||
|
@input-icon-color: @input-color;
|
||||||
@input-border-color: @border-color-base;
|
@input-border-color: @border-color-base;
|
||||||
@input-bg: @component-background;
|
@input-bg: @component-background;
|
||||||
@input-number-hover-border-color: @input-hover-border-color;
|
@input-number-hover-border-color: @input-hover-border-color;
|
||||||
|
|
@ -342,6 +369,12 @@
|
||||||
@input-hover-border-color: @primary-5;
|
@input-hover-border-color: @primary-5;
|
||||||
@input-disabled-bg: @disabled-bg;
|
@input-disabled-bg: @disabled-bg;
|
||||||
@input-outline-offset: 0 0;
|
@input-outline-offset: 0 0;
|
||||||
|
@input-icon-hover-color: fade(@black, 85%);
|
||||||
|
|
||||||
|
// Mentions
|
||||||
|
// ---
|
||||||
|
@mentions-dropdown-bg: @component-background;
|
||||||
|
@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg;
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
// ---
|
// ---
|
||||||
|
|
@ -367,6 +400,13 @@
|
||||||
@select-multiple-item-disabled-color: #bfbfbf;
|
@select-multiple-item-disabled-color: #bfbfbf;
|
||||||
@select-multiple-item-disabled-border-color: @select-border-color;
|
@select-multiple-item-disabled-border-color: @select-border-color;
|
||||||
|
|
||||||
|
// Cascader
|
||||||
|
// ---
|
||||||
|
@cascader-bg: @component-background;
|
||||||
|
@cascader-item-selected-bg: @primary-1;
|
||||||
|
@cascader-menu-bg: @component-background;
|
||||||
|
@cascader-menu-border-color-split: @border-color-split;
|
||||||
|
|
||||||
// Cascader
|
// Cascader
|
||||||
// ----
|
// ----
|
||||||
@cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
|
@cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
|
||||||
|
|
@ -416,6 +456,7 @@
|
||||||
@modal-body-padding: 24px;
|
@modal-body-padding: 24px;
|
||||||
@modal-header-bg: @component-background;
|
@modal-header-bg: @component-background;
|
||||||
@modal-header-border-color-split: @border-color-split;
|
@modal-header-border-color-split: @border-color-split;
|
||||||
|
@modal-content-bg: @component-background;
|
||||||
@modal-heading-color: @heading-color;
|
@modal-heading-color: @heading-color;
|
||||||
@modal-footer-bg: transparent;
|
@modal-footer-bg: transparent;
|
||||||
@modal-footer-border-color-split: @border-color-split;
|
@modal-footer-border-color-split: @border-color-split;
|
||||||
|
|
@ -531,6 +572,7 @@
|
||||||
|
|
||||||
// Comment
|
// Comment
|
||||||
// ---
|
// ---
|
||||||
|
@comment-bg: inherit;
|
||||||
@comment-padding-base: 16px 0;
|
@comment-padding-base: 16px 0;
|
||||||
@comment-nest-indent: 44px;
|
@comment-nest-indent: 44px;
|
||||||
@comment-font-size-base: @font-size-base;
|
@comment-font-size-base: @font-size-base;
|
||||||
|
|
@ -588,15 +630,21 @@
|
||||||
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
|
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
|
||||||
@switch-disabled-opacity: 0.4;
|
@switch-disabled-opacity: 0.4;
|
||||||
@switch-color: @primary-color;
|
@switch-color: @primary-color;
|
||||||
|
@switch-bg: @component-background;
|
||||||
@switch-shadow-color: fade(#00230b, 20%);
|
@switch-shadow-color: fade(#00230b, 20%);
|
||||||
|
|
||||||
// Pagination
|
// Pagination
|
||||||
// ---
|
// ---
|
||||||
|
@pagination-item-bg: @component-background;
|
||||||
@pagination-item-size: 32px;
|
@pagination-item-size: 32px;
|
||||||
@pagination-item-size-sm: 24px;
|
@pagination-item-size-sm: 24px;
|
||||||
@pagination-font-family: Arial;
|
@pagination-font-family: Arial;
|
||||||
@pagination-font-weight-active: 500;
|
@pagination-font-weight-active: 500;
|
||||||
@pagination-item-bg-active: @component-background;
|
@pagination-item-bg-active: @component-background;
|
||||||
|
@pagination-item-link-bg: @component-background;
|
||||||
|
@pagination-item-disabled-color-active: @white;
|
||||||
|
@pagination-item-disabled-bg-active: darken(@disabled-bg, 10%);
|
||||||
|
@pagination-item-input-bg: @component-background;
|
||||||
|
|
||||||
// PageHeader
|
// PageHeader
|
||||||
// ---
|
// ---
|
||||||
|
|
@ -656,16 +704,19 @@
|
||||||
// Skeleton
|
// Skeleton
|
||||||
// ---
|
// ---
|
||||||
@skeleton-color: #f2f2f2;
|
@skeleton-color: #f2f2f2;
|
||||||
|
@skeleton-to-color: shade(@skeleton-color, 5%);
|
||||||
|
|
||||||
// Transfer
|
// Transfer
|
||||||
// ---
|
// ---
|
||||||
@transfer-header-height: 40px;
|
@transfer-header-height: 40px;
|
||||||
@transfer-disabled-bg: @disabled-bg;
|
@transfer-disabled-bg: @disabled-bg;
|
||||||
@transfer-list-height: 200px;
|
@transfer-list-height: 200px;
|
||||||
|
@transfer-item-hover-bg: @item-hover-bg;
|
||||||
|
|
||||||
// Message
|
// Message
|
||||||
// ---
|
// ---
|
||||||
@message-notice-content-padding: 10px 16px;
|
@message-notice-content-padding: 10px 16px;
|
||||||
|
@message-notice-content-bg: @component-background;
|
||||||
|
|
||||||
// Motion
|
// Motion
|
||||||
// ---
|
// ---
|
||||||
|
|
@ -707,6 +758,7 @@
|
||||||
// ---
|
// ---
|
||||||
@drawer-header-padding: 16px 24px;
|
@drawer-header-padding: 16px 24px;
|
||||||
@drawer-body-padding: 24px;
|
@drawer-body-padding: 24px;
|
||||||
|
@drawer-bg: @component-background;
|
||||||
|
|
||||||
// Timeline
|
// Timeline
|
||||||
// ---
|
// ---
|
||||||
|
|
@ -731,3 +783,13 @@
|
||||||
@image-preview-operation-size: 18px;
|
@image-preview-operation-size: 18px;
|
||||||
@image-preview-operation-color: @text-color-dark;
|
@image-preview-operation-color: @text-color-dark;
|
||||||
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 45%);
|
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 45%);
|
||||||
|
|
||||||
|
// Steps
|
||||||
|
@steps-nav-arrow-color: fade(@black, 25%);
|
||||||
|
@steps-background: @component-background;
|
||||||
|
|
||||||
|
// Notification
|
||||||
|
// ---
|
||||||
|
@notification-bg: @component-background;
|
||||||
|
@notification-padding-vertical: 16px;
|
||||||
|
@notification-padding-horizontal: 24px;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
left: 1px;
|
left: 1px;
|
||||||
width: @switch-height - 4px;
|
width: @switch-height - 4px;
|
||||||
height: @switch-height - 4px;
|
height: @switch-height - 4px;
|
||||||
background-color: @component-background;
|
background-color: @switch-bg;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all @switch-duration @ease-in-out-circ;
|
transition: all @switch-duration @ease-in-out-circ;
|
||||||
|
|
|
||||||
|
|
@ -60,12 +60,12 @@ exports[`Table renders empty table 1`] = `
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-table-placeholder">
|
<div class="ant-table-placeholder">
|
||||||
<div class="ant-empty ant-empty-normal">
|
<div class="ant-empty ant-empty-normal">
|
||||||
<div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
|
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
|
||||||
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
||||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||||
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
||||||
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
|
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg></div>
|
</svg></div>
|
||||||
|
|
@ -226,12 +226,12 @@ exports[`Table renders empty table with fixed columns 1`] = `
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-table-placeholder">
|
<div class="ant-table-placeholder">
|
||||||
<div class="ant-empty ant-empty-normal">
|
<div class="ant-empty ant-empty-normal">
|
||||||
<div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
|
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
|
||||||
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
||||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||||
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
||||||
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
|
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg></div>
|
</svg></div>
|
||||||
|
|
@ -359,12 +359,12 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-table-placeholder">
|
<div class="ant-table-placeholder">
|
||||||
<div class="ant-empty ant-empty-normal">
|
<div class="ant-empty ant-empty-normal">
|
||||||
<div class="ant-empty-image"><svg class="ant-empty-img-default" width="64" height="41" viewBox="0 0 64 41">
|
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
|
||||||
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
|
||||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||||
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
|
||||||
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-default-path"></path>
|
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg></div>
|
</svg></div>
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-input {
|
&-input {
|
||||||
|
background: @input-bg;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
|
max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item:not(&-item-disabled):hover {
|
&-item:not(&-item-disabled):hover {
|
||||||
background-color: @item-hover-bg;
|
background-color: @transfer-item-hover-bg;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
"pre-publish": "node ./scripts/prepub",
|
"pre-publish": "node ./scripts/prepub",
|
||||||
"prettier": "prettier -c --write '**/*'",
|
"prettier": "prettier -c --write '**/*'",
|
||||||
"pretty-quick": "pretty-quick",
|
"pretty-quick": "pretty-quick",
|
||||||
"dist": "node antd-tools/cli/run.js dist",
|
"dist": "node --max_old_space_size=6144 antd-tools/cli/run.js dist",
|
||||||
"lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.ts,.tsx ./components",
|
"lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.ts,.tsx ./components",
|
||||||
"lint:site": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./antdv-demo",
|
"lint:site": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./antdv-demo",
|
||||||
"lint:docs": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.md ./antdv-demo/docs/**/demo/**",
|
"lint:docs": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.md ./antdv-demo/docs/**/demo/**",
|
||||||
|
|
@ -133,6 +133,7 @@
|
||||||
"gulp-typescript": "^6.0.0-alpha.1",
|
"gulp-typescript": "^6.0.0-alpha.1",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"husky": "^4.0.0",
|
"husky": "^4.0.0",
|
||||||
|
"ignore-emit-webpack-plugin": "^2.0.6",
|
||||||
"istanbul-instrumenter-loader": "^3.0.0",
|
"istanbul-instrumenter-loader": "^3.0.0",
|
||||||
"jest": "^26.0.0",
|
"jest": "^26.0.0",
|
||||||
"jest-environment-jsdom-fifteen": "^1.0.2",
|
"jest-environment-jsdom-fifteen": "^1.0.2",
|
||||||
|
|
@ -144,6 +145,7 @@
|
||||||
"less": "^4.0.0",
|
"less": "^4.0.0",
|
||||||
"less-loader": "^7.0.0",
|
"less-loader": "^7.0.0",
|
||||||
"less-plugin-npm-import": "^2.1.0",
|
"less-plugin-npm-import": "^2.1.0",
|
||||||
|
"less-vars-to-js": "^1.3.0",
|
||||||
"lint-staged": "^10.0.0",
|
"lint-staged": "^10.0.0",
|
||||||
"markdown-it-anchor": "^5.3.0",
|
"markdown-it-anchor": "^5.3.0",
|
||||||
"marked": "0.3.18",
|
"marked": "0.3.18",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/**
|
||||||
|
* convert dark.less into js vars
|
||||||
|
*
|
||||||
|
* const darkVars = require('./dark-vars');
|
||||||
|
*/
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const lessToJs = require('less-vars-to-js');
|
||||||
|
|
||||||
|
const stylePath = path.join(__dirname, '..', 'components', 'style');
|
||||||
|
const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
|
||||||
|
|
||||||
|
const darkPaletteLess = lessToJs(darkLess, {
|
||||||
|
stripPrefix: true,
|
||||||
|
resolveVariables: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = darkPaletteLess;
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/**
|
||||||
|
* convert default.less into js vars
|
||||||
|
*
|
||||||
|
* const darkVars = require('./default-vars');
|
||||||
|
*/
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const lessToJs = require('less-vars-to-js');
|
||||||
|
|
||||||
|
const stylePath = path.join(__dirname, '..', 'components', 'style');
|
||||||
|
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
|
||||||
|
const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
|
||||||
|
|
||||||
|
const defaultPaletteLess = lessToJs(`${colorLess}${defaultLess}`, {
|
||||||
|
stripPrefix: true,
|
||||||
|
resolveVariables: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = defaultPaletteLess;
|
||||||
|
|
@ -6,44 +6,141 @@
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const packageInfo = require('../package.json');
|
const packageInfo = require('../package.json');
|
||||||
|
const defaultVars = require('./default-vars');
|
||||||
|
const darkVars = require('./dark-vars');
|
||||||
|
|
||||||
if (fs.existsSync(path.join(__dirname, '../lib'))) {
|
function generateVersionFile() {
|
||||||
// Build package.json version to lib/version/index.js
|
if (fs.existsSync(path.join(__dirname, '../lib'))) {
|
||||||
// prevent json-loader needing in user-side
|
// Build package.json version to lib/version/index.js
|
||||||
const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js');
|
// prevent json-loader needing in user-side
|
||||||
const versionFileContent = fs.readFileSync(versionFilePath).toString();
|
const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js');
|
||||||
fs.writeFileSync(
|
const versionFileContent = fs.readFileSync(versionFilePath).toString();
|
||||||
versionFilePath,
|
fs.writeFileSync(
|
||||||
versionFileContent.replace(
|
versionFilePath,
|
||||||
`require('../../package.json')`,
|
versionFileContent.replace(
|
||||||
`{ version: '${packageInfo.version}' }`,
|
`require('../../package.json')`,
|
||||||
),
|
`{ version: '${packageInfo.version}' }`,
|
||||||
);
|
),
|
||||||
console.log('Wrote version into lib/version/index.js');
|
);
|
||||||
|
console.log('Wrote version into lib/version/index.js');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fs.existsSync(path.join(__dirname, '../dist'))) {
|
function generateThemeFileContent(theme) {
|
||||||
// Build a entry less file to dist/antd.less
|
return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
|
||||||
const componentsPath = path.join(process.cwd(), 'components');
|
module.exports = {
|
||||||
let componentsLessContent = '';
|
...defaultTheme,
|
||||||
|
...${theme}ThemeSingle
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
// Build components in one file: lib/style/components.less
|
// We need compile additional content for antd user
|
||||||
fs.readdir(componentsPath, function(err, files) {
|
function finalizeCompile() {
|
||||||
files.forEach(function(file) {
|
if (fs.existsSync(path.join(__dirname, '../lib'))) {
|
||||||
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
|
// Build a entry less file to dist/antd.less
|
||||||
componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
|
const componentsPath = path.join(process.cwd(), 'components');
|
||||||
}
|
let componentsLessContent = '';
|
||||||
|
// Build components in one file: lib/style/components.less
|
||||||
|
fs.readdir(componentsPath, (err, files) => {
|
||||||
|
files.forEach(file => {
|
||||||
|
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
|
||||||
|
componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'lib', 'style', 'components.less'),
|
||||||
|
componentsLessContent,
|
||||||
|
);
|
||||||
});
|
});
|
||||||
fs.writeFileSync(
|
}
|
||||||
path.join(process.cwd(), 'lib', 'style', 'components.less'),
|
}
|
||||||
componentsLessContent,
|
|
||||||
);
|
|
||||||
|
|
||||||
|
function buildThemeFile(theme, vars) {
|
||||||
|
// Build less entry file: dist/antd.${theme}.less
|
||||||
|
if (theme !== 'default') {
|
||||||
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'dist', `antd.${theme}.less`),
|
||||||
|
`@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
|
||||||
|
);
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
||||||
|
} else {
|
||||||
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'dist', `default-theme.js`),
|
||||||
|
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build ${theme}.js: dist/${theme}-theme.js, for less-loader
|
||||||
|
|
||||||
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'dist', `theme.js`),
|
||||||
|
`const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
|
||||||
|
{
|
||||||
|
flag: 'a',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'dist', `${theme}-theme.js`),
|
||||||
|
generateThemeFileContent(theme),
|
||||||
|
);
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function finalizeDist() {
|
||||||
|
if (fs.existsSync(path.join(__dirname, '../dist'))) {
|
||||||
// Build less entry file: dist/antd.less
|
// Build less entry file: dist/antd.less
|
||||||
fs.writeFileSync(
|
fs.writeFileSync(
|
||||||
path.join(process.cwd(), 'dist', 'antd.less'),
|
path.join(process.cwd(), 'dist', 'antd.less'),
|
||||||
'@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
|
'@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
|
||||||
);
|
);
|
||||||
});
|
// eslint-disable-next-line no-console
|
||||||
console.log('Built a entry less file to dist/antd.less');
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'dist', 'theme.js'),
|
||||||
|
`const defaultTheme = require('./default-theme.js');\n`,
|
||||||
|
);
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log('Built a entry less file to dist/antd.less');
|
||||||
|
buildThemeFile('default', defaultVars);
|
||||||
|
buildThemeFile('dark', darkVars);
|
||||||
|
// buildThemeFile('compact', compactVars);
|
||||||
|
fs.writeFileSync(
|
||||||
|
path.join(process.cwd(), 'dist', `theme.js`),
|
||||||
|
`
|
||||||
|
function getThemeVariables(options = {}) {
|
||||||
|
let themeVar = {
|
||||||
|
'hack': \`true;@import "\${require.resolve('ant-design-vue/lib/style/color/colorPalette.less')}";\`,
|
||||||
|
...defaultTheme
|
||||||
|
};
|
||||||
|
if(options.dark) {
|
||||||
|
themeVar = {
|
||||||
|
...themeVar,
|
||||||
|
...darkThemeSingle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(options.compact){
|
||||||
|
themeVar = {
|
||||||
|
...themeVar
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return themeVar;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
darkThemeSingle,
|
||||||
|
getThemeVariables
|
||||||
|
}`,
|
||||||
|
{
|
||||||
|
flag: 'a',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
generateVersionFile();
|
||||||
|
finalizeCompile();
|
||||||
|
finalizeDist();
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
// This config is for building dist files
|
// This config is for building dist files
|
||||||
const getWebpackConfig = require('./antd-tools/getWebpackConfig');
|
const getWebpackConfig = require('./antd-tools/getWebpackConfig');
|
||||||
|
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
|
||||||
|
const darkVars = require('./scripts/dark-vars');
|
||||||
const { webpack } = getWebpackConfig;
|
const { webpack } = getWebpackConfig;
|
||||||
// noParse still leave `require('./locale' + name)` in dist files
|
// noParse still leave `require('./locale' + name)` in dist files
|
||||||
// ignore is better
|
// ignore is better
|
||||||
|
|
@ -36,4 +38,34 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = webpackConfig;
|
const webpackDarkConfig = getWebpackConfig(false);
|
||||||
|
|
||||||
|
webpackDarkConfig.forEach(config => {
|
||||||
|
ignoreMomentLocale(config);
|
||||||
|
externalMoment(config);
|
||||||
|
|
||||||
|
// rename default entry to ${theme} entry
|
||||||
|
Object.keys(config.entry).forEach(entryName => {
|
||||||
|
config.entry[entryName.replace('antd', `antd.dark`)] = config.entry[entryName];
|
||||||
|
delete config.entry[entryName];
|
||||||
|
});
|
||||||
|
|
||||||
|
// apply ${theme} less variables
|
||||||
|
config.module.rules.forEach(rule => {
|
||||||
|
// filter less rule
|
||||||
|
if (rule.test instanceof RegExp && rule.test.test('.less')) {
|
||||||
|
const lessRule = rule.use[rule.use.length - 1];
|
||||||
|
if (lessRule.options.lessOptions) {
|
||||||
|
lessRule.options.lessOptions.modifyVars = darkVars;
|
||||||
|
} else {
|
||||||
|
lessRule.options.modifyVars = darkVars;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const themeReg = new RegExp(`dark(.min)?\\.js(\\.map)?`);
|
||||||
|
// ignore emit ${theme} entry js & js.map file
|
||||||
|
config.plugins.push(new IgnoreEmitPlugin(themeReg));
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = webpackConfig.concat(webpackDarkConfig);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue