diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 79f9ec6dd8..5c139e9d30 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -1,195 +1,32 @@ const fs = require('fs'); const path = require('path'); -const defaultVars = require('./scripts/default-vars'); -const darkVars = require('./scripts/dark-vars'); -const compactVars = require('./scripts/compact-vars'); -function generateThemeFileContent(theme) { - return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n -module.exports = { - ...defaultTheme, - ...${theme}ThemeSingle -}`; -} - -// We need compile additional content for antd user function finalizeCompile() { if (fs.existsSync(path.join(__dirname, './es'))) { - // Build a entry less file to dist/antd.less - const componentsPath = path.join(process.cwd(), 'components'); - let componentsLessContent = ''; - // Build components in one file: es/style/components.less - fs.readdir(componentsPath, (err, files) => { - files.forEach(file => { - if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) { - componentsLessContent += `@import "../${path.posix.join( - file, - 'style', - 'index-pure.less', - )}";\n`; - } - }); - fs.writeFileSync( - path.join(process.cwd(), 'es', 'style', 'components.less'), - componentsLessContent, - ); - }); - } -} - -function buildThemeFile(theme, vars) { - // Build less entry file: dist/antd.${theme}.less - if (theme !== 'default') { - fs.writeFileSync( - path.join(process.cwd(), 'dist', `antd.${theme}.less`), - `@import "../es/style/${theme}.less";\n@import "../es/style/components.less";`, - ); - // eslint-disable-next-line no-console - console.log(`Built a entry less file to dist/antd.${theme}.less`); - } else { - fs.writeFileSync( - path.join(process.cwd(), 'dist', `default-theme.js`), - `module.exports = ${JSON.stringify(vars, null, 2)};\n`, + // Build less entry file: dist/antd.less + fs.copyFileSync( + path.join(process.cwd(), 'components', 'style', 'reset.css'), + path.join(process.cwd(), 'es', 'style', 'reset.css'), ); - return; } - - // Build ${theme}.js: dist/${theme}-theme.js, for less-loader - - fs.writeFileSync( - path.join(process.cwd(), 'dist', `theme.js`), - `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`, - { - flag: 'a', - }, - ); - - fs.writeFileSync( - path.join(process.cwd(), 'dist', `${theme}-theme.js`), - generateThemeFileContent(theme), - ); - - // eslint-disable-next-line no-console - console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`); } function finalizeDist() { if (fs.existsSync(path.join(__dirname, './dist'))) { // Build less entry file: dist/antd.less - fs.writeFileSync( - path.join(process.cwd(), 'dist', 'antd.less'), - '@import "../es/style/default.less";\n@import "../es/style/components.less";', - ); - // eslint-disable-next-line no-console - fs.writeFileSync( - path.join(process.cwd(), 'dist', 'theme.js'), - `const defaultTheme = require('./default-theme.js');\n`, - ); - // eslint-disable-next-line no-console - console.log('Built a entry less file to dist/antd.less'); - buildThemeFile('default', defaultVars); - buildThemeFile('dark', darkVars); - buildThemeFile('compact', compactVars); - buildThemeFile('variable', {}); - fs.writeFileSync( - path.join(process.cwd(), 'dist', `theme.js`), - ` -function getThemeVariables(options = {}) { - let themeVar = { - 'hack': \`true;@import "\${require.resolve('antd/es/style/color/colorPalette.less')}";\`, - ...defaultTheme - }; - if(options.dark) { - themeVar = { - ...themeVar, - ...darkThemeSingle - } - } - if(options.compact){ - themeVar = { - ...themeVar, - ...compactThemeSingle - } - } - return themeVar; -} - -module.exports = { - darkThemeSingle, - compactThemeSingle, - getThemeVariables -}`, - { - flag: 'a', - }, + fs.copyFileSync( + path.join(process.cwd(), 'components', 'style', 'reset.css'), + path.join(process.cwd(), 'dist', 'reset.css'), ); } } -function isComponentStyleEntry(file) { - return file.path.match(/style(\/|\\)index\.tsx/); -} - -function needTransformStyle(content) { - return content.includes('../../style/index.less') || content.includes('./index.less'); -} - module.exports = { compile: { - includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/], - transformTSFile(file) { - if (isComponentStyleEntry(file)) { - let content = file.contents.toString(); - - if (needTransformStyle(content)) { - const cloneFile = file.clone(); - - // Origin - content = content.replace('../../style/index.less', '../../style/default.less'); - cloneFile.contents = Buffer.from(content); - - return cloneFile; - } - } - }, - transformFile(file) { - if (isComponentStyleEntry(file)) { - const indexLessFilePath = file.path.replace('index.tsx', 'index.less'); - - if (fs.existsSync(indexLessFilePath)) { - // We put origin `index.less` file to `index-pure.less` - const pureFile = file.clone(); - pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8')); - pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less'); - - // Rewrite `index.less` file with `root-entry-name` - const indexLessFile = file.clone(); - indexLessFile.contents = Buffer.from( - [ - // Inject variable - '@root-entry-name: default;', - // Point to origin file - "@import './index-pure.less';", - ].join('\n\n'), - ); - indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less'); - - return [indexLessFile, pureFile]; - } - } - - return []; - }, - lessConfig: { - modifyVars: { - 'root-entry-name': 'default', - }, - }, finalize: finalizeCompile, }, dist: { finalize: finalizeDist, }, - generateThemeFileContent, bail: true, }; diff --git a/.eslintignore b/.eslintignore index 2738aedd7c..12391cdd50 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,6 @@ components/**/*.js components/**/*.jsx +components/version/token.tsx !components/*/__tests__/**/*.js !components/*/demo/* !.*.js diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 7d481a0a56..3fd9c4d60f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -143,77 +143,6 @@ jobs: NODE_OPTIONS: --max_old_space_size=4096 needs: setup - ############################### Style ################################ - style-compile: - name: es style compile - runs-on: ubuntu-latest - steps: - - name: checkout - uses: actions/checkout@v3 - - - name: restore cache from package-lock.json - uses: actions/cache@v3 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: restore cache from node_modules - uses: actions/cache@v3 - with: - path: node_modules - key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - - - name: restore cache from es - uses: actions/cache@v3 - with: - path: es - key: es-${{ github.sha }} - - - name: lessc mixins - run: npx lessc --js ./es/style/mixins/index.less - needs: compile - - style-dist: - name: dist style compile - runs-on: ubuntu-latest - steps: - - name: checkout - uses: actions/checkout@v3 - - - name: restore cache from package-lock.json - uses: actions/cache@v3 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: restore cache from node_modules - uses: actions/cache@v3 - with: - path: node_modules - key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - - - name: restore cache from es - uses: actions/cache@v3 - with: - path: es - key: es-${{ github.sha }} - - - name: restore cache from dist - uses: actions/cache@v3 - with: - path: dist - key: dist-${{ github.sha }} - - - name: lessc default - run: npx lessc --js ./dist/antd.less - - - name: lessc dark - run: npx lessc --js ./dist/antd.dark.less - - - name: lessc variable - run: npx lessc --js ./dist/antd.variable.less - needs: [compile, dist] - ################################ Test ################################ normal-test: name: test diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dcba67ce82..03cf137971 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -14,6 +14,7 @@ timeline: true - Major version release is not included in this schedule for breaking change and new features. --- + ## 4.21.4 `2022-06-27` @@ -35,7 +36,6 @@ timeline: true - 🤖 Fix type incompatibility. [#36189](https://github.com/ant-design/ant-design/pull/36189) [@Dunqing](https://github.com/Dunqing) - 🤖 exporting `UploadFile` from `Upload`. [#34733](https://github.com/ant-design/ant-design/pull/34733) [@chentsulin](https://github.com/chentsulin) - ## 4.21.3 `2022-06-17` diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap index ea9484e31b..71d2f00946 100644 --- a/components/__tests__/__snapshots__/index.test.js.snap +++ b/components/__tests__/__snapshots__/index.test.js.snap @@ -18,7 +18,6 @@ Array [ "Checkbox", "Col", "Collapse", - "Comment", "ConfigProvider", "DatePicker", "Descriptions", @@ -36,7 +35,6 @@ Array [ "Mentions", "Menu", "Modal", - "PageHeader", "Pagination", "Popconfirm", "Popover", diff --git a/components/affix/style/index.less b/components/affix/style/index.less deleted file mode 100644 index c8cf8011b5..0000000000 --- a/components/affix/style/index.less +++ /dev/null @@ -1,6 +0,0 @@ -// @import '../../style/themes/index'; - -// .@{ant-prefix}-affix { -// position: fixed; -// z-index: @zindex-affix; -// } diff --git a/components/affix/style/index.tsx b/components/affix/style/index.tsx index ac643aeaec..65717959f7 100644 --- a/components/affix/style/index.tsx +++ b/components/affix/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; diff --git a/components/alert/style/index.less b/components/alert/style/index.less deleted file mode 100644 index f0ac0f3cc3..0000000000 --- a/components/alert/style/index.less +++ /dev/null @@ -1,155 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @alert-prefix-cls: ~'@{ant-prefix}-alert'; - -// .@{alert-prefix-cls} { -// .reset-component(); - -// position: relative; -// display: flex; -// align-items: center; -// padding: 8px 15px; -// word-wrap: break-word; -// border-radius: @border-radius-base; - -// &-content { -// flex: 1; -// min-width: 0; -// } - -// &-icon { -// margin-right: @margin-xs; -// } - -// &-description { -// display: none; -// font-size: @font-size-base; -// line-height: @font-size-base + 8px; -// } - -// &-success { -// background-color: @alert-success-bg-color; -// border: @border-width-base @border-style-base @alert-success-border-color; -// .@{alert-prefix-cls}-icon { -// color: @alert-success-icon-color; -// } -// } - -// &-info { -// background-color: @alert-info-bg-color; -// border: @border-width-base @border-style-base @alert-info-border-color; -// .@{alert-prefix-cls}-icon { -// color: @alert-info-icon-color; -// } -// } - -// &-warning { -// background-color: @alert-warning-bg-color; -// border: @border-width-base @border-style-base @alert-warning-border-color; -// .@{alert-prefix-cls}-icon { -// color: @alert-warning-icon-color; -// } -// } - -// &-error { -// background-color: @alert-error-bg-color; -// border: @border-width-base @border-style-base @alert-error-border-color; - -// .@{alert-prefix-cls}-icon { -// color: @alert-error-icon-color; -// } - -// .@{alert-prefix-cls}-description > pre { -// margin: 0; -// padding: 0; -// } -// } - -// &-action { -// margin-left: @margin-xs; -// } - -// &-close-icon { -// margin-left: @margin-xs; -// padding: 0; -// overflow: hidden; -// font-size: @font-size-sm; -// line-height: @font-size-sm; -// background-color: transparent; -// border: none; -// outline: none; -// cursor: pointer; - -// .@{iconfont-css-prefix}-close { -// color: @alert-close-color; -// transition: color 0.3s; - -// &:hover { -// color: @alert-close-hover-color; -// } -// } -// } - -// &-close-text { -// color: @alert-close-color; -// transition: color 0.3s; - -// &:hover { -// color: @alert-close-hover-color; -// } -// } - -// &-with-description { -// align-items: flex-start; -// padding: @alert-with-description-padding; -// } - -// &-with-description&-no-icon { -// padding: @alert-with-description-no-icon-padding-vertical 15px; -// } - -// &-with-description &-icon { -// margin-right: @alert-with-description-padding-vertical; -// font-size: @alert-with-description-icon-size; -// } - -// &-with-description &-message { -// display: block; -// margin-bottom: 4px; -// color: @alert-message-color; -// font-size: @font-size-lg; -// } - -// &-message { -// color: @alert-message-color; -// } - -// &-with-description &-description { -// display: block; -// } - -// &&-motion-leave { -// overflow: hidden; -// opacity: 1; -// transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ, -// padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ, -// margin-bottom 0.3s @ease-in-out-circ; -// } - -// &&-motion-leave-active { -// max-height: 0; -// margin-bottom: 0 !important; -// padding-top: 0; -// padding-bottom: 0; -// opacity: 0; -// } - -// &-banner { -// margin-bottom: 0; -// border: 0; -// border-radius: 0; -// } -// } - -// @import './rtl'; diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 565f35b78a..f4d1ca0e08 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/alert/style/rtl.less b/components/alert/style/rtl.less deleted file mode 100644 index 31d63146c0..0000000000 --- a/components/alert/style/rtl.less +++ /dev/null @@ -1,40 +0,0 @@ -.@{alert-prefix-cls} { - &&-rtl { - direction: rtl; - } - - &-icon { - .@{alert-prefix-cls}-rtl & { - margin-right: auto; - margin-left: @margin-xs; - } - } - - &-action { - .@{alert-prefix-cls}-rtl & { - margin-right: @margin-xs; - margin-left: auto; - } - } - - &-close-icon { - .@{alert-prefix-cls}-rtl & { - margin-right: @margin-xs; - margin-left: auto; - } - } - - &-with-description { - .@{alert-prefix-cls}-rtl& { - padding-right: @alert-with-description-icon-size; - padding-left: @alert-with-description-padding-vertical; - } - - .@{alert-prefix-cls}-icon { - .@{alert-prefix-cls}-rtl& { - margin-right: auto; - margin-left: @alert-with-description-padding-vertical; - } - } - } -} diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less deleted file mode 100644 index c95720045c..0000000000 --- a/components/anchor/style/index.less +++ /dev/null @@ -1,86 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @anchor-border-width: 2px; - -// .@{ant-prefix}-anchor { -// .reset-component(); - -// position: relative; -// padding-left: @anchor-border-width; - -// &-wrapper { -// margin-left: -4px; -// padding-left: 4px; -// overflow: auto; -// background-color: @anchor-bg; -// } - -// &-ink { -// position: absolute; -// top: 0; -// left: 0; -// height: 100%; - -// &::before { -// position: relative; -// display: block; -// width: @anchor-border-width; -// height: 100%; -// margin: 0 auto; -// background-color: @anchor-border-color; -// content: ' '; -// } - -// &-ball { -// position: absolute; -// left: 50%; -// display: none; -// width: 8px; -// height: 8px; -// background-color: @component-background; -// border: 2px solid @primary-color; -// border-radius: 8px; -// transform: translateX(-50%); -// transition: top 0.3s ease-in-out; - -// &.visible { -// display: inline-block; -// } -// } -// } - -// &-fixed &-ink &-ink-ball { -// display: none; -// } - -// &-link { -// padding: @anchor-link-padding; - -// &-title { -// position: relative; -// display: block; -// margin-bottom: 3px; -// overflow: hidden; -// color: @text-color; -// white-space: nowrap; -// text-overflow: ellipsis; -// transition: all 0.3s; - -// &:only-child { -// margin-bottom: 0; -// } -// } - -// &-active > &-title { -// color: @primary-color; -// } -// } - -// &-link &-link { -// padding-top: 2px; -// padding-bottom: 2px; -// } -// } - -// @import './rtl'; diff --git a/components/anchor/style/index.tsx b/components/anchor/style/index.tsx index 25443505aa..e61f8089ac 100644 --- a/components/anchor/style/index.tsx +++ b/components/anchor/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/anchor/style/rtl.less b/components/anchor/style/rtl.less deleted file mode 100644 index f1774d51a3..0000000000 --- a/components/anchor/style/rtl.less +++ /dev/null @@ -1,35 +0,0 @@ -.@{ant-prefix}-anchor { - &-rtl { - direction: rtl; - } - - &-wrapper { - .@{ant-prefix}-anchor-rtl& { - margin-right: -4px; - margin-left: 0; - padding-right: 4px; - padding-left: 0; - } - } - - &-ink { - .@{ant-prefix}-anchor-rtl & { - right: 0; - left: auto; - } - - &-ball { - .@{ant-prefix}-anchor-rtl & { - right: 50%; - left: 0; - transform: translateX(50%); - } - } - } - - &-link { - .@{ant-prefix}-anchor-rtl & { - padding: @anchor-link-top @anchor-link-left @anchor-link-top 0; - } - } -} diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less deleted file mode 100644 index 571e796916..0000000000 --- a/components/auto-complete/style/index.less +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - -@input-prefix-cls: ~'@{ant-prefix}-input'; -@select-prefix-cls: ~'@{ant-prefix}-select'; -@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete'; - -.@{autocomplete-prefix-cls} { - .reset-component(); - - // https://github.com/ant-design/ant-design/issues/22302 - .@{select-prefix-cls}-clear { - right: 13px; - } -} diff --git a/components/auto-complete/style/index.tsx b/components/auto-complete/style/index.tsx deleted file mode 100644 index 17626c8e42..0000000000 --- a/components/auto-complete/style/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import '../../style/index.less'; -import './index.less'; - -// style dependencies -import '../../select/style'; diff --git a/components/avatar/style/group.less b/components/avatar/style/group.less deleted file mode 100644 index 8116ae25a6..0000000000 --- a/components/avatar/style/group.less +++ /dev/null @@ -1,17 +0,0 @@ -.@{avatar-prefix-cls}-group { - display: inline-flex; - - .@{avatar-prefix-cls} { - border: 1px solid @avatar-group-border-color; - - &:not(:first-child) { - margin-left: @avatar-group-overlapping; - } - } - - &-popover { - .@{ant-prefix}-avatar + .@{ant-prefix}-avatar { - margin-left: @avatar-group-space; - } - } -} diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less deleted file mode 100644 index 79f103c0a6..0000000000 --- a/components/avatar/style/index.less +++ /dev/null @@ -1,70 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @avatar-prefix-cls: ~'@{ant-prefix}-avatar'; - -// .@{avatar-prefix-cls} { -// .reset-component(); - -// position: relative; -// display: inline-block; -// overflow: hidden; -// color: @avatar-color; -// white-space: nowrap; -// text-align: center; -// vertical-align: middle; -// background: @avatar-bg; - -// &-image { -// background: transparent; -// } - -// .@{ant-prefix}-image-img { -// display: block; -// } - -// .avatar-size(@avatar-size-base, @avatar-font-size-base); - -// &-lg { -// .avatar-size(@avatar-size-lg, @avatar-font-size-lg); -// } - -// &-sm { -// .avatar-size(@avatar-size-sm, @avatar-font-size-sm); -// } - -// &-square { -// border-radius: @avatar-border-radius; -// } - -// & > img { -// display: block; -// width: 100%; -// height: 100%; -// object-fit: cover; -// } -// } - -// .avatar-size(@size, @font-size) { -// width: @size; -// height: @size; -// line-height: @size; -// border-radius: 50%; - -// &-string { -// position: absolute; -// left: 50%; -// transform-origin: 0 center; -// } - -// &.@{avatar-prefix-cls}-icon { -// font-size: @font-size; - -// > .@{iconfont-css-prefix} { -// margin: 0; -// } -// } -// } - -// @import './group'; -// @import './rtl'; diff --git a/components/avatar/style/index.tsx b/components/avatar/style/index.tsx index 05215eb04e..4214d99ade 100644 --- a/components/avatar/style/index.tsx +++ b/components/avatar/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/avatar/style/rtl.less b/components/avatar/style/rtl.less deleted file mode 100644 index ba3e2d4d60..0000000000 --- a/components/avatar/style/rtl.less +++ /dev/null @@ -1,15 +0,0 @@ -.@{avatar-prefix-cls}-group { - &-rtl { - .@{avatar-prefix-cls}:not(:first-child) { - margin-right: @avatar-group-overlapping; - margin-left: 0; - } - } - - &-popover.@{ant-prefix}-popover-rtl { - .@{ant-prefix}-avatar + .@{ant-prefix}-avatar { - margin-right: @avatar-group-space; - margin-left: 0; - } - } -} diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less deleted file mode 100644 index aededbd50b..0000000000 --- a/components/back-top/style/index.less +++ /dev/null @@ -1,49 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @backtop-prefix-cls: ~'@{ant-prefix}-back-top'; - -// .@{backtop-prefix-cls} { -// .reset-component(); - -// position: fixed; -// right: 100px; -// bottom: 50px; -// z-index: @zindex-back-top; -// width: 40px; -// height: 40px; -// cursor: pointer; - -// &:empty { -// display: none; -// } - -// &-rtl { -// right: auto; -// left: 100px; -// direction: rtl; -// } - -// &-content { -// width: 40px; -// height: 40px; -// overflow: hidden; -// color: @back-top-color; -// text-align: center; -// background-color: @back-top-bg; -// border-radius: 20px; -// transition: all 0.3s; - -// &:hover { -// background-color: @back-top-hover-bg; -// transition: all 0.3s; -// } -// } - -// &-icon { -// font-size: 24px; -// line-height: 40px; -// } -// } - -// @import './responsive'; diff --git a/components/back-top/style/index.tsx b/components/back-top/style/index.tsx index 74462604f3..f28334fcee 100644 --- a/components/back-top/style/index.tsx +++ b/components/back-top/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/back-top/style/responsive.less b/components/back-top/style/responsive.less deleted file mode 100644 index 28abc1554c..0000000000 --- a/components/back-top/style/responsive.less +++ /dev/null @@ -1,21 +0,0 @@ -// @media screen and (max-width: @screen-md) { -// .@{backtop-prefix-cls} { -// right: 60px; - -// &-rtl { -// right: auto; -// left: 60px; -// } -// } -// } - -// @media screen and (max-width: @screen-xs) { -// .@{backtop-prefix-cls} { -// right: 20px; - -// &-rtl { -// right: auto; -// left: 20px; -// } -// } -// } diff --git a/components/badge/style/index.less b/components/badge/style/index.less deleted file mode 100644 index 9586a59c30..0000000000 --- a/components/badge/style/index.less +++ /dev/null @@ -1,281 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @badge-prefix-cls: ~'@{ant-prefix}-badge'; -// @number-prefix-cls: ~'@{ant-prefix}-scroll-number'; - -// .@{badge-prefix-cls} { -// .reset-component(); - -// position: relative; -// display: inline-block; -// line-height: 1; - -// &-count { -// z-index: @zindex-badge; -// min-width: @badge-height; -// height: @badge-height; -// padding: 0 6px; -// color: @badge-text-color; -// font-weight: @badge-font-weight; -// font-size: @badge-font-size; -// line-height: @badge-height; -// white-space: nowrap; -// text-align: center; -// background: @badge-color; -// border-radius: (@badge-height / 2); -// box-shadow: 0 0 0 1px @shadow-color-inverse; - -// a, -// a:hover { -// color: @badge-text-color; -// } -// } - -// &-count-sm { -// min-width: @badge-height-sm; -// height: @badge-height-sm; -// padding: 0; -// font-size: @badge-font-size-sm; -// line-height: @badge-height-sm; -// border-radius: (@badge-height-sm / 2); -// } - -// &-multiple-words { -// padding: 0 8px; -// } - -// &-dot { -// z-index: @zindex-badge; -// width: @badge-dot-size; -// min-width: @badge-dot-size; -// height: @badge-dot-size; -// background: @highlight-color; -// border-radius: 100%; -// box-shadow: 0 0 0 1px @shadow-color-inverse; -// } - -// // Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088 -// &-dot.@{number-prefix-cls} { -// transition: background 1.5s; -// } - -// &-count, -// &-dot, -// .@{number-prefix-cls}-custom-component { -// position: absolute; -// top: 0; -// right: 0; -// transform: translate(50%, -50%); -// transform-origin: 100% 0%; - -// &.@{iconfont-css-prefix}-spin { -// animation: antBadgeLoadingCircle 1s infinite linear; -// } -// } - -// &-status { -// line-height: inherit; -// vertical-align: baseline; - -// &-dot { -// position: relative; -// top: -1px; -// display: inline-block; -// width: @badge-status-size; -// height: @badge-status-size; -// vertical-align: middle; -// border-radius: 50%; -// } - -// &-success { -// background-color: @success-color; -// } - -// &-processing { -// position: relative; -// background-color: @processing-color; - -// &::after { -// position: absolute; -// top: 0; -// left: 0; -// width: 100%; -// height: 100%; -// border: 1px solid @processing-color; -// border-radius: 50%; -// animation: antStatusProcessing 1.2s infinite ease-in-out; -// content: ''; -// } -// } - -// &-default { -// background-color: @normal-color; -// } - -// &-error { -// background-color: @error-color; -// } - -// &-warning { -// background-color: @warning-color; -// } - -// // mixin to iterate over colors and create CSS class for each one -// .make-color-classes(@i: length(@preset-colors)) when (@i > 0) { -// .make-color-classes(@i - 1); -// @color: extract(@preset-colors, @i); -// @darkColor: '@{color}-6'; -// &-@{color} { -// background: @@darkColor; -// } -// } -// .make-color-classes(); - -// &-text { -// margin-left: 8px; -// color: @text-color; -// font-size: @font-size-base; -// } -// } - -// &-zoom-appear, -// &-zoom-enter { -// animation: antZoomBadgeIn @animation-duration-slow @ease-out-back; -// animation-fill-mode: both; -// } - -// &-zoom-leave { -// animation: antZoomBadgeOut @animation-duration-slow @ease-in-back; -// animation-fill-mode: both; -// } - -// &-not-a-wrapper { -// .@{badge-prefix-cls}-zoom-appear, -// .@{badge-prefix-cls}-zoom-enter { -// animation: antNoWrapperZoomBadgeIn @animation-duration-slow @ease-out-back; -// } - -// .@{badge-prefix-cls}-zoom-leave { -// animation: antNoWrapperZoomBadgeOut @animation-duration-slow @ease-in-back; -// } - -// &:not(.@{badge-prefix-cls}-status) { -// vertical-align: middle; -// } - -// .@{number-prefix-cls}-custom-component, -// .@{badge-prefix-cls}-count { -// transform: none; -// } - -// .@{number-prefix-cls}-custom-component, -// .@{number-prefix-cls} { -// position: relative; -// top: auto; -// display: block; -// transform-origin: 50% 50%; -// } -// } -// } - -// @keyframes antStatusProcessing { -// 0% { -// transform: scale(0.8); -// opacity: 0.5; -// } - -// 100% { -// transform: scale(2.4); -// opacity: 0; -// } -// } - -// // Safari will blink with transform when inner element has absolute style. -// .safari-fix-motion() { -// /* stylelint-disable property-no-vendor-prefix */ -// -webkit-transform-style: preserve-3d; -// -webkit-backface-visibility: hidden; -// /* stylelint-enable property-no-vendor-prefix */ -// } - -// .@{number-prefix-cls} { -// overflow: hidden; -// direction: ltr; - -// &-only { -// position: relative; -// display: inline-block; -// height: @badge-height; -// transition: all @animation-duration-slow @ease-in-out; -// .safari-fix-motion; - -// > p.@{number-prefix-cls}-only-unit { -// height: @badge-height; -// margin: 0; -// .safari-fix-motion; -// } -// } - -// &-symbol { -// vertical-align: top; -// } -// } - -// @keyframes antZoomBadgeIn { -// 0% { -// transform: scale(0) translate(50%, -50%); -// opacity: 0; -// } - -// 100% { -// transform: scale(1) translate(50%, -50%); -// } -// } - -// @keyframes antZoomBadgeOut { -// 0% { -// transform: scale(1) translate(50%, -50%); -// } - -// 100% { -// transform: scale(0) translate(50%, -50%); -// opacity: 0; -// } -// } - -// @keyframes antNoWrapperZoomBadgeIn { -// 0% { -// transform: scale(0); -// opacity: 0; -// } - -// 100% { -// transform: scale(1); -// } -// } - -// @keyframes antNoWrapperZoomBadgeOut { -// 0% { -// transform: scale(1); -// } - -// 100% { -// transform: scale(0); -// opacity: 0; -// } -// } - -// @keyframes antBadgeLoadingCircle { -// 0% { -// transform-origin: 50%; -// } - -// 100% { -// transform: translate(50%, -50%) rotate(360deg); -// transform-origin: 50%; -// } -// } - -// @import './ribbon'; -// @import './rtl'; diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index 7dd3428c9c..f1dbce6755 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle, PresetColorType } from '../../theme'; diff --git a/components/badge/style/ribbon.less b/components/badge/style/ribbon.less deleted file mode 100644 index 6a6e366bfe..0000000000 --- a/components/badge/style/ribbon.less +++ /dev/null @@ -1,81 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@ribbon-prefix-cls: ~'@{ant-prefix}-ribbon'; -@ribbon-wrapper-prefix-cls: ~'@{ant-prefix}-ribbon-wrapper'; - -.@{ribbon-wrapper-prefix-cls} { - position: relative; -} - -.@{ribbon-prefix-cls} { - .reset-component(); - - position: absolute; - top: 8px; - height: 22px; - padding: 0 8px; - color: @badge-text-color; - line-height: 22px; - white-space: nowrap; - background-color: @primary-color; - border-radius: @border-radius-sm; - - &-text { - color: @white; - } - - &-corner { - position: absolute; - top: 100%; - width: 8px; - height: 8px; - color: currentcolor; - border: 4px solid; - transform: scaleY(0.75); - transform-origin: top; - // If not support IE 11, use filter: brightness(75%) instead - &::after { - position: absolute; - top: -4px; - left: -4px; - width: inherit; - height: inherit; - color: rgba(0, 0, 0, 0.25); - border: inherit; - content: ''; - } - } - - // colors - // mixin to iterate over colors and create CSS class for each one - .make-color-classes(@i: length(@preset-colors)) when (@i > 0) { - .make-color-classes(@i - 1); - @color: extract(@preset-colors, @i); - @darkColor: '@{color}-6'; - &-color-@{color} { - color: @@darkColor; - background: @@darkColor; - } - } - .make-color-classes(); - - // placement - &.@{ribbon-prefix-cls}-placement-end { - right: -8px; - border-bottom-right-radius: 0; - .@{ribbon-prefix-cls}-corner { - right: 0; - border-color: currentcolor transparent transparent currentcolor; - } - } - - &.@{ribbon-prefix-cls}-placement-start { - left: -8px; - border-bottom-left-radius: 0; - .@{ribbon-prefix-cls}-corner { - left: 0; - border-color: currentcolor currentcolor transparent transparent; - } - } -} diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less deleted file mode 100644 index 276a6ef6ea..0000000000 --- a/components/badge/style/rtl.less +++ /dev/null @@ -1,100 +0,0 @@ -.@{badge-prefix-cls} { - &-rtl { - direction: rtl; - } - - &:not(&-not-a-wrapper) &-count, - &:not(&-not-a-wrapper) &-dot, - &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { - .@{badge-prefix-cls}-rtl& { - right: auto; - left: 0; - direction: ltr; - transform: translate(-50%, -50%); - transform-origin: 0% 0%; - } - } - - &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { - right: auto; - left: 0; - transform: translate(-50%, -50%); - transform-origin: 0% 0%; - } - - &-status { - &-text { - .@{badge-prefix-cls}-rtl & { - margin-right: 8px; - margin-left: 0; - } - } - } - - &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl { - .@{badge-prefix-cls}-zoom-appear, - .@{badge-prefix-cls}-zoom-enter { - animation-name: antZoomBadgeInRtl; - } - - .@{badge-prefix-cls}-zoom-leave { - animation-name: antZoomBadgeOutRtl; - } - } -} - -.@{ribbon-prefix-cls}-rtl { - direction: rtl; - &.@{ribbon-prefix-cls}-placement-end { - right: unset; - left: -8px; - border-bottom-right-radius: @border-radius-sm; - border-bottom-left-radius: 0; - .@{ribbon-prefix-cls}-corner { - right: unset; - left: 0; - border-color: currentcolor currentcolor transparent transparent; - - &::after { - border-color: currentcolor currentcolor transparent transparent; - } - } - } - &.@{ribbon-prefix-cls}-placement-start { - right: -8px; - left: unset; - border-bottom-right-radius: 0; - border-bottom-left-radius: @border-radius-sm; - .@{ribbon-prefix-cls}-corner { - right: 0; - left: unset; - border-color: currentcolor transparent transparent currentcolor; - - &::after { - border-color: currentcolor transparent transparent currentcolor; - } - } - } -} - -@keyframes antZoomBadgeInRtl { - 0% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } - - 100% { - transform: scale(1) translate(-50%, -50%); - } -} - -@keyframes antZoomBadgeOutRtl { - 0% { - transform: scale(1) translate(-50%, -50%); - } - - 100% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } -} diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less deleted file mode 100644 index a23c38f6bf..0000000000 --- a/components/breadcrumb/style/index.less +++ /dev/null @@ -1,64 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; -// -// @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb'; -// -// .@{breadcrumb-prefix-cls} { -// .reset-component(); -// -// color: @breadcrumb-base-color; -// font-size: @breadcrumb-font-size; -// -// .@{iconfont-css-prefix} { -// font-size: @breadcrumb-icon-font-size; -// } -// -// ol { -// display: flex; -// flex-wrap: wrap; -// margin: 0; -// padding: 0; -// list-style: none; -// } -// -// a { -// color: @breadcrumb-link-color; -// transition: color 0.3s; -// -// &:hover { -// color: @breadcrumb-link-color-hover; -// } -// } -// -// li:last-child { -// color: @breadcrumb-last-item-color; -// -// a { -// color: @breadcrumb-last-item-color; -// } -// } -// -// li:last-child &-separator { -// display: none; -// } -// -// &-separator { -// margin: @breadcrumb-separator-margin; -// color: @breadcrumb-separator-color; -// } -// -// &-link { -// > .@{iconfont-css-prefix} + span, -// > .@{iconfont-css-prefix} + a { -// margin-left: 4px; -// } -// } -// -// &-overlay-link { -// > .@{iconfont-css-prefix} { -// margin-left: 4px; -// } -// } -// } -// -// @import './rtl'; diff --git a/components/breadcrumb/style/index.tsx b/components/breadcrumb/style/index.tsx index ca588a479f..07471109d9 100644 --- a/components/breadcrumb/style/index.tsx +++ b/components/breadcrumb/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/breadcrumb/style/rtl.less b/components/breadcrumb/style/rtl.less deleted file mode 100644 index c1141c9937..0000000000 --- a/components/breadcrumb/style/rtl.less +++ /dev/null @@ -1,29 +0,0 @@ -.@{breadcrumb-prefix-cls} { - &-rtl { - .clearfix(); - direction: rtl; - - > span { - float: right; - } - } - - &-link { - > .@{iconfont-css-prefix} + span, - > .@{iconfont-css-prefix} + a { - .@{breadcrumb-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - } - - &-overlay-link { - > .@{iconfont-css-prefix} { - .@{breadcrumb-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - } -} diff --git a/components/button/_style/index.less b/components/button/_style/index.less deleted file mode 100644 index e4f2bf9355..0000000000 --- a/components/button/_style/index.less +++ /dev/null @@ -1,292 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import './mixin'; - -@btn-prefix-cls: ~'@{ant-prefix}-btn'; - -// for compatible -@btn-ghost-color: @text-color; -@btn-ghost-bg: transparent; -@btn-ghost-border: @border-color-base; - -// Button styles -// ----------------------------- -.@{btn-prefix-cls} { - // Fixing https://github.com/ant-design/ant-design/issues/12978 - // Fixing https://github.com/ant-design/ant-design/issues/20058 - // Fixing https://github.com/ant-design/ant-design/issues/19972 - // Fixing https://github.com/ant-design/ant-design/issues/18107 - // Fixing https://github.com/ant-design/ant-design/issues/13214 - // It is a render problem of chrome, which is only happened in the codesandbox demo - // 0.001px solution works and I don't know why - line-height: @btn-line-height; - .btn(); - .btn-default(); - - // Fix loading button animation - // https://github.com/ant-design/ant-design/issues/24323 - > span { - display: inline-block; - } - - &-primary { - .btn-primary(); - - .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) { - border-right-color: @btn-group-border; - border-left-color: @btn-group-border; - - &:disabled { - border-color: @btn-default-border; - } - } - - .@{btn-prefix-cls}-group &:first-child { - &:not(:last-child) { - border-right-color: @btn-group-border; - - &[disabled] { - border-right-color: @btn-default-border; - } - } - } - - .@{btn-prefix-cls}-group &:last-child:not(:first-child), - .@{btn-prefix-cls}-group & + & { - border-left-color: @btn-group-border; - - &[disabled] { - border-left-color: @btn-default-border; - } - } - } - - &-ghost { - .btn-ghost(); - } - - &-dashed { - .btn-dashed(); - } - - // type="danger" will deprecated - // use danger instead - &-danger { - .btn-danger(); - } - - &-link { - .btn-link(); - } - - &-text { - .btn-text(); - } - - &-dangerous { - .btn-danger-default(); - } - - &-dangerous&-primary { - .btn-danger(); - } - - &-dangerous&-link { - .btn-danger-link(); - } - - &-dangerous&-text { - .btn-danger-text(); - } - - &-icon-only { - .btn-square(@btn-prefix-cls); - vertical-align: -3px; - - > .@{iconfont-css-prefix} { - display: flex; - justify-content: center; - } - - .@{iconfont-css-prefix}-loading { - padding: 0 !important; - } - } - - // https://github.com/ant-design/ant-design/issues/32365 - a&-icon-only { - vertical-align: -1px; - - > .@{iconfont-css-prefix} { - display: inline; - } - } - - &-round { - .btn-round(@btn-prefix-cls); - &.@{btn-prefix-cls}-icon-only { - width: auto; - } - } - - &-circle { - .btn-circle(@btn-prefix-cls); - } - - &::before { - position: absolute; - top: -@btn-border-width; - right: -@btn-border-width; - bottom: -@btn-border-width; - left: -@btn-border-width; - z-index: 1; - display: none; - background: @component-background; - border-radius: inherit; - opacity: 0.35; - transition: opacity 0.2s; - content: ''; - pointer-events: none; - } - - .@{iconfont-css-prefix} { - transition: margin-left 0.3s @ease-in-out; - - // Follow icon blur under windows. Change the render. - // https://github.com/ant-design/ant-design/issues/13924 - &.@{iconfont-css-prefix}-plus, - &.@{iconfont-css-prefix}-minus { - > svg { - shape-rendering: optimizespeed; - } - } - } - - &&-loading { - position: relative; - cursor: default; - - &::before { - display: block; - } - } - - & > &-loading-icon { - transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out; - - .@{iconfont-css-prefix} { - padding-right: @padding-xs; - animation: none; - // for smooth button padding transition - svg { - animation: loadingCircle 1s infinite linear; - } - } - } - - &-group { - .btn-group(@btn-prefix-cls); - } - - // http://stackoverflow.com/a/21281554/3040605 - &:focus > span, - &:active > span { - position: relative; - } - - // To ensure that a space will be placed between character and `Icon`. - > .@{iconfont-css-prefix} + span, - > span + .@{iconfont-css-prefix} { - margin-left: @margin-xs; - } - - &&-background-ghost { - color: @btn-default-ghost-color; - border-color: @btn-default-ghost-border; - - &, - &:hover, - &:active, - &:focus { - background: @btn-default-ghost-bg; - } - - &:hover, - &:focus { - color: @primary-color-hover; - border-color: @primary-color-hover; - } - - &:active { - color: @primary-color-active; - border-color: @primary-color-active; - } - - &[disabled] { - color: @disabled-color; - background: @btn-default-ghost-bg; - border-color: @btn-default-border; - } - } - - &-background-ghost&-primary { - .button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active); - } - - &-background-ghost&-danger { - .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active); - } - - &-background-ghost&-dangerous { - .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active); - } - - &-background-ghost&-dangerous&-link { - .button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active); - } - - &-two-chinese-chars::first-letter { - letter-spacing: 0.34em; - } - - &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { - margin-right: -0.34em; - letter-spacing: 0.34em; - } - - &&-block { - width: 100%; - } - - // https://github.com/ant-design/ant-design/issues/12681 - // same method as Select - &:empty { - display: inline-block; - width: 0; - visibility: hidden; - content: '\a0'; - } -} - -a.@{btn-prefix-cls} { - // Fixing https://github.com/ant-design/ant-design/issues/12978 - // https://github.com/ant-design/ant-design/issues/29978 - // It is a render problem of chrome, which is only happened in the codesandbox demo - // 0.1px for padding-top solution works and I don't why - padding-top: 0.01px !important; - line-height: @btn-height-base - 2px; - - &-disabled { - .btn-href-disabled(); - } - - &-lg { - line-height: @btn-height-lg - 2px; - } - - &-sm { - line-height: @btn-height-sm - 2px; - } -} - -@import './rtl'; diff --git a/components/button/_style/index.tsx b/components/button/_style/index.tsx deleted file mode 100644 index 3a3ab0de59..0000000000 --- a/components/button/_style/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import '../../style/index.less'; -import './index.less'; diff --git a/components/button/_style/mixin.less b/components/button/_style/mixin.less deleted file mode 100644 index 04037fd70f..0000000000 --- a/components/button/_style/mixin.less +++ /dev/null @@ -1,589 +0,0 @@ -// mixins for button -// ------------------------ -.button-size(@height; @padding-horizontal; @font-size; @border-radius) { - @padding-vertical: max( - (round(((@height - @font-size * @line-height-base) / 2) * 10) / 10) - @border-width-base, - 0 - ); - height: @height; - padding: @padding-vertical @padding-horizontal; - font-size: @font-size; - border-radius: @border-radius; -} - -.button-color(@color; @background; @border) { - color: @color; - border-color: @border; // a inside Button which only work in Chrome - & when not(@background = null) { - background: @background; - } - // http://stackoverflow.com/a/17253457 - > a:only-child { - color: currentcolor; - - &::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: transparent; - content: ''; - } - } -} - -.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) { - &[disabled] { - &, - &:hover, - &:focus, - &:active { - .button-color(@color; @background; @border); - - text-shadow: none; - box-shadow: none; - } - } -} - -.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) { - .button-color(@color; @background; @background); - - text-shadow: @btn-text-shadow; - box-shadow: @btn-primary-shadow; - - &:hover, - &:focus { - & when (@theme = dark) { - .button-color( - @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` - ); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` - ); - } - & when (@theme = variable) { - .button-color(@color; @backgroundHover; @backgroundHover); - } - } - - &:active { - & when (@theme = dark) { - .button-color( - @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` - ); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` - ); - } - & when (@theme = variable) { - .button-color(@color; @backgroundActive; @backgroundActive); - } - } - - .button-disabled(); -} - -.button-variant-other(@color; @background; @border) { - .button-color(@color; @background; @border); - - &:hover, - &:focus { - & when (@theme = dark) { - .button-color(@primary-5; @background; @primary-5); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - ~`colorPalette('@{btn-primary-bg}', 5) `; @background; - ~`colorPalette('@{btn-primary-bg}', 5) ` - ); - } - & when (@theme = variable) { - .button-color(@primary-color-hover; @background; @primary-color-hover); - } - } - - &:active { - & when (@theme = dark) { - .button-color(@primary-7; @background; @primary-7); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - ~`colorPalette('@{btn-primary-bg}', 7) `; @background; - ~`colorPalette('@{btn-primary-bg}', 7) ` - ); - } - & when (@theme = variable) { - .button-color(@primary-color-active; @background; @primary-color-active); - } - } - .button-disabled(); -} - -.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) { - .button-color(@color; null; @border); - text-shadow: none; - - &:hover, - &:focus { - & when (@border = transparent) { - & when (@theme = dark) { - .button-color(~`colorPalette('@{color}', 7) `; null; transparent); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color(~`colorPalette('@{color}', 5) `; null; transparent); - } - & when (@theme = variable) { - .button-color(@borderActive; transparent; transparent); - } - } - & when not (@border = transparent) { - & when (@theme = dark) { - .button-color( - ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) ` - ); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) ` - ); - } - & when (@theme = variable) { - .button-color(@borderHover; transparent; @borderHover); - } - } - } - - &:active { - & when (@border = transparent) { - & when (@theme = dark) { - .button-color(~`colorPalette('@{color}', 5) `; null; transparent); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color(~`colorPalette('@{color}', 7) `; null; transparent); - } - & when (@theme = variable) { - .button-color(@borderActive; transparent; transparent); - } - } - & when not (@border = transparent) { - & when (@theme = dark) { - .button-color( - ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) ` - ); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) ` - ); - } - & when (@theme = variable) { - .button-color(@borderActive; transparent; @borderActive); - } - } - } - .button-disabled(); -} - -.button-group-base(@btnClassName) { - position: relative; - display: inline-flex; - > .@{btnClassName}, - > span > .@{btnClassName} { - position: relative; - - &:hover, - &:focus, - &:active { - z-index: 2; - } - - &[disabled] { - z-index: 0; - } - } - .@{btnClassName}-icon-only { - font-size: @font-size-base; - } -} -// Base styles of buttons -// -------------------------------------------------- -.btn() { - position: relative; - display: inline-block; - font-weight: @btn-font-weight; - white-space: nowrap; - text-align: center; - background-image: none; - border: @btn-border-width @btn-border-style transparent; - box-shadow: @btn-shadow; - cursor: pointer; - transition: all 0.3s @ease-in-out; - user-select: none; - touch-action: manipulation; - .button-size( - @btn-height-base; @btn-padding-horizontal-base; @font-size-base; @btn-border-radius-base - ); - > .@{iconfont-css-prefix} { - line-height: 1; - } - - &, - &:active, - &:focus { - outline: 0; - } - - &:not([disabled]):hover { - text-decoration: none; - } - - &:not([disabled]):active { - outline: 0; - box-shadow: none; - } - - &[disabled] { - cursor: not-allowed; - - > * { - pointer-events: none; - } - } - - &-lg { - .button-size( - @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base - ); - } - - &-sm { - .button-size( - @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm - ); - } -} -// primary button style -.btn-primary() { - .button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active); -} -// default button style -.btn-default() { - .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; ); - - &:hover, - &:focus, - &:active { - text-decoration: none; - background: @btn-default-bg; - } -} -// ghost button style -.btn-ghost() { - .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border); -} -// dashed button style -.btn-dashed() { - .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border); - border-style: dashed; -} -// danger button style -.btn-danger() { - .button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active); -} -// danger default button style -.btn-danger-default() { - .button-color(@error-color, @btn-default-bg, @error-color); - - &:hover, - &:focus { - & when (@theme = dark) { - .button-color( - ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7) - ` - ); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5) - ` - ); - } - & when (@theme = variable) { - .button-color(@error-color-hover, @btn-default-bg, @error-color-hover); - } - } - - &:active { - & when (@theme = dark) { - .button-color( - ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5) - ` - ); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color( - ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7) - ` - ); - } - & when (@theme = variable) { - .button-color(@error-color-active, @btn-default-bg, @error-color-active); - } - } - .button-disabled(); -} -// danger link button style -.btn-danger-link() { - .button-variant-other(@error-color, transparent, transparent); - box-shadow: none; - - &:hover, - &:focus { - & when (@theme = dark) { - .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent); - } - & when (@theme = variable) { - .button-color(@error-color-hover; transparent; transparent); - } - } - - &:active { - & when (@theme = dark) { - .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent); - } - & when (@theme = variable) { - .button-color(@error-color-active; transparent; transparent); - } - } - .button-disabled(@disabled-color; transparent; transparent); -} -// link button style -.btn-link() { - .button-variant-other(@link-color, transparent, transparent); - box-shadow: none; - - &:hover { - background: @btn-link-hover-bg; - } - - &:hover, - &:focus, - &:active { - border-color: transparent; - } - .button-disabled(@disabled-color; transparent; transparent); -} -// link button disabled style -.btn-href-disabled() { - cursor: not-allowed; - - > * { - pointer-events: none; - } - - &, - &:hover, - &:focus, - &:active { - .button-color(@btn-disable-color,transparent, transparent); - - text-shadow: none; - box-shadow: none; - } -} -// text button style -.btn-text() { - .button-variant-other(@text-color, transparent, transparent); - box-shadow: none; - - &:hover, - &:focus { - color: @text-color; - background: @btn-text-hover-bg; - border-color: transparent; - } - - &:active { - color: @text-color; - background: fadein(@btn-text-hover-bg, 1%); - border-color: transparent; - } - - .button-disabled(@disabled-color; transparent; transparent); -} -.btn-danger-text() { - .button-variant-other(@error-color, transparent, transparent); - box-shadow: none; - - &:hover, - &:focus { - & when (@theme = dark) { - .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent); - } - & when (@theme = variable) { - .button-color(@error-color-hover; @btn-text-hover-bg; transparent); - } - } - - &:active { - & when (@theme = dark) { - .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent); - } - & when (not (@theme = dark) and not (@theme = variable)) { - .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent); - } - & when (@theme = variable) { - .button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent); - } - } - .button-disabled(@disabled-color; transparent; transparent); -} -// round button -.btn-round(@btnClassName: btn) { - .button-size(@btn-circle-size; (@btn-circle-size / 2); @font-size-base; @btn-circle-size); - &.@{btnClassName}-lg { - .button-size( - @btn-circle-size-lg; (@btn-circle-size-lg / 2); @btn-font-size-lg; @btn-circle-size-lg - ); - } - &.@{btnClassName}-sm { - .button-size( - @btn-circle-size-sm; (@btn-circle-size-sm / 2); @font-size-base; @btn-circle-size-sm - ); - } -} -// square button: the content only contains icon -.btn-square(@btnClassName: btn) { - .square(@btn-square-size); - .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base); - - & > * { - font-size: @btn-square-only-icon-size; - } - &.@{btnClassName}-lg { - .square(@btn-square-size-lg); - .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base); - - & > * { - font-size: @btn-square-only-icon-size-lg; - } - } - &.@{btnClassName}-sm { - .square(@btn-square-size-sm); - .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base); - - & > * { - font-size: @btn-square-only-icon-size-sm; - } - } -} -// circle button: the content only contains icon -.btn-circle(@btnClassName: btn) { - min-width: @btn-height-base; - padding-right: 0; - padding-left: 0; - text-align: center; - border-radius: 50%; - &.@{btnClassName}-lg { - min-width: @btn-height-lg; - border-radius: 50%; - } - &.@{btnClassName}-sm { - min-width: @btn-height-sm; - border-radius: 50%; - } -} -// Horizontal button groups style -// -------------------------------------------------- -.btn-group(@btnClassName: btn) { - .button-group-base(@btnClassName); - .@{btnClassName} + .@{btnClassName}, - .@{btnClassName} + &, - span + .@{btnClassName}, - .@{btnClassName} + span, - > span + span, - & + .@{btnClassName}, - & + & { - margin-left: -1px; - } - .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) { - border-left-color: transparent; - } - .@{btnClassName} { - border-radius: 0; - } - > .@{btnClassName}:first-child, - > span:first-child > .@{btnClassName} { - margin-left: 0; - } - > .@{btnClassName}:only-child { - border-radius: @btn-border-radius-base; - } - > span:only-child > .@{btnClassName} { - border-radius: @btn-border-radius-base; - } - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - border-top-left-radius: @btn-border-radius-base; - border-bottom-left-radius: @btn-border-radius-base; - } - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - border-top-right-radius: @btn-border-radius-base; - border-bottom-right-radius: @btn-border-radius-base; - } - - &-sm { - > .@{btnClassName}:only-child { - border-radius: @btn-border-radius-sm; - } - > span:only-child > .@{btnClassName} { - border-radius: @btn-border-radius-sm; - } - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - border-top-left-radius: @btn-border-radius-sm; - border-bottom-left-radius: @btn-border-radius-sm; - } - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - border-top-right-radius: @btn-border-radius-sm; - border-bottom-right-radius: @btn-border-radius-sm; - } - } - - & > & { - float: left; - } - & > &:not(:first-child):not(:last-child) > .@{btnClassName} { - border-radius: 0; - } - - & > &:first-child:not(:last-child) { - > .@{btnClassName}:last-child { - padding-right: 8px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - & > &:last-child:not(:first-child) > .@{btnClassName}:first-child { - padding-left: 8px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } -} diff --git a/components/button/_style/rtl.less b/components/button/_style/rtl.less deleted file mode 100644 index 4e36324de0..0000000000 --- a/components/button/_style/rtl.less +++ /dev/null @@ -1,90 +0,0 @@ -.@{btn-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-primary { - .@{btn-prefix-cls}-group &:last-child:not(:first-child), - .@{btn-prefix-cls}-group & + & { - .@{btn-prefix-cls}-group-rtl& { - border-right-color: @btn-group-border; - border-left-color: @btn-default-border; - } - - &[disabled] { - .@{btn-prefix-cls}-group-rtl& { - border-right-color: @btn-default-border; - border-left-color: @btn-group-border; - } - } - } - } - - & > &-loading-icon { - .@{iconfont-css-prefix} { - .@{btn-prefix-cls}-rtl& { - padding-right: 0; - padding-left: @margin-xs; - } - } - } - - > .@{iconfont-css-prefix} + span, - > span + .@{iconfont-css-prefix} { - .@{btn-prefix-cls}-rtl& { - margin-right: 8px; - margin-left: 0; - } - } -} - -// mixin -.btn-group(@btnClassName: btn) { - .@{btnClassName} + .@{btnClassName}, - .@{btnClassName} + &, - span + .@{btnClassName}, - .@{btnClassName} + span, - > span + span, - & + .@{btnClassName}, - & + & { - .@{btnClassName}-rtl&, - .@{btnClassName}-group-rtl& { - margin-right: -1px; - margin-left: auto; - } - } - - &.@{btnClassName}-group-rtl { - direction: rtl; - } - - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0; - } - } - - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base; - } - } - - &-sm { - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0; - } - } - - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm; - } - } - } -} diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index 456c626f46..cdfcd6c123 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less deleted file mode 100644 index ab5404bacc..0000000000 --- a/components/calendar/style/index.less +++ /dev/null @@ -1,196 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar'; -// @calendar-picker-prefix-cls: ~'@{ant-prefix}-picker'; - -// .@{calendar-prefix-cls} { -// .reset-component(); -// background: @calendar-full-bg; - -// // ========================= Header ========================= -// &-header { -// display: flex; -// justify-content: flex-end; -// padding: @padding-sm 0; - -// .@{calendar-prefix-cls}-year-select { -// min-width: 80px; -// } - -// .@{calendar-prefix-cls}-month-select { -// min-width: 70px; -// margin-left: @padding-xs; -// } - -// .@{calendar-prefix-cls}-mode-switch { -// margin-left: @padding-xs; -// } -// } - -// .@{calendar-picker-prefix-cls}-panel { -// background: @calendar-full-panel-bg; -// border: 0; -// border-top: @border-width-base @border-style-base @border-color-split; -// border-radius: 0; - -// .@{calendar-picker-prefix-cls}-month-panel, -// .@{calendar-picker-prefix-cls}-date-panel { -// width: auto; -// } - -// .@{calendar-picker-prefix-cls}-body { -// padding: @padding-xs 0; -// } - -// .@{calendar-picker-prefix-cls}-content { -// width: 100%; -// } -// } - -// // ========================== Mini ========================== -// &-mini { -// border-radius: @border-radius-base; - -// .@{calendar-picker-prefix-cls}-calendar-header { -// padding-right: @padding-xs; -// padding-left: @padding-xs; -// } - -// .@{calendar-picker-prefix-cls}-panel { -// border-radius: 0 0 @border-radius-base @border-radius-base; -// } - -// .@{calendar-picker-prefix-cls}-content { -// height: 256px; - -// th { -// height: auto; -// padding: 0; -// line-height: 18px; -// } -// } - -// .@{calendar-picker-prefix-cls}-cell::before { -// pointer-events: none; -// } -// } - -// // ========================== Full ========================== -// &-full { -// .@{calendar-picker-prefix-cls}-panel { -// display: block; -// width: 100%; -// text-align: right; -// background: @calendar-full-bg; -// border: 0; - -// .@{calendar-picker-prefix-cls}-body { -// th, -// td { -// padding: 0; -// } - -// th { -// height: auto; -// padding: 0 12px 5px 0; -// line-height: 18px; -// } -// } - -// // Cell -// .@{calendar-picker-prefix-cls}-cell { -// &::before { -// display: none; -// } - -// &:hover { -// .@{calendar-prefix-cls}-date { -// background: @item-hover-bg; -// } -// } - -// .@{calendar-prefix-cls}-date-today::before { -// display: none; -// } - -// &-selected, -// &-selected:hover { -// .@{calendar-prefix-cls}-date, -// .@{calendar-prefix-cls}-date-today { -// background: @calendar-item-active-bg; - -// .@{calendar-prefix-cls}-date-value { -// color: @primary-color; -// } -// } -// } -// } - -// // Cell date -// .@{calendar-prefix-cls}-date { -// display: block; -// width: auto; -// height: auto; -// margin: 0 (@padding-xs / 2); -// padding: (@padding-xs / 2) @padding-xs 0; -// border: 0; -// border-top: 2px solid @border-color-split; -// border-radius: 0; -// transition: background 0.3s; - -// &-value { -// line-height: 24px; -// transition: color 0.3s; -// } - -// &-content { -// position: static; -// width: auto; -// height: 86px; -// overflow-y: auto; -// color: @text-color; -// line-height: @line-height-base; -// text-align: left; -// } - -// &-today { -// border-color: @primary-color; - -// .@{calendar-prefix-cls}-date-value { -// color: @text-color; -// } -// } -// } -// } -// } -// } - -// @media only screen and (max-width: @screen-xs) { -// .@{calendar-prefix-cls} { -// &-header { -// display: block; - -// .@{calendar-prefix-cls}-year-select { -// width: 50%; -// } - -// .@{calendar-prefix-cls}-month-select { -// width: ~'calc(50% - @{padding-xs})'; -// } - -// .@{calendar-prefix-cls}-mode-switch { -// width: 100%; -// margin-top: @padding-xs; -// margin-left: 0; - -// > label { -// width: 50%; -// text-align: center; -// } -// } -// } -// } -// } - -// @import './rtl'; diff --git a/components/calendar/style/index.tsx b/components/calendar/style/index.tsx index 64ba08b820..719d55297b 100644 --- a/components/calendar/style/index.tsx +++ b/components/calendar/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { PickerPanelToken } from '../../date-picker/style'; import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style'; diff --git a/components/calendar/style/rtl.less b/components/calendar/style/rtl.less deleted file mode 100644 index 06464daad0..0000000000 --- a/components/calendar/style/rtl.less +++ /dev/null @@ -1,46 +0,0 @@ -.@{calendar-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-header { - .@{calendar-prefix-cls}-month-select { - .@{calendar-prefix-cls}-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - - .@{calendar-prefix-cls}-mode-switch { - .@{calendar-prefix-cls}-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - } - - // ========================== Full ========================== - &-full { - .@{calendar-picker-prefix-cls}-panel { - .@{calendar-prefix-cls}-rtl& { - text-align: left; - } - - .@{calendar-picker-prefix-cls}-body { - th { - .@{calendar-prefix-cls}-rtl& { - padding: 0 0 5px 12px; - } - } - } - - .@{calendar-prefix-cls}-date { - &-content { - .@{calendar-prefix-cls}-rtl& { - text-align: right; - } - } - } - } - } -} diff --git a/components/card/style/index.less b/components/card/style/index.less deleted file mode 100644 index 108b1c9d11..0000000000 --- a/components/card/style/index.less +++ /dev/null @@ -1,302 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @card-prefix-cls: ~'@{ant-prefix}-card'; -// @card-hoverable-hover-border: transparent; -// @card-action-icon-size: 16px; - -// @gradient-min: fade(@card-skeleton-bg, 20%); -// @gradient-max: fade(@card-skeleton-bg, 40%); - -// .@{card-prefix-cls} { -// .reset-component(); - -// position: relative; -// background: @card-background; -// border-radius: @card-radius; - -// &-rtl { -// direction: rtl; -// } - -// &-hoverable { -// cursor: pointer; -// transition: box-shadow 0.3s, border-color 0.3s; - -// &:hover { -// border-color: @card-hoverable-hover-border; -// box-shadow: @card-shadow; -// } -// } - -// &-bordered { -// border: @border-width-base @border-style-base @border-color-split; -// } - -// &-head { -// min-height: @card-head-height; -// margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png -// padding: 0 @card-padding-base; -// color: @card-head-color; -// font-weight: 500; -// font-size: @card-head-font-size; -// background: @card-head-background; -// border-bottom: @border-width-base @border-style-base @border-color-split; -// border-radius: @card-radius @card-radius 0 0; -// .clearfix(); - -// &-wrapper { -// display: flex; -// align-items: center; -// } - -// &-title { -// display: inline-block; -// flex: 1; -// padding: @card-head-padding 0; -// overflow: hidden; -// white-space: nowrap; -// text-overflow: ellipsis; - -// > .@{ant-prefix}-typography, -// > .@{ant-prefix}-typography-edit-content { -// left: 0; -// margin-top: 0; -// margin-bottom: 0; -// } -// } - -// .@{ant-prefix}-tabs-top { -// clear: both; -// margin-bottom: @card-head-tabs-margin-bottom; -// color: @text-color; -// font-weight: normal; -// font-size: @font-size-base; - -// &-bar { -// border-bottom: @border-width-base @border-style-base @border-color-split; -// } -// } -// } - -// &-extra { -// // https://stackoverflow.com/a/22429853/3040605 -// margin-left: auto; -// padding: @card-head-padding 0; -// color: @card-head-extra-color; -// font-weight: normal; -// font-size: @font-size-base; - -// .@{card-prefix-cls}-rtl & { -// margin-right: auto; -// margin-left: 0; -// } -// } - -// &-body { -// padding: @card-padding-base; -// .clearfix(); -// } - -// &-contain-grid &-body { -// display: flex; -// flex-wrap: wrap; -// } - -// &-contain-grid:not(&-loading) &-body { -// margin: -1px 0 0 -1px; -// padding: 0; -// } - -// &-grid { -// width: 33.33%; -// padding: @card-padding-base; -// border: 0; -// border-radius: 0; -// box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, -// 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, -// 0 1px 0 0 @border-color-split inset; -// transition: all 0.3s; - -// &-hoverable { -// &:hover { -// position: relative; -// z-index: 1; -// box-shadow: @card-shadow; -// } -// } -// } - -// &-contain-tabs > &-head &-head-title { -// min-height: @card-head-height - @card-head-padding; -// padding-bottom: 0; -// } - -// &-contain-tabs > &-head &-extra { -// padding-bottom: 0; -// } - -// &-bordered &-cover { -// margin-top: -1px; -// margin-right: -1px; -// margin-left: -1px; -// } - -// &-cover { -// > * { -// display: block; -// width: 100%; -// } - -// img { -// border-radius: @card-radius @card-radius 0 0; -// } -// } - -// &-actions { -// display: flex; -// margin: 0; -// padding: 0; -// list-style: none; -// background: @card-actions-background; -// border-top: @border-width-base @border-style-base @border-color-split; -// .clearfix(); - -// & > li { -// margin: @card-actions-li-margin; -// color: @text-color-secondary; -// text-align: center; - -// > span { -// position: relative; -// display: block; -// min-width: 32px; -// font-size: @font-size-base; -// line-height: @line-height-base; -// cursor: pointer; - -// &:hover { -// color: @primary-color; -// transition: color 0.3s; -// } - -// a:not(.@{ant-prefix}-btn), -// > .@{iconfont-css-prefix} { -// display: inline-block; -// width: 100%; -// color: @text-color-secondary; -// line-height: 22px; -// transition: color 0.3s; - -// &:hover { -// color: @primary-color; -// } -// } - -// > .@{iconfont-css-prefix} { -// font-size: @card-action-icon-size; -// line-height: 22px; -// } -// } - -// &:not(:last-child) { -// border-right: @border-width-base @border-style-base @border-color-split; - -// .@{card-prefix-cls}-rtl & { -// border-right: none; -// border-left: @border-width-base @border-style-base @border-color-split; -// } -// } -// } -// } - -// &-type-inner &-head { -// padding: 0 @card-padding-base; -// background: @background-color-light; - -// &-title { -// padding: @card-inner-head-padding 0; -// font-size: @font-size-base; -// } -// } - -// &-type-inner &-body { -// padding: 16px @card-padding-base; -// } - -// &-type-inner &-extra { -// padding: @card-inner-head-padding + 1.5px 0; -// } - -// &-meta { -// display: flex; -// margin: -4px 0; -// .clearfix(); - -// &-avatar { -// padding-right: 16px; - -// .@{card-prefix-cls}-rtl & { -// padding-right: 0; -// padding-left: 16px; -// } -// } - -// &-detail { -// overflow: hidden; - -// > div:not(:last-child) { -// margin-bottom: @margin-xs; -// } -// } - -// &-title { -// overflow: hidden; -// color: @card-head-color; -// font-weight: 500; -// font-size: @font-size-lg; -// white-space: nowrap; -// text-overflow: ellipsis; -// } - -// &-description { -// color: @text-color-secondary; -// } -// } - -// &-loading { -// overflow: hidden; -// } - -// &-loading &-body { -// user-select: none; -// } - -// &-loading-content { -// p { -// margin: 0; -// } -// } - -// &-loading-block { -// height: 14px; -// margin: 4px 0; -// background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min); -// background-size: 600% 600%; -// border-radius: @card-radius; -// animation: card-loading 1.4s ease infinite; -// } -// } - -// @keyframes card-loading { -// 0%, -// 100% { -// background-position: 0 50%; -// } - -// 50% { -// background-position: 100% 50%; -// } -// } - -// @import './size'; diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 9e89ea5737..612fd4cf5d 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; diff --git a/components/card/style/size.less b/components/card/style/size.less deleted file mode 100644 index 5fd131c446..0000000000 --- a/components/card/style/size.less +++ /dev/null @@ -1,20 +0,0 @@ -// .@{card-prefix-cls}-small { -// > .@{card-prefix-cls}-head { -// min-height: @card-head-height-sm; -// padding: 0 @card-padding-base-sm; -// font-size: @card-head-font-size-sm; - -// > .@{card-prefix-cls}-head-wrapper { -// > .@{card-prefix-cls}-head-title { -// padding: @card-head-padding-sm 0; -// } -// > .@{card-prefix-cls}-extra { -// padding: @card-head-padding-sm 0; -// font-size: @card-head-font-size-sm; -// } -// } -// } -// > .@{card-prefix-cls}-body { -// padding: @card-padding-base-sm; -// } -// } diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less deleted file mode 100644 index d697172af7..0000000000 --- a/components/carousel/style/index.less +++ /dev/null @@ -1,294 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @carousel-prefix-cls: ~'@{ant-prefix}-carousel'; - -// .@{carousel-prefix-cls} { -// .reset-component(); - -// .slick-slider { -// position: relative; -// display: block; -// box-sizing: border-box; -// touch-action: pan-y; -// -webkit-touch-callout: none; -// -webkit-tap-highlight-color: transparent; -// } - -// .slick-list { -// position: relative; -// display: block; -// margin: 0; -// padding: 0; -// overflow: hidden; - -// &:focus { -// outline: none; -// } - -// &.dragging { -// cursor: pointer; -// } - -// .slick-slide { -// pointer-events: none; - -// // https://github.com/ant-design/ant-design/issues/23294 -// input.@{ant-prefix}-radio-input, -// input.@{ant-prefix}-checkbox-input { -// visibility: hidden; -// } - -// &.slick-active { -// pointer-events: auto; - -// input.@{ant-prefix}-radio-input, -// input.@{ant-prefix}-checkbox-input { -// visibility: visible; -// } -// } - -// // fix Carousel content height not match parent node -// // when children is empty node -// // https://github.com/ant-design/ant-design/issues/25878 -// > div > div { -// vertical-align: bottom; -// } -// } -// } - -// .slick-slider .slick-track, -// .slick-slider .slick-list { -// transform: translate3d(0, 0, 0); -// touch-action: pan-y; -// } - -// .slick-track { -// position: relative; -// top: 0; -// left: 0; -// display: block; - -// &::before, -// &::after { -// display: table; -// content: ''; -// } - -// &::after { -// clear: both; -// } - -// .slick-loading & { -// visibility: hidden; -// } -// } - -// .slick-slide { -// display: none; -// float: left; -// height: 100%; -// min-height: 1px; - -// img { -// display: block; -// } - -// &.slick-loading img { -// display: none; -// } - -// &.dragging img { -// pointer-events: none; -// } -// } - -// .slick-initialized .slick-slide { -// display: block; -// } - -// .slick-loading .slick-slide { -// visibility: hidden; -// } - -// .slick-vertical .slick-slide { -// display: block; -// height: auto; -// } - -// .slick-arrow.slick-hidden { -// display: none; -// } - -// // Arrows -// .slick-prev, -// .slick-next { -// position: absolute; -// top: 50%; -// display: block; -// width: 20px; -// height: 20px; -// margin-top: -10px; -// padding: 0; -// color: transparent; -// font-size: 0; -// line-height: 0; -// background: transparent; -// border: 0; -// outline: none; -// cursor: pointer; - -// &:hover, -// &:focus { -// color: transparent; -// background: transparent; -// outline: none; - -// &::before { -// opacity: 1; -// } -// } - -// &.slick-disabled::before { -// opacity: 0.25; -// } -// } - -// .slick-prev { -// left: -25px; - -// &::before { -// content: '←'; -// } -// } - -// .slick-next { -// right: -25px; - -// &::before { -// content: '→'; -// } -// } - -// // Dots -// .slick-dots { -// position: absolute; -// right: 0; -// bottom: 0; -// left: 0; -// z-index: 15; -// display: flex !important; -// justify-content: center; -// margin-right: 15%; -// margin-left: 15%; -// padding-left: 0; -// list-style: none; - -// &-bottom { -// bottom: 12px; -// } - -// &-top { -// top: 12px; -// bottom: auto; -// } - -// li { -// position: relative; -// display: inline-block; -// flex: 0 1 auto; -// box-sizing: content-box; -// width: @carousel-dot-width; -// height: @carousel-dot-height; -// margin: 0 2px; -// margin-right: 3px; -// margin-left: 3px; -// padding: 0; -// text-align: center; -// text-indent: -999px; -// vertical-align: top; -// transition: all 0.5s; - -// button { -// display: block; -// width: 100%; -// height: @carousel-dot-height; -// padding: 0; -// color: transparent; -// font-size: 0; -// background: @component-background; -// border: 0; -// border-radius: 1px; -// outline: none; -// cursor: pointer; -// opacity: 0.3; -// transition: all 0.5s; - -// &:hover, -// &:focus { -// opacity: 0.75; -// } -// } - -// &.slick-active { -// width: @carousel-dot-active-width; - -// & button { -// background: @component-background; -// opacity: 1; -// } - -// &:hover, -// &:focus { -// opacity: 1; -// } -// } -// } -// } -// } - -// .@{ant-prefix}-carousel-vertical { -// .slick-dots { -// top: 50%; -// bottom: auto; -// flex-direction: column; -// width: @carousel-dot-height; -// height: auto; -// margin: 0; -// transform: translateY(-50%); - -// &-left { -// right: auto; -// left: 12px; -// } - -// &-right { -// right: 12px; -// left: auto; -// } - -// li { -// width: @carousel-dot-height; -// height: @carousel-dot-width; -// margin: 4px 2px; -// vertical-align: baseline; - -// button { -// width: @carousel-dot-height; -// height: @carousel-dot-width; -// } - -// &.slick-active { -// width: @carousel-dot-height; -// height: @carousel-dot-active-width; - -// button { -// width: @carousel-dot-height; -// height: @carousel-dot-active-width; -// } -// } -// } -// } -// } - -// @import './rtl'; diff --git a/components/carousel/style/index.tsx b/components/carousel/style/index.tsx index a889dfcea4..d0e3605708 100644 --- a/components/carousel/style/index.tsx +++ b/components/carousel/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/carousel/style/rtl.less b/components/carousel/style/rtl.less deleted file mode 100644 index 710682dd21..0000000000 --- a/components/carousel/style/rtl.less +++ /dev/null @@ -1,54 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @carousel-prefix-cls: ~'@{ant-prefix}-carousel'; - -// .@{carousel-prefix-cls} { -// &-rtl { -// direction: rtl; -// } - -// .slick-track { -// .@{carousel-prefix-cls}-rtl & { -// right: 0; -// left: auto; -// } -// } - -// .slick-prev { -// .@{carousel-prefix-cls}-rtl & { -// right: -25px; -// left: auto; - -// &::before { -// content: '→'; -// } -// } -// } - -// .slick-next { -// .@{carousel-prefix-cls}-rtl & { -// right: auto; -// left: -25px; - -// &::before { -// content: '←'; -// } -// } -// } - -// // Dots -// .slick-dots { -// .@{carousel-prefix-cls}-rtl& { -// flex-direction: row-reverse; -// } -// } -// } - -// .@{ant-prefix}-carousel-vertical { -// .slick-dots { -// .@{carousel-prefix-cls}-rtl& { -// flex-direction: column; -// } -// } -// } diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less deleted file mode 100644 index d85336c760..0000000000 --- a/components/cascader/style/index.less +++ /dev/null @@ -1,105 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; -// @import '../../input/style/mixin'; -// @import '../../checkbox/style/mixin'; - -// @cascader-prefix-cls: ~'@{ant-prefix}-cascader'; - -// .antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox'); - -// .@{cascader-prefix-cls} { -// width: 184px; - -// &-checkbox { -// top: 0; -// margin-right: @padding-xs; -// } - -// &-menus { -// display: flex; -// flex-wrap: nowrap; -// align-items: flex-start; - -// &.@{cascader-prefix-cls}-menu-empty { -// .@{cascader-prefix-cls}-menu { -// width: 100%; -// height: auto; -// } -// } -// } - -// &-menu { -// flex-grow: 1; -// min-width: 111px; -// height: 180px; -// margin: 0; -// margin: -@dropdown-edge-child-vertical-padding 0; -// padding: @cascader-dropdown-edge-child-vertical-padding 0; -// overflow: auto; -// vertical-align: top; -// list-style: none; -// border-right: @border-width-base @border-style-base @cascader-menu-border-color-split; -// -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857 - -// &-item { -// display: flex; -// flex-wrap: nowrap; -// align-items: center; -// padding: @cascader-dropdown-vertical-padding @control-padding-horizontal; -// overflow: hidden; -// line-height: @cascader-dropdown-line-height; -// white-space: nowrap; -// text-overflow: ellipsis; -// cursor: pointer; -// transition: all 0.3s; - -// &:hover { -// background: @item-hover-bg; -// } - -// &-disabled { -// color: @disabled-color; -// cursor: not-allowed; - -// &:hover { -// background: transparent; -// } -// } - -// .@{cascader-prefix-cls}-menu-empty & { -// color: @disabled-color; -// cursor: default; -// pointer-events: none; -// } - -// &-active:not(&-disabled) { -// &, -// &:hover { -// font-weight: @select-item-selected-font-weight; -// background-color: @cascader-item-selected-bg; -// } -// } - -// &-content { -// flex: auto; -// } - -// &-expand &-expand-icon, -// &-loading-icon { -// margin-left: @padding-xss; -// color: @text-color-secondary; -// font-size: 10px; - -// .@{cascader-prefix-cls}-menu-item-disabled& { -// color: @disabled-color; -// } -// } - -// &-keyword { -// color: @highlight-color; -// } -// } -// } -// } - -// @import './rtl'; diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index e91db4b9ad..0b6c262cb7 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import { getStyle as getCheckboxStyle } from '../../checkbox/style'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook } from '../../theme'; diff --git a/components/cascader/style/rtl.less b/components/cascader/style/rtl.less deleted file mode 100644 index c70bf1dd3a..0000000000 --- a/components/cascader/style/rtl.less +++ /dev/null @@ -1,19 +0,0 @@ -// We can not import reference of `./index` directly since it will make dead loop in less -@import (reference) '../../style/themes/index'; -@cascader-prefix-cls: ~'@{ant-prefix}-cascader'; - -.@{cascader-prefix-cls}-rtl { - .@{cascader-prefix-cls}-menu-item { - &-expand-icon, - &-loading-icon { - margin-right: @padding-xss; - margin-left: 0; - } - } - - .@{cascader-prefix-cls}-checkbox { - top: 0; - margin-right: 0; - margin-left: @padding-xs; - } -} diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less deleted file mode 100644 index 497c663338..0000000000 --- a/components/checkbox/style/index.less +++ /dev/null @@ -1,6 +0,0 @@ -// @import '../../style/themes/index'; -// @import './mixin'; - -// .antCheckboxFn(); - -// @import './rtl'; diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx index dd8e2e27b9..c02df639b0 100644 --- a/components/checkbox/style/index.tsx +++ b/components/checkbox/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import { Keyframes } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme'; diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less deleted file mode 100644 index ae4a39d949..0000000000 --- a/components/checkbox/style/mixin.less +++ /dev/null @@ -1,241 +0,0 @@ -@import '../../style/mixins/index'; - -.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') { - @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner'; - // 一般状态 - .@{checkbox-prefix-cls} { - .reset-component(); - - position: relative; - top: 0.2em; - line-height: 1; - white-space: nowrap; - outline: none; - cursor: pointer; - - .@{checkbox-prefix-cls}-wrapper:hover &-inner, - &:hover &-inner, - &-input:focus + &-inner { - border-color: @checkbox-color; - } - - &-checked::after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 1px solid @checkbox-color; - border-radius: @border-radius-base; - visibility: hidden; - animation: antCheckboxEffect 0.36s ease-in-out; - animation-fill-mode: backwards; - content: ''; - } - - &:hover::after, - .@{checkbox-prefix-cls}-wrapper:hover &::after { - visibility: visible; - } - - &-inner { - position: relative; - top: 0; - left: 0; - display: block; - width: @checkbox-size; - height: @checkbox-size; - direction: ltr; - background-color: @checkbox-check-bg; - border: @checkbox-border-width @border-style-base @border-color-base; - border-radius: @checkbox-border-radius; - // Fix IE checked style - // https://github.com/ant-design/ant-design/issues/12597 - border-collapse: separate; - transition: all 0.3s; - - &::after { - @check-width: (@checkbox-size / 14) * 5px; - @check-height: (@checkbox-size / 14) * 8px; - - position: absolute; - top: 50%; - // https://github.com/ant-design/ant-design/pull/19452 - // https://github.com/ant-design/ant-design/pull/31726 - left: 21.5%; - display: table; - width: @check-width; - height: @check-height; - border: 2px solid @checkbox-check-color; - border-top: 0; - border-left: 0; - transform: rotate(45deg) scale(0) translate(-50%, -50%); - opacity: 0; - transition: all 0.1s @ease-in-back, opacity 0.1s; - content: ' '; - } - } - - &-input { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - width: 100%; - height: 100%; - cursor: pointer; - opacity: 0; - } - } - - // 选中状态 - .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after { - position: absolute; - display: table; - border: 2px solid @checkbox-check-color; - border-top: 0; - border-left: 0; - transform: rotate(45deg) scale(1) translate(-50%, -50%); - opacity: 1; - transition: all 0.2s @ease-out-back 0.1s; - content: ' '; - } - - .@{checkbox-prefix-cls}-checked { - .@{checkbox-inner-prefix-cls} { - background-color: @checkbox-color; - border-color: @checkbox-color; - } - } - - .@{checkbox-prefix-cls}-disabled { - cursor: not-allowed; - - &.@{checkbox-prefix-cls}-checked { - .@{checkbox-inner-prefix-cls}::after { - border-color: @disabled-color; - animation-name: none; - } - } - - .@{checkbox-prefix-cls}-input { - cursor: not-allowed; - pointer-events: none; - } - - .@{checkbox-inner-prefix-cls} { - background-color: @input-disabled-bg; - border-color: @border-color-base !important; - - &::after { - border-color: @input-disabled-bg; - border-collapse: separate; - animation-name: none; - } - } - - & + span { - color: @disabled-color; - cursor: not-allowed; - } - - // Not show highlight border of checkbox when disabled - &:hover::after, - .@{checkbox-prefix-cls}-wrapper:hover &::after { - visibility: hidden; - } - } - - .@{checkbox-prefix-cls}-wrapper { - .reset-component(); - display: inline-flex; - align-items: baseline; - line-height: unset; - cursor: pointer; - - &::after { - display: inline-block; - width: 0; - overflow: hidden; - content: '\a0'; - } - - &.@{checkbox-prefix-cls}-wrapper-disabled { - cursor: not-allowed; - } - - & + & { - margin-left: 8px; - } - - &&-in-form-item { - input[type='checkbox'] { - width: 14px; - height: 14px; - } - } - } - - .@{checkbox-prefix-cls} + span { - padding-right: 8px; - padding-left: 8px; - } - - .@{checkbox-prefix-cls}-group { - .reset-component(); - display: inline-block; - - &-item { - margin-right: @checkbox-group-item-margin-right; - - &:last-child { - margin-right: 0; - } - } - - &-item + &-item { - margin-left: 0; - } - } - - // 半选状态 - .@{checkbox-prefix-cls}-indeterminate { - .@{checkbox-inner-prefix-cls} { - background-color: @checkbox-check-bg; - border-color: @border-color-base; - } - .@{checkbox-inner-prefix-cls}::after { - @indeterminate-width: @checkbox-size - 8px; - @indeterminate-height: @checkbox-size - 8px; - - top: 50%; - left: 50%; - width: @indeterminate-width; - height: @indeterminate-height; - background-color: @checkbox-color; - border: 0; - transform: translate(-50%, -50%) scale(1); - opacity: 1; - content: ' '; - } - - &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after { - background-color: @disabled-color; - border-color: @disabled-color; - } - } -} - -@keyframes antCheckboxEffect { - 0% { - transform: scale(1); - opacity: 0.5; - } - - 100% { - transform: scale(1.6); - opacity: 0; - } -} diff --git a/components/checkbox/style/rtl.less b/components/checkbox/style/rtl.less deleted file mode 100644 index fa15b4df1a..0000000000 --- a/components/checkbox/style/rtl.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../style/mixins/index'; - -.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') { - .@{checkbox-prefix-cls}-rtl { - direction: rtl; - } - - .@{checkbox-prefix-cls}-group { - &-item { - .@{checkbox-prefix-cls}-group-rtl & { - margin-right: 0; - margin-left: @checkbox-group-item-margin-right; - } - - &:last-child { - .@{checkbox-prefix-cls}-group-rtl & { - margin-left: 0 !important; - } - } - } - - &-item + &-item { - .@{checkbox-prefix-cls}-group-rtl & { - margin-left: @checkbox-group-item-margin-right; - } - } - } -} diff --git a/components/col/style/index.tsx b/components/col/style/index.tsx deleted file mode 100644 index 2127e6804d..0000000000 --- a/components/col/style/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import '../../style/index.less'; - -// style dependencies -// deps-lint-skip: grid -import '../../grid/style'; diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less deleted file mode 100644 index 428ccbe76b..0000000000 --- a/components/collapse/style/index.less +++ /dev/null @@ -1,162 +0,0 @@ -// @import '../../style/themes/index'; -// @import '../../style/mixins/index'; - -// @collapse-prefix-cls: ~'@{ant-prefix}-collapse'; - -// .@{collapse-prefix-cls} { -// .reset-component(); - -// background-color: @collapse-header-bg; -// border: @border-width-base @border-style-base @border-color-base; -// border-bottom: 0; -// border-radius: @collapse-panel-border-radius; - -// & > &-item { -// border-bottom: @border-width-base @border-style-base @border-color-base; - -// &:last-child { -// &, -// & > .@{collapse-prefix-cls}-header { -// border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius; -// } -// } - -// > .@{collapse-prefix-cls}-header { -// position: relative; // Compatible with old version of antd, should remove in next version -// display: flex; -// flex-wrap: nowrap; -// align-items: flex-start; -// padding: @collapse-header-padding; -// color: @heading-color; -// line-height: @line-height-base; -// cursor: pointer; -// transition: all 0.3s, visibility 0s; - -// .@{collapse-prefix-cls}-arrow { -// display: inline-block; -// margin-right: @margin-sm; -// font-size: @font-size-sm; -// vertical-align: -1px; - -// & svg { -// transition: transform 0.24s; -// } -// } - -// .@{collapse-prefix-cls}-extra { -// margin-left: auto; -// } - -// &:focus { -// outline: none; -// } -// } - -// .@{collapse-prefix-cls}-header-collapsible-only { -// cursor: default; -// .@{collapse-prefix-cls}-header-text { -// cursor: pointer; -// } -// } - -// &.@{collapse-prefix-cls}-no-arrow { -// > .@{collapse-prefix-cls}-header { -// padding-left: @padding-sm; -// } -// } -// } - -// // Expand Icon end -// &-icon-position-end { -// & > .@{collapse-prefix-cls}-item { -// > .@{collapse-prefix-cls}-header { -// position: relative; -// padding: @collapse-header-padding; -// padding-right: @collapse-header-padding-extra; - -// .@{collapse-prefix-cls}-arrow { -// position: absolute; -// top: 50%; -// right: @padding-md; -// left: auto; -// margin: 0; -// transform: translateY(-50%); -// } -// } -// } -// } - -// &-content { -// color: @text-color; -// background-color: @collapse-content-bg; -// border-top: @border-width-base @border-style-base @border-color-base; - -// & > &-box { -// padding: @collapse-content-padding; -// } - -// &-hidden { -// display: none; -// } -// } - -// &-item:last-child { -// > .@{collapse-prefix-cls}-content { -// border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius; -// } -// } - -// &-borderless { -// background-color: @collapse-header-bg; -// border: 0; -// } - -// &-borderless > &-item { -// border-bottom: 1px solid @border-color-base; -// } - -// &-borderless > &-item:last-child, -// &-borderless > &-item:last-child &-header { -// border-radius: 0; -// } - -// // hide the last border-bottom in borderless mode -// &-borderless > &-item:last-child { -// border-bottom: 0; -// } - -// &-borderless > &-item > &-content { -// background-color: transparent; -// border-top: 0; -// } - -// &-borderless > &-item > &-content > &-content-box { -// padding-top: 4px; -// } - -// &-ghost { -// background-color: transparent; -// border: 0; -// > .@{collapse-prefix-cls}-item { -// border-bottom: 0; -// > .@{collapse-prefix-cls}-content { -// background-color: transparent; -// border-top: 0; -// > .@{collapse-prefix-cls}-content-box { -// padding-top: 12px; -// padding-bottom: 12px; -// } -// } -// } -// } - -// & &-item-disabled > &-header { -// &, -// & > .arrow { -// color: @disabled-color; -// cursor: not-allowed; -// } -// } -// } - -// @import './rtl'; diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx index 77515b4e2c..67e74b6c3b 100644 --- a/components/collapse/style/index.tsx +++ b/components/collapse/style/index.tsx @@ -1,4 +1,3 @@ -// deps-lint-skip-all import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../theme'; diff --git a/components/collapse/style/rtl.less b/components/collapse/style/rtl.less deleted file mode 100644 index d4032dd4b4..0000000000 --- a/components/collapse/style/rtl.less +++ /dev/null @@ -1,68 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@collapse-prefix-cls: ~'@{ant-prefix}-collapse'; - -.@{collapse-prefix-cls} { - &-rtl { - direction: rtl; - - // Expand Icon end - &.@{collapse-prefix-cls}.@{collapse-prefix-cls}-icon-position-end { - & > .@{collapse-prefix-cls}-item { - > .@{collapse-prefix-cls}-header { - position: relative; - padding: @collapse-header-padding; - padding-left: @collapse-header-padding-extra; - - .@{collapse-prefix-cls}-arrow { - position: absolute; - top: 50%; - right: auto; - left: @padding-md; - margin: 0; - transform: translateY(-50%); - } - } - } - } - } - - & > &-item { - > .@{collapse-prefix-cls}-header { - .@{collapse-prefix-cls}-rtl & { - padding: @collapse-header-padding; - padding-right: @collapse-header-padding-extra; - } - - .@{collapse-prefix-cls}-arrow { - .@{collapse-prefix-cls}-rtl& { - margin-right: 0; - margin-left: @margin-sm; - } - - & svg { - .@{collapse-prefix-cls}-rtl& { - transform: rotate(180deg); - } - } - } - - .@{collapse-prefix-cls}-extra { - .@{collapse-prefix-cls}-rtl& { - margin-right: auto; - margin-left: 0; - } - } - } - - &.@{collapse-prefix-cls}-no-arrow { - > .@{collapse-prefix-cls}-header { - .@{collapse-prefix-cls}-rtl& { - padding-right: @padding-sm; - padding-left: 0; - } - } - } - } -} diff --git a/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap deleted file mode 100644 index 524768aef5..0000000000 --- a/components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap +++ /dev/null @@ -1,660 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders ./components/comment/demo/basic.md extend context correctly 1`] = ` -
-
-
- - Han Solo - -
-
-
- - - Han Solo - - - - - a few seconds ago - -
-
-
-
- -
- -
-
-
- -
-
-

- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -

-
-
    -
  • - - - - - - 0 - - -
    -
    -
    -
    - -
    - -
    -
    -
    -
    • -
  • - - - - - - 0 - - -
    -
    -
    -
    - -
    - -
    -
    -
    -
    • -
  • - - Reply to - -
    • -
-
-
-
-`; - -exports[`renders ./components/comment/demo/editor.md extend context correctly 1`] = ` -
-
-
- - Han Solo - -
-
-
-
-
-
-
-