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 {
|
||||
color: @component-background;
|
||||
background: transparent !important;
|
||||
border-color: @component-background;
|
||||
color: @btn-default-ghost-color;
|
||||
background: @btn-default-ghost-bg !important;
|
||||
border-color: @btn-default-ghost-border;
|
||||
}
|
||||
|
||||
&-background-ghost&-primary {
|
||||
|
|
|
|||
|
|
@ -32,16 +32,30 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||
);
|
||||
& when (@theme = dark) {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||
);
|
||||
& when (@theme = dark) {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.button-disabled();
|
||||
|
|
@ -52,17 +66,27 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.button-color(
|
||||
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
|
||||
`
|
||||
);
|
||||
& when (@theme = dark) {
|
||||
.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 {
|
||||
.button-color(
|
||||
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
|
||||
`
|
||||
);
|
||||
& when (@theme = dark) {
|
||||
.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();
|
||||
}
|
||||
|
|
@ -72,19 +96,47 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
& 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) {
|
||||
.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 {
|
||||
& 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) {
|
||||
.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();
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
|
||||
&-hoverable {
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: @card-hover-border;
|
||||
box-shadow: @card-shadow;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: @component-background;
|
||||
background-color: @cascader-bg;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
z-index: @zindex-dropdown;
|
||||
font-size: @cascader-dropdown-font-size;
|
||||
white-space: nowrap;
|
||||
background: @component-background;
|
||||
background: @cascader-menu-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
overflow: auto;
|
||||
vertical-align: top;
|
||||
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
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
&,
|
||||
&:hover {
|
||||
font-weight: @select-item-selected-font-weight;
|
||||
background-color: @background-color-light;
|
||||
background-color: @cascader-item-selected-bg;
|
||||
}
|
||||
}
|
||||
&-expand {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
display: block;
|
||||
width: @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-radius: @border-radius-sm;
|
||||
// Fix IE checked style
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
.@{comment-prefix-cls} {
|
||||
position: relative;
|
||||
background-color: @comment-bg;
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -153,6 +153,9 @@
|
|||
background-color: @component-background;
|
||||
background-clip: padding-box;
|
||||
border: @border-width-base @border-style-base @border-color-inverse;
|
||||
& when (@theme = dark) {
|
||||
border-color: @black;
|
||||
}
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
z-index: 2;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-base;
|
||||
background: @input-bg;
|
||||
background: @component-background;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -62,33 +62,33 @@
|
|||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: 5%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 95%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: 95%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 5%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 24px;
|
||||
padding: 0 @divider-text-padding;
|
||||
}
|
||||
|
||||
&-dashed {
|
||||
background: none;
|
||||
border-color: @border-color-split;
|
||||
border-color: @divider-color;
|
||||
border-style: dashed;
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
background-color: @component-background;
|
||||
background-color: @drawer-bg;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -181,14 +181,14 @@
|
|||
position: relative;
|
||||
padding: @drawer-header-padding;
|
||||
color: @text-color;
|
||||
background: @component-background;
|
||||
background: @drawer-bg;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&-header-no-title {
|
||||
color: @text-color;
|
||||
background: @component-background;
|
||||
background: @drawer-bg;
|
||||
}
|
||||
|
||||
&-body {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
top: -@popover-distance + @popover-arrow-width;
|
||||
right: 0;
|
||||
bottom: -7px;
|
||||
bottom: -@popover-distance + @popover-arrow-width;
|
||||
left: -7px;
|
||||
z-index: -9999;
|
||||
opacity: 0.0001;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
padding: @dropdown-edge-child-vertical-padding 0;
|
||||
text-align: left;
|
||||
list-style-type: none;
|
||||
background-color: @component-background;
|
||||
background-color: @dropdown-menu-bg;
|
||||
background-clip: padding-box;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
|
@ -111,6 +111,9 @@
|
|||
padding: @dropdown-vertical-padding @control-padding-horizontal;
|
||||
color: @text-color;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -192,7 +195,7 @@
|
|||
&,
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
||||
color: @disabled-color;
|
||||
background-color: @component-background;
|
||||
background-color: @dropdown-menu-submenu-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { defaultConfigProvider } from '../config-provider';
|
|||
|
||||
const Simple = () => {
|
||||
const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
|
||||
const prefixCls = getPrefixCls('empty-img-default');
|
||||
const prefixCls = getPrefixCls('empty-img-simple');
|
||||
|
||||
return (
|
||||
<svg class={prefixCls} width="64" height="41" viewBox="0 0 64 41">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
color: @input-icon-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&: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-list-empty-text">
|
||||
<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">
|
||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<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="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>
|
||||
</svg></div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -60,6 +60,9 @@
|
|||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
& when (@theme = dark) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.placeholder();
|
||||
|
||||
&:read-only {
|
||||
|
|
@ -95,7 +98,7 @@
|
|||
box-sizing: border-box;
|
||||
font-size: @font-size-base;
|
||||
font-variant: initial;
|
||||
background-color: @component-background;
|
||||
background-color: @mentions-dropdown-bg;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
|
@ -144,7 +147,7 @@
|
|||
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
background-color: @component-background;
|
||||
background-color: @mentions-dropdown-menu-item-hover-bg;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
&-notice-content {
|
||||
display: inline-block;
|
||||
padding: @message-notice-content-padding;
|
||||
background: @component-background;
|
||||
background: @message-notice-content-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
pointer-events: all;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
&-content {
|
||||
position: relative;
|
||||
background-color: @component-background;
|
||||
background-color: @modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
padding: @notification-padding;
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
background: @component-background;
|
||||
background: @notification-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
background-color: @component-background;
|
||||
background-color: @pagination-item-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
height: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: @component-background;
|
||||
background-color: @pagination-item-link-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
margin-right: 8px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
background-color: @component-background;
|
||||
background-color: @pagination-item-input-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
|
@ -350,10 +350,10 @@
|
|||
}
|
||||
|
||||
&-active {
|
||||
background: darken(@disabled-bg, 10%);
|
||||
background: @pagination-item-disabled-bg-active;
|
||||
border-color: transparent;
|
||||
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
|
||||
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
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ export default defineComponent({
|
|||
type: 'line',
|
||||
percent: 0,
|
||||
showInfo: true,
|
||||
trailColor: '#f3f3f3',
|
||||
// null for different theme definition
|
||||
trailColor: null,
|
||||
size: 'default',
|
||||
gapDegree: 0,
|
||||
strokeLinecap: 'round',
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@
|
|||
@radio-dot-size: @radio-size - 8px;
|
||||
|
||||
position: absolute;
|
||||
top: ((@radio-size - @radio-dot-size) / 2) - 1px;
|
||||
left: ((@radio-size - @radio-dot-size) / 2) - 1px;
|
||||
top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
|
||||
left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
|
||||
display: table;
|
||||
width: @radio-dot-size;
|
||||
height: @radio-dot-size;
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
background-color: @radio-button-bg;
|
||||
border-color: @border-color-base;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-width: @radio-border-width;
|
||||
border-radius: 100px;
|
||||
transition: all @radio-duration;
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
border-color: @border-color-base !important;
|
||||
cursor: not-allowed;
|
||||
&::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) {
|
||||
color: @component-background;
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-dot-color;
|
||||
border-color: @radio-dot-color;
|
||||
&:hover {
|
||||
color: @component-background;
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
}
|
||||
&:active {
|
||||
color: @component-background;
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
}
|
||||
|
|
@ -301,8 +301,8 @@ span.@{radio-prefix-cls} + * {
|
|||
}
|
||||
|
||||
&-disabled&-checked {
|
||||
color: @text-color-inverse;
|
||||
background-color: tint(@black, 90%);
|
||||
color: @radio-disabled-button-checked-color;
|
||||
background-color: @radio-disabled-button-checked-bg;
|
||||
border-color: @border-color-base;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,8 +19,6 @@
|
|||
@error-title-color: @error-color;
|
||||
@error-description-color: @error-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-icon-size: 32px;
|
||||
|
|
|
|||
|
|
@ -1,145 +1,158 @@
|
|||
@import 'colorPalette';
|
||||
|
||||
// color palettes
|
||||
@blue-base: #1890ff;
|
||||
@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
|
||||
@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
|
||||
@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
|
||||
@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
|
||||
@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
|
||||
@blue-6: #1890ff;
|
||||
@blue-6: @blue-base;
|
||||
@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
|
||||
@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
|
||||
@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
|
||||
@blue-10: color(~`colorPalette('@{blue-6}', 10) `);
|
||||
|
||||
@purple-base: #722ed1;
|
||||
@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
|
||||
@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
|
||||
@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
|
||||
@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
|
||||
@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
|
||||
@purple-6: #722ed1;
|
||||
@purple-6: @purple-base;
|
||||
@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
|
||||
@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
|
||||
@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
|
||||
@purple-10: color(~`colorPalette('@{purple-6}', 10) `);
|
||||
|
||||
@cyan-base: #13c2c2;
|
||||
@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
|
||||
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
|
||||
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
|
||||
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
|
||||
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
|
||||
@cyan-6: #13c2c2;
|
||||
@cyan-6: @cyan-base;
|
||||
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
|
||||
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
|
||||
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
|
||||
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);
|
||||
|
||||
@green-base: #52c41a;
|
||||
@green-1: color(~`colorPalette('@{green-6}', 1) `);
|
||||
@green-2: color(~`colorPalette('@{green-6}', 2) `);
|
||||
@green-3: color(~`colorPalette('@{green-6}', 3) `);
|
||||
@green-4: color(~`colorPalette('@{green-6}', 4) `);
|
||||
@green-5: color(~`colorPalette('@{green-6}', 5) `);
|
||||
@green-6: #52c41a;
|
||||
@green-6: @green-base;
|
||||
@green-7: color(~`colorPalette('@{green-6}', 7) `);
|
||||
@green-8: color(~`colorPalette('@{green-6}', 8) `);
|
||||
@green-9: color(~`colorPalette('@{green-6}', 9) `);
|
||||
@green-10: color(~`colorPalette('@{green-6}', 10) `);
|
||||
|
||||
@magenta-base: #eb2f96;
|
||||
@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
|
||||
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
|
||||
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
|
||||
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
|
||||
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
|
||||
@magenta-6: #eb2f96;
|
||||
@magenta-6: @magenta-base;
|
||||
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
|
||||
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
|
||||
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
|
||||
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);
|
||||
|
||||
// alias of magenta
|
||||
@pink-base: #eb2f96;
|
||||
@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
|
||||
@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
|
||||
@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
|
||||
@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
|
||||
@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
|
||||
@pink-6: #eb2f96;
|
||||
@pink-6: @pink-base;
|
||||
@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
|
||||
@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
|
||||
@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
|
||||
@pink-10: color(~`colorPalette('@{pink-6}', 10) `);
|
||||
|
||||
@red-base: #f5222d;
|
||||
@red-1: color(~`colorPalette('@{red-6}', 1) `);
|
||||
@red-2: color(~`colorPalette('@{red-6}', 2) `);
|
||||
@red-3: color(~`colorPalette('@{red-6}', 3) `);
|
||||
@red-4: color(~`colorPalette('@{red-6}', 4) `);
|
||||
@red-5: color(~`colorPalette('@{red-6}', 5) `);
|
||||
@red-6: #f5222d;
|
||||
@red-6: @red-base;
|
||||
@red-7: color(~`colorPalette('@{red-6}', 7) `);
|
||||
@red-8: color(~`colorPalette('@{red-6}', 8) `);
|
||||
@red-9: color(~`colorPalette('@{red-6}', 9) `);
|
||||
@red-10: color(~`colorPalette('@{red-6}', 10) `);
|
||||
|
||||
@orange-base: #fa8c16;
|
||||
@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
|
||||
@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
|
||||
@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
|
||||
@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
|
||||
@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
|
||||
@orange-6: #fa8c16;
|
||||
@orange-6: @orange-base;
|
||||
@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
|
||||
@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
|
||||
@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
|
||||
@orange-10: color(~`colorPalette('@{orange-6}', 10) `);
|
||||
|
||||
@yellow-base: #fadb14;
|
||||
@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
|
||||
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
|
||||
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
|
||||
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
|
||||
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
|
||||
@yellow-6: #fadb14;
|
||||
@yellow-6: @yellow-base;
|
||||
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
|
||||
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
|
||||
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
|
||||
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);
|
||||
|
||||
@volcano-base: #fa541c;
|
||||
@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
|
||||
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
|
||||
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
|
||||
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
|
||||
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
|
||||
@volcano-6: #fa541c;
|
||||
@volcano-6: @volcano-base;
|
||||
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
|
||||
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
|
||||
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
|
||||
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);
|
||||
|
||||
@geekblue-base: #2f54eb;
|
||||
@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
|
||||
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
|
||||
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
|
||||
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
|
||||
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
|
||||
@geekblue-6: #2f54eb;
|
||||
@geekblue-6: @geekblue-base;
|
||||
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
|
||||
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
|
||||
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
|
||||
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);
|
||||
|
||||
@lime-base: #a0d911;
|
||||
@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
|
||||
@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
|
||||
@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
|
||||
@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
|
||||
@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
|
||||
@lime-6: #a0d911;
|
||||
@lime-6: @lime-base;
|
||||
@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
|
||||
@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
|
||||
@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
|
||||
@lime-10: color(~`colorPalette('@{lime-6}', 10) `);
|
||||
|
||||
@gold-base: #faad14;
|
||||
@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
|
||||
@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
|
||||
@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
|
||||
@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
|
||||
@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
|
||||
@gold-6: #faad14;
|
||||
@gold-6: @gold-base;
|
||||
@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
|
||||
@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
|
||||
@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
|
||||
|
|
|
|||
|
|
@ -1,510 +1,17 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
// Config global less under antd
|
||||
[class^=~'@{ant-prefix}-'],
|
||||
[class*=~' @{ant-prefix}-'] {
|
||||
// remove the clear button of a text input control in IE10+
|
||||
&::-ms-clear,
|
||||
input::-ms-clear,
|
||||
input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
text-decoration: @link-hover-decoration;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
&,
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 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 'base';
|
||||
@import 'global';
|
||||
@import 'iconfont';
|
||||
@import 'motion';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './themes/dark.less';
|
||||
@import './core/index';
|
||||
|
|
@ -409,7 +409,6 @@
|
|||
|
||||
// Skeleton
|
||||
// ---
|
||||
@skeleton-color: #303030;
|
||||
@skeleton-to-color: fade(@white, 16%);
|
||||
|
||||
// Alert
|
||||
|
|
|
|||
|
|
@ -41,6 +41,8 @@
|
|||
@body-background: #fff;
|
||||
// Base background color for most components
|
||||
@component-background: #fff;
|
||||
// Popover background color
|
||||
@popover-background: @component-background;
|
||||
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
|
|
@ -92,6 +94,8 @@
|
|||
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
|
||||
@link-decoration: none;
|
||||
@link-hover-decoration: none;
|
||||
@link-focus-decoration: none;
|
||||
@link-focus-outline: 0;
|
||||
|
||||
// Animation
|
||||
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
|
|
@ -164,6 +168,10 @@
|
|||
@btn-disable-bg: @disabled-bg;
|
||||
@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-font-size-lg: @font-size-lg;
|
||||
@btn-font-size-sm: @font-size-base;
|
||||
|
|
@ -184,10 +192,13 @@
|
|||
|
||||
@btn-group-border: @primary-5;
|
||||
|
||||
@btn-text-hover-bg: rgba(0, 0, 0, 0.018);
|
||||
|
||||
// Checkbox
|
||||
@checkbox-size: 16px;
|
||||
@checkbox-color: @primary-color;
|
||||
@checkbox-check-color: #fff;
|
||||
@checkbox-check-bg: @checkbox-check-color;
|
||||
@checkbox-border-width: @border-width-base;
|
||||
|
||||
// Descriptions
|
||||
|
|
@ -202,15 +213,26 @@
|
|||
@descriptions-item-label-colon-margin-left: 2px;
|
||||
@descriptions-extra-color: @text-color;
|
||||
|
||||
// Divider
|
||||
@divider-text-padding: 1em;
|
||||
@divider-orientation-margin: 5%;
|
||||
@divider-color: rgba(0, 0, 0, 6%);
|
||||
|
||||
// Dropdown
|
||||
@dropdown-selected-color: @primary-color;
|
||||
@dropdown-menu-submenu-disabled-bg: @component-background;
|
||||
|
||||
// Empty
|
||||
@empty-font-size: @font-size-base;
|
||||
|
||||
// Radio
|
||||
@radio-size: 16px;
|
||||
@radio-top: 0px;
|
||||
@radio-border-width: 1px;
|
||||
@radio-dot-size: @radio-size - 8px;
|
||||
@radio-dot-color: @primary-color;
|
||||
@radio-dot-disabled-color: fade(@black, 20%);
|
||||
@radio-solid-checked-color: @component-background;
|
||||
|
||||
// Radio buttons
|
||||
@radio-button-bg: @btn-default-bg;
|
||||
|
|
@ -218,6 +240,9 @@
|
|||
@radio-button-color: @btn-default-color;
|
||||
@radio-button-hover-color: @primary-5;
|
||||
@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
|
||||
// Extra small screen / phone
|
||||
|
|
@ -299,6 +324,7 @@
|
|||
@collapse-panel-border-radius: @border-radius-base;
|
||||
|
||||
//Dropdown
|
||||
@dropdown-menu-bg: @component-background;
|
||||
@dropdown-vertical-padding: 5px;
|
||||
@dropdown-edge-child-vertical-padding: 4px;
|
||||
@dropdown-font-size: @font-size-base;
|
||||
|
|
@ -331,6 +357,7 @@
|
|||
@input-padding-vertical-lg: 6.5px;
|
||||
@input-placeholder-color: hsv(0, 0, 75%);
|
||||
@input-color: @text-color;
|
||||
@input-icon-color: @input-color;
|
||||
@input-border-color: @border-color-base;
|
||||
@input-bg: @component-background;
|
||||
@input-number-hover-border-color: @input-hover-border-color;
|
||||
|
|
@ -342,6 +369,12 @@
|
|||
@input-hover-border-color: @primary-5;
|
||||
@input-disabled-bg: @disabled-bg;
|
||||
@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
|
||||
// ---
|
||||
|
|
@ -367,6 +400,13 @@
|
|||
@select-multiple-item-disabled-color: #bfbfbf;
|
||||
@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-dropdown-vertical-padding: @dropdown-vertical-padding;
|
||||
|
|
@ -416,6 +456,7 @@
|
|||
@modal-body-padding: 24px;
|
||||
@modal-header-bg: @component-background;
|
||||
@modal-header-border-color-split: @border-color-split;
|
||||
@modal-content-bg: @component-background;
|
||||
@modal-heading-color: @heading-color;
|
||||
@modal-footer-bg: transparent;
|
||||
@modal-footer-border-color-split: @border-color-split;
|
||||
|
|
@ -531,6 +572,7 @@
|
|||
|
||||
// Comment
|
||||
// ---
|
||||
@comment-bg: inherit;
|
||||
@comment-padding-base: 16px 0;
|
||||
@comment-nest-indent: 44px;
|
||||
@comment-font-size-base: @font-size-base;
|
||||
|
|
@ -588,15 +630,21 @@
|
|||
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
|
||||
@switch-disabled-opacity: 0.4;
|
||||
@switch-color: @primary-color;
|
||||
@switch-bg: @component-background;
|
||||
@switch-shadow-color: fade(#00230b, 20%);
|
||||
|
||||
// Pagination
|
||||
// ---
|
||||
@pagination-item-bg: @component-background;
|
||||
@pagination-item-size: 32px;
|
||||
@pagination-item-size-sm: 24px;
|
||||
@pagination-font-family: Arial;
|
||||
@pagination-font-weight-active: 500;
|
||||
@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
|
||||
// ---
|
||||
|
|
@ -656,16 +704,19 @@
|
|||
// Skeleton
|
||||
// ---
|
||||
@skeleton-color: #f2f2f2;
|
||||
@skeleton-to-color: shade(@skeleton-color, 5%);
|
||||
|
||||
// Transfer
|
||||
// ---
|
||||
@transfer-header-height: 40px;
|
||||
@transfer-disabled-bg: @disabled-bg;
|
||||
@transfer-list-height: 200px;
|
||||
@transfer-item-hover-bg: @item-hover-bg;
|
||||
|
||||
// Message
|
||||
// ---
|
||||
@message-notice-content-padding: 10px 16px;
|
||||
@message-notice-content-bg: @component-background;
|
||||
|
||||
// Motion
|
||||
// ---
|
||||
|
|
@ -707,6 +758,7 @@
|
|||
// ---
|
||||
@drawer-header-padding: 16px 24px;
|
||||
@drawer-body-padding: 24px;
|
||||
@drawer-bg: @component-background;
|
||||
|
||||
// Timeline
|
||||
// ---
|
||||
|
|
@ -731,3 +783,13 @@
|
|||
@image-preview-operation-size: 18px;
|
||||
@image-preview-operation-color: @text-color-dark;
|
||||
@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;
|
||||
width: @switch-height - 4px;
|
||||
height: @switch-height - 4px;
|
||||
background-color: @component-background;
|
||||
background-color: @switch-bg;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
transition: all @switch-duration @ease-in-out-circ;
|
||||
|
|
|
|||
|
|
@ -60,12 +60,12 @@ exports[`Table renders empty table 1`] = `
|
|||
</div>
|
||||
<div class="ant-table-placeholder">
|
||||
<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">
|
||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<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="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>
|
||||
</svg></div>
|
||||
|
|
@ -226,12 +226,12 @@ exports[`Table renders empty table with fixed columns 1`] = `
|
|||
</div>
|
||||
<div class="ant-table-placeholder">
|
||||
<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">
|
||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<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="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>
|
||||
</svg></div>
|
||||
|
|
@ -359,12 +359,12 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
|
|||
</div>
|
||||
<div class="ant-table-placeholder">
|
||||
<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">
|
||||
<ellipse class="ant-empty-img-default-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<g class="ant-empty-img-default-g" fill-rule="nonzero" stroke="#D9D9D9">
|
||||
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
|
||||
<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="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>
|
||||
</svg></div>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
}
|
||||
|
||||
&-input {
|
||||
background: @input-bg;
|
||||
width: 100%;
|
||||
max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
}
|
||||
|
||||
&-item:not(&-item-disabled):hover {
|
||||
background-color: @item-hover-bg;
|
||||
background-color: @transfer-item-hover-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"pre-publish": "node ./scripts/prepub",
|
||||
"prettier": "prettier -c --write '**/*'",
|
||||
"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: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/**",
|
||||
|
|
@ -133,6 +133,7 @@
|
|||
"gulp-typescript": "^6.0.0-alpha.1",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"husky": "^4.0.0",
|
||||
"ignore-emit-webpack-plugin": "^2.0.6",
|
||||
"istanbul-instrumenter-loader": "^3.0.0",
|
||||
"jest": "^26.0.0",
|
||||
"jest-environment-jsdom-fifteen": "^1.0.2",
|
||||
|
|
@ -144,6 +145,7 @@
|
|||
"less": "^4.0.0",
|
||||
"less-loader": "^7.0.0",
|
||||
"less-plugin-npm-import": "^2.1.0",
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"lint-staged": "^10.0.0",
|
||||
"markdown-it-anchor": "^5.3.0",
|
||||
"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 path = require('path');
|
||||
const packageInfo = require('../package.json');
|
||||
const defaultVars = require('./default-vars');
|
||||
const darkVars = require('./dark-vars');
|
||||
|
||||
if (fs.existsSync(path.join(__dirname, '../lib'))) {
|
||||
// Build package.json version to lib/version/index.js
|
||||
// prevent json-loader needing in user-side
|
||||
const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js');
|
||||
const versionFileContent = fs.readFileSync(versionFilePath).toString();
|
||||
fs.writeFileSync(
|
||||
versionFilePath,
|
||||
versionFileContent.replace(
|
||||
`require('../../package.json')`,
|
||||
`{ version: '${packageInfo.version}' }`,
|
||||
),
|
||||
);
|
||||
console.log('Wrote version into lib/version/index.js');
|
||||
function generateVersionFile() {
|
||||
if (fs.existsSync(path.join(__dirname, '../lib'))) {
|
||||
// Build package.json version to lib/version/index.js
|
||||
// prevent json-loader needing in user-side
|
||||
const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js');
|
||||
const versionFileContent = fs.readFileSync(versionFilePath).toString();
|
||||
fs.writeFileSync(
|
||||
versionFilePath,
|
||||
versionFileContent.replace(
|
||||
`require('../../package.json')`,
|
||||
`{ version: '${packageInfo.version}' }`,
|
||||
),
|
||||
);
|
||||
console.log('Wrote version into lib/version/index.js');
|
||||
}
|
||||
}
|
||||
|
||||
if (fs.existsSync(path.join(__dirname, '../dist'))) {
|
||||
// Build a entry less file to dist/antd.less
|
||||
const componentsPath = path.join(process.cwd(), 'components');
|
||||
let componentsLessContent = '';
|
||||
function generateThemeFileContent(theme) {
|
||||
return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
|
||||
module.exports = {
|
||||
...defaultTheme,
|
||||
...${theme}ThemeSingle
|
||||
}`;
|
||||
}
|
||||
|
||||
// Build components in one file: lib/style/components.less
|
||||
fs.readdir(componentsPath, function(err, files) {
|
||||
files.forEach(function(file) {
|
||||
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
|
||||
componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
|
||||
}
|
||||
// We need compile additional content for antd user
|
||||
function finalizeCompile() {
|
||||
if (fs.existsSync(path.join(__dirname, '../lib'))) {
|
||||
// Build a entry less file to dist/antd.less
|
||||
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
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', 'antd.less'),
|
||||
'@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
|
||||
);
|
||||
});
|
||||
console.log('Built a entry less file to dist/antd.less');
|
||||
// eslint-disable-next-line no-console
|
||||
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
|
||||
const getWebpackConfig = require('./antd-tools/getWebpackConfig');
|
||||
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
|
||||
const darkVars = require('./scripts/dark-vars');
|
||||
const { webpack } = getWebpackConfig;
|
||||
// noParse still leave `require('./locale' + name)` in dist files
|
||||
// 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