diff --git a/.gitignore b/.gitignore index 059002f9..c6dc86d5 100644 --- a/.gitignore +++ b/.gitignore @@ -355,4 +355,6 @@ scripts/previewEditor/index.html /site/AntDesign.Docs/wwwroot/css /.nyc_output /coverage -/tests/AntDesign.Tests.Js/coverage.xml \ No newline at end of file +/tests/AntDesign.Tests.Js/coverage.xml +/lib +site/AntDesign.Docs/wwwroot/color.less diff --git a/build-config.js b/build-config.js new file mode 100644 index 00000000..12394dd9 --- /dev/null +++ b/build-config.js @@ -0,0 +1,14 @@ +const { join } = require('path'); + +// const packageJson = require(`${__dirname}/components/package.json`); +const buildVersion = '0.11.0';// packageJson.version; + +module.exports = { + projectVersion: buildVersion, + projectDir: __dirname, + componentsDir: join(__dirname, 'components'), + scriptsDir: join(__dirname, 'scripts'), + outputDir: join(__dirname, 'dist'), + publishDir: join(__dirname, 'publish'), + libDir: join(__dirname, 'lib') +}; diff --git a/components/AntBlazor.xml b/components/AntBlazor.xml deleted file mode 100644 index ae275198..00000000 --- a/components/AntBlazor.xml +++ /dev/null @@ -1,904 +0,0 @@ - - - - AntDesign - - - - - Offset from the bottom of the viewport (in pixels) - - - - - Offset from the top of the viewport (in pixels) - - - - - Specifies the scrollable area DOM node - - - - - Alert component for feedback. - - - - - Called when close animation is finished - - - - - Whether to show as banner - - - - - Whether Alert can be closed - - - - - Close text to show - - - - - Additional content of Alert - - - - - Custom icon, effective when showIcon is true - - - - - Content of Aler - - - - - Whether to show icon. - - - - - Type of Alert styles, options: success, info, warning, error - - - - - Callback when Alert is closed. - - - - - Additional Content - - - - - Icon to show. - - - - - Indicator if the component is closed or not. - - - - - Just before we close the component we set this indicator to show a closing animation. - - - - - Sets the default classes. - - - - - Triggered each time a parameter is changed. - - - - - Start-up code. - - - - - Handles the close callback. - - - - - - - Handles the after close callback. - - - - - - - Small numerical value or status descriptor for UI elements. - - - - - Customize Badge dot color - - - - - Number to show in badge - - - - - Whether to display a red dot instead of count - - - - - Set offset of the badge dot, like[x, y] - - - - - Max count to show - - - - - Whether to show badge when count is zero - - - - - Set Badge as a status dot - - - - - If status is set, text sets the display text of the status dot - - - - - Text to show when hovering over the badge - - - - - Wrapping this item. - - - - - Sets the default CSS classes. - - - - - Startup code - - - - - Runs every time a parameter is set. - - - - - The position of the dots, which can be one of Top, Bottom, Left or Right, - - - - - Whether to scroll automatically - - - - - Transition effect, - - - - - Returned ElementRef reference for DOM element. - - - - - Specifies one or more class names for an DOM element. - - - - - Specifies an inline style for an DOM element. - - - - - Base class for any input control that optionally supports an . - - the natural type of the input's value - - - - When contained within an disables this control's - participation in validation checking. This means that this control will not - reflect the validation state of the underlying data binding. - - - - - Gets the associated . - - - - - Gets the for the bound value. - - - - - Gets a string that indicates the status of the field being edited. This will include - some combination of "modified", "valid", or "invalid", depending on the status of the field. - - - - - Should be invoked by whenever a bound value is changed, such - as right after the value's corresponding ValueChanged - EventCallback is invoked. - - - - - Gets or sets an expression that identifies the bound value. - - - - - - - - set if there any child overlay show or hide - overlay would not hide if any child is showing - - - - - - when overlay is complete hide, IsPopup return true - when overlay is hiding(playing hide animation), IsPopup return false, IsHiding return true. - - - - - - - - - - - - Get pickerValue by picker index - - - - - - - Get value by picker index - - - - - - - "left" | "right" | "top" | "bottom" - - - - - "ltr"|"rtl" - - - - - 'top' | 'middle' | 'bottom' - - - - - 'start' | 'end' | 'center' | 'space-around' | 'space-between' - - - - - 'fill' | 'outline' | 'twotone'; - - - - - - - - - - Invoked when user add/remove content - - - - - - - scrollHeight of 1 row - - - - - total height = row * + - - - - - 'light' | 'dark' - - - - - "xs" | "sm" | "md" | "lg" | "xl" | "xxl" - - - - - Gets or sets the CSS class name applied to the NavLink when the - current route matches the NavLink href. - - - - - Gets or sets the computed CSS class based on whether or not the link is active. - - - - - Gets or sets the child content of the component. - - - - - Gets or sets a value representing the URL matching behavior. - - - - - - - - - - - - - - - - - - - Message Service - - - - - 控制出现与消失的动画 - - - - - 自定义关闭按钮 - - - - - 自定义 CSS class - - - - - 自定义关闭图标 - - - - - 通知提醒标题，必选，string 或者 RenderFragment - - - - - 通知提醒内容，必选，string 或者 RenderFragment - - - - - 自动关闭的延时，单位为秒。默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 - - - - - 自定义图标 - - - - - 当前通知唯一标志 - - - - - 当通知关闭时触发 - - - - - 点击通知时触发的回调函数 - - - - - 自定义内联样式 - - - - - 弹出位置 - - - - - 通知提醒框左侧的图标类型 - - - - - AntNotification全局配置 - - - - - 消息从底部弹出时，距离底部的位置，单位像素。 - - - - - 消息从顶部弹出时，距离顶部的位置，单位像素。 - - - - - 是否开启 RTL 模式 - - - - - 自定义关闭图标 - - - - - 自动关闭的延时，单位为秒。默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 - - - - - 弹出位置 - - - - - modify global config - - - - - - - - - - - AntNotification Service - - - - - Open a notification box - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - close notification by key - - - - - - - destroy - - - - - 'default' | 'small' - - - - - 'page' | 'prev' | 'next' | 'prev_5' | 'next_5' - - - - - 'page' | 'prev' | 'next' | 'prev_5' | 'next_5' - - - - - 'default' | 'small' = 'default'; - - - - - progress size - - - - - to set the type, options: line circle dashboard - - - - - template function of the content - - - - - to set the completion percentage - - - - - whether to display the progress value and the status icon - - - - - to set the status of the Progress, options: success exception normal active(line only) - - - - - to set the style of the progress linecap - - - - - color of progress bar - - - - - segmented success percent - - - - - color of unfilled part - - - - - to set the width of the progress bar, unit: px - to set the width of the circular progress, unit: percentage of the canvas width - to set the width of the dashboard progress, unit: percentage of the canvas width - - - - - color of progress bar, render linear-gradient when passing an object - color of circular progress, render linear-gradient when passing an object - - - - - the total step count - - - - - to set the canvas width of the circular progress, unit: px - to set the canvas width of the dashboard progress, unit: px - - - - - the gap degree of half circle, 0 ~ 295 - - - - - the gap position, options: top bottom left right - - - - - success | error | info | warning | 404 | 403 | 500 - default: info - - - - - The default value of slider. When is false, use number, otherwise, use [number, number] - - - - - If true, the slider will not be interactable - - - - - Whether the thumb can drag over tick only - - - - - Make effect when not null, true means containment and false means coordinative - - - - - Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style - - - - - The maximum value the slider can slide to - - - - - The minimum value the slider can slide to - - - - - dual thumb mode - - - - - reverse the component - - - - - The granularity the slider can step through values. Must greater than 0, and be divided by ( - ) . When no null, can be null. - - - - - Slider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is null. - - - - - The value of slider. When range is false, use number, otherwise, use [number, number] - - - - - If true, the slider will be vertical. - - - - - Fire when onmouseup is fired. - - - - - Callback function that is fired when the user changes the slider's value. - - - - - Set Tooltip display position. Ref Tooltip - - - - - If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. - - - - - The DOM container of the Tooltip, the default behavior is to create a div element in body. - - - - - small | default | large - - - - - Forced render of content in tabs, not lazy render after clicking on tabs - - - - - TabPane's key - - - - - Show text in 's head - - - - - Current 's - - - - - Whether to change tabs with animation. Only works while = or - - - - - Replace the TabBar - - - - - Initial active 's , if is not set - - - - - Hide plus icon or not. Only works while = - - - - - Preset tab bar size - - - - - Extra content in tab bar - - - - - The gap between tabs - - - - - Tab bar style object - - - - - Position of tabs - - - - - Basic style of tabs - - - - - Callback executed when active tab is changed - - - - - Callback executed when tab is added or removed. Only works while = - - - - - Callback executed when next button is clicked - - - - - Callback executed when prev button is clicked - - - - - Callback executed when tab is clicked - - - - - Whether to turn on keyboard navigation - - - - - Add to - - The AntTabPane to be added - Key is null - An AntTabPane with the same key already exists - - - - 'default' | 'closeable' | 'checkable' - - - - - 'left' | 'alternate' | 'right' - - - - - 'horizontal' | 'vertical' - - - - - 'left' | 'right' | 'center' - - - - diff --git a/components/affix/style/entry.less b/components/affix/style/entry.less index 06547c43..911f7808 100644 --- a/components/affix/style/entry.less +++ b/components/affix/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import "./patch"; diff --git a/components/affix/style/patch.less b/components/affix/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/alert/style/entry.less b/components/alert/style/entry.less index 06547c43..96cebe33 100644 --- a/components/alert/style/entry.less +++ b/components/alert/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 7c9ffc69..72238504 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -84,6 +84,7 @@ .@{iconfont-css-prefix}-close { color: @alert-close-color; transition: color 0.3s; + &:hover { color: @alert-close-hover-color; } @@ -93,6 +94,7 @@ &-close-text { color: @alert-close-color; transition: color 0.3s; + &:hover { color: @alert-close-hover-color; } @@ -111,6 +113,7 @@ margin-right: @alert-with-description-padding-vertical; font-size: @alert-with-description-icon-size; } + &-with-description &-message { display: block; margin-bottom: 4px; diff --git a/components/alert/style/patch.less b/components/alert/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/alert/style/rtl.less b/components/alert/style/rtl.less index 5818e2fc..31d63146 100644 --- a/components/alert/style/rtl.less +++ b/components/alert/style/rtl.less @@ -3,12 +3,6 @@ direction: rtl; } - &&-no-icon { - .@{alert-prefix-cls}-rtl& { - padding: @alert-no-icon-padding-vertical 15px; - } - } - &-icon { .@{alert-prefix-cls}-rtl & { margin-right: auto; @@ -30,10 +24,17 @@ } } - &-with-description &-icon { + &-with-description { .@{alert-prefix-cls}-rtl& { - margin-right: auto; - margin-left: @alert-with-description-padding-vertical; + padding-right: @alert-with-description-icon-size; + padding-left: @alert-with-description-padding-vertical; + } + + .@{alert-prefix-cls}-icon { + .@{alert-prefix-cls}-rtl& { + margin-right: auto; + margin-left: @alert-with-description-padding-vertical; + } } } } diff --git a/components/anchor/style/entry.less b/components/anchor/style/entry.less index 06547c43..a8516724 100644 --- a/components/anchor/style/entry.less +++ b/components/anchor/style/entry.less @@ -1 +1,3 @@ @import './index.less'; +@import '../../affix/style/entry.less'; +@import "./patch"; diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 347bc914..92d0042b 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -21,6 +21,7 @@ top: 0; left: 0; height: 100%; + &::before { position: relative; display: block; @@ -30,6 +31,7 @@ background-color: @anchor-border-color; content: ' '; } + &-ball { position: absolute; left: 50%; @@ -41,24 +43,24 @@ border-radius: 8px; transform: translateX(-50%); transition: top 0.3s ease-in-out; + &.visible { display: inline-block; } } } - &.fixed &-ink &-ink-ball { + &-fixed &-ink &-ink-ball { display: none; } &-link { padding: @anchor-link-padding; - line-height: 1.143; &-title { position: relative; display: block; - margin-bottom: 6px; + margin-bottom: 3px; overflow: hidden; color: @text-color; white-space: nowrap; @@ -76,8 +78,8 @@ } &-link &-link { - padding-top: 5px; - padding-bottom: 5px; + padding-top: 2px; + padding-bottom: 2px; } } diff --git a/components/anchor/style/patch.less b/components/anchor/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/ant-design-blazor.aliyun.less b/components/ant-design-blazor.aliyun.less index 2c74e91d..c9dc4791 100644 --- a/components/ant-design-blazor.aliyun.less +++ b/components/ant-design-blazor.aliyun.less @@ -1,3 +1,3 @@ @import "./style/aliyun.less"; -@import "./style/entry.less"; +@import "./style/patch.less"; @import "./components.less"; diff --git a/components/ant-design-blazor.compact.less b/components/ant-design-blazor.compact.less index cbca1626..298df7bc 100644 --- a/components/ant-design-blazor.compact.less +++ b/components/ant-design-blazor.compact.less @@ -1,3 +1,3 @@ @import "./style/compact.less"; -@import "./style/entry.less"; +@import "./style/patch.less"; @import "./components.less"; diff --git a/components/ant-design-blazor.dark.less b/components/ant-design-blazor.dark.less index 9e5bcd9f..4d0e4c16 100644 --- a/components/ant-design-blazor.dark.less +++ b/components/ant-design-blazor.dark.less @@ -1,3 +1,3 @@ @import "./style/dark.less"; -@import "./style/entry.less"; +@import "./style/patch.less"; @import "./components.less"; diff --git a/components/ant-design-blazor.less b/components/ant-design-blazor.less index 65652512..f34d04b8 100644 --- a/components/ant-design-blazor.less +++ b/components/ant-design-blazor.less @@ -1,2 +1,3 @@ -@import "./style/entry.less"; -@import "./components.less"; +@import './style/default.less'; +@import './style/patch.less'; +@import './components.less'; diff --git a/components/ant-design-blazor.variable.less b/components/ant-design-blazor.variable.less new file mode 100644 index 00000000..a95cb847 --- /dev/null +++ b/components/ant-design-blazor.variable.less @@ -0,0 +1,3 @@ +@import './style/variable.less'; +@import './style/patch.less'; +@import './components.less'; diff --git a/components/auto-complete/style/entry.less b/components/auto-complete/style/entry.less index 06547c43..446b5334 100644 --- a/components/auto-complete/style/entry.less +++ b/components/auto-complete/style/entry.less @@ -1 +1,5 @@ @import './index.less'; +// style dependencies +@import '../../select/style/entry.less'; +@import '../../input/style/entry.less'; +@import "./patch"; diff --git a/components/auto-complete/style/patch.less b/components/auto-complete/style/patch.less new file mode 100644 index 00000000..bb935045 --- /dev/null +++ b/components/auto-complete/style/patch.less @@ -0,0 +1,3 @@ +.ant-select-dropdown-hidden { + display: none; +} diff --git a/components/back-top/style/responsive.less b/components/back-top/style/responsive.less index 7b21a850..5529704d 100644 --- a/components/back-top/style/responsive.less +++ b/components/back-top/style/responsive.less @@ -1,11 +1,21 @@ @media screen and (max-width: @screen-md) { .@{backtop-prefix-cls} { right: 60px; + + &-rtl { + right: auto; + left: 60px; + } } } @media screen and (max-width: @screen-xs) { .@{backtop-prefix-cls} { right: 20px; + + &-rtl { + right: auto; + left: 20px; + } } } diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 4fc4895b..8059ae58 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -25,6 +25,7 @@ background: @badge-color; border-radius: (@badge-height / 2); box-shadow: 0 0 0 1px @shadow-color-inverse; + a, a:hover { color: @badge-text-color; @@ -86,12 +87,15 @@ vertical-align: middle; border-radius: 50%; } + &-success { background-color: @success-color; } + &-processing { position: relative; background-color: @processing-color; + &::after { position: absolute; top: 0; @@ -104,12 +108,15 @@ content: ''; } } + &-default { background-color: @normal-color; } + &-error { background-color: @error-color; } + &-warning { background-color: @warning-color; } @@ -157,7 +164,8 @@ vertical-align: middle; } - .@{number-prefix-cls}-custom-component { + .@{number-prefix-cls}-custom-component, + .@{badge-prefix-cls}-count { transform: none; } @@ -168,10 +176,6 @@ display: block; transform-origin: 50% 50%; } - - .@{badge-prefix-cls}-count { - transform: none; - } } } @@ -180,6 +184,7 @@ transform: scale(0.8); opacity: 0.5; } + 100% { transform: scale(2.4); opacity: 0; @@ -188,12 +193,16 @@ // Safari will blink with transform when inner element has absolute style. .safari-fix-motion() { + /* stylelint-disable property-no-vendor-prefix */ -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; + /* stylelint-enable property-no-vendor-prefix */ } .@{number-prefix-cls} { overflow: hidden; + direction: ltr; + &-only { position: relative; display: inline-block; @@ -218,6 +227,7 @@ transform: scale(0) translate(50%, -50%); opacity: 0; } + 100% { transform: scale(1) translate(50%, -50%); } @@ -227,6 +237,7 @@ 0% { transform: scale(1) translate(50%, -50%); } + 100% { transform: scale(0) translate(50%, -50%); opacity: 0; @@ -238,6 +249,7 @@ transform: scale(0); opacity: 0; } + 100% { transform: scale(1); } @@ -247,6 +259,7 @@ 0% { transform: scale(1); } + 100% { transform: scale(0); opacity: 0; diff --git a/components/badge/style/patch.less b/components/badge/style/patch.less index c5bb429b..76e51f63 100644 --- a/components/badge/style/patch.less +++ b/components/badge/style/patch.less @@ -9,4 +9,14 @@ font-size: @badge-font-size; } } + + .ant-scroll-number:only-child { + position: relative; + top: auto; + display: block; + } + + .ant-badge-count:only-child { + transform: none; + } } diff --git a/components/badge/style/ribbon.less b/components/badge/style/ribbon.less index b2ea714c..6a6e366b 100644 --- a/components/badge/style/ribbon.less +++ b/components/badge/style/ribbon.less @@ -30,7 +30,7 @@ top: 100%; width: 8px; height: 8px; - color: currentColor; + color: currentcolor; border: 4px solid; transform: scaleY(0.75); transform-origin: top; @@ -66,7 +66,7 @@ border-bottom-right-radius: 0; .@{ribbon-prefix-cls}-corner { right: 0; - border-color: currentColor transparent transparent currentColor; + border-color: currentcolor transparent transparent currentcolor; } } @@ -75,7 +75,7 @@ border-bottom-left-radius: 0; .@{ribbon-prefix-cls}-corner { left: 0; - border-color: currentColor currentColor transparent transparent; + border-color: currentcolor currentcolor transparent transparent; } } } diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less index 40c1b30f..276a6ef6 100644 --- a/components/badge/style/rtl.less +++ b/components/badge/style/rtl.less @@ -3,10 +3,10 @@ direction: rtl; } - &-count, - &-dot, - .@{number-prefix-cls}-custom-component { - .@{badge-prefix-cls}-rtl & { + &:not(&-not-a-wrapper) &-count, + &:not(&-not-a-wrapper) &-dot, + &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { + .@{badge-prefix-cls}-rtl& { right: auto; left: 0; direction: ltr; @@ -15,7 +15,7 @@ } } - .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component { + &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { right: auto; left: 0; transform: translate(-50%, -50%); @@ -31,24 +31,16 @@ } } - &-zoom-appear, - &-zoom-enter { - .@{badge-prefix-cls}-rtl & { + &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl { + .@{badge-prefix-cls}-zoom-appear, + .@{badge-prefix-cls}-zoom-enter { animation-name: antZoomBadgeInRtl; } - } - &-zoom-leave { - .@{badge-prefix-cls}-rtl & { + .@{badge-prefix-cls}-zoom-leave { animation-name: antZoomBadgeOutRtl; } } - - &-not-a-wrapper { - .@{badge-prefix-cls}-count { - transform: none; - } - } } .@{ribbon-prefix-cls}-rtl { @@ -61,9 +53,10 @@ .@{ribbon-prefix-cls}-corner { right: unset; left: 0; - border-color: currentColor currentColor transparent transparent; + border-color: currentcolor currentcolor transparent transparent; + &::after { - border-color: currentColor currentColor transparent transparent; + border-color: currentcolor currentcolor transparent transparent; } } } @@ -75,9 +68,10 @@ .@{ribbon-prefix-cls}-corner { right: 0; left: unset; - border-color: currentColor transparent transparent currentColor; + border-color: currentcolor transparent transparent currentcolor; + &::after { - border-color: currentColor transparent transparent currentColor; + border-color: currentcolor transparent transparent currentcolor; } } } @@ -88,6 +82,7 @@ transform: scale(0) translate(-50%, -50%); opacity: 0; } + 100% { transform: scale(1) translate(-50%, -50%); } @@ -97,6 +92,7 @@ 0% { transform: scale(1) translate(-50%, -50%); } + 100% { transform: scale(0) translate(-50%, -50%); opacity: 0; diff --git a/components/breadcrumb/BreadcrumbItem.razor b/components/breadcrumb/BreadcrumbItem.razor index 4b8f6672..95f60f27 100644 --- a/components/breadcrumb/BreadcrumbItem.razor +++ b/components/breadcrumb/BreadcrumbItem.razor @@ -5,7 +5,7 @@ @if (Overlay != null) { - + diff --git a/components/breadcrumb/style/entry.less b/components/breadcrumb/style/entry.less index 85545241..96cebe33 100644 --- a/components/breadcrumb/style/entry.less +++ b/components/breadcrumb/style/entry.less @@ -1,2 +1,2 @@ @import './index.less'; -@import './patch.less'; \ No newline at end of file +@import './patch.less'; diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 52bba120..79dee8ae 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -13,22 +13,32 @@ font-size: @breadcrumb-icon-font-size; } + ol { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; + } + a { color: @breadcrumb-link-color; transition: color 0.3s; + &:hover { color: @breadcrumb-link-color-hover; } } - & > span:last-child { + li:last-child { color: @breadcrumb-last-item-color; + a { color: @breadcrumb-last-item-color; } } - & > span:last-child &-separator { + li:last-child &-separator { display: none; } diff --git a/components/breadcrumb/style/patch.less b/components/breadcrumb/style/patch.less index afd200fe..9de8fd1d 100644 --- a/components/breadcrumb/style/patch.less +++ b/components/breadcrumb/style/patch.less @@ -1,15 +1,29 @@ -.@{breadcrumb-prefix-cls} { - &-link { - .@{iconfont-css-prefix} + span { - margin-left: 4px; +.@{breadcrumb-prefix-cls} { + &-link { + .@{iconfont-css-prefix} + span { + margin-left: 4px; + } } - } + // We introduced an extra layer. + .ant-blazor-breadcrumb-item:last-child { + color: @breadcrumb-last-item-color; - .ant-blazor-breadcrumb-item:last-child { - color: rgba(0, 0, 0, 0.65); - } + a { + color: @breadcrumb-last-item-color; + } + } - .ant-blazor-breadcrumb-item:last-child .ant-breadcrumb-separator { - display: none; - } + .ant-blazor-breadcrumb-item:last-child .@{breadcrumb-prefix-cls}-separator { + display: none; + } + + &-rtl { + > .ant-blazor-breadcrumb-item { + float: right; + } + } +} + +.ant-blazor-breadcrum { + display: block; } \ No newline at end of file diff --git a/components/button/style/index.less b/components/button/style/index.less index 2a5737b3..cdb67c8d 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -18,7 +18,7 @@ // Fixing https://github.com/ant-design/ant-design/issues/18107 // Fixing https://github.com/ant-design/ant-design/issues/13214 // It is a render problem of chrome, which is only happened in the codesandbox demo - // 0.001px solution works and I don't why + // 0.001px solution works and I don't know why line-height: @btn-line-height; .btn(); .btn-default(); @@ -109,6 +109,15 @@ } } + // https://github.com/ant-design/ant-design/issues/32365 + a&-icon-only { + vertical-align: -1px; + + > .@{iconfont-css-prefix} { + display: inline; + } + } + &-round { .btn-round(@btn-prefix-cls); &.@{btn-prefix-cls}-icon-only { @@ -144,16 +153,14 @@ &.@{iconfont-css-prefix}-plus, &.@{iconfont-css-prefix}-minus { > svg { - shape-rendering: optimizeSpeed; + shape-rendering: optimizespeed; } } } &&-loading { position: relative; - &:not([disabled]) { - pointer-events: none; - } + cursor: default; &::before { display: block; @@ -161,7 +168,7 @@ } & > &-loading-icon { - transition: all 0.3s @ease-in-out; + transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out; .@{iconfont-css-prefix} { padding-right: @padding-xs; @@ -198,28 +205,46 @@ &&-background-ghost { color: @btn-default-ghost-color; border-color: @btn-default-ghost-border; + &, &:hover, &:active, &:focus { background: @btn-default-ghost-bg; } + + &:hover, + &:focus { + color: @primary-color-hover; + border-color: @primary-color-hover; + } + + &:active { + color: @primary-color-active; + border-color: @primary-color-active; + } + + &[disabled] { + color: @disabled-color; + background: @btn-default-ghost-bg; + border-color: @btn-default-border; + } } &-background-ghost&-primary { - .button-variant-ghost(@btn-primary-bg); + .button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active); } &-background-ghost&-danger { - .button-variant-ghost(@btn-danger-border); + .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active); } &-background-ghost&-dangerous { - .button-variant-ghost(@btn-danger-border); + .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active); } &-background-ghost&-dangerous&-link { - .button-variant-ghost(@btn-danger-border, transparent); + .button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active); } &-two-chinese-chars::first-letter { @@ -231,7 +256,7 @@ letter-spacing: 0.34em; } - &-block { + &&-block { width: 100%; } @@ -256,6 +281,7 @@ a.@{btn-prefix-cls} { &-lg { line-height: @btn-height-lg - 2px; } + &-sm { line-height: @btn-height-sm - 2px; } diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index f34c991a..084ecaa5 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -11,6 +11,28 @@ border-radius: @border-radius; } +.button-color(@color; @background; @border) { + color: @color; + border-color: @border; // a inside Button which only work in Chrome + & when not(@background = null) { + background: @background; + } + // http://stackoverflow.com/a/17253457 + > a:only-child { + color: currentcolor; + + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; + } + } +} + .button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) { &[disabled] { &, @@ -25,7 +47,7 @@ } } -.button-variant-primary(@color; @background) { +.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) { .button-color(@color; @background; @background); text-shadow: @btn-text-shadow; @@ -38,11 +60,14 @@ @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` ); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` ); } + & when (@theme = variable) { + .button-color(@color; @backgroundHover; @backgroundHover); + } } &:active { @@ -51,11 +76,14 @@ @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` ); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` ); } + & when (@theme = variable) { + .button-color(@color; @backgroundActive; @backgroundActive); + } } .button-disabled(); @@ -69,38 +97,50 @@ & when (@theme = dark) { .button-color(@primary-5; @background; @primary-5); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5) ` ); } + & when (@theme = variable) { + .button-color(@primary-color-hover; @background; @primary-color-hover); + } } + &:active { & when (@theme = dark) { .button-color(@primary-7; @background; @primary-7); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( ~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7) ` ); } + & when (@theme = variable) { + .button-color(@primary-color-active; @background; @primary-color-active); + } } .button-disabled(); } -.button-variant-ghost(@color; @border: @color) { + +.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) { .button-color(@color; null; @border); text-shadow: none; + &:hover, &:focus { & when (@border = transparent) { & when (@theme = dark) { .button-color(~`colorPalette('@{color}', 7) `; null; transparent); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color(~`colorPalette('@{color}', 5) `; null; transparent); } + & when (@theme = variable) { + .button-color(@borderActive; transparent; transparent); + } } & when not (@border = transparent) { & when (@theme = dark) { @@ -108,21 +148,28 @@ ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) ` ); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) ` ); } + & when (@theme = variable) { + .button-color(@borderHover; transparent; @borderHover); + } } } + &:active { & when (@border = transparent) { & when (@theme = dark) { .button-color(~`colorPalette('@{color}', 5) `; null; transparent); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color(~`colorPalette('@{color}', 7) `; null; transparent); } + & when (@theme = variable) { + .button-color(@borderActive; transparent; transparent); + } } & when not (@border = transparent) { & when (@theme = dark) { @@ -130,46 +177,32 @@ ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) ` ); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) ` ); } + & when (@theme = variable) { + .button-color(@borderActive; transparent; @borderActive); + } } } .button-disabled(); } -.button-color(@color; @background; @border) { - color: @color; - border-color: @border; // a inside Button which only work in Chrome - & when not(@background = null) { - background: @background; - } - // http://stackoverflow.com/a/17253457 - > a:only-child { - color: currentColor; - &::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: transparent; - content: ''; - } - } -} + .button-group-base(@btnClassName) { position: relative; display: inline-flex; > .@{btnClassName}, > span > .@{btnClassName} { position: relative; + &:hover, &:focus, &:active { z-index: 2; } + &[disabled] { z-index: 0; } @@ -177,28 +210,6 @@ .@{btnClassName}-icon-only { font-size: @font-size-base; } - // size - &-lg > .@{btnClassName}, - &-lg > span > .@{btnClassName} { - .button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; 0); - } - &-lg .@{btnClassName}.@{btnClassName}-icon-only { - .square(@btn-height-lg); - padding-right: 0; - padding-left: 0; - } - &-sm > .@{btnClassName}, - &-sm > span > .@{btnClassName} { - .button-size(@btn-height-sm; @btn-padding-horizontal-sm; @font-size-base; 0); - > .@{iconfont-css-prefix} { - font-size: @font-size-base; - } - } - &-sm .@{btnClassName}.@{btnClassName}-icon-only { - .square(@btn-height-sm); - padding-right: 0; - padding-left: 0; - } } // Base styles of buttons // -------------------------------------------------- @@ -221,29 +232,36 @@ > .@{iconfont-css-prefix} { line-height: 1; } + &, &:active, &:focus { outline: 0; } + &:not([disabled]):hover { text-decoration: none; } + &:not([disabled]):active { outline: 0; box-shadow: none; } + &[disabled] { cursor: not-allowed; + > * { pointer-events: none; } } + &-lg { .button-size( @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base ); } + &-sm { .button-size( @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm @@ -252,11 +270,12 @@ } // primary button style .btn-primary() { - .button-variant-primary(@btn-primary-color; @btn-primary-bg); + .button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active); } // default button style .btn-default() { - .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border); + .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; ); + &:hover, &:focus, &:active { @@ -275,11 +294,12 @@ } // danger button style .btn-danger() { - .button-variant-primary(@btn-danger-color, @btn-danger-bg); + .button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active); } // danger default button style .btn-danger-default() { .button-color(@error-color, @btn-default-bg, @error-color); + &:hover, &:focus { & when (@theme = dark) { @@ -288,13 +308,17 @@ ` ); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5) ` ); } + & when (@theme = variable) { + .button-color(@error-color-hover, @btn-default-bg, @error-color-hover); + } } + &:active { & when (@theme = dark) { .button-color( @@ -302,12 +326,15 @@ ` ); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color( ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7) ` ); } + & when (@theme = variable) { + .button-color(@error-color-active, @btn-default-bg, @error-color-active); + } } .button-disabled(); } @@ -315,22 +342,30 @@ .btn-danger-link() { .button-variant-other(@error-color, transparent, transparent); box-shadow: none; + &:hover, &:focus { & when (@theme = dark) { .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent); } + & when (@theme = variable) { + .button-color(@error-color-hover; transparent; transparent); + } } + &:active { & when (@theme = dark) { .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent); } + & when (@theme = variable) { + .button-color(@error-color-active; transparent; transparent); + } } .button-disabled(@disabled-color; transparent; transparent); } @@ -338,9 +373,11 @@ .btn-link() { .button-variant-other(@link-color, transparent, transparent); box-shadow: none; + &:hover { background: @btn-link-hover-bg; } + &:hover, &:focus, &:active { @@ -352,6 +389,7 @@ .btn-text() { .button-variant-other(@text-color, transparent, transparent); box-shadow: none; + &:hover, &:focus { color: @text-color; @@ -370,23 +408,30 @@ .btn-danger-text() { .button-variant-other(@error-color, transparent, transparent); box-shadow: none; + &:hover, &:focus { & when (@theme = dark) { .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent); } + & when (@theme = variable) { + .button-color(@error-color-hover; @btn-text-hover-bg; transparent); + } } &:active { & when (@theme = dark) { .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent); } - & when not (@theme = dark) { + & when (not (@theme = dark) and not (@theme = variable)) { .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent); } + & when (@theme = variable) { + .button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent); + } } .button-disabled(@disabled-color; transparent; transparent); } @@ -408,12 +453,14 @@ .btn-square(@btnClassName: btn) { .square(@btn-square-size); .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base); + & > * { font-size: @btn-square-only-icon-size; } &.@{btnClassName}-lg { .square(@btn-square-size-lg); .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base); + & > * { font-size: @btn-square-only-icon-size-lg; } @@ -421,6 +468,7 @@ &.@{btnClassName}-sm { .square(@btn-square-size-sm); .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base); + & > * { font-size: @btn-square-only-icon-size-sm; } @@ -481,6 +529,7 @@ border-top-right-radius: @btn-border-radius-base; border-bottom-right-radius: @btn-border-radius-base; } + &-sm { > .@{btnClassName}:only-child { border-radius: @btn-border-radius-sm; @@ -499,12 +548,14 @@ border-bottom-right-radius: @btn-border-radius-sm; } } + & > & { float: left; } & > &:not(:first-child):not(:last-child) > .@{btnClassName} { border-radius: 0; } + & > &:first-child:not(:last-child) { > .@{btnClassName}:last-child { padding-right: 8px; diff --git a/components/button/style/rtl.less b/components/button/style/rtl.less index 6cf8b6f9..a3e5434c 100644 --- a/components/button/style/rtl.less +++ b/components/button/style/rtl.less @@ -10,6 +10,7 @@ border-right-color: @btn-group-border; border-left-color: @btn-default-border; } + &[disabled] { .@{btn-prefix-cls}-group-rtl& { border-right-color: @btn-default-border; @@ -67,20 +68,14 @@ > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName} { .@{btnClassName}-group-rtl& { - border-top-left-radius: 0; - border-top-right-radius: @btn-border-radius-base; - border-bottom-right-radius: @btn-border-radius-base; - border-bottom-left-radius: 0; + border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0; } } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { .@{btnClassName}-group-rtl& { - border-top-left-radius: @btn-border-radius-base; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: @btn-border-radius-base; + border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base; } } @@ -88,20 +83,14 @@ > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName} { .@{btnClassName}-group-rtl& { - border-top-left-radius: 0; - border-top-right-radius: @btn-border-radius-sm; - border-bottom-right-radius: @btn-border-radius-sm; - border-bottom-left-radius: 0; + border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0; } } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { .@{btnClassName}-group-rtl& { - border-top-left-radius: @btn-border-radius-sm; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: @btn-border-radius-sm; + border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm; } } } diff --git a/components/calendar/style/entry.less b/components/calendar/style/entry.less index 06547c43..4fb8d939 100644 --- a/components/calendar/style/entry.less +++ b/components/calendar/style/entry.less @@ -1 +1,4 @@ @import './index.less'; +// style dependencies +@import '../../select/style/entry.less'; +@import '../../radio/style/entry.less'; diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index af0e8a4a..18f73842 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -70,6 +70,10 @@ line-height: 18px; } } + + .@{calendar-picker-prefix-cls}-cell::before { + pointer-events: none; + } } // ========================== Full ========================== diff --git a/components/card/style/entry.less b/components/card/style/entry.less index 06547c43..4e07d250 100644 --- a/components/card/style/entry.less +++ b/components/card/style/entry.less @@ -1 +1,5 @@ @import './index.less'; +// style dependencies +@import '../../tabs/style/entry.less'; +@import '../../grid/style/entry.less'; +@import './patch.less'; diff --git a/components/card/style/index.less b/components/card/style/index.less index 8385e76a..7c02be1f 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -66,7 +66,7 @@ } } - .@{ant-prefix}-tabs { + .@{ant-prefix}-tabs-top { clear: both; margin-bottom: @card-head-tabs-margin-bottom; color: @text-color; @@ -250,6 +250,7 @@ &-detail { overflow: hidden; + > div:not(:last-child) { margin-bottom: @margin-xs; } @@ -298,6 +299,7 @@ 100% { background-position: 0 50%; } + 50% { background-position: 100% 50%; } diff --git a/components/card/style/patch.less b/components/card/style/patch.less new file mode 100644 index 00000000..7b8e54a3 --- /dev/null +++ b/components/card/style/patch.less @@ -0,0 +1,8 @@ +@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton'; +.@{card-prefix-cls} { + &-rtl { + .@{skeleton-prefix-cls}-header { + padding: 0 0 0 @card-head-padding; + } + } +} \ No newline at end of file diff --git a/components/carousel/style/entry.less b/components/carousel/style/entry.less index 06547c43..3e686bd5 100644 --- a/components/carousel/style/entry.less +++ b/components/carousel/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch'; diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index d60c05c9..031383b2 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -10,7 +10,6 @@ position: relative; display: block; box-sizing: border-box; - -ms-touch-action: pan-y; touch-action: pan-y; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; @@ -116,6 +115,7 @@ display: block; height: auto; } + .slick-arrow.slick-hidden { display: none; } @@ -137,15 +137,18 @@ border: 0; outline: none; cursor: pointer; + &:hover, &:focus { color: transparent; background: transparent; outline: none; + &::before { opacity: 1; } } + &.slick-disabled::before { opacity: 0.25; } @@ -161,6 +164,7 @@ .slick-next { right: -25px; + &::before { content: '→'; } @@ -183,10 +187,12 @@ &-bottom { bottom: 12px; } + &-top { top: 12px; bottom: auto; } + li { position: relative; display: inline-block; @@ -202,6 +208,7 @@ text-indent: -999px; vertical-align: top; transition: all 0.5s; + button { display: block; width: 100%; @@ -216,17 +223,21 @@ cursor: pointer; opacity: 0.3; transition: all 0.5s; + &:hover, &:focus { opacity: 0.75; } } + &.slick-active { width: @carousel-dot-active-width; + & button { background: @component-background; opacity: 1; } + &:hover, &:focus { opacity: 1; @@ -250,19 +261,23 @@ right: auto; left: 12px; } + &-right { right: 12px; left: auto; } + li { width: @carousel-dot-height; height: @carousel-dot-width; margin: 4px 2px; vertical-align: baseline; + button { width: @carousel-dot-height; height: @carousel-dot-width; } + &.slick-active { width: @carousel-dot-height; height: @carousel-dot-active-width; diff --git a/components/carousel/style/patch.less b/components/carousel/style/patch.less new file mode 100644 index 00000000..555e6152 --- /dev/null +++ b/components/carousel/style/patch.less @@ -0,0 +1,11 @@ +.slick-dots { + display: block; +} + +.slick-track { + opacity: 1; +} + +.slick-list { + direction: ltr; +} diff --git a/components/carousel/style/rtl.less b/components/carousel/style/rtl.less index 3f2190bd..c2853a2a 100644 --- a/components/carousel/style/rtl.less +++ b/components/carousel/style/rtl.less @@ -19,6 +19,7 @@ .@{carousel-prefix-cls}-rtl & { right: -25px; left: auto; + &::before { content: '→'; } @@ -29,6 +30,7 @@ .@{carousel-prefix-cls}-rtl & { right: auto; left: -25px; + &::before { content: '←'; } diff --git a/components/cascader/style/entry.less b/components/cascader/style/entry.less index 06547c43..062f1833 100644 --- a/components/cascader/style/entry.less +++ b/components/cascader/style/entry.less @@ -1 +1,5 @@ @import './index.less'; +@import './patch.less'; +// style dependencies +@import '../../empty/style/entry.less'; +@import '../../input/style/entry.less'; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index b0a78fcc..1e4822f3 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -1,172 +1,39 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; +@import '../../checkbox/style/mixin'; @cascader-prefix-cls: ~'@{ant-prefix}-cascader'; +.antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox'); + .@{cascader-prefix-cls} { - .reset-component(); + width: 184px; - &-input.@{ant-prefix}-input { - // Keep it static for https://github.com/ant-design/ant-design/issues/16738 - position: static; - width: 100%; - // https://github.com/ant-design/ant-design/issues/17582 - padding-right: 24px; - // Add important to fix https://github.com/ant-design/ant-design/issues/5078 - // because input.less will compile after cascader.less - background-color: transparent !important; - cursor: pointer; - } - - &-picker-show-search &-input.@{ant-prefix}-input { - position: relative; - } - - &-picker { - .reset-component(); - - position: relative; - display: inline-block; - background-color: @cascader-bg; - border-radius: @border-radius-base; - outline: 0; - cursor: pointer; - transition: color 0.3s; - - &-with-value &-label { - color: transparent; - } - - &-disabled { - color: @disabled-color; - background: @input-disabled-bg; - cursor: not-allowed; - .@{cascader-prefix-cls}-input { - cursor: not-allowed; - } - } - - &:focus .@{cascader-prefix-cls}-input { - .active(); - } - - &-borderless .@{cascader-prefix-cls}-input { - border-color: transparent !important; - box-shadow: none !important; - } - - &-show-search&-focused { - color: @disabled-color; - } - - &-label { - position: absolute; - top: 50%; - left: 0; - width: 100%; - height: 20px; - margin-top: -10px; - padding: 0 20px 0 @control-padding-horizontal; - overflow: hidden; - line-height: 20px; - white-space: nowrap; - text-overflow: ellipsis; - } - - &-clear { - position: absolute; - top: 50%; - right: @control-padding-horizontal; - z-index: 2; - width: 12px; - height: 12px; - margin-top: -6px; - color: @disabled-color; - font-size: @font-size-sm; - line-height: 12px; - background: @component-background; - cursor: pointer; - opacity: 0; - transition: color 0.3s ease, opacity 0.15s ease; - &:hover { - color: @text-color-secondary; - } - } - - &:hover &-clear { - opacity: 1; - } - - // arrow - &-arrow { - position: absolute; - top: 50%; - right: @control-padding-horizontal; - z-index: 1; - width: 12px; - height: 12px; - margin-top: -6px; - color: @disabled-color; - font-size: 12px; - line-height: 12px; - } - } - - // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810 - &-picker-label:hover + &-input { - &:not(.@{cascader-prefix-cls}-picker-disabled &) { - .hover(); - } - } - - &-picker-small &-picker-clear, - &-picker-small &-picker-arrow { - right: @control-padding-horizontal-sm; + &-checkbox { + top: 0; + margin-right: @padding-xs; } &-menus { - position: absolute; - z-index: @zindex-dropdown; - font-size: @cascader-dropdown-font-size; - white-space: nowrap; - background: @cascader-menu-bg; - border-radius: @border-radius-base; - box-shadow: @box-shadow-base; + display: flex; + flex-wrap: nowrap; + align-items: flex-start; - ul, - ol { - margin: 0; - list-style: none; - } - - &-empty, - &-hidden { - display: none; - } - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft { - animation-name: antSlideUpIn; - } - - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft { - animation-name: antSlideDownIn; - } - - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft { - animation-name: antSlideUpOut; - } - - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft { - animation-name: antSlideDownOut; + &.@{cascader-prefix-cls}-menu-empty { + .@{cascader-prefix-cls}-menu { + width: 100%; + height: auto; + } } } + &-menu { - display: inline-block; + flex-grow: 1; min-width: 111px; height: 180px; margin: 0; + margin: -@dropdown-edge-child-vertical-padding 0; padding: @cascader-dropdown-edge-child-vertical-padding 0; overflow: auto; vertical-align: top; @@ -174,67 +41,63 @@ border-right: @border-width-base @border-style-base @cascader-menu-border-color-split; -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857 - &:first-child { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - &:last-child { - margin-right: -1px; - border-right-color: transparent; - border-radius: 0 @border-radius-base @border-radius-base 0; - } - &:only-child { - border-radius: @border-radius-base; - } - } - &-menu-item { - padding: @cascader-dropdown-vertical-padding @control-padding-horizontal; - overflow: hidden; - line-height: @cascader-dropdown-line-height; - white-space: nowrap; - text-overflow: ellipsis; - cursor: pointer; - transition: all 0.3s; - &:hover { - background: @item-hover-bg; - } - &-disabled { - color: @disabled-color; - cursor: not-allowed; - &:hover { - background: transparent; - } - } - .@{cascader-prefix-cls}-menu-empty & { - color: @disabled-color; - cursor: default; - pointer-events: none; - } - &-active:not(&-disabled) { - &, - &:hover { - font-weight: @select-item-selected-font-weight; - background-color: @cascader-item-selected-bg; - } - } - &-expand { - position: relative; - padding-right: 24px; - } + &-item { + display: flex; + flex-wrap: nowrap; + align-items: center; + padding: @cascader-dropdown-vertical-padding @control-padding-horizontal; + overflow: hidden; + line-height: @cascader-dropdown-line-height; + white-space: nowrap; + text-overflow: ellipsis; + cursor: pointer; + transition: all 0.3s; - &-expand &-expand-icon, - &-loading-icon { - position: absolute; - right: @control-padding-horizontal; - color: @text-color-secondary; - font-size: 10px; + &:hover { + background: @item-hover-bg; + } - .@{cascader-prefix-cls}-menu-item-disabled& { + &-disabled { color: @disabled-color; - } - } + cursor: not-allowed; - & &-keyword { - color: @highlight-color; + &:hover { + background: transparent; + } + } + + .@{cascader-prefix-cls}-menu-empty & { + color: @disabled-color; + cursor: default; + pointer-events: none; + } + + &-active:not(&-disabled) { + &, + &:hover { + font-weight: @select-item-selected-font-weight; + background-color: @cascader-item-selected-bg; + } + } + + &-content { + flex: auto; + } + + &-expand &-expand-icon, + &-loading-icon { + margin-left: @padding-xss; + color: @text-color-secondary; + font-size: 10px; + + .@{cascader-prefix-cls}-menu-item-disabled& { + color: @disabled-color; + } + } + + &-keyword { + color: @highlight-color; + } } } } diff --git a/components/cascader/style/patch.less b/components/cascader/style/patch.less new file mode 100644 index 00000000..a6c60f91 --- /dev/null +++ b/components/cascader/style/patch.less @@ -0,0 +1,5 @@ +.ant-cascader-menus { + position: relative; + margin-top: 2px; + margin-bottom: 2px; +} \ No newline at end of file diff --git a/components/cascader/style/rtl.less b/components/cascader/style/rtl.less index e2afea2d..c70bf1dd 100644 --- a/components/cascader/style/rtl.less +++ b/components/cascader/style/rtl.less @@ -1,95 +1,19 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - +// We can not import reference of `./index` directly since it will make dead loop in less +@import (reference) '../../style/themes/index'; @cascader-prefix-cls: ~'@{ant-prefix}-cascader'; -@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl'; -@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl'; -.@{cascader-prefix-cls} { - &-input.@{ant-prefix}-input { - .@{picker-rtl-cls} & { - padding-right: @input-padding-horizontal-base; - padding-left: 24px; - text-align: right; - } - } - - &-picker { - &-rtl { - direction: rtl; - } - - &-label { - .@{picker-rtl-cls} & { - padding: 0 @control-padding-horizontal 0 20px; - text-align: right; - } - } - - &-clear { - .@{picker-rtl-cls} & { - right: auto; - left: @control-padding-horizontal; - } - } - - &-arrow { - .@{picker-rtl-cls} & { - right: auto; - left: @control-padding-horizontal; - } - } - } - - &-picker-small &-picker-clear, - &-picker-small &-picker-arrow { - .@{picker-rtl-cls}& { - right: auto; - left: @control-padding-horizontal-sm; - } - } - - &-menu { - &-rtl & { - direction: rtl; - border-right: none; - border-left: @border-width-base @border-style-base @border-color-split; - &:first-child { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - &:last-child { - margin-right: 0; - margin-left: -1px; - border-left-color: transparent; - border-radius: @border-radius-base 0 0 @border-radius-base; - } - &:only-child { - border-radius: @border-radius-base; - } - } - } - - &-menu-item { - &-expand { - .@{menu-rtl-cls} & { - padding-right: @control-padding-horizontal; - padding-left: 24px; - } - } - - &-expand &-expand-icon, +.@{cascader-prefix-cls}-rtl { + .@{cascader-prefix-cls}-menu-item { + &-expand-icon, &-loading-icon { - .@{menu-rtl-cls} & { - right: auto; - left: @control-padding-horizontal; - } + margin-right: @padding-xss; + margin-left: 0; } + } - &-loading-icon { - .@{menu-rtl-cls} & { - transform: scaleY(-1); - } - } + .@{cascader-prefix-cls}-checkbox { + top: 0; + margin-right: 0; + margin-left: @padding-xs; } } diff --git a/components/checkbox/style/entry.less b/components/checkbox/style/entry.less index 06547c43..96cebe33 100644 --- a/components/checkbox/style/entry.less +++ b/components/checkbox/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less index 1ce3012c..cdb84297 100644 --- a/components/checkbox/style/index.less +++ b/components/checkbox/style/index.less @@ -2,4 +2,5 @@ @import './mixin'; .antCheckboxFn(); + @import './rtl'; diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 76b22b12..ae4a39d9 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -48,7 +48,7 @@ direction: ltr; background-color: @checkbox-check-bg; border: @checkbox-border-width @border-style-base @border-color-base; - border-radius: @border-radius-base; + border-radius: @checkbox-border-radius; // Fix IE checked style // https://github.com/ant-design/ant-design/issues/12597 border-collapse: separate; @@ -122,11 +122,13 @@ .@{checkbox-prefix-cls}-input { cursor: not-allowed; + pointer-events: none; } .@{checkbox-inner-prefix-cls} { background-color: @input-disabled-bg; border-color: @border-color-base !important; + &::after { border-color: @input-disabled-bg; border-collapse: separate; @@ -167,6 +169,13 @@ & + & { margin-left: 8px; } + + &&-in-form-item { + input[type='checkbox'] { + width: 14px; + height: 14px; + } + } } .@{checkbox-prefix-cls} + span { @@ -180,10 +189,12 @@ &-item { margin-right: @checkbox-group-item-margin-right; + &:last-child { margin-right: 0; } } + &-item + &-item { margin-left: 0; } @@ -222,6 +233,7 @@ transform: scale(1); opacity: 0.5; } + 100% { transform: scale(1.6); opacity: 0; diff --git a/components/checkbox/style/patch.less b/components/checkbox/style/patch.less new file mode 100644 index 00000000..b81e7efc --- /dev/null +++ b/components/checkbox/style/patch.less @@ -0,0 +1,5 @@ +.ant-checkbox + span { + &:empty { + display: none; + } +} diff --git a/components/checkbox/style/rtl.less b/components/checkbox/style/rtl.less index 7c33a7f9..fa15b4df 100644 --- a/components/checkbox/style/rtl.less +++ b/components/checkbox/style/rtl.less @@ -11,12 +11,14 @@ margin-right: 0; margin-left: @checkbox-group-item-margin-right; } + &:last-child { .@{checkbox-prefix-cls}-group-rtl & { margin-left: 0 !important; } } } + &-item + &-item { .@{checkbox-prefix-cls}-group-rtl & { margin-left: @checkbox-group-item-margin-right; diff --git a/components/collapse/style/entry.less b/components/collapse/style/entry.less index 06547c43..96cebe33 100644 --- a/components/collapse/style/entry.less +++ b/components/collapse/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 58008356..b92378d5 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -22,17 +22,19 @@ } > .@{collapse-prefix-cls}-header { - position: relative; + position: relative; // Compatible with old version of antd, should remove in next version + display: flex; + flex-wrap: nowrap; + align-items: flex-start; padding: @collapse-header-padding; color: @heading-color; line-height: @line-height-base; cursor: pointer; transition: all 0.3s, visibility 0s; - .clearfix(); .@{collapse-prefix-cls}-arrow { display: inline-block; - margin-right: 12px; + margin-right: @margin-sm; font-size: @font-size-sm; vertical-align: -1px; @@ -42,7 +44,7 @@ } .@{collapse-prefix-cls}-extra { - float: right; + margin-left: auto; } &:focus { @@ -59,7 +61,7 @@ &.@{collapse-prefix-cls}-no-arrow { > .@{collapse-prefix-cls}-header { - padding-left: 12px; + padding-left: @padding-sm; } } } @@ -68,6 +70,7 @@ &-icon-position-right { & > .@{collapse-prefix-cls}-item { > .@{collapse-prefix-cls}-header { + position: relative; padding: @collapse-header-padding; padding-right: @collapse-header-padding-extra; @@ -117,6 +120,11 @@ border-radius: 0; } + // hide the last border-bottom in borderless mode + &-borderless > &-item:last-child { + border-bottom: 0; + } + &-borderless > &-item > &-content { background-color: transparent; border-top: 0; diff --git a/components/collapse/style/patch.less b/components/collapse/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/collapse/style/rtl.less b/components/collapse/style/rtl.less index fb8906fa..559a922d 100644 --- a/components/collapse/style/rtl.less +++ b/components/collapse/style/rtl.less @@ -16,6 +16,11 @@ } .@{collapse-prefix-cls}-arrow { + .@{collapse-prefix-cls}-rtl& { + margin-right: 0; + margin-left: @margin-sm; + } + & svg { .@{collapse-prefix-cls}-rtl& { transform: rotate(180deg); @@ -25,7 +30,8 @@ .@{collapse-prefix-cls}-extra { .@{collapse-prefix-cls}-rtl& { - float: left; + margin-right: auto; + margin-left: 0; } } } @@ -33,7 +39,7 @@ &.@{collapse-prefix-cls}-no-arrow { > .@{collapse-prefix-cls}-header { .@{collapse-prefix-cls}-rtl& { - padding-right: 12px; + padding-right: @padding-sm; padding-left: 0; } } diff --git a/components/comment/style/entry.less b/components/comment/style/entry.less index 06547c43..b05658da 100644 --- a/components/comment/style/entry.less +++ b/components/comment/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import "./patch"; \ No newline at end of file diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 73243c08..84da3a3a 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -38,6 +38,7 @@ justify-content: flex-start; margin-bottom: @margin-xss; font-size: @comment-font-size-base; + & > a, & > span { padding-right: @padding-xs; @@ -49,8 +50,10 @@ color: @comment-author-name-color; font-size: @comment-font-size-base; transition: color 0.3s; + > * { color: @comment-author-name-color; + &:hover { color: @comment-author-name-color; } @@ -78,6 +81,7 @@ > li { display: inline-block; color: @comment-action-color; + > span { margin-right: 10px; color: @comment-action-color; diff --git a/components/comment/style/patch.less b/components/comment/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/comment/style/rtl.less b/components/comment/style/rtl.less index 27ad5270..a930d838 100644 --- a/components/comment/style/rtl.less +++ b/components/comment/style/rtl.less @@ -31,6 +31,7 @@ .@{comment-prefix-cls}-rtl & { padding-right: 0; } + > li { > span { .@{comment-prefix-cls}-rtl & { diff --git a/components/components.less b/components/components.less index 5f7785d1..2e6e91f9 100644 --- a/components/components.less +++ b/components/components.less @@ -19,7 +19,6 @@ @import "./dropdown/style/entry.less"; @import "./empty/style/entry.less"; @import "./grid/style/entry.less"; -@import "./image/style/entry.less"; @import "./input/style/entry.less"; @import "./input-number/style/entry.less"; @import "./layout/style/entry.less"; @@ -38,9 +37,9 @@ @import "./radio/style/entry.less"; @import "./rate/style/entry.less"; @import "./select/style/entry.less"; +@import "./segmented/style/index.less"; @import "./skeleton/style/entry.less"; @import "./slider/style/entry.less"; -@import "./space/style/entry.less"; @import "./spin/style/entry.less"; @import "./statistic/style/entry.less"; @import "./steps/style/entry.less"; @@ -59,4 +58,6 @@ @import "./tree/style/entry.less"; @import "./tree-select/style/entry.less"; @import "./calendar/style/entry.less"; -@import "./result/style/entry.less"; \ No newline at end of file +@import "./result/style/entry.less"; +@import "./space/style/entry.less"; +@import "./image/style/entry.less"; diff --git a/components/core/Component/Overlay/type/PlacementType.cs b/components/core/Component/Overlay/type/PlacementType.cs index 2022f416..793a4eea 100644 --- a/components/core/Component/Overlay/type/PlacementType.cs +++ b/components/core/Component/Overlay/type/PlacementType.cs @@ -1,10 +1,17 @@ -namespace AntDesign +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using System; + +namespace AntDesign { public enum Placement { TopLeft, + [Obsolete("Please use 'Placement.Top' instead.")] TopCenter, - Top, + Top = 2, TopRight, Left, LeftTop, @@ -13,15 +20,15 @@ RightTop, RightBottom, BottomLeft, + [Obsolete("Please use 'Placement.Bottom' instead.")] BottomCenter, - Bottom, + Bottom = 12, BottomRight } - public sealed class PlacementType : EnumValue + internal sealed class PlacementType : EnumValue { public static readonly PlacementType TopLeft = new PlacementType("topLeft", "down", "33% 100%", 0, Placement.TopLeft); - public static readonly PlacementType TopCenter = new PlacementType("topCenter", "down", "50% 100%", 1, Placement.TopCenter); public static readonly PlacementType Top = new PlacementType("top", "down", "50% 100%", 1, Placement.Top); public static readonly PlacementType TopRight = new PlacementType("topRight", "down", "66% 100%", 2, Placement.TopRight); @@ -34,14 +41,13 @@ public static readonly PlacementType RightBottom = new PlacementType("rightBottom", "up", "0 66%", 8, Placement.RightBottom); public static readonly PlacementType BottomLeft = new PlacementType("bottomLeft", "up", "33% 0", 9, Placement.BottomLeft); - public static readonly PlacementType BottomCenter = new PlacementType("bottomCenter", "up", "50% 0", 10, Placement.BottomCenter); public static readonly PlacementType Bottom = new PlacementType("bottom", "up", "50% 0", 10, Placement.Bottom); public static readonly PlacementType BottomRight = new PlacementType("bottomRight", "up", "66% 0", 11, Placement.BottomRight); public static PlacementType Create(Placement placement) => placement switch { Placement.TopLeft => PlacementType.TopLeft, - Placement.TopCenter => PlacementType.TopCenter, + Placement.TopCenter => PlacementType.Top, Placement.Top => PlacementType.Top, Placement.TopRight => PlacementType.TopRight, Placement.Left => PlacementType.Left, @@ -51,7 +57,7 @@ Placement.RightTop => PlacementType.RightTop, Placement.RightBottom => PlacementType.RightBottom, Placement.BottomLeft => PlacementType.BottomLeft, - Placement.BottomCenter => PlacementType.BottomCenter, + Placement.BottomCenter => PlacementType.Bottom, Placement.Bottom => PlacementType.Bottom, Placement.BottomRight => PlacementType.BottomRight, _ => PlacementType.BottomLeft @@ -72,7 +78,6 @@ internal PlacementType GetReverseType() { if (this == TopLeft) return BottomLeft; - if (this == TopCenter) return BottomCenter; if (this == Top) return Bottom; if (this == TopRight) return BottomRight; @@ -85,7 +90,6 @@ if (this == RightBottom) return LeftBottom; if (this == BottomLeft) return TopLeft; - if (this == BottomCenter) return TopCenter; if (this == Bottom) return Top; if (this == BottomRight) return TopRight; @@ -94,7 +98,7 @@ internal PlacementDirection GetDirection() { - if (this.IsIn(TopLeft, TopCenter, Top, TopRight)) + if (this.IsIn(TopLeft, Top, TopRight)) { return PlacementDirection.Top; } @@ -109,7 +113,7 @@ return PlacementDirection.Right; } - if (this.IsIn(BottomLeft, BottomCenter, Bottom, BottomRight)) + if (this.IsIn(BottomLeft, Bottom, BottomRight)) { return PlacementDirection.Bottom; } diff --git a/components/core/JsInterop/modules/components/overlay.ts b/components/core/JsInterop/modules/components/overlay.ts index e6dd4c48..bbf514ca 100644 --- a/components/core/JsInterop/modules/components/overlay.ts +++ b/components/core/JsInterop/modules/components/overlay.ts @@ -5,7 +5,6 @@ import { mutationObserver as mutation } from '../../ObservableApi/mutationObserv //Make sure the enum is identical as C# AntDesign.Placement enum export enum Placement { TopLeft = 0, - TopCenter = 1, Top = 2, TopRight = 3, Left = 4, @@ -15,7 +14,6 @@ export enum Placement { RightTop = 8, RightBottom = 9, BottomLeft = 10, - BottomCenter = 11, Bottom = 12, BottomRight = 13 } @@ -64,7 +62,6 @@ export class Overlay { { horizontal: "left" | "right", vertical: "top" | "bottom", class: string }> = new Map([ [Placement.TopLeft, { horizontal: "left", vertical: "bottom", class: "topLeft" }], - [Placement.TopCenter, { horizontal: "left", vertical: "bottom", class: "topCenter" }], [Placement.Top, { horizontal: "left", vertical: "bottom", class: "top" }], [Placement.TopRight, { horizontal: "right", vertical: "bottom", class: "topRight" }], [Placement.Left, { horizontal: "right", vertical: "top", class: "left" }], @@ -74,7 +71,6 @@ export class Overlay { [Placement.RightTop, { horizontal: "left", vertical: "top", class: "rightTop" }], [Placement.RightBottom, { horizontal: "left", vertical: "bottom", class: "rightBottom" }], [Placement.BottomLeft, { horizontal: "left", vertical: "top", class: "bottomLeft" }], - [Placement.BottomCenter, { horizontal: "left", vertical: "top", class: "bottomCenter" }], [Placement.Bottom, { horizontal: "left", vertical: "top", class: "bottom" }], [Placement.BottomRight, { horizontal: "right", vertical: "top", class: "bottomRight" }], ]); @@ -82,7 +78,6 @@ export class Overlay { private static reverseVerticalPlacementMap: Map = new Map([ [Placement.TopLeft, (position: string) => Placement.BottomLeft], - [Placement.TopCenter, (position: string) => Placement.BottomCenter], [Placement.Top, (position: string) => Placement.Bottom], [Placement.TopRight, (position: string) => Placement.BottomRight], [Placement.Left, (position: string) => position === "top" ? Placement.LeftBottom : Placement.LeftTop], @@ -92,7 +87,6 @@ export class Overlay { [Placement.RightTop, (position: string) => Placement.RightBottom], [Placement.RightBottom, (position: string) => Placement.RightTop], [Placement.BottomLeft, (position: string) => Placement.TopLeft], - [Placement.BottomCenter, (position: string) => Placement.TopCenter], [Placement.Bottom, (position: string) => Placement.Top], [Placement.BottomRight, (position: string) => Placement.TopRight] ]); @@ -100,7 +94,6 @@ export class Overlay { private static reverseHorizontalPlacementMap: Map = new Map([ [Placement.TopLeft, (position: string) => Placement.TopRight], - [Placement.TopCenter, (position: string) => position === "left" ? Placement.TopRight : Placement.TopLeft], [Placement.Top, (position: string) => position === "left" ? Placement.TopRight : Placement.TopLeft], [Placement.TopRight, (position: string) => Placement.TopLeft], [Placement.Left, (position: string) => Placement.Right], @@ -110,7 +103,6 @@ export class Overlay { [Placement.RightTop, (position: string) => Placement.LeftBottom], [Placement.RightBottom, (position: string) => Placement.LeftTop], [Placement.BottomLeft, (position: string) => Placement.BottomRight], - [Placement.BottomCenter, (position: string) => position === "left" ? Placement.BottomRight : Placement.BottomLeft], [Placement.Bottom, (position: string) => position === "left" ? Placement.BottomRight : Placement.BottomLeft], [Placement.BottomRight, (position: string) => Placement.BottomLeft] ]); @@ -118,7 +110,6 @@ export class Overlay { private static arrowCenterPlacementMatch: Map = new Map([ [Placement.TopLeft, Placement.Top], - [Placement.TopCenter, Placement.TopCenter], [Placement.Top, Placement.Top], [Placement.TopRight, Placement.Top], [Placement.Left, Placement.Left], @@ -128,7 +119,6 @@ export class Overlay { [Placement.RightTop, Placement.Right], [Placement.RightBottom, Placement.Right], [Placement.BottomLeft, Placement.Bottom], - [Placement.BottomCenter, Placement.BottomCenter], [Placement.Bottom, Placement.Bottom], [Placement.BottomRight, Placement.Bottom] ]); @@ -254,7 +244,6 @@ export class Overlay { }; }; case Placement.BottomLeft: - case Placement.BottomCenter: case Placement.Bottom: case Placement.BottomRight: return function(triggerTop: number, triggerHeight: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayHeight: number, constraints: overlayConstraints) { @@ -278,7 +267,6 @@ export class Overlay { if (position === "bottom") { switch (placement) { case Placement.TopLeft: - case Placement.TopCenter: case Placement.Top: case Placement.TopRight: return function(triggerBottom: number, triggerHeight: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayHeight: number, constraints: overlayConstraints) { @@ -325,9 +313,8 @@ export class Overlay { position.right = Overlay.reversePositionValue(position.left, container.scrollWidth, overlayWidth) return position; }; - case Placement.TopCenter: + case Placement.Top: - case Placement.BottomCenter: case Placement.Bottom: return function(triggerLeft: number, triggerWidth: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayWidth: number, constraints: overlayConstraints) { const position: horizontalPosition = { diff --git a/components/core/JsInterop/modules/dom/eventHelper.ts b/components/core/JsInterop/modules/dom/eventHelper.ts index 5c1ff5a5..c23292b9 100644 --- a/components/core/JsInterop/modules/dom/eventHelper.ts +++ b/components/core/JsInterop/modules/dom/eventHelper.ts @@ -41,7 +41,7 @@ export class eventHelper { (dom as HTMLElement).addEventListener(eventName, callback); } } - } + } static addDomEventListenerToFirstChild(element, eventName, preventDefault, invoker) { const dom = domInfoHelper.get(element); @@ -79,8 +79,8 @@ export class eventHelper { private static debounce(func, wait, immediate) { var timeout; - return () => { - const context = this, args = arguments; + return (...args) => { + const context = this; const later = () => { timeout = null; if (!immediate) func.apply(this, args); diff --git a/components/core/JsInterop/modules/dom/infoHelper.ts b/components/core/JsInterop/modules/dom/infoHelper.ts index eca81133..eca05fb8 100644 --- a/components/core/JsInterop/modules/dom/infoHelper.ts +++ b/components/core/JsInterop/modules/dom/infoHelper.ts @@ -118,7 +118,7 @@ export class infoHelper { } static getMaxZIndex(): number { - return [...document.querySelectorAll("*")].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0) + return Array.from(document.querySelectorAll("*")).reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0) } static isFixedPosition(element) { diff --git a/components/date-picker/style/entry.less b/components/date-picker/style/entry.less index 06547c43..4c01ee61 100644 --- a/components/date-picker/style/entry.less +++ b/components/date-picker/style/entry.less @@ -1 +1,7 @@ @import './index.less'; +@import './patch.less'; +// style dependencies +// deps-lint-skip: input +@import '../../input/style/entry.less'; +@import '../../time-picker/style/entry.less'; +@import '../../tag/style/entry.less'; diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 4fc64c19..cfcdb62e 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -1,6 +1,7 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; +@import './status'; @picker-prefix-cls: ~'@{ant-prefix}-picker'; @@ -13,7 +14,7 @@ } .@{picker-prefix-cls} { - @arrow-size: 10px; + @arrow-size: @popover-arrow-width; .reset-component(); .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base); @@ -22,7 +23,7 @@ align-items: center; background: @picker-bg; border: @border-width-base @border-style-base @select-border-color; - border-radius: @border-radius-base; + border-radius: @control-border-radius; transition: border @animation-duration-slow, box-shadow @animation-duration-slow; &:hover, @@ -106,6 +107,8 @@ } &-suffix { + display: flex; + flex: none; align-self: center; margin-left: (@padding-xs / 2); color: @disabled-color; @@ -114,6 +117,10 @@ > * { vertical-align: top; + + &:not(:last-child) { + margin-right: 8px; + } } } @@ -213,6 +220,10 @@ &-dropdown { .reset-component(); position: absolute; + // Fix incorrect position of picker popup + // https://github.com/ant-design/ant-design/issues/35590 + top: -9999px; + left: -9999px; z-index: @zindex-picker; &-hidden { @@ -221,17 +232,17 @@ &-placement-bottomLeft { .@{picker-prefix-cls}-range-arrow { - top: (@arrow-size / 2) - (@arrow-size / 3); + top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px; display: block; - transform: rotate(-45deg); + transform: rotate(-135deg) translateY(1px); } } &-placement-topLeft { .@{picker-prefix-cls}-range-arrow { - bottom: (@arrow-size / 2) - (@arrow-size / 3); + bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px; display: block; - transform: rotate(135deg); + transform: rotate(45deg); } } @@ -311,19 +322,14 @@ width: @arrow-size; height: @arrow-size; margin-left: @input-padding-horizontal-base * 1.5; - box-shadow: 2px -2px 6px fade(@black, 6%); + background: linear-gradient( + 135deg, + transparent 40%, + @calendar-bg 40% + ); // Use linear-gradient to prevent arrow from covering text + box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover transition: left @animation-duration-slow ease-out; - - &::after { - position: absolute; - top: @border-width-base; - right: @border-width-base; - width: @arrow-size; - height: @arrow-size; - border: (@arrow-size / 2) solid @border-color-split; - border-color: @calendar-bg @calendar-bg transparent transparent; - content: ''; - } + .roundedArrow(@arrow-size, 5px, @calendar-bg); } &-panel-container { diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less index 982310d3..5a5d41b3 100644 --- a/components/date-picker/style/panel.less +++ b/components/date-picker/style/panel.less @@ -101,7 +101,7 @@ display: inline-block; width: @picker-arrow-size; height: @picker-arrow-size; - border: 0 solid currentColor; + border: 0 solid currentcolor; border-width: 1.5px 0 0 1.5px; content: ''; } @@ -116,7 +116,7 @@ display: inline-block; width: @picker-arrow-size; height: @picker-arrow-size; - border: 0 solid currentColor; + border: 0 solid currentcolor; border-width: 1.5px 0 0 1.5px; content: ''; } @@ -280,6 +280,7 @@ &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} { border-radius: @border-radius-base 0 0 @border-radius-base; } + // range end border-radius &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} { border-radius: 0 @border-radius-base @border-radius-base 0; @@ -298,12 +299,14 @@ content: ''; } } + .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName}::after { right: -5px - @border-width-base; left: 0; } + .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after { right: 0; left: -5px - @border-width-base; @@ -313,6 +316,7 @@ &-range-hover&-range-start::after { right: 50%; } + &-range-hover&-range-end::after { left: 50%; } @@ -610,7 +614,7 @@ } &-active { - background: fade(@calendar-item-active-bg, 20%); + background: @calendar-column-active-bg; } &:hover { @@ -661,7 +665,7 @@ // Fix IE11 render bug by css hacks // https://github.com/ant-design/ant-design/issues/21559 // https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110 -/* stylelint-disable-next-line */ +/* stylelint-disable selector-type-no-unknown,selector-no-vendor-prefix */ _:-ms-fullscreen, :root { .@{picker-prefix-cls}-range-wrapper { diff --git a/components/date-picker/style/patch.less b/components/date-picker/style/patch.less new file mode 100644 index 00000000..4a2dfe27 --- /dev/null +++ b/components/date-picker/style/patch.less @@ -0,0 +1,10 @@ +// inline mode +.@{picker-prefix-cls}-inline { + border: none; + padding: 0; + .@{picker-prefix-cls} { + &-range-arrow { + display: none !important; + } + } +} \ No newline at end of file diff --git a/components/date-picker/style/rtl.less b/components/date-picker/style/rtl.less index 8112c71d..3a74800e 100644 --- a/components/date-picker/style/rtl.less +++ b/components/date-picker/style/rtl.less @@ -192,10 +192,7 @@ left: 0; border-right: @border-width-base dashed @picker-date-hover-range-border-color; border-left: none; - border-top-left-radius: 0; - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - border-bottom-left-radius: 0; + border-radius: 0 @border-radius-base @border-radius-base 0; } } @@ -209,10 +206,7 @@ left: 6px; border-right: none; border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-top-left-radius: @border-radius-base; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: @border-radius-base; + border-radius: @border-radius-base 0 0 @border-radius-base; } } diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less new file mode 100644 index 00000000..4087bf5c --- /dev/null +++ b/components/date-picker/style/status.less @@ -0,0 +1,34 @@ +@import '../../input/style/mixin'; + +@picker-prefix-cls: ~'@{ant-prefix}-picker'; + +.picker-status-color( + @text-color: @input-color; + @border-color: @input-border-color; + @background-color: @input-bg; + @hoverBorderColor: @primary-color-hover; + @outlineColor: @primary-color-outline; +) { + &.@{picker-prefix-cls} { + &, + &:not([disabled]):hover { + background-color: @background-color; + border-color: @border-color; + } + + &-focused, + &:focus { + .active(@text-color, @hoverBorderColor, @outlineColor); + } + } +} + +.@{picker-prefix-cls} { + &-status-error { + .picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); + } + + &-status-warning { + .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); + } +} diff --git a/components/descriptions/style/entry.less b/components/descriptions/style/entry.less index 06547c43..8d77e466 100644 --- a/components/descriptions/style/entry.less +++ b/components/descriptions/style/entry.less @@ -1 +1,2 @@ -@import './index.less'; +@import "./index.less"; +@import "./patch"; \ No newline at end of file diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index e6ac396a..2a5a631c 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -29,8 +29,8 @@ &-view { width: 100%; - overflow: hidden; border-radius: @border-radius-base; + table { width: 100%; table-layout: fixed; @@ -42,6 +42,7 @@ > td { padding-bottom: @descriptions-item-padding-bottom; } + &:last-child { border-bottom: none; } @@ -126,6 +127,7 @@ &-bordered { .@{descriptions-prefix-cls}-view { border: 1px solid @border-color-split; + > table { table-layout: auto; border-collapse: collapse; @@ -144,6 +146,7 @@ .@{descriptions-prefix-cls}-item-label { background-color: @descriptions-bg; + &::after { display: none; } @@ -151,6 +154,7 @@ .@{descriptions-prefix-cls}-row { border-bottom: 1px solid @border-color-split; + &:last-child { border-bottom: none; } diff --git a/components/descriptions/style/patch.less b/components/descriptions/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/descriptions/style/rtl.less b/components/descriptions/style/rtl.less index 7aca94f1..73d22dc3 100644 --- a/components/descriptions/style/rtl.less +++ b/components/descriptions/style/rtl.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 82377f7c..ff7e932e 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -13,7 +13,7 @@ top: -0.06em; display: inline-block; height: 0.9em; - margin: 0 8px; + margin: 0 @divider-vertical-gutter; vertical-align: middle; border-top: 0; border-left: @border-width-base solid @divider-color; @@ -57,6 +57,7 @@ top: 50%; width: @divider-orientation-margin; } + &::after { top: 50%; width: 100% - @divider-orientation-margin; @@ -68,6 +69,7 @@ top: 50%; width: 100% - @divider-orientation-margin; } + &::after { top: 50%; width: @divider-orientation-margin; @@ -87,7 +89,6 @@ } &-horizontal&-with-text&-dashed { - border-top: 0; &::before, &::after { border-style: dashed none none; @@ -103,6 +104,34 @@ font-weight: normal; font-size: @font-size-base; } + + &-horizontal&-with-text-left&-no-default-orientation-margin-left { + &::before { + width: 0; + } + + &::after { + width: 100%; + } + + .ant-divider-inner-text { + padding-left: 0; + } + } + + &-horizontal&-with-text-right&-no-default-orientation-margin-right { + &::before { + width: 100%; + } + + &::after { + width: 0; + } + + .ant-divider-inner-text { + padding-right: 0; + } + } } @import './rtl'; diff --git a/components/divider/style/rtl.less b/components/divider/style/rtl.less index 3b3bcf9f..7cdc84f0 100644 --- a/components/divider/style/rtl.less +++ b/components/divider/style/rtl.less @@ -14,6 +14,7 @@ width: 100% - @divider-orientation-margin; } } + &::after { .@{divider-prefix-cls}-rtl& { width: @divider-orientation-margin; @@ -27,6 +28,7 @@ width: @divider-orientation-margin; } } + &::after { .@{divider-prefix-cls}-rtl& { width: 100% - @divider-orientation-margin; diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 45f824bb..20985efd 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -2,6 +2,7 @@ @drawer-prefix-cls: ~'@{ant-prefix}-drawer'; @picker-prefix-cls: ~'@{ant-prefix}-picker'; +@drawer-animation-ease: @ease-out-quint; .@{drawer-prefix-cls} { @drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2)); @@ -10,17 +11,14 @@ z-index: @zindex-modal; width: 0%; height: 100%; - transition: transform @animation-duration-slow @ease-base-out, - height 0s ease @animation-duration-slow, width 0s ease @animation-duration-slow; - > * { - transition: transform @animation-duration-slow @ease-base-out, - box-shadow @animation-duration-slow @ease-base-out; - } + transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow; &-content-wrapper { position: absolute; width: 100%; height: 100%; + transition: transform @animation-duration-slow @drawer-animation-ease, + box-shadow @animation-duration-slow @drawer-animation-ease; } .@{drawer-prefix-cls}-content { @@ -38,7 +36,7 @@ } &.@{drawer-prefix-cls}-open { width: 100%; - transition: transform @animation-duration-slow @ease-base-out; + transition: transform @animation-duration-slow @drawer-animation-ease; } } @@ -89,7 +87,7 @@ } &.@{drawer-prefix-cls}-open { height: 100%; - transition: transform @animation-duration-slow @ease-base-out; + transition: transform @animation-duration-slow @drawer-animation-ease; } } @@ -115,6 +113,7 @@ .@{drawer-prefix-cls}-content-wrapper { box-shadow: @shadow-1-up; } + &.no-mask { bottom: 1px; transform: translateY(1px); @@ -126,16 +125,17 @@ height: 100%; opacity: 1; transition: none; - animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out; + animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease; pointer-events: auto; } &-title { + flex: 1; margin: 0; color: @heading-color; font-weight: 500; - font-size: @font-size-lg; - line-height: 22px; + font-size: @drawer-title-font-size; + line-height: @drawer-title-line-height; } &-content { @@ -148,12 +148,8 @@ } &-close { - position: absolute; - top: 0; - right: 0; - z-index: @zindex-popup-close; - display: block; - padding: @drawer-header-close-padding; + display: inline-block; + margin-right: 12px; color: @modal-close-color; font-weight: 700; font-size: @font-size-lg; @@ -174,32 +170,35 @@ color: @icon-color-hover; text-decoration: none; } - - .@{drawer-prefix-cls}-header-no-title & { - margin-right: var(--scroll-bar); - /* stylelint-disable-next-line function-calc-no-invalid */ - padding-right: ~'calc(@{drawer-header-close-padding} - var(--scroll-bar))'; - } } &-header { position: relative; + display: flex; + align-items: center; + justify-content: space-between; padding: @drawer-header-padding; color: @text-color; background: @drawer-bg; border-bottom: @border-width-base @border-style-base @border-color-split; border-radius: @border-radius-base @border-radius-base 0 0; - } - &-header-no-title { - color: @text-color; - background: @drawer-bg; + &-title { + display: flex; + flex: 1; + align-items: center; + justify-content: space-between; + } + + &-close-only { + padding-bottom: 0; + border: none; + } } &-wrapper-body { display: flex; - flex-direction: column; - flex-wrap: nowrap; + flex-flow: column nowrap; width: 100%; height: 100%; } @@ -227,17 +226,10 @@ height: 0; background-color: @modal-mask-bg; opacity: 0; - filter: ~'alpha(opacity=45)'; transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; pointer-events: none; } - &-open { - &-content { - box-shadow: @shadow-2; - } - } - // =================== Hook Components =================== .@{picker-prefix-cls} { &-clear { @@ -250,6 +242,7 @@ 0% { opacity: 0; } + 100% { opacity: 1; } diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index 79cde6c2..77efacf4 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -1,5 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import './drawer'; -@import './customize'; @import './rtl'; + +.popover-customize-bg(@drawer-prefix-cls, @popover-background); diff --git a/components/drawer/style/rtl.less b/components/drawer/style/rtl.less index 5963c8a7..f710bfa7 100644 --- a/components/drawer/style/rtl.less +++ b/components/drawer/style/rtl.less @@ -9,8 +9,8 @@ &-close { .@{drawer-prefix-cls}-rtl & { - right: auto; - left: 0; + margin-right: 0; + margin-left: 12px; } } } diff --git a/components/dropdown/style/entry.less b/components/dropdown/style/entry.less index 85545241..aa5ba7cd 100644 --- a/components/dropdown/style/entry.less +++ b/components/dropdown/style/entry.less @@ -1,2 +1,4 @@ @import './index.less'; -@import './patch.less'; \ No newline at end of file +@import './patch.less'; +// style dependencies +@import '../../button/style/entry.less'; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 7a241d83..c800c13a 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -49,14 +49,14 @@ } // Offset the popover to account for the dropdown arrow - &-show-arrow&-placement-topCenter, &-show-arrow&-placement-topLeft, + &-show-arrow&-placement-top, &-show-arrow&-placement-topRight { padding-bottom: @popover-distance; } - &-show-arrow&-placement-bottomCenter, &-show-arrow&-placement-bottomLeft, + &-show-arrow&-placement-bottom, &-show-arrow&-placement-bottomRight { padding-top: @popover-distance; } @@ -68,52 +68,54 @@ position: absolute; z-index: 1; // lift it up so the menu wouldn't cask shadow on it display: block; - width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); - height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); - background: transparent; - border-style: solid; - border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2); + width: @popover-arrow-width; + height: @popover-arrow-width; + background: linear-gradient( + 135deg, + transparent 40%, + @popover-bg 40% + ); // Use linear-gradient to prevent arrow from covering text + .roundedArrow(@popover-arrow-width, 5px, @popover-bg); + } + + &-placement-top > &-arrow, + &-placement-topLeft > &-arrow, + &-placement-topRight > &-arrow { + bottom: @popover-arrow-width * sqrt((1 / 2)) + 2px; + box-shadow: 3px 3px 7px -3px fade(@black, 10%); transform: rotate(45deg); } - &-placement-topCenter > &-arrow, - &-placement-topLeft > &-arrow, - &-placement-topRight > &-arrow { - bottom: @popover-distance - @popover-arrow-width + 2.2px; - border-top-color: transparent; - border-right-color: @popover-bg; - border-bottom-color: @popover-bg; - border-left-color: transparent; - box-shadow: 3px 3px 7px fade(@black, 7%); - } - &-placement-topCenter > &-arrow { + &-placement-top > &-arrow { left: 50%; transform: translateX(-50%) rotate(45deg); } + &-placement-topLeft > &-arrow { left: 16px; } + &-placement-topRight > &-arrow { right: 16px; } - &-placement-bottomCenter > &-arrow, + &-placement-bottom > &-arrow, &-placement-bottomLeft > &-arrow, &-placement-bottomRight > &-arrow { - top: @popover-distance - @popover-arrow-width + 2px; - border-top-color: @popover-bg; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: @popover-bg; - box-shadow: -2px -2px 5px fade(@black, 6%); + top: (@popover-arrow-width + 2px) * sqrt((1 / 2)); + box-shadow: 2px 2px 5px -2px fade(@black, 10%); + transform: rotate(-135deg) translateY(-0.5px); } - &-placement-bottomCenter > &-arrow { + + &-placement-bottom > &-arrow { left: 50%; - transform: translateX(-50%) rotate(45deg); + transform: translateX(-50%) rotate(-135deg) translateY(-0.5px); } + &-placement-bottomLeft > &-arrow { left: 16px; } + &-placement-bottomRight > &-arrow { right: 16px; } @@ -199,7 +201,6 @@ font-weight: normal; font-size: @dropdown-font-size; line-height: @dropdown-line-height; - white-space: nowrap; cursor: pointer; transition: all @animation-duration-slow; @@ -217,10 +218,11 @@ &-selected { color: @dropdown-selected-color; - background-color: @item-active-bg; + background-color: @dropdown-selected-bg; } - &:hover { + &:hover, + &&-active { background-color: @item-hover-bg; } @@ -300,8 +302,8 @@ &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft, &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft, - &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter, - &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter, + &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom, + &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottom, &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight, &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight { animation-name: antSlideUpIn; @@ -309,21 +311,21 @@ &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft, - &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter, - &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter, + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-top, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-top, &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight, &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight { animation-name: antSlideDownIn; } &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft, - &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter, + &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottom, &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight { animation-name: antSlideUpOut; } &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft, - &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter, + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-top, &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight { animation-name: antSlideDownOut; } @@ -341,10 +343,21 @@ .@{dropdown-prefix-cls}-button { white-space: nowrap; - &.@{ant-prefix}-btn-group - > .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) { - padding-right: @padding-xs; - padding-left: @padding-xs; + &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn { + &-loading, + &-loading + .@{ant-prefix}-btn { + cursor: default; + pointer-events: none; + } + + &-loading + .@{ant-prefix}-btn::before { + display: block; + } + + &:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) { + padding-right: @padding-xs; + padding-left: @padding-xs; + } } } @@ -362,6 +375,7 @@ .@{dropdown-prefix-cls}-menu-submenu-arrow::after { color: @text-color-secondary-dark; } + &:hover { color: @text-color-inverse; background: transparent; diff --git a/components/dropdown/style/patch.less b/components/dropdown/style/patch.less index 96c7a0a0..4474a778 100644 --- a/components/dropdown/style/patch.less +++ b/components/dropdown/style/patch.less @@ -1,5 +1,13 @@ -.disabled { - color: rgba(0,0,0,.25); - cursor: not-allowed; - pointer-events: none; +.@{dropdown-prefix-cls} { + &-menu { + &-item, + &-submenu-title { + .@{dropdown-prefix-cls}-menu-submenu-arrow { + .@{dropdown-prefix-cls}-rtl & { + transform: rotate(180deg); + } + } + } + } } + \ No newline at end of file diff --git a/components/dropdown/style/rtl.less b/components/dropdown/style/rtl.less index 22ef31a0..8d77d830 100644 --- a/components/dropdown/style/rtl.less +++ b/components/dropdown/style/rtl.less @@ -22,7 +22,8 @@ } &-item-group-title { - .@{dropdown-prefix-cls}-rtl & { + .@{dropdown-prefix-cls}-rtl &, + .@{dropdown-prefix-cls}-menu-submenu-rtl & { direction: rtl; text-align: right; } @@ -55,13 +56,13 @@ } } - .@{dropdown-prefix-cls}-menu-submenu-arrow { + .@{dropdown-prefix-cls}-menu-submenu-expand-icon { .@{dropdown-prefix-cls}-rtl & { right: auto; left: @padding-xs; } - &-icon { + .@{dropdown-prefix-cls}-menu-submenu-arrow-icon { .@{dropdown-prefix-cls}-rtl & { margin-left: 0 !important; transform: scaleX(-1); diff --git a/components/dropdown/style/status.less b/components/dropdown/style/status.less index 327cf488..e370a872 100644 --- a/components/dropdown/style/status.less +++ b/components/dropdown/style/status.less @@ -1,4 +1,6 @@ -@import './index'; +@import (reference) '../../style/themes/index'; + +@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; .@{dropdown-prefix-cls}-menu-item { &&-danger { diff --git a/components/empty/style/entry.less b/components/empty/style/entry.less index 06547c43..911f7808 100644 --- a/components/empty/style/entry.less +++ b/components/empty/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import "./patch"; diff --git a/components/empty/style/index.less b/components/empty/style/index.less index 7259b9aa..c696372c 100644 --- a/components/empty/style/index.less +++ b/components/empty/style/index.less @@ -55,23 +55,29 @@ fill: @white; fill-opacity: 0.08; } + &-path { &-1 { fill: #262626; } + &-2 { - fill: url(#linearGradient-1); + fill: url('#linearGradient-1'); } + &-3 { fill: #595959; } + &-4 { fill: #434343; } + &-5 { fill: #595959; } } + &-g { fill: #434343; } @@ -81,23 +87,29 @@ fill: #f5f5f5; fill-opacity: 0.8; } + &-path { &-1 { fill: #aeb8c2; } + &-2 { - fill: url(#linearGradient-1); + fill: url('#linearGradient-1'); } + &-3 { fill: #f5f5f7; } + &-4 { fill: #dce0e6; } + &-5 { fill: #dce0e6; } } + &-g { fill: @white; } @@ -111,9 +123,11 @@ fill: @white; fill-opacity: 0.08; } + &-g { stroke: #434343; } + &-path { fill: #262626; stroke: #434343; @@ -123,9 +137,11 @@ &-ellipse { fill: #f5f5f5; } + &-g { stroke: #d9d9d9; } + &-path { fill: #fafafa; } diff --git a/components/empty/style/patch.less b/components/empty/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/form/style/components.less b/components/form/style/components.less index 0379fbdc..10bf6cb9 100644 --- a/components/form/style/components.less +++ b/components/form/style/components.less @@ -1,71 +1,16 @@ -@import './index'; +@import (reference) '../../style/themes/index'; + +@form-prefix-cls: ~'@{ant-prefix}-form'; +@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; // ================================================================ // = Children Component = // ================================================================ +// FIXME: useless, remove in v5 .@{form-item-prefix-cls} { - .@{ant-prefix}-mentions, - textarea.@{ant-prefix}-input { - height: auto; - } - - // input[type=file] - .@{ant-prefix}-upload { - background: transparent; - } - .@{ant-prefix}-upload.@{ant-prefix}-upload-drag { - background: @background-color-light; - } - - input[type='radio'], - input[type='checkbox'] { - width: 14px; - height: 14px; - } - - // Radios and checkboxes on same line - .@{ant-prefix}-radio-inline, - .@{ant-prefix}-checkbox-inline { - display: inline-block; - margin-left: 8px; - font-weight: normal; - vertical-align: middle; - cursor: pointer; - - &:first-child { - margin-left: 0; - } - } - - .@{ant-prefix}-checkbox-vertical, - .@{ant-prefix}-radio-vertical { - display: block; - } - - .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical, - .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical { - margin-left: 0; - } - .@{ant-prefix}-input-number { + .@{form-prefix-cls}-text { margin-left: 8px; } - &-handler-wrap { - z-index: 2; // https://github.com/ant-design/ant-design/issues/6289 - } - } - - .@{ant-prefix}-select, - .@{ant-prefix}-cascader-picker { - width: 100%; - } - - // Don't impact select inside input group and calendar header select - .@{ant-prefix}-picker-calendar-year-select, - .@{ant-prefix}-picker-calendar-month-select, - .@{ant-prefix}-input-group .@{ant-prefix}-select, - .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker { - width: auto; } } diff --git a/components/form/style/entry.less b/components/form/style/entry.less index 06547c43..f9df3b4b 100644 --- a/components/form/style/entry.less +++ b/components/form/style/entry.less @@ -1 +1,4 @@ @import './index.less'; +// style dependencies +@import '../../grid/style/entry.less'; +@import './patch'; diff --git a/components/form/style/horizontal.less b/components/form/style/horizontal.less index 83b664d4..73e6c623 100644 --- a/components/form/style/horizontal.less +++ b/components/form/style/horizontal.less @@ -1,4 +1,7 @@ -@import './index'; +@import (reference) '../../style/themes/index'; + +@form-prefix-cls: ~'@{ant-prefix}-form'; +@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; .@{form-prefix-cls}-horizontal { .@{form-item-prefix-cls}-label { @@ -6,5 +9,14 @@ } .@{form-item-prefix-cls}-control { flex: 1 1 0; + // https://github.com/ant-design/ant-design/issues/32777 + // https://github.com/ant-design/ant-design/issues/33773 + min-width: 0; + } + // https://github.com/ant-design/ant-design/issues/32980 + // https://github.com/ant-design/ant-design/issues/34903 + .@{form-item-prefix-cls}-label[class$='-24'] + .@{form-item-prefix-cls}-control, + .@{form-item-prefix-cls}-label[class*='-24 '] + .@{form-item-prefix-cls}-control { + min-width: unset; } } diff --git a/components/form/style/index.less b/components/form/style/index.less index 3e3984e4..105b9aaf 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -39,6 +39,7 @@ &-small { .formSize(@input-height-sm); } + &-large { .formSize(@input-height-lg); } @@ -61,9 +62,12 @@ margin-bottom: @form-item-margin-bottom; vertical-align: top; + // We delay one frame (0.017s) here to let CSSMotion goes + transition: margin-bottom @animation-duration-slow 0.017s linear; &-with-help { margin-bottom: 0; + transition: none; } &-hidden, @@ -87,6 +91,12 @@ text-align: left; } + &-wrap { + overflow: unset; + line-height: (@line-height-base - 0.25em); + white-space: unset; + } + > label { position: relative; display: inline-flex; @@ -179,10 +189,12 @@ } } + // ============================================================== + // = Explain = + // ============================================================== &-explain, &-extra { clear: both; - min-height: @form-item-margin-bottom; color: @text-color-secondary; font-size: @font-size-base; line-height: @line-height-base; @@ -190,43 +202,85 @@ .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2); } - .@{ant-prefix}-input-textarea-show-count { - &::after { - margin-bottom: -22px; + &-explain-connected { + height: 0; + min-height: 0; + opacity: 0; + } + + &-extra { + min-height: @form-item-margin-bottom; + } + + &-with-help &-explain { + height: auto; + min-height: @form-item-margin-bottom; + opacity: 1; + } + + // ============================================================== + // = Feedback Icon = + // ============================================================== + &-feedback-icon { + font-size: @font-size-base; + text-align: center; + visibility: visible; + animation: zoomIn 0.3s @ease-out-back; + pointer-events: none; + + &-success { + color: @success-color; + } + + &-error { + color: @error-color; + } + + &-warning { + color: @warning-color; + } + + &-validating { + color: @primary-color; } } } -.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) { - @name: ~'@{ant-prefix}-@{className}'; - .make-motion(@name, @keyframeName, @duration); - .@{name}-enter, - .@{name}-appear { - opacity: 0; - animation-timing-function: @ease-in-out; - } - .@{name}-leave { - animation-timing-function: @ease-in-out; +// >>>>>>>>>> Motion <<<<<<<<<< +// Explain holder +.@{ant-prefix}-show-help { + transition: height @animation-duration-slow linear, min-height @animation-duration-slow linear, + margin-bottom @animation-duration-slow @ease-in-out, + opacity @animation-duration-slow @ease-in-out; + + &-leave { + min-height: @form-item-margin-bottom; + + &-active { + min-height: 0; + } } } -.show-help-motion(show-help, antShowHelp, 0.3s); +// Explain +.@{ant-prefix}-show-help-item { + overflow: hidden; + transition: height @animation-duration-slow @ease-in-out, + opacity @animation-duration-slow @ease-in-out, transform @animation-duration-slow @ease-in-out !important; -@keyframes antShowHelpIn { - 0% { + &-appear, + &-enter { transform: translateY(-5px); opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} -@keyframes antShowHelpOut { - to { + &-active { + transform: translateY(0); + opacity: 1; + } + } + + &-leave-active { transform: translateY(-5px); - opacity: 0; } } @@ -237,6 +291,7 @@ transform: scale(0); opacity: 0; } + 100% { transform: scale(1); opacity: 1; @@ -248,6 +303,7 @@ transform: scale(0); opacity: 0; } + 100% { transform: scale(1); opacity: 1; @@ -259,6 +315,7 @@ transform: scale(0); opacity: 0; } + 100% { transform: scale(1); opacity: 1; diff --git a/components/form/style/inline.less b/components/form/style/inline.less index 6cd0c4d4..63946752 100644 --- a/components/form/style/inline.less +++ b/components/form/style/inline.less @@ -1,4 +1,7 @@ -@import './index'; +@import (reference) '../../style/themes/index'; + +@form-prefix-cls: ~'@{ant-prefix}-form'; +@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; .@{form-prefix-cls}-inline { display: flex; diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index c0071bac..c7ca1468 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -1,40 +1,15 @@ @import '../../input/style/mixin'; -.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) { +.form-control-validation( + @text-color: @input-color; + @border-color: @input-border-color; + @background-color: @input-bg; + @hoverBorderColor: @primary-color-hover; + @outlineColor: @primary-color-outline; +) { .@{ant-prefix}-form-item-split { color: @text-color; } - // 输入框的不同校验状态 - :not(.@{ant-prefix}-input-disabled):not(.@{ant-prefix}-input-borderless).@{ant-prefix}-input, - :not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper { - &, - &:hover { - background-color: @background-color; - border-color: @border-color; - } - - &:focus, - &-focused { - .active(@border-color); - } - } - - .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input { - .active(@border-color); - } - - .@{ant-prefix}-input-prefix { - color: @text-color; - } - - .@{ant-prefix}-input-group-addon { - color: @text-color; - border-color: @border-color; - } - - .has-feedback { - color: @text-color; - } } // Reset form styles diff --git a/components/form/style/patch.less b/components/form/style/patch.less new file mode 100644 index 00000000..e69de29b diff --git a/components/form/style/rtl.less b/components/form/style/rtl.less index 5874b6fb..505ee0c5 100644 --- a/components/form/style/rtl.less +++ b/components/form/style/rtl.less @@ -32,6 +32,7 @@ margin-left: 4px; } } + &::after { .@{form-prefix-cls}-rtl & { margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right; @@ -79,6 +80,14 @@ } } + .@{ant-prefix}-input-number-affix-wrapper { + .@{ant-prefix}-input-number { + .@{form-prefix-cls}-rtl & { + padding: 0; + } + } + } + .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) { .@{ant-prefix}-input-suffix { .@{form-prefix-cls}-rtl & { @@ -97,7 +106,13 @@ > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, > .@{ant-prefix}-select .@{ant-prefix}-select-clear, :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, - :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear { + :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear, + :not(.@{ant-prefix}-input-number-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-arrow, + :not(.@{ant-prefix}-input-number-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-clear { .@{form-prefix-cls}-rtl & { right: auto; left: 32px; @@ -106,6 +121,9 @@ > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, :not(.@{ant-prefix}-input-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-selection-selected-value, + :not(.@{ant-prefix}-input-number-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value { .@{form-prefix-cls}-rtl & { @@ -121,6 +139,7 @@ margin-left: 19px; } } + &-clear { .@{form-prefix-cls}-rtl & { right: auto; diff --git a/components/form/style/status.less b/components/form/style/status.less index 75add0b1..1a53d97a 100644 --- a/components/form/style/status.less +++ b/components/form/style/status.less @@ -1,278 +1,42 @@ -@import './index.less'; +@import (reference) '../../style/themes/index'; + +@form-prefix-cls: ~'@{ant-prefix}-form'; +@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; .@{form-item-prefix-cls} { // ================================================================ // = Status = // ================================================================ + /* Some non-status related component style is in `components.less` */ // ========================= Explain ========================= + /* To support leave along ErrorList. We add additional className to handle explain style */ &-explain { - &&-error { + &-error { color: @error-color; } - &&-warning { + &-warning { color: @warning-color; } } &-has-feedback { - // ========================= Input ========================= - .@{ant-prefix}-input { - padding-right: 24px; - } - // https://github.com/ant-design/ant-design/issues/19884 - .@{ant-prefix}-input-affix-wrapper { - .@{ant-prefix}-input-suffix { - padding-right: 18px; - } - } - - // Fix issue: https://github.com/ant-design/ant-design/issues/7854 - .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) { - .@{ant-prefix}-input-suffix { - right: 28px; - } - } - // ======================== Switch ========================= .@{ant-prefix}-switch { margin: 2px 0 4px; } - - // ======================== Select ========================= - // Fix overlapping between feedback icon and