mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
chore: rm component less file (#36244)
* chore: rm component less file * refactor: less file * refactor: rm less * refactor: rm page-header and comment * chore: rm less in components * chore: update dist config * chore: update image test * chore: update dekko * chore: rm lib dekko * chore: update dist dekko * chore: udpate bundle size * test: update snapshot * test: rm theme test * test: update snapshot * test: update snapshot * chore: copy reset.css * test: update image test * chore: copy reset.css to es * chore: update site script
This commit is contained in:
MadCcc
GitHub
parent
f36b6849df
commit
8e27cf986f
@ -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";`,
|
||||
// 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'),
|
||||
);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
||||
} else {
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `default-theme.js`),
|
||||
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Build ${theme}.js: dist/${theme}-theme.js, for less-loader
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `theme.js`),
|
||||
`const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
|
||||
{
|
||||
flag: 'a',
|
||||
},
|
||||
);
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `${theme}-theme.js`),
|
||||
generateThemeFileContent(theme),
|
||||
);
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
|
||||
}
|
||||
|
||||
function finalizeDist() {
|
||||
if (fs.existsSync(path.join(__dirname, './dist'))) {
|
||||
// Build less entry file: dist/antd.less
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', 'antd.less'),
|
||||
'@import "../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,
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
components/**/*.js
|
||||
components/**/*.jsx
|
||||
components/version/token.tsx
|
||||
!components/*/__tests__/**/*.js
|
||||
!components/*/demo/*
|
||||
!.*.js
|
||||
|
||||
71
.github/workflows/test.yml
vendored
71
.github/workflows/test.yml
vendored
@ -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
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -18,7 +18,6 @@ Array [
|
||||
"Checkbox",
|
||||
"Col",
|
||||
"Collapse",
|
||||
"Comment",
|
||||
"ConfigProvider",
|
||||
"DatePicker",
|
||||
"Descriptions",
|
||||
@ -36,7 +35,6 @@ Array [
|
||||
"Mentions",
|
||||
"Menu",
|
||||
"Modal",
|
||||
"PageHeader",
|
||||
"Pagination",
|
||||
"Popconfirm",
|
||||
"Popover",
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
|
||||
// .@{ant-prefix}-affix {
|
||||
// position: fixed;
|
||||
// z-index: @zindex-affix;
|
||||
// }
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../select/style';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -1,4 +1,3 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import type { FullToken, GenerateStyle } from '../../theme';
|
||||
|
||||
@ -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;
|
||||
// }
|
||||
// }
|
||||
@ -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';
|
||||
@ -1,4 +1,3 @@
|
||||
// deps-lint-skip-all
|
||||
import type { FullToken, GenerateStyle } from '../../theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
|
||||
|
||||
|
||||
@ -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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import './mixin';
|
||||
|
||||
// .antCheckboxFn();
|
||||
|
||||
// @import './rtl';
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: grid
|
||||
import '../../grid/style';
|
||||
@ -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';
|
||||
@ -1,4 +1,3 @@
|
||||
// deps-lint-skip-all
|
||||
import type { FullToken, GenerateStyle } from '../../theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../theme';
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,660 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/comment/demo/basic.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
<span>
|
||||
a few seconds ago
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
2016-11-22 00:00:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="comment-action"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
Like
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="dislike"
|
||||
class="anticon anticon-dislike"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="dislike"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 00-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 01-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0133.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0119.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0119.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0119.6 43c0 19.1-11 37.5-28.8 48.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="comment-action"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
Dislike
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/comment/demo/editor.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<textarea
|
||||
class="ant-input"
|
||||
rows="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Add Comment
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/comment/demo/list.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-list ant-list-split comment-list"
|
||||
>
|
||||
<div
|
||||
class="ant-list-header"
|
||||
>
|
||||
2 replies
|
||||
</div>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<ul
|
||||
class="ant-list-items"
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<img
|
||||
alt="comment-avatar"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
Han Solo
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
<span>
|
||||
a day ago
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
2016-11-21 00:00:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<img
|
||||
alt="comment-avatar"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
Han Solo
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
<span>
|
||||
2 days ago
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
2016-11-20 00:00:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/comment/demo/nested.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,540 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
<span>
|
||||
a few seconds ago
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="comment-action"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="dislike"
|
||||
class="anticon anticon-dislike"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="dislike"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 00-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 01-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0133.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0119.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0119.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0119.6 43c0 19.1-11 37.5-28.8 48.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="comment-action"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<textarea
|
||||
class="ant-input"
|
||||
rows="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Add Comment
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/comment/demo/list.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-list ant-list-split comment-list"
|
||||
>
|
||||
<div
|
||||
class="ant-list-header"
|
||||
>
|
||||
2 replies
|
||||
</div>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<ul
|
||||
class="ant-list-items"
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<img
|
||||
alt="comment-avatar"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
Han Solo
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
<span>
|
||||
a day ago
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<img
|
||||
alt="comment-avatar"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
Han Solo
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
<span>
|
||||
2 days ago
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-avatar"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-circle ant-avatar-image"
|
||||
>
|
||||
<img
|
||||
alt="Han Solo"
|
||||
src="https://joeschmoe.io/api/v1/random"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-comment-actions"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
Reply to
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,57 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Comment rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-comment ant-comment-rtl"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Comment should support empty actions 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-author"
|
||||
>
|
||||
<span
|
||||
class="ant-comment-content-author-name"
|
||||
>
|
||||
<a>
|
||||
Han Solo
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="ant-comment-content-author-time"
|
||||
>
|
||||
YYYY-MM-DD HH:mm:ss
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,3 +0,0 @@
|
||||
import { extendTest } from '../../../tests/shared/demoTest';
|
||||
|
||||
extendTest('comment');
|
||||
@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('comment');
|
||||
@ -1,5 +0,0 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('Comment image', () => {
|
||||
imageDemoTest('comment');
|
||||
});
|
||||
@ -1,28 +0,0 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Comment from '../index';
|
||||
|
||||
describe('Comment', () => {
|
||||
mountTest(Comment);
|
||||
rtlTest(Comment);
|
||||
|
||||
it('should support empty actions', () => {
|
||||
const wrapper = mount(
|
||||
<Comment
|
||||
actions={[]}
|
||||
author={<a>Han Solo</a>}
|
||||
content={
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
}
|
||||
datetime="YYYY-MM-DD HH:mm:ss"
|
||||
/>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -1,93 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本评论
|
||||
en-US: Basic comment
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
一个基本的评论组件，带有作者、头像、时间和操作。
|
||||
|
||||
## en-US
|
||||
|
||||
A basic comment with author, avatar, time and actions.
|
||||
|
||||
```tsx
|
||||
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Comment, Tooltip } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import React, { createElement, useState } from 'react';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [likes, setLikes] = useState(0);
|
||||
const [dislikes, setDislikes] = useState(0);
|
||||
const [action, setAction] = useState<string | null>(null);
|
||||
|
||||
const like = () => {
|
||||
setLikes(1);
|
||||
setDislikes(0);
|
||||
setAction('liked');
|
||||
};
|
||||
|
||||
const dislike = () => {
|
||||
setLikes(0);
|
||||
setDislikes(1);
|
||||
setAction('disliked');
|
||||
};
|
||||
|
||||
const actions = [
|
||||
<Tooltip key="comment-basic-like" title="Like">
|
||||
<span onClick={like}>
|
||||
{createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
|
||||
<span className="comment-action">{likes}</span>
|
||||
</span>
|
||||
</Tooltip>,
|
||||
<Tooltip key="comment-basic-dislike" title="Dislike">
|
||||
<span onClick={dislike}>
|
||||
{React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
|
||||
<span className="comment-action">{dislikes}</span>
|
||||
</span>
|
||||
</Tooltip>,
|
||||
<span key="comment-basic-reply-to">Reply to</span>,
|
||||
];
|
||||
|
||||
return (
|
||||
<Comment
|
||||
actions={actions}
|
||||
author={<a>Han Solo</a>}
|
||||
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
|
||||
content={
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
}
|
||||
datetime={
|
||||
<Tooltip title={dayjs().format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{dayjs().fromNow()}</span>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
/* tile uploaded pictures */
|
||||
.comment-action {
|
||||
padding-left: 8px;
|
||||
cursor: 'auto';
|
||||
}
|
||||
|
||||
[class*='-col-rtl'] .comment-action {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
```
|
||||
@ -1,107 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 回复框
|
||||
en-US: Reply Editor
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。
|
||||
|
||||
## en-US
|
||||
|
||||
Comment can be used as an editor, so the user can customize the contents of the component.
|
||||
|
||||
```tsx
|
||||
import { Avatar, Button, Comment, Form, Input, List } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface CommentItem {
|
||||
author: string;
|
||||
avatar: string;
|
||||
content: React.ReactNode;
|
||||
datetime: string;
|
||||
}
|
||||
|
||||
interface EditorProps {
|
||||
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
||||
onSubmit: () => void;
|
||||
submitting: boolean;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const CommentList = ({ comments }: { comments: CommentItem[] }) => (
|
||||
<List
|
||||
dataSource={comments}
|
||||
header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
|
||||
itemLayout="horizontal"
|
||||
renderItem={props => <Comment {...props} />}
|
||||
/>
|
||||
);
|
||||
|
||||
const Editor = ({ onChange, onSubmit, submitting, value }: EditorProps) => (
|
||||
<>
|
||||
<Form.Item>
|
||||
<TextArea rows={4} onChange={onChange} value={value} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
|
||||
Add Comment
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [comments, setComments] = useState<CommentItem[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!value) return;
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setSubmitting(false);
|
||||
setValue('');
|
||||
setComments([
|
||||
...comments,
|
||||
{
|
||||
author: 'Han Solo',
|
||||
avatar: 'https://joeschmoe.io/api/v1/random',
|
||||
content: <p>{value}</p>,
|
||||
datetime: dayjs().fromNow(),
|
||||
},
|
||||
]);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setValue(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{comments.length > 0 && <CommentList comments={comments} />}
|
||||
<Comment
|
||||
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
|
||||
content={
|
||||
<Editor
|
||||
onChange={handleChange}
|
||||
onSubmit={handleSubmit}
|
||||
submitting={submitting}
|
||||
value={value}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 配合 List 组件
|
||||
en-US: Usage with list
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
配合 List 组件展现评论列表。
|
||||
|
||||
## en-US
|
||||
|
||||
Displaying a series of comments using the `antd` List Component.
|
||||
|
||||
```tsx
|
||||
import { Comment, List, Tooltip } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import React from 'react';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
const data = [
|
||||
{
|
||||
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
|
||||
author: 'Han Solo',
|
||||
avatar: 'https://joeschmoe.io/api/v1/random',
|
||||
content: (
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
),
|
||||
datetime: (
|
||||
<Tooltip title={dayjs().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{dayjs().subtract(1, 'days').fromNow()}</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
|
||||
author: 'Han Solo',
|
||||
avatar: 'https://joeschmoe.io/api/v1/random',
|
||||
content: (
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
),
|
||||
datetime: (
|
||||
<Tooltip title={dayjs().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{dayjs().subtract(2, 'days').fromNow()}</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<List
|
||||
className="comment-list"
|
||||
header={`${data.length} replies`}
|
||||
itemLayout="horizontal"
|
||||
dataSource={data}
|
||||
renderItem={item => (
|
||||
<li>
|
||||
<Comment
|
||||
actions={item.actions}
|
||||
author={item.author}
|
||||
avatar={item.avatar}
|
||||
content={item.content}
|
||||
datetime={item.datetime}
|
||||
/>
|
||||
</li>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -1,46 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 嵌套评论
|
||||
en-US: Nested comments
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
评论可以嵌套。
|
||||
|
||||
## en-US
|
||||
|
||||
Comments can be nested.
|
||||
|
||||
```tsx
|
||||
import { Avatar, Comment } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const ExampleComment: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
|
||||
<Comment
|
||||
actions={[<span key="comment-nested-reply-to">Reply to</span>]}
|
||||
author={<a>Han Solo</a>}
|
||||
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
|
||||
content={
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design
|
||||
resources (Sketch and Axure).
|
||||
</p>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Comment>
|
||||
);
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ExampleComment>
|
||||
<ExampleComment>
|
||||
<ExampleComment />
|
||||
<ExampleComment />
|
||||
</ExampleComment>
|
||||
</ExampleComment>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
@ -1,24 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Comment
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg
|
||||
---
|
||||
|
||||
A comment displays user feedback and discussion to website content.
|
||||
|
||||
## When To Use
|
||||
|
||||
Comments can be used to enable discussions on an entity such as a page, blog post, issue or other.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | List of action items rendered below the comment content | Array<ReactNode> | - | |
|
||||
| author | The element to display as the comment author | ReactNode | - | |
|
||||
| avatar | The element to display as the comment avatar - generally an antd Avatar or src | ReactNode | - | |
|
||||
| children | Nested comments should be provided as children of the Comment | ReactNode | - | |
|
||||
| content | The main content of the comment | ReactNode | - | |
|
||||
| datetime | A datetime element containing the time to be displayed | ReactNode | - | |
|
||||
@ -1,94 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
|
||||
export interface CommentProps {
|
||||
/** List of action items rendered below the comment content */
|
||||
actions?: Array<React.ReactNode>;
|
||||
/** The element to display as the comment author. */
|
||||
author?: React.ReactNode;
|
||||
/** The element to display as the comment avatar - generally an antd Avatar */
|
||||
avatar?: React.ReactNode;
|
||||
/** ClassName of comment */
|
||||
className?: string;
|
||||
/** The main content of the comment */
|
||||
content: React.ReactNode;
|
||||
/** Nested comments should be provided as children of the Comment */
|
||||
children?: React.ReactNode;
|
||||
/** Comment prefix defaults to '.ant-comment' */
|
||||
prefixCls?: string;
|
||||
/** Additional style for the comment */
|
||||
style?: React.CSSProperties;
|
||||
/** A datetime element containing the time to be displayed */
|
||||
datetime?: React.ReactNode;
|
||||
}
|
||||
|
||||
const Comment: React.FC<CommentProps> = ({
|
||||
actions,
|
||||
author,
|
||||
avatar,
|
||||
children,
|
||||
className,
|
||||
content,
|
||||
prefixCls: customizePrefixCls,
|
||||
datetime,
|
||||
...otherProps
|
||||
}) => {
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
|
||||
const renderNested = (prefixCls: string, nestedChildren: any) => (
|
||||
<div className={classNames(`${prefixCls}-nested`)}>{nestedChildren}</div>
|
||||
);
|
||||
|
||||
const prefixCls = getPrefixCls('comment', customizePrefixCls);
|
||||
|
||||
const avatarDom = avatar ? (
|
||||
<div className={`${prefixCls}-avatar`}>
|
||||
{typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const actionDom =
|
||||
actions && actions.length ? (
|
||||
<ul className={`${prefixCls}-actions`}>
|
||||
{actions.map((action, index) => (
|
||||
<li key={`action-${index}`}>{action}</li> // eslint-disable-line react/no-array-index-key
|
||||
))}
|
||||
</ul>
|
||||
) : null;
|
||||
|
||||
const authorContent = (author || datetime) && (
|
||||
<div className={`${prefixCls}-content-author`}>
|
||||
{author && <span className={`${prefixCls}-content-author-name`}>{author}</span>}
|
||||
{datetime && <span className={`${prefixCls}-content-author-time`}>{datetime}</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
const contentDom = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
{authorContent}
|
||||
<div className={`${prefixCls}-content-detail`}>{content}</div>
|
||||
{actionDom}
|
||||
</div>
|
||||
);
|
||||
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<div {...otherProps} className={cls}>
|
||||
<div className={`${prefixCls}-inner`}>
|
||||
{avatarDom}
|
||||
{contentDom}
|
||||
</div>
|
||||
{children ? renderNested(prefixCls, children) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comment;
|
||||
@ -1,25 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Comment
|
||||
subtitle: 评论
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg
|
||||
---
|
||||
|
||||
对网站内容的反馈、评价和讨论。
|
||||
|
||||
## 何时使用
|
||||
|
||||
评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - | |
|
||||
| author | 要显示为注释作者的元素 | ReactNode | - | |
|
||||
| avatar | 要显示为评论头像的元素 - 通常是 antd Avatar 或者 src | ReactNode | - | |
|
||||
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - | |
|
||||
| content | 评论的主要内容 | ReactNode | - | |
|
||||
| datetime | 展示时间描述 | ReactNode | - | |
|
||||
@ -1,105 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@comment-prefix-cls: ~'@{ant-prefix}-comment';
|
||||
|
||||
.@{comment-prefix-cls} {
|
||||
position: relative;
|
||||
background-color: @comment-bg;
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
padding: @comment-padding-base;
|
||||
}
|
||||
|
||||
&-avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-right: @margin-sm;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px;
|
||||
font-size: @comment-font-size-base;
|
||||
word-wrap: break-word;
|
||||
|
||||
&-author {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: @margin-xss;
|
||||
font-size: @comment-font-size-base;
|
||||
|
||||
& > a,
|
||||
& > span {
|
||||
padding-right: @padding-xs;
|
||||
font-size: @comment-font-size-sm;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: @comment-author-name-color;
|
||||
font-size: @comment-font-size-base;
|
||||
transition: color 0.3s;
|
||||
|
||||
> * {
|
||||
color: @comment-author-name-color;
|
||||
|
||||
&:hover {
|
||||
color: @comment-author-name-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-time {
|
||||
color: @comment-author-time-color;
|
||||
white-space: nowrap;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-detail p {
|
||||
margin-bottom: @comment-content-detail-p-margin-bottom;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
margin-top: @comment-actions-margin-top;
|
||||
margin-bottom: @comment-actions-margin-bottom;
|
||||
padding-left: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
color: @comment-action-color;
|
||||
|
||||
> span {
|
||||
margin-right: 10px;
|
||||
color: @comment-action-color;
|
||||
font-size: @comment-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: @comment-action-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-nested {
|
||||
margin-left: @comment-nest-indent;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -1,51 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@comment-prefix-cls: ~'@{ant-prefix}-comment';
|
||||
|
||||
.@{comment-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-avatar {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-author {
|
||||
& > a,
|
||||
& > span {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> li {
|
||||
> span {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-nested {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: @comment-nest-indent;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12548,293 +12548,6 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment configProvider 1`] = `
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="config-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment configProvider componentDisabled 1`] = `
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="config-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment configProvider componentSize large 1`] = `
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="config-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment configProvider componentSize middle 1`] = `
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="config-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="config-comment"
|
||||
>
|
||||
<div
|
||||
class="config-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content"
|
||||
>
|
||||
<div
|
||||
class="config-comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment configProvider virtual and dropdownMatchSelectWidth 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment normal 1`] = `
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-comment-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-comment"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content"
|
||||
>
|
||||
<div
|
||||
class="ant-comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Comment prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Comment"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment-inner"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment-content"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment-content-detail"
|
||||
>
|
||||
Bamboo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="prefix-Comment-nested"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment-inner"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment-content"
|
||||
>
|
||||
<div
|
||||
class="prefix-Comment-content-detail"
|
||||
>
|
||||
Light
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = `
|
||||
<div>
|
||||
<div
|
||||
@ -18894,167 +18607,6 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader configProvider 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="config-page-header"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading-left"
|
||||
>
|
||||
<span
|
||||
class="config-page-header-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader configProvider componentDisabled 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="config-page-header config-page-header-ghost"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading-left"
|
||||
>
|
||||
<span
|
||||
class="config-page-header-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader configProvider componentSize large 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="config-page-header config-page-header-ghost"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading-left"
|
||||
>
|
||||
<span
|
||||
class="config-page-header-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader configProvider componentSize middle 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="config-page-header config-page-header-ghost"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="config-page-header-heading-left"
|
||||
>
|
||||
<span
|
||||
class="config-page-header-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader configProvider virtual and dropdownMatchSelectWidth 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-page-header ant-page-header-ghost"
|
||||
>
|
||||
<div
|
||||
class="ant-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="ant-page-header-heading-left"
|
||||
>
|
||||
<span
|
||||
class="ant-page-header-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader normal 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-page-header ant-page-header-ghost"
|
||||
>
|
||||
<div
|
||||
class="ant-page-header-heading"
|
||||
>
|
||||
<div
|
||||
class="ant-page-header-heading-left"
|
||||
>
|
||||
<span
|
||||
class="ant-page-header-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components PageHeader prefixCls 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="prefix-PageHeader prefix-PageHeader-ghost"
|
||||
>
|
||||
<div
|
||||
class="prefix-PageHeader-heading"
|
||||
>
|
||||
<div
|
||||
class="prefix-PageHeader-heading-left"
|
||||
>
|
||||
<span
|
||||
class="prefix-PageHeader-heading-title"
|
||||
title="pageHeader"
|
||||
>
|
||||
pageHeader
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
<div>
|
||||
<ul
|
||||
|
||||
@ -17,7 +17,6 @@ import Carousel from '../../carousel';
|
||||
import Cascader from '../../cascader';
|
||||
import Checkbox from '../../checkbox';
|
||||
import Collapse from '../../collapse';
|
||||
import Comment from '../../comment';
|
||||
import DatePicker from '../../date-picker';
|
||||
import Divider from '../../divider';
|
||||
import Drawer from '../../drawer';
|
||||
@ -31,7 +30,6 @@ import Layout from '../../layout';
|
||||
import List from '../../list';
|
||||
import Menu from '../../menu';
|
||||
import Modal from '../../modal';
|
||||
import PageHeader from '../../page-header';
|
||||
import Pagination from '../../pagination';
|
||||
import Popconfirm from '../../popconfirm';
|
||||
import Popover from '../../popover';
|
||||
@ -239,13 +237,6 @@ describe('ConfigProvider', () => {
|
||||
</Collapse>
|
||||
));
|
||||
|
||||
// Comment
|
||||
testPair('Comment', props => (
|
||||
<Comment {...props} content="Bamboo">
|
||||
<Comment {...props} content="Light" />
|
||||
</Comment>
|
||||
));
|
||||
|
||||
// DatePicker
|
||||
describe('DatePicker', () => {
|
||||
testPair('DatePicker', props => (
|
||||
@ -414,13 +405,6 @@ describe('ConfigProvider', () => {
|
||||
</div>
|
||||
));
|
||||
|
||||
// PageHeader
|
||||
testPair('PageHeader', props => (
|
||||
<div>
|
||||
<PageHeader title="pageHeader" {...props} />
|
||||
</div>
|
||||
));
|
||||
|
||||
// Popconfirm
|
||||
testPair('Popconfirm', props => (
|
||||
<div>
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
// placeholder
|
||||
@import '../../style/themes/index';
|
||||
@ -1,4 +1,3 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { InputToken } from '../../input/style';
|
||||
|
||||
@ -1,677 +0,0 @@
|
||||
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
|
||||
|
||||
.@{picker-prefix-cls} {
|
||||
@picker-arrow-size: 7px;
|
||||
@picker-year-month-cell-width: 60px;
|
||||
@picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;
|
||||
|
||||
&-panel {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
background: @calendar-bg;
|
||||
border: @border-width-base @border-style-base @picker-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
||||
&-focused {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// = Shared Panel =
|
||||
// ========================================================
|
||||
&-decade-panel,
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel,
|
||||
&-week-panel,
|
||||
&-date-panel,
|
||||
&-time-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: @picker-panel-width;
|
||||
}
|
||||
|
||||
// ======================= Header =======================
|
||||
&-header {
|
||||
display: flex;
|
||||
padding: 0 @padding-xs;
|
||||
color: @heading-color;
|
||||
border-bottom: @border-width-base @border-style-base @picker-border-color;
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
color: @disabled-color;
|
||||
line-height: @picker-text-height;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: color @animation-duration-slow;
|
||||
}
|
||||
|
||||
> button {
|
||||
min-width: 1.6em;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-view {
|
||||
flex: auto;
|
||||
font-weight: 500;
|
||||
line-height: @picker-text-height;
|
||||
|
||||
button {
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow button
|
||||
&-prev-icon,
|
||||
&-next-icon,
|
||||
&-super-prev-icon,
|
||||
&-super-next-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @picker-arrow-size;
|
||||
height: @picker-arrow-size;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: @picker-arrow-size;
|
||||
height: @picker-arrow-size;
|
||||
border: 0 solid currentcolor;
|
||||
border-width: 1.5px 0 0 1.5px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-super-prev-icon,
|
||||
&-super-next-icon {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: ceil((@picker-arrow-size / 2));
|
||||
left: ceil((@picker-arrow-size / 2));
|
||||
display: inline-block;
|
||||
width: @picker-arrow-size;
|
||||
height: @picker-arrow-size;
|
||||
border: 0 solid currentcolor;
|
||||
border-width: 1.5px 0 0 1.5px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-prev-icon,
|
||||
&-super-prev-icon {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&-next-icon,
|
||||
&-super-next-icon {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
// ======================== Body ========================
|
||||
&-content {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
position: relative;
|
||||
min-width: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
th {
|
||||
height: 30px;
|
||||
color: @text-color;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-cell-inner(@cellClassName) {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
height: @picker-panel-cell-height;
|
||||
transform: translateY(-50%);
|
||||
transition: all @animation-duration-slow;
|
||||
content: '';
|
||||
}
|
||||
|
||||
// >>> Default
|
||||
.@{cellClassName} {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: @picker-panel-cell-height;
|
||||
height: @picker-panel-cell-height;
|
||||
line-height: @picker-panel-cell-height;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background @animation-duration-slow, border @animation-duration-slow;
|
||||
}
|
||||
|
||||
// >>> Hover
|
||||
&:hover:not(&-in-view),
|
||||
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
|
||||
.@{cellClassName} {
|
||||
background: @picker-basic-cell-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Today
|
||||
&-in-view&-today .@{cellClassName} {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border: @border-width-base @border-style-base @primary-color;
|
||||
border-radius: @border-radius-base;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// >>> In Range
|
||||
&-in-view&-in-range {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background: @picker-basic-cell-active-with-range-color;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Selected
|
||||
&-in-view&-selected .@{cellClassName},
|
||||
&-in-view&-range-start .@{cellClassName},
|
||||
&-in-view&-range-end .@{cellClassName} {
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
&-in-view&-range-start:not(&-range-start-single),
|
||||
&-in-view&-range-end:not(&-range-end-single) {
|
||||
&::before {
|
||||
background: @picker-basic-cell-active-with-range-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-in-view&-range-start::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-in-view&-range-end::before {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
// >>> Range Hover
|
||||
&-in-view&-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
|
||||
&-in-view&-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
|
||||
&-in-view&-range-hover-start&-range-start-single,
|
||||
&-in-view&-range-hover-start&-range-start&-range-end&-range-end-near-hover,
|
||||
&-in-view&-range-hover-end&-range-start&-range-end&-range-start-near-hover,
|
||||
&-in-view&-range-hover-end&-range-end-single,
|
||||
&-in-view&-range-hover:not(&-in-range) {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 0;
|
||||
height: 24px;
|
||||
border-top: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
transform: translateY(-50%);
|
||||
transition: all @animation-duration-slow;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Add space for stash
|
||||
&-range-hover-start::after,
|
||||
&-range-hover-end::after,
|
||||
&-range-hover::after {
|
||||
right: 0;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
// Hover with in range
|
||||
&-in-view&-in-range&-range-hover::before,
|
||||
&-in-view&-range-start&-range-hover::before,
|
||||
&-in-view&-range-end&-range-hover::before,
|
||||
&-in-view&-range-start:not(&-range-start-single)&-range-hover-start::before,
|
||||
&-in-view&-range-end:not(&-range-end-single)&-range-hover-end::before,
|
||||
.@{picker-prefix-cls}-panel
|
||||
> :not(.@{picker-prefix-cls}-date-panel)
|
||||
&-in-view&-in-range&-range-hover-start::before,
|
||||
.@{picker-prefix-cls}-panel
|
||||
> :not(.@{picker-prefix-cls}-date-panel)
|
||||
&-in-view&-in-range&-range-hover-end::before {
|
||||
background: @picker-date-hover-range-color;
|
||||
}
|
||||
|
||||
// range start border-radius
|
||||
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
|
||||
// range end border-radius
|
||||
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
|
||||
// DatePanel only
|
||||
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
|
||||
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
background: @picker-date-hover-range-color;
|
||||
transition: all @animation-duration-slow;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel
|
||||
&-in-view&-in-range&-range-hover-start
|
||||
.@{cellClassName}::after {
|
||||
right: -5px - @border-width-base;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
||||
right: 0;
|
||||
left: -5px - @border-width-base;
|
||||
}
|
||||
|
||||
// Hover with range start & end
|
||||
&-range-hover&-range-start::after {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
&-range-hover&-range-end::after {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Edge start
|
||||
tr > &-in-view&-range-hover:first-child::after,
|
||||
tr > &-in-view&-range-hover-end:first-child::after,
|
||||
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
|
||||
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
|
||||
&-in-view&-range-hover-start::after {
|
||||
left: 6px;
|
||||
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Edge end
|
||||
tr > &-in-view&-range-hover:last-child::after,
|
||||
tr > &-in-view&-range-hover-start:last-child::after,
|
||||
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
|
||||
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
|
||||
&-in-view&-range-hover-end::after {
|
||||
right: 6px;
|
||||
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// >>> Disabled
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
pointer-events: none;
|
||||
|
||||
.@{cellClassName} {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: @picker-basic-cell-disabled-bg;
|
||||
}
|
||||
}
|
||||
&-disabled&-today .@{cellClassName}::before {
|
||||
border-color: @disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-cell {
|
||||
padding: 3px 0;
|
||||
color: @disabled-color;
|
||||
cursor: pointer;
|
||||
|
||||
// In view
|
||||
&-in-view {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.picker-cell-inner(~'@{picker-cell-inner-cls}');
|
||||
}
|
||||
|
||||
&-decade-panel,
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel {
|
||||
.@{picker-prefix-cls}-content {
|
||||
height: @picker-panel-without-time-cell-height * 4;
|
||||
}
|
||||
|
||||
.@{picker-cell-inner-cls} {
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&-quarter-panel {
|
||||
.@{picker-prefix-cls}-content {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Footer ========================
|
||||
&-footer {
|
||||
width: min-content;
|
||||
min-width: 100%;
|
||||
line-height: @picker-text-height - 2 * @border-width-base;
|
||||
text-align: center;
|
||||
border-bottom: @border-width-base @border-style-base transparent;
|
||||
|
||||
.@{picker-prefix-cls}-panel & {
|
||||
border-top: @border-width-base @border-style-base @picker-border-color;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
padding: 0 @padding-sm;
|
||||
line-height: @picker-text-height - 2 * @border-width-base;
|
||||
text-align: left;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: @border-width-base @border-style-base @picker-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-now {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-today-btn {
|
||||
color: @link-color;
|
||||
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
|
||||
&&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// = Special =
|
||||
// ========================================================
|
||||
|
||||
// ===================== Decade Panel =====================
|
||||
&-decade-panel {
|
||||
.@{picker-cell-inner-cls} {
|
||||
padding: 0 (@padding-xs / 2);
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-cell::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ============= Year & Quarter & Month Panel =============
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel {
|
||||
@hover-cell-fixed-distance: (
|
||||
(((@picker-panel-width - @padding-xs * 2) / 3) - @picker-year-month-cell-width) / 2
|
||||
);
|
||||
|
||||
.@{picker-prefix-cls}-body {
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
|
||||
.@{picker-cell-inner-cls} {
|
||||
width: @picker-year-month-cell-width;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-cell-range-hover-start::after {
|
||||
left: @hover-cell-fixed-distance;
|
||||
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: @hover-cell-fixed-distance;
|
||||
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
.@{picker-prefix-cls}-cell-range-hover-end::after {
|
||||
right: @hover-cell-fixed-distance;
|
||||
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
left: @hover-cell-fixed-distance;
|
||||
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Week Panel ======================
|
||||
&-week-panel {
|
||||
.@{picker-prefix-cls}-body {
|
||||
padding: @padding-xs @padding-sm;
|
||||
}
|
||||
|
||||
// Clear cell style
|
||||
.@{picker-prefix-cls}-cell {
|
||||
&:hover .@{picker-cell-inner-cls},
|
||||
&-selected .@{picker-cell-inner-cls},
|
||||
.@{picker-cell-inner-cls} {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-row {
|
||||
td {
|
||||
transition: background @animation-duration-slow;
|
||||
}
|
||||
|
||||
&:hover td {
|
||||
background: @picker-basic-cell-hover-color;
|
||||
}
|
||||
|
||||
&-selected td,
|
||||
&-selected:hover td {
|
||||
background: @primary-color;
|
||||
|
||||
&.@{picker-prefix-cls}-cell-week {
|
||||
color: fade(@text-color-inverse, 50%);
|
||||
}
|
||||
|
||||
&.@{picker-prefix-cls}-cell-today .@{picker-cell-inner-cls}::before {
|
||||
border-color: @text-color-inverse;
|
||||
}
|
||||
|
||||
.@{picker-cell-inner-cls} {
|
||||
color: @text-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Date Panel ======================
|
||||
&-date-panel {
|
||||
.@{picker-prefix-cls}-body {
|
||||
padding: @padding-xs @padding-sm;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-content {
|
||||
width: @picker-panel-cell-width * 7;
|
||||
|
||||
th {
|
||||
width: @picker-panel-cell-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Datetime Panel ====================
|
||||
&-datetime-panel {
|
||||
display: flex;
|
||||
|
||||
.@{picker-prefix-cls}-time-panel {
|
||||
border-left: @border-width-base @border-style-base @picker-border-color;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel,
|
||||
.@{picker-prefix-cls}-time-panel {
|
||||
transition: opacity @animation-duration-slow;
|
||||
}
|
||||
|
||||
// Keyboard
|
||||
&-active {
|
||||
.@{picker-prefix-cls}-date-panel,
|
||||
.@{picker-prefix-cls}-time-panel {
|
||||
opacity: 0.3;
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Time Panel ======================
|
||||
&-time-panel {
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
|
||||
.@{picker-prefix-cls}-content {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
height: @picker-time-panel-column-height;
|
||||
}
|
||||
|
||||
&-column {
|
||||
flex: 1 0 auto;
|
||||
width: @picker-time-panel-column-width;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: hidden;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
transition: background @animation-duration-slow;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
height: @picker-time-panel-column-height - @picker-time-panel-cell-height;
|
||||
content: '';
|
||||
.@{picker-prefix-cls}-datetime-panel & {
|
||||
height: @picker-time-panel-column-height - @picker-time-panel-cell-height + 2 *
|
||||
@border-width-base;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: @border-width-base @border-style-base @picker-border-color;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background: @calendar-column-active-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.@{picker-prefix-cls}-time-panel-cell {
|
||||
.@{picker-prefix-cls}-time-panel-cell-inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @picker-time-panel-cell-height;
|
||||
margin: 0;
|
||||
padding: 0 0 0 ((@picker-time-panel-column-width - 28px) / 2);
|
||||
color: @text-color;
|
||||
line-height: @picker-time-panel-cell-height;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
transition: background @animation-duration-slow;
|
||||
|
||||
&:hover {
|
||||
background: @item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected {
|
||||
.@{picker-prefix-cls}-time-panel-cell-inner {
|
||||
background: @calendar-item-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.@{picker-prefix-cls}-time-panel-cell-inner {
|
||||
color: @disabled-color;
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix IE11 render bug by css hacks
|
||||
// https://github.com/ant-design/ant-design/issues/21559
|
||||
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
|
||||
/* stylelint-disable selector-type-no-unknown,selector-no-vendor-prefix */
|
||||
_:-ms-fullscreen,
|
||||
:root {
|
||||
.@{picker-prefix-cls}-range-wrapper {
|
||||
.@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
|
||||
.@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
|
||||
padding: 21px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,246 +0,0 @@
|
||||
.@{picker-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-suffix {
|
||||
.@{picker-prefix-cls}-rtl & {
|
||||
margin-right: (@padding-xs / 2);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
.@{picker-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-separator {
|
||||
.@{picker-prefix-cls}-rtl & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
&-view {
|
||||
button {
|
||||
&:not(:first-child) {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
margin-right: @padding-xs;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Range =========================
|
||||
&-range {
|
||||
// Clear
|
||||
.@{picker-prefix-cls}-clear {
|
||||
.@{picker-prefix-cls}-rtl& {
|
||||
right: auto;
|
||||
left: @input-padding-horizontal-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Active bar
|
||||
.@{picker-prefix-cls}-active-bar {
|
||||
.@{picker-prefix-cls}-rtl& {
|
||||
margin-right: @input-padding-horizontal-base;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{picker-prefix-cls}-small {
|
||||
.@{picker-prefix-cls}-active-bar {
|
||||
.@{picker-prefix-cls}-rtl& {
|
||||
margin-right: @input-padding-horizontal-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Ranges ========================
|
||||
&-ranges {
|
||||
.@{picker-prefix-cls}-dropdown-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-ok {
|
||||
.@{picker-prefix-cls}-dropdown-rtl & {
|
||||
float: left;
|
||||
margin-right: @padding-xs;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Panel ========================
|
||||
&-panel {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-prev-icon,
|
||||
&-super-prev-icon {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-next-icon,
|
||||
&-super-next-icon {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-cell {
|
||||
.picker-cell-inner(~'@{picker-cell-inner-cls}');
|
||||
}
|
||||
|
||||
// ======================== Body ==========================
|
||||
.picker-cell-inner(@cellClassName) {
|
||||
.@{cellClassName} {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: @picker-panel-cell-height;
|
||||
height: @picker-panel-cell-height;
|
||||
line-height: @picker-panel-cell-height;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background @animation-duration-slow, border @animation-duration-slow;
|
||||
}
|
||||
|
||||
&-in-view&-range-start::before {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 50%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-in-view&-range-end::before {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 0;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&-in-view&-range-start&-range-end::before {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel
|
||||
&-in-view&-in-range&-range-hover-start
|
||||
.@{cellClassName}::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 0;
|
||||
left: -5px - @border-width-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: -5px - @border-width-base;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover with range start & end
|
||||
&-range-hover&-range-start::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 0;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&-range-hover&-range-end::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 50%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// range start border-radius
|
||||
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
// range end border-radius
|
||||
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Edge start
|
||||
tr > &-in-view&-range-hover:not(&-selected):first-child::after,
|
||||
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
|
||||
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
|
||||
&-in-view&-range-hover-start::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 6px;
|
||||
left: 0;
|
||||
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-left: none;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Edge end
|
||||
tr > &-in-view&-range-hover:not(&-selected):last-child::after,
|
||||
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
|
||||
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
|
||||
&-in-view&-range-hover-end::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 0;
|
||||
left: 6px;
|
||||
border-right: none;
|
||||
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
tr > &-in-view&-range-hover-start:last-child::after,
|
||||
tr > &-in-view&-range-hover-end:first-child::after,
|
||||
&-in-view&-start&-range-hover-edge-start:not(&-range-hover)::after,
|
||||
&-in-view&-start&-range-hover-end&-range-hover-edge-start:not(&-range-hover)::after,
|
||||
&-in-view&-end&-range-hover-start&-range-hover-edge-end:not(&-range-hover)::after,
|
||||
tr > &-in-view&-start&-range-hover&-range-hover-edge-start:last-child::after,
|
||||
tr > &-in-view&-end&-range-hover&-range-hover-edge-end:first-child::after {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
right: 6px;
|
||||
left: 6px;
|
||||
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Footer ========================
|
||||
&-footer {
|
||||
&-extra {
|
||||
.@{picker-prefix-cls}-dropdown-rtl & {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== Time Panel ======================
|
||||
&-time-panel {
|
||||
.@{picker-prefix-cls}-panel-rtl & {
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@picker-prefix-cls: ~'@{ant-prefix}-picker';
|
||||
|
||||
.picker-status-color(
|
||||
@text-color: @input-color;
|
||||
@border-color: @input-border-color;
|
||||
@background-color: @input-bg;
|
||||
@hoverBorderColor: @primary-color-hover;
|
||||
@outlineColor: @primary-color-outline;
|
||||
) {
|
||||
&.@{picker-prefix-cls} {
|
||||
&,
|
||||
&:not([disabled]):hover {
|
||||
background-color: @background-color;
|
||||
border-color: @border-color;
|
||||
}
|
||||
|
||||
&-focused,
|
||||
&:focus {
|
||||
.active(@text-color, @hoverBorderColor, @outlineColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls} {
|
||||
&-status-error {
|
||||
.picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
|
||||
}
|
||||
|
||||
&-status-warning {
|
||||
.picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
|
||||
}
|
||||
}
|
||||
@ -1,179 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
// @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
|
||||
// .@{descriptions-prefix-cls} {
|
||||
// &-header {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin-bottom: @descriptions-title-margin-bottom;
|
||||
// }
|
||||
|
||||
// &-title {
|
||||
// flex: auto;
|
||||
// overflow: hidden;
|
||||
// color: @heading-color;
|
||||
// font-weight: bold;
|
||||
// font-size: @font-size-lg;
|
||||
// line-height: @line-height-base;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
// &-extra {
|
||||
// margin-left: auto;
|
||||
// color: @descriptions-extra-color;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
// &-view {
|
||||
// width: 100%;
|
||||
// border-radius: @border-radius-base;
|
||||
|
||||
// table {
|
||||
// width: 100%;
|
||||
// table-layout: fixed;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-row {
|
||||
// > th,
|
||||
// > td {
|
||||
// padding-bottom: @descriptions-item-padding-bottom;
|
||||
// }
|
||||
|
||||
// &:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-item-label {
|
||||
// color: @heading-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
// line-height: @line-height-base;
|
||||
// text-align: start;
|
||||
|
||||
// &::after {
|
||||
// & when (@descriptions-item-trailing-colon=true) {
|
||||
// content: ':';
|
||||
// }
|
||||
// & when not (@descriptions-item-trailing-colon=true) {
|
||||
// content: ' ';
|
||||
// }
|
||||
|
||||
// position: relative;
|
||||
// top: -0.5px;
|
||||
// margin: 0 @descriptions-item-label-colon-margin-right 0
|
||||
// @descriptions-item-label-colon-margin-left;
|
||||
// }
|
||||
|
||||
// &.@{descriptions-prefix-cls}-item-no-colon::after {
|
||||
// content: ' ';
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-item-no-label {
|
||||
// &::after {
|
||||
// margin: 0;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-item-content {
|
||||
// display: table-cell;
|
||||
// flex: 1;
|
||||
// color: @text-color;
|
||||
// font-size: @font-size-base;
|
||||
// line-height: @line-height-base;
|
||||
// word-break: break-word;
|
||||
// overflow-wrap: break-word;
|
||||
// }
|
||||
|
||||
// &-item {
|
||||
// padding-bottom: 0;
|
||||
// vertical-align: top;
|
||||
|
||||
// &-container {
|
||||
// display: flex;
|
||||
|
||||
// .@{descriptions-prefix-cls}-item-label,
|
||||
// .@{descriptions-prefix-cls}-item-content {
|
||||
// display: inline-flex;
|
||||
// align-items: baseline;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-middle {
|
||||
// .@{descriptions-prefix-cls}-row {
|
||||
// > th,
|
||||
// > td {
|
||||
// padding-bottom: @padding-sm;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-small {
|
||||
// .@{descriptions-prefix-cls}-row {
|
||||
// > th,
|
||||
// > td {
|
||||
// padding-bottom: @padding-xs;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-bordered {
|
||||
// .@{descriptions-prefix-cls}-view {
|
||||
// border: 1px solid @border-color-split;
|
||||
|
||||
// > table {
|
||||
// table-layout: auto;
|
||||
// border-collapse: collapse;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{descriptions-prefix-cls}-item-label,
|
||||
// .@{descriptions-prefix-cls}-item-content {
|
||||
// padding: @descriptions-default-padding;
|
||||
// border-right: 1px solid @border-color-split;
|
||||
|
||||
// &:last-child {
|
||||
// border-right: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{descriptions-prefix-cls}-item-label {
|
||||
// background-color: @descriptions-bg;
|
||||
|
||||
// &::after {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{descriptions-prefix-cls}-row {
|
||||
// border-bottom: 1px solid @border-color-split;
|
||||
|
||||
// &:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.@{descriptions-prefix-cls}-middle {
|
||||
// .@{descriptions-prefix-cls}-item-label,
|
||||
// .@{descriptions-prefix-cls}-item-content {
|
||||
// padding: @descriptions-middle-padding;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.@{descriptions-prefix-cls}-small {
|
||||
// .@{descriptions-prefix-cls}-item-label,
|
||||
// .@{descriptions-prefix-cls}-item-content {
|
||||
// padding: @descriptions-small-padding;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import './rtl';
|
||||
@ -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';
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
// @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
|
||||
// .@{descriptions-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
// &-item-label {
|
||||
// &::after {
|
||||
// .@{descriptions-prefix-cls}-rtl & {
|
||||
// margin: 0 @descriptions-item-label-colon-margin-left 0
|
||||
// @descriptions-item-label-colon-margin-right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-bordered {
|
||||
// .@{descriptions-prefix-cls}-item-label,
|
||||
// .@{descriptions-prefix-cls}-item-content {
|
||||
// .@{descriptions-prefix-cls}-rtl& {
|
||||
// border-right: none;
|
||||
// border-left: 1px solid @border-color-split;
|
||||
|
||||
// &:last-child {
|
||||
// border-left: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,137 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
// @divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
|
||||
// .@{divider-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
// border-top: @border-width-base solid @divider-color;
|
||||
|
||||
// &-vertical {
|
||||
// position: relative;
|
||||
// top: -0.06em;
|
||||
// display: inline-block;
|
||||
// height: 0.9em;
|
||||
// margin: 0 @divider-vertical-gutter;
|
||||
// vertical-align: middle;
|
||||
// border-top: 0;
|
||||
// border-left: @border-width-base solid @divider-color;
|
||||
// }
|
||||
|
||||
// &-horizontal {
|
||||
// display: flex;
|
||||
// clear: both;
|
||||
// width: 100%;
|
||||
// min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
// margin: 24px 0;
|
||||
// }
|
||||
|
||||
// &-horizontal&-with-text {
|
||||
// display: flex;
|
||||
// margin: 16px 0;
|
||||
// color: @heading-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @font-size-lg;
|
||||
// white-space: nowrap;
|
||||
// text-align: center;
|
||||
// border-top: 0;
|
||||
// border-top-color: @divider-color;
|
||||
|
||||
// &::before,
|
||||
// &::after {
|
||||
// position: relative;
|
||||
// top: 50%;
|
||||
// width: 50%;
|
||||
// border-top: @border-width-base solid transparent;
|
||||
// // Chrome not accept `inherit` in `border-top`
|
||||
// border-top-color: inherit;
|
||||
// border-bottom: 0;
|
||||
// transform: translateY(50%);
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-horizontal&-with-text-left {
|
||||
// &::before {
|
||||
// top: 50%;
|
||||
// width: @divider-orientation-margin;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// top: 50%;
|
||||
// width: 100% - @divider-orientation-margin;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-horizontal&-with-text-right {
|
||||
// &::before {
|
||||
// top: 50%;
|
||||
// width: 100% - @divider-orientation-margin;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// top: 50%;
|
||||
// width: @divider-orientation-margin;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-inner-text {
|
||||
// display: inline-block;
|
||||
// padding: 0 @divider-text-padding;
|
||||
// }
|
||||
|
||||
// &-dashed {
|
||||
// background: none;
|
||||
// border-color: @divider-color;
|
||||
// border-style: dashed;
|
||||
// border-width: @border-width-base 0 0;
|
||||
// }
|
||||
|
||||
// &-horizontal&-with-text&-dashed {
|
||||
// &::before,
|
||||
// &::after {
|
||||
// border-style: dashed none none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-vertical&-dashed {
|
||||
// border-width: 0 0 0 @border-width-base;
|
||||
// }
|
||||
|
||||
// &-plain&-with-text {
|
||||
// color: @text-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
// &-horizontal&-with-text-left&-no-default-orientation-margin-left {
|
||||
// &::before {
|
||||
// width: 0;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// .ant-divider-inner-text {
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-horizontal&-with-text-right&-no-default-orientation-margin-right {
|
||||
// &::before {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// width: 0;
|
||||
// }
|
||||
|
||||
// .ant-divider-inner-text {
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import './rtl';
|
||||
@ -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';
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
|
||||
.@{divider-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&::before {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,249 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
|
||||
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
|
||||
@picker-prefix-cls: ~'@{ant-prefix}-picker';
|
||||
@drawer-animation-ease: @ease-out-quint;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
@drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
|
||||
|
||||
position: fixed;
|
||||
z-index: @zindex-modal;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
|
||||
|
||||
&-content-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease,
|
||||
box-shadow @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
|
||||
.@{drawer-prefix-cls}-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
top: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
width: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 0;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 0;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-left;
|
||||
}
|
||||
// https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
|
||||
&.no-mask {
|
||||
right: 1px;
|
||||
transform: translateX(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-top,
|
||||
&-bottom {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
height: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-top {
|
||||
top: 0;
|
||||
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-down;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
bottom: 0;
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-up;
|
||||
}
|
||||
|
||||
&.no-mask {
|
||||
bottom: 1px;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @drawer-title-font-size;
|
||||
line-height: @drawer-title-line-height;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
background-color: @drawer-bg;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&-close {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
color: @modal-close-color;
|
||||
font-weight: 700;
|
||||
font-size: @font-size-lg;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
transition: color @animation-duration-slow;
|
||||
text-rendering: auto;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @drawer-header-padding;
|
||||
color: @text-color;
|
||||
background: @drawer-bg;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-close-only {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper-body {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-body {
|
||||
flex-grow: 1;
|
||||
padding: @drawer-body-padding;
|
||||
overflow: auto;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
flex-shrink: 0;
|
||||
padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
|
||||
&-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: @modal-mask-bg;
|
||||
opacity: 0;
|
||||
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// =================== Hook Components ===================
|
||||
.@{picker-prefix-cls} {
|
||||
&-clear {
|
||||
background: @popover-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antdDrawerFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
//@import '../../style/themes/index';
|
||||
//@import '../../style/mixins/index';
|
||||
//@import './drawer';
|
||||
//@import './rtl';
|
||||
//
|
||||
//.popover-customize-bg(@drawer-prefix-cls, @popover-background);
|
||||
@ -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 } from '../../theme';
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
|
||||
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-close {
|
||||
.@{drawer-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,394 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import './status';
|
||||
|
||||
// @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
|
||||
|
||||
// .@{dropdown-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
// position: absolute;
|
||||
// top: -9999px;
|
||||
// left: -9999px;
|
||||
// z-index: @zindex-dropdown;
|
||||
// display: block;
|
||||
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// top: -@popover-distance + @popover-arrow-width;
|
||||
// right: 0;
|
||||
// bottom: -@popover-distance + @popover-arrow-width;
|
||||
// left: -7px;
|
||||
// z-index: -9999;
|
||||
// opacity: 0.0001;
|
||||
// content: ' ';
|
||||
// }
|
||||
|
||||
// &-wrap {
|
||||
// position: relative;
|
||||
|
||||
// .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
|
||||
// font-size: 10px;
|
||||
// }
|
||||
|
||||
// .@{iconfont-css-prefix}-down::before {
|
||||
// transition: transform @animation-duration-base;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-wrap-open {
|
||||
// .@{iconfont-css-prefix}-down::before {
|
||||
// transform: rotate(180deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-hidden,
|
||||
// &-menu-hidden,
|
||||
// &-menu-submenu-hidden {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// // Offset the popover to account for the dropdown arrow
|
||||
// &-show-arrow&-placement-topLeft,
|
||||
// &-show-arrow&-placement-top,
|
||||
// &-show-arrow&-placement-topRight {
|
||||
// padding-bottom: @popover-distance;
|
||||
// }
|
||||
|
||||
// &-show-arrow&-placement-bottomLeft,
|
||||
// &-show-arrow&-placement-bottom,
|
||||
// &-show-arrow&-placement-bottomRight {
|
||||
// padding-top: @popover-distance;
|
||||
// }
|
||||
|
||||
// // Arrows
|
||||
// // .popover-arrow is outer, .popover-arrow:after is inner
|
||||
|
||||
// &-arrow {
|
||||
// position: absolute;
|
||||
// z-index: 1; // lift it up so the menu wouldn't cask shadow on it
|
||||
// display: block;
|
||||
// width: @popover-arrow-width;
|
||||
// height: @popover-arrow-width;
|
||||
// background: linear-gradient(
|
||||
// 135deg,
|
||||
// transparent 40%,
|
||||
// @popover-bg 40%
|
||||
// ); // Use linear-gradient to prevent arrow from covering text
|
||||
// .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
|
||||
// }
|
||||
|
||||
// &-placement-top > &-arrow,
|
||||
// &-placement-topLeft > &-arrow,
|
||||
// &-placement-topRight > &-arrow {
|
||||
// bottom: @popover-arrow-width * sqrt((1 / 2)) + 2px;
|
||||
// box-shadow: 3px 3px 7px -3px fade(@black, 10%);
|
||||
// transform: rotate(45deg);
|
||||
// }
|
||||
|
||||
// &-placement-top > &-arrow {
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%) rotate(45deg);
|
||||
// }
|
||||
|
||||
// &-placement-topLeft > &-arrow {
|
||||
// left: 16px;
|
||||
// }
|
||||
|
||||
// &-placement-topRight > &-arrow {
|
||||
// right: 16px;
|
||||
// }
|
||||
|
||||
// &-placement-bottom > &-arrow,
|
||||
// &-placement-bottomLeft > &-arrow,
|
||||
// &-placement-bottomRight > &-arrow {
|
||||
// top: (@popover-arrow-width + 2px) * sqrt((1 / 2));
|
||||
// box-shadow: 2px 2px 5px -2px fade(@black, 10%);
|
||||
// transform: rotate(-135deg) translateY(-0.5px);
|
||||
// }
|
||||
|
||||
// &-placement-bottom > &-arrow {
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%) rotate(-135deg) translateY(-0.5px);
|
||||
// }
|
||||
|
||||
// &-placement-bottomLeft > &-arrow {
|
||||
// left: 16px;
|
||||
// }
|
||||
|
||||
// &-placement-bottomRight > &-arrow {
|
||||
// right: 16px;
|
||||
// }
|
||||
|
||||
// &-menu {
|
||||
// position: relative;
|
||||
// margin: 0;
|
||||
// padding: @dropdown-edge-child-vertical-padding 0;
|
||||
// text-align: left;
|
||||
// list-style-type: none;
|
||||
// background-color: @dropdown-menu-bg;
|
||||
// background-clip: padding-box;
|
||||
// border-radius: @border-radius-base;
|
||||
// outline: none;
|
||||
// box-shadow: @box-shadow-base;
|
||||
|
||||
// &-item-group-title {
|
||||
// padding: 5px @control-padding-horizontal;
|
||||
// color: @text-color-secondary;
|
||||
// transition: all @animation-duration-slow;
|
||||
// }
|
||||
|
||||
// &-submenu-popup {
|
||||
// position: absolute;
|
||||
// z-index: @zindex-dropdown;
|
||||
// background: transparent;
|
||||
// box-shadow: none;
|
||||
// transform-origin: 0 0;
|
||||
|
||||
// ul,
|
||||
// li {
|
||||
// list-style: none;
|
||||
// }
|
||||
|
||||
// ul {
|
||||
// margin-right: 0.3em;
|
||||
// margin-left: 0.3em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // ======================= Item Content =======================
|
||||
// &-item {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// &-item-icon {
|
||||
// min-width: 12px;
|
||||
// margin-right: 8px;
|
||||
// font-size: @font-size-sm;
|
||||
// }
|
||||
|
||||
// &-title-content {
|
||||
// flex: auto;
|
||||
|
||||
// > a {
|
||||
// color: inherit;
|
||||
// transition: all @animation-duration-slow;
|
||||
|
||||
// &:hover {
|
||||
// color: inherit;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =========================== Item ===========================
|
||||
// &-item,
|
||||
// &-submenu-title {
|
||||
// clear: both;
|
||||
// margin: 0;
|
||||
// padding: @dropdown-vertical-padding @control-padding-horizontal;
|
||||
// color: @text-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @dropdown-font-size;
|
||||
// line-height: @dropdown-line-height;
|
||||
// cursor: pointer;
|
||||
// transition: all @animation-duration-slow;
|
||||
|
||||
// &:first-child {
|
||||
// & when (@dropdown-edge-child-vertical-padding = 0) {
|
||||
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:last-child {
|
||||
// & when (@dropdown-edge-child-vertical-padding = 0) {
|
||||
// border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-selected {
|
||||
// color: @dropdown-selected-color;
|
||||
// background-color: @dropdown-selected-bg;
|
||||
// }
|
||||
|
||||
// &:hover,
|
||||
// &&-active {
|
||||
// background-color: @item-hover-bg;
|
||||
// }
|
||||
|
||||
// &-disabled {
|
||||
// color: @disabled-color;
|
||||
// cursor: not-allowed;
|
||||
|
||||
// &:hover {
|
||||
// color: @disabled-color;
|
||||
// background-color: @dropdown-menu-submenu-disabled-bg;
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
|
||||
// a {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-divider {
|
||||
// height: 1px;
|
||||
// margin: 4px 0;
|
||||
// overflow: hidden;
|
||||
// line-height: 0;
|
||||
// background-color: @border-color-split;
|
||||
// }
|
||||
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-expand-icon {
|
||||
// position: absolute;
|
||||
// right: @padding-xs;
|
||||
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
||||
// margin-right: 0 !important;
|
||||
// color: @text-color-secondary;
|
||||
// font-size: 10px;
|
||||
// font-style: normal;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-item-group-list {
|
||||
// margin: 0 8px;
|
||||
// padding: 0;
|
||||
// list-style: none;
|
||||
// }
|
||||
|
||||
// &-submenu-title {
|
||||
// padding-right: @control-padding-horizontal + @font-size-sm;
|
||||
// }
|
||||
|
||||
// &-submenu-vertical {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// &-submenu-vertical > & {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 100%;
|
||||
// min-width: 100%;
|
||||
// margin-left: 4px;
|
||||
// transform-origin: 0 0;
|
||||
// }
|
||||
|
||||
// &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
|
||||
// &,
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
||||
// color: @disabled-color;
|
||||
// background-color: @dropdown-menu-submenu-disabled-bg;
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // https://github.com/ant-design/ant-design/issues/19264
|
||||
// &-submenu-selected &-submenu-title {
|
||||
// color: @primary-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
|
||||
// &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
|
||||
// &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom,
|
||||
// &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottom,
|
||||
// &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
|
||||
// &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
|
||||
// animation-name: antSlideUpIn;
|
||||
// }
|
||||
|
||||
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
|
||||
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
|
||||
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-top,
|
||||
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-top,
|
||||
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
|
||||
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
|
||||
// animation-name: antSlideDownIn;
|
||||
// }
|
||||
|
||||
// &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
|
||||
// &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottom,
|
||||
// &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
|
||||
// animation-name: antSlideUpOut;
|
||||
// }
|
||||
|
||||
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
|
||||
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-top,
|
||||
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
|
||||
// animation-name: antSlideDownOut;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{dropdown-prefix-cls}-trigger,
|
||||
// .@{dropdown-prefix-cls}-link,
|
||||
// .@{dropdown-prefix-cls}-button {
|
||||
// > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
|
||||
// font-size: 10px;
|
||||
// vertical-align: baseline;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{dropdown-prefix-cls}-button {
|
||||
// white-space: nowrap;
|
||||
|
||||
// &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
|
||||
// &-loading,
|
||||
// &-loading + .@{ant-prefix}-btn {
|
||||
// cursor: default;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
|
||||
// &-loading + .@{ant-prefix}-btn::before {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
// &:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
|
||||
// padding-right: @padding-xs;
|
||||
// padding-left: @padding-xs;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // https://github.com/ant-design/ant-design/issues/4903
|
||||
// .@{dropdown-prefix-cls}-menu-dark {
|
||||
// &,
|
||||
// .@{dropdown-prefix-cls}-menu {
|
||||
// background: @menu-dark-bg;
|
||||
// }
|
||||
// .@{dropdown-prefix-cls}-menu-item,
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-title,
|
||||
// .@{dropdown-prefix-cls}-menu-item > a,
|
||||
// .@{dropdown-prefix-cls}-menu-item > .@{iconfont-css-prefix} + span > a {
|
||||
// color: @text-color-secondary-dark;
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
|
||||
// color: @text-color-secondary-dark;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// color: @text-color-inverse;
|
||||
// background: transparent;
|
||||
// }
|
||||
// }
|
||||
// .@{dropdown-prefix-cls}-menu-item-selected {
|
||||
// &,
|
||||
// &:hover,
|
||||
// > a {
|
||||
// color: @text-color-inverse;
|
||||
// background: @primary-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import './rtl';
|
||||
@ -1,4 +1,3 @@
|
||||
// deps-lint-skip-all
|
||||
import {
|
||||
initMoveMotion,
|
||||
initSlideMotion,
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
// @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
|
||||
|
||||
// .@{dropdown-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
// &::before {
|
||||
// .@{dropdown-prefix-cls}-rtl& {
|
||||
// right: -7px;
|
||||
// left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-menu {
|
||||
// &&-rtl {
|
||||
// direction: rtl;
|
||||
// text-align: right;
|
||||
// }
|
||||
|
||||
// &-item-group-title {
|
||||
// .@{dropdown-prefix-cls}-rtl &,
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-rtl & {
|
||||
// direction: rtl;
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-submenu-popup {
|
||||
// &.@{dropdown-prefix-cls}-menu-submenu-rtl {
|
||||
// transform-origin: 100% 0;
|
||||
// }
|
||||
|
||||
// ul,
|
||||
// li {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-item,
|
||||
// &-submenu-title {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// text-align: right;
|
||||
// }
|
||||
|
||||
// > .@{iconfont-css-prefix}:first-child,
|
||||
// > span > .@{iconfont-css-prefix}:first-child {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// margin-right: 0;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-expand-icon {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// right: auto;
|
||||
// left: @padding-xs;
|
||||
// }
|
||||
|
||||
// .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// margin-left: 0 !important;
|
||||
// transform: scaleX(-1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-submenu-title {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// padding-right: @control-padding-horizontal;
|
||||
// padding-left: @control-padding-horizontal + @font-size-sm;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-submenu-vertical > & {
|
||||
// .@{dropdown-prefix-cls}-rtl & {
|
||||
// right: 100%;
|
||||
// left: 0;
|
||||
// margin-right: 4px;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,14 +0,0 @@
|
||||
// @import (reference) '../../style/themes/index';
|
||||
|
||||
// @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
|
||||
|
||||
// .@{dropdown-prefix-cls}-menu-item {
|
||||
// &&-danger {
|
||||
// color: @error-color;
|
||||
|
||||
// &:hover {
|
||||
// color: @text-color-inverse;
|
||||
// background-color: @error-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,151 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
// @empty-prefix-cls: ~'@{ant-prefix}-empty';
|
||||
// @empty-img-prefix-cls: ~'@{ant-prefix}-empty-img';
|
||||
|
||||
// .@{empty-prefix-cls} {
|
||||
// margin: 0 8px;
|
||||
// font-size: @empty-font-size;
|
||||
// line-height: @line-height-base;
|
||||
// text-align: center;
|
||||
|
||||
// &-image {
|
||||
// height: 100px;
|
||||
// margin-bottom: 8px;
|
||||
|
||||
// img {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// svg {
|
||||
// height: 100%;
|
||||
// margin: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-footer {
|
||||
// margin-top: 16px;
|
||||
// }
|
||||
|
||||
// // antd internal empty style
|
||||
// &-normal {
|
||||
// margin: 32px 0;
|
||||
// color: @disabled-color;
|
||||
|
||||
// .@{empty-prefix-cls}-image {
|
||||
// height: 40px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-small {
|
||||
// margin: 8px 0;
|
||||
// color: @disabled-color;
|
||||
|
||||
// .@{empty-prefix-cls}-image {
|
||||
// height: 35px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{empty-img-prefix-cls}-default {
|
||||
// // not support the definition because the less variables have no meaning
|
||||
// & when (@theme = dark) {
|
||||
// &-ellipse {
|
||||
// fill: @white;
|
||||
// fill-opacity: 0.08;
|
||||
// }
|
||||
|
||||
// &-path {
|
||||
// &-1 {
|
||||
// fill: #262626;
|
||||
// }
|
||||
|
||||
// &-2 {
|
||||
// fill: url('#linearGradient-1');
|
||||
// }
|
||||
|
||||
// &-3 {
|
||||
// fill: #595959;
|
||||
// }
|
||||
|
||||
// &-4 {
|
||||
// fill: #434343;
|
||||
// }
|
||||
|
||||
// &-5 {
|
||||
// fill: #595959;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-g {
|
||||
// fill: #434343;
|
||||
// }
|
||||
// }
|
||||
// & when not (@theme = dark) {
|
||||
// &-ellipse {
|
||||
// fill: #f5f5f5;
|
||||
// fill-opacity: 0.8;
|
||||
// }
|
||||
|
||||
// &-path {
|
||||
// &-1 {
|
||||
// fill: #aeb8c2;
|
||||
// }
|
||||
|
||||
// &-2 {
|
||||
// fill: url('#linearGradient-1');
|
||||
// }
|
||||
|
||||
// &-3 {
|
||||
// fill: #f5f5f7;
|
||||
// }
|
||||
|
||||
// &-4 {
|
||||
// fill: #dce0e6;
|
||||
// }
|
||||
|
||||
// &-5 {
|
||||
// fill: #dce0e6;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-g {
|
||||
// fill: @white;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .@{empty-img-prefix-cls}-simple {
|
||||
// // not support the definition because the less variables have no meaning
|
||||
// & when (@theme = dark) {
|
||||
// &-ellipse {
|
||||
// fill: @white;
|
||||
// fill-opacity: 0.08;
|
||||
// }
|
||||
|
||||
// &-g {
|
||||
// stroke: #434343;
|
||||
// }
|
||||
|
||||
// &-path {
|
||||
// fill: #262626;
|
||||
// stroke: #434343;
|
||||
// }
|
||||
// }
|
||||
// & when not (@theme = dark) {
|
||||
// &-ellipse {
|
||||
// fill: #f5f5f5;
|
||||
// }
|
||||
|
||||
// &-g {
|
||||
// stroke: #d9d9d9;
|
||||
// }
|
||||
|
||||
// &-path {
|
||||
// fill: #fafafa;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import './rtl';
|
||||
@ -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';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@empty-prefix-cls: ~'@{ant-prefix}-empty';
|
||||
|
||||
.@{empty-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
@import (reference) '../../style/themes/index';
|
||||
|
||||
@form-prefix-cls: ~'@{ant-prefix}-form';
|
||||
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
|
||||
|
||||
// ================================================================
|
||||
// = Children Component =
|
||||
// ================================================================
|
||||
// FIXME: useless, remove in v5
|
||||
.@{form-item-prefix-cls} {
|
||||
.@{ant-prefix}-input-number {
|
||||
+ .@{form-prefix-cls}-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
@import (reference) '../../style/themes/index';
|
||||
|
||||
@form-prefix-cls: ~'@{ant-prefix}-form';
|
||||
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
|
||||
|
||||
.@{form-prefix-cls}-horizontal {
|
||||
.@{form-item-prefix-cls}-label {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.@{form-item-prefix-cls}-control {
|
||||
flex: 1 1 0;
|
||||
// https://github.com/ant-design/ant-design/issues/32777
|
||||
// https://github.com/ant-design/ant-design/issues/33773
|
||||
min-width: 0;
|
||||
}
|
||||
// https://github.com/ant-design/ant-design/issues/32980
|
||||
// https://github.com/ant-design/ant-design/issues/34903
|
||||
.@{form-item-prefix-cls}-label[class$='-24'] + .@{form-item-prefix-cls}-control,
|
||||
.@{form-item-prefix-cls}-label[class*='-24 '] + .@{form-item-prefix-cls}-control {
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
@ -1,304 +0,0 @@
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import '../../input/style/mixin';
|
||||
// @import '../../button/_style/mixin';
|
||||
// @import '../../grid/style/mixin';
|
||||
// @import './components';
|
||||
// @import './inline';
|
||||
// @import './horizontal';
|
||||
// @import './vertical';
|
||||
// @import './status';
|
||||
// @import './mixin';
|
||||
|
||||
// @form-prefix-cls: ~'@{ant-prefix}-form';
|
||||
// @form-item-prefix-cls: ~'@{form-prefix-cls}-item';
|
||||
// @form-font-height: ceil(@font-size-base * @line-height-base);
|
||||
|
||||
// .@{form-prefix-cls} {
|
||||
// .reset-component();
|
||||
// .reset-form();
|
||||
|
||||
// .@{form-prefix-cls}-text {
|
||||
// display: inline-block;
|
||||
// padding-right: 8px;
|
||||
// }
|
||||
|
||||
// // ================================================================
|
||||
// // = Size =
|
||||
// // ================================================================
|
||||
// .formSize(@input-height) {
|
||||
// .@{form-item-prefix-cls}-label > label {
|
||||
// height: @input-height;
|
||||
// }
|
||||
|
||||
// .@{form-item-prefix-cls}-control-input {
|
||||
// min-height: @input-height;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-small {
|
||||
// .formSize(@input-height-sm);
|
||||
// }
|
||||
|
||||
// &-large {
|
||||
// .formSize(@input-height-lg);
|
||||
// }
|
||||
// }
|
||||
|
||||
// .explainAndExtraDistance(@num) when (@num >= 0) {
|
||||
// padding-top: floor(@num);
|
||||
// }
|
||||
|
||||
// .explainAndExtraDistance(@num) when (@num < 0) {
|
||||
// margin-top: ceil(@num);
|
||||
// margin-bottom: ceil(@num);
|
||||
// }
|
||||
|
||||
// // ================================================================
|
||||
// // = Item =
|
||||
// // ================================================================
|
||||
// .@{form-item-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
// margin-bottom: @form-item-margin-bottom;
|
||||
// vertical-align: top;
|
||||
// // We delay one frame (0.017s) here to let CSSMotion goes
|
||||
// transition: margin-bottom @animation-duration-slow 0.017s linear;
|
||||
|
||||
// &-with-help {
|
||||
// margin-bottom: 0;
|
||||
// transition: none;
|
||||
// }
|
||||
|
||||
// &-hidden,
|
||||
// &-hidden.@{ant-prefix}-row {
|
||||
// // https://github.com/ant-design/ant-design/issues/26141
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// // ==============================================================
|
||||
// // = Label =
|
||||
// // ==============================================================
|
||||
// &-label {
|
||||
// display: inline-block;
|
||||
// flex-grow: 0;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-align: right;
|
||||
// vertical-align: middle;
|
||||
|
||||
// &-left {
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
// &-wrap {
|
||||
// overflow: unset;
|
||||
// line-height: (@line-height-base - 0.25em);
|
||||
// white-space: unset;
|
||||
// }
|
||||
|
||||
// > label {
|
||||
// position: relative;
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// max-width: 100%;
|
||||
// height: @form-item-label-height;
|
||||
// color: @label-color;
|
||||
// font-size: @form-item-label-font-size;
|
||||
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// font-size: @form-item-label-font-size;
|
||||
// vertical-align: top;
|
||||
// }
|
||||
|
||||
// // Required mark
|
||||
// &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
|
||||
// display: inline-block;
|
||||
// margin-right: 4px;
|
||||
// color: @label-required-color;
|
||||
// font-size: @form-item-label-font-size;
|
||||
// font-family: SimSun, sans-serif;
|
||||
// line-height: 1;
|
||||
// content: '*';
|
||||
|
||||
// .@{form-prefix-cls}-hide-required-mark & {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Optional mark
|
||||
// .@{form-item-prefix-cls}-optional {
|
||||
// display: inline-block;
|
||||
// margin-left: @margin-xss;
|
||||
// color: @text-color-secondary;
|
||||
|
||||
// .@{form-prefix-cls}-hide-required-mark & {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Optional mark
|
||||
// .@{form-item-prefix-cls}-tooltip {
|
||||
// color: @text-color-secondary;
|
||||
// cursor: help;
|
||||
// writing-mode: horizontal-tb;
|
||||
// margin-inline-start: @margin-xss;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// & when (@form-item-trailing-colon=true) {
|
||||
// content: ':';
|
||||
// }
|
||||
// & when not (@form-item-trailing-colon=true) {
|
||||
// content: ' ';
|
||||
// }
|
||||
|
||||
// position: relative;
|
||||
// top: -0.5px;
|
||||
// margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
|
||||
// }
|
||||
|
||||
// &.@{form-item-prefix-cls}-no-colon::after {
|
||||
// content: ' ';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // ==============================================================
|
||||
// // = Input =
|
||||
// // ==============================================================
|
||||
// &-control {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// flex-grow: 1;
|
||||
|
||||
// &:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-control-input {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// min-height: @input-height-base;
|
||||
|
||||
// &-content {
|
||||
// flex: auto;
|
||||
// max-width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // ==============================================================
|
||||
// // = Explain =
|
||||
// // ==============================================================
|
||||
// &-explain,
|
||||
// &-extra {
|
||||
// clear: both;
|
||||
// color: @text-color-secondary;
|
||||
// font-size: @font-size-base;
|
||||
// line-height: @line-height-base;
|
||||
// transition: color 0.3s @ease-out; // sync input color transition
|
||||
// .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
|
||||
// }
|
||||
|
||||
// &-explain-connected {
|
||||
// height: 0;
|
||||
// min-height: 0;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// &-extra {
|
||||
// min-height: @form-item-margin-bottom;
|
||||
// }
|
||||
|
||||
// .@{ant-prefix}-input-textarea-show-count {
|
||||
// &::after {
|
||||
// margin-bottom: -22px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-with-help &-explain {
|
||||
// height: auto;
|
||||
// min-height: @form-item-margin-bottom;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // >>>>>>>>>> Motion <<<<<<<<<<
|
||||
// // Explain holder
|
||||
// .@{ant-prefix}-show-help {
|
||||
// transition: height @animation-duration-slow linear, min-height @animation-duration-slow linear,
|
||||
// margin-bottom @animation-duration-slow @ease-in-out,
|
||||
// opacity @animation-duration-slow @ease-in-out;
|
||||
|
||||
// &-leave {
|
||||
// min-height: @form-item-margin-bottom;
|
||||
|
||||
// &-active {
|
||||
// min-height: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Explain
|
||||
// .@{ant-prefix}-show-help-item {
|
||||
// overflow: hidden;
|
||||
// transition: height @animation-duration-slow @ease-in-out,
|
||||
// opacity @animation-duration-slow @ease-in-out, transform @animation-duration-slow @ease-in-out !important;
|
||||
|
||||
// &-appear,
|
||||
// &-enter {
|
||||
// transform: translateY(-5px);
|
||||
// opacity: 0;
|
||||
|
||||
// &-active {
|
||||
// transform: translateY(0);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-leave-active {
|
||||
// transform: translateY(-5px);
|
||||
// }
|
||||
// }
|
||||
|
||||
// // need there different zoom animation
|
||||
// // otherwise won't trigger anim
|
||||
// @keyframes diffZoomIn1 {
|
||||
// 0% {
|
||||
// transform: scale(0);
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// transform: scale(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @keyframes diffZoomIn2 {
|
||||
// 0% {
|
||||
// transform: scale(0);
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// transform: scale(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @keyframes diffZoomIn3 {
|
||||
// 0% {
|
||||
// transform: scale(0);
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// transform: scale(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import './rtl';
|
||||
@ -1,4 +1,3 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { zoomIn } from '../../style/motion';
|
||||
import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
@import (reference) '../../style/themes/index';
|
||||
|
||||
@form-prefix-cls: ~'@{ant-prefix}-form';
|
||||
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
|
||||
|
||||
.@{form-prefix-cls}-inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.@{form-prefix-cls}-item {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
&-with-help {
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
}
|
||||
|
||||
> .@{form-item-prefix-cls}-label,
|
||||
> .@{form-item-prefix-cls}-control {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
> .@{form-item-prefix-cls}-label {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.@{form-prefix-cls}-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.@{form-item-prefix-cls}-has-feedback {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user