diff --git a/.antd-tools.config.js b/.antd-tools.config.js index ecab481849..04f8e8744d 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -3,6 +3,7 @@ const path = require('path'); // eslint-disable-next-line import/no-extraneous-dependencies const packageInfo = require('./package.json'); const darkVars = require('./scripts/dark-vars'); +const compactVars = require('./scripts/compact-vars'); // We need compile additional content for antd user function finalizeCompile() { @@ -49,6 +50,27 @@ function finalizeCompile() { } } +function buildThemeFile(theme, vars) { + // Build less entry file: dist/antd.${theme}.less + fs.writeFileSync( + path.join(process.cwd(), 'dist', `antd.${theme}.less`), + `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`, + ); + + // eslint-disable-next-line + console.log(`Built a entry less file to dist/antd.${theme}.less`); + + // Build ${theme}.js: dist/${theme}-theme.js, for less-loader + + fs.writeFileSync( + path.join(process.cwd(), 'dist', `${theme}-theme.js`), + `module.exports = ${JSON.stringify(vars, null, 2)};`, + ); + + // eslint-disable-next-line + 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 @@ -56,28 +78,10 @@ function finalizeDist() { path.join(process.cwd(), 'dist', 'antd.less'), '@import "../lib/style/index.less";\n@import "../lib/style/components.less";', ); - // eslint-disable-next-line console.log('Built a entry less file to dist/antd.less'); - - // Build less entry file: dist/antd.dark.less - fs.writeFileSync( - path.join(process.cwd(), 'dist', 'antd.dark.less'), - '@import "../lib/style/dark.less";\n@import "../lib/style/components.less";', - ); - - // eslint-disable-next-line - console.log('Built a entry less file to dist/antd.dark.less'); - - // Build dark.js: dist/dark-theme.js, for less-loader - - fs.writeFileSync( - path.join(process.cwd(), 'dist', 'dark-theme.js'), - `module.exports = ${JSON.stringify(darkVars, null, 2)};`, - ); - - // eslint-disable-next-line - console.log('Built a dark theme js file to dist/dark-theme.js'); + buildThemeFile('dark', darkVars); + buildThemeFile('compact', compactVars); } } diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 1304acb855..f067706076 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -12,7 +12,7 @@ border-radius: @border-radius-base; &&-no-icon { - padding: 8px 15px; + padding: @alert-no-icon-padding-vertical 15px; } &&-closable { @@ -71,7 +71,7 @@ &-close-icon { position: absolute; - top: 8px; + top: @padding-xs; right: 16px; padding: 0; overflow: hidden; @@ -108,7 +108,7 @@ } &-with-description&-no-icon { - padding: 15px; + padding: @alert-with-description-no-icon-padding-vertical 15px; } &-with-description &-icon { diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less index 2dd48ff982..0430918761 100644 --- a/components/auto-complete/style/index.less +++ b/components/auto-complete/style/index.less @@ -12,5 +12,5 @@ // https://github.com/ant-design/ant-design/issues/22302 .@{select-prefix-cls}-clear { right: 13px; - } + } } diff --git a/components/button/style/index.less b/components/button/style/index.less index da3bedb0a8..b90599bca2 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -182,7 +182,7 @@ // To ensure that a space will be placed between character and `Icon`. > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} { - margin-left: 8px; + margin-left: @margin-xs; } &-background-ghost { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 5ceb216e7e..2de79b94d4 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -254,6 +254,7 @@ .button-size( @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm ); + line-height: @btn-height-sm - 2px; } } // primary button style @@ -370,14 +371,23 @@ // square button: the content only contains icon .btn-square(@btnClassName: btn) { .square(@btn-square-size); - .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius-base); + .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-font-size-lg + 2px; @btn-border-radius-base); + .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; @font-size-base; @btn-border-radius-base); + .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 diff --git a/components/card/style/index.less b/components/card/style/index.less index 444ba7ba23..f1500bcd22 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -2,7 +2,6 @@ @import '../../style/mixins/index'; @card-prefix-cls: ~'@{ant-prefix}-card'; -@card-head-height: 48px; @card-hoverable-hover-border: transparent; @card-action-icon-size: 16px; @@ -39,7 +38,7 @@ padding: 0 @card-padding-base; color: @card-head-color; font-weight: 500; - font-size: @font-size-lg; + 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; @@ -61,7 +60,7 @@ .@{ant-prefix}-tabs { clear: both; - margin-bottom: -17px; + margin-bottom: @card-head-tabs-margin-bottom; color: @text-color; font-weight: normal; font-size: @font-size-base; @@ -154,7 +153,7 @@ & > li { float: left; - margin: 12px 0; + margin: @card-actions-li-margin; color: @text-color-secondary; text-align: center; @@ -236,7 +235,7 @@ &-detail { overflow: hidden; > div:not(:last-child) { - margin-bottom: 8px; + margin-bottom: @margin-xs; } } diff --git a/components/card/style/size.less b/components/card/style/size.less index 6282910afd..00bb7a7a06 100644 --- a/components/card/style/size.less +++ b/components/card/style/size.less @@ -1,7 +1,4 @@ -@card-head-height-sm: 36px; -@card-padding-base-sm: @card-padding-base / 2; -@card-head-padding-sm: @card-head-padding / 2; -@card-head-font-size-sm: @font-size-base; +@import './index'; .@{card-prefix-cls}-small { > .@{card-prefix-cls}-head { diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md index db741a6017..c3aa79c7d8 100644 --- a/components/collapse/demo/basic.md +++ b/components/collapse/demo/basic.md @@ -45,7 +45,7 @@ ReactDOM.render( ``` diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md index 2cb3beec89..152a5db58e 100644 --- a/components/collapse/demo/custom.md +++ b/components/collapse/demo/custom.md @@ -47,6 +47,7 @@ ReactDOM.render( ``` ```css +[data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel, .site-collapse-custom-collapse .site-collapse-custom-panel { background: #f7f7f7; border-radius: 2px; diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 0af056a8df..44afaa92d7 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -15,7 +15,7 @@ &-avatar { position: relative; flex-shrink: 0; - margin-right: 12px; + margin-right: @margin-sm; cursor: pointer; img { @@ -36,11 +36,11 @@ display: flex; flex-wrap: wrap; justify-content: flex-start; - margin-bottom: 4px; + margin-bottom: @margin-xss; font-size: @comment-font-size-base; & > a, & > span { - padding-right: 8px; + padding-right: @padding-xs; font-size: @comment-font-size-sm; line-height: 18px; } @@ -65,12 +65,14 @@ } &-detail p { + margin-bottom: @comment-content-detail-p-margin-bottom; white-space: pre-wrap; } } &-actions { - margin-top: 12px; + margin-top: @comment-actions-margin-top; + margin-bottom: @comment-actions-margin-bottom; padding-left: 0; > li { diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 376bf0934e..222e35013f 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -9,8 +9,8 @@ .picker-padding(@input-height, @font-size, @padding-horizontal) { // font height probably 22.0001， So use floor better @font-height: floor(@font-size * @line-height-base) + 2; - @padding-top: (@input-height - @font-height) / 2; - @padding-bottom: @input-height - @font-height - @padding-top; + @padding-top: max((@input-height - @font-height) / 2, 0); + @padding-bottom: max(@input-height - @font-height - @padding-top, 0); padding: @padding-top @padding-horizontal @padding-bottom; } diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less index 84416d4934..06d730d996 100644 --- a/components/date-picker/style/panel.less +++ b/components/date-picker/style/panel.less @@ -660,11 +660,11 @@ .@{picker-prefix-cls}-time-panel-cell-inner { display: block; width: 100%; - height: 32px; + height: @picker-time-panel-cell-height; margin: 0; padding: 0; color: @text-color; - line-height: 32px; + line-height: @picker-time-panel-cell-height; text-align: center; border-radius: 0; cursor: pointer; diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 0a5f0a7d16..2480e1da75 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -3,13 +3,9 @@ @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; -@descriptions-default-padding: 16px 24px; -@descriptions-middle-padding: 12px 24px; -@descriptions-small-padding: 8px 16px; - .@{descriptions-prefix-cls} { &-title { - margin-bottom: 20px; + margin-bottom: @descriptions-title-margin-bottom; color: @heading-color; font-weight: bold; font-size: @font-size-lg; @@ -29,7 +25,7 @@ &-row { > th, > td { - padding-bottom: 16px; + padding-bottom: @padding-md; } &:last-child { border-bottom: none; @@ -81,7 +77,7 @@ .@{descriptions-prefix-cls}-row { > th, > td { - padding-bottom: 12px; + padding-bottom: @padding-sm; } } } @@ -90,7 +86,7 @@ .@{descriptions-prefix-cls}-row { > th, > td { - padding-bottom: 8px; + padding-bottom: @padding-xs; } } } diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md index 69084e4096..1cc90214ff 100644 --- a/components/drawer/demo/basic-right.md +++ b/components/drawer/demo/basic-right.md @@ -55,3 +55,9 @@ class App extends React.Component { ReactDOM.render(, mountNode); ``` + +```css +[data-theme='compact'] .ant-drawer-body p { + margin-bottom: 0px; +} +``` diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 1801cba1e7..6abe5204b3 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -157,14 +157,14 @@ right: 0; z-index: @zindex-popup-close; display: block; - width: 56px; - height: 56px; + width: @drawer-header-close-size; + height: @drawer-header-close-size; padding: 0; color: @text-color-secondary; font-weight: 700; font-size: @font-size-lg; font-style: normal; - line-height: 56px; + line-height: @drawer-header-close-size; text-align: center; text-transform: none; text-decoration: none; diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md index b9a844ad52..fcd3c61e27 100644 --- a/components/form/demo/advanced-search.md +++ b/components/form/demo/advanced-search.md @@ -99,6 +99,7 @@ ReactDOM.render( ``` ```css +[data-theme='compact'] .ant-advanced-search-form, .ant-advanced-search-form { padding: 24px; background: #fbfbfb; @@ -106,10 +107,12 @@ ReactDOM.render( border-radius: 2px; } +[data-theme='compact'] .ant-advanced-search-form .ant-form-item, .ant-advanced-search-form .ant-form-item { display: flex; } +[data-theme='compact'] .ant-advanced-search-form .ant-form-item-control-wrapper, .ant-advanced-search-form .ant-form-item-control-wrapper { flex: 1; } diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index b07a06416a..c8fe97791a 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -42,8 +42,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = ` class="ant-input-group-addon" >
+ ); const selectAfter = ( - @@ -52,3 +52,21 @@ ReactDOM.render( mountNode, ); ``` + +```css +.select-before { + width: 90px; +} + +.select-after { + width: 80px; +} + +[data-theme='compact'] .select-before { + width: 71px; +} + +[data-theme='compact'] .select-after { + width: 65px; +} +``` diff --git a/components/input/style/allow-clear.less b/components/input/style/allow-clear.less index 7166c1ba5d..8c7eeb5c5d 100644 --- a/components/input/style/allow-clear.less +++ b/components/input/style/allow-clear.less @@ -34,8 +34,8 @@ // ======================= TextArea ======================== .@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn { - padding: 0; - border: 0; + padding: 0 !important; + border: 0 !important; } .@{ant-prefix}-input-textarea-clear-icon { diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md index 9bf517a6e2..f4f7d949e1 100644 --- a/components/layout/demo/fixed.md +++ b/components/layout/demo/fixed.md @@ -23,11 +23,7 @@ ReactDOM.render(
- + nav 1 nav 2 nav 3 diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md index f69a92eaef..b719f9e1df 100644 --- a/components/layout/demo/top-side-2.md +++ b/components/layout/demo/top-side-2.md @@ -24,11 +24,7 @@ ReactDOM.render(
- + nav 1 nav 2 nav 3 diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md index 794f42631b..3cc82dc2b3 100644 --- a/components/layout/demo/top-side.md +++ b/components/layout/demo/top-side.md @@ -24,11 +24,7 @@ ReactDOM.render(
- + nav 1 nav 2 nav 3 diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md index 76e3303d1f..1db7fb5a2a 100644 --- a/components/layout/demo/top.md +++ b/components/layout/demo/top.md @@ -28,11 +28,7 @@ ReactDOM.render(
- + nav 1 nav 2 nav 3 diff --git a/components/list/style/bordered.less b/components/list/style/bordered.less index c2083496cd..63859a3eb1 100644 --- a/components/list/style/bordered.less +++ b/components/list/style/bordered.less @@ -1,40 +1,44 @@ +@import '../../style/themes/index'; + .@{list-prefix-cls}-bordered { border: 1px solid @border-color-base; border-radius: @border-radius-base; .@{list-prefix-cls}-header { - padding-right: 24px; - padding-left: 24px; + padding-right: @padding-lg; + padding-left: @padding-lg; } .@{list-prefix-cls}-footer { - padding-right: 24px; - padding-left: 24px; + padding-right: @padding-lg; + padding-left: @padding-lg; } .@{list-prefix-cls}-item { - padding-right: 24px; - padding-left: 24px; + padding-right: @padding-lg; + padding-left: @padding-lg; } .@{list-prefix-cls}-pagination { - margin: 16px 24px; + margin: @margin-md @margin-lg; } &.@{list-prefix-cls}-sm { .@{list-prefix-cls}-item { - padding-right: 16px; - padding-left: 16px; + padding: @list-item-padding-sm; } .@{list-prefix-cls}-header, .@{list-prefix-cls}-footer { - padding: 8px 16px; + padding: @list-item-padding-sm; } } &.@{list-prefix-cls}-lg { + .@{list-prefix-cls}-item { + padding: @list-item-padding-lg; + } .@{list-prefix-cls}-header, .@{list-prefix-cls}-footer { - padding: 16px 24px; + padding: @list-item-padding-lg; } } } diff --git a/components/list/style/index.less b/components/list/style/index.less index db19017cd6..865756c903 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -14,7 +14,7 @@ } &-pagination { - margin-top: 24px; + margin-top: @margin-lg; text-align: right; // https://github.com/ant-design/ant-design/issues/20037 @@ -24,7 +24,7 @@ } &-more { - margin-top: 12px; + margin-top: @margin-sm; text-align: center; button { padding-right: 32px; @@ -87,7 +87,7 @@ } &-description { color: @text-color-secondary; - font-size: @font-size-base; + font-size: @list-item-meta-description-font-size; line-height: 22px; } } @@ -101,7 +101,7 @@ & > li { position: relative; display: inline-block; - padding: 0 8px; + padding: 0 @padding-xs; color: @text-color-secondary; font-size: @font-size-base; line-height: 22px; @@ -133,12 +133,12 @@ &-header, &-footer { - padding-top: 12px; - padding-bottom: 12px; + padding-top: @padding-sm; + padding-bottom: @padding-sm; } &-empty { - padding: 16px 0; + padding: @padding-md 0; color: @text-color-secondary; font-size: 12px; text-align: center; @@ -164,13 +164,11 @@ } &-lg &-item { - padding-top: 16px; - padding-bottom: 16px; + padding: @list-item-padding-lg; } &-sm &-item { - padding-top: 8px; - padding-bottom: 8px; + padding: @list-item-padding-sm; } &-vertical &-item { @@ -201,7 +199,7 @@ margin-left: auto; > li { - padding: 0 16px; + padding: 0 @padding-md; &:first-child { padding-left: 0; } @@ -212,7 +210,7 @@ &-grid .@{ant-prefix}-col > &-item { display: block; max-width: 100%; - margin-bottom: 16px; + margin-bottom: @margin-md; padding-top: 0; padding-bottom: 0; border-bottom: none; diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js index a834d67e76..2a9127921d 100644 --- a/components/menu/__tests__/index.test.js +++ b/components/menu/__tests__/index.test.js @@ -381,9 +381,7 @@ describe('Menu', () => { inlineCollapsed getPopupContainer={node => node.parentNode} > - - item - + item item @@ -401,12 +399,48 @@ describe('Menu', () => { , ); - expect(wrapper.find(Menu.Item).at(0).find(Tooltip).props().title).toBe('item'); - expect(wrapper.find(Menu.Item).at(1).find(Tooltip).props().title).toBe('title'); - expect(wrapper.find(Menu.Item).at(2).find(Tooltip).props().title).toBe('item'); - expect(wrapper.find(Menu.Item).at(3).find(Tooltip).props().title).toBe(null); - expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe(''); - expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe(''); + expect( + wrapper + .find(Menu.Item) + .at(0) + .find(Tooltip) + .props().title, + ).toBe('item'); + expect( + wrapper + .find(Menu.Item) + .at(1) + .find(Tooltip) + .props().title, + ).toBe('title'); + expect( + wrapper + .find(Menu.Item) + .at(2) + .find(Tooltip) + .props().title, + ).toBe('item'); + expect( + wrapper + .find(Menu.Item) + .at(3) + .find(Tooltip) + .props().title, + ).toBe(null); + expect( + wrapper + .find(Menu.Item) + .at(4) + .find(Tooltip) + .props().title, + ).toBe(''); + expect( + wrapper + .find(Menu.Item) + .at(4) + .find(Tooltip) + .props().title, + ).toBe(''); }); describe('open submenu when click submenu title', () => { diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 2d801f0f89..d40fe3a212 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -30,10 +30,11 @@ } &-item-group-title { + height: @menu-item-group-height; padding: 8px 16px; color: @menu-item-group-title-color; font-size: @font-size-base; - line-height: @line-height-base; + line-height: @menu-item-group-height; transition: all 0.3s; } diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index a1978d1d21..f87a7ba5f2 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -12,7 +12,7 @@ } .@{ant-prefix}-modal-body { - padding: 32px 32px 24px; + padding: @modal-confirm-body-padding; } &-body-wrapper { diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 3867e45041..ea4b980e57 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -60,11 +60,11 @@ &-x { display: block; - width: 56px; - height: 56px; + width: @modal-header-close-size; + height: @modal-header-close-size; font-size: @font-size-lg; font-style: normal; - line-height: 56px; + line-height: @modal-header-close-size; text-align: center; text-transform: none; text-rendering: auto; @@ -78,7 +78,7 @@ } &-header { - padding: 16px 24px; + padding: @modal-header-padding; color: @text-color; background: @modal-header-bg; border-bottom: @border-width-base @border-style-base @modal-header-border-color-split; diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 473aba6931..369d6f4123 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -24,7 +24,7 @@ &-back { float: left; margin: 8px 0; - margin-right: 16px; + margin-right: @margin-md; font-size: 16px; line-height: 1; @@ -37,12 +37,12 @@ .@{ant-prefix}-divider-vertical { height: 14px; - margin: 0 12px; + margin: 0 @margin-sm; vertical-align: middle; } .@{ant-prefix}-breadcrumb + &-heading { - margin-top: 8px; + margin-top: @margin-xs; } &-heading { @@ -53,7 +53,7 @@ display: block; float: left; margin-bottom: 0; - padding-right: 12px; + padding-right: @padding-sm; color: @heading-color; font-weight: 600; font-size: @heading-4-size; @@ -62,13 +62,13 @@ .@{ant-prefix}-avatar { float: left; - margin-right: 12px; + margin-right: @margin-sm; } &-sub-title { float: left; margin: 5px 0; - margin-right: 12px; + margin-right: @margin-sm; color: @text-color-secondary; font-size: 14px; line-height: 22px; @@ -92,11 +92,11 @@ } &-content { - padding-top: 12px; + padding-top: @page-header-content-padding-vertical; } &-footer { - margin-top: 16px; + margin-top: @margin-md; .@{ant-prefix}-tabs-bar { margin-bottom: 1px; border-bottom: 0; @@ -116,7 +116,7 @@ float: unset; clear: both; width: 100%; - padding-top: 12px; + padding-top: @padding-sm; } } } diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index f7c7354d02..0eb7246965 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -321,6 +321,10 @@ &.mini &-options { margin-left: 2px; + &-size-changer { + top: @pagination-mini-options-size-changer-top; + } + &-quick-jumper { height: @pagination-item-size-sm; line-height: @pagination-item-size-sm; diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md index 1f7a4e54cf..d96fb9afb0 100755 --- a/components/popover/demo/basic.md +++ b/components/popover/demo/basic.md @@ -32,7 +32,7 @@ ReactDOM.render( ``` diff --git a/components/popover/style/index.less b/components/popover/style/index.less index 586ed649e9..629f548b9f 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -68,16 +68,16 @@ &-title { min-width: @popover-min-width; - min-height: 32px; + min-height: @popover-min-height; margin: 0; // reset heading margin - padding: 5px @padding-md 4px; + padding: 5px @popover-padding-horizontal 4px; color: @heading-color; font-weight: 500; border-bottom: 1px solid @border-color-split; } &-inner-content { - padding: 12px @padding-md; + padding: @padding-sm @popover-padding-horizontal; color: @popover-color; } diff --git a/components/select/style/index.less b/components/select/style/index.less index 7a3b657be6..701031c7ad 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -52,7 +52,6 @@ .@{select-prefix-cls} { .reset-component; - position: relative; display: inline-block; @@ -188,7 +187,7 @@ .item() { position: relative; display: block; - min-height: 32px; + min-height: @select-dropdown-height; padding: @select-dropdown-vertical-padding @control-padding-horizontal; color: @text-color; font-weight: normal; diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 59770f1818..168cdd21ea 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -1,9 +1,7 @@ @import './index'; @select-multiple-item-border-width: 1px; -@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px -@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); @select-multiple-padding: max( @input-padding-vertical-base - @select-multiple-item-border-width - @select-multiple-item-spacing-half, @@ -156,7 +154,7 @@ } } - .select-size('lg', @input-height-lg); + .select-size('lg', @select-multiple-item-height-lg); .select-size('sm', @input-height-sm); // Size small need additional set padding @@ -165,4 +163,10 @@ left: @input-padding-horizontal-sm; } } + &.@{select-prefix-cls}-lg { + .@{select-prefix-cls}-selection-item { + height: @select-multiple-item-height-lg; + line-height: @select-multiple-item-height-lg; + } + } } diff --git a/components/select/style/single.less b/components/select/style/single.less index bf6a2aebea..feae88bcf0 100644 --- a/components/select/style/single.less +++ b/components/select/style/single.less @@ -130,7 +130,7 @@ } } - .select-size('lg', @input-height-lg); + .select-size('lg', @select-single-item-height-lg); .select-size('sm', @input-height-sm); // Size small need additional set padding @@ -156,4 +156,12 @@ } } } + + &.@{select-prefix-cls}-lg { + &:not(.@{select-prefix-cls}-customize-input) { + .@{select-prefix-cls}-selector { + padding: 0 @input-padding-horizontal-lg; + } + } + } } diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index bee5859c71..25fe9fb869 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -14,7 +14,7 @@ &-header { display: table-cell; - padding-right: 16px; + padding-right: @padding-md; vertical-align: top; // Avatar @@ -32,11 +32,11 @@ .@{skeleton-title-prefix-cls} { width: 100%; height: 16px; - margin-top: 16px; + margin-top: @margin-md; background: @skeleton-color; + .@{skeleton-paragraph-prefix-cls} { - margin-top: 24px; + margin-top: @margin-lg; } } @@ -55,7 +55,7 @@ } + li { - margin-top: 16px; + margin-top: @skeleton-paragraph-li-margin-top; } } } @@ -64,10 +64,10 @@ &-with-avatar &-content { // Title .@{skeleton-title-prefix-cls} { - margin-top: 12px; + margin-top: @margin-sm; + .@{skeleton-paragraph-prefix-cls} { - margin-top: 28px; + margin-top: @skeleton-paragraph-margin-top; } } } diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less index 2c4ffe948f..f139e336b2 100644 --- a/components/statistic/style/index.less +++ b/components/statistic/style/index.less @@ -7,7 +7,7 @@ .reset-component; &-title { - margin-bottom: 4px; + margin-bottom: @margin-xss; color: @text-color-secondary; font-size: @statistic-title-font-size; } diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md index 899cc99df3..624535ff12 100644 --- a/components/steps/demo/nav.md +++ b/components/steps/demo/nav.md @@ -90,6 +90,7 @@ ReactDOM.render(, mountNode); ``` ```css +[data-theme='compact'] .site-navigation-steps, .site-navigation-steps { margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset; diff --git a/components/steps/style/custom-icon.less b/components/steps/style/custom-icon.less index 75a6e4feb9..2c65abd78a 100644 --- a/components/steps/style/custom-icon.less +++ b/components/steps/style/custom-icon.less @@ -4,12 +4,12 @@ background: none; border: 0; > .@{steps-prefix-cls}-icon { - top: 0; + top: @steps-icon-custom-top; left: 0.5px; - width: @steps-icon-size; - height: @steps-icon-size; - font-size: 24px; - line-height: @steps-icon-size; + width: @steps-icon-custom-size; + height: @steps-icon-custom-size; + font-size: @steps-icon-custom-font-size; + line-height: @steps-icon-custom-size; } } &.@{steps-prefix-cls}-item-process { @@ -25,6 +25,7 @@ .@{steps-prefix-cls}-item-custom { .@{steps-prefix-cls}-item-icon { width: auto; + background: none; } } } diff --git a/components/steps/style/index.less b/components/steps/style/index.less index f16c7f5f53..696279edad 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -20,13 +20,6 @@ @error-tail-color: @wait-tail-color; @steps-nav-active-color: @primary-color; -@steps-icon-size: 32px; -@steps-small-icon-size: 24px; -@steps-dot-size: 8px; -@steps-current-dot-size: 10px; -@steps-desciption-max-width: 140px; -@steps-nav-content-max-width: auto; - .@{steps-prefix-cls} { .reset-component; @@ -64,8 +57,8 @@ &-icon { width: @steps-icon-size; height: @steps-icon-size; - margin-right: 8px; - font-size: @font-size-lg; + margin: @steps-icon-margin; + font-size: @steps-icon-font-size; font-family: @font-family; line-height: @steps-icon-size; text-align: center; @@ -75,7 +68,7 @@ > .@{steps-prefix-cls}-icon { position: relative; - top: -1px; + top: @steps-icon-top; color: @primary-color; line-height: 1; } @@ -103,11 +96,11 @@ padding-right: 16px; color: @text-color; font-size: @font-size-lg; - line-height: @steps-icon-size; + line-height: @steps-title-line-height; &::after { position: absolute; - top: @steps-icon-size / 2; + top: @steps-title-line-height / 2; left: 100%; display: block; width: 9999px; diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index d130e558db..69ad523190 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -5,7 +5,7 @@ line-height: @line-height-base; } &-tail { - top: 2px; + top: @steps-dot-top; width: 100%; margin: 0 0 0 @steps-desciption-max-width / 2; padding: 0; @@ -93,6 +93,7 @@ .@{steps-prefix-cls}-item-icon { margin-top: 8px; margin-left: 0; + background: none; .@{steps-prefix-cls}-rtl& { margin-right: 0; diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 7c89b088e9..424720d567 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -10,6 +10,7 @@ .@{steps-prefix-cls}-item-icon { width: @steps-small-icon-size; height: @steps-small-icon-size; + margin: @steps-small-icon-margin; font-size: @font-size-sm; line-height: @steps-small-icon-size; text-align: center; diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index bd848cb7f9..ce86ee231c 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -1,5 +1,6 @@ .steps-vertical() { - display: block; + display: flex; + flex-direction: column; .@{steps-prefix-cls}-item { display: block; overflow: visible; @@ -25,7 +26,7 @@ > .@{steps-prefix-cls}-item-tail { position: absolute; top: 0; - left: 16px; + left: @steps-icon-size / 2; width: 1px; height: 100%; padding: @steps-icon-size + 6px 0 6px; diff --git a/components/style/compact.less b/components/style/compact.less new file mode 100644 index 0000000000..0ba5144b0f --- /dev/null +++ b/components/style/compact.less @@ -0,0 +1,2 @@ +@import './themes/compact.less'; +@import './core/index'; diff --git a/components/style/themes/compact.less b/components/style/themes/compact.less new file mode 100644 index 0000000000..513bc32ca6 --- /dev/null +++ b/components/style/themes/compact.less @@ -0,0 +1,172 @@ +@import './default.less'; + +@mode: compact; + +// default paddings +@default-padding-lg: 24px; // containers +@default-padding-md: 16px; // small containers and buttons +@default-padding-sm: 12px; // Form controls and items +@default-padding-xs: 8px; // small items +@default-padding-xss: 4px; // more small + +// vertical paddings +@padding-lg: 16px; // containers +@padding-md: 8px; // small containers and buttons +@padding-sm: 8px; // Form controls and items +@padding-xs: 4px; // small items +@padding-xss: 0px; // more small + +// vertical padding for all form controls +@control-padding-horizontal: @padding-sm; +@control-padding-horizontal-sm: @default-padding-xs; + +// vertical margins +@margin-lg: 16px; // containers +@margin-md: 8px; // small containers and buttons +@margin-sm: 8px; // Form controls and items +@margin-xs: 4px; // small items +@margin-xss: 0px; // more small + +// height rules +@height-base: 28px; +@height-lg: 32px; +@height-sm: 22px; + +// Button +// --- +@btn-padding-horizontal-base: @default-padding-sm - 1px; +@btn-padding-horizontal-lg: @btn-padding-horizontal-base; +@btn-padding-horizontal-sm: @default-padding-xs - 1px; +@btn-square-only-icon-size: 14px; +@btn-square-only-icon-size-sm: 14px; +@btn-square-only-icon-size-lg: 16px; + +//Dropdown +@dropdown-line-height: 18px; + +// Form +// --- +@form-item-margin-bottom: 16px; + +// Input +// --- +@input-padding-vertical-base: max( + round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 - + @border-width-base, + 2px +); +@input-padding-horizontal-lg: 11px; + +// PageHeader +// --- +@page-header-padding: 16px; +@page-header-padding-vertical: 8px; + +// Pagination +// --- +@pagination-mini-options-size-changer-top: 1px; + +// Cascader +// ---- +@cascader-dropdown-line-height: @dropdown-line-height; + +// Select +// --- +@select-dropdown-height: @height-base; +@select-single-item-height-lg: 32px; +@select-multiple-item-height: @input-height-base - max(@input-padding-vertical-base, 4) * 2; // Normal 24px +@select-multiple-item-height-lg: 24px; +@select-multiple-item-spacing-half: 3px; + +// Tree +// --- +@tree-title-height: 20px; + +// Transfer +// --- +@transfer-item-padding-vertical: 3px; +@transfer-list-search-icon-top: 8px; + +// Comment +// --- +@comment-actions-margin-bottom: 0px; +@comment-actions-margin-top: @margin-xs; +@comment-content-detail-p-margin-bottom: 0px; + +// Steps +// --- +@steps-icon-size: 24px; +@steps-icon-custom-size: 20px; +@steps-icon-custom-font-size: 20px; +@steps-icon-custom-top: 2px; +@steps-icon-margin: 2px 8px 2px 0; +@steps-icon-font-size: @font-size-base; +@steps-dot-top: 4px; +@steps-icon-top: 0px; + +// Collapse +// --- +@collapse-header-padding-extra: 32px; + +// List +// --- +@list-item-meta-description-font-size: @font-size-sm; +@list-item-padding-sm: 4px 12px; +@list-item-padding-lg: 12px 16px; + +// Drawer +// --- +@drawer-header-padding: 11px @padding-lg; +@drawer-footer-padding-vertical: @padding-sm; +@drawer-header-close-size: 44px; + +// Modal +// -- +@modal-header-padding: 11px @padding-lg; +@modal-footer-padding-vertical: @padding-sm; +@modal-header-close-size: 44px; +@modal-confirm-body-padding: 24px 24px 16px; + +// popover +// -- +@popover-min-height: 28px; +@popover-padding-horizontal: @default-padding-sm; + +// Card +// --- +@card-padding-base: 16px; +@card-head-height: 36px; +@card-head-font-size: @card-head-font-size-sm; +@card-head-padding: 8px; +@card-padding-base: 12px; +@card-padding-base-sm: @card-padding-base; +@card-head-height-sm: 30px; +@card-head-padding-sm: 4px; +@card-actions-li-margin: 4px 0; +@card-head-tabs-margin-bottom: -9px; + +// Table +// --- +@table-padding-vertical: 12px; +@table-padding-horizontal: 8px; +@table-padding-vertical-md: 8px; +@table-padding-horizontal-md: 8px; +@table-padding-vertical-sm: 4px; +@table-padding-horizontal-sm: 4px; + +// Statistic +// --- +@statistic-content-font-size: 20px; + +// Alert +// --- +@alert-with-description-no-icon-padding-vertical: 11px; + +// Skeleton +// --- +@skeleton-paragraph-margin-top: 20px; +@skeleton-paragraph-li-margin-top: 12px; + +// Descriptions +@descriptions-title-margin-bottom: 8px; +@descriptions-default-padding: 12px @padding-lg; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 479707b740..50478c866f 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -79,11 +79,24 @@ @padding-md: 16px; // small containers and buttons @padding-sm: 12px; // Form controls and items @padding-xs: 8px; // small items +@padding-xss: 4px; // more small // vertical padding for all form controls @control-padding-horizontal: @padding-sm; @control-padding-horizontal-sm: @padding-xs; +// vertical margins +@margin-lg: 24px; // containers +@margin-md: 16px; // small containers and buttons +@margin-sm: 12px; // Form controls and items +@margin-xs: 8px; // small items +@margin-xss: 4px; // more small + +// height rules +@height-base: 32px; +@height-lg: 40px; +@height-sm: 24px; + // The background colors for active and hover states for things like // list items or table cells. @item-active-bg: @primary-1; @@ -188,9 +201,9 @@ @btn-padding-horizontal-lg: @btn-padding-horizontal-base; @btn-padding-horizontal-sm: @padding-xs - 1px; -@btn-height-base: 32px; -@btn-height-lg: 40px; -@btn-height-sm: 24px; +@btn-height-base: @height-base; +@btn-height-lg: @height-lg; +@btn-height-sm: @height-sm; @btn-circle-size: @btn-height-base; @btn-circle-size-lg: @btn-height-lg; @@ -199,6 +212,9 @@ @btn-square-size: @btn-height-base; @btn-square-size-lg: @btn-height-lg; @btn-square-size-sm: @btn-height-sm; +@btn-square-only-icon-size: @font-size-base + 2px; +@btn-square-only-icon-size-sm: @font-size-base; +@btn-square-only-icon-size-lg: @btn-font-size-lg + 2px; @btn-group-border: @primary-5; @@ -213,6 +229,10 @@ // Descriptions @descriptions-bg: #fafafa; +@descriptions-title-margin-bottom: 20px; +@descriptions-default-padding: @padding-md @padding-lg; +@descriptions-middle-padding: @padding-sm @padding-lg; +@descriptions-small-padding: @padding-xs @padding-md; // Dropdown @dropdown-selected-color: @primary-color; @@ -340,9 +360,9 @@ // Input // --- -@input-height-base: 32px; -@input-height-lg: 40px; -@input-height-sm: 24px; +@input-height-base: @height-base; +@input-height-lg: @height-lg; +@input-height-sm: @height-sm; @input-padding-horizontal: @control-padding-horizontal - 1px; @input-padding-horizontal-base: @input-padding-horizontal; @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; @@ -352,8 +372,10 @@ @border-width-base, 3px ); -@input-padding-vertical-sm: round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) / - 10 - @border-width-base; +@input-padding-vertical-sm: max( + round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) / 10 - @border-width-base, + 0 +); @input-padding-vertical-lg: ceil((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) / 10 - @border-width-base; @input-placeholder-color: hsv(0, 0, 75%); @@ -387,10 +409,15 @@ @select-dropdown-vertical-padding: @dropdown-vertical-padding; @select-dropdown-font-size: @dropdown-font-size; @select-dropdown-line-height: @dropdown-line-height; +@select-dropdown-height: 32px; @select-background: @component-background; @select-clear-background: @select-background; @select-selection-item-bg: @background-color-base; @select-selection-item-border-color: @border-color-split; +@select-single-item-height-lg: 40px; +@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px +@select-multiple-item-height-lg: 32px; +@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); // Cascader // --- @@ -434,6 +461,7 @@ @popover-color: @text-color; // Popover maximum width @popover-min-width: 177px; +@popover-min-height: 32px; // Popover arrow width @popover-arrow-width: 6px; // Popover arrow color @@ -443,12 +471,15 @@ @popover-arrow-outer-color: @popover-bg; // Popover distance with trigger @popover-distance: @popover-arrow-width + 4px; +@popover-padding-horizontal: @padding-md; // Modal // -- -@modal-body-padding: 24px; +@modal-body-padding: @padding-lg; @modal-header-bg: @component-background; +@modal-header-padding: @padding-md @padding-lg; @modal-header-border-color-split: @border-color-split; +@modal-header-close-size: 56px; @modal-content-bg: @component-background; @modal-heading-color: @heading-color; @modal-footer-bg: transparent; @@ -456,6 +487,7 @@ @modal-footer-padding-vertical: 10px; @modal-footer-padding-horizontal: 16px; @modal-mask-bg: fade(@black, 45%); +@modal-confirm-body-padding: 32px 32px 24px; // Progress // -- @@ -469,6 +501,7 @@ // --- @menu-inline-toplevel-item-height: 40px; @menu-item-height: 40px; +@menu-item-group-height: @line-height-base; @menu-collapsed-width: 80px; @menu-bg: @component-background; @menu-popup-bg: @component-background; @@ -515,6 +548,10 @@ @table-expanded-row-bg: #fbfbfb; @table-padding-vertical: 16px; @table-padding-horizontal: 16px; +@table-padding-vertical-md: @table-padding-vertical * 3 / 4; +@table-padding-horizontal-md: @table-padding-horizontal / 2; +@table-padding-vertical-sm: @table-padding-vertical / 2; +@table-padding-horizontal-sm: @table-padding-horizontal / 2; @table-border-radius-base: @border-radius-base; @table-footer-bg: @background-color-light; @table-footer-color: @heading-color; @@ -544,6 +581,7 @@ @picker-border-color: @border-color-split; @picker-date-hover-range-border-color: lighten(@primary-color, 20%); @picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; +@picker-time-panel-cell-height: 28px; // Calendar // --- @@ -578,20 +616,28 @@ // --- @card-head-color: @heading-color; @card-head-background: transparent; +@card-head-font-size: @font-size-lg; +@card-head-font-size-sm: @font-size-base; @card-head-padding: 16px; +@card-head-padding-sm: @card-head-padding / 2; +@card-head-height: 48px; +@card-head-height-sm: 36px; @card-inner-head-padding: 12px; @card-padding-base: 24px; +@card-padding-base-sm: @card-padding-base / 2; @card-actions-background: @background-color-light; +@card-actions-li-margin: 12px 0; @card-skeleton-bg: #cfd8dc; @card-background: @component-background; @card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); @card-radius: @border-radius-base; +@card-head-tabs-margin-bottom: -17px; // Comment // --- @comment-bg: inherit; -@comment-padding-base: 16px 0; +@comment-padding-base: @padding-md 0; @comment-nest-indent: 44px; @comment-font-size-base: @font-size-base; @comment-font-size-sm: @font-size-sm; @@ -599,6 +645,9 @@ @comment-author-time-color: #ccc; @comment-action-color: @text-color-secondary; @comment-action-hover-color: #595959; +@comment-actions-margin-bottom: inherit; +@comment-actions-margin-top: @margin-sm; +@comment-content-detail-p-margin-bottom: inherit; // Tabs // --- @@ -609,14 +658,14 @@ @tabs-title-font-size-lg: @font-size-lg; @tabs-title-font-size-sm: @font-size-base; @tabs-ink-bar-color: @primary-color; -@tabs-bar-margin: 0 0 16px 0; +@tabs-bar-margin: 0 0 @margin-md 0; @tabs-horizontal-margin: 0 32px 0 0; @tabs-horizontal-margin-rtl: 0 0 0 32px; -@tabs-horizontal-padding: 12px 0; -@tabs-horizontal-padding-lg: 16px 0; -@tabs-horizontal-padding-sm: 8px 0; -@tabs-vertical-padding: 8px 24px; -@tabs-vertical-margin: 0 0 16px 0; +@tabs-horizontal-padding: @padding-sm 0; +@tabs-horizontal-padding-lg: @padding-md 0; +@tabs-horizontal-padding-sm: @padding-xs 0; +@tabs-vertical-padding: @padding-xs @padding-lg; +@tabs-vertical-margin: 0 0 @margin-md 0; @tabs-scrolling-size: 32px; @tabs-highlight-color: @primary-color; @tabs-hover-color: @primary-5; @@ -657,7 +706,7 @@ // Pagination // --- @pagination-item-bg: @component-background; -@pagination-item-size: 32px; +@pagination-item-size: @height-base; @pagination-item-size-sm: 24px; @pagination-font-family: Arial; @pagination-font-weight-active: 500; @@ -666,12 +715,14 @@ @pagination-item-disabled-color-active: @white; @pagination-item-disabled-bg-active: darken(@disabled-bg, 10%); @pagination-item-input-bg: @component-background; +@pagination-mini-options-size-changer-top: 0px; // PageHeader // --- -@page-header-padding: 24px; -@page-header-padding-vertical: 16px; -@page-header-padding-breadcrumb: 12px; +@page-header-padding: @padding-lg; +@page-header-padding-vertical: @padding-md; +@page-header-padding-breadcrumb: @padding-sm; +@page-header-content-padding-vertical: @padding-sm; @page-header-back-color: #000; @page-header-ghost-bg: inherit; @@ -718,7 +769,7 @@ // Collapse // --- -@collapse-header-padding: 12px 16px; +@collapse-header-padding: @padding-sm @padding-md; @collapse-header-padding-extra: 40px; @collapse-header-bg: @background-color-light; @collapse-content-padding: @padding-md; @@ -728,13 +779,18 @@ // --- @skeleton-color: #f2f2f2; @skeleton-to-color: shade(@skeleton-color, 5%); +@skeleton-paragraph-margin-top: 28px; +@skeleton-paragraph-li-margin-top: @margin-md; // Transfer // --- @transfer-header-height: 40px; +@transfer-item-height: @height-base; @transfer-disabled-bg: @disabled-bg; @transfer-list-height: 200px; @transfer-item-hover-bg: @item-hover-bg; +@transfer-item-padding-vertical: 6px; +@transfer-list-search-icon-top: 12px; // Message // --- @@ -762,6 +818,8 @@ @alert-text-color: @text-color; @alert-close-color: @text-color-secondary; @alert-close-hover-color: @icon-color-hover; +@alert-no-icon-padding-vertical: @padding-xs; +@alert-with-description-no-icon-padding-vertical: @padding-md - 1px; // List // --- @@ -769,10 +827,13 @@ @list-footer-background: transparent; @list-empty-text-padding: @padding-md; @list-item-padding: @padding-sm 0; +@list-item-padding-sm: @padding-xs @padding-md; +@list-item-padding-lg: 16px 24px; @list-item-meta-margin-bottom: @padding-md; @list-item-meta-avatar-margin-right: @padding-md; @list-item-meta-title-margin-bottom: @padding-sm; @list-customize-card-bg: @component-background; +@list-item-meta-description-font-size: @font-size-base; // Statistic // --- @@ -783,11 +844,12 @@ // Drawer // --- -@drawer-header-padding: 16px 24px; -@drawer-body-padding: 24px; +@drawer-header-padding: @padding-md @padding-lg; +@drawer-body-padding: @padding-lg; @drawer-bg: @component-background; @drawer-footer-padding-vertical: @modal-footer-padding-vertical; @drawer-footer-padding-horizontal: @modal-footer-padding-horizontal; +@drawer-header-close-size: 56px; // Timeline // --- @@ -813,6 +875,21 @@ @process-tail-color: @border-color-split; @steps-nav-arrow-color: fade(@black, 25%); @steps-background: @component-background; +@steps-icon-size: 32px; +@steps-icon-custom-size: @steps-icon-size; +@steps-icon-custom-top: 0px; +@steps-icon-custom-font-size: 24px; +@steps-icon-top: -1px; +@steps-icon-font-size: @font-size-lg; +@steps-icon-margin: 0 8px 0 0; +@steps-title-line-height: @height-base; +@steps-small-icon-size: 24px; +@steps-small-icon-margin: 0 8px 0 0; +@steps-dot-size: 8px; +@steps-dot-top: 2px; +@steps-current-dot-size: 10px; +@steps-desciption-max-width: 140px; +@steps-nav-content-max-width: auto; // Notification // --- diff --git a/components/table/style/size.less b/components/table/style/size.less index ca7eb29c44..1eb911a3a6 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -1,10 +1,5 @@ @import './index'; -@table-padding-vertical-md: @table-padding-vertical * 3 / 4; -@table-padding-horizontal-md: @table-padding-horizontal / 2; -@table-padding-vertical-sm: @table-padding-vertical / 2; -@table-padding-horizontal-sm: @table-padding-horizontal / 2; - .table-size(@size, @padding-vertical, @padding-horizontal) { .@{table-prefix-cls}.@{table-prefix-cls}-@{size} { .@{table-prefix-cls}-title, diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index 7a1f760777..d446c33ba0 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -43,25 +43,30 @@ ReactDOM.render( ``` ```css +[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content, .card-container > .ant-tabs-card > .ant-tabs-content { height: 120px; margin-top: -16px; } +[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane, .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane { background: #fff; padding: 16px; } +[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar, .card-container > .ant-tabs-card > .ant-tabs-bar { border-color: #fff; } +[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab, .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { border-color: transparent; background: transparent; } +[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active, .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { border-color: #fff; background: #fff; diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 96e53b220e..199f145623 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -15,7 +15,7 @@ height: @tabs-card-height; margin: 0; margin-right: @tabs-card-gutter; - padding: 0 16px; + padding: 0 @padding-md; line-height: @tabs-card-height - 2px; background: @tabs-card-head-background; border: @border-width-base @border-style-base @border-color-split; @@ -34,7 +34,6 @@ } } &&-card &-card-bar &-tab-disabled { - color: @tabs-card-active-color; color: @disabled-color; } &&-card &-card-bar &-tab-inactive { @@ -45,7 +44,6 @@ } &&-card &-card-bar &-tab &-close-x { width: 16px; - height: 16px; height: @font-size-base; margin-right: -5px; margin-left: 3px; @@ -126,13 +124,13 @@ height: 100%; } .@{tab-prefix-cls}-tab { - margin-bottom: 8px; + margin-bottom: @margin-sm; border-bottom: @border-width-base @border-style-base @border-color-split; &-active { padding-bottom: 4px; } &:last-child { - margin-bottom: 8px; + margin-bottom: @margin-sm; } } .@{tab-prefix-cls}-new-tab { @@ -150,7 +148,7 @@ border-radius: @border-radius-base 0 0 @border-radius-base; &-active { margin-right: -1px; - padding-right: 18px; + padding-right: @padding-md + 2px; } } } @@ -165,7 +163,7 @@ border-radius: 0 @border-radius-base @border-radius-base 0; &-active { margin-left: -1px; - padding-left: 18px; + padding-left: @padding-md + 2px; } } } diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 953e918735..ae14fa7df6 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -61,7 +61,7 @@ // https://github.com/ant-design/ant-design/issues/9104 &-bottom &-bottom-bar { - margin-top: 16px; + margin-top: @margin-md; margin-bottom: 0; border-top: @border-width-base @border-style-base @border-color-split; border-bottom: none; @@ -208,7 +208,7 @@ } .@{iconfont-css-prefix} { - margin-right: 8px; + margin-right: @margin-sm; } &-active { @@ -378,7 +378,7 @@ } } .@{tab-prefix-cls}-left-content { - padding-left: 24px; + padding-left: @padding-lg; border-left: @border-width-base @border-style-base @border-color-split; } @@ -399,7 +399,7 @@ } } .@{tab-prefix-cls}-right-content { - padding-right: 24px; + padding-right: @padding-lg; border-right: @border-width-base @border-style-base @border-color-split; } } diff --git a/components/tabs/style/rtl.less b/components/tabs/style/rtl.less index ab92c6b0e8..36396fc7a9 100644 --- a/components/tabs/style/rtl.less +++ b/components/tabs/style/rtl.less @@ -39,7 +39,7 @@ .@{iconfont-css-prefix} { .@{tab-prefix-cls}-rtl & { margin-right: 0; - margin-left: 8px; + margin-left: @margin-xs; } } } diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 3d022bbc1d..9c65173396 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -81,7 +81,7 @@ &-content { position: relative; top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; - margin: 0 0 0 18px; + margin: 0 0 0 @margin-lg + 2px; word-break: break-word; } diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 2c061d14c7..631d4889a6 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -35,11 +35,11 @@ } &-search { - padding-right: 24px; + padding-right: 24px !important; padding-left: @control-padding-horizontal-sm; &-action { position: absolute; - top: 12px; + top: @transfer-list-search-icon-top; right: 12px; bottom: 12px; width: 28px; @@ -94,12 +94,12 @@ top: 0; left: 0; width: 100%; - padding: 12px; + padding: @padding-sm; } } &-body-with-search { - padding-top: @input-height-base + 24px; + padding-top: @input-height-base + @padding-sm * 2; } &-content { @@ -109,8 +109,8 @@ overflow: auto; list-style: none; &-item { - min-height: 32px; - padding: 6px @control-padding-horizontal; + min-height: @transfer-item-height; + padding: @transfer-item-padding-vertical @control-padding-horizontal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index e8e4e9eff2..268df12f8d 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -52,7 +52,7 @@ display: table-cell; width: 100%; height: 100%; - padding: 8px; + padding: @padding-xs; text-align: center; vertical-align: middle; } @@ -74,7 +74,7 @@ transition: border-color 0.3s; .@{upload-prefix-cls} { - padding: 16px 0; + padding: @padding-md 0; } &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) { @@ -140,6 +140,7 @@ .@{upload-prefix-cls}-list { .reset-component; .clearfix; + line-height: 22px; &-item-list-type-text { &:hover { .@{upload-prefix-cls}-list-item-name-icon-count-1 { @@ -153,13 +154,14 @@ &-item { position: relative; height: 22px; - margin-top: 8px; + margin-top: @margin-xs; font-size: @font-size-base; &-name { display: inline-block; width: 100%; padding-left: @font-size-base + 8px; overflow: hidden; + line-height: 22px; white-space: nowrap; text-overflow: ellipsis; } @@ -263,7 +265,7 @@ .@{upload-item} { position: relative; height: 66px; - padding: 8px; + padding: @padding-xs; border: @border-width-base @upload-picture-card-border-style @border-color-base; border-radius: @border-radius-base; &:hover { @@ -374,13 +376,13 @@ float: left; width: @upload-picture-card-size; height: @upload-picture-card-size; - margin: 0 8px 8px 0; + margin: 0 @margin-xs @margin-xs 0; } .@{upload-item} { float: left; width: @upload-picture-card-size; height: @upload-picture-card-size; - margin: 0 8px 8px 0; + margin: 0 @margin-xs @margin-xs 0; } .@{upload-item}-info { diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 7c70e88731..c89dd044c3 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -133,10 +133,11 @@ You must import styles as less format. A common mistake would be importing multi We have some official themes, try them out and give us some feedback! -- 🌑 Dark Theme (follow document below) -- ☁️ [Aliyun Console Theme (Beta)](https://github.com/ant-design/ant-design-aliyun-theme) +- 🌑 Dark Theme (supported in 4.0.0+) +- 🌑 Compact Theme (supported in 4.1.0+) +- ☁️ [Aliyun Console Theme (Beta)](https://github.com/ant-design/ant-design-aliyun-theme) -### Use dark theme +### Use dark or compact theme ![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) @@ -150,33 +151,39 @@ If you're using [Umi 3](http://umijs.org/zh/), which only need two steps: $ npm i @umijs/plugin-antd -D ``` -2. set `dark: true`. +2. set `dark` or `compact` to `true`. ```js // .umirc.ts or config/config.ts export default { antd: { - dark: true, + dark: true, // active dark theme + compact: true, // active compact theme }, }, ``` -Method 2: Import [antd/dist/antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less) in the style file: +Method 2: Import [antd/dist/antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less) or [antd/dist/antd.compact.less](https://unpkg.com/browse/antd@4.x/dist/antd.compact.less) in the style file: ```less @import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file +@import '~antd/dist/antd.compact.less'; ``` -If the project does not use Less, you can import [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css) in the CSS file: +If the project does not use Less, you can import [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css) or [antd/dist/antd.compact.css](https://unpkg.com/browse/antd@4.x/dist/antd.compact.css) in the CSS file: ```css @import '~antd/dist/antd.dark.css'; +@import '~antd/dist/antd.compact.css'; ``` +> Note that you don't need to import `antd/dist/antd.less` or `antd/dist/antd.css` anymore, please remove it, and remove babel-plugin-import `style` config too. + Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: ```diff -const darkThemeVars = require('antd/dist/dark-theme'); +const darkTheme = require('antd/dist/dark-theme'); +const compactTheme = require('antd/dist/compact-theme'); // webpack.config.js module.exports = { @@ -191,15 +198,18 @@ module.exports = { + options: { + modifyVars: { + 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...darkThemeVars, ++ ...darkTheme, ++ ...compactTheme, + }, + javascriptEnabled: true, + }, }], }], -} +}; ``` +Use dark theme and compact theme at the same time will cause double css bundle size in current implementation, please be aware of this. + ## Related Articles - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/) diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 79a0ab315a..79c7e0b1c9 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -111,10 +111,11 @@ module.exports = { 我们提供了一些官方主题，欢迎在项目中试用，并且给我们提供反馈。 -- 🌑 暗色主题（用法见下方文档） +- 🌑 暗黑主题（4.0.0+ 支持） +- 📦 紧凑主题（4.1.0+ 支持） - ☁️ [阿里云控制台主题（Beta）](https://github.com/ant-design/ant-design-aliyun-theme) -### 使用暗色主题 +### 使用暗黑主题和紧凑主题 ![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) @@ -128,33 +129,39 @@ module.exports = { $ npm i @umijs/plugin-antd -D ``` -2. 配置 `dark: true`。 +2. 配置 `dark` 和 `compact`。 ```js // .umirc.ts or config/config.ts export default { antd: { - dark: true, + dark: true, // 开启暗色主题 + compact: true, // 开启紧凑主题 }, }, ``` -方式二：是在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less)。 +方式二：是在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less) 或 [antd.compact.less](https://unpkg.com/browse/antd@4.x/dist/antd.compact.less)。 ```less @import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件 +@import '~antd/dist/antd.compact.less'; // 引入官方提供的暗色 less 样式入口文件 ``` -如果项目不使用 Less，可在 CSS 文件中，全量引入 [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css)。 +如果项目不使用 Less，可在 CSS 文件中全量引入 [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css) 或 [antd.compact.css](https://unpkg.com/browse/antd@4.x/dist/antd.compact.css)。 ```css @import '~antd/dist/antd.dark.css'; +@import '~antd/dist/antd.compact.css'; ``` +> 注意这种方式下你不需要再引入 `antd/dist/antd.less` 或 `antd/dist/antd.css` 了，可以安全移除掉。也不需要开启 babel-plugin-import 的 `style` 配置。 + 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```diff -const darkThemeVars = require('antd/dist/dark-theme'); +const darkTheme = require('antd/dist/dark-theme'); +const compactTheme = require('antd/dist/compact-theme'); // webpack.config.js module.exports = { @@ -169,7 +176,8 @@ module.exports = { + options: { + modifyVars: { + 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...darkThemeVars, ++ ...darkTheme, ++ ...compactTheme, + }, + javascriptEnabled: true, + }, @@ -178,6 +186,8 @@ module.exports = { }; ``` +同时开启暗黑和紧凑模式会导致 css 的加载体积增加一倍，这暂时受限于我们目前的主题实现方式，请知晓。 + ## 社区教程 - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/) diff --git a/docs/react/migration-v4.en-US.md b/docs/react/migration-v4.en-US.md index 84a3bbd563..c5978498f7 100644 --- a/docs/react/migration-v4.en-US.md +++ b/docs/react/migration-v4.en-US.md @@ -3,7 +3,7 @@ order: 8 title: V3 to V4 --- -This document will help you upgrade from antd `3.x` version to antd `4.x` version. If you are using `2.x` or older version, please refer to the previous [upgrade document] (https://github.com/ant-design/ant-design/blob/2adf8ced24da7b3cb46a3475854a83d76a98c536/CHANGELOG.en-US.md#300) to 3.x. +This document will help you upgrade from antd `3.x` version to antd `4.x` version. If you are using `2.x` or older version, please refer to the previous [upgrade document](https://github.com/ant-design/ant-design/blob/2adf8ced24da7b3cb46a3475854a83d76a98c536/CHANGELOG.en-US.md#300) to 3.x. ## Upgrade preparation diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md index 6d042015f5..b15eeebd37 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -199,28 +199,7 @@ module.exports = override( We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here. If you see a green button rendered on the page after rebooting the server, then the configuration was successful. -### Use custom dark theme - -```diff -const { override, fixBabelImports, addLessLoader } = require('customize-cra'); -+ const darkThemeVars = require('antd/dist/dark-theme'); - -module.exports = override( - fixBabelImports('import', { - libraryName: 'antd', - libraryDirectory: 'es', - style: true, - }), - addLessLoader({ - javascriptEnabled: true, - modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...darkThemeVars, - '@primary-color': '#1DA57A' - }, - }), -); -``` +We have built-in dark theme and compact theme in antd, you can reference to [Use dark or compact theme](/docs/react/customize-theme#Use-dark-or-compact-theme). > You could also try [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does. diff --git a/docs/react/use-with-create-react-app.zh-CN.md b/docs/react/use-with-create-react-app.zh-CN.md index f172df5a06..46a10bee94 100644 --- a/docs/react/use-with-create-react-app.zh-CN.md +++ b/docs/react/use-with-create-react-app.zh-CN.md @@ -199,30 +199,7 @@ module.exports = override( 这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。 -### 使用自定义深色主题 - -```diff -const { override, fixBabelImports, addLessLoader } = require('customize-cra'); -+ const darkThemeVars = require('antd/dist/dark-theme'); - -module.exports = override( - fixBabelImports('import', { - libraryName: 'antd', - libraryDirectory: 'es', - style: true, - }), - addLessLoader({ - javascriptEnabled: true, - modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...darkThemeVars, - '@primary-color': '#1DA57A' - }, - }), -); -``` - -> 你也可以使用 [craco](https://github.com/sharegate/craco) 和 [craco-antd](https://github.com/FormAPI/craco-antd) 来实现和 customize-cra 一样的修改 create-react-app 配置的功能。 +antd 内建了深色主题和紧凑主题，你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。 ## 使用 Day.js 替换 momentjs 优化打包大小 diff --git a/package.json b/package.json index b9176ee28b..78c0fb6daa 100644 --- a/package.json +++ b/package.json @@ -271,6 +271,10 @@ { "path": "./dist/antd.dark.min.css", "maxSize": "65 kB" + }, + { + "path": "./dist/antd.compact.min.css", + "maxSize": "65 kB" } ], "title": "Ant Design" diff --git a/scripts/compact-vars.js b/scripts/compact-vars.js new file mode 100644 index 0000000000..e93048ad9c --- /dev/null +++ b/scripts/compact-vars.js @@ -0,0 +1,15 @@ +const fs = require('fs'); +const path = require('path'); +const lessToJs = require('less-vars-to-js'); + +const stylePath = path.join(__dirname, '..', 'components', 'style'); +const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8'); +const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8'); +const compactLess = fs.readFileSync(path.join(stylePath, 'themes', 'compact.less'), 'utf8'); + +const compactPaletteLess = lessToJs(`${colorLess}${defaultLess}${compactLess}`, { + stripPrefix: true, + resolveVariables: false, +}); + +module.exports = compactPaletteLess; diff --git a/scripts/generateColorLess.js b/scripts/generateColorLess.js index 17adad0987..b958c35c5e 100644 --- a/scripts/generateColorLess.js +++ b/scripts/generateColorLess.js @@ -3,6 +3,7 @@ const path = require('path'); const { generateTheme } = require('antd-theme-generator'); const genCss = require('antd-pro-merge-less'); const dark = require('./dark-vars'); +const compact = require('./compact-vars'); genCss( path.join(__dirname, '..'), @@ -16,6 +17,13 @@ genCss( '@site-markdown-code-bg': '@input-bg', }, }, + { + theme: 'compact', + fileName: './_site/compact.css', + modifyVars: { + ...compact, + }, + }, ], { ignoreAntd: true, diff --git a/site/theme/en-US.js b/site/theme/en-US.js index b64ee9e9e6..672810527c 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -1,8 +1,9 @@ module.exports = { locale: 'en-US', messages: { - 'app.theme.switch.dark': 'Switch default mode', - 'app.theme.switch.default': 'Switch dark mode', + 'app.theme.switch.default': 'Default theme', + 'app.theme.switch.dark': 'Dark theme', + 'app.theme.switch.compact': 'Compact theme', 'app.header.search': 'Search...', 'app.header.menu.documentation': 'Docs', 'app.header.menu.components': 'Components', diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 5bc6b7bc30..7d407542fe 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -206,6 +206,8 @@ a { right: 32px; bottom: 102px; z-index: 2147483640; + display: flex; + flex-direction: column; cursor: pointer; &-tooltip { .ant-tooltip-inner { @@ -215,9 +217,17 @@ a { & > div { display: block; } + &-active { + color: @primary-color; + } & &-avatar { + color: #000; background-color: #fff; box-shadow: @shadow-2; + transition: color .3s; + &:hover { + color: @primary-color; + } } } @@ -235,7 +245,13 @@ a { #header #nav.ant-menu, .main-wrapper, .main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu, -.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu.aside-container.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-title::after, +.main-wrapper + > .ant-row + > .main-menu + .main-menu-inner + > .ant-menu.aside-container.ant-menu-inline + > .ant-menu-item-group + > .ant-menu-item-group-title::after, .main-wrapper .main-container, #demo-toc.toc { transition: all 0.3s @ease-in-out-circ; diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index a8abee29ca..a7dfd1f8b1 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; -import { Row, Col, Menu, Affix, Tooltip, Avatar } from 'antd'; +import { Row, Col, Menu, Affix, Tooltip, Avatar, Dropdown } from 'antd'; import { injectIntl } from 'react-intl'; import { LeftOutlined, RightOutlined, ExportOutlined } from '@ant-design/icons'; import ContributorsList from '@qixian.cs/github-contributors-list'; @@ -9,7 +9,7 @@ import classNames from 'classnames'; import get from 'lodash/get'; import MobileMenu from 'rc-drawer'; -import { DarkIcon, DefaultIcon } from './ThemeIcon'; +import ThemeIcon from './ThemeIcon'; import Article from './Article'; import PrevAndNext from './PrevAndNext'; import Footer from '../Layout/Footer'; @@ -60,7 +60,7 @@ const getSideBarOpenKeys = nextProps => { class MainContent extends Component { static contextTypes = { - theme: PropTypes.oneOf(['default', 'dark']), + theme: PropTypes.oneOf(['default', 'dark', 'compact']), setTheme: PropTypes.func, setIframeTheme: PropTypes.func, }; @@ -266,6 +266,24 @@ class MainContent extends Component { ); } + getThemeSwitchMenu() { + const { theme } = this.context; + const { + intl: { formatMessage }, + } = this.props; + return ( + this.changeThemeMode(key)} selectedKeys={[theme]}> + {[ + { type: 'default', text: formatMessage({ id: 'app.theme.switch.default' }) }, + { type: 'dark', text: formatMessage({ id: 'app.theme.switch.dark' }) }, + { type: 'compact', text: formatMessage({ id: 'app.theme.switch.compact' }) }, + ].map(({ type, text }) => ( + {text} + ))} + + ); + } + flattenMenu(menu) { if (!menu) { return null; @@ -279,10 +297,11 @@ class MainContent extends Component { return this.flattenMenu((menu.props && menu.props.children) || menu.children); } - changeTheme = () => { - const { theme, setTheme } = this.context; - const nextTheme = theme !== 'dark' ? 'dark' : 'default'; - setTheme(nextTheme); + changeThemeMode = theme => { + const { setTheme, theme: selectedTheme } = this.context; + if (selectedTheme !== theme) { + setTheme(theme); + } }; render() { @@ -320,7 +339,6 @@ class MainContent extends Component { ); const componentPage = /^\/?components/.test(this.props.location.pathname); - return (
@@ -377,21 +395,9 @@ class MainContent extends Component { {componentPage && (
- node.parentNode} - title={formatMessage({ id: `app.theme.switch.${theme}` })} - overlayClassName="fixed-widgets-tooltip" - > - : } - /> - + + } /> +
)} diff --git a/site/theme/template/Content/ThemeIcon.jsx b/site/theme/template/Content/ThemeIcon.jsx index d918e633a5..563056580d 100644 --- a/site/theme/template/Content/ThemeIcon.jsx +++ b/site/theme/template/Content/ThemeIcon.jsx @@ -1,34 +1,17 @@ import React from 'react'; import Icon from '@ant-design/icons'; -export const DefaultIcon = props => { +const ThemeIcon = props => { const SVGIcon = () => ( - - - - + + + +