Browse Source
* 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 scriptpull/36386/head
MadCcc
2 years ago
committed by
GitHub
GitHub
345 changed files with 38 additions and 29377 deletions
@ -1,195 +1,32 @@ |
|||
const fs = require('fs'); |
|||
const path = require('path'); |
|||
const defaultVars = require('./scripts/default-vars'); |
|||
const darkVars = require('./scripts/dark-vars'); |
|||
const compactVars = require('./scripts/compact-vars'); |
|||
|
|||
function generateThemeFileContent(theme) { |
|||
return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n |
|||
module.exports = { |
|||
...defaultTheme, |
|||
...${theme}ThemeSingle |
|||
}`;
|
|||
} |
|||
|
|||
// We need compile additional content for antd user
|
|||
function finalizeCompile() { |
|||
if (fs.existsSync(path.join(__dirname, './es'))) { |
|||
// Build a entry less file to dist/antd.less
|
|||
const componentsPath = path.join(process.cwd(), 'components'); |
|||
let componentsLessContent = ''; |
|||
// Build components in one file: es/style/components.less
|
|||
fs.readdir(componentsPath, (err, files) => { |
|||
files.forEach(file => { |
|||
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) { |
|||
componentsLessContent += `@import "../${path.posix.join( |
|||
file, |
|||
'style', |
|||
'index-pure.less', |
|||
)}";\n`;
|
|||
} |
|||
}); |
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'es', 'style', 'components.less'), |
|||
componentsLessContent, |
|||
); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
function buildThemeFile(theme, vars) { |
|||
// Build less entry file: dist/antd.${theme}.less
|
|||
if (theme !== 'default') { |
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', `antd.${theme}.less`), |
|||
`@import "../es/style/${theme}.less";\n@import "../es/style/components.less";`, |
|||
); |
|||
// eslint-disable-next-line no-console
|
|||
console.log(`Built a entry less file to dist/antd.${theme}.less`); |
|||
} else { |
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', `default-theme.js`), |
|||
`module.exports = ${JSON.stringify(vars, null, 2)};\n`, |
|||
// Build less entry file: dist/antd.less
|
|||
fs.copyFileSync( |
|||
path.join(process.cwd(), 'components', 'style', 'reset.css'), |
|||
path.join(process.cwd(), 'es', 'style', 'reset.css'), |
|||
); |
|||
return; |
|||
} |
|||
|
|||
// Build ${theme}.js: dist/${theme}-theme.js, for less-loader
|
|||
|
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', `theme.js`), |
|||
`const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`, |
|||
{ |
|||
flag: 'a', |
|||
}, |
|||
); |
|||
|
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', `${theme}-theme.js`), |
|||
generateThemeFileContent(theme), |
|||
); |
|||
|
|||
// eslint-disable-next-line no-console
|
|||
console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`); |
|||
} |
|||
|
|||
function finalizeDist() { |
|||
if (fs.existsSync(path.join(__dirname, './dist'))) { |
|||
// Build less entry file: dist/antd.less
|
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', 'antd.less'), |
|||
'@import "../es/style/default.less";\n@import "../es/style/components.less";', |
|||
); |
|||
// eslint-disable-next-line no-console
|
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', 'theme.js'), |
|||
`const defaultTheme = require('./default-theme.js');\n`, |
|||
); |
|||
// eslint-disable-next-line no-console
|
|||
console.log('Built a entry less file to dist/antd.less'); |
|||
buildThemeFile('default', defaultVars); |
|||
buildThemeFile('dark', darkVars); |
|||
buildThemeFile('compact', compactVars); |
|||
buildThemeFile('variable', {}); |
|||
fs.writeFileSync( |
|||
path.join(process.cwd(), 'dist', `theme.js`), |
|||
` |
|||
function getThemeVariables(options = {}) { |
|||
let themeVar = { |
|||
'hack': \`true;@import "\${require.resolve('antd/es/style/color/colorPalette.less')}";\`,
|
|||
...defaultTheme |
|||
}; |
|||
if(options.dark) { |
|||
themeVar = { |
|||
...themeVar, |
|||
...darkThemeSingle |
|||
} |
|||
} |
|||
if(options.compact){ |
|||
themeVar = { |
|||
...themeVar, |
|||
...compactThemeSingle |
|||
} |
|||
} |
|||
return themeVar; |
|||
} |
|||
|
|||
module.exports = { |
|||
darkThemeSingle, |
|||
compactThemeSingle, |
|||
getThemeVariables |
|||
}`,
|
|||
{ |
|||
flag: 'a', |
|||
}, |
|||
fs.copyFileSync( |
|||
path.join(process.cwd(), 'components', 'style', 'reset.css'), |
|||
path.join(process.cwd(), 'dist', 'reset.css'), |
|||
); |
|||
} |
|||
} |
|||
|
|||
function isComponentStyleEntry(file) { |
|||
return file.path.match(/style(\/|\\)index\.tsx/); |
|||
} |
|||
|
|||
function needTransformStyle(content) { |
|||
return content.includes('../../style/index.less') || content.includes('./index.less'); |
|||
} |
|||
|
|||
module.exports = { |
|||
compile: { |
|||
includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/], |
|||
transformTSFile(file) { |
|||
if (isComponentStyleEntry(file)) { |
|||
let content = file.contents.toString(); |
|||
|
|||
if (needTransformStyle(content)) { |
|||
const cloneFile = file.clone(); |
|||
|
|||
// Origin
|
|||
content = content.replace('../../style/index.less', '../../style/default.less'); |
|||
cloneFile.contents = Buffer.from(content); |
|||
|
|||
return cloneFile; |
|||
} |
|||
} |
|||
}, |
|||
transformFile(file) { |
|||
if (isComponentStyleEntry(file)) { |
|||
const indexLessFilePath = file.path.replace('index.tsx', 'index.less'); |
|||
|
|||
if (fs.existsSync(indexLessFilePath)) { |
|||
// We put origin `index.less` file to `index-pure.less`
|
|||
const pureFile = file.clone(); |
|||
pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8')); |
|||
pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less'); |
|||
|
|||
// Rewrite `index.less` file with `root-entry-name`
|
|||
const indexLessFile = file.clone(); |
|||
indexLessFile.contents = Buffer.from( |
|||
[ |
|||
// Inject variable
|
|||
'@root-entry-name: default;', |
|||
// Point to origin file
|
|||
"@import './index-pure.less';", |
|||
].join('\n\n'), |
|||
); |
|||
indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less'); |
|||
|
|||
return [indexLessFile, pureFile]; |
|||
} |
|||
} |
|||
|
|||
return []; |
|||
}, |
|||
lessConfig: { |
|||
modifyVars: { |
|||
'root-entry-name': 'default', |
|||
}, |
|||
}, |
|||
finalize: finalizeCompile, |
|||
}, |
|||
dist: { |
|||
finalize: finalizeDist, |
|||
}, |
|||
generateThemeFileContent, |
|||
bail: true, |
|||
}; |
|||
|
|||
@ -1,6 +0,0 @@ |
|||
// @import '../../style/themes/index'; |
|||
|
|||
// .@{ant-prefix}-affix { |
|||
// position: fixed; |
|||
// z-index: @zindex-affix; |
|||
// } |
|||
@ -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,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,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,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,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,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,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,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,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,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,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,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,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,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; |
|||
} |
|||
} |
|||
} |
|||
@ -1,2 +0,0 @@ |
|||
// placeholder |
|||
@import '../../style/themes/index'; |
|||
@ -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,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,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,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,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,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,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 changed in this diff
Loading…
Reference in new issue