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;