style: update style

feat-css-var
tangjinzhou 2022-03-10 11:05:20 +08:00
parent efffdcbb8f
commit d783c4e913
26 changed files with 1217 additions and 161 deletions

View File

@ -54,6 +54,7 @@ export const DescriptionsItem = defineComponent({
});
const DEFAULT_COLUMN_MAP: Partial<Record<Breakpoint, number>> = {
xxxl: 3,
xxl: 3,
xl: 3,
lg: 3,

View File

@ -21,7 +21,7 @@ import { responsiveArray } from '../_util/responsiveObserve';
export { ListItemProps } from './Item';
export type { ListItemMetaProps } from './ItemMeta';
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
export type ColumnCount = number;
export interface ListGridType {

View File

@ -0,0 +1,4 @@
@root-entry-name: default;
@import './themes/compact.less';
@import './core/index';

View File

@ -7,11 +7,4 @@
input::-ms-reveal {
display: none;
}
&,
*,
*::before,
*::after {
box-sizing: border-box; // 1
}
}

View File

@ -1,4 +1,4 @@
/* stylelint-disable at-rule-no-unknown */
/* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */
// Reboot
//
@ -199,6 +199,7 @@ sup {
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
@ -280,10 +281,6 @@ img {
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
@ -322,12 +319,6 @@ caption {
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
//

View File

@ -1,4 +1,4 @@
@import '../mixins/motion';
// @import '../mixins/motion'; This has moved to theme/xxx inside.
@import 'motion/fade';
@import 'motion/move';
@import 'motion/other';
@ -8,6 +8,7 @@
// For common/openAnimation
.ant-motion-collapse-legacy {
overflow: hidden;
&-active {
transition: height @animation-duration-base @ease-in-out,
opacity @animation-duration-base @ease-in-out !important;

View File

@ -27,6 +27,7 @@
0% {
opacity: 0;
}
100% {
opacity: 1;
}
@ -36,6 +37,7 @@
0% {
opacity: 1;
}
100% {
opacity: 0;
}

View File

@ -32,6 +32,7 @@
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateY(0%);
transform-origin: 0 0;
@ -45,6 +46,7 @@
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateY(100%);
transform-origin: 0 0;
@ -58,6 +60,7 @@
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateX(0%);
transform-origin: 0 0;
@ -71,6 +74,7 @@
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateX(-100%);
transform-origin: 0 0;
@ -84,6 +88,7 @@
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateX(0%);
transform-origin: 0 0;
@ -97,6 +102,7 @@
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateX(100%);
transform-origin: 0 0;
@ -110,6 +116,7 @@
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateY(0%);
transform-origin: 0 0;
@ -123,6 +130,7 @@
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateY(-100%);
transform-origin: 0 0;

View File

@ -1,2 +1,4 @@
@root-entry-name: default;
@import './themes/dark.less';
@import './core/index';

View File

@ -0,0 +1,4 @@
// This is same as `index.less` but given `root-entry-name` for `dist/antd.less` usage
@root-entry-name: default;
@import './index';

View File

@ -1,12 +1,16 @@
// mixins for clearfix
// ------------------------
.clearfix() {
&::before,
&::after {
// https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
&::before {
display: table;
content: '';
}
&::after {
// https://github.com/ant-design/ant-design/issues/21864
display: table;
clear: both;
content: '';
}
}

View File

@ -3,17 +3,14 @@
// Placeholder text
.placeholder(@color: @input-placeholder-color) {
// Firefox
/* stylelint-disable-next-line selector-no-vendor-prefix */
&::-moz-placeholder {
color: @color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
// Internet Explorer 10+
&:-ms-input-placeholder {
color: @color;
}
// Safari and Chrome
&::-webkit-input-placeholder {
&::placeholder {
color: @color;
user-select: none; // https://github.com/ant-design/ant-design/pull/32639
}
&:placeholder-shown {

View File

@ -64,6 +64,7 @@
.@{table-prefix-cls}-row-expand-icon {
border: @popover-border;
}
tfoot {
> tr {
> th,
@ -72,6 +73,7 @@
}
}
}
thead {
> tr {
> th {
@ -80,6 +82,7 @@
}
}
}
tbody {
> tr {
> td {

View File

@ -26,18 +26,3 @@
display: block;
}
}
// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
display: inline-block;
@font-scale: unit((@size / 12px));
font-size: 12px;
// IE9
font-size: ~'@{size} \9';
transform: scale(@font-scale) rotate(@rotate);
:root & {
font-size: @font-size-sm; // reset IE9 and above
}
}

View File

@ -4,10 +4,10 @@
@import 'compatibility';
@import 'clearfix';
@import 'iconfont';
@import 'motion';
@import 'reset';
@import 'operation-unit';
@import 'typography';
@import 'customize';
@import 'box';
@import 'modal-mask';
@import 'motion';
@import 'reset';
@import 'operation-unit';

View File

@ -3,8 +3,8 @@
.modal-mask() {
pointer-events: none;
&.zoom-enter,
&.zoom-appear {
&.@{ant-prefix}-zoom-enter,
&.@{ant-prefix}zoom-appear {
transform: none; // reset scale avoid mousePosition bug
opacity: 0;
animation-duration: @animation-duration-slow;

View File

@ -1,5 +1,3 @@
@import '../../style/themes/default';
.operation-unit() {
color: @link-color;
text-decoration: none;

View File

@ -1,5 +1,3 @@
@import '../themes/index';
.reset-component() {
box-sizing: border-box;
margin: 0;

View File

@ -84,7 +84,6 @@
// Radio
// ---
@radio-size: 14px;
@radio-top: -2px;
@radio-wrapper-margin-right: 6px;
// Switch
@ -105,7 +104,7 @@
// ---
@input-padding-vertical-base: round(
max(
round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 -
(round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
@border-width-base,
2px
)
@ -182,6 +181,7 @@
// ---
@drawer-header-padding: 11px @padding-lg;
@drawer-footer-padding-vertical: @padding-sm;
@drawer-footer-padding-horizontal: @padding-sm;
@drawer-header-close-size: 44px;
// Modal
@ -221,7 +221,7 @@
@table-padding-horizontal-md: 8px;
@table-padding-vertical-sm: 4px;
@table-padding-horizontal-sm: 4px;
@table-selection-column-width: 54px;
@table-selection-column-width: 32px;
// Statistic
// ---
@ -231,12 +231,8 @@
// ---
@alert-with-description-no-icon-padding-vertical: 7px;
@alert-with-description-padding-vertical: 11px;
@alert-with-description-padding: @alert-with-description-padding-vertical 15px
@alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size * 2 +
@alert-with-description-padding-vertical;
@alert-icon-top: 7px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
@alert-icon-top: 7px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
@alert-with-description-icon-size: 20px;
@alert-with-description-icon-top: @alert-with-description-padding-vertical;
// Skeleton
// ---

View File

@ -314,6 +314,7 @@
@table-header-sort-bg: #262626;
@table-header-filter-active-bg: #434343;
@table-header-sort-active-bg: #303030;
@table-fixed-header-sort-active-bg: #222;
@table-filter-btns-bg: @popover-background;
@table-expanded-row-bg: @table-header-bg;
@table-filter-dropdown-bg: @popover-background;

View File

@ -9,7 +9,11 @@
// An override for the html selector for theme prefixes
@html-selector: html;
// [CSS-VARIABLE-REPLACE-BEGIN: html-variables]
// [CSS-VARIABLE-REPLACE-END: html-variables]
// -------- Colors -----------
// >>> Primary
@primary-color: @blue-6;
@primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
@primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
@ -51,22 +55,6 @@
@white: #fff;
@black: #000;
// >>> Warning
@warning-color: @gold-6;
@warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `);
@warning-color-active: color(~`colorPalette('@{warning-color}', 7) `);
@warning-color-outline: fade(@warning-color, @outline-fade);
@warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `);
@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `);
// >>> Error
@error-color: @red-5;
@error-color-hover: color(~`colorPalette('@{error-color}', 5) `);
@error-color-active: color(~`colorPalette('@{error-color}', 7) `);
@error-color-outline: fade(@error-color, @outline-fade);
@error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `);
@error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `);
// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@ -186,7 +174,7 @@
// Outline
@outline-blur-size: 0;
@outline-width: 2px;
@outline-color: @primary-color;
@outline-color: @primary-color; // No use anymore
@outline-fade: 20%;
@background-color-light: hsv(0, 0, 98%); // background of header and selected item
@ -201,12 +189,17 @@
// Shadow
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-1-down;
@shadow-1-up: 0 -2px 8px @shadow-color;
@shadow-1-down: 0 2px 8px @shadow-color;
@shadow-1-left: -2px 0 8px @shadow-color;
@shadow-1-right: 2px 0 8px @shadow-color;
@shadow-2: 0 4px 12px @shadow-color;
@box-shadow-base: @shadow-2;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
0 -12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
0 12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
-12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
// Buttons
@btn-font-weight: 400;
@ -226,8 +219,8 @@
@btn-default-border: @border-color-base;
@btn-danger-color: #fff;
@btn-danger-bg: color(~`colorPalette('@{error-color}', 5) `);
@btn-danger-border: color(~`colorPalette('@{error-color}', 5) `);
@btn-danger-bg: @error-color;
@btn-danger-border: @error-color;
@btn-disable-color: @disabled-color;
@btn-disable-bg: @disabled-bg;
@ -243,9 +236,9 @@
@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
@btn-padding-horizontal-sm: @padding-xs - 1px;
@btn-height-base: 32px;
@btn-height-lg: 40px;
@btn-height-sm: 24px;
@btn-height-base: @height-base;
@btn-height-lg: @height-lg;
@btn-height-sm: @height-sm;
@btn-line-height: @line-height-base;
@ -318,11 +311,13 @@
@radio-wrapper-margin-right: 8px;
// Media queries breakpoints
// Extra small screen / phone
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone
// Small screen / tablet
// 👇 Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
@ -341,8 +336,6 @@
// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
// Extra extra large screen / large desktop
@screen-xxxl: 2000px;
@screen-xxxl-min: @screen-xxxl;
@ -356,7 +349,6 @@
// Grid system
@grid-columns: 24;
@grid-gutter-width: 0;
// Layout
@layout-body-background: #f0f2f5;
@ -847,8 +839,8 @@
@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-disabled-color-active: @disabled-color;
@pagination-item-disabled-bg-active: @disabled-active-bg;
@pagination-item-input-bg: @component-background;
@pagination-mini-options-size-changer-top: 0px;
@ -909,11 +901,12 @@
// Collapse
// ---
@collapse-header-padding: 12px 16px;
@collapse-header-padding: @padding-sm @padding-md;
@collapse-header-padding-extra: 40px;
@collapse-header-bg: @background-color-light;
@collapse-content-padding: @padding-md;
@collapse-content-bg: @component-background;
@collapse-header-arrow-left: 16px;
// Skeleton
// ---
@ -940,7 +933,6 @@
// ---
@message-notice-content-padding: 10px 16px;
@message-notice-content-bg: @component-background;
// Motion
// ---
@wave-animation-width: 6px;
@ -970,6 +962,7 @@
@alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size;
@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
@alert-with-description-icon-size: 24px;
// List
// ---
@list-header-background: transparent;
@ -988,7 +981,7 @@
// ---
@statistic-title-font-size: @font-size-base;
@statistic-content-font-size: 24px;
@statistic-unit-font-size: 16px;
@statistic-unit-font-size: 24px;
@statistic-font-family: @font-family;
// Drawer
@ -1019,16 +1012,6 @@
// ---
@upload-actions-color: @text-color-secondary;
// Image
// ---
@image-size-base: 48px;
@image-font-size-base: 24px;
@image-bg: #f5f5f5;
@image-color: #fff;
@image-preview-operation-size: 18px;
@image-preview-operation-color: @text-color-dark;
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 45%);
// Steps
// ---
@process-tail-color: @border-color-split;
@ -1065,3 +1048,14 @@
@result-subtitle-font-size: @font-size-base;
@result-icon-font-size: 72px;
@result-extra-margin: 24px 0 0 0;
// Image
// ---
@image-size-base: 48px;
@image-font-size-base: 24px;
@image-bg: #f5f5f5;
@image-color: #fff;
@image-mask-font-size: 16px;
@image-preview-operation-size: 18px;
@image-preview-operation-color: @text-color-dark;
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);

View File

@ -1 +1,7 @@
// Default using variable as entry to support site variable version
// This will be replaced in webpack bundle
// @root-entry-name: variable;
@import './default.less';
// @import './variable.less';
// @import './@{root-entry-name}.less';

File diff suppressed because it is too large Load Diff

View File

@ -1,51 +0,0 @@
// For 2.x reset compatibility
// import 'antd/style/v2-compatible-reset';
// or
// @import '~antd/style/v2-compatible-reset.css';
// unify the setting of elements's margin and padding for browsers
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}

View File

@ -1 +0,0 @@
import './v2-compatible-reset.less';

View File

@ -0,0 +1,4 @@
@root-entry-name: variable;
@import './themes/variable.less';
@import './core/index';