From 341ff56dc67d65d5a545f124a51938366c7722dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Sun, 22 Oct 2023 16:23:29 +0800 Subject: [PATCH 1/6] perf(theme:modal): perf code (#1671) --- .../theme/src/services/modal/modal.helper.ts | 19 ++++++++++--------- packages/theme/system/antd/_modal.less | 6 ++++-- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts index ce155caa1b..8ea063c082 100644 --- a/packages/theme/src/services/modal/modal.helper.ts +++ b/packages/theme/src/services/modal/modal.helper.ts @@ -7,6 +7,8 @@ import { deepMerge } from '@delon/util/other'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { ModalOptions, NzModalService } from 'ng-zorro-antd/modal'; +const CLS_DRAG = 'MODAL-DRAG'; + export interface ModalHelperOptions { /** 大小；例如：lg、600、80%，默认：`lg` */ size?: 'sm' | 'md' | 'lg' | 'xl' | '' | number | string; @@ -39,7 +41,6 @@ export interface ModalHelperDragOptions { @Injectable({ providedIn: 'root' }) export class ModalHelper { private document: Document; - private dragClsPrefix = 'MODAL-DRAG'; constructor( private srv: NzModalService, @@ -54,7 +55,7 @@ export class ModalHelper { const modalEl = wrapEl.firstChild as HTMLDivElement; const handelEl = options.handleCls ? wrapEl.querySelector(options.handleCls) : null; if (handelEl) { - handelEl.classList.add(`${this.dragClsPrefix}-HANDLE`); + handelEl.classList.add(`${CLS_DRAG}-HANDLE`); } return this.drag @@ -95,36 +96,36 @@ export class ModalHelper { ); return new Observable((observer: Observer) => { const { size, includeTabs, modalOptions, drag, useNzData } = options as ModalHelperOptions; - let cls = ''; + let cls: string[] = []; let width = ''; if (size) { if (typeof size === 'number') { width = `${size}px`; } else if (['sm', 'md', 'lg', 'xl'].includes(size)) { - cls = `modal-${size}`; + cls.push(`modal-${size}`); } else { width = size; } } if (includeTabs) { - cls += ' modal-include-tabs'; + cls.push(`modal-include-tabs`); } if (modalOptions && modalOptions.nzWrapClassName) { - cls += ` ${modalOptions.nzWrapClassName}`; + cls.push(modalOptions.nzWrapClassName); delete modalOptions.nzWrapClassName; } let dragOptions: ModalHelperDragOptions | null; - let dragWrapCls = `${this.dragClsPrefix}-${+new Date()}`; + let dragWrapCls = `${CLS_DRAG}-${+new Date()}`; let dragRef: DragRef | null; if (drag != null && drag !== false) { dragOptions = { handleCls: `.modal-header, .ant-modal-title`, ...(typeof drag === 'object' ? drag : {}) }; - cls += ` ${this.dragClsPrefix} ${dragWrapCls}`; + cls.push(CLS_DRAG, dragWrapCls); } const subject = this.srv.create({ - nzWrapClassName: cls, + nzWrapClassName: cls.join(' '), nzContent: comp, nzWidth: width ? width : undefined, nzFooter: null, diff --git a/packages/theme/system/antd/_modal.less b/packages/theme/system/antd/_modal.less index 65037b9728..bae9be3234 100644 --- a/packages/theme/system/antd/_modal.less +++ b/packages/theme/system/antd/_modal.less @@ -124,6 +124,8 @@ } } -.MODAL-DRAG-HANDLE { - cursor: move; +.MODAL-DRAG { + &-HANDLE { + cursor: move; + } } From e2c17f7de779d1a1aafea4b172178f386ee93af5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Sun, 22 Oct 2023 16:23:44 +0800 Subject: [PATCH 2/6] docs: update qa (#1669) --- docs/server.en-US.md | 6 +++++- docs/server.zh-CN.md | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/server.en-US.md b/docs/server.en-US.md index e0012cd647..ed3ebed94e 100644 --- a/docs/server.en-US.md +++ b/docs/server.en-US.md @@ -96,8 +96,12 @@ Abort more detail please refer to [Proxying to a backend server](https://angular ## Common problem -**Q:** The request may be rejected or returned directly to `401`? +**The request may be rejected or returned directly to `401`?** Scaffolding uses the `SimpleInterceptor` interceptor of `@delon/auth` by default, which causes an error to be returned directly if a token cannot be obtained during the request. [User Authentication](/auth) This process is a must for the middle office. + +**Unable to display request log** + +Starting from Angular 13, the debugging log of remote requests will no longer be displayed in the terminal. If you need to display the log, you can fix from refer to [How to fix logging for proxy in angular](https://medium.com/@gagandeep.sidhu88/how-to-fix-logging-for-proxy-in-angular-834cf46d437d). diff --git a/docs/server.zh-CN.md b/docs/server.zh-CN.md index dd5a2f8e34..66ca1e5af8 100644 --- a/docs/server.zh-CN.md +++ b/docs/server.zh-CN.md @@ -97,8 +97,12 @@ module.exports = { ## 常见问题 -**Q：** 请求可能被拒绝或直接返回 `401` ? +**请求可能被拒绝或直接返回 `401` ?** 脚手架默认情况下使用了 `@delon/auth` 的 `SimpleInterceptor` 拦截器，导致在请求过程中若发现无法获取 Token 时会直接返回错误。 [用户认证](/auth)这个过程是中台必备的。 + +**关于无法显示请求日志** + +从 Angular13 开始远程请求的调试日志将不再终端中显示，若有显示日期需求，可自行参考 [How to fix logging for proxy in angular](https://medium.com/@gagandeep.sidhu88/how-to-fix-logging-for-proxy-in-angular-834cf46d437d) 解决。 From 5a7bdd42226960c8140397b1a1a377fb87ca725e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Thu, 26 Oct 2023 15:45:24 +0800 Subject: [PATCH 3/6] feat(abc:qr): will be removed in 18.0.0 (#1667) --- packages/abc/qr/index.en-US.md | 3 +++ packages/abc/qr/index.zh-CN.md | 3 +++ packages/abc/qr/qr.component.ts | 3 +++ packages/abc/qr/qr.module.ts | 3 +++ src/styles/_custom.less | 4 ++-- 5 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/abc/qr/index.en-US.md b/packages/abc/qr/index.en-US.md index d5aa151533..59f2231564 100644 --- a/packages/abc/qr/index.en-US.md +++ b/packages/abc/qr/index.en-US.md @@ -5,8 +5,11 @@ title: qr subtitle: QR cols: 1 module: import { QRModule } from '@delon/abc/qr'; +deprecated: 18.0.0 --- +# Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead. + Generate a QR code based on [qrious](https://github.com/neocotic/qrious). diff --git a/packages/abc/qr/index.zh-CN.md b/packages/abc/qr/index.zh-CN.md index bb71370760..25de5d8ce6 100644 --- a/packages/abc/qr/index.zh-CN.md +++ b/packages/abc/qr/index.zh-CN.md @@ -5,8 +5,11 @@ title: qr subtitle: 二维码 cols: 1 module: import { QRModule } from '@delon/abc/qr'; +deprecated: 18.0.0 --- +# 将在 18.0.0 中移除，请使用 [nz-qrcode](https://ng.ant.design/components/qr-code) 替代 + 基于 [qrious](https://github.com/neocotic/qrious) 生成二维码。 默认二维码的操作并不是刚需的原因，因此采用一种延迟加载脚本的形式，可以通过[全局配置](/docs/global-config)配置来改变默认 CDN 路径，默认情况下使用 `https://cdn.jsdelivr.net/npm/qrious/dist/qrious.min.js`。或安装 `npm i --save qrious` 依赖包并在 `angular.json` 的 `scripts` 引用 `"node_modules/qrious/dist/qrious.min.js"`。 diff --git a/packages/abc/qr/qr.component.ts b/packages/abc/qr/qr.component.ts index db8fe41e5e..92b497140f 100644 --- a/packages/abc/qr/qr.component.ts +++ b/packages/abc/qr/qr.component.ts @@ -21,6 +21,9 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { QR_DEFULAT_CONFIG } from './qr.config'; import { QROptions } from './qr.types'; +/** + * @deprecated Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead. + */ @Component({ selector: 'qr', exportAs: 'qr', diff --git a/packages/abc/qr/qr.module.ts b/packages/abc/qr/qr.module.ts index e462787877..a9b35a7621 100644 --- a/packages/abc/qr/qr.module.ts +++ b/packages/abc/qr/qr.module.ts @@ -5,6 +5,9 @@ import { QRComponent } from './qr.component'; const COMPONENTS = [QRComponent]; +/** + * @deprecated Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead. + */ @NgModule({ imports: [CommonModule], declarations: COMPONENTS, diff --git a/src/styles/_custom.less b/src/styles/_custom.less index 172931ed9a..1be2de8488 100644 --- a/src/styles/_custom.less +++ b/src/styles/_custom.less @@ -14,9 +14,9 @@ } .menu-deprecated { - opacity: 0.5; - .ant-badge { + color: @error-color; text-decoration: line-through; + opacity: 0.5; } } From 99c6a8a7315c210180e2bc3bf649767a55d60689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Thu, 26 Oct 2023 16:59:15 +0800 Subject: [PATCH 4/6] chore: upgrade ng-zorro-antd (#1672) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 073ac506e3..f24d674c81 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "extend": "^3.0.2", "file-saver": "^2.0.5", "ng-github-button": "^16.0.0", - "ng-zorro-antd": "16.2.0", + "ng-zorro-antd": "^16.2.2", "ngx-color": "~9.0.0", "ngx-countdown": "^16.0.0", "ngx-highlight-js": "^16.1.0", From 8e54445fe18911bd45a9233732e173cb42852083 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Fri, 27 Oct 2023 12:00:45 +0800 Subject: [PATCH 5/6] release(16.4.2): release 16.4.2 (#1673) --- .github/workflows/deploy-site.yml | 11 +++-------- .github/workflows/docker-build-doc-site.yml | 7 +------ CHANGELOG.md | 14 ++++++++++++++ azure-pipelines.yml | 2 +- docs/changelog.en-US.md | 8 ++++++++ docs/changelog.zh-CN.md | 8 ++++++++ package.json | 2 +- 7 files changed, 36 insertions(+), 16 deletions(-) diff --git a/.github/workflows/deploy-site.yml b/.github/workflows/deploy-site.yml index d3f13a0004..f36eaec715 100644 --- a/.github/workflows/deploy-site.yml +++ b/.github/workflows/deploy-site.yml @@ -8,16 +8,11 @@ jobs: runs-on: ubuntu-latest environment: prod steps: + - uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: - node-version: 16.15.0 - - - name: checkout - uses: actions/checkout@v4 - - - uses: borales/actions-yarn@v3.0.0 - with: - cmd: install + node-version: 18.10.0 + - run: yarn install - name: build run: | diff --git a/.github/workflows/docker-build-doc-site.yml b/.github/workflows/docker-build-doc-site.yml index ecea6e9cb0..d5a29af8f1 100644 --- a/.github/workflows/docker-build-doc-site.yml +++ b/.github/workflows/docker-build-doc-site.yml @@ -11,12 +11,7 @@ jobs: runs-on: ubuntu-latest environment: prod steps: - - uses: actions/setup-node@v3 - with: - node-version: 16.15.0 - - - name: checkout - uses: actions/checkout@v4 + - uses: actions/checkout@v4 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2 diff --git a/CHANGELOG.md b/CHANGELOG.md index 9112bda805..5ec1a6aa4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26) + + +### Features + +* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e)) + + +### Performance Improvements + +* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc)) + + + ## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index db63ca5b9f..7c5ccfae33 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -126,4 +126,4 @@ stages: - script: yarn install displayName: 'Install' - script: yarn run lint - dependsOn: env + dependsOn: env \ No newline at end of file diff --git a/docs/changelog.en-US.md b/docs/changelog.en-US.md index 4d3c6173ba..1e1502077e 100644 --- a/docs/changelog.en-US.md +++ b/docs/changelog.en-US.md @@ -14,6 +14,14 @@ NG-ALAIN strictly follows [Semantic Versioning 2.0.0](http://semver.org/lang/zh- --- +## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26) + +### Performance Improvements + +* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc)) +* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e)) + + ## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20) ### Bug Fixes diff --git a/docs/changelog.zh-CN.md b/docs/changelog.zh-CN.md index db545b0f09..e8acd37533 100644 --- a/docs/changelog.zh-CN.md +++ b/docs/changelog.zh-CN.md @@ -14,6 +14,14 @@ NG-ALAIN 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) --- +## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26) + +### Performance Improvements + +* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc)) +* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e)) + + ## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20) ### Bug Fixes diff --git a/package.json b/package.json index f24d674c81..0270fbc89d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "delon", - "version": "16.4.1", + "version": "16.4.2", "description": "Delon is a set of essential modules for NG-ALAIN.", "keywords": [ "delon", From d9ea22f58f9749aef99d86f5cb10f2bd88b44046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Fri, 27 Oct 2023 16:48:49 +0800 Subject: [PATCH 6/6] style(*): `clean` instead of `rational` of style (#1674) --- .prettierignore | 2 +- .stylelintignore | 3 + .stylelintrc | 59 ------------- .stylelintrc.js | 88 +++++++++++++++++++ .vscode/settings.json | 3 +- package.json | 3 +- packages/abc/avatar-list/style/index.less | 4 +- packages/abc/cell/style/index.less | 2 +- packages/abc/down-file/style/index.less | 1 + packages/abc/ellipsis/style/index.less | 4 +- packages/abc/error-collect/style/index.less | 2 +- packages/abc/error-collect/style/rtl.less | 3 +- packages/abc/exception/style/index.less | 12 +-- packages/abc/footer-toolbar/style/index.less | 2 +- packages/abc/full-content/style/index.less | 2 +- packages/abc/global-footer/style/index.less | 2 +- packages/abc/loading/style/index.less | 6 +- packages/abc/notice-icon/style/index.less | 14 +-- packages/abc/onboarding/style/index.less | 6 +- packages/abc/page-header/style/index.less | 8 +- packages/abc/pdf/style/index.less | 2 +- packages/abc/quick-menu/style/index.less | 4 +- packages/abc/result/style/index.less | 14 +-- packages/abc/reuse-tab/style/index.less | 8 +- packages/abc/se/style/index.less | 10 +-- packages/abc/st/style/index.less | 8 +- packages/abc/sv/style/index.less | 22 ++--- packages/abc/tag-select/style/index.less | 4 +- packages/abc/tag-select/style/rtl.less | 3 +- packages/chart/card/style/index.less | 20 ++--- packages/chart/number-info/style/index.less | 22 ++--- packages/chart/pie/style/index.less | 14 +-- packages/chart/radar/style/index.less | 8 +- packages/chart/trend/style/index.less | 2 +- packages/chart/water-wave/style/index.less | 8 +- packages/form/src/style/index.less | 4 +- .../theme/layout-default/style/_aside.less | 18 ++-- .../theme/layout-default/style/_header.less | 10 +-- .../theme/layout-default/style/_layout.less | 14 +-- .../layout-default/style/_progress-bar.less | 6 +- .../layout-default/style/fix/_reuse-tab.less | 2 +- .../style/fix/_sidebar-nav.less | 10 +-- .../style/widgets/_app-icons.less | 4 +- .../layout-default/style/widgets/_user.less | 43 ++++----- .../theme/setting-drawer/style/index.less | 18 ++-- packages/theme/system/_preloader.less | 7 +- packages/theme/system/antd/_modal.less | 6 +- packages/theme/system/antd/_table.less | 2 +- .../system/ng/_preserve-white-spaces.less | 1 + packages/theme/system/utils/_other.less | 8 +- packages/theme/system/utils/_position.less | 4 +- packages/theme/system/utils/_scrollbar.less | 1 + packages/theme/system/widgets/_abs.less | 2 +- .../theme/system/widgets/_half-float.less | 3 +- .../theme/system/widgets/_masonry-grid.less | 3 +- packages/theme/theme-btn/style/index.less | 6 +- schematics/application/index.ts | 5 +- schematics/utils/less.ts | 15 ---- scripts/ci/build-schematics.sh | 2 +- scripts/ci/utils.sh | 3 +- src/styles/_colors.less | 52 +++++------ src/styles/_common.less | 6 +- src/styles/_content.less | 8 +- src/styles/_custom.less | 4 +- src/styles/_demo.less | 32 +++---- src/styles/_drawer.less | 17 ++-- src/styles/_footer.less | 10 +-- src/styles/_header.less | 46 +++++----- src/styles/_hljs.less | 16 ++-- src/styles/_home.less | 20 ++--- src/styles/_markdown.less | 48 +++++----- src/styles/_not-found.less | 13 ++- src/styles/_prev-next.less | 6 +- src/styles/_theme-btn.less | 6 +- src/styles/_utils.less | 4 +- src/styles/dark.less | 22 ++--- src/styles/index.less | 3 - 77 files changed, 449 insertions(+), 436 deletions(-) delete mode 100644 .stylelintrc create mode 100644 .stylelintrc.js delete mode 100644 schematics/utils/less.ts diff --git a/.prettierignore b/.prettierignore index fe25af9be6..9424ef9c86 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,7 +4,7 @@ **/test.ts src/index.html -.stylelintrc +.stylelintrc.js .prettierrc _nginx/ diff --git a/.stylelintignore b/.stylelintignore index 7d6eed4522..e585836125 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -4,3 +4,6 @@ src/assets/**/* packages/theme/system/utils/_border.less packages/theme/system/utils/_color.less packages/theme/system/utils/_spacing.less + +dist/**/* +ng-alain/**/* diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index 11a7241d00..0000000000 --- a/.stylelintrc +++ /dev/null @@ -1,59 +0,0 @@ -{ - "extends": [ - "stylelint-config-standard", - "stylelint-config-rational-order" - ], - "customSyntax": "postcss-less", - "plugins": [ - "stylelint-order", - "stylelint-declaration-block-no-ignored-properties" - ], - "rules": { - "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }], - "function-no-unknown": [ - true, - { - "ignoreFunctions": [ - "fade", - "tint", - "darken", - "ceil", - "fadein", - "floor", - "unit", - "shade", - "lighten", - "percentage", - "-", - "~`colorPalette", - "snaplist", - "fade-out" - ] - } - ], - "no-descending-specificity": null, - "no-invalid-position-at-import-rule": null, - "declaration-empty-line-before": null, - "keyframes-name-pattern": null, - "custom-property-pattern": null, - "number-max-precision": 8, - "alpha-value-notation": "number", - "color-function-notation": "legacy", - "selector-class-pattern": null, - "selector-id-pattern": null, - "plugin/declaration-block-no-ignored-properties": true, - "selector-type-no-unknown": null, - "selector-pseudo-element-no-unknown": [ - true, - { - "ignorePseudoElements": [ - "ng-deep" - ] - } - ], - "no-invalid-double-slash-comments": null, - "import-notation": "string", - "media-feature-range-notation": "prefix", - "media-query-no-invalid": null - } -} diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000000..b1967c2fc9 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,88 @@ +const { propertyGroups } = require('stylelint-config-clean-order'); + +const propertiesOrder = propertyGroups.map(properties => ({ + noEmptyLineBetween: true, + emptyLineBefore: 'never', + properties +})); + +module.exports = { + extends: ['stylelint-config-standard'], + customSyntax: 'postcss-less', + plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'], + rules: { + 'function-name-case': ['lower', { ignoreFunctions: ['/colorPalette/'] }], + 'function-no-unknown': [ + true, + { + ignoreFunctions: [ + 'fade', + 'tint', + 'darken', + 'ceil', + 'fadein', + 'floor', + 'unit', + 'shade', + 'lighten', + 'percentage', + '-', + '~`colorPalette', + 'snaplist', + 'fade-out' + ] + } + ], + 'no-descending-specificity': null, + 'no-invalid-position-at-import-rule': null, + 'declaration-empty-line-before': null, + 'keyframes-name-pattern': null, + 'custom-property-pattern': null, + 'number-max-precision': 8, + 'alpha-value-notation': 'number', + 'color-function-notation': 'legacy', + 'selector-class-pattern': null, + 'selector-id-pattern': null, + 'plugin/declaration-block-no-ignored-properties': true, + 'selector-type-no-unknown': null, + 'selector-pseudo-element-no-unknown': [ + true, + { + ignorePseudoElements: ['ng-deep'] + } + ], + 'no-invalid-double-slash-comments': null, + 'import-notation': 'string', + 'media-feature-range-notation': 'prefix', + 'media-query-no-invalid': null, + 'order/order': [ + [ + 'dollar-variables', + 'at-variables', + "custom-properties", + { type: 'at-rule', name: 'custom-media' }, + { type: 'at-rule', name: 'function' }, + { type: 'at-rule', name: 'mixin' }, + { type: 'at-rule', name: 'extend' }, + { type: 'at-rule', name: 'include' }, + 'declarations', + 'less-mixins', + { + type: 'rule', + selector: /^&::[\w-]+/, + hasBlock: true + }, + 'rules', + { type: 'at-rule', name: 'media', hasBlock: true } + ], + { severity: 'warning' } + ], + 'order/properties-order': [ + propertiesOrder, + { + severity: 'warning', + unspecified: 'bottomAlphabetical' + } + ] + } +}; diff --git a/.vscode/settings.json b/.vscode/settings.json index f56905d2d5..31c41bf054 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -33,8 +33,7 @@ }, "files.associations": { "*.json": "jsonc", - ".prettierrc": "json", - ".stylelintrc": "json" + ".prettierrc": "json" }, "angular.enable-strict-mode-prompt": false } diff --git a/package.json b/package.json index 0270fbc89d..6cc2a6d213 100644 --- a/package.json +++ b/package.json @@ -144,10 +144,9 @@ "readline-sync": "^1.4.10", "stream": "0.0.2", "stylelint": "^15.10.3", - "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^34.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.7.0", - "stylelint-order": "^6.0.3", + "stylelint-config-clean-order": "^5.2.0", "source-map-explorer": "^2.5.3", "xlsx": "^0.18.5", "jszip": "^3.10.1", diff --git a/packages/abc/avatar-list/style/index.less b/packages/abc/avatar-list/style/index.less index 181e7f777a..7a93c5890a 100644 --- a/packages/abc/avatar-list/style/index.less +++ b/packages/abc/avatar-list/style/index.less @@ -17,9 +17,10 @@ height: @avatar-size-base; margin-left: -8px; font-size: @font-size-base; + .@{ant-prefix}-avatar { - border: 1px solid #fff; cursor: pointer; + border: 1px solid #fff; } } @@ -36,6 +37,7 @@ &__mini { width: @avatar-list-mini-wh; height: @avatar-list-mini-wh; + .@{ant-prefix}-avatar { width: @avatar-list-mini-wh; height: @avatar-list-mini-wh; diff --git a/packages/abc/cell/style/index.less b/packages/abc/cell/style/index.less index e807da80f4..96f7c4aa0f 100644 --- a/packages/abc/cell/style/index.less +++ b/packages/abc/cell/style/index.less @@ -47,8 +47,8 @@ .unit { margin-left: 2px; - color: @cell-unit-color; font-size: @cell-unit-font-size; + color: @cell-unit-color; } &__disabled { diff --git a/packages/abc/down-file/style/index.less b/packages/abc/down-file/style/index.less index b7569275f9..bd93ad92e6 100644 --- a/packages/abc/down-file/style/index.less +++ b/packages/abc/down-file/style/index.less @@ -10,6 +10,7 @@ .down-file-not-support-behavior-mixin(@value) when (@value = 'hidden') { display: none; } + /* stylelint-disable-next-line order/order */ .down-file-not-support-behavior-mixin(@down-file-not-support-behavior); } } diff --git a/packages/abc/ellipsis/style/index.less b/packages/abc/ellipsis/style/index.less index 8349c00277..c0da5482da 100644 --- a/packages/abc/ellipsis/style/index.less +++ b/packages/abc/ellipsis/style/index.less @@ -6,9 +6,9 @@ ellipsis { } @{ellipsis-prefix} { + overflow: hidden; display: inline-block; width: 100%; - overflow: hidden; word-break: break-all; &__lines { @@ -17,9 +17,9 @@ ellipsis { &__line-clamp { position: relative; + overflow: hidden; /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; - overflow: hidden; text-overflow: ellipsis; } diff --git a/packages/abc/error-collect/style/index.less b/packages/abc/error-collect/style/index.less index 26429c78a1..4d07339645 100644 --- a/packages/abc/error-collect/style/index.less +++ b/packages/abc/error-collect/style/index.less @@ -2,9 +2,9 @@ @error-collect-prefix: ~'.error-collect'; @{error-collect-prefix} { + cursor: pointer; padding-right: 24px; color: @error-collect-color; - cursor: pointer; &__count { padding-left: 8px; diff --git a/packages/abc/error-collect/style/rtl.less b/packages/abc/error-collect/style/rtl.less index 8b7ee5a9a4..6bc533ffeb 100644 --- a/packages/abc/error-collect/style/rtl.less +++ b/packages/abc/error-collect/style/rtl.less @@ -1,7 +1,8 @@ @{error-collect-prefix}-rtl { + direction: rtl; padding-right: 0; padding-left: 24px; - direction: rtl; + @{error-collect-prefix} { &__count { padding-right: 8px; diff --git a/packages/abc/exception/style/index.less b/packages/abc/exception/style/index.less index 137707e7a7..e93535054d 100644 --- a/packages/abc/exception/style/index.less +++ b/packages/abc/exception/style/index.less @@ -7,15 +7,15 @@ height: 100%; &__img-block { + zoom: 1; flex: 0 0 62.5%; width: 62.5%; padding-right: 152px; - zoom: 1; &::before, &::after { - display: table; content: ' '; + display: table; } &::after { @@ -41,17 +41,17 @@ &-title { margin-bottom: 24px; - color: #434e59; - font-weight: 600; font-size: 72px; + font-weight: 600; line-height: 72px; + color: #434e59; } &-desc { margin-bottom: 16px; - color: @text-color-secondary; font-size: 20px; line-height: 28px; + color: @text-color-secondary; } &-actions { @@ -85,8 +85,8 @@ @media screen and (max-width: @screen-xs) { @{exception-prefix} { &__img-block { - margin-bottom: -24px; overflow: hidden; + margin-bottom: -24px; } } } diff --git a/packages/abc/footer-toolbar/style/index.less b/packages/abc/footer-toolbar/style/index.less index 635368239c..021064b996 100644 --- a/packages/abc/footer-toolbar/style/index.less +++ b/packages/abc/footer-toolbar/style/index.less @@ -3,9 +3,9 @@ @{footer-toolbar-prefix} { position: fixed; + z-index: @zindex; right: 0; bottom: 0; - z-index: @zindex; display: flex; width: 100%; height: @footer-toolbar-height; diff --git a/packages/abc/full-content/style/index.less b/packages/abc/full-content/style/index.less index d3608ea9ad..358b7245df 100644 --- a/packages/abc/full-content/style/index.less +++ b/packages/abc/full-content/style/index.less @@ -2,9 +2,9 @@ @full-content-prefix: ~'.full-content'; @{full-content-prefix} { + overflow: auto; display: block; height: 100%; - overflow: auto; &__body { overflow: hidden; diff --git a/packages/abc/global-footer/style/index.less b/packages/abc/global-footer/style/index.less index 0c5bb15527..5b6b07706f 100644 --- a/packages/abc/global-footer/style/index.less +++ b/packages/abc/global-footer/style/index.less @@ -26,8 +26,8 @@ } &__copyright { - color: @text-color-secondary; font-size: @font-size-base; + color: @text-color-secondary; } } diff --git a/packages/abc/loading/style/index.less b/packages/abc/loading/style/index.less index 4d9ced71e0..c417596235 100644 --- a/packages/abc/loading/style/index.less +++ b/packages/abc/loading/style/index.less @@ -4,14 +4,14 @@ @{loading-prefix} { &-backdrop { z-index: @loading-zindex; - background-color: @loading-backdrop-bg; opacity: 1; + background-color: @loading-backdrop-bg; } &-default { position: fixed; - inset: 0; z-index: @loading-zindex + 1; + inset: 0; display: flex; flex-direction: column; align-items: center; @@ -19,8 +19,8 @@ &__icon { margin-bottom: 8px; - color: @loading-icon-color; font-size: 24px; + color: @loading-icon-color; } &__text { diff --git a/packages/abc/notice-icon/style/index.less b/packages/abc/notice-icon/style/index.less index 23fb0ae24f..09669758c2 100644 --- a/packages/abc/notice-icon/style/index.less +++ b/packages/abc/notice-icon/style/index.less @@ -5,8 +5,8 @@ width: 336px; &__btn { - display: inline-block; cursor: pointer; + display: inline-block; transition: all 0.3s; } @@ -28,14 +28,14 @@ } .@{ant-prefix}-list { - max-height: 400px; overflow: auto; + max-height: 400px; &-item { + cursor: pointer; + overflow: hidden; padding-right: 24px; padding-left: 24px; - overflow: hidden; - cursor: pointer; transition: all 0.3s; &:last-child { @@ -74,13 +74,13 @@ } &__clear { + cursor: pointer; height: 46px; - color: @text-color; line-height: 46px; + color: @text-color; text-align: center; border-top: 1px solid @border-color-split; border-radius: 0 0 @border-radius-base @border-radius-base; - cursor: pointer; transition: all 0.3s; &:hover { @@ -112,8 +112,8 @@ float: right; margin-top: -1.5px; margin-right: 0; - color: @text-color-secondary; font-weight: normal; + color: @text-color-secondary; } } } diff --git a/packages/abc/onboarding/style/index.less b/packages/abc/onboarding/style/index.less index 4947210834..5f368e8e23 100644 --- a/packages/abc/onboarding/style/index.less +++ b/packages/abc/onboarding/style/index.less @@ -8,10 +8,10 @@ &__mask { position: fixed; - inset: 0; z-index: @onboarding-zindex - 1; - background-color: @onboarding-mask-background-color; + inset: 0; opacity: @onboarding-mask-opacity; + background-color: @onboarding-mask-background-color; } &__item { @@ -19,11 +19,11 @@ } &__light { + pointer-events: none; position: absolute; z-index: @onboarding-zindex; background-color: @onboarding-light-background-color; animation: @onboarding-light-ant; - pointer-events: none; &-el { // position: relative; diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less index 1bfdc251c5..cfab650579 100644 --- a/packages/abc/page-header/style/index.less +++ b/packages/abc/page-header/style/index.less @@ -45,15 +45,15 @@ } &__title { - color: @heading-color; - font-weight: 500; font-size: 20px; + font-weight: 500; + color: @heading-color; small { padding-left: @layout-gutter; - color: @page-header-title-sub-color; - font-weight: normal; font-size: 14px; + font-weight: normal; + color: @page-header-title-sub-color; } } diff --git a/packages/abc/pdf/style/index.less b/packages/abc/pdf/style/index.less index b57a3eceac..9c57955990 100644 --- a/packages/abc/pdf/style/index.less +++ b/packages/abc/pdf/style/index.less @@ -4,9 +4,9 @@ @{pdf-prefix} { &-container { position: absolute; + overflow-x: auto; width: 100%; height: 100%; - overflow-x: auto; -webkit-overflow-scrolling: touch; } } diff --git a/packages/abc/quick-menu/style/index.less b/packages/abc/quick-menu/style/index.less index 05eb3355aa..6c26a3402b 100644 --- a/packages/abc/quick-menu/style/index.less +++ b/packages/abc/quick-menu/style/index.less @@ -3,9 +3,9 @@ @{quick-menu-prefix} { position: fixed; + z-index: @zindex + 2; right: -@quick-menu-border-width; left: auto; - z-index: @zindex + 2; display: block; backface-visibility: hidden; transition: margin 0.3s cubic-bezier(1, 0, 0, 1); @@ -23,6 +23,7 @@ } &__ctrl { + cursor: pointer; position: absolute; top: -1px; left: -@quick-menu-ctrl-hw; @@ -31,7 +32,6 @@ text-align: center; border-right: 0; border-radius: 3px 0 0 3px; - cursor: pointer; &-icon { font-size: 20px; diff --git a/packages/abc/result/style/index.less b/packages/abc/result/style/index.less index a5ba57de81..6a5907beb6 100644 --- a/packages/abc/result/style/index.less +++ b/packages/abc/result/style/index.less @@ -7,10 +7,6 @@ margin: 0 auto; text-align: center; - @media screen and (max-width: @screen-xs) { - width: 100%; - } - &__icon { margin-bottom: 24px; font-size: 72px; @@ -27,17 +23,17 @@ &__title { margin-bottom: 16px; - color: @heading-color; - font-weight: 500; font-size: 24px; + font-weight: 500; line-height: 32px; + color: @heading-color; } &__desc { margin-bottom: 24px; - color: @text-color-secondary; font-size: 14px; line-height: 22px; + color: @text-color-secondary; } &__extra { @@ -62,6 +58,10 @@ .@{ant-prefix}-steps .@{ant-prefix}-steps-title { background: @result-extra-bg; } + + @media screen and (max-width: @screen-xs) { + width: 100%; + } } @import './rtl.less'; diff --git a/packages/abc/reuse-tab/style/index.less b/packages/abc/reuse-tab/style/index.less index d8020f8ed5..0aa1570709 100644 --- a/packages/abc/reuse-tab/style/index.less +++ b/packages/abc/reuse-tab/style/index.less @@ -2,18 +2,18 @@ @reuse-tab-prefix: ~'.reuse-tab'; @{reuse-tab-prefix} { + user-select: none; display: block; background-color: @reuse-tab-bg; outline: none; - user-select: none; .@{ant-prefix}-tabs { &-nav .@{ant-prefix}-tabs-tab { @{reuse-tab-prefix}__op { position: absolute; display: none; margin: 0; - color: @text-color; font-size: 10px; + color: @text-color; } &:hover { @@ -23,8 +23,8 @@ } @{reuse-tab-prefix}__name { &-width { - display: inline-block; overflow: hidden; + display: inline-block; text-overflow: ellipsis; } } @@ -71,8 +71,8 @@ } &__disabled { - opacity: 0.8; pointer-events: none; + opacity: 0.8; } } diff --git a/packages/abc/se/style/index.less b/packages/abc/se/style/index.less index aeba64337e..70d050789f 100644 --- a/packages/abc/se/style/index.less +++ b/packages/abc/se/style/index.less @@ -3,14 +3,14 @@ @{se-prefix} { &__title { - display: block; float: none; clear: both; + display: block; width: 100%; - color: @heading-color; - font-weight: 700; font-size: 14px; + font-weight: 700; line-height: @line-height-base; + color: @heading-color; } &__item { @@ -23,8 +23,8 @@ &-empty { &::before { - display: inline-block; content: ''; + display: inline-block; } } @@ -37,8 +37,8 @@ display: table-cell; flex: 0 0 auto; width: initial; - white-space: nowrap; text-align: right; + white-space: nowrap; &-optional { margin-left: @se-optional-margin; diff --git a/packages/abc/st/style/index.less b/packages/abc/st/style/index.less index 5e05c316cc..8a7e580418 100644 --- a/packages/abc/st/style/index.less +++ b/packages/abc/st/style/index.less @@ -6,16 +6,16 @@ &__p-left { .@{ant-prefix}-table-pagination { - display: block; float: none; + display: block; text-align: left; } } &__p-center { .@{ant-prefix}-table-pagination { - display: block; float: none; + display: block; text-align: center; } } @@ -30,8 +30,8 @@ &-disabled { @{st-prefix}__btn-text { - color: @st-btn-disabled-color; pointer-events: none; + color: @st-btn-disabled-color; } } } @@ -181,8 +181,8 @@ .ant-table-content, .ant-table-body { > table { - word-wrap: break-word !important; table-layout: fixed !important; + word-wrap: break-word !important; } } } diff --git a/packages/abc/sv/style/index.less b/packages/abc/sv/style/index.less index 11ac397029..cd5ca933c6 100644 --- a/packages/abc/sv/style/index.less +++ b/packages/abc/sv/style/index.less @@ -13,8 +13,8 @@ // offset the padding-bottom of last row .@{ant-prefix}-row { - margin-bottom: -@sv-bottom; overflow: hidden; + margin-bottom: -@sv-bottom; } } @@ -23,8 +23,8 @@ display: flex; @{sv-prefix}__label { - flex: 0 0 auto; overflow: hidden; + flex: 0 0 auto; text-align: right; text-overflow: ellipsis; } @@ -39,30 +39,30 @@ } &__title { - display: block; float: none; clear: both; + display: block; width: 100%; margin-bottom: @sv-bottom; - color: @heading-color; - font-weight: 500; font-size: 14px; + font-weight: 500; + color: @heading-color; } &__label { display: table-cell; // margin-right: 8px; padding-bottom: @sv-bottom; - color: @sv-label-color; line-height: 22px; + color: @sv-label-color; white-space: nowrap; &:not(@{sv-prefix}__label-empty) { &::after { + content: ':'; position: relative; top: -0.5px; margin: 0 8px 0 2px; - content: ':'; } } @@ -85,10 +85,10 @@ display: table-cell; width: 100%; padding-bottom: @sv-bottom; - color: @sv-detail-color; line-height: 22px; - vertical-align: top; + color: @sv-detail-color; word-break: break-all; + vertical-align: top; } &__type { @@ -148,9 +148,9 @@ &-prefix, &-unit { - color: @sv-value-prefix-unit-color; font-size: @sv-value-prefix-unit-font-size; font-style: normal; + color: @sv-value-prefix-unit-color; } &-prefix { @@ -172,11 +172,11 @@ padding-left: @sv-value-mulit-padding + @sv-value-mulit-content-width; &::before { + content: @sv-value-mulit-content; position: absolute; left: 0; width: @sv-value-mulit-content-width; color: @sv-label-color; - content: @sv-value-mulit-content; } } diff --git a/packages/abc/tag-select/style/index.less b/packages/abc/tag-select/style/index.less index c09a7b7fd4..1bb35a5cae 100644 --- a/packages/abc/tag-select/style/index.less +++ b/packages/abc/tag-select/style/index.less @@ -3,15 +3,15 @@ @tag-select-height: @tag-line-height + 2px; // 2px is top & bottom border width @{tag-select-prefix} { + user-select: none; position: relative; + overflow: hidden; display: block; max-height: @tag-select-height + @tag-select-margin; margin-top: -@tag-select-margin; margin-left: -8px; - overflow: hidden; line-height: @line-height-base; transition: all 0.3s; - user-select: none; &__expanded { max-height: 200px; diff --git a/packages/abc/tag-select/style/rtl.less b/packages/abc/tag-select/style/rtl.less index 9c6c590030..f499bfd2a6 100644 --- a/packages/abc/tag-select/style/rtl.less +++ b/packages/abc/tag-select/style/rtl.less @@ -1,12 +1,13 @@ @{tag-select-prefix}-rtl { + direction: rtl; margin-right: -8px; margin-left: 0; - direction: rtl; &__has-expand { padding-right: 0 !important; padding-left: 50px !important; } + @{tag-select-prefix} { .@{ant-prefix}-tag { margin-right: 0; diff --git a/packages/chart/card/style/index.less b/packages/chart/card/style/index.less index 5b78d77409..1234f2cda3 100644 --- a/packages/chart/card/style/index.less +++ b/packages/chart/card/style/index.less @@ -6,8 +6,8 @@ &__top { position: relative; - width: 100%; overflow: hidden; + width: 100%; &-margin { margin-bottom: 12px; @@ -19,21 +19,21 @@ } &__meta { - &-wrap { - float: left; - } - height: 22px; - color: @text-color-secondary; font-size: @font-size-base; line-height: 22px; + color: @text-color-secondary; + + &-wrap { + float: left; + } &-action { + cursor: pointer; position: absolute; top: 4px; right: 0; line-height: 1; - cursor: pointer; } } @@ -49,16 +49,16 @@ } &__total { + overflow: hidden; height: 38px; margin-top: 4px; margin-bottom: 0; - overflow: hidden; - color: @heading-color; font-size: 30px; line-height: 38px; - white-space: nowrap; + color: @heading-color; text-overflow: ellipsis; word-break: break-all; + white-space: nowrap; } &__desc { diff --git a/packages/chart/number-info/style/index.less b/packages/chart/number-info/style/index.less index b743a1704a..16fd91ffac 100644 --- a/packages/chart/number-info/style/index.less +++ b/packages/chart/number-info/style/index.less @@ -6,55 +6,55 @@ &__title { margin-bottom: 16px; - color: @text-color; font-size: @font-size-lg; + color: @text-color; transition: all 0.3s; &-sub { - height: 22px; overflow: hidden; - color: @text-color-secondary; + height: 22px; font-size: @font-size-base; line-height: 22px; - white-space: nowrap; + color: @text-color-secondary; text-overflow: ellipsis; word-break: break-all; + white-space: nowrap; } } &__value { - margin-top: 4px; overflow: hidden; + margin-top: 4px; font-size: 0; - white-space: nowrap; text-overflow: ellipsis; word-break: break-all; + white-space: nowrap; &-suffix { margin-left: 4px; - color: @text-color; font-size: 16px; font-style: normal; + color: @text-color; } &-text { display: inline-block; height: 32px; - color: @heading-color; font-size: 24px; line-height: 32px; + color: @heading-color; } &-sub { margin-left: 32px; - color: @text-color-secondary; font-size: @font-size-lg; + color: @text-color-secondary; vertical-align: top; .anticon { + transform: scale(0.82); margin-left: 4px; font-size: 12px; - transform: scale(0.82); } .anticon-caret-up { @@ -79,6 +79,7 @@ padding-left: 32px; &::after { + content: ''; position: absolute; top: 0; bottom: 0; @@ -86,7 +87,6 @@ width: 1px; margin: 8px 0; background-color: @border-color-split; - content: ''; } } } diff --git a/packages/chart/pie/style/index.less b/packages/chart/pie/style/index.less index fe6d93c7c9..7d26205c4f 100644 --- a/packages/chart/pie/style/index.less +++ b/packages/chart/pie/style/index.less @@ -13,17 +13,17 @@ position: absolute; top: 50%; right: 0; + transform: translateY(-50%); min-width: 250px; margin: 0 20px; padding: 0; list-style: none; - transform: translateY(-50%); &-item { + cursor: pointer; height: 22px; margin-bottom: 16px; line-height: 22px; - cursor: pointer; &:last-child { margin-bottom: 0; @@ -66,8 +66,8 @@ } @{g2-pie-prefix}__legend { position: relative; - min-width: auto; transform: none; + min-width: auto; } } } @@ -76,25 +76,25 @@ position: absolute; top: 50%; left: 50%; + transform: translate(-50%, -50%); height: 62px; text-align: center; - transform: translate(-50%, -50%); &-title { height: 22px; margin-bottom: 8px; - color: @text-color-secondary; - font-weight: normal; font-size: 14px; + font-weight: normal; line-height: 22px; + color: @text-color-secondary; } &-stat { display: block; height: 32px; - color: @heading-color; font-size: 1.2em; line-height: 32px; + color: @heading-color; white-space: nowrap; } } diff --git a/packages/chart/radar/style/index.less b/packages/chart/radar/style/index.less index 9192933bfa..49ec30edd1 100644 --- a/packages/chart/radar/style/index.less +++ b/packages/chart/radar/style/index.less @@ -8,20 +8,20 @@ margin-top: 16px; &-item { + cursor: pointer; position: relative; - color: @text-color-secondary; line-height: 22px; + color: @text-color-secondary; text-align: center; - cursor: pointer; &::after { + content: ''; position: absolute; top: 8px; right: 0; width: 1px; height: 40px; background-color: @border-color-split; - content: ''; } &:last-child::after { @@ -33,9 +33,9 @@ margin-top: 4px; margin-bottom: 0; padding-left: 16px; - color: @heading-color; font-size: 24px; line-height: 32px; + color: @heading-color; } &-dot { diff --git a/packages/chart/trend/style/index.less b/packages/chart/trend/style/index.less index a875341514..36a528cbf3 100644 --- a/packages/chart/trend/style/index.less +++ b/packages/chart/trend/style/index.less @@ -13,8 +13,8 @@ margin-left: 4px; i { - font-size: 12px; transform: scale(0.83); + font-size: 12px; } } diff --git a/packages/chart/water-wave/style/index.less b/packages/chart/water-wave/style/index.less index 93d796ff6e..2e2a3e5989 100644 --- a/packages/chart/water-wave/style/index.less +++ b/packages/chart/water-wave/style/index.less @@ -3,8 +3,8 @@ @{g2-water-wave-prefix} { position: relative; - display: inline-block; transform-origin: left; + display: inline-block; &__desc { position: absolute; @@ -14,20 +14,20 @@ text-align: center; &-title { - color: @text-color-secondary; font-size: 14px; line-height: 22px; + color: @text-color-secondary; } &-percent { - color: @heading-color; font-size: 24px; line-height: 32px; + color: @heading-color; } } &__canvas { - transform: scale(0.5); transform-origin: 0 0; + transform: scale(0.5); } } diff --git a/packages/form/src/style/index.less b/packages/form/src/style/index.less index ec9caaa966..6b87bb51fd 100644 --- a/packages/form/src/style/index.less +++ b/packages/form/src/style/index.less @@ -61,6 +61,7 @@ padding-bottom: 0; } @{sf-prefix}__array-remove { + cursor: pointer; position: absolute; top: -16px; right: -16px; @@ -72,7 +73,6 @@ text-align: center; background: @sf-widget-array-type-card-remove-bg; border-radius: 50%; - cursor: pointer; i { color: #fff; @@ -116,8 +116,8 @@ // upload .@{ant-prefix}-upload-select-picture-card i { - color: #999; font-size: 32px; + color: #999; } .@{ant-prefix}-upload.@{ant-prefix}-upload-drag { height: 180px; diff --git a/packages/theme/layout-default/style/_aside.less b/packages/theme/layout-default/style/_aside.less index 2f850cef7b..4fc695289f 100644 --- a/packages/theme/layout-default/style/_aside.less +++ b/packages/theme/layout-default/style/_aside.less @@ -1,23 +1,23 @@ @{alain-default-prefix}__aside { position: absolute; + z-index: @zindex + 5; top: 0; bottom: 0; - z-index: @zindex + 5; + overflow: hidden; width: @alain-default-aside-wd; margin-top: @alain-default-header-hg; - overflow: hidden; - background-color: @alain-default-aside-bg; backface-visibility: hidden; + background-color: @alain-default-aside-bg; transition: width 0.2s @alain-default-ease, translate 0.2s @alain-default-ease; -webkit-overflow-scrolling: touch; &::after { + content: ''; position: absolute; top: 0; right: 0; bottom: 0; border-right: 1px solid @alain-default-content-heading-border; - content: ''; } &-wrap { @@ -27,13 +27,13 @@ } &-inner { - flex: 1 1 0%; + // Firefox + scrollbar-width: none; + scroll-snap-type: proximity; overflow-x: hidden scroll; + flex: 1 1 0%; -webkit-overflow-scrolling: touch; - scroll-snap-type: proximity; scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); - // Firefox - scrollbar-width: none; // Chrome &::-webkit-scrollbar { width: @alain-default-aside-scrollbar-height; @@ -53,10 +53,10 @@ border-top: 1px solid @alain-default-content-heading-border; &-collapsed { + cursor: pointer; padding: 8px 0; font-size: 16px; text-align: center; - cursor: pointer; } } } diff --git a/packages/theme/layout-default/style/_header.less b/packages/theme/layout-default/style/_header.less index cac7bf417a..18abc135ec 100644 --- a/packages/theme/layout-default/style/_header.less +++ b/packages/theme/layout-default/style/_header.less @@ -68,6 +68,7 @@ } &-item { + cursor: pointer; display: block; min-width: 50px; padding: 8px 2px; @@ -75,7 +76,6 @@ text-align: center; border-radius: 2px; outline: none; - cursor: pointer; transition: background-color 300ms; &:hover { @@ -85,9 +85,9 @@ > i, &-icon { - font-size: @alain-default-header-icon-fs !important; // fix ant-dropdown-trigger transform: none !important; + font-size: @alain-default-header-icon-fs !important; } } } @@ -105,8 +105,8 @@ } &-disabled { - opacity: .5; pointer-events: none; + opacity: .5; } } } @@ -166,8 +166,8 @@ .@{ant-prefix}-input-group-addon, .@{ant-prefix}-input-affix-wrapper { i { - color: @grey-8; transform: rotate(90deg); + color: @grey-8; } } } @@ -176,9 +176,9 @@ @media (max-width: @mobile-max) { @{alain-default-prefix}__search { position: absolute; + z-index: @zindex+20; top: 0; left: 0; - z-index: @zindex+20; align-items: center; width: 100%; height: 100%; diff --git a/packages/theme/layout-default/style/_layout.less b/packages/theme/layout-default/style/_layout.less index f3e7de6919..28084ea710 100644 --- a/packages/theme/layout-default/style/_layout.less +++ b/packages/theme/layout-default/style/_layout.less @@ -1,7 +1,7 @@ html { - height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away - direction: ltr; touch-action: manipulation; + direction: ltr; + height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away } html, @@ -18,11 +18,11 @@ body { @{alain-default-prefix} { position: relative; + overflow-x: hidden; display: block; width: 100%; height: auto; min-height: 100%; - overflow-x: hidden; &__unwrap { margin-right: -@alain-default-content-padding; @@ -36,6 +36,7 @@ body { &__content { margin: 0 @alain-default-content-padding @alain-default-content-padding @alain-default-content-padding; + .router-ant(); &-title { display: flex; @@ -53,13 +54,13 @@ body { > h1 { margin-bottom: 0; - font-weight: normal; font-size: 18px; + font-weight: normal; > small { display: block; - color: @muted-color; font-size: 12px; + color: @muted-color; } } } @@ -67,13 +68,12 @@ body { nz-input-group { width: auto; } - .router-ant(); } &__hide-aside { @{alain-default-prefix}__content { - margin-left: @alain-default-content-padding !important; transform: none !important; + margin-left: @alain-default-content-padding !important; } } diff --git a/packages/theme/layout-default/style/_progress-bar.less b/packages/theme/layout-default/style/_progress-bar.less index 9dbf11a4d2..e40c8dab3a 100644 --- a/packages/theme/layout-default/style/_progress-bar.less +++ b/packages/theme/layout-default/style/_progress-bar.less @@ -1,18 +1,18 @@ @{alain-default-prefix}__progress-bar { position: fixed; z-index: @zindex-base + 20; + overflow: hidden; width: 100vw; height: 4px; - overflow: hidden; background: fade(#ddd, 40%); &::after { + content: ' '; + transform-origin: top left; display: block; width: 33.3vw; height: 100%; - transform-origin: top left; animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear; - content: ' '; } } diff --git a/packages/theme/layout-default/style/fix/_reuse-tab.less b/packages/theme/layout-default/style/fix/_reuse-tab.less index fc7f37fc40..ec2ded9058 100644 --- a/packages/theme/layout-default/style/fix/_reuse-tab.less +++ b/packages/theme/layout-default/style/fix/_reuse-tab.less @@ -8,10 +8,10 @@ @{alain-default-prefix}__fixed { @{reuse-tab-prefix} { position: fixed; + z-index: @zindex-fixed + 1; top: @alain-default-header-hg; right: @alain-default-content-padding; left: @alain-default-aside-width; - z-index: @zindex-fixed + 1; } } diff --git a/packages/theme/layout-default/style/fix/_sidebar-nav.less b/packages/theme/layout-default/style/fix/_sidebar-nav.less index ced9a6cc08..50135d6a08 100644 --- a/packages/theme/layout-default/style/fix/_sidebar-nav.less +++ b/packages/theme/layout-default/style/fix/_sidebar-nav.less @@ -15,16 +15,16 @@ transition: border-left-color 0.4s ease; &-link { + user-select: none; position: relative; + overflow: hidden; display: block; padding: @alain-default-aside-nav-padding-top-bottom @alain-default-aside-nav-padding-left-right * 2 @alain-default-aside-nav-padding-top-bottom @alain-default-aside-nav-padding-left-right; - overflow: hidden; color: @alain-default-aside-nav-text-color; - white-space: nowrap; text-decoration: none !important; text-overflow: ellipsis; - user-select: none; + white-space: nowrap; &:hover { color: @alain-default-aside-nav-text-hover-color; @@ -97,8 +97,8 @@ } &__sub { - display: none; overflow: hidden; + display: none; @{sidebar-nav-prefix}__item { border-left: 0 !important; @@ -113,6 +113,7 @@ &::before, &::after { + content: ''; position: absolute; width: 6px; height: 1.5px; @@ -120,7 +121,6 @@ background-image: linear-gradient(to right, @menu-item-color, @menu-item-color); border-radius: 2px; transition: background-color 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out; - content: ''; } &::before { diff --git a/packages/theme/layout-default/style/widgets/_app-icons.less b/packages/theme/layout-default/style/widgets/_app-icons.less index 315690d2ca..51d53fb34b 100644 --- a/packages/theme/layout-default/style/widgets/_app-icons.less +++ b/packages/theme/layout-default/style/widgets/_app-icons.less @@ -2,10 +2,10 @@ .app-icons { padding: @layout-gutter * 2; .@{ant-prefix}-col-6 { + cursor: pointer; padding: (@layout-gutter * 2) 0; text-align: center; border-radius: 4px; - cursor: pointer; transition: background-color 300ms; &:hover { @@ -22,8 +22,8 @@ small { display: block; padding-top: 4px; - color: #9c9c9c; font-size: 14px; + color: #9c9c9c; } } } diff --git a/packages/theme/layout-default/style/widgets/_user.less b/packages/theme/layout-default/style/widgets/_user.less index f11f8117c2..91be390c43 100644 --- a/packages/theme/layout-default/style/widgets/_user.less +++ b/packages/theme/layout-default/style/widgets/_user.less @@ -3,22 +3,23 @@ .alain-default-aside-user-mixin(@enabled) when(@enabled=true) { @{alain-default-prefix}__aside-user { + cursor: pointer; display: flex; align-items: center; justify-content: center; margin: @alain-default-user-block-margin @alain-default-user-block-margin 0 @alain-default-user-block-margin; - cursor: pointer; + .@{ant-prefix}-dropdown-trigger { display: flex; align-items: center; } &-info { - flex: 1; overflow: hidden; + flex: 1; color: @text-color; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } &-avatar { @@ -26,24 +27,6 @@ } } - // Desktop - @media (min-width: @mobile-min) { - @{alain-default-prefix}__collapsed { - @{alain-default-prefix}__aside-user { - width: @alain-default-aside-collapsed-wd; - margin-left: 0; - - &-info { - display: none; - } - - &-avatar { - margin: 0 auto; - } - } - } - } - [dir='rtl'] { @{alain-default-prefix}__aside-user { &-avatar { @@ -64,5 +47,23 @@ } } } + + // Desktop + @media (min-width: @mobile-min) { + @{alain-default-prefix}__collapsed { + @{alain-default-prefix}__aside-user { + width: @alain-default-aside-collapsed-wd; + margin-left: 0; + + &-info { + display: none; + } + + &-avatar { + margin: 0 auto; + } + } + } + } } .alain-default-aside-user-mixin(@alain-default-aside-user-enabled); diff --git a/packages/theme/setting-drawer/style/index.less b/packages/theme/setting-drawer/style/index.less index 5af000ebd0..eace4b44c6 100644 --- a/packages/theme/setting-drawer/style/index.less +++ b/packages/theme/setting-drawer/style/index.less @@ -28,33 +28,35 @@ &__title { margin-bottom: 12px; - color: @heading-color; font-size: 14px; line-height: 22px; + color: @heading-color; } &__theme { - margin-top: 24px; overflow: hidden; + margin-top: 24px; &-tag { + cursor: pointer; float: left; width: 20px; height: 20px; margin-right: 8px; - color: #fff; font-weight: bold; + color: #fff; text-align: center; border-radius: 2px; - cursor: pointer; } } &__handle { + pointer-events: auto; + cursor: pointer; position: fixed; + z-index: @zindex-modal-mask - 1; top: 240px; right: 0; - z-index: @zindex-modal-mask - 1; display: flex; align-items: center; justify-content: center; @@ -64,18 +66,16 @@ text-align: center; background: @primary-color; border-radius: 4px 0 0 4px; - cursor: pointer; transition: right @animation-duration-slow @ease-base-in; - pointer-events: auto; &-icon { - color: #fff; font-size: 20px; + color: #fff; } &-opened { - right: @setting-drawer-width; z-index: @zindex-modal-mask + 1; + right: @setting-drawer-width; } } } diff --git a/packages/theme/system/_preloader.less b/packages/theme/system/_preloader.less index a3188ce0b0..a9ebbcb567 100644 --- a/packages/theme/system/_preloader.less +++ b/packages/theme/system/_preloader.less @@ -1,15 +1,14 @@ /** * 未被直接引用，为了尽可快渲染预加载状态，生成的CSS代码已直接在 `index.html` 中引用 */ - .preloader { position: fixed; + z-index: 9999; top: 0; left: 0; - z-index: 9999; + overflow: hidden; width: 100%; height: 100%; - overflow: hidden; background: #49a9ee; transition: opacity 0.65s; } @@ -38,10 +37,10 @@ .cs-loader-inner { position: absolute; top: 50%; + transform: translateY(-50%); width: 100%; color: #fff; text-align: center; - transform: translateY(-50%); label { display: inline-block; diff --git a/packages/theme/system/antd/_modal.less b/packages/theme/system/antd/_modal.less index bae9be3234..158bd9fa72 100644 --- a/packages/theme/system/antd/_modal.less +++ b/packages/theme/system/antd/_modal.less @@ -68,16 +68,16 @@ * ``` */ margin: 0; - color: @modal-heading-color; - font-weight: 500; font-size: @font-size-lg; + font-weight: 500; line-height: 22px; + color: @modal-heading-color; word-wrap: break-word; small { margin-left: @layout-gutter; - color: @muted-color; font-size: 12px; + color: @muted-color; } } diff --git a/packages/theme/system/antd/_table.less b/packages/theme/system/antd/_table.less index 674f60ac35..63babe10dd 100644 --- a/packages/theme/system/antd/_table.less +++ b/packages/theme/system/antd/_table.less @@ -98,8 +98,8 @@ align-items: center; width: 100%; padding: @nz-table-rep-padding-vertical @nz-table-rep-padding-horizontal; - white-space: inherit; text-align: left !important; + white-space: inherit; border-bottom: none; .@{ant-prefix}-table-rep__title + *:not(.@{ant-prefix}-avatar) { diff --git a/packages/theme/system/ng/_preserve-white-spaces.less b/packages/theme/system/ng/_preserve-white-spaces.less index c385344600..e50433de1d 100644 --- a/packages/theme/system/ng/_preserve-white-spaces.less +++ b/packages/theme/system/ng/_preserve-white-spaces.less @@ -47,6 +47,7 @@ } } } + /* stylelint-disable-next-line order/order */ .preserve-white-spaces-rtl-mixin(@rtl-enabled); } diff --git a/packages/theme/system/utils/_other.less b/packages/theme/system/utils/_other.less index c4f0480771..a036571591 100644 --- a/packages/theme/system/utils/_other.less +++ b/packages/theme/system/utils/_other.less @@ -14,9 +14,9 @@ * * 元素不能被用户缩放 */ + resize: none; min-width: 100%; max-width: 100%; - resize: none; } &-data { @@ -25,9 +25,9 @@ * * 无数据元素 */ - color: rgba(0, 0, 0, 0.25); font-size: 16px; line-height: 64px; + color: rgba(0, 0, 0, 0.25); text-align: center; i { @@ -65,8 +65,8 @@ */ .page-loading { position: absolute; - inset: 0; z-index: 10000; + inset: 0; padding-top: 200px; text-align: center; background: @background-color-base; @@ -83,6 +83,6 @@ * 禁用样式，不可响应任何事件 */ .disabled { - color: @disabled-color; pointer-events: none; + color: @disabled-color; } diff --git a/packages/theme/system/utils/_position.less b/packages/theme/system/utils/_position.less index 018023ce5f..3289520ace 100644 --- a/packages/theme/system/utils/_position.less +++ b/packages/theme/system/utils/_position.less @@ -50,10 +50,10 @@ */ .fixed-top { position: fixed; + z-index: @zindex-fixed; top: 0; right: 0; left: 0; - z-index: @zindex-fixed; } /** @@ -63,8 +63,8 @@ */ .fixed-bottom { position: fixed; + z-index: @zindex-fixed; right: 0; bottom: 0; left: 0; - z-index: @zindex-fixed; } diff --git a/packages/theme/system/utils/_scrollbar.less b/packages/theme/system/utils/_scrollbar.less index 237aea03c7..e434760469 100644 --- a/packages/theme/system/utils/_scrollbar.less +++ b/packages/theme/system/utils/_scrollbar.less @@ -20,6 +20,7 @@ } } } + /* stylelint-disable-next-line order/order */ .scrollbar-inner-mixin(@scrollbar-enabled); } diff --git a/packages/theme/system/widgets/_abs.less b/packages/theme/system/widgets/_abs.less index bdbb78a0fb..bc1a1d77be 100644 --- a/packages/theme/system/widgets/_abs.less +++ b/packages/theme/system/widgets/_abs.less @@ -6,8 +6,8 @@ .abs-center { position: absolute; inset: 0; - margin: auto; overflow: auto; + margin: auto; &.abs-fixed { position: fixed; diff --git a/packages/theme/system/widgets/_half-float.less b/packages/theme/system/widgets/_half-float.less index efd2448706..bfd85e19d6 100644 --- a/packages/theme/system/widgets/_half-float.less +++ b/packages/theme/system/widgets/_half-float.less @@ -24,10 +24,11 @@ .half-float-bottom { position: absolute; - left: 50%; z-index: 2; + left: 50%; } + /* stylelint-disable-next-line order/order */ .for-each(@hafl-float-size, { &.half-float-@{adKey} { margin-bottom: ((@adValue / 2) + 10); diff --git a/packages/theme/system/widgets/_masonry-grid.less b/packages/theme/system/widgets/_masonry-grid.less index 27a0a545d2..3a05efae07 100644 --- a/packages/theme/system/widgets/_masonry-grid.less +++ b/packages/theme/system/widgets/_masonry-grid.less @@ -15,10 +15,10 @@ */ .row-masonry { position: relative; + column-gap: @masonry-column-gap; width: 100%; margin: 0; padding: 0; - column-gap: @masonry-column-gap; > .col-masonry { display: inline-block; @@ -32,6 +32,7 @@ } } + /* stylelint-disable-next-line order/order */ .for-each(@grid-breakpoints, { @media only screen and (min-width: @adValue) { .loopColumn(@pos: 1) when (@pos < 10) { diff --git a/packages/theme/theme-btn/style/index.less b/packages/theme/theme-btn/style/index.less index 069087a811..eafa0de293 100644 --- a/packages/theme/theme-btn/style/index.less +++ b/packages/theme/theme-btn/style/index.less @@ -2,20 +2,20 @@ .widget-theme-btn-mixin(@enabled) when(@enabled=true) { @{theme-btn-prefix} { + cursor: pointer; position: fixed; + z-index: 2147483640; right: 32px; bottom: 102px; - z-index: 2147483640; display: flex; flex-direction: column; - cursor: pointer; &-active { width: 44px; height: 44px; - color: @primary-color; font-size: 22px; line-height: 44px; + color: @primary-color; } .ant-avatar { diff --git a/schematics/application/index.ts b/schematics/application/index.ts index c29d7ff5a6..205bba54c1 100644 --- a/schematics/application/index.ts +++ b/schematics/application/index.ts @@ -43,7 +43,6 @@ import { writePackage, ZORROVERSION } from '../utils'; -import { addImportNotation } from '../utils/less'; import { addESLintRule, UpgradeMainVersions } from '../utils/versions'; let project: ProjectDefinition; @@ -189,10 +188,9 @@ function addCodeStylesToPackageJson(): Rule { `lint-staged@DEP-0.0.0-PLACEHOLDER`, `prettier@DEP-0.0.0-PLACEHOLDER`, `stylelint@DEP-0.0.0-PLACEHOLDER`, - `stylelint-config-rational-order@DEP-0.0.0-PLACEHOLDER`, `stylelint-config-standard@DEP-0.0.0-PLACEHOLDER`, `stylelint-declaration-block-no-ignored-properties@DEP-0.0.0-PLACEHOLDER`, - `stylelint-order@DEP-0.0.0-PLACEHOLDER` + `stylelint-config-clean-order@DEP-0.0.0-PLACEHOLDER` ], 'devDependencies' ); @@ -388,7 +386,6 @@ export default function (options: ApplicationOptions): Rule { addCodeStylesToPackageJson(), addSchematics(options), addESLintRule(context, false), - addImportNotation(), // files removeOrginalFiles(), addFilesToRoot(options), diff --git a/schematics/utils/less.ts b/schematics/utils/less.ts deleted file mode 100644 index e04f1fd1ef..0000000000 --- a/schematics/utils/less.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Rule, Tree } from '@angular-devkit/schematics'; - -import { readJSON, writeJSON } from './json'; - -export function addImportNotation(): Rule { - return (tree: Tree) => { - const filePath = '.stylelintrc'; - const json = readJSON(tree, filePath); - if (json == null) return tree; - if (!json.rules) json.rules = {}; - json.rules['import-notation'] = 'string'; - writeJSON(tree, filePath, json); - return tree; - }; -} diff --git a/scripts/ci/build-schematics.sh b/scripts/ci/build-schematics.sh index a460d24012..f60ee1c514 100755 --- a/scripts/ci/build-schematics.sh +++ b/scripts/ci/build-schematics.sh @@ -62,7 +62,7 @@ copyFiles() { "${1}.eslintrc.js|${2}application/files/root/.eslintrc.js" "${1}.prettierignore|${2}application/files/root/.prettierignore" "${1}.prettierrc.js|${2}application/files/root/.prettierrc.js" - "${1}.stylelintrc|${2}application/files/root/.stylelintrc" + "${1}.stylelintrc.js|${2}application/files/root/.stylelintrc.js" "${1}.nvmrc|${2}application/files/root" "${1}proxy.conf.js|${2}application/files/root" "${1}.husky|${2}application/files/root/.husky" diff --git a/scripts/ci/utils.sh b/scripts/ci/utils.sh index e837a12a49..6bd06eec26 100644 --- a/scripts/ci/utils.sh +++ b/scripts/ci/utils.sh @@ -18,10 +18,9 @@ DEPENDENCIES=$(node -p " 'ajv', 'ajv-formats', 'screenfull', - 'stylelint-config-rational-order', 'stylelint-config-standard', 'stylelint-declaration-block-no-ignored-properties', - 'stylelint-order', + 'stylelint-config-clean-order', 'stylelint', '@antv/data-set', '@antv/g2', diff --git a/src/styles/_colors.less b/src/styles/_colors.less index fd2060df83..ebbf6378ff 100644 --- a/src/styles/_colors.less +++ b/src/styles/_colors.less @@ -1,3 +1,4 @@ +/* stylelint-disable order/order */ .make-palette(@color, @index: 1) when (@index <= 10) { .palette-@{color}-@{index} { @background: '@{color}-@{index}'; @@ -74,16 +75,16 @@ position: relative; top: -3px; margin-left: 16px; - font-size: 14px; font-family: Consolas, sans-serif; + font-size: 14px; } &-validation { position: relative; top: -3px; margin-left: 16px; - color: @error-color; font-size: 13px; + color: @error-color; &-dark { margin-left: 0; @@ -93,19 +94,7 @@ } .main-color { - .make-palette(blue); - .make-palette(purple); - .make-palette(cyan); - .make-palette(green); - .make-palette(magenta); - .make-palette(red); - .make-palette(volcano); - .make-palette(orange); - .make-palette(gold); - .make-palette(yellow); - .make-palette(lime); - .make-palette(geekblue); - .make-palette(gray); + text-align: left; .palette-gray-11 { background: @gray-11; @@ -119,17 +108,15 @@ background: @gray-13; } - text-align: left; - &-item { + cursor: pointer; position: relative; height: 44px; margin-right: 4px; padding: 0 12px; - font-size: 14px; font-family: Consolas, sans-serif; + font-size: 14px; line-height: 44px; - cursor: pointer; transition: all 0.2s; &:first-child { @@ -154,28 +141,41 @@ &-item &-value { position: relative; left: 3px; - float: right; - transform: scale(0.85); transform-origin: 100% 50%; + transform: scale(0.85); + float: right; opacity: 0; transition: all 0.3s; } + .make-palette(blue); + .make-palette(purple); + .make-palette(cyan); + .make-palette(green); + .make-palette(magenta); + .make-palette(red); + .make-palette(volcano); + .make-palette(orange); + .make-palette(gold); + .make-palette(yellow); + .make-palette(lime); + .make-palette(geekblue); + .make-palette(gray); } .color-title { margin: 0 0 24px; - color: #5c6b77; - font-weight: 500; font-size: 22px; + font-weight: 500; + color: #5c6b77; text-align: center; text-transform: capitalize; } .color-description { display: block; - color: #777; - font-weight: lighter; font-size: 14px; + font-weight: lighter; + color: #777; } .main-color:hover { @@ -235,9 +235,9 @@ position: absolute; bottom: 0; left: 0; + transform-origin: unset; width: 100%; text-align: center; - transform-origin: unset; } &:hover { diff --git a/src/styles/_common.less b/src/styles/_common.less index 105861564d..1d6daae6b7 100644 --- a/src/styles/_common.less +++ b/src/styles/_common.less @@ -3,9 +3,9 @@ html.rtl { } body { - color: @site-text-color; - font-size: 14px; font-family: @font-family; + font-size: 14px; + color: @site-text-color; background: @body-background; transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); } @@ -22,9 +22,9 @@ a { .fetching { position: absolute; + z-index: 99; top: 16px; left: 16px; - z-index: 99; } #header, diff --git a/src/styles/_content.less b/src/styles/_content.less index e7d4e75309..af9c54a61f 100644 --- a/src/styles/_content.less +++ b/src/styles/_content.less @@ -20,9 +20,9 @@ z-index: 1; &-inner { + overflow: hidden; height: 100%; max-height: 100vh; - overflow: hidden; } &:hover &-inner { @@ -55,13 +55,13 @@ font-size: 13px; &::after { + content: ''; position: relative; top: 12px; display: block; width: calc(100% - 20px); height: 1px; background: @border-color-split; - content: ''; } } @@ -117,8 +117,8 @@ position: absolute; top: 16px; right: -10px; - color: @primary-color; font-size: 12px; + color: @primary-color; opacity: 0; transition: all 0.3s; } @@ -130,8 +130,8 @@ .chinese { margin-left: 6px; - font-weight: 400; font-size: 12px; + font-weight: 400; opacity: 0.67; } } diff --git a/src/styles/_custom.less b/src/styles/_custom.less index 1be2de8488..88b5be8ed9 100644 --- a/src/styles/_custom.less +++ b/src/styles/_custom.less @@ -5,12 +5,12 @@ } .copy-import-module { + cursor: pointer; padding: 2px 6px; - color: #fff; font-size: 12px; + color: #fff; background: @highlight-color; border-radius: 34px; - cursor: pointer; } .menu-deprecated { diff --git a/src/styles/_demo.less b/src/styles/_demo.less index f14b608b2b..992c04326c 100644 --- a/src/styles/_demo.less +++ b/src/styles/_demo.less @@ -44,11 +44,11 @@ } &-expand-trigger { + cursor: pointer; position: relative; margin-left: 12px; - color: #3b4357; font-size: 20px; - cursor: pointer; + color: #3b4357; opacity: 0.75; transition: all 0.3s; @@ -80,9 +80,9 @@ a, a:hover { - color: @site-text-color; - font-weight: 500; font-size: @font-size-base; + font-weight: 500; + color: @site-text-color; } .edit-button .anticon { @@ -98,11 +98,11 @@ position: absolute; top: 7px; right: -16px; + transform: scale(0.9); padding-right: 6px; font-size: 12px; text-decoration: none; background: inherit; - transform: scale(0.9); .ant-row-rtl & { right: auto; @@ -167,16 +167,16 @@ &-show, &-hide { + cursor: pointer; width: 16px; max-width: 100%; height: 16px; - cursor: pointer; transition: all 0.4s; } &-show { - opacity: 0.55; pointer-events: auto; + opacity: 0.55; &:hover { opacity: 1; @@ -184,8 +184,8 @@ } &-hide { - display: none; pointer-events: none; + display: none; } &.ant-tooltip-open .code-expand-icon-show { @@ -197,8 +197,8 @@ position: relative; &-wrapper { - display: none; overflow: auto; + display: none; border-radius: 0 0 @border-radius-base @border-radius-base; &-expand { @@ -223,8 +223,8 @@ justify-content: center; padding: 12px; text-align: center; - border-top: 1px dashed @site-border-color-split; opacity: 0.7; + border-top: 1px dashed @site-border-color-split; transition: opacity 0.3s; &:hover { @@ -251,8 +251,8 @@ } &-code-icon { - color: @site-text-color-secondary; cursor: pointer; + color: @site-text-color-secondary; transition: all 0.24s; &:hover { @@ -260,8 +260,8 @@ } &.anticon-check { - color: @green-6 !important; font-weight: bold; + color: @green-6 !important; } } @@ -272,9 +272,9 @@ code { display: block; padding: 16px 32px; - color: @site-text-color; font-size: 14px; line-height: 2; + color: @site-text-color; background: @component-background; border: none; border-radius: 2px; @@ -290,6 +290,7 @@ box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28); &::before { + content: ''; position: absolute; top: -1.25em; left: 1em; @@ -299,10 +300,10 @@ background-color: #f44; border-radius: 50%; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; - content: ''; } &::after { + content: ''; position: absolute; top: -2em; left: 5.5em; @@ -312,12 +313,11 @@ border-right: 0.8em solid transparent; border-bottom: 2em solid white; border-left: 0.8em solid transparent; - content: ''; } .browser-scroll { - height: 100%; overflow: auto; + height: 100%; background: #f5f5f5; } } diff --git a/src/styles/_drawer.less b/src/styles/_drawer.less index 7050af92eb..bde9e8377b 100644 --- a/src/styles/_drawer.less +++ b/src/styles/_drawer.less @@ -1,12 +1,12 @@ @drawer-width: 60vw; .drawer { + pointer-events: none; position: fixed; - top: 0; z-index: 9999; + top: 0; width: 100%; height: 100%; - pointer-events: none; > * { transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), @@ -22,8 +22,8 @@ &-mask { top: 0; width: 100%; - background: #000; opacity: 0; + background: #000; } &-content-wrapper { @@ -34,15 +34,17 @@ } &-content { - height: 100%; overflow: auto; + height: 100%; } &-button { + pointer-events: auto; + cursor: pointer; position: absolute; + z-index: 0; top: 72px; right: -40px; - z-index: 0; display: flex; align-items: center; justify-content: center; @@ -54,19 +56,18 @@ background: @component-background; border-radius: 0 4px 4px 0; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); - cursor: pointer; - pointer-events: auto; } &-open { + pointer-events: auto; transform: translateX(@drawer-width); transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) 0s; - pointer-events: auto; .drawer-mask { opacity: 0.3; } } + @media (max-width: @mobile-max) { .ant-menu-inline .ant-menu-item::after, .ant-menu-vertical .ant-menu-item::after { diff --git a/src/styles/_footer.less b/src/styles/_footer.less index d98f850feb..1caedd3597 100644 --- a/src/styles/_footer.less +++ b/src/styles/_footer.less @@ -3,10 +3,10 @@ @{footer-prefix} { position: relative; - display: block; clear: both; - color: rgba(255, 255, 255, 0.65); + display: block; font-size: 14px; + color: rgba(255, 255, 255, 0.65); background-color: #000; box-shadow: 0 1000px 0 1000px #fff; @@ -21,8 +21,8 @@ > h2 { position: relative; margin: 0 auto 24px; - font-weight: 500; font-size: 16px; + font-weight: 500; > .title-icon { width: 27px; @@ -33,8 +33,8 @@ position: absolute; top: 3px; left: -22px; - color: #aaa; font-size: 16px; + color: #aaa; } } @@ -71,13 +71,13 @@ } .theme-color { + cursor: pointer; display: inline-block; padding: 4px; vertical-align: middle; background: #fff; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px; - cursor: pointer; &-value { width: 80px; diff --git a/src/styles/_header.less b/src/styles/_header.less index 0dd4385651..fd46d1c5f0 100644 --- a/src/styles/_header.less +++ b/src/styles/_header.less @@ -58,15 +58,15 @@ } #logo { + overflow: hidden; height: @header-height; padding-left: 40px; - overflow: hidden; - color: @site-heading-color; - font-size: 18px; font-family: Avenir, @font-family, sans-serif; + font-size: 18px; line-height: @header-height; - white-space: nowrap; + color: @site-heading-color; text-decoration: none; + white-space: nowrap; .ant-row-rtl & { float: right; @@ -113,13 +113,13 @@ } .anticon { + pointer-events: none; position: absolute; - top: 50%; z-index: 1; + top: 50%; + transform: translateY(-50%); flex: none; color: @search-icon-color; - transform: translateY(-50%); - pointer-events: none; } input { @@ -131,14 +131,14 @@ border: 0; box-shadow: none; + &::placeholder { + color: #a3b1bf; + } + .ant-row-rtl & { padding-right: 20px; padding-left: 11px; } - - &::placeholder { - color: #a3b1bf; - } } // ================ Narrow ================ @@ -163,10 +163,10 @@ } input { + cursor: pointer; max-width: none; padding-right: 20px; padding-left: 11px; - cursor: pointer; .ant-row-rtl & { padding-right: 11px; @@ -193,6 +193,10 @@ border: none; box-shadow: @box-shadow-base; + &::before { + display: none; + } + [class^='ds-dataset-'] { background: @component-background; border: none; @@ -201,10 +205,6 @@ background: @component-background; } } - - &::before { - display: none; - } } .algolia-docsearch-suggestion--title { @@ -217,19 +217,19 @@ } .nav-phone-icon { + cursor: pointer; position: absolute; + z-index: 1; top: 25px; right: 30px; - z-index: 1; width: 16px; height: 22px; - cursor: pointer; } #nav { height: 100%; - font-size: 14px; font-family: Avenir, @font-family, sans-serif; + font-size: 14px; border: 0; &.ant-menu-horizontal { @@ -242,14 +242,14 @@ line-height: @header-height - @menu-item-border - 2px; border-top: @menu-item-border solid transparent; + &::after { + content: none; + } + &:hover { border-top: @menu-item-border solid @primary-color; border-bottom: none; } - - &::after { - content: none; - } } & .ant-menu-submenu-title .anticon { diff --git a/src/styles/_hljs.less b/src/styles/_hljs.less index 5dd41c2149..3d0b109aaf 100644 --- a/src/styles/_hljs.less +++ b/src/styles/_hljs.less @@ -6,17 +6,17 @@ code[class*='hljs'], pre[class*='hljs'] { - color: black; - line-height: 1.5; direction: ltr; - white-space: pre; + line-height: 1.5; + hyphens: none; + color: black; text-align: left; text-shadow: 0 1px white; - word-wrap: normal; word-break: normal; word-spacing: normal; + word-wrap: normal; tab-size: 4; - hyphens: none; + white-space: pre; background: none; } @@ -42,9 +42,9 @@ code[class*='hljs'] ::selection { /* Code blocks */ pre[class*='hljs'] { + overflow: auto; margin: 1.2em 0; padding: 1em; - overflow: auto; } :not(pre) > code[class*='hljs'], @@ -188,9 +188,9 @@ pre[class*='hljs'] { } .hljs { + overflow-x: auto; display: block; padding: 0.5em; - overflow-x: auto; color: #4d4d4c; background: white; } @@ -215,6 +215,6 @@ pre[class*='hljs'] { } .code-box-code-copy.anticon-check { - color: #00a854 !important; font-weight: 700; + color: #00a854 !important; } diff --git a/src/styles/_home.less b/src/styles/_home.less index 324d5d5ff2..2785d7dfa5 100644 --- a/src/styles/_home.less +++ b/src/styles/_home.less @@ -27,18 +27,18 @@ &-wrapper { position: relative; overflow: inherit; - color: @index-home-color; font-family: Avenir, 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-variant: tabular-nums; + color: @index-home-color; } h2 { padding: 80px 0 40px; - color: @index-home-color; - font-weight: 400; font-size: 38px; + font-weight: 400; line-height: 46px; + color: @index-home-color; text-align: center; } } @@ -63,9 +63,9 @@ h1 { margin: 12px 0; - font-size: 54px; font-family: Futura, 'Helvetica Neue For Number', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 54px; } p { @@ -96,10 +96,10 @@ position: absolute; right: 0; bottom: 0; + overflow: hidden; width: 46%; max-width: 482px; height: 420px; - overflow: hidden; img { max-height: 100%; @@ -115,13 +115,10 @@ &__bg { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; + transform: skewY(-4.5deg); margin: 0; background: @index-home-bg; - transform: skewY(-4.5deg); &-bottom { position: absolute; @@ -160,8 +157,8 @@ } .page-theme { - margin-bottom: 48px; overflow: hidden; + margin-bottom: 48px; background: #fff; &__item { @@ -247,6 +244,7 @@ margin-right: 0; margin-left: 16px; } + @media (max-width: @screen-md-max) { #logo { float: left; diff --git a/src/styles/_markdown.less b/src/styles/_markdown.less index a80924e807..15ffeab60e 100644 --- a/src/styles/_markdown.less +++ b/src/styles/_markdown.less @@ -1,7 +1,7 @@ .markdown { - color: @site-text-color; font-size: 14px; line-height: 2; + color: @site-text-color; } .highlight { @@ -25,11 +25,11 @@ .markdown h1 { margin-top: 8px; margin-bottom: 20px; - color: @site-heading-color; - font-weight: 500; - font-size: 30px; font-family: Avenir, @font-family, sans-serif; + font-size: 30px; + font-weight: 500; line-height: 38px; + color: @site-heading-color; .subtitle { margin-left: 12px; @@ -53,9 +53,9 @@ .markdown h6 { clear: both; margin: 1.6em 0 0.6em; - color: @site-heading-color; - font-weight: 500; font-family: Avenir, @font-family, sans-serif; + font-weight: 500; + color: @site-heading-color; } .markdown h3 { @@ -138,11 +138,11 @@ } .markdown pre code { + overflow: auto; margin: 0; padding: 0; - overflow: auto; - color: @site-text-color; font-size: @font-size-base - 1px; + color: @site-text-color; background: #f5f5f5; border: none; } @@ -153,13 +153,13 @@ } .markdown > table { - width: 100%; - margin: 8px 0 16px; table-layout: auto; + border-spacing: 0; + border-collapse: collapse; empty-cells: show; + width: 100%; + margin: 8px 0 16px; border: 1px solid @site-border-color-split; - border-collapse: collapse; - border-spacing: 0; tbody tr { transition: all 0.3s; @@ -172,16 +172,16 @@ th { &:nth-child(1), &:nth-child(2) { - white-space: nowrap; word-break: keep-all; + white-space: nowrap; } } } /* stylelint-disable-next-line no-duplicate-selectors */ .markdown > table th { - color: #5c6b77; font-weight: 500; + color: #5c6b77; // white-space: nowrap; background: rgba(0, 0, 0, 0.02); } @@ -196,8 +196,8 @@ .markdown blockquote { margin: 1em 0; padding-left: 0.8em; - color: @site-text-color-secondary; font-size: 90%; + color: @site-text-color-secondary; border-left: 4px solid @site-border-color-split; .ant-row-rtl & { @@ -224,8 +224,8 @@ } .markdown .waiting { - color: #ccc; cursor: not-allowed; + color: #ccc; } .markdown a.edit-button { @@ -271,12 +271,12 @@ overflow-x: auto; table { + table-layout: auto; min-width: 720px; margin: 2em 0; - font-size: @font-size-base - 1px; font-family: @code-family; + font-size: @font-size-base - 1px; line-height: @line-height-base; - table-layout: auto; border: 1px solid @border-color-split; th, @@ -292,27 +292,27 @@ border-width: 0 0 2px; &:nth-child(2) { - white-space: normal; word-break: normal; + white-space: normal; } &:nth-child(4), &:nth-child(5) { - white-space: nowrap; word-break: keep-all; + white-space: nowrap; } } td { &:first-child { - color: @gray-8; font-weight: 600; + color: @gray-8; } &:nth-child(3) { width: 22%; - color: @magenta-7; font-size: @font-size-base - 1px; + color: @magenta-7; word-break: break-all; } @@ -333,8 +333,8 @@ [id^='components-grid-demo-'] { .demo-row, .code-box-demo .demo-row { - margin-bottom: 8px; overflow: hidden; + margin-bottom: 8px; background-image: linear-gradient( 90deg, #f5f5f5 4.16666667%, @@ -410,8 +410,8 @@ margin-top: 0; margin-bottom: 0; padding: 30px 0; - color: @white; font-size: 18px; + color: @white; text-align: center; border: none; } diff --git a/src/styles/_not-found.less b/src/styles/_not-found.less index 461acc196a..6c1d6c7678 100644 --- a/src/styles/_not-found.less +++ b/src/styles/_not-found.less @@ -1,17 +1,14 @@ #page-404 { position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; z-index: 100; + inset: 0; width: 100%; height: 100%; background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); background-repeat: no-repeat; + background-attachment: fixed; background-position: center; background-size: 100%; - background-attachment: fixed; section { position: absolute; @@ -22,14 +19,14 @@ } h1 { - color: @primary-color; - font-weight: 500; font-size: 120px; + font-weight: 500; + color: @primary-color; } .links { - color: @site-text-color; font-size: 18px; + color: @site-text-color; a { margin-left: 8px; diff --git a/src/styles/_prev-next.less b/src/styles/_prev-next.less index 8706c28a6b..30de04778b 100644 --- a/src/styles/_prev-next.less +++ b/src/styles/_prev-next.less @@ -1,8 +1,8 @@ .prev-next-nav { + overflow: hidden; width: ~'calc(100% - 128px)'; margin-right: 64px; margin-left: 64px; - overflow: hidden; font-size: 14px; border-top: 1px solid @site-border-color-split; @@ -29,8 +29,8 @@ position: relative; left: 0; margin-right: 1em; - color: @site-text-color-secondary; font-size: 12px; + color: @site-text-color-secondary; transition: all 0.3s; .ant-row-rtl & { @@ -69,8 +69,8 @@ position: relative; right: 0; margin-left: 1em; - color: @site-text-color-secondary; font-size: 12px; + color: @site-text-color-secondary; transition: all 0.3s; .ant-row-rtl & { diff --git a/src/styles/_theme-btn.less b/src/styles/_theme-btn.less index 4fbdf3347a..32523a52a6 100644 --- a/src/styles/_theme-btn.less +++ b/src/styles/_theme-btn.less @@ -1,11 +1,11 @@ .theme-btn { + cursor: pointer; position: fixed; + z-index: 2147483640; right: 32px; bottom: 102px; - z-index: 2147483640; display: flex; flex-direction: column; - cursor: pointer; &-tooltip { .ant-tooltip-inner { @@ -20,9 +20,9 @@ &-active { width: 44px; height: 44px; - color: @primary-color; font-size: 22px; line-height: 44px; + color: @primary-color; } & &-avatar { diff --git a/src/styles/_utils.less b/src/styles/_utils.less index ad8492f235..98bbf4bc03 100644 --- a/src/styles/_utils.less +++ b/src/styles/_utils.less @@ -2,10 +2,10 @@ position: relative; &::before { - color: @volcano-6; - font-style: normal; cursor: pointer; content: 'D'; + font-style: normal; + color: @volcano-6; } } diff --git a/src/styles/dark.less b/src/styles/dark.less index ef4e5f9d90..07fe603b4f 100644 --- a/src/styles/dark.less +++ b/src/styles/dark.less @@ -10,9 +10,9 @@ select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid @border-color-base; - -webkit-text-fill-color: @text-color; box-shadow: none; transition: background-color 5000s ease-in-out 0s; + -webkit-text-fill-color: @text-color; } #header { @@ -29,12 +29,6 @@ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65); } - @media (max-width: @mobile-max) { - .header-menu .menu-site { - background: transparent; - } - } - .toc-affix { .ant-affix { background: @component-background; @@ -67,11 +61,11 @@ } &-expand-trigger { + cursor: pointer; position: relative; margin-left: 12px; - color: #fff; font-size: 20px; - cursor: pointer; + color: #fff; opacity: 0.45; transition: all 0.3s; @@ -232,8 +226,8 @@ margin-top: 0; margin-bottom: 0; padding: 30px 0; - color: @black; font-size: 18px; + color: @black; text-align: center; border: none; } @@ -374,9 +368,9 @@ } .hljs { + overflow-x: auto; display: block; padding: 0.5em; - overflow-x: auto; color: #c0c5ce; background: #1c1d21; } @@ -401,4 +395,10 @@ color: @text-color; } } + + @media (max-width: @mobile-max) { + .header-menu .menu-site { + background: transparent; + } + } } diff --git a/src/styles/index.less b/src/styles/index.less index 23b86ef317..e054e4a969 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1,5 +1,4 @@ @import './theme.less'; - @import './_colors.less'; @import './_reset.less'; @import './_common.less'; @@ -16,8 +15,6 @@ @import './_ng.less'; @import './_not-found.less'; @import './_utils.less'; - @import './_home.less'; @import './_custom.less'; - @import './dark.less';