mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-02 03:57:38 +08:00
chore: sync ant-design v4.16.0 (#1569)
This commit is contained in:
parent
ea43ee7555
commit
c181916dea
@ -62,6 +62,10 @@
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
transform-origin: 100% 0%;
|
||||
|
||||
&.@{iconfont-css-prefix}-spin {
|
||||
animation: antBadgeLoadingCircle 1s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&-status {
|
||||
@ -244,5 +248,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antBadgeLoadingCircle {
|
||||
0% {
|
||||
transform-origin: 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(50%, -50%) rotate(360deg);
|
||||
transform-origin: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@import './ribbon';
|
||||
@import './rtl';
|
||||
|
@ -237,9 +237,10 @@
|
||||
|
||||
a.@{btn-prefix-cls} {
|
||||
// Fixing https://github.com/ant-design/ant-design/issues/12978
|
||||
// https://github.com/ant-design/ant-design/issues/29978
|
||||
// It is a render problem of chrome, which is only happened in the codesandbox demo
|
||||
// 0.1px for padding-top solution works and I don't why
|
||||
padding-top: 0.1px;
|
||||
padding-top: 0.01px !important;
|
||||
line-height: @btn-height-base - 2px;
|
||||
|
||||
&-lg {
|
||||
|
@ -151,6 +151,13 @@
|
||||
line-height: unset;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
|
||||
&.@{checkbox-prefix-cls}-wrapper-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
@ -24,7 +24,6 @@
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
position: relative;
|
||||
padding: @collapse-header-padding;
|
||||
padding-left: @collapse-header-padding-extra;
|
||||
color: @heading-color;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
@ -32,17 +31,10 @@
|
||||
.clearfix();
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
.iconfont-mixin();
|
||||
|
||||
position: absolute;
|
||||
top: ((@font-size-base * @line-height-base - @font-size-sm) / 2);
|
||||
left: @collapse-header-arrow-left;
|
||||
display: inline-block;
|
||||
padding: @collapse-header-padding;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
margin-right: 12px;
|
||||
font-size: @font-size-sm;
|
||||
vertical-align: -1px;
|
||||
|
||||
& svg {
|
||||
transition: transform 0.24s;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../../style/themes/default';
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
|
@ -43,7 +43,8 @@
|
||||
}
|
||||
|
||||
&-hidden,
|
||||
&-menu-hidden {
|
||||
&-menu-hidden,
|
||||
&-menu-submenu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -61,7 +61,9 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Don't impact select inside input group
|
||||
// Don't impact select inside input group and calendar header select
|
||||
.@{ant-prefix}-picker-calendar-year-select,
|
||||
.@{ant-prefix}-picker-calendar-month-select,
|
||||
.@{ant-prefix}-input-group .@{ant-prefix}-select,
|
||||
.@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
|
||||
width: auto;
|
||||
|
@ -20,16 +20,22 @@
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-disabled {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @input-border-color;
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-affix-wrapper-disabled {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @input-border-color;
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @input-border-color;
|
||||
|
||||
input:focus {
|
||||
box-shadow: none !important;
|
||||
input:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -182,7 +182,9 @@
|
||||
.@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
|
||||
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
|
||||
.@{ant-prefix}-select-selector {
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,9 +223,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
|
||||
background-color: @form-error-input-bg;
|
||||
.active(@error-color);
|
||||
// cascader
|
||||
.@{ant-prefix}-cascader-picker {
|
||||
&:hover
|
||||
.@{ant-prefix}-cascader-picker-label:hover
|
||||
+ .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
|
||||
border-color: @error-color;
|
||||
}
|
||||
|
||||
&:focus .@{ant-prefix}-cascader-input {
|
||||
background-color: @form-error-input-bg;
|
||||
.active(@error-color);
|
||||
}
|
||||
}
|
||||
|
||||
// transfer
|
||||
|
@ -2,6 +2,7 @@
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@layout-prefix-cls: ~'@{ant-prefix}-layout';
|
||||
@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||
|
||||
.@{layout-prefix-cls} {
|
||||
display: flex;
|
||||
@ -66,6 +67,10 @@
|
||||
// https://github.com/ant-design/ant-design/issues/7967
|
||||
// solution from https://stackoverflow.com/a/33132624/3040605
|
||||
padding-top: 0.1px;
|
||||
|
||||
.@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-has-trigger {
|
||||
|
@ -3,6 +3,13 @@
|
||||
@import './status';
|
||||
|
||||
@menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||
@menu-animation-duration-normal: 0.15s;
|
||||
|
||||
.accessibility-focus() {
|
||||
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
|
||||
}
|
||||
|
||||
// TODO: Should remove icon style compatible in v5
|
||||
|
||||
// default theme
|
||||
.@{menu-prefix-cls} {
|
||||
@ -18,9 +25,14 @@
|
||||
background: @menu-bg;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||
transition: background @animation-duration-slow,
|
||||
width @animation-duration-slow cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||
.clearfix();
|
||||
|
||||
&&-root:focus-visible {
|
||||
.accessibility-focus();
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
@ -28,7 +40,8 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
&-hidden,
|
||||
&-submenu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -38,16 +51,18 @@
|
||||
color: @menu-item-group-title-color;
|
||||
font-size: @menu-item-group-title-font-size;
|
||||
line-height: @menu-item-group-height;
|
||||
transition: all 0.3s;
|
||||
transition: all @animation-duration-slow;
|
||||
}
|
||||
|
||||
&-horizontal &-submenu {
|
||||
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
|
||||
transition: border-color @animation-duration-slow @ease-in-out,
|
||||
background @animation-duration-slow @ease-in-out;
|
||||
}
|
||||
&-submenu,
|
||||
&-submenu-inline {
|
||||
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
|
||||
padding 0.15s @ease-in-out;
|
||||
transition: border-color @animation-duration-slow @ease-in-out,
|
||||
background @animation-duration-slow @ease-in-out,
|
||||
padding @menu-animation-duration-normal @ease-in-out;
|
||||
}
|
||||
|
||||
&-submenu-selected {
|
||||
@ -61,7 +76,8 @@
|
||||
|
||||
&-submenu &-sub {
|
||||
cursor: initial;
|
||||
transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
|
||||
transition: background @animation-duration-slow @ease-in-out,
|
||||
padding @animation-duration-slow @ease-in-out;
|
||||
}
|
||||
|
||||
&-item a {
|
||||
@ -172,7 +188,7 @@
|
||||
|
||||
&-horizontal &-item,
|
||||
&-horizontal &-submenu-title {
|
||||
transition: border-color 0.3s, background 0.3s;
|
||||
transition: border-color @animation-duration-slow, background @animation-duration-slow;
|
||||
}
|
||||
|
||||
&-item,
|
||||
@ -183,26 +199,39 @@
|
||||
padding: @menu-item-padding;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s, background 0.3s, padding 0.15s @ease-in-out;
|
||||
transition: border-color @animation-duration-slow, background @animation-duration-slow,
|
||||
padding @animation-duration-slow @ease-in-out;
|
||||
|
||||
.@{menu-prefix-cls}-item-icon,
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: @menu-icon-margin-right;
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out, color 0.3s;
|
||||
transition: font-size @menu-animation-duration-normal @ease-out,
|
||||
margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
||||
+ span {
|
||||
margin-left: @menu-icon-margin-right;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out, color 0.3s;
|
||||
// transition: opacity @animation-duration-slow @ease-in-out,
|
||||
// width @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
||||
transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow,
|
||||
color @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-icon.svg {
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
&.@{menu-prefix-cls}-item-only-child {
|
||||
> .@{iconfont-css-prefix},
|
||||
> .@{menu-prefix-cls}-item-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.accessibility-focus();
|
||||
}
|
||||
}
|
||||
|
||||
& > &-item-divider {
|
||||
@ -248,7 +277,7 @@
|
||||
background-color: @menu-bg;
|
||||
border-radius: @border-radius-base;
|
||||
&-submenu-title::after {
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
transition: transform @animation-duration-slow @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -264,10 +293,11 @@
|
||||
width: 10px;
|
||||
color: @menu-item-color;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
transition: transform @animation-duration-slow @ease-in-out;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
// →
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
@ -275,8 +305,9 @@
|
||||
height: 1.5px;
|
||||
background-color: currentColor;
|
||||
border-radius: 2px;
|
||||
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out,
|
||||
color 0.3s @ease-in-out;
|
||||
transition: background @animation-duration-slow @ease-in-out,
|
||||
transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
|
||||
color @animation-duration-slow @ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
&::before {
|
||||
@ -292,7 +323,9 @@
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-inline-collapsed &-arrow,
|
||||
&-inline &-arrow {
|
||||
// ↓
|
||||
&::before {
|
||||
transform: rotate(-45deg) translateX(2.5px);
|
||||
}
|
||||
@ -306,6 +339,7 @@
|
||||
}
|
||||
|
||||
&-open&-inline > &-title > &-arrow {
|
||||
// ↑
|
||||
transform: translateY(-2px);
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateX(-2.5px);
|
||||
@ -398,7 +432,8 @@
|
||||
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;
|
||||
transition: transform @menu-animation-duration-normal @ease-out,
|
||||
opacity @menu-animation-duration-normal @ease-out;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
@ -431,6 +466,7 @@
|
||||
}
|
||||
|
||||
&-vertical {
|
||||
.@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding-right: 34px;
|
||||
}
|
||||
@ -443,7 +479,8 @@
|
||||
&::after {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
|
||||
transition: transform @menu-animation-duration-normal @ease-in-out,
|
||||
opacity @menu-animation-duration-normal @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -452,13 +489,37 @@
|
||||
width: ~'calc(100% + 1px)';
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding-right: 34px;
|
||||
}
|
||||
|
||||
// Motion enhance for first level
|
||||
&.@{menu-prefix-cls}-root {
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: border-color @animation-duration-slow, background @animation-duration-slow,
|
||||
padding 0.1s @ease-out;
|
||||
|
||||
> .@{menu-prefix-cls}-title-content {
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inline-collapsed {
|
||||
&&-inline-collapsed {
|
||||
width: @menu-collapsed-width;
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-item-group
|
||||
> .@{menu-prefix-cls}-item-group-list
|
||||
@ -471,8 +532,9 @@
|
||||
left: 0;
|
||||
padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
|
||||
text-overflow: clip;
|
||||
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-icon,
|
||||
@ -482,7 +544,6 @@
|
||||
line-height: @menu-item-height;
|
||||
+ span {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
@ -93,7 +93,7 @@
|
||||
@modal-footer-border-color-split;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
|
||||
.@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
@ -31,14 +31,19 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-hook-holder,
|
||||
&-hook-holder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
position: relative;
|
||||
width: @notification-width;
|
||||
max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
margin-left: auto;
|
||||
padding: @notification-padding;
|
||||
overflow: hidden;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
background: @notification-bg;
|
||||
border-radius: @border-radius-base;
|
||||
@ -49,16 +54,6 @@
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-hook-holder > &-notice {
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
padding: @notification-padding;
|
||||
line-height: @line-height-base;
|
||||
|
||||
&-message {
|
||||
margin-bottom: 8px;
|
||||
|
@ -111,7 +111,8 @@
|
||||
}
|
||||
|
||||
.@{ant-prefix}-tabs-tab {
|
||||
padding: @tabs-horizontal-padding-sm;
|
||||
padding-top: @padding-xs;
|
||||
padding-bottom: @padding-xs;
|
||||
font-size: @page-header-tabs-tab-font-size;
|
||||
}
|
||||
}
|
||||
|
@ -32,6 +32,13 @@
|
||||
align-items: baseline;
|
||||
margin-right: @radio-wrapper-margin-right;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
@ -77,7 +84,7 @@
|
||||
position: absolute;
|
||||
top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
|
||||
left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
|
||||
display: table;
|
||||
display: block;
|
||||
width: @radio-dot-size;
|
||||
height: @radio-dot-size;
|
||||
background-color: @radio-dot-color;
|
||||
|
@ -27,21 +27,22 @@
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> div {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
transform: @rate-star-hover-scale;
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-first,
|
||||
|
@ -10,6 +10,7 @@
|
||||
}
|
||||
|
||||
&.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child {
|
||||
padding-bottom: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
|
@ -242,3 +242,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL Steps with progress
|
||||
.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
|
||||
.@{steps-prefix-cls}-item:first-child.@{steps-prefix-cls}-item-active {
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
@ -239,7 +239,6 @@ a {
|
||||
&[disabled] {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -323,12 +322,6 @@ caption {
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
|
||||
// closest parent with a set `text-align`.
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
@ -310,6 +310,7 @@
|
||||
@table-header-bg: #1d1d1d;
|
||||
@table-body-sort-bg: fade(@white, 1%);
|
||||
@table-row-hover-bg: #262626;
|
||||
@table-header-cell-split-color: fade(@white, 8%);
|
||||
@table-header-sort-bg: #262626;
|
||||
@table-header-filter-active-bg: #434343;
|
||||
@table-header-sort-active-bg: #303030;
|
||||
|
@ -462,7 +462,7 @@
|
||||
|
||||
// Anchor
|
||||
// ---
|
||||
@anchor-bg: @component-background;
|
||||
@anchor-bg: transparent;
|
||||
@anchor-border-color: @border-color-split;
|
||||
@anchor-link-top: 7px;
|
||||
@anchor-link-left: 16px;
|
||||
@ -609,11 +609,12 @@
|
||||
@table-font-size: @font-size-base;
|
||||
@table-font-size-md: @table-font-size;
|
||||
@table-font-size-sm: @table-font-size;
|
||||
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
|
||||
// Sorter
|
||||
// Legacy: `table-header-sort-active-bg` is used for hover not real active
|
||||
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
|
||||
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
|
||||
// Filter
|
||||
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
|
||||
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
|
||||
@table-filter-btns-bg: inherit;
|
||||
@table-filter-dropdown-bg: @component-background;
|
||||
@table-expand-icon-bg: @component-background;
|
||||
|
@ -32,6 +32,12 @@
|
||||
> tr:not(:last-child) > th {
|
||||
border-bottom: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
|
||||
> tr > th {
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed right should provides additional border
|
||||
|
@ -8,8 +8,7 @@
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
@table-header-icon-color: #bfbfbf;
|
||||
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
|
||||
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
|
||||
@table-sticky-zindex: calc(@zindex-table-fixed + 1);
|
||||
@table-sticky-zindex: (@zindex-table-fixed + 1);
|
||||
@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
|
||||
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
@ -23,7 +22,7 @@
|
||||
position: relative;
|
||||
font-size: @table-font-size;
|
||||
background: @table-bg;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @table-border-radius-base;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/17611
|
||||
table {
|
||||
@ -79,6 +78,7 @@
|
||||
&-thead {
|
||||
> tr {
|
||||
> th {
|
||||
position: relative;
|
||||
color: @table-header-color;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
@ -89,6 +89,18 @@
|
||||
&[colspan]:not([colspan='1']) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 1.6em;
|
||||
background-color: @table-header-cell-split-color;
|
||||
transform: translateY(-50%);
|
||||
transition: background-color 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +119,8 @@
|
||||
transition: background 0.3s;
|
||||
|
||||
// ========================= Nest Table ===========================
|
||||
> .@{table-prefix-cls}-wrapper:only-child {
|
||||
> .@{table-prefix-cls}-wrapper:only-child,
|
||||
> .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child {
|
||||
.@{table-prefix-cls} {
|
||||
margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
|
||||
ceil(@font-size-sm * 1.4));
|
||||
@ -146,7 +159,13 @@
|
||||
}
|
||||
|
||||
// =========================== Summary ============================
|
||||
tfoot {
|
||||
&-summary {
|
||||
background: @table-bg;
|
||||
|
||||
div& {
|
||||
box-shadow: 0 -@border-width-base 0 @table-border-color;
|
||||
}
|
||||
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
@ -162,6 +181,12 @@
|
||||
|
||||
&-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: @padding-xs;
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&-left {
|
||||
justify-content: flex-start;
|
||||
@ -182,47 +207,52 @@
|
||||
|
||||
// ============================ Sorter ============================
|
||||
&-thead th.@{table-prefix-cls}-column-has-sorters {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: @table-header-sort-active-bg;
|
||||
|
||||
.@{table-prefix-cls}-filter-trigger-container {
|
||||
background: @table-header-sort-active-filter-bg;
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-thead th.@{table-prefix-cls}-column-sort {
|
||||
background: @table-header-sort-bg;
|
||||
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
td&-column-sort {
|
||||
background: @table-body-sort-bg;
|
||||
}
|
||||
|
||||
&-column-sorters-with-tooltip {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-column-sorters {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: center;
|
||||
padding: @table-padding-vertical @table-padding-horizontal;
|
||||
justify-content: space-between;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-column-sorter {
|
||||
margin-top: 0.15em;
|
||||
margin-bottom: -0.15em;
|
||||
margin-left: @padding-xs;
|
||||
color: @table-header-icon-color;
|
||||
|
||||
&-full {
|
||||
margin-top: -0.2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
font-size: 0;
|
||||
transition: color 0.3s;
|
||||
|
||||
&-inner {
|
||||
display: inline-flex;
|
||||
@ -244,65 +274,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-column-sorters:hover &-column-sorter {
|
||||
color: darken(@table-header-icon-color, 10%);
|
||||
}
|
||||
|
||||
// ============================ Filter ============================
|
||||
&-filter-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -@table-padding-vertical -@table-padding-horizontal;
|
||||
}
|
||||
|
||||
&-filter-column-title {
|
||||
flex: auto;
|
||||
padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
|
||||
}
|
||||
|
||||
// Remove padding when sorter also provided
|
||||
&-thead tr th.@{table-prefix-cls}-column-has-sorters {
|
||||
.@{table-prefix-cls}-filter-column {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column-title {
|
||||
padding: 0 2.3em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-filter-trigger-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: stretch;
|
||||
align-self: stretch;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&-open,
|
||||
&:hover,
|
||||
.@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-filter-trigger {
|
||||
display: block;
|
||||
width: 2.3em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
|
||||
padding: 0 4px;
|
||||
color: @table-header-icon-color;
|
||||
font-size: @font-size-sm;
|
||||
transition: color 0.3s;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-trigger-container-open &,
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -356,10 +352,14 @@
|
||||
}
|
||||
|
||||
// ========================== Selections ==========================
|
||||
.@{table-prefix-cls}-selection-col {
|
||||
&-selection-col {
|
||||
width: @table-selection-column-width;
|
||||
}
|
||||
|
||||
&-bordered &-selection-col {
|
||||
width: @table-selection-column-width + 18px;
|
||||
}
|
||||
|
||||
table tr th&-selection-column,
|
||||
table tr td&-selection-column {
|
||||
padding-right: @padding-xs;
|
||||
@ -371,6 +371,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
table tr th&-selection-column::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&-selection {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -427,7 +431,6 @@
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transform: scale((unit(@checkbox-size) / unit(@expand-icon-size)));
|
||||
transform-origin: bottom;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
@expand-icon-size: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 +
|
||||
@ -548,6 +551,7 @@
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-cell-fix-right-first::after,
|
||||
&-cell-fix-right-last::after {
|
||||
position: absolute;
|
||||
@ -595,6 +599,10 @@
|
||||
.@{table-prefix-cls}-cell-fix-left-last::after {
|
||||
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-fix-left-last::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-ping-right {
|
||||
@ -612,7 +620,7 @@
|
||||
}
|
||||
}
|
||||
&-sticky {
|
||||
&-header {
|
||||
&-holder {
|
||||
position: sticky;
|
||||
z-index: @table-sticky-zindex;
|
||||
}
|
||||
|
@ -13,22 +13,8 @@
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-thead {
|
||||
th.@{table-prefix-cls}-column-has-sorters {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column {
|
||||
margin: -@padding-vertical -@padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column-title {
|
||||
padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-column-sorters {
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
}
|
||||
.@{table-prefix-cls}-filter-trigger {
|
||||
margin-right: -(@padding-horizontal / 2);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
|
@ -146,6 +146,7 @@
|
||||
|
||||
.@{tab-prefix-cls}-nav-list,
|
||||
.@{tab-prefix-cls}-nav-operations {
|
||||
flex: 1 0 auto; // fix safari scroll problem
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
@ -209,10 +209,6 @@
|
||||
&-footer {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
|
||||
&-checkbox .@{ant-prefix}-checkbox {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
@ -221,7 +217,6 @@
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
margin: 0 8px;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
|
||||
.@{ant-prefix}-btn {
|
||||
|
@ -259,9 +259,12 @@
|
||||
}
|
||||
|
||||
// ============ Ellipsis ============
|
||||
&-single-line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-ellipsis-single-line {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// https://blog.csdn.net/iefreer/article/details/50421025
|
||||
|
Loading…
Reference in New Issue
Block a user