mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 19:50:05 +08:00
zombieJ
GitHub
commit
1564173b4d
@ -8,12 +8,6 @@
|
||||
"options": {
|
||||
"parser": "json"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ".stylelintrc",
|
||||
"options": {
|
||||
"parser": "json"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
components/style/color/bezierEasing.less
|
||||
components/style/color/colorPalette.less
|
||||
components/style/color/tinyColor.less
|
||||
components/style/core/base.less
|
||||
11
.stylelintrc
11
.stylelintrc
@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
|
||||
"rules": {
|
||||
"comment-empty-line-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"function-name-case": null,
|
||||
"selector-pseudo-element-colon-notation": null,
|
||||
"no-invalid-double-slash-comments": null,
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
||||
17
.stylelintrc.json
Normal file
17
.stylelintrc.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-rational-order",
|
||||
"stylelint-config-prettier"
|
||||
],
|
||||
"plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
|
||||
"rules": {
|
||||
"comment-empty-line-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
|
||||
"no-invalid-double-slash-comments": null,
|
||||
"no-descending-specificity": null,
|
||||
"plugin/declaration-block-no-ignored-properties": true
|
||||
},
|
||||
"ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
|
||||
}
|
||||
@ -15,6 +15,32 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.13.3
|
||||
|
||||
`2019-02-16`
|
||||
|
||||
- 📖 New English translation
|
||||
- [Motion](https://ant.design/docs/spec/motion) [@balloonio](https://github.com/balloonio)
|
||||
- [Data Entry](https://ant.design/docs/spec/data-entry) [@balloonio](https://github.com/balloonio)
|
||||
- 🐞 Fix mouse cursor style when Switch is disabled. [#14764](https://github.com/ant-design/ant-design/issues/14764)
|
||||
- 🐞 Fix Progress shows a wrong successful status. [#14769](https://github.com/ant-design/ant-design/pull/14769) [@imhele](https://github.com/imhele)
|
||||
- 🐞 Fix the issue that the upload status has always been `uploading` after hiding the upload button in the Upload. [#14779](https://github.com/ant-design/ant-design/issues/14779)
|
||||
- 🐞 Fix the issue where the custom icons for vertical Steps were not centered. [#14677](https://github.com/ant-design/ant-design/issues/14677)
|
||||
- 🐞 Fix the issue with Input.Search does not support `addonAfter`. [#14785](https://github.com/ant-design/ant-design/issues/14785)
|
||||
- 🐞 Fix layout issues with FormItem when there is an error. [#14772](https://github.com/ant-design/ant-design/issues/14772)
|
||||
- 🐞 Fix the issue that the operation button will be blocked when the Card is `loading`. [#14832](https://github.com/ant-design/ant-design/issues/14832)
|
||||
- 🐞 Fix the issue that describes overflow in List. [#14765](https://github.com/ant-design/ant-design/pull/14765) [@Shub1427](https://github.com/ant-design/ant-design/pull/14765)
|
||||
- 🐞 Fix the style issue of TimePicker's clear button, when using the `small` size. [#14861](https://github.com/ant-design/ant-design/pull/14861) [@Yangzhedi](https://github.com/Yangzhedi)
|
||||
- Table
|
||||
- 🐞 Fix the issue that the floating element misalignment. [#14822](https://github.com/ant-design/ant-design/pull/14822) [@chiaweilee](https://github.com/ant-design/ant-design/pull/14822)
|
||||
- 🐞 Fix the issue where the className was not synchronized when the `rowSelection` property was removed. [#14759](https://github.com/ant-design/ant-design/issues/14759)
|
||||
- 🐞 Fix border display issue when there is no data. [#14834](https://github.com/ant-design/ant-design/issues/14834)
|
||||
- 🐞 Fix the issue where `pagination` was set to `true`.
|
||||
- 🐞 Fix the issue where the filter drop-down box would be occluded.
|
||||
- TypeScript
|
||||
- 🐞 Checkbox adds `onClick`. [#14762](https://github.com/ant-design/ant-design/pull/14762) [@Frezc](https://github.com/Frezc)
|
||||
- 🐞 Menu adds `onTitleMouseEnter` and `onTitleMouseLeave`. [#14737](https://github.com/ant-design/ant-design/pull/14737) [#GabeMedrash](https://github.com/ant-design/ant-design/pull/14737)
|
||||
|
||||
## 3.13.2
|
||||
|
||||
`2019-02-07`
|
||||
|
||||
@ -15,6 +15,29 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.13.3
|
||||
|
||||
`2019-02-16`
|
||||
|
||||
- 🐞 修复 Upload 中隐藏上传按钮后导致上传状态一直是 `uploading` 的问题。[#14779](https://github.com/ant-design/ant-design/issues/14779)
|
||||
- 🐞 修复 Switch 禁用时的鼠标样式。[#14764](https://github.com/ant-design/ant-design/issues/14764)
|
||||
- 🐞 修复 Progress 显示成功状态错误的问题。[#14769](https://github.com/ant-design/ant-design/pull/14769) [@imhele](https://github.com/imhele)
|
||||
- 🐞 修复垂直 Steps 的自定义图标不居中的问题。[#14677](https://github.com/ant-design/ant-design/issues/14677)
|
||||
- 🐞 修复 Input.Search 不支持 `addonAfter` 的问题。[#14785](https://github.com/ant-design/ant-design/issues/14785)
|
||||
- 🐞 修复 FormItem 在有错误提示时的布局问题。[#14772](https://github.com/ant-design/ant-design/issues/14772)
|
||||
- 🐞 修复 Card 在 `loading` 时，操作按钮会被遮住的问题。[#14832](https://github.com/ant-design/ant-design/issues/14832)
|
||||
- 🐞 修复 List 中描述溢出的问题。[#14765](https://github.com/ant-design/ant-design/pull/14765) [@Shub1427](https://github.com/ant-design/ant-design/pull/14765)
|
||||
- 🐞 修复 TimePicker 在使用 `small` 大小时，清楚按钮的样式显示问题。[#14861](https://github.com/ant-design/ant-design/pull/14861) [@Yangzhedi](https://github.com/Yangzhedi)
|
||||
- Table
|
||||
- 🐞 修复浮动元素错位的问题。[#14822](https://github.com/ant-design/ant-design/pull/14822) [@chiaweilee](https://github.com/ant-design/ant-design/pull/14822)
|
||||
- 🐞 修复移除 `rowSelection` 属性时，className 不同步的问题。[#14759](https://github.com/ant-design/ant-design/issues/14759)
|
||||
- 🐞 修复无数据时的边框显示问题。[#14834](https://github.com/ant-design/ant-design/issues/14834)
|
||||
- 🐞 修复 `pagination` 为 `true` 时报错的问题。
|
||||
- 🐞 修复过滤下拉框会被遮挡的问题。[#11730](https://github.com/ant-design/ant-design/issues/11730)
|
||||
- TypeScript 类型
|
||||
- 🐞 修复 Checkbox 缺少的 `onClick` 类型。 [#14762](https://github.com/ant-design/ant-design/pull/14762) [@Frezc](https://github.com/Frezc)
|
||||
- 🐞 修复 Menu 缺少的 `onTitleMouseEnter` 和 `onTitleMouseLeave` 类型。[#14737](https://github.com/ant-design/ant-design/pull/14737) [#GabeMedrash](https://github.com/ant-design/ant-design/pull/14737)
|
||||
|
||||
## 3.13.2
|
||||
|
||||
`2019-02-07`
|
||||
|
||||
@ -23,56 +23,56 @@
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-description {
|
||||
display: none;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-success {
|
||||
border: @border-width-base @border-style-base @alert-success-border-color;
|
||||
background-color: @alert-success-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-success-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-success-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border: @border-width-base @border-style-base @alert-info-border-color;
|
||||
background-color: @alert-info-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-info-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-info-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
border: @border-width-base @border-style-base @alert-warning-border-color;
|
||||
background-color: @alert-warning-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-warning-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-warning-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: @border-width-base @border-style-base @alert-error-border-color;
|
||||
background-color: @alert-error-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-error-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-error-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-sm;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
line-height: 22px;
|
||||
right: 16px;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
@ -90,11 +90,11 @@
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
padding: 15px 15px 15px 64px;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base;
|
||||
padding: 15px 15px 15px 64px;
|
||||
color: @alert-text-color;
|
||||
line-height: @line-height-base;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&-with-description&-no-icon {
|
||||
@ -112,15 +112,15 @@
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-with-description &-message {
|
||||
font-size: @font-size-lg;
|
||||
color: @alert-message-color;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: @alert-message-color;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&-with-description &-description {
|
||||
@ -132,8 +132,8 @@
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
transform-origin: 50% 0;
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
@ -142,34 +142,34 @@
|
||||
}
|
||||
|
||||
&-banner {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antAlertSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antAlertSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,37 +9,37 @@
|
||||
padding-left: @anchor-border-width;
|
||||
|
||||
&-wrapper {
|
||||
background-color: @component-background;
|
||||
overflow: auto;
|
||||
padding-left: 4px;
|
||||
margin-left: -4px;
|
||||
padding-left: 4px;
|
||||
overflow: auto;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
&-ink {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:before {
|
||||
content: ' ';
|
||||
left: 0;
|
||||
height: 100%;
|
||||
&::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: @anchor-border-width;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: @border-color-split;
|
||||
margin: 0 auto;
|
||||
background-color: @border-color-split;
|
||||
content: ' ';
|
||||
}
|
||||
&-ball {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid @primary-color;
|
||||
background-color: @component-background;
|
||||
left: 50%;
|
||||
transition: top 0.3s ease-in-out;
|
||||
border: 2px solid @primary-color;
|
||||
border-radius: 8px;
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
&.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -55,14 +55,14 @@
|
||||
line-height: 1.143;
|
||||
|
||||
&-title {
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:only-child {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -15,14 +15,14 @@
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
&__rendered {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
height: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
line-height: @input-height-base;
|
||||
}
|
||||
&__placeholder {
|
||||
margin-left: (@input-padding-horizontal-base + 1px);
|
||||
margin-right: (@input-padding-horizontal-base + 1px);
|
||||
margin-left: (@input-padding-horizontal-base + 1px);
|
||||
}
|
||||
|
||||
&--single {
|
||||
@ -44,10 +44,10 @@
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
background: transparent;
|
||||
border-width: @border-width-base;
|
||||
line-height: @line-height-base;
|
||||
height: @input-height-base;
|
||||
&:focus,
|
||||
&:hover {
|
||||
.hover;
|
||||
@ -63,9 +63,9 @@
|
||||
line-height: @input-height-lg;
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
height: @input-height-lg;
|
||||
padding-top: @input-padding-vertical-lg;
|
||||
padding-bottom: @input-padding-vertical-lg;
|
||||
height: @input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,9 +74,9 @@
|
||||
line-height: @input-height-sm;
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
height: @input-height-sm;
|
||||
padding-top: @input-padding-vertical-sm;
|
||||
padding-bottom: @input-padding-vertical-sm;
|
||||
height: @input-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
|
||||
.@{avatar-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background: @avatar-bg;
|
||||
overflow: hidden;
|
||||
color: @avatar-color;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: @avatar-bg;
|
||||
|
||||
&-image {
|
||||
background: transparent;
|
||||
@ -33,9 +33,9 @@
|
||||
}
|
||||
|
||||
& > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,23 +5,23 @@
|
||||
|
||||
.@{backtop-prefix-cls} {
|
||||
.reset-component;
|
||||
z-index: @zindex-back-top;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 50px;
|
||||
height: 40px;
|
||||
z-index: @zindex-back-top;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&-content {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: @back-top-bg;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
color: @back-top-color;
|
||||
text-align: center;
|
||||
background-color: @back-top-bg;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background-color: @back-top-hover-bg;
|
||||
@ -30,9 +30,9 @@
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin: 12px auto;
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
margin: 12px auto;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
|
||||
~'100%/100%' no-repeat;
|
||||
}
|
||||
|
||||
@ -8,23 +8,23 @@
|
||||
.reset-component;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
color: unset;
|
||||
line-height: 1;
|
||||
|
||||
&-count {
|
||||
height: @badge-height;
|
||||
border-radius: @badge-height / 2;
|
||||
min-width: @badge-height;
|
||||
background: @highlight-color;
|
||||
color: @badge-text-color;
|
||||
line-height: @badge-height;
|
||||
text-align: center;
|
||||
padding: 0 6px;
|
||||
font-size: @badge-font-size;
|
||||
font-weight: @badge-font-weight;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 0 0 1px @shadow-color-inverse;
|
||||
z-index: @zindex-badge;
|
||||
min-width: @badge-height;
|
||||
height: @badge-height;
|
||||
padding: 0 6px;
|
||||
color: @badge-text-color;
|
||||
font-weight: @badge-font-weight;
|
||||
font-size: @badge-font-size;
|
||||
line-height: @badge-height;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background: @highlight-color;
|
||||
border-radius: @badge-height / 2;
|
||||
box-shadow: 0 0 0 1px @shadow-color-inverse;
|
||||
a,
|
||||
a:hover {
|
||||
color: @badge-text-color;
|
||||
@ -36,11 +36,11 @@
|
||||
}
|
||||
|
||||
&-dot {
|
||||
height: @badge-dot-size;
|
||||
width: @badge-dot-size;
|
||||
border-radius: 100%;
|
||||
background: @highlight-color;
|
||||
z-index: @zindex-badge;
|
||||
width: @badge-dot-size;
|
||||
height: @badge-dot-size;
|
||||
background: @highlight-color;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 0 1px @shadow-color-inverse;
|
||||
}
|
||||
|
||||
@ -48,8 +48,8 @@
|
||||
&-dot,
|
||||
.@{number-prefix-cls}-custom-component {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
transform-origin: 100% 0%;
|
||||
}
|
||||
@ -59,30 +59,30 @@
|
||||
vertical-align: baseline;
|
||||
|
||||
&-dot {
|
||||
width: @badge-status-size;
|
||||
height: @badge-status-size;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
width: @badge-status-size;
|
||||
height: @badge-status-size;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-success {
|
||||
background-color: @success-color;
|
||||
}
|
||||
&-processing {
|
||||
background-color: @processing-color;
|
||||
position: relative;
|
||||
&:after {
|
||||
background-color: @processing-color;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 1px solid @processing-color;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
animation: antStatusProcessing 1.2s infinite ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
&-default {
|
||||
@ -95,9 +95,9 @@
|
||||
background-color: @warning-color;
|
||||
}
|
||||
&-text {
|
||||
margin-left: 8px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,9 +116,9 @@
|
||||
vertical-align: middle;
|
||||
|
||||
.@{ant-prefix}-scroll-number {
|
||||
position: relative;
|
||||
top: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.@{badge-prefix-cls}-count {
|
||||
@ -142,8 +142,8 @@
|
||||
overflow: hidden;
|
||||
&-only {
|
||||
display: inline-block;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
height: @badge-height;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
> p {
|
||||
height: @badge-height;
|
||||
margin: 0;
|
||||
@ -153,8 +153,8 @@
|
||||
|
||||
@keyframes antZoomBadgeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0) translate(50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translate(50%, -50%);
|
||||
@ -166,7 +166,7 @@
|
||||
transform: scale(1) translate(50%, -50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0) translate(50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ subtitle: 按钮
|
||||
|
||||
## API
|
||||
|
||||
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
|
||||
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
||||
|
||||
按钮的属性说明如下：
|
||||
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
// Ref: https://github.com/ant-design/ant-design/issues/7034
|
||||
> i,
|
||||
> span {
|
||||
pointer-events: none;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
@ -78,20 +78,20 @@
|
||||
.btn-circle(@btn-prefix-cls);
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
background: @component-background;
|
||||
opacity: 0.35;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
background: @component-background;
|
||||
border-radius: inherit;
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
@ -107,14 +107,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&&-loading:before {
|
||||
&&-loading::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
|
||||
position: relative;
|
||||
padding-left: 29px;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
.@{iconfont-css-prefix}:not(:last-child) {
|
||||
margin-left: -14px;
|
||||
}
|
||||
@ -132,8 +132,8 @@
|
||||
}
|
||||
|
||||
&:not(&-circle):not(&-circle-outline)&-icon-only {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
// http://stackoverflow.com/a/21281554/3040605
|
||||
@ -149,9 +149,9 @@
|
||||
}
|
||||
|
||||
&-background-ghost {
|
||||
color: @component-background;
|
||||
background: transparent !important;
|
||||
border-color: @component-background;
|
||||
color: @component-background;
|
||||
}
|
||||
|
||||
&-background-ghost&-primary {
|
||||
@ -162,13 +162,13 @@
|
||||
.button-variant-ghost(@btn-danger-color);
|
||||
}
|
||||
|
||||
&-two-chinese-chars:first-letter {
|
||||
&-two-chinese-chars::first-letter {
|
||||
letter-spacing: 0.34em;
|
||||
}
|
||||
|
||||
&-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
|
||||
letter-spacing: 0.34em;
|
||||
margin-right: -0.34em;
|
||||
letter-spacing: 0.34em;
|
||||
}
|
||||
|
||||
&-block {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
// mixins for button
|
||||
// ------------------------
|
||||
.button-size(@height; @padding; @font-size; @border-radius) {
|
||||
height: @height;
|
||||
padding: @padding;
|
||||
font-size: @font-size;
|
||||
border-radius: @border-radius;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.button-disabled() {
|
||||
@ -105,14 +105,14 @@
|
||||
// http://stackoverflow.com/a/17253457
|
||||
> a:only-child {
|
||||
color: currentColor;
|
||||
&:after {
|
||||
content: '';
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -150,19 +150,19 @@
|
||||
// Base styles of buttons
|
||||
// --------------------------------------------------
|
||||
.btn() {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: @btn-font-weight;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
white-space: nowrap;
|
||||
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
|
||||
user-select: none;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
position: relative;
|
||||
box-shadow: @btn-shadow;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
|
||||
> .@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
}
|
||||
@ -203,8 +203,8 @@
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: @btn-default-bg;
|
||||
text-decoration: none;
|
||||
background: @btn-default-bg;
|
||||
}
|
||||
}
|
||||
// ghost button style
|
||||
@ -278,13 +278,13 @@
|
||||
}
|
||||
> .@{btnClassName}:first-child:not(:last-child),
|
||||
> span:first-child:not(:last-child) > .@{btnClassName} {
|
||||
border-bottom-left-radius: @btn-border-radius-base;
|
||||
border-top-left-radius: @btn-border-radius-base;
|
||||
border-bottom-left-radius: @btn-border-radius-base;
|
||||
}
|
||||
> .@{btnClassName}:last-child:not(:first-child),
|
||||
> span:last-child:not(:first-child) > .@{btnClassName} {
|
||||
border-bottom-right-radius: @btn-border-radius-base;
|
||||
border-top-right-radius: @btn-border-radius-base;
|
||||
border-bottom-right-radius: @btn-border-radius-base;
|
||||
}
|
||||
&-sm {
|
||||
> .@{btnClassName}:only-child {
|
||||
@ -295,13 +295,13 @@
|
||||
}
|
||||
> .@{btnClassName}:first-child:not(:last-child),
|
||||
> span:first-child:not(:last-child) > .@{btnClassName} {
|
||||
border-bottom-left-radius: @btn-border-radius-sm;
|
||||
border-top-left-radius: @btn-border-radius-sm;
|
||||
border-bottom-left-radius: @btn-border-radius-sm;
|
||||
}
|
||||
> .@{btnClassName}:last-child:not(:first-child),
|
||||
> span:last-child:not(:first-child) > .@{btnClassName} {
|
||||
border-bottom-right-radius: @btn-border-radius-sm;
|
||||
border-top-right-radius: @btn-border-radius-sm;
|
||||
border-bottom-right-radius: @btn-border-radius-sm;
|
||||
}
|
||||
}
|
||||
& > & {
|
||||
@ -312,14 +312,14 @@
|
||||
}
|
||||
& > &:first-child:not(:last-child) {
|
||||
> .@{btnClassName}:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-right: 8px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
padding-left: 8px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,6 +33,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<i
|
||||
@ -82,6 +83,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<i
|
||||
|
||||
@ -5,16 +5,24 @@
|
||||
|
||||
.@{full-calendar-prefix-cls} {
|
||||
.reset-component;
|
||||
outline: none;
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
outline: none;
|
||||
|
||||
.@{ant-prefix}-select&-year-select {
|
||||
min-width: 90px;
|
||||
|
||||
&.@{ant-prefix}-select-sm {
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-select&-month-select {
|
||||
margin-left: 8px;
|
||||
min-width: 80px;
|
||||
margin-left: 8px;
|
||||
|
||||
&.@{ant-prefix}-select-sm {
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
@ -32,8 +40,8 @@
|
||||
|
||||
label.@{ant-prefix}-radio-button {
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
padding: 0 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,11 +55,11 @@
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 256px;
|
||||
background-color: transparent;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
@ -65,14 +73,14 @@
|
||||
}
|
||||
|
||||
&-calendar-table {
|
||||
border-spacing: 0;
|
||||
margin-bottom: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
&-column-header {
|
||||
line-height: 18px;
|
||||
padding: 0;
|
||||
width: 33px;
|
||||
padding: 0;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
.@{full-calendar-prefix-cls}-column-header-inner {
|
||||
display: block;
|
||||
@ -94,14 +102,14 @@
|
||||
|
||||
&-value {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
color: @text-color;
|
||||
border-radius: @border-radius-sm;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
line-height: 24px;
|
||||
background: transparent;
|
||||
border-radius: @border-radius-sm;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
@ -110,8 +118,8 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,8 +134,8 @@
|
||||
|
||||
&-selected-day &-value,
|
||||
&-month-panel-selected-cell &-value {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
&-disabled-cell-first-of-row &-value {
|
||||
@ -146,16 +154,16 @@
|
||||
}
|
||||
|
||||
&-month-panel-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: -9px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-fullscreen {
|
||||
@ -178,12 +186,12 @@
|
||||
|
||||
&-fullscreen &-month,
|
||||
&-fullscreen &-date {
|
||||
text-align: left;
|
||||
margin: 0 4px;
|
||||
display: block;
|
||||
color: @text-color;
|
||||
height: 116px;
|
||||
margin: 0 4px;
|
||||
padding: 4px 8px;
|
||||
color: @text-color;
|
||||
text-align: left;
|
||||
border-top: 2px solid @border-color-split;
|
||||
transition: background 0.3s;
|
||||
|
||||
@ -198,15 +206,15 @@
|
||||
}
|
||||
|
||||
&-fullscreen &-column-header {
|
||||
text-align: right;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-fullscreen &-value {
|
||||
width: auto;
|
||||
text-align: right;
|
||||
background: transparent;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-fullscreen &-today &-value {
|
||||
@ -215,8 +223,8 @@
|
||||
|
||||
&-fullscreen &-month-panel-current-cell &-month,
|
||||
&-fullscreen &-today &-date {
|
||||
border-top-color: @primary-color;
|
||||
background: transparent;
|
||||
border-top-color: @primary-color;
|
||||
}
|
||||
|
||||
&-fullscreen &-month-panel-current-cell &-value,
|
||||
@ -240,12 +248,10 @@
|
||||
}
|
||||
|
||||
&-fullscreen &-content {
|
||||
height: 88px;
|
||||
overflow-y: auto;
|
||||
position: static;
|
||||
width: auto;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
height: 88px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&-disabled-cell &-date {
|
||||
@ -263,9 +269,9 @@
|
||||
}
|
||||
|
||||
&-disabled-cell &-value {
|
||||
width: auto;
|
||||
color: @disabled-color;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -539,35 +539,6 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -117,35 +117,6 @@ exports[`Card should still have padding when card which set padding to 0 is load
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left: -4px; margin-right: -4px;"
|
||||
>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left: 4px; padding-right: 4px;"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left: 4px; padding-right: 4px;"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left: 4px; padding-right: 4px;"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -228,17 +228,6 @@ export default class Card extends React.Component<CardProps, CardState> {
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8}>
|
||||
<Col span={8}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -10,16 +10,16 @@
|
||||
|
||||
.@{card-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
background: @component-background;
|
||||
border-radius: @card-radius;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
|
||||
&-hoverable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: @card-shadow;
|
||||
border-color: @card-hover-border;
|
||||
box-shadow: @card-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,16 +28,16 @@
|
||||
}
|
||||
|
||||
&-head {
|
||||
background: @card-head-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
padding: 0 @card-padding-base;
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
.clearfix;
|
||||
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
min-height: @card-head-height;
|
||||
font-size: @font-size-lg;
|
||||
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
padding: 0 @card-padding-base;
|
||||
color: @card-head-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
background: @card-head-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
.clearfix;
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
@ -45,20 +45,20 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
padding: @card-head-padding 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-tabs {
|
||||
margin-bottom: -17px;
|
||||
clear: both;
|
||||
font-size: @font-size-base;
|
||||
margin-bottom: -17px;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&-bar {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
@ -68,12 +68,12 @@
|
||||
|
||||
&-extra {
|
||||
float: right;
|
||||
padding: @card-head-padding 0;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
// https://stackoverflow.com/a/22429853/3040605
|
||||
margin-left: auto;
|
||||
padding: @card-head-padding 0;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-body {
|
||||
@ -87,14 +87,14 @@
|
||||
}
|
||||
|
||||
&-grid {
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
padding: @card-padding-base;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
|
||||
1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
|
||||
0 1px 0 0 @border-color-split inset;
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
padding: @card-padding-base;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
position: relative;
|
||||
@ -104,8 +104,8 @@
|
||||
}
|
||||
|
||||
&-contain-tabs > &-head &-head-title {
|
||||
padding-bottom: 0;
|
||||
min-height: @card-head-height - @card-head-padding;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&-contain-tabs &-extra {
|
||||
@ -114,8 +114,8 @@
|
||||
|
||||
&-cover {
|
||||
> * {
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
@ -123,26 +123,26 @@
|
||||
}
|
||||
|
||||
&-actions {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
background: @card-actions-background;
|
||||
.clearfix;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: @card-actions-background;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
.clearfix;
|
||||
|
||||
& > li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
color: @text-color-secondary;
|
||||
text-align: center;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
min-width: 32px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
@ -155,10 +155,10 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: @text-color-secondary;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: @text-color-secondary;
|
||||
line-height: 22px;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
@ -208,8 +208,8 @@
|
||||
.clearfix;
|
||||
|
||||
&-avatar {
|
||||
padding-right: 16px;
|
||||
float: left;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
&-detail {
|
||||
@ -220,12 +220,12 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: @font-size-lg;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: @card-head-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-description {
|
||||
@ -235,17 +235,6 @@
|
||||
|
||||
&-loading {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: @card-padding-base;
|
||||
background: @component-background;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-loading &-body {
|
||||
@ -261,10 +250,10 @@
|
||||
&-loading-block {
|
||||
height: 14px;
|
||||
margin: 4px 0;
|
||||
border-radius: @card-radius;
|
||||
background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
|
||||
animation: card-loading 1.4s ease infinite;
|
||||
background-size: 600% 600%;
|
||||
border-radius: @card-radius;
|
||||
animation: card-loading 1.4s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
@ -43,17 +43,17 @@
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
display: none;
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
@ -75,8 +76,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -103,43 +102,43 @@
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
&:before {
|
||||
background: transparent;
|
||||
outline: none;
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.slick-disabled:before {
|
||||
&.slick-disabled::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
&:before {
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
&:before {
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
}
|
||||
@ -148,43 +147,43 @@
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: @carousel-dot-height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
margin: 0 2px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
button {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background: @component-background;
|
||||
opacity: 0.3;
|
||||
display: block;
|
||||
width: @carousel-dot-width;
|
||||
height: @carousel-dot-height;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
background: @component-background;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
outline: none;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
opacity: 0.3;
|
||||
transition: all 0.5s;
|
||||
padding: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
&.slick-active button {
|
||||
width: @carousel-dot-active-width;
|
||||
background: @component-background;
|
||||
opacity: 1;
|
||||
width: @carousel-dot-active-width;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
@ -196,12 +195,12 @@
|
||||
|
||||
.@{ant-prefix}-carousel-vertical {
|
||||
.slick-dots {
|
||||
width: @carousel-dot-height;
|
||||
bottom: auto;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 12px;
|
||||
bottom: auto;
|
||||
width: @carousel-dot-height;
|
||||
height: auto;
|
||||
transform: translateY(-50%);
|
||||
li {
|
||||
margin: 0 2px;
|
||||
vertical-align: baseline;
|
||||
|
||||
@ -8,12 +8,12 @@
|
||||
.reset-component;
|
||||
|
||||
&-input.@{ant-prefix}-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// 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;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-picker-show-search &-input.@{ant-prefix}-input {
|
||||
@ -24,10 +24,10 @@
|
||||
.reset-component;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&-with-value &-label {
|
||||
@ -35,9 +35,9 @@
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
background: @input-disabled-bg;
|
||||
color: @disabled-color;
|
||||
background: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
.@{cascader-prefix-cls}-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@ -53,32 +53,32 @@
|
||||
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
padding: 0 @control-padding-horizontal;
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 0 @control-padding-horizontal;
|
||||
}
|
||||
|
||||
&-clear {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal;
|
||||
z-index: 2;
|
||||
background: @component-background;
|
||||
top: 50%;
|
||||
font-size: @font-size-sm;
|
||||
color: @disabled-color;
|
||||
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;
|
||||
@ -92,15 +92,15 @@
|
||||
// arrow
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 12px;
|
||||
margin-top: -6px;
|
||||
line-height: 12px;
|
||||
color: @disabled-color;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
transition: transform 0.2s;
|
||||
&&-expand {
|
||||
transform: rotate(180deg);
|
||||
@ -114,19 +114,19 @@
|
||||
}
|
||||
|
||||
&-menus {
|
||||
font-size: @font-size-base;
|
||||
background: @component-background;
|
||||
position: absolute;
|
||||
z-index: @zindex-dropdown;
|
||||
font-size: @font-size-base;
|
||||
white-space: nowrap;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
white-space: nowrap;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&-empty,
|
||||
@ -153,22 +153,22 @@
|
||||
}
|
||||
&-menu {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
min-width: 111px;
|
||||
height: 180px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
list-style: none;
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
|
||||
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
&:last-child {
|
||||
border-right-color: transparent;
|
||||
margin-right: -1px;
|
||||
border-right-color: transparent;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
&:only-child {
|
||||
@ -178,15 +178,15 @@
|
||||
&-menu-item {
|
||||
padding: 5px @control-padding-horizontal;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
background: @item-hover-bg;
|
||||
}
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
@ -194,8 +194,8 @@
|
||||
&-active:not(&-disabled) {
|
||||
&,
|
||||
&:hover {
|
||||
background: @background-color-base;
|
||||
font-weight: 600;
|
||||
background: @background-color-base;
|
||||
}
|
||||
}
|
||||
&-expand {
|
||||
@ -206,9 +206,9 @@
|
||||
&-expand &-expand-icon,
|
||||
&-expand &-loading-icon {
|
||||
.iconfont-size-under-12px(10px);
|
||||
color: @text-color-secondary;
|
||||
position: absolute;
|
||||
right: @control-padding-horizontal;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
& &-keyword {
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
// 一般状态
|
||||
.@{checkbox-prefix-cls} {
|
||||
.reset-component;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
top: -0.09em;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
top: -0.09em;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
|
||||
&:hover &-inner,
|
||||
@ -20,22 +20,22 @@
|
||||
border-color: @checkbox-color;
|
||||
}
|
||||
|
||||
&-checked:after {
|
||||
&-checked::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @border-radius-sm;
|
||||
border: 1px solid @checkbox-color;
|
||||
content: '';
|
||||
border-radius: @border-radius-sm;
|
||||
visibility: hidden;
|
||||
animation: antCheckboxEffect 0.36s ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &:after {
|
||||
&:hover::after,
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -46,18 +46,17 @@
|
||||
display: block;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
background-color: @checkbox-check-color;
|
||||
border: @checkbox-border-width @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-sm;
|
||||
background-color: @checkbox-check-color;
|
||||
transition: all 0.3s;
|
||||
// Fix IE checked style
|
||||
// https://github.com/ant-design/ant-design/issues/12597
|
||||
border-collapse: separate;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@check-width: (@checkbox-size / 14) * 5px;
|
||||
@check-height: (@checkbox-size / 14) * 8px;
|
||||
transform: rotate(45deg) scale(0) translate(-50%, -50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 21%;
|
||||
@ -67,37 +66,38 @@
|
||||
border: 2px solid @checkbox-check-color;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
transition: all 0.1s @ease-in-back, opacity 0.1s;
|
||||
transform: rotate(45deg) scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: all 0.1s @ease-in-back, opacity 0.1s;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态
|
||||
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
|
||||
transform: rotate(45deg) scale(1) translate(-50%, -50%);
|
||||
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
|
||||
position: absolute;
|
||||
display: table;
|
||||
border: 2px solid @checkbox-check-color;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
transition: all 0.2s @ease-out-back 0.1s;
|
||||
transform: rotate(45deg) scale(1) translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
transition: all 0.2s @ease-out-back 0.1s;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-checked {
|
||||
@ -111,9 +111,9 @@
|
||||
cursor: not-allowed;
|
||||
|
||||
&.@{checkbox-prefix-cls}-checked {
|
||||
.@{checkbox-inner-prefix-cls}:after {
|
||||
animation-name: none;
|
||||
.@{checkbox-inner-prefix-cls}::after {
|
||||
border-color: @disabled-color;
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,12 +122,12 @@
|
||||
}
|
||||
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @border-color-base !important;
|
||||
background-color: @input-disabled-bg;
|
||||
&:after {
|
||||
animation-name: none;
|
||||
border-color: @border-color-base !important;
|
||||
&::after {
|
||||
border-color: @input-disabled-bg;
|
||||
border-collapse: separate;
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,9 +139,9 @@
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper {
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
line-height: unset;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
& + & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -149,8 +149,8 @@
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper + span,
|
||||
.@{checkbox-prefix-cls} + span {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-group {
|
||||
@ -174,23 +174,23 @@
|
||||
background-color: #fff;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
.@{checkbox-inner-prefix-cls}:after {
|
||||
.@{checkbox-inner-prefix-cls}::after {
|
||||
@indeterminate-width: @checkbox-size - 8px;
|
||||
@indeterminate-height: @checkbox-size - 8px;
|
||||
content: ' ';
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
border: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: @indeterminate-width;
|
||||
height: @indeterminate-height;
|
||||
background-color: @checkbox-color;
|
||||
border: 0;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
|
||||
border-color: @disabled-color;
|
||||
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
|
||||
background-color: @disabled-color;
|
||||
border-color: @disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
.@{collapse-prefix-cls} {
|
||||
.reset-component;
|
||||
background-color: @collapse-header-bg;
|
||||
border-radius: @border-radius-base;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom: 0;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
& > &-item {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
@ -21,24 +21,23 @@
|
||||
}
|
||||
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding: @collapse-header-padding;
|
||||
color: @heading-color;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
.iconfont-mixin();
|
||||
font-size: @font-size-sm;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 46px;
|
||||
vertical-align: top;
|
||||
top: 50%;
|
||||
margin-top: 2px;
|
||||
transform: translateY(-50%);
|
||||
left: @padding-md;
|
||||
display: inline-block;
|
||||
margin-top: 2px;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 46px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
& svg {
|
||||
transition: transform 0.24s;
|
||||
@ -108,8 +107,8 @@
|
||||
& &-item-disabled > &-header {
|
||||
&,
|
||||
& > .arrow {
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,6 +164,9 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
|
||||
rows="4"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -188,6 +191,9 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
position: relative;
|
||||
|
||||
&-inner {
|
||||
padding: @comment-padding-base;
|
||||
display: flex;
|
||||
padding: @comment-padding-base;
|
||||
}
|
||||
|
||||
&-avatar {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
@ -25,28 +25,28 @@
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px;
|
||||
font-size: 14px;
|
||||
word-wrap: break-word;
|
||||
|
||||
&-author {
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
& > a,
|
||||
& > span {
|
||||
height: 18px;
|
||||
padding-right: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
transition: color 0.3s;
|
||||
font-size: 14px;
|
||||
color: @comment-author-name-color;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s;
|
||||
> * {
|
||||
color: @comment-author-name-color;
|
||||
&:hover {
|
||||
@ -56,9 +56,9 @@
|
||||
}
|
||||
|
||||
&-time {
|
||||
cursor: auto;
|
||||
color: @comment-author-time-color;
|
||||
white-space: nowrap;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,10 +75,10 @@
|
||||
color: @comment-action-color;
|
||||
> span {
|
||||
padding-right: 10px;
|
||||
transition: color 0.3s;
|
||||
font-size: 12px;
|
||||
color: @comment-action-color;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
color: @comment-action-hover-color;
|
||||
|
||||
@ -7043,9 +7043,13 @@ exports[`ConfigProvider components Form configProvider 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="config-form-explain"
|
||||
class="config-form-explain-holder"
|
||||
>
|
||||
Bamboo is Light
|
||||
<span
|
||||
class="config-form-explain"
|
||||
>
|
||||
Bamboo is Light
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -7076,9 +7080,13 @@ exports[`ConfigProvider components Form normal 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
Bamboo is Light
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
Bamboo is Light
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -7109,9 +7117,13 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="prefix-Form-explain"
|
||||
class="prefix-Form-explain-holder"
|
||||
>
|
||||
Bamboo is Light
|
||||
<span
|
||||
class="prefix-Form-explain"
|
||||
>
|
||||
Bamboo is Light
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -59,6 +59,10 @@ class ControlledRangePicker extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
handleChange = (value) => {
|
||||
this.setState({ value });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, mode } = this.state;
|
||||
return (
|
||||
@ -67,6 +71,7 @@ class ControlledRangePicker extends React.Component {
|
||||
format="YYYY-MM"
|
||||
value={value}
|
||||
mode={mode}
|
||||
onChange={this.handleChange}
|
||||
onPanelChange={this.handlePanelChange}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
user-select: none;
|
||||
|
||||
a:hover {
|
||||
color: @link-hover-color;
|
||||
@ -13,10 +13,10 @@
|
||||
.@{calendar-prefix-cls}-decade-select,
|
||||
.@{calendar-prefix-cls}-year-select,
|
||||
.@{calendar-prefix-cls}-month-select {
|
||||
padding: 0 2px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 0 2px;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
@ -37,11 +37,11 @@
|
||||
.@{calendar-prefix-cls}-next-year-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: @text-color-secondary;
|
||||
font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 16px;
|
||||
font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
.@{calendar-prefix-cls}-prev-year-btn {
|
||||
left: 7px;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '«';
|
||||
}
|
||||
}
|
||||
@ -60,7 +60,7 @@
|
||||
.@{calendar-prefix-cls}-next-year-btn {
|
||||
right: 7px;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '»';
|
||||
}
|
||||
}
|
||||
@ -68,7 +68,7 @@
|
||||
.@{calendar-prefix-cls}-prev-month-btn {
|
||||
left: 29px;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '‹';
|
||||
}
|
||||
}
|
||||
@ -76,7 +76,7 @@
|
||||
.@{calendar-prefix-cls}-next-month-btn {
|
||||
right: 29px;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '›';
|
||||
}
|
||||
}
|
||||
@ -84,17 +84,17 @@
|
||||
|
||||
.@{calendar-prefix-cls} {
|
||||
position: relative;
|
||||
outline: none;
|
||||
width: 280px;
|
||||
border: @border-width-base @border-style-base @border-color-inverse;
|
||||
list-style: none;
|
||||
font-size: @font-size-base;
|
||||
text-align: left;
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
background-clip: padding-box;
|
||||
line-height: @line-height-base;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: @component-background;
|
||||
background-clip: padding-box;
|
||||
border: @border-width-base @border-style-base @border-color-inverse;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
&-input-wrap {
|
||||
height: 34px;
|
||||
@ -103,13 +103,13 @@
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
outline: 0;
|
||||
height: 22px;
|
||||
color: @input-color;
|
||||
background: @input-bg;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: auto;
|
||||
.placeholder;
|
||||
}
|
||||
|
||||
@ -130,28 +130,28 @@
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 0;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&-calendar-table {
|
||||
border-spacing: 0;
|
||||
margin-bottom: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
&-column-header {
|
||||
line-height: 18px;
|
||||
width: 33px;
|
||||
padding: 6px 0;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
.@{calendar-prefix-cls}-column-header-inner {
|
||||
display: block;
|
||||
@ -166,22 +166,22 @@
|
||||
}
|
||||
|
||||
&-cell {
|
||||
padding: 3px 0;
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
&-date {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
color: @text-color;
|
||||
border-radius: @border-radius-sm;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
border-radius: @border-radius-sm;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&-panel {
|
||||
@ -201,9 +201,9 @@
|
||||
}
|
||||
|
||||
&-today &-date {
|
||||
border-color: @primary-color;
|
||||
font-weight: bold;
|
||||
color: @primary-color;
|
||||
font-weight: bold;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
|
||||
&-last-month-cell &-date,
|
||||
@ -219,8 +219,8 @@
|
||||
&-selected-start-date,
|
||||
&-selected-end-date {
|
||||
.@{calendar-prefix-cls}-date {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
|
||||
&:hover {
|
||||
@ -230,12 +230,12 @@
|
||||
}
|
||||
|
||||
&-disabled-cell &-date {
|
||||
cursor: not-allowed;
|
||||
width: auto;
|
||||
color: @disabled-color;
|
||||
background: @disabled-bg;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
border-radius: 0;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background: @disabled-bg;
|
||||
@ -245,8 +245,7 @@
|
||||
position: relative;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
&:before {
|
||||
content: ' ';
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 5px;
|
||||
@ -254,6 +253,7 @@
|
||||
height: 24px;
|
||||
border: @border-width-base @border-style-base @disabled-color;
|
||||
border-radius: @border-radius-sm;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
@ -268,15 +268,15 @@
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
line-height: 38px;
|
||||
padding: 0 12px;
|
||||
line-height: 38px;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
&:empty {
|
||||
border-top: 0;
|
||||
}
|
||||
&-btn {
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
&-extra {
|
||||
text-align: left;
|
||||
@ -286,8 +286,8 @@
|
||||
.@{calendar-prefix-cls}-today-btn,
|
||||
.@{calendar-prefix-cls}-clear-btn {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 0 0 8px;
|
||||
text-align: center;
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
@ -298,30 +298,30 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-clear-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 5px;
|
||||
text-indent: -76px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
top: 7px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
text-indent: -76px;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-clear-btn:after {
|
||||
font-size: @font-size-base;
|
||||
color: @disabled-color;
|
||||
.@{calendar-prefix-cls}-clear-btn::after {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
width: 20px;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1;
|
||||
text-indent: 43px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-clear-btn:hover:after {
|
||||
.@{calendar-prefix-cls}-clear-btn:hover::after {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
.@{calendar-prefix-cls}-decade-panel {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-picker-panel;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
@ -32,26 +32,26 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-decade-panel-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-decade-panel-cell {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-decade-panel-decade {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
color: @text-color;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto;
|
||||
padding: 0 6px;
|
||||
color: @text-color;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border-radius: @border-radius-sm;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
@ -62,19 +62,19 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-decade-panel-last-century-cell,
|
||||
.@{calendar-prefix-cls}-decade-panel-next-century-cell {
|
||||
.@{calendar-prefix-cls}-decade-panel-decade {
|
||||
user-select: none;
|
||||
color: @disabled-color;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-picker-panel;
|
||||
border-radius: @border-radius-base;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
||||
> div {
|
||||
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,19 +37,19 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-month-panel-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,22 +59,22 @@
|
||||
&-disabled .@{calendar-prefix-cls}-month-panel-month {
|
||||
&,
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
background: @disabled-bg;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-month-panel-month {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
color: @text-color;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto;
|
||||
padding: 0 8px;
|
||||
color: @text-color;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border-radius: @border-radius-sm;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
.@{calendar-prefix-cls}-picker-container {
|
||||
.reset-component;
|
||||
font-family: @font-family;
|
||||
position: absolute;
|
||||
z-index: @zindex-picker;
|
||||
font-family: @font-family;
|
||||
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-topRight,
|
||||
@ -58,26 +58,26 @@
|
||||
&-clear,
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal;
|
||||
z-index: 1;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: @control-padding-horizontal;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
line-height: 14px;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 14px;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-clear {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
font-size: @font-size-base;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-base;
|
||||
background: @input-bg;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
@ -89,9 +89,9 @@
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: @font-size-base;
|
||||
color: @disabled-color;
|
||||
display: inline-block;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@input-box-height: 34px;
|
||||
|
||||
.@{calendar-prefix-cls}-range-picker-input {
|
||||
width: 44%;
|
||||
height: 99%;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
height: 99%;
|
||||
outline: 0;
|
||||
width: 44%;
|
||||
text-align: center;
|
||||
.placeholder();
|
||||
|
||||
&[disabled] {
|
||||
@ -15,10 +15,10 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-range-picker-separator {
|
||||
color: @text-color-secondary;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
color: @text-color-secondary;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@ -28,16 +28,16 @@
|
||||
|
||||
.@{calendar-prefix-cls}-date-panel {
|
||||
&::after {
|
||||
content: '.';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
content: '.';
|
||||
}
|
||||
}
|
||||
&-part {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&-left {
|
||||
@ -62,11 +62,11 @@
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
margin-left: -132px;
|
||||
text-align: center;
|
||||
height: @input-box-height;
|
||||
line-height: @input-box-height;
|
||||
margin-left: -132px;
|
||||
color: @text-color-secondary;
|
||||
line-height: @input-box-height;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-right .@{calendar-prefix-cls}-date-input-wrap {
|
||||
@ -90,10 +90,10 @@
|
||||
.@{calendar-timepicker-prefix-cls}-input {
|
||||
.input;
|
||||
height: @input-height-sm;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
@ -127,23 +127,23 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-in-range-cell {
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
> div {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background: @item-active-bg;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
background: @item-active-bg;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@ -173,18 +173,18 @@
|
||||
|
||||
&.@{calendar-prefix-cls}-time {
|
||||
.@{calendar-timepicker-prefix-cls} {
|
||||
height: 207px;
|
||||
width: 100%;
|
||||
top: 68px;
|
||||
z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
|
||||
width: 100%;
|
||||
height: 207px;
|
||||
&-panel {
|
||||
height: 267px;
|
||||
margin-top: -34px;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
padding-top: 40px;
|
||||
height: 100%;
|
||||
padding-top: 40px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@ -205,8 +205,8 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
.@{calendar-prefix-cls}-today-btn {
|
||||
margin: 8px 12px;
|
||||
height: 22px;
|
||||
margin: 8px 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
.@{calendar-timepicker-prefix-cls} {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 40px;
|
||||
width: 100%;
|
||||
background-color: @component-background;
|
||||
|
||||
&-panel {
|
||||
z-index: @zindex-picker;
|
||||
position: absolute;
|
||||
z-index: @zindex-picker;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
outline: none;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: @component-background;
|
||||
background-clip: padding-box;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
&-combobox {
|
||||
width: 100%;
|
||||
@ -46,21 +46,21 @@
|
||||
}
|
||||
|
||||
&-select {
|
||||
position: relative; // Fix chrome weird render bug
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 226px;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-base;
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative; // Fix chrome weird render bug
|
||||
height: 226px;
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -68,31 +68,31 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-height: 206px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 32px;
|
||||
list-style: none;
|
||||
box-sizing: content-box;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding-left: 32px;
|
||||
line-height: 24px;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li:last-child:after {
|
||||
content: '';
|
||||
height: 202px;
|
||||
li:last-child::after {
|
||||
display: block;
|
||||
height: 202px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
li:hover {
|
||||
@ -100,8 +100,8 @@
|
||||
}
|
||||
|
||||
li&-option-selected {
|
||||
background: @time-picker-selected-bg;
|
||||
font-weight: bold;
|
||||
background: @time-picker-selected-bg;
|
||||
}
|
||||
|
||||
li&-option-disabled {
|
||||
@ -116,10 +116,10 @@
|
||||
|
||||
.@{calendar-prefix-cls}-time {
|
||||
.@{calendar-prefix-cls}-day-select {
|
||||
padding: 0 2px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 0 2px;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
|
||||
@ -3,19 +3,19 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
.@{calendar-prefix-cls}-body tr {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
background: @primary-1;
|
||||
}
|
||||
&.@{calendar-prefix-cls}-active-week {
|
||||
background: @primary-2;
|
||||
font-weight: bold;
|
||||
background: @primary-2;
|
||||
}
|
||||
.@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
|
||||
.@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-picker-panel;
|
||||
border-radius: @border-radius-base;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
||||
> div {
|
||||
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,9 +37,9 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-year-panel-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
@ -49,13 +49,13 @@
|
||||
|
||||
.@{calendar-prefix-cls}-year-panel-year {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
color: @text-color;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto;
|
||||
padding: 0 8px;
|
||||
color: @text-color;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border-radius: @border-radius-sm;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
@ -66,19 +66,19 @@
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-year-panel-last-decade-cell,
|
||||
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
|
||||
.@{calendar-prefix-cls}-year-panel-year {
|
||||
user-select: none;
|
||||
color: @disabled-color;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,43 +9,43 @@
|
||||
|
||||
&, /* for compatiable */
|
||||
&-vertical {
|
||||
margin: 0 8px;
|
||||
display: inline-block;
|
||||
height: 0.9em;
|
||||
width: 1px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -0.06em;
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 0.9em;
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&-horizontal {
|
||||
display: block;
|
||||
height: 1px;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
|
||||
height: 1px;
|
||||
margin: 24px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text,
|
||||
&-horizontal&-with-text-left,
|
||||
&-horizontal&-with-text-right {
|
||||
display: table;
|
||||
margin: 16px 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-lg;
|
||||
margin: 16px 0;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
&::before,
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
border-top: 1px solid @border-color-split;
|
||||
transform: translateY(50%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,22 +58,22 @@
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&:before {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: 5%;
|
||||
}
|
||||
&:after {
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&:before {
|
||||
&::before {
|
||||
top: 50%;
|
||||
width: 95%;
|
||||
}
|
||||
&:after {
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 5%;
|
||||
}
|
||||
@ -92,8 +92,8 @@
|
||||
&-horizontal&-with-text-left&-dashed,
|
||||
&-horizontal&-with-text-right&-dashed {
|
||||
border-top: 0;
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
border-style: dashed none none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
.@{drawer-prefix-cls} {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: @zindex-modal;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
z-index: @zindex-modal;
|
||||
> * {
|
||||
transition: transform @animation-duration-slow @ease-base-in;
|
||||
}
|
||||
@ -93,53 +93,53 @@
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
.@{drawer-prefix-cls} {
|
||||
&-mask {
|
||||
opacity: 0.3;
|
||||
height: 100%;
|
||||
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
|
||||
opacity: 0.3;
|
||||
transition: none;
|
||||
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
background-color: @component-background;
|
||||
border: 0;
|
||||
background-clip: padding-box;
|
||||
z-index: 1;
|
||||
background-color: @component-background;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&-close {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: @zindex-popup-close;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: color @animation-duration-slow;
|
||||
color: @text-color-secondary;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 0;
|
||||
color: @text-color-secondary;
|
||||
font-weight: 700;
|
||||
font-size: @font-size-lg;
|
||||
font-style: normal;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
transition: color @animation-duration-slow;
|
||||
text-rendering: auto;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@ -149,17 +149,17 @@
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 16px 24px;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
background: @component-background;
|
||||
color: @text-color;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: @text-color;
|
||||
background: @component-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&-header-no-title {
|
||||
background: @component-background;
|
||||
color: @text-color;
|
||||
background: @component-background;
|
||||
}
|
||||
|
||||
&-body {
|
||||
@ -173,8 +173,8 @@
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
background-color: @modal-mask-bg;
|
||||
opacity: 0;
|
||||
filter: ~'alpha(opacity=50)';
|
||||
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
|
||||
}
|
||||
|
||||
@ -6,20 +6,20 @@
|
||||
.@{dropdown-prefix-cls} {
|
||||
.reset-component;
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
right: 0;
|
||||
bottom: -7px;
|
||||
content: ' ';
|
||||
opacity: 0.0001;
|
||||
left: -7px;
|
||||
z-index: -9999;
|
||||
opacity: 0.0001;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
@ -29,13 +29,13 @@
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-down:before {
|
||||
.@{iconfont-css-prefix}-down::before {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrap-open {
|
||||
.@{iconfont-css-prefix}-down:before {
|
||||
.@{iconfont-css-prefix}-down::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@ -46,21 +46,21 @@
|
||||
}
|
||||
|
||||
&-menu {
|
||||
outline: none;
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
text-align: left;
|
||||
list-style-type: none;
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
background-clip: padding-box;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
|
||||
&-item-group-title {
|
||||
color: @text-color-secondary;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
color: @text-color-secondary;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@ -75,16 +75,16 @@
|
||||
|
||||
&-item,
|
||||
&-submenu-title {
|
||||
padding: 5px @control-padding-horizontal;
|
||||
margin: 0;
|
||||
clear: both;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
line-height: 22px;
|
||||
|
||||
> .anticon:first-child {
|
||||
min-width: 12px;
|
||||
@ -92,10 +92,10 @@
|
||||
}
|
||||
|
||||
> a {
|
||||
color: @text-color;
|
||||
display: block;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
margin: -5px -@control-padding-horizontal;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
color: @text-color;
|
||||
transition: all 0.3s;
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
@ -125,17 +125,17 @@
|
||||
|
||||
&-divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: @border-color-split;
|
||||
line-height: 0;
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow {
|
||||
position: absolute;
|
||||
right: @padding-xs;
|
||||
&-icon {
|
||||
font-style: normal;
|
||||
color: @text-color-secondary;
|
||||
font-style: normal;
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
}
|
||||
@ -150,9 +150,9 @@
|
||||
}
|
||||
|
||||
&-submenu-vertical > & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
margin-left: 4px;
|
||||
transform-origin: 0 0;
|
||||
@ -208,8 +208,8 @@
|
||||
white-space: nowrap;
|
||||
|
||||
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
|
||||
padding-left: @padding-xs;
|
||||
padding-right: @padding-xs;
|
||||
padding-left: @padding-xs;
|
||||
}
|
||||
.@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
|
||||
.iconfont-size-under-12px(10px);
|
||||
@ -226,7 +226,7 @@
|
||||
.@{dropdown-prefix-cls}-menu-submenu-title,
|
||||
.@{dropdown-prefix-cls}-menu-item > a {
|
||||
color: @text-color-secondary-dark;
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow:after {
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
|
||||
color: @text-color-secondary-dark;
|
||||
}
|
||||
&:hover {
|
||||
@ -238,8 +238,8 @@
|
||||
&,
|
||||
&:hover,
|
||||
> a {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
@empty-prefix-cls: ~'@{ant-prefix}-empty';
|
||||
|
||||
.@{empty-prefix-cls} {
|
||||
text-align: center;
|
||||
margin: 0 8px;
|
||||
font-size: @empty-font-size;
|
||||
line-height: 22px;
|
||||
margin: 0 8px;
|
||||
text-align: center;
|
||||
|
||||
&-image {
|
||||
margin-bottom: 8px;
|
||||
height: 100px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
@ -46,6 +46,6 @@
|
||||
|
||||
// Patch for popup adjust
|
||||
.@{ant-prefix}-select-dropdown--empty .@{ant-prefix}-select-dropdown-menu-item {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@ -157,23 +157,26 @@ export default class FormItem extends React.Component<FormItemProps, any> {
|
||||
renderHelp(prefixCls: string) {
|
||||
const help = this.getHelpMessage();
|
||||
const children = help ? (
|
||||
<div className={`${prefixCls}-explain`} key="help">
|
||||
<span className={`${prefixCls}-explain`} key="help">
|
||||
{help}
|
||||
</div>
|
||||
</span>
|
||||
) : null;
|
||||
if (children) {
|
||||
this.helpShow = !!children;
|
||||
}
|
||||
|
||||
return (
|
||||
<Animate
|
||||
transitionName="show-help"
|
||||
component=""
|
||||
transitionAppear
|
||||
key="help"
|
||||
onEnd={this.onHelpAnimEnd}
|
||||
>
|
||||
{children}
|
||||
</Animate>
|
||||
<div className={`${prefixCls}-explain-holder`}>
|
||||
<Animate
|
||||
transitionName="show-help"
|
||||
component=""
|
||||
transitionAppear
|
||||
key="help"
|
||||
onEnd={this.onHelpAnimEnd}
|
||||
>
|
||||
{children}
|
||||
</Animate>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -46,6 +46,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,6 +90,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,6 +134,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,6 +178,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,6 +222,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -251,6 +266,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -292,6 +310,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -333,6 +354,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -374,6 +398,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -415,6 +442,9 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -514,6 +544,9 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -594,6 +627,9 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -618,6 +654,9 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -711,6 +750,9 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -735,6 +777,9 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -785,6 +830,9 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -809,6 +857,9 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -850,6 +901,9 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -886,6 +940,9 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -920,6 +977,9 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -944,6 +1004,9 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1000,6 +1063,9 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
|
||||
value="benjycui"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1069,6 +1135,9 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1121,6 +1190,9 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1145,6 +1217,9 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1241,6 +1316,9 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1273,6 +1351,9 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1305,6 +1386,9 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1329,6 +1413,9 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1389,6 +1476,9 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1441,6 +1531,9 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1499,6 +1592,9 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
register now!
|
||||
</a>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1541,6 +1637,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1576,6 +1675,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1611,6 +1713,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1669,6 +1774,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1753,6 +1861,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1855,6 +1966,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1954,6 +2068,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2012,6 +2129,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
<div
|
||||
class="ant-form-extra"
|
||||
>
|
||||
@ -2059,6 +2179,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2083,6 +2206,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2148,6 +2274,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2207,6 +2336,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2265,6 +2397,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2339,6 +2474,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2414,6 +2552,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2477,6 +2618,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2501,6 +2645,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2539,6 +2686,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
China
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2619,6 +2769,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2695,6 +2848,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2806,6 +2962,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
machines
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2846,6 +3005,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2962,6 +3124,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3051,6 +3216,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3140,6 +3308,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3297,6 +3468,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3610,6 +3784,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3647,6 +3824,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
<div
|
||||
class="ant-form-extra"
|
||||
>
|
||||
@ -3693,6 +3873,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3717,6 +3900,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3758,9 +3944,13 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
Should be combination of numbers & alphabets
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
Should be combination of numbers & alphabets
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3795,6 +3985,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3851,9 +4044,13 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
The information is being validated...
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
The information is being validated...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3910,6 +4107,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3965,6 +4165,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4021,9 +4224,13 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
Should be combination of numbers & alphabets
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
Should be combination of numbers & alphabets
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4104,6 +4311,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4189,6 +4399,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4287,6 +4500,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4388,9 +4604,13 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
The information is being validated...
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
The information is being validated...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4463,9 +4683,13 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
Please select the correct date
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
Please select the correct date
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4519,10 +4743,16 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4645,6 +4875,9 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4755,9 +4988,13 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
|
||||
<span
|
||||
class="ant-form-explain"
|
||||
>
|
||||
A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,17 +35,21 @@ exports[`Form should display custom message 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain show-help-enter"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
<span>
|
||||
Account does not exist,
|
||||
<a
|
||||
href="https://www.alipay.com/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Forgot account?
|
||||
</a>
|
||||
<span
|
||||
class="ant-form-explain show-help-enter"
|
||||
>
|
||||
<span>
|
||||
Account does not exist,
|
||||
<a
|
||||
href="https://www.alipay.com/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Forgot account?
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,9 +93,13 @@ exports[`Form should display two message 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain show-help-enter"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
Error message 1 Error message 2
|
||||
<span
|
||||
class="ant-form-explain show-help-enter"
|
||||
>
|
||||
Error message 1 Error message 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,15 +142,19 @@ exports[`Form support error message with reactNode 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain show-help-enter"
|
||||
class="ant-form-explain-holder"
|
||||
>
|
||||
<div>
|
||||
Error 1
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Error 2
|
||||
</div>
|
||||
<span
|
||||
class="ant-form-explain show-help-enter"
|
||||
>
|
||||
<div>
|
||||
Error 1
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Error 2
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,14 +16,14 @@
|
||||
.reset-form;
|
||||
}
|
||||
|
||||
.@{form-prefix-cls}-item-required:before {
|
||||
.@{form-prefix-cls}-item-required::before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
content: '*';
|
||||
color: @label-required-color;
|
||||
font-size: @font-size-base;
|
||||
font-family: SimSun, sans-serif;
|
||||
line-height: 1;
|
||||
font-size: @font-size-base;
|
||||
color: @label-required-color;
|
||||
content: '*';
|
||||
.@{form-prefix-cls}-hide-required-mark & {
|
||||
display: none;
|
||||
}
|
||||
@ -65,18 +65,19 @@ input[type='checkbox'] {
|
||||
position: relative;
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
vertical-align: top;
|
||||
font-size: @font-size-base;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-component;
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
|
||||
@form-help-margin-top;
|
||||
vertical-align: top;
|
||||
|
||||
&-control {
|
||||
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
|
||||
position: relative;
|
||||
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
@ -84,32 +85,27 @@ input[type='checkbox'] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-with-help {
|
||||
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
|
||||
@form-help-margin-top;
|
||||
}
|
||||
|
||||
&-label {
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
line-height: @form-component-max-height - 0.0001px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
line-height: @form-component-max-height - 0.0001px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
|
||||
label {
|
||||
color: @label-color;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
& when (@form-item-trailing-colon=true) {
|
||||
content: ':';
|
||||
}
|
||||
& when not (@form-item-trailing-colon=true) {
|
||||
content: ' ';
|
||||
}
|
||||
margin: 0 8px 0 2px;
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
margin: 0 8px 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -118,20 +114,32 @@ input[type='checkbox'] {
|
||||
margin: 2px 0 4px;
|
||||
}
|
||||
|
||||
&-no-colon &-label label:after {
|
||||
&-no-colon &-label label::after {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
.@{form-prefix-cls}-explain-holder {
|
||||
line-height: @line-height-base;
|
||||
|
||||
&::before {
|
||||
content: '\00A0'; // Use non-space character to keep the same height
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.@{form-prefix-cls}-explain {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.@{form-prefix-cls}-explain,
|
||||
.@{form-prefix-cls}-extra {
|
||||
color: @text-color-secondary;
|
||||
// Magic tweak pixel number to float line-height diff in windows
|
||||
// Fix https://github.com/ant-design/ant-design/issues/12803
|
||||
line-height: @line-height-base + 0.024;
|
||||
transition: color 0.3s @ease-out; // sync input color transition
|
||||
margin-top: @form-help-margin-top;
|
||||
clear: both;
|
||||
margin-top: @form-help-margin-top;
|
||||
color: @text-color-secondary;
|
||||
transition: color 0.3s @ease-out; // sync input color transition
|
||||
}
|
||||
|
||||
.@{form-prefix-cls}-extra {
|
||||
@ -218,10 +226,10 @@ form {
|
||||
.@{ant-prefix}-radio-inline,
|
||||
.@{ant-prefix}-checkbox-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
@ -261,30 +269,30 @@ form {
|
||||
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
|
||||
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
|
||||
.@{ant-prefix}-input-group-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Input combined with select
|
||||
.@{ant-prefix}-input-group-wrap {
|
||||
.@{ant-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-select-selection--single {
|
||||
margin-left: -1px;
|
||||
height: @input-height-lg;
|
||||
margin-left: -1px;
|
||||
background-color: fade(@black, 7%);
|
||||
.@{ant-prefix}-select-selection__rendered {
|
||||
padding-left: 8px;
|
||||
padding-right: 25px;
|
||||
padding-left: 8px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
@ -298,14 +306,14 @@ form {
|
||||
// Form layout
|
||||
//== Vertical Form
|
||||
.make-vertical-layout-label() {
|
||||
padding: @form-vertical-label-padding;
|
||||
margin: @form-vertical-label-margin;
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin: @form-vertical-label-margin;
|
||||
padding: @form-vertical-label-padding;
|
||||
line-height: @line-height-base;
|
||||
white-space: initial;
|
||||
text-align: left;
|
||||
|
||||
label:after {
|
||||
label::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -384,6 +392,10 @@ form {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .@{form-prefix-cls}-item-control-wrapper,
|
||||
> .@{form-prefix-cls}-item-label {
|
||||
display: inline-block;
|
||||
@ -409,16 +421,16 @@ form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
visibility: visible;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
width: @form-component-height;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: -10px;
|
||||
text-align: center;
|
||||
font-size: @form-feedback-icon-size;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
visibility: visible;
|
||||
animation: zoomIn 0.3s @ease-out-back;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
@ -433,8 +445,8 @@ form {
|
||||
|
||||
.has-success {
|
||||
&.has-feedback .@{form-prefix-cls}-item-children-icon {
|
||||
animation-name: diffZoomIn1 !important;
|
||||
color: @success-color;
|
||||
animation-name: diffZoomIn1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -461,9 +473,9 @@ form {
|
||||
}
|
||||
|
||||
// arrow and icon
|
||||
.@{ant-prefix}-calendar-picker-icon:after,
|
||||
.@{ant-prefix}-time-picker-icon:after,
|
||||
.@{ant-prefix}-picker-icon:after,
|
||||
.@{ant-prefix}-calendar-picker-icon::after,
|
||||
.@{ant-prefix}-time-picker-icon::after,
|
||||
.@{ant-prefix}-picker-icon::after,
|
||||
.@{ant-prefix}-select-arrow,
|
||||
.@{ant-prefix}-cascader-picker-arrow {
|
||||
color: @warning-color;
|
||||
@ -523,9 +535,9 @@ form {
|
||||
}
|
||||
|
||||
// arrow and icon
|
||||
.@{ant-prefix}-calendar-picker-icon:after,
|
||||
.@{ant-prefix}-time-picker-icon:after,
|
||||
.@{ant-prefix}-picker-icon:after,
|
||||
.@{ant-prefix}-calendar-picker-icon::after,
|
||||
.@{ant-prefix}-time-picker-icon::after,
|
||||
.@{ant-prefix}-picker-icon::after,
|
||||
.@{ant-prefix}-select-arrow,
|
||||
.@{ant-prefix}-cascader-picker-arrow {
|
||||
color: @error-color;
|
||||
@ -587,17 +599,6 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-advanced-search-form {
|
||||
.@{form-prefix-cls}-item {
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
|
||||
&-with-help {
|
||||
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
|
||||
@form-help-margin-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
|
||||
.make-motion(@className, @keyframeName, @duration);
|
||||
.@{className}-enter,
|
||||
@ -614,19 +615,19 @@ form {
|
||||
|
||||
@keyframes antShowHelpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antShowHelpOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -49,8 +49,8 @@
|
||||
|
||||
.@{ant-prefix}-input-group-addon {
|
||||
color: @text-color;
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
border-color: @border-color;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
@ -65,11 +65,11 @@
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-lg;
|
||||
line-height: inherit;
|
||||
color: @text-color-secondary;
|
||||
border: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
}
|
||||
@ -117,8 +117,8 @@
|
||||
output {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: @input-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
// ------------------------
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
height: auto;
|
||||
margin-right: (@gutter / -2);
|
||||
margin-left: (@gutter / -2);
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
.col(1);
|
||||
@ -45,8 +45,8 @@
|
||||
.col(@index, @list) when (@index > @grid-columns) {
|
||||
// terminal
|
||||
@{list} {
|
||||
float: left;
|
||||
flex: 0 0 auto;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
|
||||
@ -38,6 +38,10 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
|
||||
|
||||
private inputNumberRef: any;
|
||||
|
||||
saveInputNumber = (inputNumberRef: any) => {
|
||||
this.inputNumberRef = inputNumberRef;
|
||||
};
|
||||
|
||||
focus() {
|
||||
this.inputNumberRef.focus();
|
||||
}
|
||||
@ -61,7 +65,7 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
|
||||
|
||||
return (
|
||||
<RcInputNumber
|
||||
ref={(c: any) => (this.inputNumberRef = c)}
|
||||
ref={this.saveInputNumber}
|
||||
className={inputNumberClass}
|
||||
upHandler={upIcon}
|
||||
downHandler={downIcon}
|
||||
|
||||
@ -7,24 +7,24 @@
|
||||
.@{input-number-prefix-cls} {
|
||||
.reset-component;
|
||||
.input;
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
width: 90px;
|
||||
|
||||
&-handler {
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
color: @text-color-secondary;
|
||||
position: relative;
|
||||
transition: all 0.1s linear;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
transition: all 0.1s linear;
|
||||
&:active {
|
||||
background: @input-number-handler-active-bg;
|
||||
}
|
||||
@ -37,14 +37,14 @@
|
||||
&-handler-up-inner,
|
||||
&-handler-down-inner {
|
||||
.iconfont-mixin();
|
||||
line-height: 12px;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: all 0.1s linear;
|
||||
right: 4px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 12px;
|
||||
transition: all 0.1s linear;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -67,15 +67,15 @@
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
outline: 0;
|
||||
-moz-appearance: textfield;
|
||||
height: @input-height-base - 2px;
|
||||
transition: all 0.3s linear;
|
||||
padding: 0 @control-padding-horizontal - 1px;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
padding: 0 @control-padding-horizontal - 1px;
|
||||
outline: 0;
|
||||
transition: all 0.3s linear;
|
||||
-moz-appearance: textfield;
|
||||
.placeholder();
|
||||
}
|
||||
|
||||
@ -98,15 +98,15 @@
|
||||
}
|
||||
|
||||
&-handler-wrap {
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
background: @component-background;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
background: @component-background;
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.24s linear 0.1s;
|
||||
|
||||
// Fix input number inside Menu makes icon too large
|
||||
@ -143,8 +143,8 @@
|
||||
}
|
||||
|
||||
&-handler-down {
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
top: 0;
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 50%;
|
||||
|
||||
@ -68,14 +68,16 @@ export default class Search extends React.Component<SearchProps, any> {
|
||||
};
|
||||
|
||||
renderAddonAfter = (prefixCls: string) => {
|
||||
const { enterButton, size, disabled } = this.props;
|
||||
if (!enterButton) return null;
|
||||
const { enterButton, size, disabled, addonAfter } = this.props;
|
||||
if (!enterButton) return addonAfter;
|
||||
const btnClassName = `${prefixCls}-button`;
|
||||
|
||||
let button: React.ReactNode;
|
||||
const enterButtonAsElement = enterButton as React.ReactElement<any>;
|
||||
if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
|
||||
return React.cloneElement(enterButtonAsElement, {
|
||||
button = React.cloneElement(enterButtonAsElement, {
|
||||
onClick: this.onSearch,
|
||||
key: 'enterButton',
|
||||
...(enterButtonAsElement.type === Button
|
||||
? {
|
||||
className: btnClassName,
|
||||
@ -83,20 +85,26 @@ export default class Search extends React.Component<SearchProps, any> {
|
||||
}
|
||||
: {}),
|
||||
});
|
||||
} else {
|
||||
button = (
|
||||
<Button
|
||||
className={btnClassName}
|
||||
type="primary"
|
||||
size={size}
|
||||
disabled={disabled}
|
||||
key="enterButton"
|
||||
onClick={this.onSearch}
|
||||
>
|
||||
{enterButton === true ? <Icon type="search" /> : enterButton}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={btnClassName}
|
||||
type="primary"
|
||||
size={size}
|
||||
disabled={disabled}
|
||||
key="enterButton"
|
||||
onClick={this.onSearch}
|
||||
>
|
||||
{enterButton === true ? <Icon type="search" /> : enterButton}
|
||||
</Button>
|
||||
);
|
||||
if (addonAfter) {
|
||||
return [button, addonAfter];
|
||||
}
|
||||
|
||||
return button;
|
||||
};
|
||||
|
||||
renderSearch = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
|
||||
@ -126,4 +126,13 @@ describe('Input.Search', () => {
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14785
|
||||
it('should support addonAfter', () => {
|
||||
const addonAfter = <span>Addon After</span>;
|
||||
const wrapper = mount(<Search addonAfter={addonAfter} />);
|
||||
const wrapperWithEnterButton = mount(<Search enterButton addonAfter={addonAfter} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(wrapperWithEnterButton.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,101 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Input.Search should support addonAfter 1`] = `
|
||||
<span
|
||||
class="ant-input-search ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-search ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<span>
|
||||
Addon After
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support addonAfter 2`] = `
|
||||
<span
|
||||
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-input-search-button ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: search"
|
||||
class="anticon anticon-search"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
<span>
|
||||
Addon After
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support custom Button 1`] = `
|
||||
<span
|
||||
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
|
||||
|
||||
@ -541,7 +541,6 @@ exports[`Input.Search should support suffix 1`] = `
|
||||
>
|
||||
<Consumer>
|
||||
<Input
|
||||
addonAfter={null}
|
||||
className="ant-input-search"
|
||||
disabled={false}
|
||||
onPressEnter={[Function]}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
.input-group(~'@{ant-prefix}-input');
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
|
||||
width: 100%;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,23 +5,23 @@
|
||||
|
||||
// size mixins for input
|
||||
.input-lg() {
|
||||
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
|
||||
height: @input-height-lg;
|
||||
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
.input-sm() {
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
|
||||
height: @input-height-sm;
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
|
||||
}
|
||||
|
||||
// input status
|
||||
// == when focus or actived
|
||||
.active(@color: @outline-color) {
|
||||
border-color: ~`colorPalette('@{color}', 5) `;
|
||||
border-right-width: @border-width-base !important;
|
||||
outline: 0;
|
||||
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
|
||||
border-right-width: @border-width-base !important;
|
||||
}
|
||||
|
||||
// == when hoverd
|
||||
@ -31,10 +31,10 @@
|
||||
}
|
||||
|
||||
.disabled() {
|
||||
background-color: @input-disabled-bg;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
background-color: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
.hover(@input-border-color);
|
||||
}
|
||||
@ -44,18 +44,18 @@
|
||||
.input() {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal-base;
|
||||
width: 100%;
|
||||
height: @input-height-base;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal-base;
|
||||
color: @input-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
.placeholder(); // Reset placeholder
|
||||
transition: all 0.3s;
|
||||
.placeholder(); // Reset placeholder
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
@ -73,9 +73,9 @@
|
||||
textarea& {
|
||||
max-width: 100%; // prevent textearea resize from coming out of its container
|
||||
height: auto;
|
||||
min-height: @input-height-base;
|
||||
vertical-align: bottom;
|
||||
transition: all 0.3s, height 0s;
|
||||
min-height: @input-height-base;
|
||||
}
|
||||
|
||||
// Size
|
||||
@ -92,15 +92,15 @@
|
||||
.input-group(@inputClass) {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
|
||||
// Undo padding and float of grid classes
|
||||
&[class*='col-'] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
> [class*='col-'] {
|
||||
@ -146,16 +146,16 @@
|
||||
}
|
||||
|
||||
&-addon {
|
||||
position: relative;
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @input-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
background-color: @input-addon-bg;
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
|
||||
// Reset Select's style in addon
|
||||
@ -163,8 +163,8 @@
|
||||
margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
|
||||
|
||||
.@{ant-prefix}-select-selection {
|
||||
background-color: inherit;
|
||||
margin: -1px;
|
||||
background-color: inherit;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -179,38 +179,38 @@
|
||||
|
||||
// Expand addon icon click area
|
||||
// https://github.com/ant-design/ant-design/issues/3714
|
||||
> i:only-child:after {
|
||||
> i:only-child::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .@{inputClass}:first-child,
|
||||
&-addon:first-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{ant-prefix}-select .@{ant-prefix}-select-selection {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{inputClass}-affix-wrapper {
|
||||
&:not(:first-child) .@{inputClass} {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) .@{inputClass} {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -223,13 +223,13 @@
|
||||
|
||||
> .@{inputClass}:last-child,
|
||||
&-addon:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{ant-prefix}-select .@{ant-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -255,8 +255,8 @@
|
||||
|
||||
.@{inputClass}-affix-wrapper {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&&-compact {
|
||||
@ -278,15 +278,15 @@
|
||||
}
|
||||
|
||||
& > * {
|
||||
border-radius: 0;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
|
||||
float: none;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
border-right-width: @border-width-base;
|
||||
margin-right: -@border-width-base;
|
||||
border-right-width: @border-width-base;
|
||||
}
|
||||
|
||||
// Undo float for .ant-input-group .ant-input
|
||||
@ -301,8 +301,8 @@
|
||||
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
|
||||
border-radius: 0;
|
||||
border-right-width: @border-width-base;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
@ -330,9 +330,9 @@
|
||||
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
|
||||
border-right-width: @border-width-base;
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
border-right-width: @border-width-base;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/12493
|
||||
@ -360,9 +360,9 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
line-height: 0;
|
||||
color: @input-color;
|
||||
line-height: 0;
|
||||
transform: translateY(-50%);
|
||||
:not(.anticon) {
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
@ -16,13 +16,13 @@
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-group-addon {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
.@{search-prefix}-button {
|
||||
width: 100%;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
|
||||
.@{layout-prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: auto;
|
||||
background: @layout-body-background;
|
||||
flex-direction: column;
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
min-height: 0;
|
||||
background: @layout-body-background;
|
||||
|
||||
&,
|
||||
* {
|
||||
@ -30,17 +30,17 @@
|
||||
}
|
||||
|
||||
&-header {
|
||||
background: @layout-header-background;
|
||||
padding: @layout-header-padding;
|
||||
height: @layout-header-height;
|
||||
padding: @layout-header-padding;
|
||||
line-height: @layout-header-height;
|
||||
background: @layout-header-background;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
background: @layout-footer-background;
|
||||
padding: @layout-footer-padding;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
background: @layout-footer-background;
|
||||
}
|
||||
|
||||
&-content {
|
||||
@ -50,20 +50,20 @@
|
||||
}
|
||||
|
||||
&-sider {
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
background: @layout-sider-background;
|
||||
|
||||
/* fix firefox can't set width smaller than content on flex item */
|
||||
min-width: 0;
|
||||
background: @layout-sider-background;
|
||||
transition: all 0.2s;
|
||||
|
||||
&-children {
|
||||
height: 100%;
|
||||
margin-top: -0.1px;
|
||||
// Hack for fixing margin collaspe bug
|
||||
// https://github.com/ant-design/ant-design/issues/7967
|
||||
// solution from https://stackoverflow.com/a/33132624/3040605
|
||||
padding-top: 0.1px;
|
||||
margin-top: -0.1px;
|
||||
}
|
||||
|
||||
&-has-trigger {
|
||||
@ -76,14 +76,14 @@
|
||||
|
||||
&-trigger {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
height: @layout-trigger-height;
|
||||
line-height: @layout-trigger-height;
|
||||
color: @layout-trigger-color;
|
||||
background: @layout-trigger-background;
|
||||
z-index: 1;
|
||||
height: @layout-trigger-height;
|
||||
color: @layout-trigger-color;
|
||||
line-height: @layout-trigger-height;
|
||||
text-align: center;
|
||||
background: @layout-trigger-background;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@ -96,13 +96,13 @@
|
||||
position: absolute;
|
||||
top: @layout-header-height;
|
||||
right: -@layout-zero-trigger-width;
|
||||
text-align: center;
|
||||
width: @layout-zero-trigger-width;
|
||||
height: @layout-zero-trigger-height;
|
||||
line-height: @layout-zero-trigger-height;
|
||||
background: @layout-sider-background;
|
||||
color: @layout-trigger-color;
|
||||
font-size: @layout-zero-trigger-width / 2;
|
||||
line-height: @layout-zero-trigger-height;
|
||||
text-align: center;
|
||||
background: @layout-sider-background;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
.@{list-prefix-cls}-bordered {
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
.@{list-prefix-cls}-header {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.@{list-prefix-cls}-footer {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.@{list-prefix-cls}-item {
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
|
||||
.@{list-prefix-cls}-pagination {
|
||||
@ -23,8 +23,8 @@
|
||||
|
||||
&.@{list-prefix-cls}-sm {
|
||||
.@{list-prefix-cls}-item {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.@{list-prefix-cls}-header,
|
||||
.@{list-prefix-cls}-footer {
|
||||
|
||||
@ -17,28 +17,28 @@
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
button {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
&-spin {
|
||||
text-align: center;
|
||||
min-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
&-empty-text {
|
||||
padding: @list-empty-text-padding;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
padding: @list-empty-text-padding;
|
||||
text-align: center;
|
||||
}
|
||||
&-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: @list-item-padding;
|
||||
&-meta {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
font-size: 0;
|
||||
&-avatar {
|
||||
margin-right: @list-item-meta-avatar-margin-right;
|
||||
@ -47,8 +47,8 @@
|
||||
flex: 1 0;
|
||||
}
|
||||
&-title {
|
||||
color: @text-color;
|
||||
margin-bottom: 4px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
> a {
|
||||
@ -74,32 +74,32 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&-action {
|
||||
font-size: 0;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 48px;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
list-style: none;
|
||||
& > li {
|
||||
display: inline-block;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
& > li:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&-split {
|
||||
background-color: @border-color-split;
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
}
|
||||
&-main {
|
||||
@ -123,8 +123,8 @@
|
||||
}
|
||||
|
||||
&-empty {
|
||||
color: @text-color-secondary;
|
||||
padding: 16px 0;
|
||||
color: @text-color-secondary;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -173,17 +173,17 @@
|
||||
&-meta {
|
||||
margin-bottom: @list-item-meta-margin-bottom;
|
||||
&-title {
|
||||
color: @heading-color;
|
||||
margin-bottom: @list-item-meta-title-margin-bottom;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
margin: @list-item-content-margin;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
margin: @list-item-content-margin;
|
||||
}
|
||||
&-action {
|
||||
margin-left: auto;
|
||||
@ -197,10 +197,10 @@
|
||||
}
|
||||
|
||||
&-grid &-item {
|
||||
border-bottom: none;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: none;
|
||||
&-content {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -336,6 +336,9 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -369,6 +372,9 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain-holder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,14 +13,14 @@
|
||||
|
||||
.@{mention-prefix-cls}-editor {
|
||||
.input;
|
||||
min-height: @input-height-base;
|
||||
height: auto; // To override height in .input mixin
|
||||
line-height: @line-height-base;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto; // To override height in .input mixin
|
||||
min-height: @input-height-base;
|
||||
padding: 0;
|
||||
line-height: @line-height-base;
|
||||
&-wrapper {
|
||||
overflow-y: auto;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
&.@{mention-prefix-cls}-active:not(.disabled) .@{mention-prefix-cls}-editor {
|
||||
@ -33,13 +33,13 @@
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
.public-DraftEditorPlaceholder-inner {
|
||||
color: @input-placeholder-color;
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
height: auto;
|
||||
padding: 5px @control-padding-horizontal - 1px;
|
||||
color: @input-placeholder-color;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.DraftEditor-editorContainer .public-DraftEditor-content {
|
||||
@ -50,19 +50,19 @@
|
||||
|
||||
.@{mention-prefix-cls}-dropdown {
|
||||
.reset-component;
|
||||
margin-top: 1.5em;
|
||||
max-height: 250px;
|
||||
min-width: 120px;
|
||||
background-color: @component-background;
|
||||
box-shadow: @box-shadow-base;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: @zindex-dropdown;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
min-width: 120px;
|
||||
max-height: 250px;
|
||||
margin-top: 1.5em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
&-placement-top {
|
||||
margin-top: -0.1em;
|
||||
@ -72,22 +72,22 @@
|
||||
color: @disabled-color;
|
||||
|
||||
.@{iconfont-css-prefix}-loading {
|
||||
display: block;
|
||||
color: @primary-color;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
line-height: 22px;
|
||||
font-weight: normal;
|
||||
color: @text-color;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
@ -113,9 +113,9 @@
|
||||
&-selected {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @background-color-base;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
font-weight: bold;
|
||||
background-color: @background-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,8 +123,8 @@
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
background-color: @border-color-split;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
|
||||
import { SubMenu as RcSubMenu } from 'rc-menu';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface TitleClickEntity {
|
||||
interface TitleEventEntity {
|
||||
key: string;
|
||||
domEvent: Event;
|
||||
}
|
||||
@ -14,7 +14,9 @@ export interface SubMenuProps {
|
||||
disabled?: boolean;
|
||||
title?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
onTitleClick?: (clickEntity: TitleClickEntity) => void;
|
||||
onTitleClick?: (e: TitleEventEntity) => void;
|
||||
onTitleMouseEnter?: (e: TitleEventEntity) => void;
|
||||
onTitleMouseLeave?: (e: TitleEventEntity) => void;
|
||||
}
|
||||
|
||||
class SubMenu extends React.Component<SubMenuProps, any> {
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 0.45;
|
||||
transition: all 0.3s;
|
||||
&:after,
|
||||
&:before {
|
||||
&::after,
|
||||
&::before {
|
||||
background: @menu-dark-arrow-color;
|
||||
}
|
||||
}
|
||||
@ -29,13 +29,13 @@
|
||||
|
||||
&-dark&-horizontal > &-item,
|
||||
&-dark&-horizontal > &-submenu {
|
||||
border-color: @menu-dark-bg;
|
||||
border-bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
border-color: @menu-dark-bg;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-dark&-horizontal > &-item > a:before {
|
||||
&-dark&-horizontal > &-item > a::before {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@ -56,10 +56,10 @@
|
||||
&-dark&-vertical &-item,
|
||||
&-dark&-vertical-left &-item,
|
||||
&-dark&-vertical-right &-item {
|
||||
border-right: 0;
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
&:after {
|
||||
margin-left: 0;
|
||||
border-right: 0;
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
@ -75,8 +75,8 @@
|
||||
&-dark &-submenu-open,
|
||||
&-dark &-submenu-selected,
|
||||
&-dark &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
color: @menu-dark-highlight-color;
|
||||
background-color: transparent;
|
||||
> a {
|
||||
color: @menu-dark-highlight-color;
|
||||
}
|
||||
@ -84,8 +84,8 @@
|
||||
> .@{menu-prefix-cls}-submenu-title:hover {
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 1;
|
||||
&:after,
|
||||
&:before {
|
||||
&::after,
|
||||
&::before {
|
||||
background: @menu-dark-highlight-color;
|
||||
}
|
||||
}
|
||||
@ -93,9 +93,9 @@
|
||||
}
|
||||
|
||||
&-dark &-item-selected {
|
||||
border-right: 0;
|
||||
color: @menu-dark-highlight-color;
|
||||
&:after {
|
||||
border-right: 0;
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
> a,
|
||||
@ -114,14 +114,14 @@
|
||||
&-dark &-submenu-disabled {
|
||||
&,
|
||||
> a {
|
||||
opacity: 0.8;
|
||||
color: @disabled-color-dark !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
color: @disabled-color-dark !important;
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
background: @disabled-color-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,22 +6,22 @@
|
||||
// default theme
|
||||
.@{menu-prefix-cls} {
|
||||
.reset-component;
|
||||
outline: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
list-style: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
color: @menu-item-color;
|
||||
background: @menu-bg;
|
||||
line-height: 0; // Fix display inline-block gap
|
||||
list-style: none;
|
||||
background: @menu-bg;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
transition: background 0.3s, width 0.2s;
|
||||
.clearfix;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
@ -29,10 +29,10 @@
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
padding: 8px 16px;
|
||||
color: @menu-item-group-title-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
padding: 8px 16px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@ -61,13 +61,13 @@
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:before {
|
||||
&::before {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
@ -75,8 +75,8 @@
|
||||
&-item-divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: @border-color-split;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
|
||||
&-item:hover,
|
||||
@ -122,14 +122,14 @@
|
||||
&-vertical&-sub,
|
||||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
border-right: 0;
|
||||
padding: 0;
|
||||
border-right: 0;
|
||||
transform-origin: 0 0;
|
||||
.@{menu-prefix-cls}-item {
|
||||
border-right: 0;
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
&:after {
|
||||
margin-left: 0;
|
||||
border-right: 0;
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
@ -148,12 +148,12 @@
|
||||
|
||||
&-item,
|
||||
&-submenu-title {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
|
||||
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
|
||||
.@{iconfont-css-prefix} {
|
||||
@ -162,8 +162,8 @@
|
||||
font-size: @font-size-base;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
||||
+ span {
|
||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -171,8 +171,8 @@
|
||||
& > &-item-divider {
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
@ -180,29 +180,29 @@
|
||||
&-submenu {
|
||||
&-popup {
|
||||
position: absolute;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: @zindex-dropdown;
|
||||
background: @menu-popup-bg;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.submenu-title-wrapper {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: ' ';
|
||||
left: 0;
|
||||
opacity: 0.0001;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls} {
|
||||
background-color: @menu-bg;
|
||||
border-radius: @border-radius-base;
|
||||
&-submenu-title:after {
|
||||
&-submenu-title::after {
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
@ -212,44 +212,43 @@
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 10px;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
vertical-align: baseline;
|
||||
background: @menu-bg;
|
||||
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
|
||||
width: 6px;
|
||||
height: 1.5px;
|
||||
background: @menu-bg;
|
||||
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
|
||||
border-radius: 2px;
|
||||
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
|
||||
top 0.3s @ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
&:before {
|
||||
&::before {
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
&:after {
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateY(2px);
|
||||
}
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
|
||||
&:after,
|
||||
&:before {
|
||||
&::after,
|
||||
&::before {
|
||||
background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
&:before {
|
||||
&::before {
|
||||
transform: rotate(-45deg) translateX(2px);
|
||||
}
|
||||
&:after {
|
||||
&::after {
|
||||
transform: rotate(45deg) translateX(-2px);
|
||||
}
|
||||
}
|
||||
@ -259,10 +258,10 @@
|
||||
> .@{menu-prefix-cls}-submenu-title
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
transform: translateY(-2px);
|
||||
&:after {
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateX(-2px);
|
||||
}
|
||||
&:before {
|
||||
&::before {
|
||||
transform: rotate(45deg) translateX(2px);
|
||||
}
|
||||
}
|
||||
@ -279,11 +278,11 @@
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
line-height: 46px;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
box-shadow: none;
|
||||
line-height: 46px;
|
||||
white-space: nowrap;
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu {
|
||||
@ -297,8 +296,8 @@
|
||||
&-active,
|
||||
&-open,
|
||||
&-selected {
|
||||
border-bottom: 2px solid @menu-highlight-color;
|
||||
color: @menu-highlight-color;
|
||||
border-bottom: 2px solid @menu-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -309,7 +308,7 @@
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
&:before {
|
||||
&::before {
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
@ -318,11 +317,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '\20';
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
height: 0;
|
||||
content: '\20';
|
||||
}
|
||||
}
|
||||
|
||||
@ -332,28 +331,28 @@
|
||||
&-inline {
|
||||
.@{menu-prefix-cls}-item {
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-right: @menu-item-active-border-width solid @menu-highlight-color;
|
||||
transform: scaleY(0.0001);
|
||||
opacity: 0;
|
||||
transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding: 0 16px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @menu-item-height;
|
||||
height: @menu-item-height;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-base;
|
||||
line-height: @menu-item-height;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@ -368,8 +367,8 @@
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
line-height: @menu-inline-toplevel-item-height;
|
||||
height: @menu-inline-toplevel-item-height;
|
||||
line-height: @menu-inline-toplevel-item-height;
|
||||
}
|
||||
}
|
||||
|
||||
@ -377,10 +376,10 @@
|
||||
width: 100%;
|
||||
.@{menu-prefix-cls}-selected,
|
||||
.@{menu-prefix-cls}-item-selected {
|
||||
&:after {
|
||||
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
|
||||
opacity: 1;
|
||||
&::after {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -406,18 +405,18 @@
|
||||
> .@{menu-prefix-cls}-submenu-title,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
left: 0;
|
||||
text-overflow: clip;
|
||||
padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
|
||||
text-overflow: clip;
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
display: none;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: @menu-item-height;
|
||||
margin: 0;
|
||||
+ span {
|
||||
max-width: 0;
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -433,11 +432,11 @@
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-group-title {
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -460,14 +459,14 @@
|
||||
&-sub&-inline {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
& > .@{menu-prefix-cls}-item,
|
||||
& > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
line-height: @menu-item-height;
|
||||
height: @menu-item-height;
|
||||
list-style-type: disc;
|
||||
line-height: @menu-item-height;
|
||||
list-style-position: inside;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
& .@{menu-prefix-cls}-item-group-title {
|
||||
@ -479,9 +478,9 @@
|
||||
&-item-disabled,
|
||||
&-submenu-disabled {
|
||||
color: @disabled-color !important;
|
||||
cursor: not-allowed;
|
||||
background: none;
|
||||
border-color: transparent !important;
|
||||
cursor: not-allowed;
|
||||
> a {
|
||||
color: @disabled-color !important;
|
||||
pointer-events: none;
|
||||
@ -490,8 +489,8 @@
|
||||
color: @disabled-color !important;
|
||||
cursor: not-allowed;
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
background: @disabled-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
.@{message-prefix-cls} {
|
||||
.reset-component;
|
||||
position: fixed;
|
||||
z-index: @zindex-message;
|
||||
width: 100%;
|
||||
top: 16px;
|
||||
left: 0;
|
||||
z-index: @zindex-message;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
&-notice {
|
||||
@ -21,11 +21,11 @@
|
||||
}
|
||||
|
||||
&-notice-content {
|
||||
display: inline-block;
|
||||
padding: @message-notice-content-padding;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
background: @component-background;
|
||||
display: inline-block;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@ -47,28 +47,28 @@
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 8px;
|
||||
font-size: @font-size-lg;
|
||||
top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-notice.move-up-leave.move-up-leave-active {
|
||||
animation-name: MessageMoveOut;
|
||||
overflow: hidden;
|
||||
animation-name: MessageMoveOut;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes MessageMoveOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
max-height: 150px;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,37 +21,37 @@
|
||||
|
||||
&-body {
|
||||
.@{confirm-prefix-cls}-title {
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
// create BFC to avoid
|
||||
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||
overflow: hidden;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.@{confirm-prefix-cls}-content {
|
||||
margin-left: 38px;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
margin-top: 8px;
|
||||
margin-left: 38px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: 22px;
|
||||
margin-right: 16px;
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{confirm-prefix-cls}-btns {
|
||||
margin-top: 24px;
|
||||
float: right;
|
||||
margin-top: 24px;
|
||||
|
||||
button + button {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,67 +4,66 @@
|
||||
.@{dialog-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
top: 100px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
&-wrap {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-modal;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
background-color: @component-background;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
background-clip: padding-box;
|
||||
box-shadow: @shadow-2;
|
||||
}
|
||||
|
||||
&-close {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: @zindex-popup-close;
|
||||
padding: 0;
|
||||
color: @text-color-secondary;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
color: @text-color-secondary;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&-x {
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: @font-size-lg;
|
||||
font-style: normal;
|
||||
vertical-align: baseline;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -76,10 +75,10 @@
|
||||
|
||||
&-header {
|
||||
padding: 16px 24px;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
background: @modal-header-bg;
|
||||
color: @text-color;
|
||||
background: @modal-header-bg;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&-body {
|
||||
@ -90,21 +89,21 @@
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
button + button {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.zoom-enter,
|
||||
&.zoom-appear {
|
||||
animation-duration: @animation-duration-slow;
|
||||
transform: none; // reset scale avoid mousePosition bug
|
||||
opacity: 0;
|
||||
animation-duration: @animation-duration-slow;
|
||||
user-select: none; // https://github.com/ant-design/ant-design/issues/11777
|
||||
}
|
||||
|
||||
@ -112,11 +111,11 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: @modal-mask-bg;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
z-index: @zindex-modal-mask;
|
||||
height: 100%;
|
||||
background-color: @modal-mask-bg;
|
||||
filter: ~'alpha(opacity=50)';
|
||||
|
||||
&-hidden {
|
||||
@ -131,18 +130,18 @@
|
||||
|
||||
.@{dialog-prefix-cls}-centered {
|
||||
text-align: center;
|
||||
&:before {
|
||||
content: '';
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
width: 0;
|
||||
content: '';
|
||||
}
|
||||
.@{dialog-prefix-cls} {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-left: 24px;
|
||||
margin-right: 0;
|
||||
margin-left: 24px;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
@ -34,32 +34,32 @@
|
||||
}
|
||||
|
||||
&-notice {
|
||||
padding: @notification-padding;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
background: @component-background;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
padding: @notification-padding;
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-2;
|
||||
|
||||
&-message {
|
||||
font-size: @font-size-lg;
|
||||
color: @heading-color;
|
||||
margin-bottom: 8px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 24px;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
|
||||
&-single-line-auto-margin {
|
||||
display: block;
|
||||
width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
|
||||
max-width: 4px;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
max-width: 4px;
|
||||
&:before {
|
||||
content: '';
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -73,9 +73,9 @@
|
||||
}
|
||||
|
||||
&-with-icon &-message {
|
||||
font-size: @font-size-lg;
|
||||
margin-left: 48px;
|
||||
margin-bottom: 4px;
|
||||
margin-left: 48px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&-with-icon &-description {
|
||||
@ -85,9 +85,9 @@
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
margin-left: 4px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-left: 4px;
|
||||
|
||||
&-success {
|
||||
color: @success-color;
|
||||
@ -105,8 +105,8 @@
|
||||
|
||||
&-close {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
top: 16px;
|
||||
right: 22px;
|
||||
color: @text-color-secondary;
|
||||
outline: none;
|
||||
|
||||
@ -127,8 +127,8 @@
|
||||
|
||||
.notification-fade-effect {
|
||||
animation-duration: 0.24s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: @ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-fade-enter,
|
||||
@ -158,8 +158,8 @@
|
||||
|
||||
@keyframes NotificationFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
@ -169,8 +169,8 @@
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right: 0;
|
||||
@ -180,17 +180,17 @@
|
||||
|
||||
@keyframes NotificationFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
max-height: 150px;
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
padding-top: @notification-padding;
|
||||
padding-bottom: @notification-padding;
|
||||
max-height: 150px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,59 +14,59 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&-total-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: @pagination-item-size;
|
||||
line-height: @pagination-item-size - 2px;
|
||||
margin-right: 8px;
|
||||
line-height: @pagination-item-size - 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-base;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
min-width: @pagination-item-size;
|
||||
height: @pagination-item-size;
|
||||
line-height: @pagination-item-size - 2px;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
background-color: @component-background;
|
||||
margin-right: 8px;
|
||||
font-family: @pagination-font-family;
|
||||
line-height: @pagination-item-size - 2px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
background-color: @component-background;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @text-color;
|
||||
transition: none;
|
||||
margin: 0 6px;
|
||||
color: @text-color;
|
||||
text-decoration: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
transition: all 0.3s;
|
||||
border-color: @primary-color;
|
||||
transition: all 0.3s;
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
border-color: @primary-color;
|
||||
font-weight: @pagination-font-weight-active;
|
||||
border-color: @primary-color;
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
@ -107,18 +107,18 @@
|
||||
|
||||
.@{pagination-prefix-cls}-item-ellipsis {
|
||||
position: absolute;
|
||||
display: block;
|
||||
letter-spacing: 2px;
|
||||
text-indent: 0.13em;
|
||||
color: @disabled-color;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
transition: all 0.2s;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
margin: auto;
|
||||
color: @disabled-color;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
text-indent: 0.13em;
|
||||
opacity: 1;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,18 +142,18 @@
|
||||
&-next,
|
||||
&-jump-prev,
|
||||
&-jump-next {
|
||||
font-family: @pagination-font-family;
|
||||
cursor: pointer;
|
||||
color: @text-color;
|
||||
border-radius: @border-radius-base;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
min-width: @pagination-item-size;
|
||||
height: @pagination-item-size;
|
||||
color: @text-color;
|
||||
font-family: @pagination-font-family;
|
||||
line-height: @pagination-item-size;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-prev,
|
||||
@ -170,21 +170,21 @@
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
display: block;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: @component-background;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:focus .@{pagination-prefix-cls}-item-link,
|
||||
&:hover .@{pagination-prefix-cls}-item-link {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,8 +195,8 @@
|
||||
cursor: not-allowed;
|
||||
a,
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
border-color: @border-color-base;
|
||||
color: @disabled-color;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@ -208,8 +208,8 @@
|
||||
|
||||
&-options {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
&-size-changer.@{ant-prefix}-select {
|
||||
display: inline-block;
|
||||
@ -219,14 +219,14 @@
|
||||
|
||||
&-quick-jumper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
vertical-align: top;
|
||||
|
||||
input {
|
||||
.input;
|
||||
margin: 0 8px;
|
||||
width: 50px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -237,9 +237,9 @@
|
||||
line-height: @pagination-item-size-sm;
|
||||
vertical-align: top;
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
border: 0;
|
||||
height: @pagination-item-size-sm;
|
||||
&:after {
|
||||
border: 0;
|
||||
&::after {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
@ -248,19 +248,19 @@
|
||||
|
||||
&-simple &-simple-pager {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
height: @pagination-item-size-sm;
|
||||
margin-right: 8px;
|
||||
|
||||
input {
|
||||
margin-right: 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
outline: none;
|
||||
padding: 0 6px;
|
||||
height: 100%;
|
||||
margin-right: 8px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
background-color: @component-background;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
@ -276,9 +276,9 @@
|
||||
}
|
||||
|
||||
&.mini &-item {
|
||||
margin: 0;
|
||||
min-width: @pagination-item-size-sm;
|
||||
height: @pagination-item-size-sm;
|
||||
margin: 0;
|
||||
line-height: @pagination-item-size-sm - 2px;
|
||||
}
|
||||
|
||||
@ -289,17 +289,17 @@
|
||||
|
||||
&.mini &-prev,
|
||||
&.mini &-next {
|
||||
margin: 0;
|
||||
min-width: @pagination-item-size-sm;
|
||||
height: @pagination-item-size-sm;
|
||||
margin: 0;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
|
||||
&.mini &-prev &-item-link,
|
||||
&.mini &-next &-item-link {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
&::after {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
@ -308,8 +308,8 @@
|
||||
&.mini &-jump-prev,
|
||||
&.mini &-jump-next {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
margin-right: 0;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
|
||||
&.mini &-options {
|
||||
|
||||
@ -9,16 +9,16 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-popover;
|
||||
font-weight: normal;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
cursor: auto;
|
||||
user-select: text;
|
||||
white-space: normal;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
&::after {
|
||||
position: absolute;
|
||||
background: fade(@white, 1%);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
@ -67,12 +67,12 @@
|
||||
|
||||
&-title {
|
||||
min-width: @popover-min-width;
|
||||
min-height: 32px;
|
||||
margin: 0; // reset heading margin
|
||||
padding: 5px @padding-md 4px;
|
||||
min-height: 32px;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
|
||||
&-inner-content {
|
||||
@ -81,10 +81,10 @@
|
||||
}
|
||||
|
||||
&-message {
|
||||
padding: 4px 0 12px;
|
||||
font-size: @font-size-base;
|
||||
color: @popover-color;
|
||||
position: relative;
|
||||
padding: 4px 0 12px;
|
||||
color: @popover-color;
|
||||
font-size: @font-size-base;
|
||||
> .@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 8px; // 4px for padding-top, 4px for vertical middle;
|
||||
@ -97,8 +97,8 @@
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
text-align: right;
|
||||
margin-bottom: 4px;
|
||||
text-align: right;
|
||||
button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -108,25 +108,25 @@
|
||||
// .popover-arrow is outer, .popover-arrow:after is inner
|
||||
|
||||
&-arrow {
|
||||
background: transparent;
|
||||
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||
background: transparent;
|
||||
border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
|
||||
border-style: solid;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&-placement-top > &-content > &-arrow,
|
||||
&-placement-topLeft > &-content > &-arrow,
|
||||
&-placement-topRight > &-content > &-arrow {
|
||||
bottom: @popover-distance - @popover-arrow-width + 2.2px;
|
||||
box-shadow: 3px 3px 7px fade(@black, 7%);
|
||||
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-top > &-content > &-arrow {
|
||||
left: 50%;
|
||||
@ -143,11 +143,11 @@
|
||||
&-placement-rightTop > &-content > &-arrow,
|
||||
&-placement-rightBottom > &-content > &-arrow {
|
||||
left: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: -3px 3px 7px fade(@black, 7%);
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: @popover-bg;
|
||||
border-left-color: @popover-bg;
|
||||
box-shadow: -3px 3px 7px fade(@black, 7%);
|
||||
}
|
||||
&-placement-right > &-content > &-arrow {
|
||||
top: 50%;
|
||||
@ -164,11 +164,11 @@
|
||||
&-placement-bottomLeft > &-content > &-arrow,
|
||||
&-placement-bottomRight > &-content > &-arrow {
|
||||
top: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: -2px -2px 5px fade(@black, 6%);
|
||||
border-top-color: @popover-bg;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: @popover-bg;
|
||||
box-shadow: -2px -2px 5px fade(@black, 6%);
|
||||
}
|
||||
&-placement-bottom > &-content > &-arrow {
|
||||
left: 50%;
|
||||
@ -185,11 +185,11 @@
|
||||
&-placement-leftTop > &-content > &-arrow,
|
||||
&-placement-leftBottom > &-content > &-arrow {
|
||||
right: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: 3px -3px 7px fade(@black, 7%);
|
||||
border-top-color: @popover-bg;
|
||||
border-right-color: @popover-bg;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
box-shadow: 3px -3px 7px fade(@black, 7%);
|
||||
}
|
||||
&-placement-left > &-content > &-arrow {
|
||||
top: 50%;
|
||||
|
||||
@ -223,7 +223,7 @@ exports[`Progress render strokeColor 1`] = `
|
||||
stroke="#f3f3f3"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"
|
||||
style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
@ -233,7 +233,7 @@ exports[`Progress render strokeColor 1`] = `
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px;"
|
||||
style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
display: inline-block;
|
||||
|
||||
&-line {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-small&-line,
|
||||
@ -24,18 +24,18 @@
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
.@{progress-prefix-cls}-show-info & {
|
||||
padding-right: ~'calc(2em + 8px)';
|
||||
margin-right: ~'calc(-2em - 8px)';
|
||||
padding-right: ~'calc(2em + 8px)';
|
||||
}
|
||||
}
|
||||
|
||||
&-inner {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
background-color: @progress-remaining-color;
|
||||
border-radius: 100px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-circle-trail {
|
||||
@ -43,52 +43,52 @@
|
||||
}
|
||||
|
||||
&-circle-path {
|
||||
stroke: @progress-default-color;
|
||||
animation: ~'@{ant-prefix}-progress-appear' 0.3s;
|
||||
stroke: @progress-default-color;
|
||||
}
|
||||
|
||||
&-success-bg,
|
||||
&-bg {
|
||||
position: relative;
|
||||
background-color: @progress-default-color;
|
||||
transition: all 0.4s @ease-out-circ 0s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-success-bg {
|
||||
background-color: @success-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @success-color;
|
||||
}
|
||||
|
||||
&-text {
|
||||
word-break: normal;
|
||||
width: 2em;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width: 2em;
|
||||
margin-left: 8px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
word-break: normal;
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-status-active {
|
||||
.@{progress-prefix-cls}-bg:before {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
.@{progress-prefix-cls}-bg::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: @component-background;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@ -124,16 +124,16 @@
|
||||
|
||||
&-circle &-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @progress-text-color;
|
||||
line-height: 1;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 14 / 12em;
|
||||
@ -154,15 +154,15 @@
|
||||
|
||||
@keyframes ~"@{ant-prefix}-progress-active" {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
width: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.5;
|
||||
width: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,21 +16,21 @@
|
||||
// 一般状态
|
||||
.@{radio-prefix-cls}-wrapper {
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
.reset-component;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: sub;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.@{radio-prefix-cls}-wrapper:hover &,
|
||||
@ -43,42 +43,42 @@
|
||||
box-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
|
||||
}
|
||||
|
||||
&-checked:after {
|
||||
&-checked::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 1px solid @radio-dot-color;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
animation: antRadioEffect 0.36s ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
.@{radio-prefix-cls}-wrapper:hover &:after {
|
||||
&:hover::after,
|
||||
.@{radio-prefix-cls}-wrapper:hover &::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
&:after {
|
||||
&::after {
|
||||
@radio-dot-size: @radio-size - 8px;
|
||||
position: absolute;
|
||||
top: (@radio-size - @radio-dot-size) / 2 - 1px;
|
||||
left: (@radio-size - @radio-dot-size) / 2 - 1px;
|
||||
display: table;
|
||||
width: @radio-dot-size;
|
||||
height: @radio-dot-size;
|
||||
left: (@radio-size - @radio-dot-size) / 2 - 1px;
|
||||
top: (@radio-size - @radio-dot-size) / 2 - 1px;
|
||||
border-radius: @radio-dot-size;
|
||||
display: table;
|
||||
background-color: @radio-dot-color;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
background-color: @radio-dot-color;
|
||||
opacity: 0;
|
||||
border-radius: @radio-dot-size;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: all @radio-duration @ease-in-out-circ;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
position: relative;
|
||||
@ -87,23 +87,23 @@
|
||||
display: block;
|
||||
width: @radio-size;
|
||||
height: @radio-size;
|
||||
background-color: @radio-button-bg;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 100px;
|
||||
border-color: @border-color-base;
|
||||
background-color: @radio-button-bg;
|
||||
border-radius: 100px;
|
||||
transition: all @radio-duration;
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
.@{radio-prefix-cls}-checked {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @radio-dot-color;
|
||||
&:after {
|
||||
&::after {
|
||||
transform: scale(0.875);
|
||||
opacity: 1;
|
||||
transition: all @radio-duration @ease-in-out-circ;
|
||||
@ -121,10 +121,10 @@
|
||||
|
||||
.@{radio-prefix-cls}-disabled {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @border-color-base !important;
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base !important;
|
||||
cursor: not-allowed;
|
||||
&:after {
|
||||
&::after {
|
||||
background-color: fade(@black, 20%);
|
||||
}
|
||||
}
|
||||
@ -140,65 +140,65 @@
|
||||
}
|
||||
|
||||
span.@{radio-prefix-cls} + * {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-button-wrapper {
|
||||
margin: 0;
|
||||
height: @btn-height-base;
|
||||
line-height: @btn-height-base - 2px;
|
||||
color: @radio-button-color;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: color 0.3s, background 0.3s, border-color 0.3s;
|
||||
cursor: pointer;
|
||||
height: @btn-height-base;
|
||||
margin: 0;
|
||||
padding: 0 @padding-md - 1px;
|
||||
color: @radio-button-color;
|
||||
line-height: @btn-height-base - 2px;
|
||||
background: @radio-button-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-left: 0;
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
border-top-width: @border-width-base + 0.02px;
|
||||
background: @radio-button-bg;
|
||||
padding: 0 @padding-md - 1px;
|
||||
position: relative;
|
||||
border-left: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background 0.3s, border-color 0.3s;
|
||||
|
||||
a {
|
||||
color: @radio-button-color;
|
||||
}
|
||||
|
||||
> .@{radio-prefix-cls}-button {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-large & {
|
||||
height: @input-height-lg;
|
||||
line-height: @input-height-lg - 2px;
|
||||
font-size: @font-size-lg;
|
||||
line-height: @input-height-lg - 2px;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-small & {
|
||||
height: @input-height-sm;
|
||||
line-height: @input-height-sm - 2px;
|
||||
padding: 0 @control-padding-horizontal-sm - 1px;
|
||||
line-height: @input-height-sm - 2px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: @border-color-base;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -210,8 +210,8 @@ span.@{radio-prefix-cls} + * {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @radio-dot-color;
|
||||
position: relative;
|
||||
color: @radio-dot-color;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
@ -221,18 +221,18 @@ span.@{radio-prefix-cls} + * {
|
||||
.@{radio-prefix-cls}-inner,
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
z-index: 1;
|
||||
color: @radio-dot-color;
|
||||
background: @radio-button-bg;
|
||||
border-color: @radio-dot-color;
|
||||
color: @radio-dot-color;
|
||||
box-shadow: -1px 0 0 0 @radio-dot-color;
|
||||
z-index: 1;
|
||||
&::before {
|
||||
background-color: @radio-dot-color !important;
|
||||
opacity: 0.1;
|
||||
@ -243,15 +243,15 @@ span.@{radio-prefix-cls} + * {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
box-shadow: -1px 0 0 0 @radio-button-hover-color;
|
||||
color: @radio-button-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
box-shadow: -1px 0 0 0 @radio-button-active-color;
|
||||
color: @radio-button-active-color;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
@ -260,18 +260,18 @@ span.@{radio-prefix-cls} + * {
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
|
||||
color: @component-background;
|
||||
background: @radio-dot-color;
|
||||
border-color: @radio-dot-color;
|
||||
color: @component-background;
|
||||
&:hover {
|
||||
border-color: @radio-button-hover-color;
|
||||
background: @radio-button-hover-color;
|
||||
color: @component-background;
|
||||
background: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
}
|
||||
&:active {
|
||||
border-color: @radio-button-active-color;
|
||||
background: @radio-button-active-color;
|
||||
color: @component-background;
|
||||
background: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
}
|
||||
&:focus-within {
|
||||
outline: @radio-focused-outline;
|
||||
@ -279,16 +279,16 @@ span.@{radio-prefix-cls} + * {
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
border-color: @border-color-base;
|
||||
background-color: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:first-child,
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
background-color: @input-disabled-bg;
|
||||
color: @disabled-color;
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
&:first-child {
|
||||
border-left-color: @border-color-base;
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
.@{rate-prefix-cls} {
|
||||
.reset-component;
|
||||
line-height: unset;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
color: @rate-star-color;
|
||||
font-size: 20px;
|
||||
line-height: unset;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
|
||||
&-disabled &-star {
|
||||
@ -22,14 +22,14 @@
|
||||
}
|
||||
|
||||
&-star {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
> div {
|
||||
&:focus {
|
||||
@ -44,9 +44,9 @@
|
||||
|
||||
&-first,
|
||||
&-second {
|
||||
user-select: none;
|
||||
transition: all 0.3s;
|
||||
color: @rate-star-bg;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
.@{iconfont-css-prefix} {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -54,8 +54,8 @@
|
||||
|
||||
&-first {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@ -74,8 +74,8 @@
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ exports[`Select Select Custom Icons should support customized icons 1`] = `
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<i
|
||||
|
||||
@ -5,27 +5,26 @@
|
||||
@select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
|
||||
.selection__clear() {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
z-index: 1;
|
||||
background: @component-background;
|
||||
top: 50%;
|
||||
font-size: @font-size-sm;
|
||||
color: @disabled-color;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -6px;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
font-style: normal;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
background: @component-background;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: color 0.3s ease, opacity 0.15s ease;
|
||||
&:before {
|
||||
text-rendering: auto;
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
&:hover {
|
||||
@ -35,8 +34,8 @@
|
||||
|
||||
.@{select-prefix-cls} {
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
|
||||
ul,
|
||||
@ -57,11 +56,11 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
line-height: 1;
|
||||
margin-top: -@font-size-sm / 2;
|
||||
transform-origin: 50% 50%;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1;
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
& &-icon svg {
|
||||
transition: transform 0.3s;
|
||||
@ -69,19 +68,19 @@
|
||||
}
|
||||
|
||||
&-selection {
|
||||
outline: none;
|
||||
user-select: none;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
border-top-width: @border-width-base + 0.02px;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
.hover;
|
||||
@ -103,11 +102,11 @@
|
||||
|
||||
&-selected-value {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
padding-right: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,33 +136,33 @@
|
||||
}
|
||||
|
||||
&-disabled &-selection--multiple &-selection__choice {
|
||||
background: @background-color-base;
|
||||
color: fade(@black, 33%);
|
||||
padding-right: 10px;
|
||||
color: fade(@black, 33%);
|
||||
background: @background-color-base;
|
||||
&__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection--single {
|
||||
height: @input-height-base;
|
||||
position: relative;
|
||||
height: @input-height-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-selection__rendered {
|
||||
display: block;
|
||||
margin-left: @control-padding-horizontal - 1px;
|
||||
margin-right: @control-padding-horizontal - 1px;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-right: @control-padding-horizontal - 1px;
|
||||
margin-left: @control-padding-horizontal - 1px;
|
||||
line-height: @input-height-base - 2px;
|
||||
// https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
|
||||
&:after {
|
||||
content: '.';
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
content: '.';
|
||||
}
|
||||
}
|
||||
|
||||
@ -194,8 +193,8 @@
|
||||
height: @input-height-sm;
|
||||
}
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: @input-height-sm - 2px;
|
||||
margin: 0 @control-padding-horizontal-sm - 1px;
|
||||
line-height: @input-height-sm - 2px;
|
||||
}
|
||||
.@{select-prefix-cls}-selection--multiple {
|
||||
min-height: @input-height-sm;
|
||||
@ -224,8 +223,8 @@
|
||||
}
|
||||
|
||||
&-search__field__wrap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-selection__placeholder,
|
||||
@ -233,17 +232,17 @@
|
||||
// for TreeSelect compatibility
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 9px;
|
||||
color: @input-placeholder-color;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: @input-placeholder-color;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-search__field__placeholder {
|
||||
@ -255,14 +254,14 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-search--inline {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.@{select-prefix-cls}-search__field__wrap {
|
||||
width: 100%;
|
||||
@ -270,14 +269,14 @@
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-search__field {
|
||||
border-width: 0;
|
||||
font-size: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
border-radius: @border-radius-base;
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
border-width: 0;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
@ -287,26 +286,26 @@
|
||||
|
||||
&-selection--multiple {
|
||||
min-height: @input-height-base;
|
||||
cursor: text;
|
||||
padding-bottom: 3px;
|
||||
cursor: text;
|
||||
.clearfix;
|
||||
|
||||
.@{select-prefix-cls}-search--inline {
|
||||
float: left;
|
||||
position: static;
|
||||
float: left;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
.@{select-prefix-cls}-search__field {
|
||||
max-width: 100%;
|
||||
width: 0.75em;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
margin-left: 5px;
|
||||
margin-bottom: -3px;
|
||||
height: auto;
|
||||
margin-bottom: -3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__placeholder {
|
||||
@ -315,25 +314,25 @@
|
||||
|
||||
> ul > li,
|
||||
.@{select-prefix-cls}-selection__rendered > ul > li {
|
||||
height: @input-height-base - 8px;
|
||||
// for tree-select
|
||||
margin-top: 3px;
|
||||
height: @input-height-base - 8px;
|
||||
line-height: @input-height-base - 8px - 2px;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice {
|
||||
position: relative;
|
||||
float: left;
|
||||
max-width: 99%;
|
||||
margin-right: 4px;
|
||||
padding: 0 20px 0 10px;
|
||||
overflow: hidden;
|
||||
color: @tag-default-color;
|
||||
background-color: @tag-default-bg;
|
||||
border: 1px solid @border-color-split;
|
||||
border-radius: @border-radius-sm;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
max-width: 99%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: padding 0.3s @ease-in-out;
|
||||
padding: 0 20px 0 10px;
|
||||
&__disabled {
|
||||
padding: 0 10px;
|
||||
}
|
||||
@ -341,25 +340,25 @@
|
||||
|
||||
.@{select-prefix-cls}-selection__choice__content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: margin 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice__remove {
|
||||
.iconfont-mixin();
|
||||
color: @text-color-secondary;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s;
|
||||
font-size: @font-size-sm;
|
||||
.iconfont-size-under-12px(10px);
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: inline-block;
|
||||
color: @text-color-secondary;
|
||||
font-weight: bold;
|
||||
font-size: @font-size-sm;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.iconfont-size-under-12px(10px);
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
@ -394,21 +393,21 @@
|
||||
display: none;
|
||||
}
|
||||
.@{select-prefix-cls}-search--inline {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.@{select-prefix-cls}-search__field__wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.@{select-prefix-cls}-search__field {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.3s @ease-in-out, height 0s;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s @ease-in-out, height 0s;
|
||||
}
|
||||
}
|
||||
&-combobox&-allow-clear &-selection:hover &-selection__rendered {
|
||||
@ -418,11 +417,22 @@
|
||||
|
||||
.@{select-prefix-cls}-dropdown {
|
||||
.reset-component;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
box-sizing: border-box;
|
||||
font-size: @font-size-base;
|
||||
// Fix select render lag of long text in chrome
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
font-variant: initial;
|
||||
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
|
||||
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpIn;
|
||||
@ -445,24 +455,13 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
background-color: @component-background;
|
||||
box-shadow: @box-shadow-base;
|
||||
border-radius: @border-radius-base;
|
||||
box-sizing: border-box;
|
||||
z-index: @zindex-dropdown;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&-menu {
|
||||
outline: none;
|
||||
max-height: 250px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
list-style: none;
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
@ -474,11 +473,11 @@
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
color: @text-color-secondary;
|
||||
padding: 0 @control-padding-horizontal;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 @control-padding-horizontal;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&-item-group-list &-item:first-child:not(:last-child),
|
||||
@ -490,13 +489,13 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
line-height: 22px;
|
||||
font-weight: normal;
|
||||
color: @text-color;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
@ -525,9 +524,9 @@
|
||||
&-selected {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @background-color-light;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
font-weight: 600;
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -539,8 +538,8 @@
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
background-color: @border-color-split;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -549,15 +548,15 @@
|
||||
.@{select-prefix-cls}-dropdown-menu-item {
|
||||
padding-right: @control-padding-horizontal + 20;
|
||||
& .@{select-prefix-cls}-selected-icon {
|
||||
color: transparent;
|
||||
.iconfont-size-under-12px(10px);
|
||||
transition: all 0.2s ease;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: @control-padding-horizontal;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.2s ease;
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
|
||||
&:hover .@{select-prefix-cls}-selected-icon {
|
||||
@ -570,8 +569,8 @@
|
||||
|
||||
&-selected .@{select-prefix-cls}-selected-icon,
|
||||
&-selected:hover .@{select-prefix-cls}-selected-icon {
|
||||
color: @primary-color;
|
||||
display: inline-block;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
|
||||
&-header {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
padding-right: 16px;
|
||||
vertical-align: top;
|
||||
|
||||
// Avatar
|
||||
.@{skeleton-avatar-prefix-cls} {
|
||||
@ -37,14 +37,14 @@
|
||||
|
||||
&-content {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
|
||||
// Title
|
||||
.@{skeleton-title-prefix-cls} {
|
||||
margin-top: 16px;
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin-top: 16px;
|
||||
background: @skeleton-color;
|
||||
|
||||
+ .@{skeleton-paragraph-prefix-cls} {
|
||||
@ -55,10 +55,10 @@
|
||||
// paragraph
|
||||
.@{skeleton-paragraph-prefix-cls} {
|
||||
> li {
|
||||
height: 16px;
|
||||
background: @skeleton-color;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
list-style: none;
|
||||
background: @skeleton-color;
|
||||
|
||||
&:last-child:not(:first-child):not(:nth-child(2)) {
|
||||
width: 61%;
|
||||
@ -114,8 +114,8 @@
|
||||
@skeleton-to-color 37%,
|
||||
@skeleton-color 63%
|
||||
);
|
||||
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
|
||||
background-size: 400% 100%;
|
||||
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes ~"@{skeleton-prefix-cls}-loading" {
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
.@{slider-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
height: 12px;
|
||||
margin: @slider-margin;
|
||||
padding: 4px 0;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
|
||||
@ -22,37 +22,37 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: @slider-rail-background-color;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
&-track {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @slider-track-background-color;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
margin-left: -7px;
|
||||
margin-top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
border: solid 2px @slider-handle-color;
|
||||
margin-top: -5px;
|
||||
margin-left: -7px;
|
||||
background-color: @component-background;
|
||||
border: solid 2px @slider-handle-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s, box-shadow 0.6s,
|
||||
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
|
||||
&:focus {
|
||||
border-color: @slider-handle-color-focus;
|
||||
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-tooltip-open {
|
||||
@ -83,10 +83,9 @@
|
||||
&-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: @text-color-secondary;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: @text-color-secondary;
|
||||
|
||||
&-active {
|
||||
color: @text-color;
|
||||
@ -103,14 +102,13 @@
|
||||
&-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid @slider-dot-border-color;
|
||||
margin-left: -4px;
|
||||
background-color: @component-background;
|
||||
cursor: pointer;
|
||||
border: 2px solid @slider-dot-border-color;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
@ -131,10 +129,10 @@
|
||||
|
||||
.@{slider-prefix-cls}-handle,
|
||||
.@{slider-prefix-cls}-dot {
|
||||
border-color: @slider-disabled-color !important;
|
||||
background-color: @component-background;
|
||||
cursor: not-allowed;
|
||||
border-color: @slider-disabled-color !important;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{slider-prefix-cls}-mark-text,
|
||||
@ -152,8 +150,8 @@
|
||||
padding: 0 4px;
|
||||
|
||||
.@{slider-prefix-cls}-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.@{slider-prefix-cls}-track {
|
||||
@ -161,8 +159,8 @@
|
||||
}
|
||||
|
||||
.@{slider-prefix-cls}-handle {
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.@{slider-prefix-cls}-mark {
|
||||
|
||||
@ -6,29 +6,29 @@
|
||||
|
||||
.@{spin-prefix-cls} {
|
||||
.reset-component;
|
||||
color: @primary-color;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: transform 0.3s @ease-in-out-circ;
|
||||
display: none;
|
||||
color: @primary-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
opacity: 0;
|
||||
transition: transform 0.3s @ease-in-out-circ;
|
||||
|
||||
&-spinning {
|
||||
opacity: 1;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-nested-loading {
|
||||
position: relative;
|
||||
> div > .@{spin-prefix-cls} {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 400px;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
.@{spin-prefix-cls}-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -76,31 +76,32 @@
|
||||
position: relative;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @component-background;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: ~'none \9';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @component-background;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-blur {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
opacity: 0.5;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
opacity: 0.4;
|
||||
pointer-events: auto;
|
||||
}
|
||||
@ -123,23 +124,23 @@
|
||||
.square(@spin-dot-size);
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 100%;
|
||||
background-color: @primary-color;
|
||||
border-radius: 100%;
|
||||
transform: scale(0.75);
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform-origin: 50% 50%;
|
||||
opacity: 0.3;
|
||||
animation: antSpinMove 1s infinite linear alternate;
|
||||
transform-origin: 50% 50%;
|
||||
&:nth-child(1) {
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
@ -148,8 +149,8 @@
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
.reset-component;
|
||||
|
||||
&-title {
|
||||
font-size: @statistic-title-font-size;
|
||||
margin-bottom: 4px;
|
||||
font-size: @statistic-title-font-size;
|
||||
}
|
||||
|
||||
&-content {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.@{steps-prefix-cls}-flex-not-supported {
|
||||
&.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
|
||||
.@{steps-prefix-cls}-item {
|
||||
background: @steps-background;
|
||||
padding-left: 16px;
|
||||
margin-left: -16px;
|
||||
padding-left: 16px;
|
||||
background: @steps-background;
|
||||
}
|
||||
|
||||
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item {
|
||||
padding-left: 12px;
|
||||
margin-left: -12px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,26 +17,26 @@
|
||||
&:last-child {
|
||||
overflow: hidden;
|
||||
|
||||
.@{steps-prefix-cls}-icon-dot:after {
|
||||
width: 200px;
|
||||
.@{steps-prefix-cls}-icon-dot::after {
|
||||
right: -200px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{steps-prefix-cls}-icon-dot:before,
|
||||
.@{steps-prefix-cls}-icon-dot:after {
|
||||
content: '';
|
||||
.@{steps-prefix-cls}-icon-dot::before,
|
||||
.@{steps-prefix-cls}-icon-dot::after {
|
||||
position: absolute;
|
||||
background: @steps-background;
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
top: 0;
|
||||
left: -10px;
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
background: @steps-background;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.@{steps-prefix-cls}-icon-dot:after {
|
||||
left: auto;
|
||||
.@{steps-prefix-cls}-icon-dot::after {
|
||||
right: -10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
.@{steps-prefix-cls}-item-custom {
|
||||
.@{steps-prefix-cls}-item-icon {
|
||||
height: auto;
|
||||
background: none;
|
||||
border: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
font-size: 24px;
|
||||
line-height: @steps-icon-size;
|
||||
top: 0;
|
||||
left: 0.5px;
|
||||
width: @steps-icon-size;
|
||||
height: @steps-icon-size;
|
||||
font-size: 24px;
|
||||
line-height: @steps-icon-size;
|
||||
}
|
||||
}
|
||||
&.@{steps-prefix-cls}-item-process {
|
||||
@ -19,3 +18,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only adjust horizontal customize icon width
|
||||
.@{steps-prefix-cls} {
|
||||
&:not(.@{steps-prefix-cls}-vertical) {
|
||||
.@{steps-prefix-cls}-item-custom {
|
||||
.@{steps-prefix-cls}-item-icon {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,24 +29,24 @@
|
||||
|
||||
.@{steps-prefix-cls} {
|
||||
.reset-component;
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.@{steps-prefix-cls}-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
|
||||
&:last-child {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&:last-child &-tail,
|
||||
&:last-child &-title:after {
|
||||
&:last-child &-title::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -57,61 +57,61 @@
|
||||
}
|
||||
|
||||
&-icon {
|
||||
border: @border-width-base @border-style-base @wait-icon-color;
|
||||
width: @steps-icon-size;
|
||||
height: @steps-icon-size;
|
||||
margin-right: 8px;
|
||||
font-size: @font-size-lg;
|
||||
font-family: @font-family;
|
||||
line-height: @steps-icon-size;
|
||||
text-align: center;
|
||||
border: @border-width-base @border-style-base @wait-icon-color;
|
||||
border-radius: @steps-icon-size;
|
||||
font-size: @font-size-lg;
|
||||
margin-right: 8px;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
font-family: @font-family;
|
||||
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
color: @primary-color;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
&-tail {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 12px;
|
||||
padding: 0 10px;
|
||||
&:after {
|
||||
content: '';
|
||||
&::after {
|
||||
display: inline-block;
|
||||
background: @border-color-split;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: @border-color-split;
|
||||
border-radius: 1px;
|
||||
transition: background 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-right: 16px;
|
||||
position: relative;
|
||||
color: @text-color;
|
||||
font-size: @font-size-lg;
|
||||
line-height: @steps-icon-size;
|
||||
&:after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 9999px;
|
||||
background: @wait-tail-color;
|
||||
display: block;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: @steps-icon-size / 2;
|
||||
left: 100%;
|
||||
display: block;
|
||||
width: 9999px;
|
||||
height: 1px;
|
||||
background: @wait-tail-color;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.step-item-status(wait);
|
||||
.step-item-status(process);
|
||||
@ -127,7 +127,7 @@
|
||||
.step-item-status(finish);
|
||||
.step-item-status(error);
|
||||
|
||||
&.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title:after {
|
||||
&.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
|
||||
background: @error-icon-color;
|
||||
}
|
||||
}
|
||||
@ -158,8 +158,8 @@
|
||||
@description-color: '@{status}-description-color';
|
||||
@tail-color: '@{status}-tail-color';
|
||||
&-@{status} &-icon {
|
||||
border-color: @@icon-color;
|
||||
background-color: @steps-background;
|
||||
border-color: @@icon-color;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
color: @@icon-color;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
@ -169,14 +169,14 @@
|
||||
}
|
||||
&-@{status} > &-content > &-title {
|
||||
color: @@title-color;
|
||||
&:after {
|
||||
&::after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
&-@{status} > &-content > &-description {
|
||||
color: @@description-color;
|
||||
}
|
||||
&-@{status} > &-tail:after {
|
||||
&-@{status} > &-tail::after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
.@{steps-prefix-cls}-item {
|
||||
overflow: visible;
|
||||
&-tail {
|
||||
padding: 3.5px 24px;
|
||||
margin-left: 51px;
|
||||
padding: 3.5px 24px;
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
// icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
|
||||
width: (@steps-icon-size / 2 + 36px) * 2;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
&-title {
|
||||
padding-right: 0;
|
||||
&:after {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
&-tail {
|
||||
width: 100%;
|
||||
top: 2px;
|
||||
width: 100%;
|
||||
margin: 0 0 0 @steps-desciption-max-width / 2;
|
||||
padding: 0;
|
||||
&:after {
|
||||
height: 3px;
|
||||
&::after {
|
||||
width: ~'calc(100% - 20px)';
|
||||
height: 3px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
@ -18,29 +18,29 @@
|
||||
left: 2px;
|
||||
}
|
||||
&-icon {
|
||||
padding-right: 0;
|
||||
width: @steps-dot-size;
|
||||
height: @steps-dot-size;
|
||||
line-height: @steps-dot-size;
|
||||
border: 0;
|
||||
margin-left: 67px;
|
||||
padding-right: 0;
|
||||
line-height: @steps-dot-size;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
/* expand hover area */
|
||||
&:after {
|
||||
content: '';
|
||||
background: fade(@black, 0.1%);
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -26px;
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
background: fade(@black, 0.1%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -60,13 +60,13 @@
|
||||
|
||||
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
|
||||
.@{steps-prefix-cls}-item-icon {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.@{steps-prefix-cls}-item-tail {
|
||||
margin: 0;
|
||||
left: -9px;
|
||||
top: 2px;
|
||||
left: -9px;
|
||||
margin: 0;
|
||||
padding: 22px 0 4px;
|
||||
}
|
||||
.@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
|
||||
|
||||
@ -9,22 +9,22 @@
|
||||
.@{steps-prefix-cls}-item-icon {
|
||||
width: @steps-small-icon-size;
|
||||
height: @steps-small-icon-size;
|
||||
font-size: @font-size-sm;
|
||||
line-height: @steps-small-icon-size;
|
||||
text-align: center;
|
||||
border-radius: @steps-small-icon-size;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
.@{steps-prefix-cls}-item-title {
|
||||
padding-right: 12px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @steps-small-icon-size;
|
||||
padding-right: 12px;
|
||||
&:after {
|
||||
&::after {
|
||||
top: @steps-small-icon-size / 2;
|
||||
}
|
||||
}
|
||||
.@{steps-prefix-cls}-item-description {
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.@{steps-prefix-cls}-item-tail {
|
||||
top: 8px;
|
||||
@ -34,9 +34,9 @@
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
font-size: @steps-small-icon-size;
|
||||
line-height: @steps-small-icon-size;
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
margin-right: 16px;
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
&-title {
|
||||
line-height: @steps-icon-size;
|
||||
@ -22,14 +22,14 @@
|
||||
|
||||
> .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
left: 16px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
padding: @steps-icon-size + 6px 0 6px;
|
||||
&:after {
|
||||
height: 100%;
|
||||
&::after {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
> .@{steps-prefix-cls}-item
|
||||
> .@{steps-prefix-cls}-item-content
|
||||
> .@{steps-prefix-cls}-item-title {
|
||||
&:after {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -48,8 +48,8 @@
|
||||
&.@{steps-prefix-cls}-small {
|
||||
.@{steps-prefix-cls}-item-tail {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
left: 12px;
|
||||
padding: @steps-small-icon-size + 6px 0 6px;
|
||||
}
|
||||
.@{steps-prefix-cls}-item-title {
|
||||
|
||||
@ -71,13 +71,13 @@ section {
|
||||
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-base;
|
||||
font-variant: @font-variant-base;
|
||||
font-feature-settings: 'tnum';
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-family: @font-family;
|
||||
font-variant: @font-variant-base;
|
||||
line-height: @line-height-base;
|
||||
background-color: @body-background; // 2
|
||||
font-feature-settings: 'tnum';
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
@ -141,8 +141,8 @@ abbr[data-original-title] {
|
||||
// 4
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
cursor: help; // 3
|
||||
border-bottom: 0; // 1
|
||||
cursor: help; // 3
|
||||
}
|
||||
|
||||
address {
|
||||
@ -224,8 +224,8 @@ sup {
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
background-color: transparent; // remove the gray background on active links in IE 10.
|
||||
text-decoration: @link-decoration;
|
||||
background-color: transparent; // remove the gray background on active links in IE 10.
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
@ -246,8 +246,8 @@ a {
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
outline: 0;
|
||||
text-decoration: @link-hover-decoration;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
@ -265,8 +265,8 @@ pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: @code-family;
|
||||
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||
font-family: @code-family;
|
||||
}
|
||||
|
||||
pre {
|
||||
@ -353,10 +353,10 @@ select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0; // remove the margin in Firefox and Safari
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
@ -373,7 +373,7 @@ select {
|
||||
// controls in Android 4.
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
button,
|
||||
html [type="button"], // 1
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
@ -419,9 +419,9 @@ fieldset {
|
||||
// See https://github.com/twbs/bootstrap/issues/12359
|
||||
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -431,11 +431,11 @@ legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%; // 1
|
||||
padding: 0;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0;
|
||||
color: inherit; // 2
|
||||
font-size: 1.5em;
|
||||
line-height: inherit;
|
||||
color: inherit; // 2
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
@ -505,8 +505,8 @@ mark {
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: @primary-color;
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-spin:before {
|
||||
.@{iconfont-css-prefix}-spin::before {
|
||||
display: inline-block;
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
}
|
||||
|
||||
@ -17,104 +17,104 @@
|
||||
|
||||
@keyframes antMoveDownIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveDownOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveLeftOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveUpIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antMoveUpOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,29 +9,29 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[ant-click-animating-without-extra-node='true']:after,
|
||||
[ant-click-animating-without-extra-node='true']::after,
|
||||
.ant-click-animating-node {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-radius: inherit;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
display: block;
|
||||
border: 0 solid @primary-color;
|
||||
border-radius: inherit;
|
||||
opacity: 0.2;
|
||||
animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
|
||||
animation-fill-mode: forwards;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@keyframes waveEffect {
|
||||
100% {
|
||||
top: -@wave-animation-width;
|
||||
left: -@wave-animation-width;
|
||||
bottom: -@wave-animation-width;
|
||||
right: -@wave-animation-width;
|
||||
bottom: -@wave-animation-width;
|
||||
left: -@wave-animation-width;
|
||||
border-width: @wave-animation-width;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,104 +17,104 @@
|
||||
|
||||
@keyframes antSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(1);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSlideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(1);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,12 +25,12 @@
|
||||
|
||||
@keyframes antZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,19 +39,19 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomBigIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,103 +60,103 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 50% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomUpOut {
|
||||
0% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 50% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 0% 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1);
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomLeftOut {
|
||||
0% {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1);
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 0% 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomRightOut {
|
||||
0% {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
// ------------------------
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.iconfont-mixin() {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
line-height: 0;
|
||||
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@ -17,7 +17,7 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
display: none; // dont display old icon.
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
@import '../themes/default';
|
||||
|
||||
.reset-component() {
|
||||
font-size: @font-size-base;
|
||||
font-variant: @font-variant-base;
|
||||
font-feature-settings: 'tnum';
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-variant: @font-variant-base;
|
||||
line-height: @line-height-base;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
}
|
||||
|
||||
@ -9,61 +9,61 @@
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: @switch-height;
|
||||
min-width: 44px;
|
||||
height: @switch-height;
|
||||
line-height: @switch-height - 2px;
|
||||
vertical-align: middle;
|
||||
border-radius: 100px;
|
||||
border: 1px solid transparent;
|
||||
background-color: @disabled-color;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all @switch-duration;
|
||||
user-select: none;
|
||||
|
||||
&-inner {
|
||||
display: block;
|
||||
margin-right: 6px;
|
||||
margin-left: 24px;
|
||||
color: @text-color-inverse;
|
||||
font-size: @font-size-sm;
|
||||
margin-left: 24px;
|
||||
margin-right: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-loading-icon,
|
||||
&:after {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: @switch-height - 4px;
|
||||
height: @switch-height - 4px;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
border-radius: 18px;
|
||||
background-color: @component-background;
|
||||
content: ' ';
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
transition: all @switch-duration @ease-in-out-circ;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
box-shadow: 0 2px 4px 0 @switch-shadow-color;
|
||||
}
|
||||
|
||||
&:active:before,
|
||||
&:active:after {
|
||||
&:active::before,
|
||||
&:active::after {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&-loading-icon {
|
||||
// loading default use animation
|
||||
// animation: loadingCircle 1s infinite linear;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
// loading default use animation
|
||||
// animation: loadingCircle 1s infinite linear;
|
||||
background: transparent;
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@ -78,8 +78,8 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px fade(@switch-color, 20%);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px fade(@switch-color, 20%);
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
@ -87,23 +87,23 @@
|
||||
}
|
||||
|
||||
&-small {
|
||||
height: @switch-sm-height;
|
||||
min-width: 28px;
|
||||
height: @switch-sm-height;
|
||||
line-height: @switch-sm-height - 2px;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-left: 18px;
|
||||
margin-right: 3px;
|
||||
margin-left: 18px;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
width: @switch-sm-height - 4px;
|
||||
height: @switch-sm-height - 4px;
|
||||
}
|
||||
|
||||
&:active:before,
|
||||
&:active:after {
|
||||
&:active::before,
|
||||
&:active::after {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
@ -115,8 +115,8 @@
|
||||
|
||||
&-small&-checked {
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-left: 3px;
|
||||
margin-right: 18px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,23 +126,23 @@
|
||||
}
|
||||
|
||||
&-small&-loading &-loading-icon {
|
||||
font-weight: bold;
|
||||
// animation: AntSwitchSmallLoadingCircle 1s infinite linear;
|
||||
transform: scale(0.66667);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background-color: @switch-color;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-left: 6px;
|
||||
margin-right: 24px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
left: 100%;
|
||||
transform: translateX(-100%);
|
||||
margin-left: -1px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,8 +158,8 @@
|
||||
* {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@ -167,11 +167,11 @@
|
||||
|
||||
@keyframes AntSwitchSmallLoadingCircle {
|
||||
0% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(0deg) scale(0.66667);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(360deg) scale(0.66667);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -167,7 +167,8 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
}
|
||||
|
||||
getDefaultPagination(props: TableProps<T>) {
|
||||
const pagination: PaginationConfig = props.pagination || {};
|
||||
const pagination: PaginationConfig =
|
||||
typeof props.pagination === 'object' ? props.pagination : {};
|
||||
let current;
|
||||
if ('current' in pagination) {
|
||||
current = pagination.current;
|
||||
@ -741,6 +742,13 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
return ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
};
|
||||
|
||||
generatePopupContainerFunc = () => {
|
||||
const { scroll } = this.props;
|
||||
|
||||
// Use undefined to let rc component use default logic.
|
||||
return scroll ? this.getPopupContainer : undefined;
|
||||
};
|
||||
|
||||
renderRowSelection(prefixCls: string, locale: TableLocale) {
|
||||
const { rowSelection, childrenColumnName } = this.props;
|
||||
const columns = this.columns.concat();
|
||||
@ -778,7 +786,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
onSelect={this.handleSelectRow}
|
||||
selections={rowSelection.selections}
|
||||
hideDefaultSelections={rowSelection.hideDefaultSelections}
|
||||
getPopupContainer={this.getPopupContainer}
|
||||
getPopupContainer={this.generatePopupContainerFunc()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -841,7 +849,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
confirmFilter={this.handleFilter}
|
||||
prefixCls={`${prefixCls}-filter`}
|
||||
dropdownPrefixCls={dropdownPrefixCls || 'ant-dropdown'}
|
||||
getPopupContainer={this.getPopupContainer}
|
||||
getPopupContainer={this.generatePopupContainerFunc()}
|
||||
key="filter-dropdown"
|
||||
/>
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user