From 72b0f5275e2cfe60ca92f1317eb3fe2fa0aa8582 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sat, 10 Nov 2018 20:23:41 +0800 Subject: [PATCH 01/48] docs: update NG-ZORRO logo (#2425) --- logo.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 logo.svg diff --git a/logo.svg b/logo.svg new file mode 100644 index 00000000000..37426a60042 --- /dev/null +++ b/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From a17ea49dbbb903cfb4e600913460e06222e35d21 Mon Sep 17 00:00:00 2001 From: wheeljs Date: Tue, 13 Nov 2018 13:22:39 +0800 Subject: [PATCH 02/48] fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 --- components/collapse/nz-collapse.component.ts | 5 +++- components/collapse/nz-collapse.spec.ts | 26 ++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts index cd2a9958bac..1804392bb8d 100644 --- a/components/collapse/nz-collapse.component.ts +++ b/components/collapse/nz-collapse.component.ts @@ -43,7 +43,10 @@ export class NzCollapseComponent { if (this.nzAccordion) { this.listOfPanel.forEach(item => { const active = collapse === item; - if (item.nzActive !== active) { + if (active && item.nzActive === active) { + item.nzActive = false; + item.nzActiveChange.emit(item.nzActive); + } else if (item.nzActive !== active) { item.nzActive = active; item.nzActiveChange.emit(item.nzActive); } diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/nz-collapse.spec.ts index 8b63bcd3992..1b881e43891 100644 --- a/components/collapse/nz-collapse.spec.ts +++ b/components/collapse/nz-collapse.spec.ts @@ -98,6 +98,32 @@ describe('collapse', () => { expect(testComponent.active01Change).toHaveBeenCalledTimes(2); expect(testComponent.active02Change).toHaveBeenCalledTimes(1); }); + it('should click to fold up work with accordion', () => { + testComponent.accordion = true; + fixture.detectChanges(); + expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(testComponent.active01).toBe(false); + panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + panels[ 1 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + expect(testComponent.active01).toBe(true); + expect(testComponent.active02).toBe(false); + expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active'); + expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(testComponent.active01Change).toHaveBeenCalledTimes(3); + expect(testComponent.active02Change).toHaveBeenCalledTimes(2); + panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click(); + fixture.detectChanges(); + expect(testComponent.active01).toBe(false); + expect(testComponent.active02).toBe(false); + expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active'); + expect(testComponent.active01Change).toHaveBeenCalledTimes(4); + expect(testComponent.active02Change).toHaveBeenCalledTimes(2); + }); it('should header work', () => { fixture.detectChanges(); expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('string'); From d9db5231a6e8901d39987bbc3d3f7a1ab71a34d3 Mon Sep 17 00:00:00 2001 From: ng-zorro-bot <33472860+ng-zorro-bot@users.noreply.github.com> Date: Sun, 18 Nov 2018 15:12:56 +0800 Subject: [PATCH 03/48] chore: update styles(ant-design 3.10.7) (#2432) --- components/avatar/style/index.less | 6 ++++ components/button/style/index.less | 13 +++++-- components/button/style/mixin.less | 4 +-- components/card/style/index.less | 4 +-- components/checkbox/style/mixin.less | 48 +++++++++++++++---------- components/divider/style/index.less | 1 + components/dropdown/style/index.less | 4 +++ components/form/style/index.less | 14 ++++---- components/list/style/index.less | 3 -- components/menu/style/dark.less | 2 +- components/modal/style/modal.less | 2 +- components/progress/style/index.less | 4 +-- components/radio/style/index.less | 1 - components/select/style/index.less | 1 + components/slider/style/index.less | 1 + components/style/themes/default.less | 6 ++-- components/table/style/index.less | 39 +++++++++++--------- components/table/style/size.less | 31 +++++++++++----- components/tabs/style/index.less | 37 ++++++++++--------- components/time-picker/style/index.less | 2 +- 20 files changed, 133 insertions(+), 90 deletions(-) diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index 9caf0095983..da52c414dc3 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -49,6 +49,12 @@ line-height: @size; } + &-string { + position: absolute; + left: 50%; + transform-origin: 0 center; + } + &.@{avatar-prefix-cls}-icon { font-size: @font-size; } diff --git a/components/button/style/index.less b/components/button/style/index.less index 8057a0a3fab..bd929d5a0c6 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -12,7 +12,10 @@ // Button styles // ----------------------------- .@{btn-prefix-cls} { - line-height: @line-height-base; + // Fixing https://github.com/ant-design/ant-design/issues/12978 + // It is a render problem of chrome, which is only happened in the codesandbox demo + // 0.001px solution works and I don't why + line-height: @line-height-base - 0.001; .btn; .btn-default; @@ -21,6 +24,7 @@ > i, > span { pointer-events: none; + display: inline-block; } &-primary { @@ -149,7 +153,7 @@ letter-spacing: .34em; } - &-two-chinese-chars > * { + &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { letter-spacing: .34em; margin-right: -.34em; } @@ -177,6 +181,11 @@ .christmas&-primary&-sm:before { background-size: 56px; } + + // https://github.com/ant-design/ant-design/issues/12681 + &:empty { + vertical-align: top; + } } a.@{btn-prefix-cls} { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 23a088920e4..2848772fdac 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -25,7 +25,7 @@ .button-variant-primary(@color; @background) { .button-color(@color; @background; @background); text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); - box-shadow: 0 2px 0 rgba(0, 0, 0, .035); + box-shadow: 0 2px 0 rgba(0, 0, 0, .045); &:hover, &:focus { @@ -118,7 +118,6 @@ > .@{btnClassName}, > span > .@{btnClassName} { position: relative; - line-height: @btn-height-base - 2px; &:hover, &:focus, @@ -182,7 +181,6 @@ &:not([disabled]):active { outline: 0; - transition: none; box-shadow: none; } diff --git a/components/card/style/index.less b/components/card/style/index.less index 6696d1a7825..9ecb1f2c304 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -39,6 +39,7 @@ &-wrapper { display: flex; + align-items: center; } &-title { @@ -46,9 +47,8 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - display: flex; - align-items: center; flex: 1; + display: inline-block; } .@{ant-prefix}-tabs { diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index d4313d85363..023ea25e199 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -50,6 +50,9 @@ border-radius: @border-radius-sm; background-color: @checkbox-check-color; transition: all .3s; + // Fix IE checked style + // https://github.com/ant-design/ant-design/issues/12597 + border-collapse: separate; &:after { @check-width: (@checkbox-size / 14) * 5px; @@ -84,25 +87,6 @@ } } - // 半选状态 - .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after { - @indeterminate-width: @checkbox-size - 8px; - @indeterminate-height: @checkbox-size - 8px; - content: ' '; - transform: translate(-50%, -50%) scale(1); - border: 0; - left: 50%; - top: 50%; - width: @indeterminate-width; - height: @indeterminate-height; - background-color: @checkbox-color; - opacity: 1; - } - - .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after { - border-color: @disabled-color; - } - // 选中状态 .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after { transform: rotate(45deg) scale(1); @@ -183,6 +167,32 @@ margin-left: 0; } } + + // 半选状态 + .@{checkbox-prefix-cls}-indeterminate { + .@{checkbox-inner-prefix-cls} { + background-color: #fff; + border-color: @border-color-base; + } + .@{checkbox-inner-prefix-cls}:after { + @indeterminate-width: @checkbox-size - 8px; + @indeterminate-height: @checkbox-size - 8px; + content: ' '; + transform: translate(-50%, -50%) scale(1); + border: 0; + left: 50%; + top: 50%; + width: @indeterminate-width; + height: @indeterminate-height; + background-color: @checkbox-color; + opacity: 1; + } + + &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after { + border-color: @disabled-color; + background-color: @disabled-color; + } + } } @keyframes antCheckboxEffect { diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 926865feac6..6839add3b17 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -21,6 +21,7 @@ display: block; height: 1px; width: 100%; + min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914 margin: 24px 0; clear: both; } diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index f1919c74bbd..447d2fdff0b 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -55,6 +55,10 @@ &-submenu-popup { position: absolute; z-index: @zindex-dropdown; + + > .@{dropdown-prefix-cls}-menu { + transform-origin: 0 0; + } } &-item, diff --git a/components/form/style/index.less b/components/form/style/index.less index 4babd4a700f..5d9fcf67120 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -131,7 +131,9 @@ input[type="checkbox"] { .@{form-prefix-cls}-explain, .@{form-prefix-cls}-extra { color: @text-color-secondary; - line-height: @line-height-base; + // Magic tweak pixel number to float line-height diff in windows + // Fix https://github.com/ant-design/ant-design/issues/12803 + line-height: @line-height-base + 0.024; transition: color .3s @ease-out; // sync input color transition margin-top: @form-help-margin-top; clear: both; @@ -381,9 +383,10 @@ form { margin-bottom: 24px; } - > .@{form-prefix-cls}-item-control-wrapper, > .@{form-prefix-cls}-item-label { + > .@{form-prefix-cls}-item-control-wrapper, + > .@{form-prefix-cls}-item-label { display: inline-block; - vertical-align: middle; + vertical-align: top; } } @@ -394,11 +397,6 @@ form { .has-feedback { display: inline-block; } - - // Fix https://github.com/ant-design/ant-design/issues/1040 - .@{form-prefix-cls}-explain { - position: absolute; - } } // Validation state diff --git a/components/list/style/index.less b/components/list/style/index.less index 6405e6dca7e..4546f627a73 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -164,9 +164,6 @@ } &-meta { margin-bottom: @list-item-meta-margin-bottom; - &-avatar { - display: none; - } &-title { color: @heading-color; margin-bottom: @list-item-meta-title-margin-bottom; diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index 2c75ade7a8c..4428b91781a 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -106,7 +106,7 @@ &&-dark &-item-selected, &-submenu-popup&-dark &-item-selected { - background-color: @menu-dark-item-selected-bg; + background-color: @menu-dark-item-active-bg; } // Disabled state sets text to dark gray and nukes hover/tab effects diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 8c0f955ea84..761a2727fd3 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -77,7 +77,7 @@ &-header { padding: 16px 24px; border-radius: @border-radius-base @border-radius-base 0 0; - background: @component-background; + background: @modal-header-bg; color: @text-color; border-bottom: @border-width-base @border-style-base @border-color-split; } diff --git a/components/progress/style/index.less b/components/progress/style/index.less index 8161628c5de..91a873ce1a1 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -133,8 +133,8 @@ left: 0; margin: 0; color: @progress-text-color; - overflow: hidden; - text-overflow: ellipsis; + white-space: normal; + padding: 0 6px; .@{iconfont-css-prefix} { font-size: 14 / 12em; diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 1aeb2bf9057..7f5e6dcd87c 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -1,6 +1,5 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; -@import "../../style/mixins/index"; @radio-prefix-cls: ~"@{ant-prefix}-radio"; @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group"; diff --git a/components/select/style/index.less b/components/select/style/index.less index 8fa243a1078..829b57bd35e 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -545,6 +545,7 @@ &&--multiple { .@{select-prefix-cls}-dropdown-menu-item { + padding-right: @control-padding-horizontal + 20; & .@{select-prefix-cls}-selected-icon { color: transparent; .iconfont-size-under-12px(10px); diff --git a/components/slider/style/index.less b/components/slider/style/index.less index e7962cb3d9e..3c33a94fca2 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -10,6 +10,7 @@ padding: 4px 0; height: 12px; cursor: pointer; + touch-action: none; .vertical(); diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 6702e03e777..af1cc8e5e7b 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -43,6 +43,7 @@ @heading-color-dark : fade(#fff, 100%); @text-color-dark : fade(#fff, 85%); @text-color-secondary-dark: fade(#fff, 65%); +@font-variant-base : tabular-nums; @font-size-base : 14px; @font-size-lg : @font-size-base + 2px; @font-size-sm : 12px; @@ -306,6 +307,7 @@ // Modal // -- +@modal-header-bg: @component-background; @modal-mask-bg: rgba(0, 0, 0, 0.65); // Progress @@ -319,7 +321,7 @@ @menu-inline-toplevel-item-height: 40px; @menu-item-height: 40px; @menu-collapsed-width: 80px; -@menu-bg: @component-background; +@menu-bg: transparent; @menu-item-color: @text-color; @menu-highlight-color: @primary-color; @menu-item-active-bg: @item-active-bg; @@ -526,5 +528,3 @@ @list-item-meta-margin-bottom: @padding-md; @list-item-meta-avatar-margin-right: @padding-md; @list-item-meta-title-margin-bottom: @padding-sm; - -@import "./default.deperated.less"; diff --git a/components/table/style/index.less b/components/table/style/index.less index d2e4da8cb86..77751b9e585 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -3,6 +3,8 @@ @table-prefix-cls: ~"@{ant-prefix}-table"; @table-header-icon-color: #bfbfbf; +@table-header-sort-active-bg: darken(@table-header-bg, 3%); +@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%); .@{table-prefix-cls}-wrapper { .clearfix; @@ -96,13 +98,14 @@ &.@{table-prefix-cls}-column-has-actions { position: relative; + background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628 &.@{table-prefix-cls}-column-has-filters { .@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon { &.@{table-prefix-cls}-filter-open { color: @text-color-secondary; - background: #ebebeb; + background: @table-header-filter-active-bg; } } // Very complicated styles logic but neccessary @@ -111,7 +114,7 @@ .@{table-prefix-cls}-filter-icon { &:hover { color: @text-color-secondary; - background: #ebebeb; + background: @table-header-filter-active-bg; } &:active { color: @text-color; @@ -123,10 +126,10 @@ &.@{table-prefix-cls}-column-has-sorters { cursor: pointer; &:hover { - background: #f5f5f5; + background: @table-header-sort-active-bg; .@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon { - background: #f5f5f5; + background: @table-header-sort-active-bg; } } &:active { @@ -137,17 +140,14 @@ } } - // Repeat the class selector for prority - // https://github.com/ant-design/ant-design/commit/55a13a11fcea23fc4b5694cad7e2c32edc9128ee#r30842052 - &.@{table-prefix-cls}-align-right.@{table-prefix-cls}-align-right { - &.@{table-prefix-cls}-column-has-sorters, - &.@{table-prefix-cls}-column-has-filters { - padding-right: 30px; - } + // https://github.com/ant-design/ant-design/issues/12650 + &.@{table-prefix-cls}-column-has-sorters, + &.@{table-prefix-cls}-column-has-filters { + padding-right: 30px !important; + } - &.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters { - padding-right: 54px; - } + &.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters { + padding-right: 54px !important; } } @@ -202,7 +202,7 @@ transition: all .3s, height 0s; &.@{table-prefix-cls}-row-hover, &:hover { - & > td { + &:not(.@{table-prefix-cls}-expanded-row) > td { background: @table-row-hover-bg; } } @@ -285,8 +285,9 @@ } &-thead > tr > th.@{table-prefix-cls}-selection-column-custom { - padding-left: 16px; - padding-right: 0; + .@{table-prefix-cls}-selection { + margin-right: -15px; + } } &-thead > tr > th.@{table-prefix-cls}-selection-column, @@ -543,6 +544,10 @@ &:hover { background: @table-expanded-row-bg; } + + td > .@{table-prefix-cls}-wrapper { + margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical - 1px; + } } .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon { diff --git a/components/table/style/size.less b/components/table/style/size.less index aacd3687f8c..c9c8a87058d 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -1,7 +1,12 @@ +@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-prefix-cls}-middle { > .@{table-prefix-cls}-title, > .@{table-prefix-cls}-footer { - padding: @table-padding-vertical*3/4 @table-padding-horizontal/2; + padding: @table-padding-vertical-md @table-padding-horizontal-md; } > .@{table-prefix-cls}-content { > .@{table-prefix-cls}-header > table, @@ -14,10 +19,14 @@ > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table { > .@{table-prefix-cls}-thead > tr > th, > .@{table-prefix-cls}-tbody > tr > td { - padding: @table-padding-vertical*3/4 @table-padding-horizontal/2; + padding: @table-padding-vertical-md @table-padding-horizontal-md; } } } + + tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper { + margin: -@table-padding-vertical-md -@table-padding-horizontal -@table-padding-vertical-md - 1px; + } } .@{table-prefix-cls}-small { @@ -26,7 +35,7 @@ > .@{table-prefix-cls}-title, > .@{table-prefix-cls}-footer { - padding: @table-padding-vertical/2 @table-padding-horizontal/2; + padding: @table-padding-vertical-sm @table-padding-horizontal-sm; } > .@{table-prefix-cls}-title { @@ -36,7 +45,7 @@ > .@{table-prefix-cls}-content { > .@{table-prefix-cls}-body { - margin: 0 @table-padding-horizontal/2; + margin: 0 @table-padding-horizontal-sm; } > .@{table-prefix-cls}-header > table, @@ -50,14 +59,14 @@ border: 0; > .@{table-prefix-cls}-thead > tr > th, > .@{table-prefix-cls}-tbody > tr > td { - padding: @table-padding-vertical/2 @table-padding-horizontal/2; + padding: @table-padding-vertical-sm @table-padding-horizontal-sm; } > .@{table-prefix-cls}-thead > tr > th { - background: @component-background; + background-color: @component-background; border-bottom: @border-width-base @border-style-base @border-color-split; } > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort { - background: @table-body-sort-bg; + background-color: @table-body-sort-bg; } } @@ -71,7 +80,7 @@ } .@{table-prefix-cls}-header { - background: @component-background; + background-color: @component-background; } .@{table-prefix-cls}-placeholder, @@ -105,6 +114,7 @@ .@{table-prefix-cls}-placeholder { border-left: 0; border-bottom: 0; + border-right: 0; } .@{table-prefix-cls}-thead > tr > th:last-child, @@ -120,7 +130,12 @@ } .@{table-prefix-cls}-fixed-right { + border-left: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split; } } + + tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper { + margin: -@table-padding-vertical-sm -@table-padding-horizontal -@table-padding-vertical-sm - 1px; + } } diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 25b4b813945..5bc9b852788 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -1,6 +1,5 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; - @import "./card-style"; @tab-prefix-cls: ~"@{ant-prefix}-tabs"; @@ -18,13 +17,13 @@ bottom: 1px; box-sizing: border-box; height: 2px; - background-color: @tabs-ink-bar-bg-color; + background-color: @tabs-ink-bar-color; transform-origin: 0 0; } &-bar { border-bottom: @border-width-base @border-style-base @border-color-split; - margin: @tab-bar-margin; + margin: @tabs-bar-margin; outline: none; transition: padding .3s @ease-in-out; } @@ -41,8 +40,8 @@ .clearfix; &-scrolling { - padding-left: @tab-scrolling-size; - padding-right: @tab-scrolling-size; + padding-left: @tabs-scrolling-size; + padding-right: @tabs-scrolling-size; } } @@ -80,7 +79,7 @@ &.@{tab-prefix-cls}-tab-arrow-show { opacity: 1; - width: @tab-scrolling-size; + width: @tabs-scrolling-size; height: 100%; pointer-events: auto; } @@ -166,8 +165,8 @@ .@{tab-prefix-cls}-tab { display: inline-block; height: 100%; - margin: @tab-horizontal-margin; - padding: @tab-horizontal-padding; + margin: @tabs-horizontal-margin; + padding: @tabs-horizontal-padding; box-sizing: border-box; position: relative; @@ -180,11 +179,11 @@ text-decoration: none; &:hover { - color: @tab-hover-color; + color: @tabs-hover-color; } &:active { - color: @tab-active-color; + color: @tabs-active-color; } .@{iconfont-css-prefix} { @@ -193,7 +192,7 @@ } .@{tab-prefix-cls}-tab-active { - color: @tab-highlight-color; + color: @tabs-highlight-color; font-weight: 500; } } @@ -254,20 +253,20 @@ border-bottom: 0; height: 100%; &-tab-prev, &-tab-next { - width: @tab-scrolling-size; + width: @tabs-scrolling-size; height: 0; transition: height .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out; } &-tab-prev.@{tab-prefix-cls}-tab-arrow-show, &-tab-next.@{tab-prefix-cls}-tab-arrow-show { width: 100%; - height: @tab-scrolling-size; + height: @tabs-scrolling-size; } .@{tab-prefix-cls}-tab { float: none; - margin: @tab-vertical-margin; - padding: @tab-vertical-padding; + margin: @tabs-vertical-margin; + padding: @tabs-vertical-padding; display: block; &:last-child { @@ -292,7 +291,7 @@ margin-bottom: 0; &.@{tab-prefix-cls}-nav-container-scrolling { - padding: @tab-scrolling-size 0; + padding: @tabs-scrolling-size 0; } } @@ -308,19 +307,19 @@ width: 2px; left: auto; height: auto; - top: 0; + bottom: auto; } .@{tab-prefix-cls}-tab-next { width: 100%; bottom: 0; - height: @tab-scrolling-size; + height: @tabs-scrolling-size; } .@{tab-prefix-cls}-tab-prev { top: 0; width: 100%; - height: @tab-scrolling-size; + height: @tabs-scrolling-size; } } diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 7055aec7a32..e22a54edf40 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -21,7 +21,6 @@ border-radius: @border-radius-base; box-shadow: @box-shadow-base; background-clip: padding-box; - overflow: hidden; left: -2px; } @@ -32,6 +31,7 @@ max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px; cursor: auto; outline: 0; + line-height: normal; .placeholder; From 2f5b4fc8c5d48785ce4ac282095083c59deaf119 Mon Sep 17 00:00:00 2001 From: ng-zorro-bot <33472860+ng-zorro-bot@users.noreply.github.com> Date: Tue, 20 Nov 2018 10:17:23 +0800 Subject: [PATCH 04/48] chore: update styles(ant-design 3.10.8) (#2475) --- components/badge/style/index.less | 3 ++- components/button/style/index.less | 4 ++-- components/button/style/mixin.less | 2 +- components/checkbox/style/mixin.less | 2 +- components/date-picker/style/Picker.less | 5 +++++ components/date-picker/style/RangePicker.less | 2 +- components/date-picker/style/TimePicker.less | 2 +- components/divider/style/index.less | 2 +- components/dropdown/style/index.less | 2 +- components/form/style/mixin.less | 2 +- components/grid/style/mixin.less | 1 - components/input/style/mixin.less | 4 ++-- components/menu/style/index.less | 5 +++-- components/modal/style/modal.less | 4 ++-- components/notification/style/index.less | 2 +- components/radio/style/index.less | 2 +- components/spin/style/index.less | 2 +- components/steps/style/index.less | 4 ++-- components/style/core/motion/other.less | 2 +- components/style/mixins/iconfont.less | 2 +- components/style/themes/default.less | 3 ++- components/table/style/index.less | 4 ++-- components/tabs/style/index.less | 5 +++-- components/tree/style/directory.less | 2 +- 24 files changed, 38 insertions(+), 30 deletions(-) diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 0458f5316d5..78616faa5f1 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -25,6 +25,7 @@ font-weight: @badge-font-weight; white-space: nowrap; box-shadow: 0 0 0 1px #fff; + z-index: 10; a, a:hover { color: #fff; @@ -80,7 +81,7 @@ height: 100%; border-radius: 50%; border: 1px solid @processing-color; - content: ''; + content: ""; animation: antStatusProcessing 1.2s infinite ease-in-out; } } diff --git a/components/button/style/index.less b/components/button/style/index.less index bd929d5a0c6..fee28d969b7 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -82,7 +82,7 @@ right: -1px; background: #fff; opacity: 0.35; - content: ''; + content: ""; border-radius: inherit; z-index: 1; transition: opacity .2s; @@ -163,7 +163,7 @@ } .christmas&-primary:before { - content: ''; + content: ""; display: block; position: absolute; top: -6px; diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 2848772fdac..138ca490366 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -101,7 +101,7 @@ > a:only-child { color: currentColor; &:after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 023ea25e199..c95686aa88b 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -28,7 +28,7 @@ height: 100%; border-radius: @border-radius-sm; border: 1px solid @checkbox-color; - content: ''; + content: ""; animation: antCheckboxEffect 0.36s ease-in-out; animation-fill-mode: both; visibility: hidden; diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 9af9f2dff81..b9b085a88a5 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -42,6 +42,11 @@ outline: none; } + &-input.@{ant-prefix}-input-sm { + padding-top: 0; + padding-bottom: 0; + } + &:hover &-input:not(.@{ant-prefix}-input-disabled) { border-color: @primary-color; } diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index e8dee5a83cc..62cfe035db5 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -134,7 +134,7 @@ z-index: 1; } &:before { - content: ''; + content: ""; display: block; background: @item-active-bg; border-radius: 0; diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 25e080cdcde..6bda075469e 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -90,7 +90,7 @@ } li:last-child:after { - content: ''; + content: ""; height: 202px; display: block; } diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 6839add3b17..c7e6411899e 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -39,7 +39,7 @@ margin: 16px 0; &:before, &:after { - content: ''; + content: ""; display: table-cell; position: relative; top: 50%; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 447d2fdff0b..ec0e955b096 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -187,7 +187,7 @@ .@{dropdown-prefix-cls}-trigger, .@{dropdown-prefix-cls}-link { - .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) { + > .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) { .iconfont-size-under-12px(10px); } } diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 644886be584..1004c5dcfb5 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -91,7 +91,7 @@ input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; // lesshint duplicateProperty: false + outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less index fd95df193b6..bac74f319c9 100644 --- a/components/grid/style/mixin.less +++ b/components/grid/style/mixin.less @@ -49,7 +49,6 @@ .col(1); // kickstart it } -// lesshint false .loop-grid-columns(@index, @class) when (@index > 0) { .@{ant-prefix}-col@{class}-@{index} { display: block; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 4eaccdeec8c..5f8ffaa33e7 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -160,7 +160,7 @@ // Reset Select's style in addon .@{ant-prefix}-select { - margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base); // lesshint spaceAroundOperator: false + margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base); .@{ant-prefix}-select-selection { background-color: inherit; @@ -181,7 +181,7 @@ // https://github.com/ant-design/ant-design/issues/3714 > i:only-child:after { position: absolute; - content: ''; + content: ""; top: 0; left: 0; right: 0; diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 14f3a0f051a..0a3740dd449 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -67,7 +67,7 @@ left: 0; bottom: 0; right: 0; - content: ''; + content: ""; } } @@ -180,6 +180,7 @@ position: absolute; border-radius: @border-radius-base; z-index: @zindex-dropdown; + background: @menu-popup-bg; .submenu-title-wrapper { padding-right: 20px; @@ -216,7 +217,7 @@ width: 10px; &:before, &:after { - content: ''; + content: ""; position: absolute; vertical-align: baseline; background: #fff; diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 761a2727fd3..7c40f97048d 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -114,7 +114,7 @@ right: 0; left: 0; bottom: 0; - background-color: @modal-mask-bg; // lesshint duplicateProperty: false + background-color: @modal-mask-bg; height: 100%; z-index: @zindex-modal-mask; filter: ~"alpha(opacity=50)"; @@ -132,7 +132,7 @@ .@{dialog-prefix-cls}-centered { text-align: center; &:before { - content: ''; + content: ""; display: inline-block; height: 100%; vertical-align: middle; diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 9f5e42c3df0..aee8bacbc46 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -58,7 +58,7 @@ display: block; max-width: 4px; &:before { - content: ''; + content: ""; display: block; } } diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 7f5e6dcd87c..b85768576a4 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -46,7 +46,7 @@ height: 100%; border-radius: 50%; border: 1px solid @radio-dot-color; - content: ''; + content: ""; animation: antRadioEffect 0.36s ease-in-out; animation-fill-mode: both; visibility: hidden; diff --git a/components/spin/style/index.less b/components/spin/style/index.less index c36f872ff09..5a91d5277c4 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -90,7 +90,7 @@ filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; &:after { - content: ''; + content: ""; position: absolute; left: 0; right: 0; diff --git a/components/steps/style/index.less b/components/steps/style/index.less index bcc5215ff7d..bae8e7ce099 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -82,7 +82,7 @@ top: 12px; padding: 0 10px; &:after { - content: ''; + content: ""; display: inline-block; background: @border-color-split; height: 1px; @@ -99,7 +99,7 @@ position: relative; line-height: @steps-icon-size; &:after { - content: ''; + content: ""; height: 1px; width: 9999px; background: @wait-tail-color; diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less index e823753d8d9..6ad5a623d22 100644 --- a/components/style/core/motion/other.less +++ b/components/style/core/motion/other.less @@ -11,7 +11,7 @@ [ant-click-animating-without-extra-node]:after, .ant-click-animating-node { - content: ''; + content: ""; position: absolute; top: -1px; left: -1px; diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less index 112bebccdb5..a18f0c27135 100644 --- a/components/style/mixins/iconfont.less +++ b/components/style/mixins/iconfont.less @@ -33,7 +33,7 @@ @font-scale: unit(@size / 12px); font-size: 12px; // IE9 - font-size: ~"@{size} \9"; // lesshint duplicateProperty: false + font-size: ~"@{size} \9"; transform: scale(@font-scale) rotate(@rotate); :root & { font-size: @font-size-sm; // reset IE9 and above diff --git a/components/style/themes/default.less b/components/style/themes/default.less index af1cc8e5e7b..4e287706580 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -321,7 +321,8 @@ @menu-inline-toplevel-item-height: 40px; @menu-item-height: 40px; @menu-collapsed-width: 80px; -@menu-bg: transparent; +@menu-bg: @component-background; +@menu-popup-bg: @component-background; @menu-item-color: @text-color; @menu-highlight-color: @primary-color; @menu-item-active-bg: @item-active-bg; diff --git a/components/table/style/index.less b/components/table/style/index.less index 77751b9e585..b45e82a9db8 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -154,7 +154,7 @@ .@{table-prefix-cls}-column-sorters { &:before { position: absolute; - content: ''; + content: ""; top: 0; left: 0; right: 0; @@ -219,7 +219,7 @@ position: relative; border-top: @border-width-base @border-style-base @border-color-split; &:before { - content: ''; + content: ""; height: 1px; background: @table-header-bg; position: absolute; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 5bc9b852788..8b650f49d14 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -305,6 +305,7 @@ .@{tab-prefix-cls}-ink-bar { width: 2px; + top: 0; left: auto; height: auto; bottom: auto; @@ -385,12 +386,12 @@ .@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated, .@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated { - transition: transform .3s @ease-in-out, width .3s @ease-in-out; + transition: transform .3s @ease-in-out, width .3s @ease-in-out, left .3s @ease-in-out; } .@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated, .@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated { - transition: transform .3s @ease-in-out, height .3s @ease-in-out; + transition: transform .3s @ease-in-out, height .3s @ease-in-out, top .3s @ease-in-out; } .no-flex, diff --git a/components/tree/style/directory.less b/components/tree/style/directory.less index 18e8ab6608c..c33e683b270 100644 --- a/components/tree/style/directory.less +++ b/components/tree/style/directory.less @@ -42,7 +42,7 @@ } &:before { - content: ''; + content: ""; position: absolute; left: 0; right: 0; From 811a009fb9a96f5f10d76f4d5bf2bf1ada224e5d Mon Sep 17 00:00:00 2001 From: Michael Krog Date: Tue, 20 Nov 2018 09:39:46 +0100 Subject: [PATCH 05/48] feat: Adds danish locale (#2486) close #2485 --- components/i18n/languages/da_DK.ts | 44 +++++++++++++++++++ .../i18n/languages/date-picker/da_DK.ts | 19 ++++++++ .../i18n/languages/time-picker/da_DK.ts | 6 +++ 3 files changed, 69 insertions(+) create mode 100644 components/i18n/languages/da_DK.ts create mode 100644 components/i18n/languages/date-picker/da_DK.ts create mode 100644 components/i18n/languages/time-picker/da_DK.ts diff --git a/components/i18n/languages/da_DK.ts b/components/i18n/languages/da_DK.ts new file mode 100644 index 00000000000..25387489ab7 --- /dev/null +++ b/components/i18n/languages/da_DK.ts @@ -0,0 +1,44 @@ +import Calendar from './calendar/da_DK'; +import DatePicker from './date-picker/da_DK'; +import Pagination from './pagination/da_DK'; +import TimePicker from './time-picker/da_DK'; + +export default { + locale: 'da', + DatePicker, + TimePicker, + Calendar, + Pagination, + Table: { + filterTitle: 'Filtermenu', + filterConfirm: 'OK', + filterReset: 'Nulstil', + emptyText: 'Ingen data', + selectAll: 'Vælg alle', + selectInvert: 'Inverter valg', + }, + Modal: { + okText: 'OK', + cancelText: 'Annuller', + justOkText: 'OK', + }, + Popconfirm: { + okText: 'OK', + cancelText: 'Annuller', + }, + Transfer: { + notFoundContent: 'Intet match', + searchPlaceholder: 'Søg her', + itemUnit: 'element', + itemsUnit: 'elementer', + }, + Select: { + notFoundContent: 'Intet match', + }, + Upload: { + uploading: 'Uploader...', + removeFile: 'Fjern fil', + uploadError: 'Fejl ved upload', + previewFile: 'Forhåndsvisning', + }, +}; diff --git a/components/i18n/languages/date-picker/da_DK.ts b/components/i18n/languages/date-picker/da_DK.ts new file mode 100644 index 00000000000..dd83ad44414 --- /dev/null +++ b/components/i18n/languages/date-picker/da_DK.ts @@ -0,0 +1,19 @@ +import CalendarLocale from '../calendar/da_DK'; +import TimePickerLocale from '../time-picker/da_DK'; + +// Merge into a locale object +const locale = { + lang: { + placeholder: 'Vælg dato', + rangePlaceholder: ['Startdato', 'Slutdato'], + ...CalendarLocale, + }, + timePickerLocale: { + ...TimePickerLocale, + }, +}; + +// All settings at: +// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json + +export default locale; diff --git a/components/i18n/languages/time-picker/da_DK.ts b/components/i18n/languages/time-picker/da_DK.ts new file mode 100644 index 00000000000..c5142d3ae9f --- /dev/null +++ b/components/i18n/languages/time-picker/da_DK.ts @@ -0,0 +1,6 @@ +const locale = { + placeholder: 'Vælg tid', + }; + + export default locale; + \ No newline at end of file From e6e2369d24dae13878badd13e7070fc6c44a7087 Mon Sep 17 00:00:00 2001 From: Liad Idan Date: Sat, 24 Nov 2018 13:46:14 +0200 Subject: [PATCH 06/48] fix(module:menu): fix dropdown menu item selected className (#2434) close #2433 --- components/dropdown/nz-dropdown.spec.ts | 11 ++++++++++- components/menu/nz-menu-item.directive.ts | 17 +++++++++++++---- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/components/dropdown/nz-dropdown.spec.ts b/components/dropdown/nz-dropdown.spec.ts index d8b4acb5d7d..e85604acfea 100644 --- a/components/dropdown/nz-dropdown.spec.ts +++ b/components/dropdown/nz-dropdown.spec.ts @@ -133,6 +133,14 @@ describe('dropdown', () => { expect(items[ 0 ].classList.contains('ant-dropdown-menu-item')).toBe(true); expect(items[ 0 ].classList.contains('ant-dropdown-menu-item-selected')).toBe(false); }); + it('should append the correct className', () => { + testComponent.visible = true; + testComponent.itemSelected = true; + fixture.detectChanges(); + const items = overlayContainerElement.querySelectorAll('.ant-dropdown-menu-item') as NodeListOf; + expect(items[ 0 ].classList.contains('.ant-menu-item-selected')).toBe(false); + expect(items[ 0 ].classList.contains('ant-dropdown-menu-item-selected')).toBe(true); + }); it('should backdrop work with click', () => { testComponent.trigger = 'click'; fixture.detectChanges(); @@ -390,7 +398,7 @@ describe('dropdown', () => { Hover me