test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-29 18:48:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

chore: sync ant-design v4.20.7 (#2497)

Browse Source 
* chore: sync ant-design v4.20.7

* fix style build

* clean the style

* fix dropdown overlay

* remove cdk styles

* fix dropdown overwrite styles

* fix doc styles
This commit is contained in:
James Yeung 2022-06-04 00:44:34 +08:00 committed by GitHub
parent b674a9ffef
commit 1659aef02d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
318 changed files with 4705 additions and 9225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -356,3 +356,5 @@ scripts/previewEditor/index.html
/.nyc_output /.nyc_output
/coverage /coverage
/tests/AntDesign.Tests.Js/coverage.xml /tests/AntDesign.Tests.Js/coverage.xml
/lib
site/AntDesign.Docs/wwwroot/color.less

14
build-config.js Normal file
View File

@ -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')
};

904
components/AntBlazor.xml
View File

@ -1,904 +0,0 @@
<?xml version="1.0"?>
<doc>
<assembly>
<name>AntDesign</name>
</assembly>
<members>
<member name="P:AntDesign.AntAffix.OffsetBottom">
<summary>
Offset from the bottom of the viewport (in pixels)
</summary>
</member>
<member name="P:AntDesign.AntAffix.OffsetTop">
<summary>
Offset from the top of the viewport (in pixels)
</summary>
</member>
<member name="P:AntDesign.AntAffix.Target">
<summary>
Specifies the scrollable area DOM node
</summary>
</member>
<member name="T:AntDesign.Alert">
<summary>
Alert component for feedback.
</summary>
</member>
<member name="P:AntDesign.Alert.AfterClose">
<summary>
Called when close animation is finished
</summary>
</member>
<member name="P:AntDesign.Alert.Banner">
<summary>
Whether to show as banner
</summary>
</member>
<member name="P:AntDesign.Alert.Closable">
<summary>
Whether Alert can be closed
</summary>
</member>
<member name="P:AntDesign.Alert.CloseText">
<summary>
Close text to show
</summary>
</member>
<member name="P:AntDesign.Alert.Description">
<summary>
Additional content of Alert
</summary>
</member>
<member name="P:AntDesign.Alert.Icon">
<summary>
Custom icon, effective when showIcon is true
</summary>
</member>
<member name="P:AntDesign.Alert.Message">
<summary>
Content of Aler
</summary>
</member>
<member name="P:AntDesign.Alert.ShowIcon">
<summary>
Whether to show icon.
</summary>
</member>
<member name="P:AntDesign.Alert.Type">
<summary>
Type of Alert styles, options: success, info, warning, error
</summary>
</member>
<member name="P:AntDesign.Alert.OnClose">
<summary>
Callback when Alert is closed.
</summary>
</member>
<member name="P:AntDesign.Alert.ChildContent">
<summary>
Additional Content
</summary>
</member>
<member name="P:AntDesign.Alert.IconType">
<summary>
Icon to show.
</summary>
</member>
<member name="F:AntDesign.Alert._isClosed">
<summary>
Indicator if the component is closed or not.
</summary>
</member>
<member name="F:AntDesign.Alert._isClosing">
<summary>
Just before we close the component we set this indicator to show a closing animation.
</summary>
</member>
<member name="M:AntDesign.Alert.SetClassMap">
<summary>
Sets the default classes.
</summary>
</member>
<member name="M:AntDesign.Alert.OnParametersSet">
<summary>
Triggered each time a parameter is changed.
</summary>
</member>
<member name="M:AntDesign.Alert.OnInitialized">
<summary>
Start-up code.
</summary>
</member>
<member name="M:AntDesign.Alert.OnCloseHandler(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
<summary>
Handles the close callback.
</summary>
<param name="args"></param>
<returns></returns>
</member>
<member name="M:AntDesign.Alert.AfterCloseHandler(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
<summary>
Handles the after close callback.
</summary>
<param name="args"></param>
<returns></returns>
</member>
<member name="T:AntDesign.Badge">
<summary>
Small numerical value or status descriptor for UI elements.
</summary>
</member>
<member name="P:AntDesign.Badge.Color">
<summary>
Customize Badge dot color
</summary>
</member>
<member name="P:AntDesign.Badge.Count">
<summary>
Number to show in badge
</summary>
</member>
<member name="P:AntDesign.Badge.Dot">
<summary>
Whether to display a red dot instead of count
</summary>
</member>
<member name="P:AntDesign.Badge.Offset">
<summary>
Set offset of the badge dot, like[x, y]
</summary>
</member>
<member name="P:AntDesign.Badge.OverflowCount">
<summary>
Max count to show
</summary>
</member>
<member name="P:AntDesign.Badge.ShowZero">
<summary>
Whether to show badge when count is zero
</summary>
</member>
<member name="P:AntDesign.Badge.Status">
<summary>
Set Badge as a status dot
</summary>
</member>
<member name="P:AntDesign.Badge.Text">
<summary>
If status is set, text sets the display text of the status dot
</summary>
</member>
<member name="P:AntDesign.Badge.Title">
<summary>
Text to show when hovering over the badge
</summary>
</member>
<member name="P:AntDesign.Badge.ChildContent">
<summary>
Wrapping this item.
</summary>
</member>
<member name="M:AntDesign.Badge.SetClassMap">
<summary>
Sets the default CSS classes.
</summary>
</member>
<member name="M:AntDesign.Badge.OnInitialized">
<summary>
Startup code
</summary>
</member>
<member name="M:AntDesign.Badge.OnParametersSet">
<summary>
Runs every time a parameter is set.
</summary>
</member>
<member name="P:AntDesign.AntCarousel.DotPosition">
<summary>
The position of the dots, which can be one of Top, Bottom, Left or Right, <see cref="T:AntDesign.CarouselDotPosition"/>
</summary>
</member>
<member name="P:AntDesign.AntCarousel.Autoplay">
<summary>
Whether to scroll automatically
</summary>
</member>
<member name="P:AntDesign.AntCarousel.Effect">
<summary>
Transition effect, <see cref="T:AntDesign.CarouselEffect"/>
</summary>
</member>
<member name="P:AntDesign.AntDomComponentBase.Ref">
<summary>
Returned ElementRef reference for DOM element.
</summary>
</member>
<member name="P:AntDesign.AntDomComponentBase.Class">
<summary>
Specifies one or more class names for an DOM element.
</summary>
</member>
<member name="P:AntDesign.AntDomComponentBase.Style">
<summary>
Specifies an inline style for an DOM element.
</summary>
</member>
<member name="T:AntDesign.AntInputComponentBase`1">
<summary>
Base class for any input control that optionally supports an <see cref="P:AntDesign.AntInputComponentBase`1.EditContext"/>.
</summary>
<typeparam name="T">the natural type of the input's value</typeparam>
</member>
<member name="P:AntDesign.AntInputComponentBase`1.ValidationDisabled">
<summary>
When contained within an <see cref="P:AntDesign.AntInputComponentBase`1.EditContext"/> disables this control's
participation in validation checking. This means that this control will not
reflect the validation state of the underlying data binding.
</summary>
</member>
<member name="P:AntDesign.AntInputComponentBase`1.EditContext">
<summary>
Gets the associated <see cref="T:Microsoft.AspNetCore.Components.Forms.EditContext"/>.
</summary>
</member>
<member name="P:AntDesign.AntInputComponentBase`1.FieldIdentifier">
<summary>
Gets the <see cref="P:AntDesign.AntInputComponentBase`1.FieldIdentifier"/> for the bound value.
</summary>
</member>
<member name="P:AntDesign.AntInputComponentBase`1.FieldClass">
<summary>
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.
</summary>
</member>
<member name="M:AntDesign.AntInputComponentBase`1.NotifyFieldChanged">
<summary>
Should be invoked by whenever a bound value is changed, such
as right after the value's corresponding <i>ValueChanged</i>
EventCallback is invoked.
</summary>
</member>
<member name="P:AntDesign.AntInputComponentBase`1.ValueExpression">
<summary>
Gets or sets an expression that identifies the bound value.
</summary>
</member>
<member name="M:AntDesign.AntInputComponentBase`1.SetParametersAsync(Microsoft.AspNetCore.Components.ParameterView)">
<inheritdoc />
</member>
<member name="M:AntDesign.Internal.Overlay.UpdateChildState(System.Boolean)">
<summary>
set if there any child overlay show or hide
overlay would not hide if any child is showing
</summary>
<param name="isChildOverlayShow"></param>
</member>
<member name="M:AntDesign.Internal.Overlay.IsHiding">
<summary>
when overlay is complete hide, IsPopup return true
when overlay is hiding(playing hide animation), IsPopup return false, IsHiding return true.
</summary>
<returns></returns>
</member>
<member name="M:AntDesign.HtmlRenderer.UpdateDisplayAsync(Microsoft.AspNetCore.Components.RenderTree.RenderBatch@)">
<inheritdoc />
</member>
<member name="M:AntDesign.HtmlRenderer.HandleException(System.Exception)">
<inheritdoc />
</member>
<member name="M:AntDesign.DatePicker.GetIndexPickerValue(System.Int32)">
<summary>
Get pickerValue by picker index
</summary>
<param name="index"></param>
<returns></returns>
</member>
<member name="M:AntDesign.DatePicker.GetIndexValue(System.Int32)">
<summary>
Get value by picker index
</summary>
<param name="index"></param>
<returns></returns>
</member>
<member name="P:AntDesign.Drawer.Placement">
<summary>
"left" | "right" | "top" | "bottom"
</summary>
</member>
<member name="P:AntDesign.Empty.Direction">
<summary>
"ltr"|"rtl"
</summary>
</member>
<member name="P:AntDesign.Row.Align">
<summary>
'top' | 'middle' | 'bottom'
</summary>
</member>
<member name="P:AntDesign.Row.Justify">
<summary>
'start' | 'end' | 'center' | 'space-around' | 'space-between'
</summary>
</member>
<member name="P:AntDesign.AntIcon.Theme">
<summary>
'fill' | 'outline' | 'twotone';
</summary>
</member>
<member name="T:AntDesign.Input">
<summary>
</summary>
</member>
<member name="M:AntDesign.Input.OnInputAsync(Microsoft.AspNetCore.Components.ChangeEventArgs)">
<summary>
Invoked when user add/remove content
</summary>
<param name="args"></param>
<returns></returns>
</member>
<member name="F:AntDesign.TextArea._rowHeight">
<summary>
scrollHeight of 1 row
</summary>
</member>
<member name="F:AntDesign.TextArea._offsetHeight">
<summary>
total height = row * <see cref="F:AntDesign.TextArea._rowHeight" /> + <see cref="F:AntDesign.TextArea._offsetHeight" />
</summary>
</member>
<member name="P:AntDesign.Sider.Theme">
<summary>
'light' | 'dark'
</summary>
</member>
<member name="P:AntDesign.Sider.Breakpoint">
<summary>
"xs" | "sm" | "md" | "lg" | "xl" | "xxl"
</summary>
</member>
<member name="P:AntDesign.MenuLink.ActiveClass">
<summary>
Gets or sets the CSS class name applied to the NavLink when the
current route matches the NavLink href.
</summary>
</member>
<member name="P:AntDesign.MenuLink.CssClass">
<summary>
Gets or sets the computed CSS class based on whether or not the link is active.
</summary>
</member>
<member name="P:AntDesign.MenuLink.ChildContent">
<summary>
Gets or sets the child content of the component.
</summary>
</member>
<member name="P:AntDesign.MenuLink.Match">
<summary>
Gets or sets a value representing the URL matching behavior.
</summary>
</member>
<member name="M:AntDesign.MenuLink.OnInitialized">
<inheritdoc />
</member>
<member name="M:AntDesign.MenuLink.OnParametersSet">
<inheritdoc />
</member>
<member name="M:AntDesign.MenuLink.Dispose(System.Boolean)">
<inheritdoc />
</member>
<member name="T:AntDesign.MessageBase">
<summary>
</summary>
</member>
<member name="T:AntDesign.MessageService">
<summary>
Message Service
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.AnimationClass">
<summary>
控制出现与消失的动画
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Btn">
<summary>
自定义关闭按钮
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.ClassName">
<summary>
自定义 CSS class
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.CloseIcon">
<summary>
自定义关闭图标
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Message">
<summary>
通知提醒标题，必选，string 或者 RenderFragment
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Description">
<summary>
通知提醒内容，必选，string 或者 RenderFragment
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Duration">
<summary>
自动关闭的延时，单位为秒。默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Icon">
<summary>
自定义图标
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Key">
<summary>
当前通知唯一标志
</summary>
</member>
<member name="E:AntDesign.NotificationConfig.OnClose">
<summary>
当通知关闭时触发
</summary>
</member>
<member name="E:AntDesign.NotificationConfig.OnClick">
<summary>
点击通知时触发的回调函数
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Style">
<summary>
自定义内联样式
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.Placement">
<summary>
弹出位置
</summary>
</member>
<member name="P:AntDesign.NotificationConfig.NotificationType">
<summary>
通知提醒框左侧的图标类型
</summary>
</member>
<member name="T:AntDesign.NotificationGlobalConfig">
<summary>
AntNotification全局配置
</summary>
</member>
<member name="P:AntDesign.NotificationGlobalConfig.Bottom">
<summary>
消息从底部弹出时，距离底部的位置，单位像素。
</summary>
</member>
<member name="P:AntDesign.NotificationGlobalConfig.Top">
<summary>
消息从顶部弹出时，距离顶部的位置，单位像素。
</summary>
</member>
<member name="P:AntDesign.NotificationGlobalConfig.Rtl">
<summary>
是否开启 RTL 模式
</summary>
</member>
<member name="P:AntDesign.NotificationGlobalConfig.CloseIcon">
<summary>
自定义关闭图标
</summary>
</member>
<member name="P:AntDesign.NotificationGlobalConfig.Duration">
<summary>
自动关闭的延时，单位为秒。默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
</summary>
</member>
<member name="P:AntDesign.NotificationGlobalConfig.Placement">
<summary>
弹出位置
</summary>
</member>
<member name="M:AntDesign.Notification.Config(AntDesign.NotificationGlobalConfig)">
<summary>
modify global config
</summary>
<param name="defaultConfig"></param>
</member>
<member name="T:AntDesign.NotificationBase">
<summary>
</summary>
</member>
<member name="T:AntDesign.NotificationService">
<summary>
AntNotification Service
</summary>
</member>
<member name="M:AntDesign.NotificationService.Open(AntDesign.NotificationConfig)">
<summary>
Open a notification box
</summary>
<param name="config"></param>
</member>
<member name="M:AntDesign.NotificationService.Success(AntDesign.NotificationConfig)">
<summary>
</summary>
<param name="config"></param>
</member>
<member name="M:AntDesign.NotificationService.Error(AntDesign.NotificationConfig)">
<summary>
</summary>
<param name="config"></param>
</member>
<member name="M:AntDesign.NotificationService.Info(AntDesign.NotificationConfig)">
<summary>
</summary>
<param name="config"></param>
</member>
<member name="M:AntDesign.NotificationService.Warning(AntDesign.NotificationConfig)">
<summary>
</summary>
<param name="config"></param>
</member>
<member name="M:AntDesign.NotificationService.Warn(AntDesign.NotificationConfig)">
<summary>
</summary>
<param name="config"></param>
</member>
<member name="M:AntDesign.NotificationService.Close(System.String)">
<summary>
close notification by key
</summary>
<param name="key"></param>
<returns></returns>
</member>
<member name="M:AntDesign.NotificationService.Destroy">
<summary>
destroy
</summary>
</member>
<member name="P:AntDesign.Pagination.Size">
<summary>
'default' | 'small'
</summary>
</member>
<member name="P:AntDesign.PaginationItemRenderContext.Type">
<summary>
'page' | 'prev' | 'next' | 'prev_5' | 'next_5'
</summary>
</member>
<member name="P:AntDesign.PaginationItem.Type">
<summary>
'page' | 'prev' | 'next' | 'prev_5' | 'next_5'
</summary>
</member>
<member name="P:AntDesign.PaginationOptions.Size">
<summary>
'default' | 'small' = 'default';
</summary>
</member>
<member name="P:AntDesign.Progress.Size">
<summary>
progress size
</summary>
</member>
<member name="P:AntDesign.Progress.Type">
<summary>
to set the type, options: line circle dashboard
</summary>
</member>
<member name="P:AntDesign.Progress.Format">
<summary>
template function of the content
</summary>
</member>
<member name="P:AntDesign.Progress.Percent">
<summary>
to set the completion percentage
</summary>
</member>
<member name="P:AntDesign.Progress.ShowInfo">
<summary>
whether to display the progress value and the status icon
</summary>
</member>
<member name="P:AntDesign.Progress.Status">
<summary>
to set the status of the Progress, options: success exception normal active(line only)
</summary>
</member>
<member name="P:AntDesign.Progress.StrokeLinecap">
<summary>
to set the style of the progress linecap
</summary>
</member>
<member name="P:AntDesign.Progress.Color">
<summary>
color of progress bar
</summary>
</member>
<member name="P:AntDesign.Progress.SuccessPercent">
<summary>
segmented success percent
</summary>
</member>
<member name="P:AntDesign.Progress.TrailColor">
<summary>
color of unfilled part
</summary>
</member>
<member name="P:AntDesign.Progress.StrokeWidth">
<summary>
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
</summary>
</member>
<member name="P:AntDesign.Progress.StrokeColor">
<summary>
color of progress bar, render linear-gradient when passing an object
color of circular progress, render linear-gradient when passing an object
</summary>
</member>
<member name="P:AntDesign.Progress.Steps">
<summary>
the total step count
</summary>
</member>
<member name="P:AntDesign.Progress.Width">
<summary>
to set the canvas width of the circular progress, unit: px
to set the canvas width of the dashboard progress, unit: px
</summary>
</member>
<member name="P:AntDesign.Progress.GapDegree">
<summary>
the gap degree of half circle, 0 ~ 295
</summary>
</member>
<member name="P:AntDesign.Progress.GapPosition">
<summary>
the gap position, options: top bottom left right
</summary>
</member>
<member name="P:AntDesign.Result.Status">
<summary>
success | error | info | warning | 404 | 403 | 500
default: info
</summary>
</member>
<member name="P:AntDesign.Slider.DefaultValue">
<summary>
The default value of slider. When <see cref="P:AntDesign.Slider.Range"/> is false, use number, otherwise, use [number, number]
</summary>
</member>
<member name="P:AntDesign.Slider.Disabled">
<summary>
If true, the slider will not be interactable
</summary>
</member>
<member name="P:AntDesign.Slider.Dots">
<summary>
Whether the thumb can drag over tick only
</summary>
</member>
<member name="P:AntDesign.Slider.Included">
<summary>
Make effect when <see cref="P:AntDesign.Slider.Marks"/> not null, true means containment and false means coordinative
</summary>
</member>
<member name="P:AntDesign.Slider.Marks">
<summary>
Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style
</summary>
</member>
<member name="P:AntDesign.Slider.Max">
<summary>
The maximum value the slider can slide to
</summary>
</member>
<member name="P:AntDesign.Slider.Min">
<summary>
The minimum value the slider can slide to
</summary>
</member>
<member name="P:AntDesign.Slider.Range">
<summary>
dual thumb mode
</summary>
</member>
<member name="P:AntDesign.Slider.Reverse">
<summary>
reverse the component
</summary>
</member>
<member name="P:AntDesign.Slider.Step">
<summary>
The granularity the slider can step through values. Must greater than 0, and be divided by (<see cref="P:AntDesign.Slider.Max"/> - <see cref="P:AntDesign.Slider.Min"/>) . When <see cref="P:AntDesign.Slider.Marks"/> no null, <see cref="P:AntDesign.Slider.Step"/> can be null.
</summary>
</member>
<member name="P:AntDesign.Slider.TipFormatter">
<summary>
Slider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is null.
</summary>
</member>
<member name="P:AntDesign.Slider.Value">
<summary>
The value of slider. When range is false, use number, otherwise, use [number, number]
</summary>
</member>
<member name="P:AntDesign.Slider.Vertical">
<summary>
If true, the slider will be vertical.
</summary>
</member>
<member name="P:AntDesign.Slider.OnAfterChange">
<summary>
Fire when onmouseup is fired.
</summary>
</member>
<member name="P:AntDesign.Slider.OnChange">
<summary>
Callback function that is fired when the user changes the slider's value.
</summary>
</member>
<member name="P:AntDesign.Slider.TooltipPlacement">
<summary>
Set Tooltip display position. Ref Tooltip
</summary>
</member>
<member name="P:AntDesign.Slider.TooltipVisible">
<summary>
If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering.
</summary>
</member>
<member name="P:AntDesign.Slider.GetTooltipPopupContainer">
<summary>
The DOM container of the Tooltip, the default behavior is to create a div element in body.
</summary>
</member>
<member name="P:AntDesign.Spin.Size">
<summary>
small | default | large
</summary>
</member>
<member name="P:AntDesign.AntTabPane.ForceRender">
<summary>
Forced render of content in tabs, not lazy render after clicking on tabs
</summary>
</member>
<member name="P:AntDesign.AntTabPane.Key">
<summary>
TabPane's key
</summary>
</member>
<member name="P:AntDesign.AntTabPane.Tab">
<summary>
Show text in <see cref="T:AntDesign.AntTabPane"/>'s head
</summary>
</member>
<member name="P:AntDesign.AntTabs.ActiveKey">
<summary>
Current <see cref="T:AntDesign.AntTabPane"/>'s <see cref="P:AntDesign.AntTabPane.Key"/>
</summary>
</member>
<member name="P:AntDesign.AntTabs.Animated">
<summary>
Whether to change tabs with animation. Only works while <see cref="P:AntDesign.AntTabs.TabPosition"/> = <see cref="F:AntDesign.AntTabPosition.Top"/> or <see cref="F:AntDesign.AntTabPosition.Bottom"/>
</summary>
</member>
<member name="P:AntDesign.AntTabs.RenderTabBar">
<summary>
Replace the TabBar
</summary>
</member>
<member name="P:AntDesign.AntTabs.DefaultActiveKey">
<summary>
Initial active <see cref="T:AntDesign.AntTabPane"/>'s <see cref="P:AntDesign.AntTabPane.Key"/>, if <see cref="P:AntDesign.AntTabs.ActiveKey"/> is not set
</summary>
</member>
<member name="P:AntDesign.AntTabs.HideAdd">
<summary>
Hide plus icon or not. Only works while <see cref="P:AntDesign.AntTabs.Type"/> = <see cref="F:AntDesign.AntTabType.EditableCard"/>
</summary>
</member>
<member name="P:AntDesign.AntTabs.Size">
<summary>
Preset tab bar size
</summary>
</member>
<member name="P:AntDesign.AntTabs.TabBarExtraContent">
<summary>
Extra content in tab bar
</summary>
</member>
<member name="P:AntDesign.AntTabs.TabBarGutter">
<summary>
The gap between tabs
</summary>
</member>
<member name="P:AntDesign.AntTabs.TabBarStyle">
<summary>
Tab bar style object
</summary>
</member>
<member name="P:AntDesign.AntTabs.TabPosition">
<summary>
Position of tabs
</summary>
</member>
<member name="P:AntDesign.AntTabs.Type">
<summary>
Basic style of tabs
</summary>
</member>
<member name="P:AntDesign.AntTabs.OnChange">
<summary>
Callback executed when active tab is changed
</summary>
</member>
<member name="P:AntDesign.AntTabs.OnEdit">
<summary>
Callback executed when tab is added or removed. Only works while <see cref="P:AntDesign.AntTabs.Type"/> = <see cref="F:AntDesign.AntTabType.EditableCard"/>
</summary>
</member>
<member name="P:AntDesign.AntTabs.OnNextClick">
<summary>
Callback executed when next button is clicked
</summary>
</member>
<member name="P:AntDesign.AntTabs.OnPrevClick">
<summary>
Callback executed when prev button is clicked
</summary>
</member>
<member name="P:AntDesign.AntTabs.OnTabClick">
<summary>
Callback executed when tab is clicked
</summary>
</member>
<member name="P:AntDesign.AntTabs.Keyboard">
<summary>
Whether to turn on keyboard navigation
</summary>
</member>
<member name="M:AntDesign.AntTabs.AddTabPane(AntDesign.AntTabPane)">
<summary>
Add <see cref="T:AntDesign.AntTabPane"/> to <see cref="T:AntDesign.AntTabs"/>
</summary>
<param name="tabPane">The AntTabPane to be added</param>
<exception cref="T:System.ArgumentNullException">Key is null</exception>
<exception cref="T:System.ArgumentException">An AntTabPane with the same key already exists</exception>
</member>
<member name="P:AntDesign.AntTag.Mode">
<summary>
'default' | 'closeable' | 'checkable'
</summary>
</member>
<member name="P:AntDesign.AntTimeline.Mode">
<summary>
'left' | 'alternate' | 'right'
</summary>
</member>
<member name="P:AntDesign.AntDivider.Type">
<summary>
'horizontal' | 'vertical'
</summary>
</member>
<member name="P:AntDesign.AntDivider.Orientation">
<summary>
'left' | 'right' | 'center'
</summary>
</member>
</members>
</doc>

1
components/affix/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import "./patch";

0
components/affix/style/patch.less Normal file
View File

1
components/alert/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import './patch.less';

3
components/alert/style/index.less
View File

@ -84,6 +84,7 @@
.@{iconfont-css-prefix}-close { .@{iconfont-css-prefix}-close {
color: @alert-close-color; color: @alert-close-color;
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
color: @alert-close-hover-color; color: @alert-close-hover-color;
} }
@ -93,6 +94,7 @@
&-close-text { &-close-text {
color: @alert-close-color; color: @alert-close-color;
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
color: @alert-close-hover-color; color: @alert-close-hover-color;
} }
@ -111,6 +113,7 @@
margin-right: @alert-with-description-padding-vertical; margin-right: @alert-with-description-padding-vertical;
font-size: @alert-with-description-icon-size; font-size: @alert-with-description-icon-size;
} }
&-with-description &-message { &-with-description &-message {
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;

0
components/alert/style/patch.less Normal file
View File

15
components/alert/style/rtl.less
View File

@ -3,12 +3,6 @@
direction: rtl; direction: rtl;
} }
&&-no-icon {
.@{alert-prefix-cls}-rtl& {
padding: @alert-no-icon-padding-vertical 15px;
}
}
&-icon { &-icon {
.@{alert-prefix-cls}-rtl & { .@{alert-prefix-cls}-rtl & {
margin-right: auto; margin-right: auto;
@ -30,10 +24,17 @@
} }
} }
&-with-description &-icon { &-with-description {
.@{alert-prefix-cls}-rtl& {
padding-right: @alert-with-description-icon-size;
padding-left: @alert-with-description-padding-vertical;
}
.@{alert-prefix-cls}-icon {
.@{alert-prefix-cls}-rtl& { .@{alert-prefix-cls}-rtl& {
margin-right: auto; margin-right: auto;
margin-left: @alert-with-description-padding-vertical; margin-left: @alert-with-description-padding-vertical;
} }
} }
}
} }

2
components/anchor/style/entry.less
View File

@ -1 +1,3 @@
@import './index.less'; @import './index.less';
@import '../../affix/style/entry.less';
@import "./patch";

12
components/anchor/style/index.less
View File

@ -21,6 +21,7 @@
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
&::before { &::before {
position: relative; position: relative;
display: block; display: block;
@ -30,6 +31,7 @@
background-color: @anchor-border-color; background-color: @anchor-border-color;
content: ' '; content: ' ';
} }
&-ball { &-ball {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -41,24 +43,24 @@
border-radius: 8px; border-radius: 8px;
transform: translateX(-50%); transform: translateX(-50%);
transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out;
&.visible { &.visible {
display: inline-block; display: inline-block;
} }
} }
} }
&.fixed &-ink &-ink-ball { &-fixed &-ink &-ink-ball {
display: none; display: none;
} }
&-link { &-link {
padding: @anchor-link-padding; padding: @anchor-link-padding;
line-height: 1.143;
&-title { &-title {
position: relative; position: relative;
display: block; display: block;
margin-bottom: 6px; margin-bottom: 3px;
overflow: hidden; overflow: hidden;
color: @text-color; color: @text-color;
white-space: nowrap; white-space: nowrap;
@ -76,8 +78,8 @@
} }
&-link &-link { &-link &-link {
padding-top: 5px; padding-top: 2px;
padding-bottom: 5px; padding-bottom: 2px;
} }
} }

0
components/anchor/style/patch.less Normal file
View File

2
components/ant-design-blazor.aliyun.less
View File

@ -1,3 +1,3 @@
@import "./style/aliyun.less"; @import "./style/aliyun.less";
@import "./style/entry.less"; @import "./style/patch.less";
@import "./components.less"; @import "./components.less";

2
components/ant-design-blazor.compact.less
View File

@ -1,3 +1,3 @@
@import "./style/compact.less"; @import "./style/compact.less";
@import "./style/entry.less"; @import "./style/patch.less";
@import "./components.less"; @import "./components.less";

2
components/ant-design-blazor.dark.less
View File

@ -1,3 +1,3 @@
@import "./style/dark.less"; @import "./style/dark.less";
@import "./style/entry.less"; @import "./style/patch.less";
@import "./components.less"; @import "./components.less";

5
components/ant-design-blazor.less
View File

@ -1,2 +1,3 @@
@import "./style/entry.less"; @import './style/default.less';
@import "./components.less"; @import './style/patch.less';
@import './components.less';

3
components/ant-design-blazor.variable.less Normal file
View File

@ -0,0 +1,3 @@
@import './style/variable.less';
@import './style/patch.less';
@import './components.less';

4
components/auto-complete/style/entry.less
View File

@ -1 +1,5 @@
@import './index.less'; @import './index.less';
// style dependencies
@import '../../select/style/entry.less';
@import '../../input/style/entry.less';
@import "./patch";

3
components/auto-complete/style/patch.less Normal file
View File

@ -0,0 +1,3 @@
.ant-select-dropdown-hidden {
display: none;
}

10
components/back-top/style/responsive.less
View File

@ -1,11 +1,21 @@
@media screen and (max-width: @screen-md) { @media screen and (max-width: @screen-md) {
.@{backtop-prefix-cls} { .@{backtop-prefix-cls} {
right: 60px; right: 60px;
&-rtl {
right: auto;
left: 60px;
}
} }
} }
@media screen and (max-width: @screen-xs) { @media screen and (max-width: @screen-xs) {
.@{backtop-prefix-cls} { .@{backtop-prefix-cls} {
right: 20px; right: 20px;
&-rtl {
right: auto;
left: 20px;
}
} }
} }

23
components/badge/style/index.less
View File

@ -25,6 +25,7 @@
background: @badge-color; background: @badge-color;
border-radius: (@badge-height / 2); border-radius: (@badge-height / 2);
box-shadow: 0 0 0 1px @shadow-color-inverse; box-shadow: 0 0 0 1px @shadow-color-inverse;
a, a,
a:hover { a:hover {
color: @badge-text-color; color: @badge-text-color;
@ -86,12 +87,15 @@
vertical-align: middle; vertical-align: middle;
border-radius: 50%; border-radius: 50%;
} }
&-success { &-success {
background-color: @success-color; background-color: @success-color;
} }
&-processing { &-processing {
position: relative; position: relative;
background-color: @processing-color; background-color: @processing-color;
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
@ -104,12 +108,15 @@
content: ''; content: '';
} }
} }
&-default { &-default {
background-color: @normal-color; background-color: @normal-color;
} }
&-error { &-error {
background-color: @error-color; background-color: @error-color;
} }
&-warning { &-warning {
background-color: @warning-color; background-color: @warning-color;
} }
@ -157,7 +164,8 @@
vertical-align: middle; vertical-align: middle;
} }
.@{number-prefix-cls}-custom-component { .@{number-prefix-cls}-custom-component,
.@{badge-prefix-cls}-count {
transform: none; transform: none;
} }
@ -168,10 +176,6 @@
display: block; display: block;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
.@{badge-prefix-cls}-count {
transform: none;
}
} }
} }
@ -180,6 +184,7 @@
transform: scale(0.8); transform: scale(0.8);
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
transform: scale(2.4); transform: scale(2.4);
opacity: 0; opacity: 0;
@ -188,12 +193,16 @@
// Safari will blink with transform when inner element has absolute style. // Safari will blink with transform when inner element has absolute style.
.safari-fix-motion() { .safari-fix-motion() {
/* stylelint-disable property-no-vendor-prefix */
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
/* stylelint-enable property-no-vendor-prefix */
} }
.@{number-prefix-cls} { .@{number-prefix-cls} {
overflow: hidden; overflow: hidden;
direction: ltr;
&-only { &-only {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -218,6 +227,7 @@
transform: scale(0) translate(50%, -50%); transform: scale(0) translate(50%, -50%);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1) translate(50%, -50%); transform: scale(1) translate(50%, -50%);
} }
@ -227,6 +237,7 @@
0% { 0% {
transform: scale(1) translate(50%, -50%); transform: scale(1) translate(50%, -50%);
} }
100% { 100% {
transform: scale(0) translate(50%, -50%); transform: scale(0) translate(50%, -50%);
opacity: 0; opacity: 0;
@ -238,6 +249,7 @@
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
@ -247,6 +259,7 @@
0% { 0% {
transform: scale(1); transform: scale(1);
} }
100% { 100% {
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;

10
components/badge/style/patch.less
View File

@ -9,4 +9,14 @@
font-size: @badge-font-size; font-size: @badge-font-size;
} }
} }
.ant-scroll-number:only-child {
position: relative;
top: auto;
display: block;
}
.ant-badge-count:only-child {
transform: none;
}
} }

6
components/badge/style/ribbon.less
View File

@ -30,7 +30,7 @@
top: 100%; top: 100%;
width: 8px; width: 8px;
height: 8px; height: 8px;
color: currentColor; color: currentcolor;
border: 4px solid; border: 4px solid;
transform: scaleY(0.75); transform: scaleY(0.75);
transform-origin: top; transform-origin: top;
@ -66,7 +66,7 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
.@{ribbon-prefix-cls}-corner { .@{ribbon-prefix-cls}-corner {
right: 0; right: 0;
border-color: currentColor transparent transparent currentColor; border-color: currentcolor transparent transparent currentcolor;
} }
} }
@ -75,7 +75,7 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
.@{ribbon-prefix-cls}-corner { .@{ribbon-prefix-cls}-corner {
left: 0; left: 0;
border-color: currentColor currentColor transparent transparent; border-color: currentcolor currentcolor transparent transparent;
} }
} }
} }

38
components/badge/style/rtl.less
View File

@ -3,10 +3,10 @@
direction: rtl; direction: rtl;
} }
&-count, &:not(&-not-a-wrapper) &-count,
&-dot, &:not(&-not-a-wrapper) &-dot,
.@{number-prefix-cls}-custom-component { &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
.@{badge-prefix-cls}-rtl & { .@{badge-prefix-cls}-rtl& {
right: auto; right: auto;
left: 0; left: 0;
direction: ltr; 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; right: auto;
left: 0; left: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -31,24 +31,16 @@
} }
} }
&-zoom-appear, &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
&-zoom-enter { .@{badge-prefix-cls}-zoom-appear,
.@{badge-prefix-cls}-rtl & { .@{badge-prefix-cls}-zoom-enter {
animation-name: antZoomBadgeInRtl; animation-name: antZoomBadgeInRtl;
} }
}
&-zoom-leave { .@{badge-prefix-cls}-zoom-leave {
.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeOutRtl; animation-name: antZoomBadgeOutRtl;
} }
} }
&-not-a-wrapper {
.@{badge-prefix-cls}-count {
transform: none;
}
}
} }
.@{ribbon-prefix-cls}-rtl { .@{ribbon-prefix-cls}-rtl {
@ -61,9 +53,10 @@
.@{ribbon-prefix-cls}-corner { .@{ribbon-prefix-cls}-corner {
right: unset; right: unset;
left: 0; left: 0;
border-color: currentColor currentColor transparent transparent; border-color: currentcolor currentcolor transparent transparent;
&::after { &::after {
border-color: currentColor currentColor transparent transparent; border-color: currentcolor currentcolor transparent transparent;
} }
} }
} }
@ -75,9 +68,10 @@
.@{ribbon-prefix-cls}-corner { .@{ribbon-prefix-cls}-corner {
right: 0; right: 0;
left: unset; left: unset;
border-color: currentColor transparent transparent currentColor; border-color: currentcolor transparent transparent currentcolor;
&::after { &::after {
border-color: currentColor transparent transparent currentColor; border-color: currentcolor transparent transparent currentcolor;
} }
} }
} }
@ -88,6 +82,7 @@
transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%);
} }
@ -97,6 +92,7 @@
0% { 0% {
transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%);
} }
100% { 100% {
transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%);
opacity: 0; opacity: 0;

2
components/breadcrumb/BreadcrumbItem.razor
View File

@ -5,7 +5,7 @@
@if (Overlay != null) @if (Overlay != null)
{ {
<Dropdown Placement="@Placement.BottomCenter"> <Dropdown Placement="@Placement.Bottom">
<Unbound> <Unbound>
<span @ref="context.Current" class="ant-breadcrumb-overlay-link"> <span @ref="context.Current" class="ant-breadcrumb-overlay-link">
<span class="ant-breadcrumb-link"> <span class="ant-breadcrumb-link">

14
components/breadcrumb/style/index.less
View File

@ -13,22 +13,32 @@
font-size: @breadcrumb-icon-font-size; font-size: @breadcrumb-icon-font-size;
} }
ol {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
a { a {
color: @breadcrumb-link-color; color: @breadcrumb-link-color;
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
color: @breadcrumb-link-color-hover; color: @breadcrumb-link-color-hover;
} }
} }
& > span:last-child { li:last-child {
color: @breadcrumb-last-item-color; color: @breadcrumb-last-item-color;
a { a {
color: @breadcrumb-last-item-color; color: @breadcrumb-last-item-color;
} }
} }
& > span:last-child &-separator { li:last-child &-separator {
display: none; display: none;
} }

22
components/breadcrumb/style/patch.less
View File

@ -1,15 +1,29 @@
.@{breadcrumb-prefix-cls} { .@{breadcrumb-prefix-cls} {
&-link { &-link {
.@{iconfont-css-prefix} + span { .@{iconfont-css-prefix} + span {
margin-left: 4px; margin-left: 4px;
} }
} }
// We introduced an extra layer.
.ant-blazor-breadcrumb-item:last-child { .ant-blazor-breadcrumb-item:last-child {
color: rgba(0, 0, 0, 0.65); color: @breadcrumb-last-item-color;
a {
color: @breadcrumb-last-item-color;
}
} }
.ant-blazor-breadcrumb-item:last-child .ant-breadcrumb-separator { .ant-blazor-breadcrumb-item:last-child .@{breadcrumb-prefix-cls}-separator {
display: none; display: none;
} }
&-rtl {
> .ant-blazor-breadcrumb-item {
float: right;
}
}
}
.ant-blazor-breadcrum {
display: block;
} }

48
components/button/style/index.less
View File

@ -18,7 +18,7 @@
// Fixing https://github.com/ant-design/ant-design/issues/18107 // Fixing https://github.com/ant-design/ant-design/issues/18107
// Fixing https://github.com/ant-design/ant-design/issues/13214 // 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 // 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; line-height: @btn-line-height;
.btn(); .btn();
.btn-default(); .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 { &-round {
.btn-round(@btn-prefix-cls); .btn-round(@btn-prefix-cls);
&.@{btn-prefix-cls}-icon-only { &.@{btn-prefix-cls}-icon-only {
@ -144,16 +153,14 @@
&.@{iconfont-css-prefix}-plus, &.@{iconfont-css-prefix}-plus,
&.@{iconfont-css-prefix}-minus { &.@{iconfont-css-prefix}-minus {
> svg { > svg {
shape-rendering: optimizeSpeed; shape-rendering: optimizespeed;
} }
} }
} }
&&-loading { &&-loading {
position: relative; position: relative;
&:not([disabled]) { cursor: default;
pointer-events: none;
}
&::before { &::before {
display: block; display: block;
@ -161,7 +168,7 @@
} }
& > &-loading-icon { & > &-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} { .@{iconfont-css-prefix} {
padding-right: @padding-xs; padding-right: @padding-xs;
@ -198,28 +205,46 @@
&&-background-ghost { &&-background-ghost {
color: @btn-default-ghost-color; color: @btn-default-ghost-color;
border-color: @btn-default-ghost-border; border-color: @btn-default-ghost-border;
&, &,
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: @btn-default-ghost-bg; 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 { &-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 { &-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 { &-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 { &-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 { &-two-chinese-chars::first-letter {
@ -231,7 +256,7 @@
letter-spacing: 0.34em; letter-spacing: 0.34em;
} }
&-block { &&-block {
width: 100%; width: 100%;
} }
@ -256,6 +281,7 @@ a.@{btn-prefix-cls} {
&-lg { &-lg {
line-height: @btn-height-lg - 2px; line-height: @btn-height-lg - 2px;
} }
&-sm { &-sm {
line-height: @btn-height-sm - 2px; line-height: @btn-height-sm - 2px;
} }

173
components/button/style/mixin.less
View File

@ -11,6 +11,28 @@
border-radius: @border-radius; 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) { .button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
&[disabled] { &[disabled] {
&, &,
@ -25,7 +47,7 @@
} }
} }
.button-variant-primary(@color; @background) { .button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) {
.button-color(@color; @background; @background); .button-color(@color; @background; @background);
text-shadow: @btn-text-shadow; text-shadow: @btn-text-shadow;
@ -38,11 +60,14 @@
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
); );
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
); );
} }
& when (@theme = variable) {
.button-color(@color; @backgroundHover; @backgroundHover);
}
} }
&:active { &:active {
@ -51,11 +76,14 @@
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
); );
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
); );
} }
& when (@theme = variable) {
.button-color(@color; @backgroundActive; @backgroundActive);
}
} }
.button-disabled(); .button-disabled();
@ -69,38 +97,50 @@
& when (@theme = dark) { & when (@theme = dark) {
.button-color(@primary-5; @background; @primary-5); .button-color(@primary-5; @background; @primary-5);
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5) `; @background;
~`colorPalette('@{btn-primary-bg}', 5) ` ~`colorPalette('@{btn-primary-bg}', 5) `
); );
} }
& when (@theme = variable) {
.button-color(@primary-color-hover; @background; @primary-color-hover);
} }
}
&:active { &:active {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(@primary-7; @background; @primary-7); .button-color(@primary-7; @background; @primary-7);
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7) `; @background;
~`colorPalette('@{btn-primary-bg}', 7) ` ~`colorPalette('@{btn-primary-bg}', 7) `
); );
} }
& when (@theme = variable) {
.button-color(@primary-color-active; @background; @primary-color-active);
}
} }
.button-disabled(); .button-disabled();
} }
.button-variant-ghost(@color; @border: @color) {
.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
.button-color(@color; null; @border); .button-color(@color; null; @border);
text-shadow: none; text-shadow: none;
&:hover, &:hover,
&:focus { &:focus {
& when (@border = transparent) { & when (@border = transparent) {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(~`colorPalette('@{color}', 7) `; null; transparent); .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); .button-color(~`colorPalette('@{color}', 5) `; null; transparent);
} }
& when (@theme = variable) {
.button-color(@borderActive; transparent; transparent);
}
} }
& when not (@border = transparent) { & when not (@border = transparent) {
& when (@theme = dark) { & when (@theme = dark) {
@ -108,21 +148,28 @@
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) ` ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
); );
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) ` ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
); );
} }
& when (@theme = variable) {
.button-color(@borderHover; transparent; @borderHover);
} }
} }
}
&:active { &:active {
& when (@border = transparent) { & when (@border = transparent) {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(~`colorPalette('@{color}', 5) `; null; transparent); .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); .button-color(~`colorPalette('@{color}', 7) `; null; transparent);
} }
& when (@theme = variable) {
.button-color(@borderActive; transparent; transparent);
}
} }
& when not (@border = transparent) { & when not (@border = transparent) {
& when (@theme = dark) { & when (@theme = dark) {
@ -130,46 +177,32 @@
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) ` ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
); );
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) ` ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
); );
} }
& when (@theme = variable) {
.button-color(@borderActive; transparent; @borderActive);
}
} }
} }
.button-disabled(); .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) { .button-group-base(@btnClassName) {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
> .@{btnClassName}, > .@{btnClassName},
> span > .@{btnClassName} { > span > .@{btnClassName} {
position: relative; position: relative;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
z-index: 2; z-index: 2;
} }
&[disabled] { &[disabled] {
z-index: 0; z-index: 0;
} }
@ -177,28 +210,6 @@
.@{btnClassName}-icon-only { .@{btnClassName}-icon-only {
font-size: @font-size-base; 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 // Base styles of buttons
// -------------------------------------------------- // --------------------------------------------------
@ -221,29 +232,36 @@
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
line-height: 1; line-height: 1;
} }
&, &,
&:active, &:active,
&:focus { &:focus {
outline: 0; outline: 0;
} }
&:not([disabled]):hover { &:not([disabled]):hover {
text-decoration: none; text-decoration: none;
} }
&:not([disabled]):active { &:not([disabled]):active {
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
} }
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
> * { > * {
pointer-events: none; pointer-events: none;
} }
} }
&-lg { &-lg {
.button-size( .button-size(
@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
); );
} }
&-sm { &-sm {
.button-size( .button-size(
@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
@ -252,11 +270,12 @@
} }
// primary button style // primary button style
.btn-primary() { .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 // default button style
.btn-default() { .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, &:hover,
&:focus, &:focus,
&:active { &:active {
@ -275,11 +294,12 @@
} }
// danger button style // danger button style
.btn-danger() { .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 // danger default button style
.btn-danger-default() { .btn-danger-default() {
.button-color(@error-color, @btn-default-bg, @error-color); .button-color(@error-color, @btn-default-bg, @error-color);
&:hover, &:hover,
&:focus { &:focus {
& when (@theme = dark) { & when (@theme = dark) {
@ -288,13 +308,17 @@
` `
); );
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5) ~`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 { &:active {
& when (@theme = dark) { & when (@theme = dark) {
.button-color( .button-color(
@ -302,12 +326,15 @@
` `
); );
} }
& when not (@theme = dark) { & when (not (@theme = dark) and not (@theme = variable)) {
.button-color( .button-color(
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7) ~`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(); .button-disabled();
} }
@ -315,22 +342,30 @@
.btn-danger-link() { .btn-danger-link() {
.button-variant-other(@error-color, transparent, transparent); .button-variant-other(@error-color, transparent, transparent);
box-shadow: none; box-shadow: none;
&:hover, &:hover,
&:focus { &:focus {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent); .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); .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
} }
& when (@theme = variable) {
.button-color(@error-color-hover; transparent; transparent);
} }
}
&:active { &:active {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent); .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); .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
} }
& when (@theme = variable) {
.button-color(@error-color-active; transparent; transparent);
}
} }
.button-disabled(@disabled-color; transparent; transparent); .button-disabled(@disabled-color; transparent; transparent);
} }
@ -338,9 +373,11 @@
.btn-link() { .btn-link() {
.button-variant-other(@link-color, transparent, transparent); .button-variant-other(@link-color, transparent, transparent);
box-shadow: none; box-shadow: none;
&:hover { &:hover {
background: @btn-link-hover-bg; background: @btn-link-hover-bg;
} }
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
@ -352,6 +389,7 @@
.btn-text() { .btn-text() {
.button-variant-other(@text-color, transparent, transparent); .button-variant-other(@text-color, transparent, transparent);
box-shadow: none; box-shadow: none;
&:hover, &:hover,
&:focus { &:focus {
color: @text-color; color: @text-color;
@ -370,23 +408,30 @@
.btn-danger-text() { .btn-danger-text() {
.button-variant-other(@error-color, transparent, transparent); .button-variant-other(@error-color, transparent, transparent);
box-shadow: none; box-shadow: none;
&:hover, &:hover,
&:focus { &:focus {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent); .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); .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 { &:active {
& when (@theme = dark) { & when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent); .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); .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); .button-disabled(@disabled-color; transparent; transparent);
} }
@ -408,12 +453,14 @@
.btn-square(@btnClassName: btn) { .btn-square(@btnClassName: btn) {
.square(@btn-square-size); .square(@btn-square-size);
.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base); .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
& > * { & > * {
font-size: @btn-square-only-icon-size; font-size: @btn-square-only-icon-size;
} }
&.@{btnClassName}-lg { &.@{btnClassName}-lg {
.square(@btn-square-size-lg); .square(@btn-square-size-lg);
.button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base); .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
& > * { & > * {
font-size: @btn-square-only-icon-size-lg; font-size: @btn-square-only-icon-size-lg;
} }
@ -421,6 +468,7 @@
&.@{btnClassName}-sm { &.@{btnClassName}-sm {
.square(@btn-square-size-sm); .square(@btn-square-size-sm);
.button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base); .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
& > * { & > * {
font-size: @btn-square-only-icon-size-sm; font-size: @btn-square-only-icon-size-sm;
} }
@ -481,6 +529,7 @@
border-top-right-radius: @btn-border-radius-base; border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base; border-bottom-right-radius: @btn-border-radius-base;
} }
&-sm { &-sm {
> .@{btnClassName}:only-child { > .@{btnClassName}:only-child {
border-radius: @btn-border-radius-sm; border-radius: @btn-border-radius-sm;
@ -499,12 +548,14 @@
border-bottom-right-radius: @btn-border-radius-sm; border-bottom-right-radius: @btn-border-radius-sm;
} }
} }
& > & { & > & {
float: left; float: left;
} }
& > &:not(:first-child):not(:last-child) > .@{btnClassName} { & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
border-radius: 0; border-radius: 0;
} }
& > &:first-child:not(:last-child) { & > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child { > .@{btnClassName}:last-child {
padding-right: 8px; padding-right: 8px;

21
components/button/style/rtl.less
View File

@ -10,6 +10,7 @@
border-right-color: @btn-group-border; border-right-color: @btn-group-border;
border-left-color: @btn-default-border; border-left-color: @btn-default-border;
} }
&[disabled] { &[disabled] {
.@{btn-prefix-cls}-group-rtl& { .@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-default-border; border-right-color: @btn-default-border;
@ -67,20 +68,14 @@
> .@{btnClassName}:first-child:not(:last-child), > .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} { > span:first-child:not(:last-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& { .@{btnClassName}-group-rtl& {
border-top-left-radius: 0; border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
border-bottom-left-radius: 0;
} }
} }
> .@{btnClassName}:last-child:not(:first-child), > .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} { > span:last-child:not(:first-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& { .@{btnClassName}-group-rtl& {
border-top-left-radius: @btn-border-radius-base; border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @btn-border-radius-base;
} }
} }
@ -88,20 +83,14 @@
> .@{btnClassName}:first-child:not(:last-child), > .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} { > span:first-child:not(:last-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& { .@{btnClassName}-group-rtl& {
border-top-left-radius: 0; border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0;
border-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
border-bottom-left-radius: 0;
} }
} }
> .@{btnClassName}:last-child:not(:first-child), > .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} { > span:last-child:not(:first-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& { .@{btnClassName}-group-rtl& {
border-top-left-radius: @btn-border-radius-sm; border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @btn-border-radius-sm;
} }
} }
} }

3
components/calendar/style/entry.less
View File

@ -1 +1,4 @@
@import './index.less'; @import './index.less';
// style dependencies
@import '../../select/style/entry.less';
@import '../../radio/style/entry.less';

4
components/calendar/style/index.less
View File

@ -70,6 +70,10 @@
line-height: 18px; line-height: 18px;
} }
} }
.@{calendar-picker-prefix-cls}-cell::before {
pointer-events: none;
}
} }
// ========================== Full ========================== // ========================== Full ==========================

4
components/card/style/entry.less
View File

@ -1 +1,5 @@
@import './index.less'; @import './index.less';
// style dependencies
@import '../../tabs/style/entry.less';
@import '../../grid/style/entry.less';
@import './patch.less';

4
components/card/style/index.less
View File

@ -66,7 +66,7 @@
} }
} }
.@{ant-prefix}-tabs { .@{ant-prefix}-tabs-top {
clear: both; clear: both;
margin-bottom: @card-head-tabs-margin-bottom; margin-bottom: @card-head-tabs-margin-bottom;
color: @text-color; color: @text-color;
@ -250,6 +250,7 @@
&-detail { &-detail {
overflow: hidden; overflow: hidden;
> div:not(:last-child) { > div:not(:last-child) {
margin-bottom: @margin-xs; margin-bottom: @margin-xs;
} }
@ -298,6 +299,7 @@
100% { 100% {
background-position: 0 50%; background-position: 0 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }

8
components/card/style/patch.less Normal file
View File

@ -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;
}
}
}

1
components/carousel/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import './patch';

17
components/carousel/style/index.less
View File

@ -10,7 +10,6 @@
position: relative; position: relative;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
-ms-touch-action: pan-y;
touch-action: pan-y; touch-action: pan-y;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -116,6 +115,7 @@
display: block; display: block;
height: auto; height: auto;
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;
} }
@ -137,15 +137,18 @@
border: 0; border: 0;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
&:hover, &:hover,
&:focus { &:focus {
color: transparent; color: transparent;
background: transparent; background: transparent;
outline: none; outline: none;
&::before { &::before {
opacity: 1; opacity: 1;
} }
} }
&.slick-disabled::before { &.slick-disabled::before {
opacity: 0.25; opacity: 0.25;
} }
@ -161,6 +164,7 @@
.slick-next { .slick-next {
right: -25px; right: -25px;
&::before { &::before {
content: '→'; content: '→';
} }
@ -183,10 +187,12 @@
&-bottom { &-bottom {
bottom: 12px; bottom: 12px;
} }
&-top { &-top {
top: 12px; top: 12px;
bottom: auto; bottom: auto;
} }
li { li {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -202,6 +208,7 @@
text-indent: -999px; text-indent: -999px;
vertical-align: top; vertical-align: top;
transition: all 0.5s; transition: all 0.5s;
button { button {
display: block; display: block;
width: 100%; width: 100%;
@ -216,17 +223,21 @@
cursor: pointer; cursor: pointer;
opacity: 0.3; opacity: 0.3;
transition: all 0.5s; transition: all 0.5s;
&:hover, &:hover,
&:focus { &:focus {
opacity: 0.75; opacity: 0.75;
} }
} }
&.slick-active { &.slick-active {
width: @carousel-dot-active-width; width: @carousel-dot-active-width;
& button { & button {
background: @component-background; background: @component-background;
opacity: 1; opacity: 1;
} }
&:hover, &:hover,
&:focus { &:focus {
opacity: 1; opacity: 1;
@ -250,19 +261,23 @@
right: auto; right: auto;
left: 12px; left: 12px;
} }
&-right { &-right {
right: 12px; right: 12px;
left: auto; left: auto;
} }
li { li {
width: @carousel-dot-height; width: @carousel-dot-height;
height: @carousel-dot-width; height: @carousel-dot-width;
margin: 4px 2px; margin: 4px 2px;
vertical-align: baseline; vertical-align: baseline;
button { button {
width: @carousel-dot-height; width: @carousel-dot-height;
height: @carousel-dot-width; height: @carousel-dot-width;
} }
&.slick-active { &.slick-active {
width: @carousel-dot-height; width: @carousel-dot-height;
height: @carousel-dot-active-width; height: @carousel-dot-active-width;

11
components/carousel/style/patch.less Normal file
View File

@ -0,0 +1,11 @@
.slick-dots {
display: block;
}
.slick-track {
opacity: 1;
}
.slick-list {
direction: ltr;
}

2
components/carousel/style/rtl.less
View File

@ -19,6 +19,7 @@
.@{carousel-prefix-cls}-rtl & { .@{carousel-prefix-cls}-rtl & {
right: -25px; right: -25px;
left: auto; left: auto;
&::before { &::before {
content: '→'; content: '→';
} }
@ -29,6 +30,7 @@
.@{carousel-prefix-cls}-rtl & { .@{carousel-prefix-cls}-rtl & {
right: auto; right: auto;
left: -25px; left: -25px;
&::before { &::before {
content: '←'; content: '←';
} }

4
components/cascader/style/entry.less
View File

@ -1 +1,5 @@
@import './index.less'; @import './index.less';
@import './patch.less';
// style dependencies
@import '../../empty/style/entry.less';
@import '../../input/style/entry.less';

203
components/cascader/style/index.less
View File

@ -1,172 +1,39 @@
@import '../../style/themes/index'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@import '../../input/style/mixin'; @import '../../input/style/mixin';
@import '../../checkbox/style/mixin';
@cascader-prefix-cls: ~'@{ant-prefix}-cascader'; @cascader-prefix-cls: ~'@{ant-prefix}-cascader';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox');
.@{cascader-prefix-cls} { .@{cascader-prefix-cls} {
.reset-component(); width: 184px;
&-input.@{ant-prefix}-input { &-checkbox {
// Keep it static for https://github.com/ant-design/ant-design/issues/16738 top: 0;
position: static; margin-right: @padding-xs;
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;
} }
&-menus { &-menus {
position: absolute; display: flex;
z-index: @zindex-dropdown; flex-wrap: nowrap;
font-size: @cascader-dropdown-font-size; align-items: flex-start;
white-space: nowrap;
background: @cascader-menu-bg;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
ul, &.@{cascader-prefix-cls}-menu-empty {
ol { .@{cascader-prefix-cls}-menu {
margin: 0; width: 100%;
list-style: none; height: auto;
}
}
} }
&-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;
}
}
&-menu { &-menu {
display: inline-block; flex-grow: 1;
min-width: 111px; min-width: 111px;
height: 180px; height: 180px;
margin: 0; margin: 0;
margin: -@dropdown-edge-child-vertical-padding 0;
padding: @cascader-dropdown-edge-child-vertical-padding 0; padding: @cascader-dropdown-edge-child-vertical-padding 0;
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
@ -174,19 +41,10 @@
border-right: @border-width-base @border-style-base @cascader-menu-border-color-split; 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 -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
&:first-child { &-item {
border-radius: @border-radius-base 0 0 @border-radius-base; display: flex;
} flex-wrap: nowrap;
&:last-child { align-items: center;
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; padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
overflow: hidden; overflow: hidden;
line-height: @cascader-dropdown-line-height; line-height: @cascader-dropdown-line-height;
@ -194,21 +52,26 @@
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
background: @item-hover-bg; background: @item-hover-bg;
} }
&-disabled { &-disabled {
color: @disabled-color; color: @disabled-color;
cursor: not-allowed; cursor: not-allowed;
&:hover { &:hover {
background: transparent; background: transparent;
} }
} }
.@{cascader-prefix-cls}-menu-empty & { .@{cascader-prefix-cls}-menu-empty & {
color: @disabled-color; color: @disabled-color;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
&-active:not(&-disabled) { &-active:not(&-disabled) {
&, &,
&:hover { &:hover {
@ -216,15 +79,14 @@
background-color: @cascader-item-selected-bg; background-color: @cascader-item-selected-bg;
} }
} }
&-expand {
position: relative; &-content {
padding-right: 24px; flex: auto;
} }
&-expand &-expand-icon, &-expand &-expand-icon,
&-loading-icon { &-loading-icon {
position: absolute; margin-left: @padding-xss;
right: @control-padding-horizontal;
color: @text-color-secondary; color: @text-color-secondary;
font-size: 10px; font-size: 10px;
@ -233,10 +95,11 @@
} }
} }
& &-keyword { &-keyword {
color: @highlight-color; color: @highlight-color;
} }
} }
}
} }
@import './rtl'; @import './rtl';

5
components/cascader/style/patch.less Normal file
View File

@ -0,0 +1,5 @@
.ant-cascader-menus {
position: relative;
margin-top: 2px;
margin-bottom: 2px;
}

98
components/cascader/style/rtl.less
View File

@ -1,95 +1,19 @@
@import '../../style/themes/index'; // We can not import reference of `./index` directly since it will make dead loop in less
@import '../../style/mixins/index'; @import (reference) '../../style/themes/index';
@import '../../input/style/mixin';
@cascader-prefix-cls: ~'@{ant-prefix}-cascader'; @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} { .@{cascader-prefix-cls}-rtl {
&-input.@{ant-prefix}-input { .@{cascader-prefix-cls}-menu-item {
.@{picker-rtl-cls} & { &-expand-icon,
padding-right: @input-padding-horizontal-base; &-loading-icon {
padding-left: 24px; margin-right: @padding-xss;
text-align: right; margin-left: 0;
} }
} }
&-picker { .@{cascader-prefix-cls}-checkbox {
&-rtl { top: 0;
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-right: 0;
margin-left: -1px; margin-left: @padding-xs;
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,
&-loading-icon {
.@{menu-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
&-loading-icon {
.@{menu-rtl-cls} & {
transform: scaleY(-1);
}
}
} }
} }

1
components/checkbox/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import './patch.less';

1
components/checkbox/style/index.less
View File

@ -2,4 +2,5 @@
@import './mixin'; @import './mixin';
.antCheckboxFn(); .antCheckboxFn();
@import './rtl'; @import './rtl';

14
components/checkbox/style/mixin.less
View File

@ -48,7 +48,7 @@
direction: ltr; direction: ltr;
background-color: @checkbox-check-bg; background-color: @checkbox-check-bg;
border: @checkbox-border-width @border-style-base @border-color-base; border: @checkbox-border-width @border-style-base @border-color-base;
border-radius: @border-radius-base; border-radius: @checkbox-border-radius;
// Fix IE checked style // Fix IE checked style
// https://github.com/ant-design/ant-design/issues/12597 // https://github.com/ant-design/ant-design/issues/12597
border-collapse: separate; border-collapse: separate;
@ -122,11 +122,13 @@
.@{checkbox-prefix-cls}-input { .@{checkbox-prefix-cls}-input {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none;
} }
.@{checkbox-inner-prefix-cls} { .@{checkbox-inner-prefix-cls} {
background-color: @input-disabled-bg; background-color: @input-disabled-bg;
border-color: @border-color-base !important; border-color: @border-color-base !important;
&::after { &::after {
border-color: @input-disabled-bg; border-color: @input-disabled-bg;
border-collapse: separate; border-collapse: separate;
@ -167,6 +169,13 @@
& + & { & + & {
margin-left: 8px; margin-left: 8px;
} }
&&-in-form-item {
input[type='checkbox'] {
width: 14px;
height: 14px;
}
}
} }
.@{checkbox-prefix-cls} + span { .@{checkbox-prefix-cls} + span {
@ -180,10 +189,12 @@
&-item { &-item {
margin-right: @checkbox-group-item-margin-right; margin-right: @checkbox-group-item-margin-right;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
&-item + &-item { &-item + &-item {
margin-left: 0; margin-left: 0;
} }
@ -222,6 +233,7 @@
transform: scale(1); transform: scale(1);
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
transform: scale(1.6); transform: scale(1.6);
opacity: 0; opacity: 0;

5
components/checkbox/style/patch.less Normal file
View File

@ -0,0 +1,5 @@
.ant-checkbox + span {
&:empty {
display: none;
}
}

2
components/checkbox/style/rtl.less
View File

@ -11,12 +11,14 @@
margin-right: 0; margin-right: 0;
margin-left: @checkbox-group-item-margin-right; margin-left: @checkbox-group-item-margin-right;
} }
&:last-child { &:last-child {
.@{checkbox-prefix-cls}-group-rtl & { .@{checkbox-prefix-cls}-group-rtl & {
margin-left: 0 !important; margin-left: 0 !important;
} }
} }
} }
&-item + &-item { &-item + &-item {
.@{checkbox-prefix-cls}-group-rtl & { .@{checkbox-prefix-cls}-group-rtl & {
margin-left: @checkbox-group-item-margin-right; margin-left: @checkbox-group-item-margin-right;

1
components/collapse/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import './patch.less';

18
components/collapse/style/index.less
View File

@ -22,17 +22,19 @@
} }
> .@{collapse-prefix-cls}-header { > .@{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; padding: @collapse-header-padding;
color: @heading-color; color: @heading-color;
line-height: @line-height-base; line-height: @line-height-base;
cursor: pointer; cursor: pointer;
transition: all 0.3s, visibility 0s; transition: all 0.3s, visibility 0s;
.clearfix();
.@{collapse-prefix-cls}-arrow { .@{collapse-prefix-cls}-arrow {
display: inline-block; display: inline-block;
margin-right: 12px; margin-right: @margin-sm;
font-size: @font-size-sm; font-size: @font-size-sm;
vertical-align: -1px; vertical-align: -1px;
@ -42,7 +44,7 @@
} }
.@{collapse-prefix-cls}-extra { .@{collapse-prefix-cls}-extra {
float: right; margin-left: auto;
} }
&:focus { &:focus {
@ -59,7 +61,7 @@
&.@{collapse-prefix-cls}-no-arrow { &.@{collapse-prefix-cls}-no-arrow {
> .@{collapse-prefix-cls}-header { > .@{collapse-prefix-cls}-header {
padding-left: 12px; padding-left: @padding-sm;
} }
} }
} }
@ -68,6 +70,7 @@
&-icon-position-right { &-icon-position-right {
& > .@{collapse-prefix-cls}-item { & > .@{collapse-prefix-cls}-item {
> .@{collapse-prefix-cls}-header { > .@{collapse-prefix-cls}-header {
position: relative;
padding: @collapse-header-padding; padding: @collapse-header-padding;
padding-right: @collapse-header-padding-extra; padding-right: @collapse-header-padding-extra;
@ -117,6 +120,11 @@
border-radius: 0; border-radius: 0;
} }
// hide the last border-bottom in borderless mode
&-borderless > &-item:last-child {
border-bottom: 0;
}
&-borderless > &-item > &-content { &-borderless > &-item > &-content {
background-color: transparent; background-color: transparent;
border-top: 0; border-top: 0;

0
components/collapse/style/patch.less Normal file
View File

10
components/collapse/style/rtl.less
View File

@ -16,6 +16,11 @@
} }
.@{collapse-prefix-cls}-arrow { .@{collapse-prefix-cls}-arrow {
.@{collapse-prefix-cls}-rtl& {
margin-right: 0;
margin-left: @margin-sm;
}
& svg { & svg {
.@{collapse-prefix-cls}-rtl& { .@{collapse-prefix-cls}-rtl& {
transform: rotate(180deg); transform: rotate(180deg);
@ -25,7 +30,8 @@
.@{collapse-prefix-cls}-extra { .@{collapse-prefix-cls}-extra {
.@{collapse-prefix-cls}-rtl& { .@{collapse-prefix-cls}-rtl& {
float: left; margin-right: auto;
margin-left: 0;
} }
} }
} }
@ -33,7 +39,7 @@
&.@{collapse-prefix-cls}-no-arrow { &.@{collapse-prefix-cls}-no-arrow {
> .@{collapse-prefix-cls}-header { > .@{collapse-prefix-cls}-header {
.@{collapse-prefix-cls}-rtl& { .@{collapse-prefix-cls}-rtl& {
padding-right: 12px; padding-right: @padding-sm;
padding-left: 0; padding-left: 0;
} }
} }

1
components/comment/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import "./patch";

4
components/comment/style/index.less
View File

@ -38,6 +38,7 @@
justify-content: flex-start; justify-content: flex-start;
margin-bottom: @margin-xss; margin-bottom: @margin-xss;
font-size: @comment-font-size-base; font-size: @comment-font-size-base;
& > a, & > a,
& > span { & > span {
padding-right: @padding-xs; padding-right: @padding-xs;
@ -49,8 +50,10 @@
color: @comment-author-name-color; color: @comment-author-name-color;
font-size: @comment-font-size-base; font-size: @comment-font-size-base;
transition: color 0.3s; transition: color 0.3s;
> * { > * {
color: @comment-author-name-color; color: @comment-author-name-color;
&:hover { &:hover {
color: @comment-author-name-color; color: @comment-author-name-color;
} }
@ -78,6 +81,7 @@
> li { > li {
display: inline-block; display: inline-block;
color: @comment-action-color; color: @comment-action-color;
> span { > span {
margin-right: 10px; margin-right: 10px;
color: @comment-action-color; color: @comment-action-color;

0
components/comment/style/patch.less Normal file
View File

1
components/comment/style/rtl.less
View File

@ -31,6 +31,7 @@
.@{comment-prefix-cls}-rtl & { .@{comment-prefix-cls}-rtl & {
padding-right: 0; padding-right: 0;
} }
> li { > li {
> span { > span {
.@{comment-prefix-cls}-rtl & { .@{comment-prefix-cls}-rtl & {

5
components/components.less
View File

@ -19,7 +19,6 @@
@import "./dropdown/style/entry.less"; @import "./dropdown/style/entry.less";
@import "./empty/style/entry.less"; @import "./empty/style/entry.less";
@import "./grid/style/entry.less"; @import "./grid/style/entry.less";
@import "./image/style/entry.less";
@import "./input/style/entry.less"; @import "./input/style/entry.less";
@import "./input-number/style/entry.less"; @import "./input-number/style/entry.less";
@import "./layout/style/entry.less"; @import "./layout/style/entry.less";
@ -38,9 +37,9 @@
@import "./radio/style/entry.less"; @import "./radio/style/entry.less";
@import "./rate/style/entry.less"; @import "./rate/style/entry.less";
@import "./select/style/entry.less"; @import "./select/style/entry.less";
@import "./segmented/style/index.less";
@import "./skeleton/style/entry.less"; @import "./skeleton/style/entry.less";
@import "./slider/style/entry.less"; @import "./slider/style/entry.less";
@import "./space/style/entry.less";
@import "./spin/style/entry.less"; @import "./spin/style/entry.less";
@import "./statistic/style/entry.less"; @import "./statistic/style/entry.less";
@import "./steps/style/entry.less"; @import "./steps/style/entry.less";
@ -60,3 +59,5 @@
@import "./tree-select/style/entry.less"; @import "./tree-select/style/entry.less";
@import "./calendar/style/entry.less"; @import "./calendar/style/entry.less";
@import "./result/style/entry.less"; @import "./result/style/entry.less";
@import "./space/style/entry.less";
@import "./image/style/entry.less";

28
components/core/Component/Overlay/type/PlacementType.cs
View File

@ -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 public enum Placement
{ {
TopLeft, TopLeft,
[Obsolete("Please use 'Placement.Top' instead.")]
TopCenter, TopCenter,
Top, Top = 2,
TopRight, TopRight,
Left, Left,
LeftTop, LeftTop,
@ -13,15 +20,15 @@
RightTop, RightTop,
RightBottom, RightBottom,
BottomLeft, BottomLeft,
[Obsolete("Please use 'Placement.Bottom' instead.")]
BottomCenter, BottomCenter,
Bottom, Bottom = 12,
BottomRight BottomRight
} }
public sealed class PlacementType : EnumValue<PlacementType> internal sealed class PlacementType : EnumValue<PlacementType>
{ {
public static readonly PlacementType TopLeft = new PlacementType("topLeft", "down", "33% 100%", 0, Placement.TopLeft); 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 Top = new PlacementType("top", "down", "50% 100%", 1, Placement.Top);
public static readonly PlacementType TopRight = new PlacementType("topRight", "down", "66% 100%", 2, Placement.TopRight); 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 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 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 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 readonly PlacementType BottomRight = new PlacementType("bottomRight", "up", "66% 0", 11, Placement.BottomRight);
public static PlacementType Create(Placement placement) => placement switch public static PlacementType Create(Placement placement) => placement switch
{ {
Placement.TopLeft => PlacementType.TopLeft, Placement.TopLeft => PlacementType.TopLeft,
Placement.TopCenter => PlacementType.TopCenter, Placement.TopCenter => PlacementType.Top,
Placement.Top => PlacementType.Top, Placement.Top => PlacementType.Top,
Placement.TopRight => PlacementType.TopRight, Placement.TopRight => PlacementType.TopRight,
Placement.Left => PlacementType.Left, Placement.Left => PlacementType.Left,
@ -51,7 +57,7 @@
Placement.RightTop => PlacementType.RightTop, Placement.RightTop => PlacementType.RightTop,
Placement.RightBottom => PlacementType.RightBottom, Placement.RightBottom => PlacementType.RightBottom,
Placement.BottomLeft => PlacementType.BottomLeft, Placement.BottomLeft => PlacementType.BottomLeft,
Placement.BottomCenter => PlacementType.BottomCenter, Placement.BottomCenter => PlacementType.Bottom,
Placement.Bottom => PlacementType.Bottom, Placement.Bottom => PlacementType.Bottom,
Placement.BottomRight => PlacementType.BottomRight, Placement.BottomRight => PlacementType.BottomRight,
_ => PlacementType.BottomLeft _ => PlacementType.BottomLeft
@ -72,7 +78,6 @@
internal PlacementType GetReverseType() internal PlacementType GetReverseType()
{ {
if (this == TopLeft) return BottomLeft; if (this == TopLeft) return BottomLeft;
if (this == TopCenter) return BottomCenter;
if (this == Top) return Bottom; if (this == Top) return Bottom;
if (this == TopRight) return BottomRight; if (this == TopRight) return BottomRight;
@ -85,7 +90,6 @@
if (this == RightBottom) return LeftBottom; if (this == RightBottom) return LeftBottom;
if (this == BottomLeft) return TopLeft; if (this == BottomLeft) return TopLeft;
if (this == BottomCenter) return TopCenter;
if (this == Bottom) return Top; if (this == Bottom) return Top;
if (this == BottomRight) return TopRight; if (this == BottomRight) return TopRight;
@ -94,7 +98,7 @@
internal PlacementDirection GetDirection() internal PlacementDirection GetDirection()
{ {
if (this.IsIn(TopLeft, TopCenter, Top, TopRight)) if (this.IsIn(TopLeft, Top, TopRight))
{ {
return PlacementDirection.Top; return PlacementDirection.Top;
} }
@ -109,7 +113,7 @@
return PlacementDirection.Right; return PlacementDirection.Right;
} }
if (this.IsIn(BottomLeft, BottomCenter, Bottom, BottomRight)) if (this.IsIn(BottomLeft, Bottom, BottomRight))
{ {
return PlacementDirection.Bottom; return PlacementDirection.Bottom;
} }

15
components/core/JsInterop/modules/components/overlay.ts
View File

@ -5,7 +5,6 @@ import { mutationObserver as mutation } from '../../ObservableApi/mutationObserv
//Make sure the enum is identical as C# AntDesign.Placement enum //Make sure the enum is identical as C# AntDesign.Placement enum
export enum Placement { export enum Placement {
TopLeft = 0, TopLeft = 0,
TopCenter = 1,
Top = 2, Top = 2,
TopRight = 3, TopRight = 3,
Left = 4, Left = 4,
@ -15,7 +14,6 @@ export enum Placement {
RightTop = 8, RightTop = 8,
RightBottom = 9, RightBottom = 9,
BottomLeft = 10, BottomLeft = 10,
BottomCenter = 11,
Bottom = 12, Bottom = 12,
BottomRight = 13 BottomRight = 13
} }
@ -64,7 +62,6 @@ export class Overlay {
{ horizontal: "left" | "right", vertical: "top" | "bottom", class: string }> = { horizontal: "left" | "right", vertical: "top" | "bottom", class: string }> =
new Map([ new Map([
[Placement.TopLeft, { horizontal: "left", vertical: "bottom", class: "topLeft" }], [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.Top, { horizontal: "left", vertical: "bottom", class: "top" }],
[Placement.TopRight, { horizontal: "right", vertical: "bottom", class: "topRight" }], [Placement.TopRight, { horizontal: "right", vertical: "bottom", class: "topRight" }],
[Placement.Left, { horizontal: "right", vertical: "top", class: "left" }], [Placement.Left, { horizontal: "right", vertical: "top", class: "left" }],
@ -74,7 +71,6 @@ export class Overlay {
[Placement.RightTop, { horizontal: "left", vertical: "top", class: "rightTop" }], [Placement.RightTop, { horizontal: "left", vertical: "top", class: "rightTop" }],
[Placement.RightBottom, { horizontal: "left", vertical: "bottom", class: "rightBottom" }], [Placement.RightBottom, { horizontal: "left", vertical: "bottom", class: "rightBottom" }],
[Placement.BottomLeft, { horizontal: "left", vertical: "top", class: "bottomLeft" }], [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.Bottom, { horizontal: "left", vertical: "top", class: "bottom" }],
[Placement.BottomRight, { horizontal: "right", vertical: "top", class: "bottomRight" }], [Placement.BottomRight, { horizontal: "right", vertical: "top", class: "bottomRight" }],
]); ]);
@ -82,7 +78,6 @@ export class Overlay {
private static reverseVerticalPlacementMap: Map<Placement, Function> = private static reverseVerticalPlacementMap: Map<Placement, Function> =
new Map([ new Map([
[Placement.TopLeft, (position: string) => Placement.BottomLeft], [Placement.TopLeft, (position: string) => Placement.BottomLeft],
[Placement.TopCenter, (position: string) => Placement.BottomCenter],
[Placement.Top, (position: string) => Placement.Bottom], [Placement.Top, (position: string) => Placement.Bottom],
[Placement.TopRight, (position: string) => Placement.BottomRight], [Placement.TopRight, (position: string) => Placement.BottomRight],
[Placement.Left, (position: string) => position === "top" ? Placement.LeftBottom : Placement.LeftTop], [Placement.Left, (position: string) => position === "top" ? Placement.LeftBottom : Placement.LeftTop],
@ -92,7 +87,6 @@ export class Overlay {
[Placement.RightTop, (position: string) => Placement.RightBottom], [Placement.RightTop, (position: string) => Placement.RightBottom],
[Placement.RightBottom, (position: string) => Placement.RightTop], [Placement.RightBottom, (position: string) => Placement.RightTop],
[Placement.BottomLeft, (position: string) => Placement.TopLeft], [Placement.BottomLeft, (position: string) => Placement.TopLeft],
[Placement.BottomCenter, (position: string) => Placement.TopCenter],
[Placement.Bottom, (position: string) => Placement.Top], [Placement.Bottom, (position: string) => Placement.Top],
[Placement.BottomRight, (position: string) => Placement.TopRight] [Placement.BottomRight, (position: string) => Placement.TopRight]
]); ]);
@ -100,7 +94,6 @@ export class Overlay {
private static reverseHorizontalPlacementMap: Map<Placement, Function> = private static reverseHorizontalPlacementMap: Map<Placement, Function> =
new Map([ new Map([
[Placement.TopLeft, (position: string) => Placement.TopRight], [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.Top, (position: string) => position === "left" ? Placement.TopRight : Placement.TopLeft],
[Placement.TopRight, (position: string) => Placement.TopLeft], [Placement.TopRight, (position: string) => Placement.TopLeft],
[Placement.Left, (position: string) => Placement.Right], [Placement.Left, (position: string) => Placement.Right],
@ -110,7 +103,6 @@ export class Overlay {
[Placement.RightTop, (position: string) => Placement.LeftBottom], [Placement.RightTop, (position: string) => Placement.LeftBottom],
[Placement.RightBottom, (position: string) => Placement.LeftTop], [Placement.RightBottom, (position: string) => Placement.LeftTop],
[Placement.BottomLeft, (position: string) => Placement.BottomRight], [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.Bottom, (position: string) => position === "left" ? Placement.BottomRight : Placement.BottomLeft],
[Placement.BottomRight, (position: string) => Placement.BottomLeft] [Placement.BottomRight, (position: string) => Placement.BottomLeft]
]); ]);
@ -118,7 +110,6 @@ export class Overlay {
private static arrowCenterPlacementMatch: Map<Placement, Placement> = private static arrowCenterPlacementMatch: Map<Placement, Placement> =
new Map([ new Map([
[Placement.TopLeft, Placement.Top], [Placement.TopLeft, Placement.Top],
[Placement.TopCenter, Placement.TopCenter],
[Placement.Top, Placement.Top], [Placement.Top, Placement.Top],
[Placement.TopRight, Placement.Top], [Placement.TopRight, Placement.Top],
[Placement.Left, Placement.Left], [Placement.Left, Placement.Left],
@ -128,7 +119,6 @@ export class Overlay {
[Placement.RightTop, Placement.Right], [Placement.RightTop, Placement.Right],
[Placement.RightBottom, Placement.Right], [Placement.RightBottom, Placement.Right],
[Placement.BottomLeft, Placement.Bottom], [Placement.BottomLeft, Placement.Bottom],
[Placement.BottomCenter, Placement.BottomCenter],
[Placement.Bottom, Placement.Bottom], [Placement.Bottom, Placement.Bottom],
[Placement.BottomRight, Placement.Bottom] [Placement.BottomRight, Placement.Bottom]
]); ]);
@ -254,7 +244,6 @@ export class Overlay {
}; };
}; };
case Placement.BottomLeft: case Placement.BottomLeft:
case Placement.BottomCenter:
case Placement.Bottom: case Placement.Bottom:
case Placement.BottomRight: case Placement.BottomRight:
return function(triggerTop: number, triggerHeight: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayHeight: number, constraints: overlayConstraints) { 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") { if (position === "bottom") {
switch (placement) { switch (placement) {
case Placement.TopLeft: case Placement.TopLeft:
case Placement.TopCenter:
case Placement.Top: case Placement.Top:
case Placement.TopRight: case Placement.TopRight:
return function(triggerBottom: number, triggerHeight: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayHeight: number, constraints: overlayConstraints) { 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) position.right = Overlay.reversePositionValue(position.left, container.scrollWidth, overlayWidth)
return position; return position;
}; };
case Placement.TopCenter:
case Placement.Top: case Placement.Top:
case Placement.BottomCenter:
case Placement.Bottom: case Placement.Bottom:
return function(triggerLeft: number, triggerWidth: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayWidth: number, constraints: overlayConstraints) { return function(triggerLeft: number, triggerWidth: number, container: domTypes.domInfo, trigger: domTypes.domInfo, overlayWidth: number, constraints: overlayConstraints) {
const position: horizontalPosition = { const position: horizontalPosition = {

4
components/core/JsInterop/modules/dom/eventHelper.ts
View File

@ -79,8 +79,8 @@ export class eventHelper {
private static debounce(func, wait, immediate) { private static debounce(func, wait, immediate) {
var timeout; var timeout;
return () => { return (...args) => {
const context = this, args = arguments; const context = this;
const later = () => { const later = () => {
timeout = null; timeout = null;
if (!immediate) func.apply(this, args); if (!immediate) func.apply(this, args);

2
components/core/JsInterop/modules/dom/infoHelper.ts
View File

@ -118,7 +118,7 @@ export class infoHelper {
} }
static getMaxZIndex(): number { 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) { static isFixedPosition(element) {

6
components/date-picker/style/entry.less
View File

@ -1 +1,7 @@
@import './index.less'; @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';

42
components/date-picker/style/index.less
View File

@ -1,6 +1,7 @@
@import '../../style/themes/index'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@import '../../input/style/mixin'; @import '../../input/style/mixin';
@import './status';
@picker-prefix-cls: ~'@{ant-prefix}-picker'; @picker-prefix-cls: ~'@{ant-prefix}-picker';
@ -13,7 +14,7 @@
} }
.@{picker-prefix-cls} { .@{picker-prefix-cls} {
@arrow-size: 10px; @arrow-size: @popover-arrow-width;
.reset-component(); .reset-component();
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base); .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
@ -22,7 +23,7 @@
align-items: center; align-items: center;
background: @picker-bg; background: @picker-bg;
border: @border-width-base @border-style-base @select-border-color; 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; transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
&:hover, &:hover,
@ -106,6 +107,8 @@
} }
&-suffix { &-suffix {
display: flex;
flex: none;
align-self: center; align-self: center;
margin-left: (@padding-xs / 2); margin-left: (@padding-xs / 2);
color: @disabled-color; color: @disabled-color;
@ -114,6 +117,10 @@
> * { > * {
vertical-align: top; vertical-align: top;
&:not(:last-child) {
margin-right: 8px;
}
} }
} }
@ -213,6 +220,10 @@
&-dropdown { &-dropdown {
.reset-component(); .reset-component();
position: absolute; 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; z-index: @zindex-picker;
&-hidden { &-hidden {
@ -221,17 +232,17 @@
&-placement-bottomLeft { &-placement-bottomLeft {
.@{picker-prefix-cls}-range-arrow { .@{picker-prefix-cls}-range-arrow {
top: (@arrow-size / 2) - (@arrow-size / 3); top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block; display: block;
transform: rotate(-45deg); transform: rotate(-135deg) translateY(1px);
} }
} }
&-placement-topLeft { &-placement-topLeft {
.@{picker-prefix-cls}-range-arrow { .@{picker-prefix-cls}-range-arrow {
bottom: (@arrow-size / 2) - (@arrow-size / 3); bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block; display: block;
transform: rotate(135deg); transform: rotate(45deg);
} }
} }
@ -311,19 +322,14 @@
width: @arrow-size; width: @arrow-size;
height: @arrow-size; height: @arrow-size;
margin-left: @input-padding-horizontal-base * 1.5; 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; transition: left @animation-duration-slow ease-out;
.roundedArrow(@arrow-size, 5px, @calendar-bg);
&::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: '';
}
} }
&-panel-container { &-panel-container {

12
components/date-picker/style/panel.less
View File

@ -101,7 +101,7 @@
display: inline-block; display: inline-block;
width: @picker-arrow-size; width: @picker-arrow-size;
height: @picker-arrow-size; height: @picker-arrow-size;
border: 0 solid currentColor; border: 0 solid currentcolor;
border-width: 1.5px 0 0 1.5px; border-width: 1.5px 0 0 1.5px;
content: ''; content: '';
} }
@ -116,7 +116,7 @@
display: inline-block; display: inline-block;
width: @picker-arrow-size; width: @picker-arrow-size;
height: @picker-arrow-size; height: @picker-arrow-size;
border: 0 solid currentColor; border: 0 solid currentcolor;
border-width: 1.5px 0 0 1.5px; border-width: 1.5px 0 0 1.5px;
content: ''; content: '';
} }
@ -280,6 +280,7 @@
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} { &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
border-radius: @border-radius-base 0 0 @border-radius-base; border-radius: @border-radius-base 0 0 @border-radius-base;
} }
// range end border-radius // range end border-radius
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} { &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
border-radius: 0 @border-radius-base @border-radius-base 0; border-radius: 0 @border-radius-base @border-radius-base 0;
@ -298,12 +299,14 @@
content: ''; content: '';
} }
} }
.@{picker-prefix-cls}-date-panel .@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start &-in-view&-in-range&-range-hover-start
.@{cellClassName}::after { .@{cellClassName}::after {
right: -5px - @border-width-base; right: -5px - @border-width-base;
left: 0; left: 0;
} }
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after { .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
right: 0; right: 0;
left: -5px - @border-width-base; left: -5px - @border-width-base;
@ -313,6 +316,7 @@
&-range-hover&-range-start::after { &-range-hover&-range-start::after {
right: 50%; right: 50%;
} }
&-range-hover&-range-end::after { &-range-hover&-range-end::after {
left: 50%; left: 50%;
} }
@ -610,7 +614,7 @@
} }
&-active { &-active {
background: fade(@calendar-item-active-bg, 20%); background: @calendar-column-active-bg;
} }
&:hover { &:hover {
@ -661,7 +665,7 @@
// Fix IE11 render bug by css hacks // Fix IE11 render bug by css hacks
// https://github.com/ant-design/ant-design/issues/21559 // https://github.com/ant-design/ant-design/issues/21559
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110 // 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, _:-ms-fullscreen,
:root { :root {
.@{picker-prefix-cls}-range-wrapper { .@{picker-prefix-cls}-range-wrapper {

10
components/date-picker/style/patch.less Normal file
View File

@ -0,0 +1,10 @@
// inline mode
.@{picker-prefix-cls}-inline {
border: none;
padding: 0;
.@{picker-prefix-cls} {
&-range-arrow {
display: none !important;
}
}
}

10
components/date-picker/style/rtl.less
View File

@ -192,10 +192,7 @@
left: 0; left: 0;
border-right: @border-width-base dashed @picker-date-hover-range-border-color; border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: none; border-left: none;
border-top-left-radius: 0; border-radius: 0 @border-radius-base @border-radius-base 0;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-bottom-left-radius: 0;
} }
} }
@ -209,10 +206,7 @@
left: 6px; left: 6px;
border-right: none; border-right: none;
border-left: @border-width-base dashed @picker-date-hover-range-border-color; border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base; border-radius: @border-radius-base 0 0 @border-radius-base;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: @border-radius-base;
} }
} }

34
components/date-picker/style/status.less Normal file
View File

@ -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);
}
}

3
components/descriptions/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import "./index.less";
@import "./patch";

6
components/descriptions/style/index.less
View File

@ -29,8 +29,8 @@
&-view { &-view {
width: 100%; width: 100%;
overflow: hidden;
border-radius: @border-radius-base; border-radius: @border-radius-base;
table { table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
@ -42,6 +42,7 @@
> td { > td {
padding-bottom: @descriptions-item-padding-bottom; padding-bottom: @descriptions-item-padding-bottom;
} }
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
@ -126,6 +127,7 @@
&-bordered { &-bordered {
.@{descriptions-prefix-cls}-view { .@{descriptions-prefix-cls}-view {
border: 1px solid @border-color-split; border: 1px solid @border-color-split;
> table { > table {
table-layout: auto; table-layout: auto;
border-collapse: collapse; border-collapse: collapse;
@ -144,6 +146,7 @@
.@{descriptions-prefix-cls}-item-label { .@{descriptions-prefix-cls}-item-label {
background-color: @descriptions-bg; background-color: @descriptions-bg;
&::after { &::after {
display: none; display: none;
} }
@ -151,6 +154,7 @@
.@{descriptions-prefix-cls}-row { .@{descriptions-prefix-cls}-row {
border-bottom: 1px solid @border-color-split; border-bottom: 1px solid @border-color-split;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }

0
components/descriptions/style/patch.less Normal file
View File

2
components/descriptions/style/rtl.less
View File

@ -1,4 +1,4 @@
@import '../../style/themes/default'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';

33
components/divider/style/index.less
View File

@ -13,7 +13,7 @@
top: -0.06em; top: -0.06em;
display: inline-block; display: inline-block;
height: 0.9em; height: 0.9em;
margin: 0 8px; margin: 0 @divider-vertical-gutter;
vertical-align: middle; vertical-align: middle;
border-top: 0; border-top: 0;
border-left: @border-width-base solid @divider-color; border-left: @border-width-base solid @divider-color;
@ -57,6 +57,7 @@
top: 50%; top: 50%;
width: @divider-orientation-margin; width: @divider-orientation-margin;
} }
&::after { &::after {
top: 50%; top: 50%;
width: 100% - @divider-orientation-margin; width: 100% - @divider-orientation-margin;
@ -68,6 +69,7 @@
top: 50%; top: 50%;
width: 100% - @divider-orientation-margin; width: 100% - @divider-orientation-margin;
} }
&::after { &::after {
top: 50%; top: 50%;
width: @divider-orientation-margin; width: @divider-orientation-margin;
@ -87,7 +89,6 @@
} }
&-horizontal&-with-text&-dashed { &-horizontal&-with-text&-dashed {
border-top: 0;
&::before, &::before,
&::after { &::after {
border-style: dashed none none; border-style: dashed none none;
@ -103,6 +104,34 @@
font-weight: normal; font-weight: normal;
font-size: @font-size-base; 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'; @import './rtl';

2
components/divider/style/rtl.less
View File

@ -14,6 +14,7 @@
width: 100% - @divider-orientation-margin; width: 100% - @divider-orientation-margin;
} }
} }
&::after { &::after {
.@{divider-prefix-cls}-rtl& { .@{divider-prefix-cls}-rtl& {
width: @divider-orientation-margin; width: @divider-orientation-margin;
@ -27,6 +28,7 @@
width: @divider-orientation-margin; width: @divider-orientation-margin;
} }
} }
&::after { &::after {
.@{divider-prefix-cls}-rtl& { .@{divider-prefix-cls}-rtl& {
width: 100% - @divider-orientation-margin; width: 100% - @divider-orientation-margin;

63
components/drawer/style/drawer.less
View File

@ -2,6 +2,7 @@
@drawer-prefix-cls: ~'@{ant-prefix}-drawer'; @drawer-prefix-cls: ~'@{ant-prefix}-drawer';
@picker-prefix-cls: ~'@{ant-prefix}-picker'; @picker-prefix-cls: ~'@{ant-prefix}-picker';
@drawer-animation-ease: @ease-out-quint;
.@{drawer-prefix-cls} { .@{drawer-prefix-cls} {
@drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2)); @drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
@ -10,17 +11,14 @@
z-index: @zindex-modal; z-index: @zindex-modal;
width: 0%; width: 0%;
height: 100%; height: 100%;
transition: transform @animation-duration-slow @ease-base-out, transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
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;
}
&-content-wrapper { &-content-wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: transform @animation-duration-slow @drawer-animation-ease,
box-shadow @animation-duration-slow @drawer-animation-ease;
} }
.@{drawer-prefix-cls}-content { .@{drawer-prefix-cls}-content {
@ -38,7 +36,7 @@
} }
&.@{drawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
width: 100%; 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 { &.@{drawer-prefix-cls}-open {
height: 100%; 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 { .@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-up; box-shadow: @shadow-1-up;
} }
&.no-mask { &.no-mask {
bottom: 1px; bottom: 1px;
transform: translateY(1px); transform: translateY(1px);
@ -126,16 +125,17 @@
height: 100%; height: 100%;
opacity: 1; opacity: 1;
transition: none; transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out; animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
pointer-events: auto; pointer-events: auto;
} }
&-title { &-title {
flex: 1;
margin: 0; margin: 0;
color: @heading-color; color: @heading-color;
font-weight: 500; font-weight: 500;
font-size: @font-size-lg; font-size: @drawer-title-font-size;
line-height: 22px; line-height: @drawer-title-line-height;
} }
&-content { &-content {
@ -148,12 +148,8 @@
} }
&-close { &-close {
position: absolute; display: inline-block;
top: 0; margin-right: 12px;
right: 0;
z-index: @zindex-popup-close;
display: block;
padding: @drawer-header-close-padding;
color: @modal-close-color; color: @modal-close-color;
font-weight: 700; font-weight: 700;
font-size: @font-size-lg; font-size: @font-size-lg;
@ -174,32 +170,35 @@
color: @icon-color-hover; color: @icon-color-hover;
text-decoration: none; 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 { &-header {
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: @drawer-header-padding; padding: @drawer-header-padding;
color: @text-color; color: @text-color;
background: @drawer-bg; background: @drawer-bg;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
&-title {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
} }
&-header-no-title { &-close-only {
color: @text-color; padding-bottom: 0;
background: @drawer-bg; border: none;
}
} }
&-wrapper-body { &-wrapper-body {
display: flex; display: flex;
flex-direction: column; flex-flow: column nowrap;
flex-wrap: nowrap;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -227,17 +226,10 @@
height: 0; height: 0;
background-color: @modal-mask-bg; background-color: @modal-mask-bg;
opacity: 0; opacity: 0;
filter: ~'alpha(opacity=45)';
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
pointer-events: none; pointer-events: none;
} }
&-open {
&-content {
box-shadow: @shadow-2;
}
}
// =================== Hook Components =================== // =================== Hook Components ===================
.@{picker-prefix-cls} { .@{picker-prefix-cls} {
&-clear { &-clear {
@ -250,6 +242,7 @@
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }

3
components/drawer/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@import './drawer'; @import './drawer';
@import './customize';
@import './rtl'; @import './rtl';
.popover-customize-bg(@drawer-prefix-cls, @popover-background);

4
components/drawer/style/rtl.less
View File

@ -9,8 +9,8 @@
&-close { &-close {
.@{drawer-prefix-cls}-rtl & { .@{drawer-prefix-cls}-rtl & {
right: auto; margin-right: 0;
left: 0; margin-left: 12px;
} }
} }
} }

2
components/dropdown/style/entry.less
View File

@ -1,2 +1,4 @@
@import './index.less'; @import './index.less';
@import './patch.less'; @import './patch.less';
// style dependencies
@import '../../button/style/entry.less';

90
components/dropdown/style/index.less
View File

@ -49,14 +49,14 @@
} }
// Offset the popover to account for the dropdown arrow // Offset the popover to account for the dropdown arrow
&-show-arrow&-placement-topCenter,
&-show-arrow&-placement-topLeft, &-show-arrow&-placement-topLeft,
&-show-arrow&-placement-top,
&-show-arrow&-placement-topRight { &-show-arrow&-placement-topRight {
padding-bottom: @popover-distance; padding-bottom: @popover-distance;
} }
&-show-arrow&-placement-bottomCenter,
&-show-arrow&-placement-bottomLeft, &-show-arrow&-placement-bottomLeft,
&-show-arrow&-placement-bottom,
&-show-arrow&-placement-bottomRight { &-show-arrow&-placement-bottomRight {
padding-top: @popover-distance; padding-top: @popover-distance;
} }
@ -68,52 +68,54 @@
position: absolute; position: absolute;
z-index: 1; // lift it up so the menu wouldn't cask shadow on it z-index: 1; // lift it up so the menu wouldn't cask shadow on it
display: block; display: block;
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); width: @popover-arrow-width;
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); height: @popover-arrow-width;
background: transparent; background: linear-gradient(
border-style: solid; 135deg,
border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2); 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); transform: rotate(45deg);
} }
&-placement-topCenter > &-arrow, &-placement-top > &-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 {
left: 50%; left: 50%;
transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg);
} }
&-placement-topLeft > &-arrow { &-placement-topLeft > &-arrow {
left: 16px; left: 16px;
} }
&-placement-topRight > &-arrow { &-placement-topRight > &-arrow {
right: 16px; right: 16px;
} }
&-placement-bottomCenter > &-arrow, &-placement-bottom > &-arrow,
&-placement-bottomLeft > &-arrow, &-placement-bottomLeft > &-arrow,
&-placement-bottomRight > &-arrow { &-placement-bottomRight > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px; top: (@popover-arrow-width + 2px) * sqrt((1 / 2));
border-top-color: @popover-bg; box-shadow: 2px 2px 5px -2px fade(@black, 10%);
border-right-color: transparent; transform: rotate(-135deg) translateY(-0.5px);
border-bottom-color: transparent;
border-left-color: @popover-bg;
box-shadow: -2px -2px 5px fade(@black, 6%);
} }
&-placement-bottomCenter > &-arrow {
&-placement-bottom > &-arrow {
left: 50%; left: 50%;
transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(-135deg) translateY(-0.5px);
} }
&-placement-bottomLeft > &-arrow { &-placement-bottomLeft > &-arrow {
left: 16px; left: 16px;
} }
&-placement-bottomRight > &-arrow { &-placement-bottomRight > &-arrow {
right: 16px; right: 16px;
} }
@ -199,7 +201,6 @@
font-weight: normal; font-weight: normal;
font-size: @dropdown-font-size; font-size: @dropdown-font-size;
line-height: @dropdown-line-height; line-height: @dropdown-line-height;
white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: all @animation-duration-slow; transition: all @animation-duration-slow;
@ -217,10 +218,11 @@
&-selected { &-selected {
color: @dropdown-selected-color; color: @dropdown-selected-color;
background-color: @item-active-bg; background-color: @dropdown-selected-bg;
} }
&:hover { &:hover,
&&-active {
background-color: @item-hover-bg; 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-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-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-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom,
&.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter, &.@{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-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
&.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight { &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn; animation-name: antSlideUpIn;
@ -309,21 +311,21 @@
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, &.@{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-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-enter.@{ant-prefix}-slide-up-enter-active&-placement-top,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter, &.@{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-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight { &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn; 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-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 { &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut; 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-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 { &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut; animation-name: antSlideDownOut;
} }
@ -341,11 +343,22 @@
.@{dropdown-prefix-cls}-button { .@{dropdown-prefix-cls}-button {
white-space: nowrap; white-space: nowrap;
&.@{ant-prefix}-btn-group &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
> .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) { &-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-right: @padding-xs;
padding-left: @padding-xs; padding-left: @padding-xs;
} }
}
} }
// https://github.com/ant-design/ant-design/issues/4903 // https://github.com/ant-design/ant-design/issues/4903
@ -362,6 +375,7 @@
.@{dropdown-prefix-cls}-menu-submenu-arrow::after { .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
color: @text-color-secondary-dark; color: @text-color-secondary-dark;
} }
&:hover { &:hover {
color: @text-color-inverse; color: @text-color-inverse;
background: transparent; background: transparent;

16
components/dropdown/style/patch.less
View File

@ -1,5 +1,13 @@
.disabled { .@{dropdown-prefix-cls} {
color: rgba(0,0,0,.25); &-menu {
cursor: not-allowed; &-item,
pointer-events: none; &-submenu-title {
.@{dropdown-prefix-cls}-menu-submenu-arrow {
.@{dropdown-prefix-cls}-rtl & {
transform: rotate(180deg);
}
}
}
}
} }

7
components/dropdown/style/rtl.less
View File

@ -22,7 +22,8 @@
} }
&-item-group-title { &-item-group-title {
.@{dropdown-prefix-cls}-rtl & { .@{dropdown-prefix-cls}-rtl &,
.@{dropdown-prefix-cls}-menu-submenu-rtl & {
direction: rtl; direction: rtl;
text-align: right; text-align: right;
} }
@ -55,13 +56,13 @@
} }
} }
.@{dropdown-prefix-cls}-menu-submenu-arrow { .@{dropdown-prefix-cls}-menu-submenu-expand-icon {
.@{dropdown-prefix-cls}-rtl & { .@{dropdown-prefix-cls}-rtl & {
right: auto; right: auto;
left: @padding-xs; left: @padding-xs;
} }
&-icon { .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
.@{dropdown-prefix-cls}-rtl & { .@{dropdown-prefix-cls}-rtl & {
margin-left: 0 !important; margin-left: 0 !important;
transform: scaleX(-1); transform: scaleX(-1);

4
components/dropdown/style/status.less
View File

@ -1,4 +1,6 @@
@import './index'; @import (reference) '../../style/themes/index';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
.@{dropdown-prefix-cls}-menu-item { .@{dropdown-prefix-cls}-menu-item {
&&-danger { &&-danger {

1
components/empty/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import "./patch";

20
components/empty/style/index.less
View File

@ -55,23 +55,29 @@
fill: @white; fill: @white;
fill-opacity: 0.08; fill-opacity: 0.08;
} }
&-path { &-path {
&-1 { &-1 {
fill: #262626; fill: #262626;
} }
&-2 { &-2 {
fill: url(#linearGradient-1); fill: url('#linearGradient-1');
} }
&-3 { &-3 {
fill: #595959; fill: #595959;
} }
&-4 { &-4 {
fill: #434343; fill: #434343;
} }
&-5 { &-5 {
fill: #595959; fill: #595959;
} }
} }
&-g { &-g {
fill: #434343; fill: #434343;
} }
@ -81,23 +87,29 @@
fill: #f5f5f5; fill: #f5f5f5;
fill-opacity: 0.8; fill-opacity: 0.8;
} }
&-path { &-path {
&-1 { &-1 {
fill: #aeb8c2; fill: #aeb8c2;
} }
&-2 { &-2 {
fill: url(#linearGradient-1); fill: url('#linearGradient-1');
} }
&-3 { &-3 {
fill: #f5f5f7; fill: #f5f5f7;
} }
&-4 { &-4 {
fill: #dce0e6; fill: #dce0e6;
} }
&-5 { &-5 {
fill: #dce0e6; fill: #dce0e6;
} }
} }
&-g { &-g {
fill: @white; fill: @white;
} }
@ -111,9 +123,11 @@
fill: @white; fill: @white;
fill-opacity: 0.08; fill-opacity: 0.08;
} }
&-g { &-g {
stroke: #434343; stroke: #434343;
} }
&-path { &-path {
fill: #262626; fill: #262626;
stroke: #434343; stroke: #434343;
@ -123,9 +137,11 @@
&-ellipse { &-ellipse {
fill: #f5f5f5; fill: #f5f5f5;
} }
&-g { &-g {
stroke: #d9d9d9; stroke: #d9d9d9;
} }
&-path { &-path {
fill: #fafafa; fill: #fafafa;
} }

0
components/empty/style/patch.less Normal file
View File

65
components/form/style/components.less
View File

@ -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 = // = Children Component =
// ================================================================ // ================================================================
// FIXME: useless, remove in v5
.@{form-item-prefix-cls} { .@{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 { .@{ant-prefix}-input-number {
+ .@{form-prefix-cls}-text { + .@{form-prefix-cls}-text {
margin-left: 8px; 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;
} }
} }

3
components/form/style/entry.less
View File

@ -1 +1,4 @@
@import './index.less'; @import './index.less';
// style dependencies
@import '../../grid/style/entry.less';
@import './patch';

14
components/form/style/horizontal.less
View File

@ -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-prefix-cls}-horizontal {
.@{form-item-prefix-cls}-label { .@{form-item-prefix-cls}-label {
@ -6,5 +9,14 @@
} }
.@{form-item-prefix-cls}-control { .@{form-item-prefix-cls}-control {
flex: 1 1 0; 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;
} }
} }

107
components/form/style/index.less
View File

@ -39,6 +39,7 @@
&-small { &-small {
.formSize(@input-height-sm); .formSize(@input-height-sm);
} }
&-large { &-large {
.formSize(@input-height-lg); .formSize(@input-height-lg);
} }
@ -61,9 +62,12 @@
margin-bottom: @form-item-margin-bottom; margin-bottom: @form-item-margin-bottom;
vertical-align: top; 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 { &-with-help {
margin-bottom: 0; margin-bottom: 0;
transition: none;
} }
&-hidden, &-hidden,
@ -87,6 +91,12 @@
text-align: left; text-align: left;
} }
&-wrap {
overflow: unset;
line-height: (@line-height-base - 0.25em);
white-space: unset;
}
> label { > label {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -179,10 +189,12 @@
} }
} }
// ==============================================================
// = Explain =
// ==============================================================
&-explain, &-explain,
&-extra { &-extra {
clear: both; clear: both;
min-height: @form-item-margin-bottom;
color: @text-color-secondary; color: @text-color-secondary;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
@ -190,43 +202,85 @@
.explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2); .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
} }
.@{ant-prefix}-input-textarea-show-count { &-explain-connected {
&::after { height: 0;
margin-bottom: -22px; min-height: 0;
}
}
}
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName, @duration);
.@{name}-enter,
.@{name}-appear {
opacity: 0; opacity: 0;
animation-timing-function: @ease-in-out;
} }
.@{name}-leave {
animation-timing-function: @ease-in-out; &-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(show-help, antShowHelp, 0.3s); // >>>>>>>>>> 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;
@keyframes antShowHelpIn { &-leave {
0% { min-height: @form-item-margin-bottom;
&-active {
min-height: 0;
}
}
}
// Explain
.@{ant-prefix}-show-help-item {
overflow: hidden;
transition: height @animation-duration-slow @ease-in-out,
opacity @animation-duration-slow @ease-in-out, transform @animation-duration-slow @ease-in-out !important;
&-appear,
&-enter {
transform: translateY(-5px); transform: translateY(-5px);
opacity: 0; opacity: 0;
}
100% { &-active {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
} }
@keyframes antShowHelpOut { &-leave-active {
to {
transform: translateY(-5px); transform: translateY(-5px);
opacity: 0;
} }
} }
@ -237,6 +291,7 @@
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
@ -248,6 +303,7 @@
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
@ -259,6 +315,7 @@
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;

5
components/form/style/inline.less
View File

@ -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 { .@{form-prefix-cls}-inline {
display: flex; display: flex;

39
components/form/style/mixin.less
View File

@ -1,40 +1,15 @@
@import '../../input/style/mixin'; @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 { .@{ant-prefix}-form-item-split {
color: @text-color; 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 // Reset form styles

0
components/form/style/patch.less Normal file
View File

21
components/form/style/rtl.less
View File

@ -32,6 +32,7 @@
margin-left: 4px; margin-left: 4px;
} }
} }
&::after { &::after {
.@{form-prefix-cls}-rtl & { .@{form-prefix-cls}-rtl & {
margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right; 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-search:not(.@{ant-prefix}-input-search-enter-button) {
.@{ant-prefix}-input-suffix { .@{ant-prefix}-input-suffix {
.@{form-prefix-cls}-rtl & { .@{form-prefix-cls}-rtl & {
@ -97,7 +106,13 @@
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow, > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
> .@{ant-prefix}-select .@{ant-prefix}-select-clear, > .@{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-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 & { .@{form-prefix-cls}-rtl & {
right: auto; right: auto;
left: 32px; left: 32px;
@ -106,6 +121,9 @@
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon) :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
.@{ant-prefix}-select-selection-selected-value { .@{ant-prefix}-select-selection-selected-value {
.@{form-prefix-cls}-rtl & { .@{form-prefix-cls}-rtl & {
@ -121,6 +139,7 @@
margin-left: 19px; margin-left: 19px;
} }
} }
&-clear { &-clear {
.@{form-prefix-cls}-rtl & { .@{form-prefix-cls}-rtl & {
right: auto; right: auto;

256
components/form/style/status.less
View File

@ -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} { .@{form-item-prefix-cls} {
// ================================================================ // ================================================================
// = Status = // = Status =
// ================================================================ // ================================================================
/* Some non-status related component style is in `components.less` */ /* Some non-status related component style is in `components.less` */
// ========================= Explain ========================= // ========================= Explain =========================
/* To support leave along ErrorList. We add additional className to handle explain style */ /* To support leave along ErrorList. We add additional className to handle explain style */
&-explain { &-explain {
&&-error { &-error {
color: @error-color; color: @error-color;
} }
&&-warning { &-warning {
color: @warning-color; color: @warning-color;
} }
} }
&-has-feedback { &-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 ========================= // ======================== Switch =========================
.@{ant-prefix}-switch { .@{ant-prefix}-switch {
margin: 2px 0 4px; margin: 2px 0 4px;
} }
// ======================== Select =========================
// Fix overlapping between feedback icon and <Select>'s arrow.
// https://github.com/ant-design/ant-design/issues/4431
> .@{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 {
right: 32px;
}
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value {
padding-right: 42px;
}
// ======================= Cascader ========================
.@{ant-prefix}-cascader-picker {
&-arrow {
margin-right: 19px;
}
&-clear {
right: 32px;
}
}
// ======================== Picker =========================
// Fix issue: https://github.com/ant-design/ant-design/issues/4783
.@{ant-prefix}-picker {
padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;
&-large {
padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
}
&-small {
padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
}
}
// ===================== Status Group ======================
&.@{form-item-prefix-cls} {
&-has-success,
&-has-warning,
&-has-error,
&-is-validating {
// ====================== Icon ======================
.@{form-item-prefix-cls}-children-icon {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: @input-height-base;
height: 20px;
margin-top: -10px;
font-size: @font-size-base;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
}
}
}
}
// ======================== Success ========================
&-has-success {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
} }
// ======================== Warning ======================== // ======================== Warning ========================
&-has-warning { &-has-warning {
.form-control-validation(@warning-color; @warning-color; @form-warning-input-bg); .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg; @warning-color-hover; @warning-color-outline);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @warning-color;
animation-name: diffZoomIn3 !important;
}
// Select
.@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
.@{ant-prefix}-select-selector {
background-color: @form-warning-input-bg;
border-color: @warning-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@warning-color);
}
}
// InputNumber, TimePicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
background-color: @form-warning-input-bg;
border-color: @warning-color;
&-focused,
&:focus {
.active(@warning-color);
}
&:not([disabled]):hover {
background-color: @form-warning-input-bg;
border-color: @warning-color;
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@warning-color);
}
} }
// ========================= Error ========================= // ========================= Error =========================
&-has-error { &-has-error {
.form-control-validation(@error-color; @error-color; @form-error-input-bg); .form-control-validation(@error-color; @error-color; @form-error-input-bg; @error-color-hover; @error-color-outline);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @error-color;
animation-name: diffZoomIn2 !important;
}
// Select
.@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
.@{ant-prefix}-select-selector {
background-color: @form-error-input-bg;
border-color: @error-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@error-color);
}
}
// fixes https://github.com/ant-design/ant-design/issues/20482
.@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
.@{ant-prefix}-select-selector {
background-color: inherit;
border: 0;
box-shadow: none;
}
}
.@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
.@{ant-prefix}-input:focus {
border-color: @error-color;
}
}
// InputNumber, TimePicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
background-color: @form-error-input-bg;
border-color: @error-color;
&-focused,
&:focus {
.active(@error-color);
}
&:not([disabled]):hover {
background-color: @form-error-input-bg;
border-color: @error-color;
}
}
.@{ant-prefix}-mention-wrapper {
.@{ant-prefix}-mention-editor {
&,
&:not([disabled]):hover {
background-color: @form-error-input-bg;
border-color: @error-color;
}
}
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
.@{ant-prefix}-mention-editor:not([disabled]):focus {
.active(@error-color);
}
}
// cascader
.@{ant-prefix}-cascader-picker {
&:hover
.@{ant-prefix}-cascader-picker-label:hover
+ .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
border-color: @error-color;
}
&:focus .@{ant-prefix}-cascader-input {
background-color: @form-error-input-bg;
.active(@error-color);
}
}
// transfer
.@{ant-prefix}-transfer {
&-list {
border-color: @error-color;
&-search:not([disabled]) {
border-color: @input-border-color;
&:hover {
.hover();
}
&:focus {
.active();
}
}
}
}
// RadioGroup
.@{ant-prefix}-radio-button-wrapper {
border-color: @error-color !important;
&:not(:first-child) {
&::before {
background-color: @error-color;
}
}
}
}
// ====================== Validating =======================
&-is-validating {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
display: inline-block;
color: @primary-color;
}
} }
} }

7
components/form/style/vertical.less
View File

@ -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';
// ================== Label ================== // ================== Label ==================
.make-vertical-layout-label() { .make-vertical-layout-label() {
@ -46,7 +49,7 @@
} }
.@{form-prefix-cls}-vertical .@{form-item-prefix-cls}-label, .@{form-prefix-cls}-vertical .@{form-item-prefix-cls}-label,
// when labelCol is 24, it is a vertical form /* when labelCol is 24, it is a vertical form */
.@{ant-prefix}-col-24.@{form-item-prefix-cls}-label, .@{ant-prefix}-col-24.@{form-item-prefix-cls}-label,
.@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label { .@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label(); .make-vertical-layout-label();

25
components/grid/style/index.less
View File

@ -3,7 +3,7 @@
@import './mixin'; @import './mixin';
// Grid system // Grid system
.@{ant-prefix}-row { .@{row-prefix-cls} {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -19,46 +19,51 @@
} }
// x轴原点 // x轴原点
.@{ant-prefix}-row-start { .@{row-prefix-cls}-start {
justify-content: flex-start; justify-content: flex-start;
} }
// x轴居中 // x轴居中
.@{ant-prefix}-row-center { .@{row-prefix-cls}-center {
justify-content: center; justify-content: center;
} }
// x轴反方向 // x轴反方向
.@{ant-prefix}-row-end { .@{row-prefix-cls}-end {
justify-content: flex-end; justify-content: flex-end;
} }
// x轴平分 // x轴平分
.@{ant-prefix}-row-space-between { .@{row-prefix-cls}-space-between {
justify-content: space-between; justify-content: space-between;
} }
// x轴有间隔地平分 // x轴有间隔地平分
.@{ant-prefix}-row-space-around { .@{row-prefix-cls}-space-around {
justify-content: space-around; justify-content: space-around;
} }
// x轴有间隔地均分
.@{row-prefix-cls}-space-evenly {
justify-content: space-evenly;
}
// 顶部对齐 // 顶部对齐
.@{ant-prefix}-row-top { .@{row-prefix-cls}-top {
align-items: flex-start; align-items: flex-start;
} }
// 居中对齐 // 居中对齐
.@{ant-prefix}-row-middle { .@{row-prefix-cls}-middle {
align-items: center; align-items: center;
} }
// 底部对齐 // 底部对齐
.@{ant-prefix}-row-bottom { .@{row-prefix-cls}-bottom {
align-items: flex-end; align-items: flex-end;
} }
.@{ant-prefix}-col { .@{col-prefix-cls} {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty

27
components/grid/style/mixin.less
View File

@ -1,49 +1,52 @@
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@row-prefix-cls: ~'@{ant-prefix}-row';
@col-prefix-cls: ~'@{ant-prefix}-col';
// mixins for grid system // mixins for grid system
// ------------------------ // ------------------------
.loop-grid-columns(@index, @class) when (@index > 0) { .loop-grid-columns(@index, @class) when (@index > 0) {
.@{ant-prefix}-col@{class}-@{index} { .@{col-prefix-cls}@{class}-@{index} {
display: block; display: block;
flex: 0 0 percentage((@index / @grid-columns)); flex: 0 0 percentage((@index / @grid-columns));
max-width: percentage((@index / @grid-columns)); max-width: percentage((@index / @grid-columns));
} }
.@{ant-prefix}-col@{class}-push-@{index} { .@{col-prefix-cls}@{class}-push-@{index} {
left: percentage((@index / @grid-columns)); left: percentage((@index / @grid-columns));
} }
.@{ant-prefix}-col@{class}-pull-@{index} { .@{col-prefix-cls}@{class}-pull-@{index} {
right: percentage((@index / @grid-columns)); right: percentage((@index / @grid-columns));
} }
.@{ant-prefix}-col@{class}-offset-@{index} { .@{col-prefix-cls}@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns)); margin-left: percentage((@index / @grid-columns));
} }
.@{ant-prefix}-col@{class}-order-@{index} { .@{col-prefix-cls}@{class}-order-@{index} {
order: @index; order: @index;
} }
.loop-grid-columns((@index - 1), @class); .loop-grid-columns((@index - 1), @class);
} }
.loop-grid-columns(@index, @class) when (@index = 0) { .loop-grid-columns(@index, @class) when (@index = 0) {
.@{ant-prefix}-col@{class}-@{index} { .@{col-prefix-cls}@{class}-@{index} {
display: none; display: none;
} }
.@{ant-prefix}-col-push-@{index} { .@{col-prefix-cls}-push-@{index} {
left: auto; left: auto;
} }
.@{ant-prefix}-col-pull-@{index} { .@{col-prefix-cls}-pull-@{index} {
right: auto; right: auto;
} }
.@{ant-prefix}-col@{class}-push-@{index} { .@{col-prefix-cls}@{class}-push-@{index} {
left: auto; left: auto;
} }
.@{ant-prefix}-col@{class}-pull-@{index} { .@{col-prefix-cls}@{class}-pull-@{index} {
right: auto; right: auto;
} }
.@{ant-prefix}-col@{class}-offset-@{index} { .@{col-prefix-cls}@{class}-offset-@{index} {
margin-left: 0; margin-left: 0;
} }
.@{ant-prefix}-col@{class}-order-@{index} { .@{col-prefix-cls}@{class}-order-@{index} {
order: 0; order: 0;
} }
} }

35
components/grid/style/rtl.less
View File

@ -1,7 +1,8 @@
@import '../../style/themes/index'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@import './mixin';
.@{ant-prefix}-row { .@{row-prefix-cls} {
&-rtl { &-rtl {
direction: rtl; direction: rtl;
} }
@ -9,25 +10,25 @@
// mixin // mixin
.loop-grid-columns(@index, @class) when (@index > 0) { .loop-grid-columns(@index, @class) when (@index > 0) {
.@{ant-prefix}-col@{class}-push-@{index} { .@{col-prefix-cls}@{class}-push-@{index} {
// reset property in RTL direction // reset property in RTL direction
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
right: percentage((@index / @grid-columns)); right: percentage((@index / @grid-columns));
left: auto; left: auto;
} }
} }
.@{ant-prefix}-col@{class}-pull-@{index} { .@{col-prefix-cls}@{class}-pull-@{index} {
// reset property in RTL direction // reset property in RTL direction
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
right: auto; right: auto;
left: percentage((@index / @grid-columns)); left: percentage((@index / @grid-columns));
} }
} }
.@{ant-prefix}-col@{class}-offset-@{index} { .@{col-prefix-cls}@{class}-offset-@{index} {
// reset property in RTL direction // reset property in RTL direction
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
margin-right: percentage((@index / @grid-columns)); margin-right: percentage((@index / @grid-columns));
margin-left: 0; margin-left: 0;
} }
@ -35,33 +36,33 @@
} }
.loop-grid-columns(@index, @class) when (@index = 0) { .loop-grid-columns(@index, @class) when (@index = 0) {
.@{ant-prefix}-col-push-@{index} { .@{col-prefix-cls}-push-@{index} {
// reset property in RTL direction // reset property in RTL direction
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
right: auto; right: auto;
} }
} }
.@{ant-prefix}-col-pull-@{index} { .@{col-prefix-cls}-pull-@{index} {
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
left: auto; left: auto;
} }
} }
.@{ant-prefix}-col@{class}-push-@{index} { .@{col-prefix-cls}@{class}-push-@{index} {
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
right: auto; right: auto;
} }
} }
.@{ant-prefix}-col@{class}-pull-@{index} { .@{col-prefix-cls}@{class}-pull-@{index} {
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
left: auto; left: auto;
} }
} }
.@{ant-prefix}-col@{class}-offset-@{index} { .@{col-prefix-cls}@{class}-offset-@{index} {
&.@{ant-prefix}-col-rtl { &.@{col-prefix-cls}-rtl {
margin-right: 0; margin-right: 0;
} }
} }

1
components/image/style/entry.less
View File

@ -1 +1,2 @@
@import './index.less'; @import './index.less';
@import './patch.less';

23
components/image/style/index.less
View File

@ -7,13 +7,15 @@
.@{image-prefix-cls} { .@{image-prefix-cls} {
position: relative; position: relative;
display: inline-block; display: inline-block;
&-img { &-img {
display: block;
width: 100%; width: 100%;
height: auto; height: auto;
vertical-align: middle;
&-placeholder { &-placeholder {
background-color: @image-bg; background-color: @image-bg;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=); background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 30%; background-size: 30%;
@ -36,6 +38,10 @@
transition: opacity @animation-duration-slow; transition: opacity @animation-duration-slow;
&-info { &-info {
padding: 0 @padding-xss;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
margin-inline-end: @margin-xss; margin-inline-end: @margin-xss;
} }
@ -70,9 +76,11 @@
transition: transform 0.3s @ease-out 0s; transition: transform 0.3s @ease-out 0s;
user-select: none; user-select: none;
pointer-events: auto; pointer-events: auto;
&-wrapper { &-wrapper {
.box(); .box();
transition: transform 0.3s @ease-out 0s; transition: transform 0.3s @ease-out 0s;
&::before { &::before {
display: inline-block; display: inline-block;
width: 1px; width: 1px;
@ -86,6 +94,7 @@
&-moving { &-moving {
.@{image-prefix-cls}-preview-img { .@{image-prefix-cls}-preview-img {
cursor: grabbing; cursor: grabbing;
&-wrapper { &-wrapper {
transition-duration: 0s; transition-duration: 0s;
} }
@ -115,14 +124,23 @@
margin-left: @control-padding-horizontal; margin-left: @control-padding-horizontal;
padding: @control-padding-horizontal; padding: @control-padding-horizontal;
cursor: pointer; cursor: pointer;
&-disabled { &-disabled {
color: @image-preview-operation-disabled-color; color: @image-preview-operation-disabled-color;
pointer-events: none; pointer-events: none;
} }
&:last-of-type { &:last-of-type {
margin-left: 0; margin-left: 0;
} }
} }
&-progress {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&-icon { &-icon {
font-size: @image-preview-operation-size; font-size: @image-preview-operation-size;
} }
@ -145,6 +163,7 @@
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
&-disabled { &-disabled {
color: @image-preview-operation-disabled-color; color: @image-preview-operation-disabled-color;
cursor: not-allowed; cursor: not-allowed;

0
components/image/style/patch.less Normal file
View File

Some files were not shown because too many files have changed in this diff Show More