chore: sync ant-design v4.2.5 (#149)
This commit is contained in:
James Yeung
GitHub
Родитель
6fe0e4e299
Коммит
69c9f044ef
|
|
@ -22,6 +22,12 @@
|
|||
line-height: @line-height-base;
|
||||
.btn;
|
||||
.btn-default;
|
||||
|
||||
// Fix loading button animation
|
||||
// https://github.com/ant-design/ant-design/issues/24323
|
||||
> span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
.btn-primary;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
position: relative;
|
||||
background: @card-background;
|
||||
border-radius: @card-radius;
|
||||
transition: all 0.3s;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
|
|
@ -22,6 +21,8 @@
|
|||
|
||||
&-hoverable {
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s, border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: @card-hoverable-hover-border;
|
||||
box-shadow: @card-shadow;
|
||||
|
|
|
|||
|
|
@ -204,6 +204,11 @@
|
|||
background: transparent;
|
||||
}
|
||||
}
|
||||
.@{cascader-prefix-cls}-menu-empty & {
|
||||
color: @disabled-color;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
&-active:not(&-disabled) {
|
||||
&,
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -164,8 +164,8 @@
|
|||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
|
|
|
|||
|
|
@ -47,5 +47,6 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
margin: 8px 8px 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
color: @menu-item-color;
|
||||
font-size: @menu-item-font-size;
|
||||
line-height: 0; // Fix display inline-block gap
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background: @menu-bg;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.@{menu-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
|
|
@ -22,7 +23,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
&-dark&-inline,
|
||||
&-dark&-vertical {
|
||||
.@{menu-prefix-cls}-rtl& {
|
||||
|
|
|
|||
|
|
@ -198,6 +198,10 @@
|
|||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-empty {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================= Options =========================
|
||||
|
|
@ -214,6 +218,7 @@
|
|||
|
||||
&-item-empty {
|
||||
.item();
|
||||
color: @disabled-color;
|
||||
}
|
||||
|
||||
&-item {
|
||||
|
|
|
|||
|
|
@ -222,7 +222,6 @@
|
|||
@table-padding-vertical-sm: 4px;
|
||||
@table-padding-horizontal-sm: 4px;
|
||||
@table-selection-column-width: 54px;
|
||||
@table-selection-extra-right: -4px;
|
||||
|
||||
// Statistic
|
||||
// ---
|
||||
|
|
|
|||
|
|
@ -294,7 +294,6 @@
|
|||
|
||||
// Grid system
|
||||
@grid-columns: 24;
|
||||
@grid-gutter-width: 0;
|
||||
|
||||
// Layout
|
||||
@layout-body-background: #f0f2f5;
|
||||
|
|
@ -574,7 +573,7 @@
|
|||
@table-filter-dropdown-bg: @component-background;
|
||||
@table-expand-icon-bg: @component-background;
|
||||
@table-selection-column-width: 60px;
|
||||
@table-selection-extra-right: -10px;
|
||||
@table-selection-extra-right: 0;
|
||||
|
||||
// Tag
|
||||
// --
|
||||
|
|
@ -718,13 +717,15 @@
|
|||
@switch-sm-height: 16px;
|
||||
@switch-min-width: 44px;
|
||||
@switch-sm-min-width: 28px;
|
||||
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
|
||||
@switch-disabled-opacity: 0.4;
|
||||
@switch-color: @primary-color;
|
||||
@switch-bg: @component-background;
|
||||
@switch-shadow-color: fade(#00230b, 20%);
|
||||
@switch-inner-margin-min: 6px;
|
||||
@switch-inner-margin-max: 24px;
|
||||
@switch-padding: 2px;
|
||||
@switch-inner-margin-min: ceil(@switch-height * 0.3);
|
||||
@switch-inner-margin-max: ceil(@switch-height * 1.1);
|
||||
@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
|
||||
@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);
|
||||
|
||||
// Pagination
|
||||
// ---
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
@switch-prefix-cls: ~'@{ant-prefix}-switch';
|
||||
@switch-duration: 0.36s;
|
||||
|
||||
@switch-pin-size: @switch-height - 4px;
|
||||
@switch-sm-pin-size: @switch-sm-height - 4px;
|
||||
|
||||
.@{switch-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
|
|
@ -12,74 +15,21 @@
|
|||
box-sizing: border-box;
|
||||
min-width: @switch-min-width;
|
||||
height: @switch-height;
|
||||
line-height: @switch-height - 2px;
|
||||
line-height: @switch-height;
|
||||
vertical-align: middle;
|
||||
background-color: @disabled-color;
|
||||
border: 1px solid transparent;
|
||||
border: 0;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all @switch-duration;
|
||||
user-select: none;
|
||||
|
||||
&-inner {
|
||||
display: block;
|
||||
margin-right: @switch-inner-margin-min;
|
||||
margin-left: @switch-inner-margin-max;
|
||||
color: @text-color-inverse;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&-loading-icon,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: @switch-height - 4px;
|
||||
height: @switch-height - 4px;
|
||||
background-color: @switch-bg;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
transition: all @switch-duration @ease-in-out-circ;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 2px 4px 0 @switch-shadow-color;
|
||||
}
|
||||
|
||||
&:not(&-disabled):active::before,
|
||||
&:not(&-disabled):active::after {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&-loading-icon {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
// loading default use animation
|
||||
// animation: loadingCircle 1s infinite linear;
|
||||
background: transparent;
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-loading &-loading-icon {
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
&-checked&-loading &-loading-icon {
|
||||
color: @switch-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px fade(@disabled-color, 10%);
|
||||
}
|
||||
|
||||
&-checked:focus {
|
||||
box-shadow: 0 0 0 2px fade(@switch-color, 20%);
|
||||
}
|
||||
|
||||
|
|
@ -87,69 +37,8 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-small {
|
||||
min-width: @switch-sm-min-width;
|
||||
height: @switch-sm-height;
|
||||
line-height: @switch-sm-height - 2px;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-right: 3px;
|
||||
margin-left: 18px;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: @switch-sm-height - 4px;
|
||||
height: @switch-sm-height - 4px;
|
||||
}
|
||||
|
||||
&:active::before,
|
||||
&:active::after {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-small &-loading-icon {
|
||||
width: @switch-sm-height - 4px;
|
||||
height: @switch-sm-height - 4px;
|
||||
}
|
||||
|
||||
&-small&-checked {
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-right: 18px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&-small&-checked &-loading-icon {
|
||||
left: 100%;
|
||||
margin-left: @switch-sm-checked-margin-left;
|
||||
}
|
||||
|
||||
&-small&-loading &-loading-icon {
|
||||
font-weight: bold;
|
||||
// animation: AntSwitchSmallLoadingCircle 1s infinite linear;
|
||||
transform: scale(0.66667);
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background-color: @switch-color;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-right: @switch-inner-margin-max;
|
||||
margin-left: @switch-inner-margin-min;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 100%;
|
||||
margin-left: -1px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&-checked &-loading-icon {
|
||||
left: 100%;
|
||||
margin-left: -19px;
|
||||
}
|
||||
|
||||
&-loading,
|
||||
|
|
@ -157,23 +46,107 @@
|
|||
cursor: not-allowed;
|
||||
opacity: @switch-disabled-opacity;
|
||||
* {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes AntSwitchSmallLoadingCircle {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(0.66667);
|
||||
transform-origin: 50% 50%;
|
||||
// ========================= Inner ==========================
|
||||
&-inner {
|
||||
display: block;
|
||||
margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
|
||||
color: @text-color-inverse;
|
||||
font-size: @font-size-sm;
|
||||
transition: margin @switch-duration;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg) scale(0.66667);
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
&-checked &-inner {
|
||||
margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
|
||||
}
|
||||
|
||||
// ========================= Handle =========================
|
||||
&-handle {
|
||||
position: absolute;
|
||||
top: @switch-padding;
|
||||
left: @switch-padding;
|
||||
width: @switch-pin-size;
|
||||
height: @switch-pin-size;
|
||||
transition: all @switch-duration @ease-in-out-circ;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: @switch-bg;
|
||||
border-radius: @switch-pin-size / 2;
|
||||
box-shadow: 0 2px 4px 0 @switch-shadow-color;
|
||||
transition: all @switch-duration @ease-in-out-circ;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-checked &-handle {
|
||||
left: calc(100% - @switch-pin-size - @switch-padding);
|
||||
}
|
||||
|
||||
&:not(&-disabled):active {
|
||||
.@{switch-prefix-cls}-handle::before {
|
||||
right: -30%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.@{switch-prefix-cls}-checked {
|
||||
.@{switch-prefix-cls}-handle::before {
|
||||
right: 0;
|
||||
left: -30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Loading =========================
|
||||
&-loading-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&-checked &-loading-icon {
|
||||
color: @switch-color;
|
||||
}
|
||||
|
||||
// ========================== Size ==========================
|
||||
&-small {
|
||||
min-width: @switch-sm-min-width;
|
||||
height: @switch-sm-height;
|
||||
line-height: @switch-sm-height;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
.@{switch-prefix-cls}-handle {
|
||||
width: @switch-sm-pin-size;
|
||||
height: @switch-sm-pin-size;
|
||||
}
|
||||
|
||||
.@{switch-prefix-cls}-loading-icon {
|
||||
transform: translate(-50%, -50%) scale(0.66667);
|
||||
}
|
||||
|
||||
&.@{switch-prefix-cls}-checked {
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
|
||||
}
|
||||
|
||||
.@{switch-prefix-cls}-handle {
|
||||
left: calc(100% - @switch-sm-pin-size - @switch-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,73 +1,50 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './index';
|
||||
|
||||
@switch-prefix-cls: ~'@{ant-prefix}-switch';
|
||||
|
||||
.@{switch-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
.@{switch-prefix-cls}-rtl {
|
||||
direction: rtl;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
.@{switch-prefix-cls}-rtl & {
|
||||
margin-right: @switch-inner-margin-max;
|
||||
margin-left: @switch-inner-margin-min;
|
||||
.@{switch-prefix-cls}-handle {
|
||||
right: @switch-padding;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&:not(&-disabled):active {
|
||||
.@{switch-prefix-cls}-handle::before {
|
||||
right: 0;
|
||||
left: -30%;
|
||||
}
|
||||
|
||||
&.@{switch-prefix-cls}-checked {
|
||||
.@{switch-prefix-cls}-handle::before {
|
||||
right: -30%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-loading-icon,
|
||||
&::after {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
left: 100%;
|
||||
margin-left: -1px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&-small {
|
||||
&.@{switch-prefix-cls}-checked {
|
||||
.@{switch-prefix-cls}-inner {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
margin-right: 18px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
|
||||
}
|
||||
|
||||
.@{switch-prefix-cls}-handle {
|
||||
right: calc(100% - @switch-pin-size - @switch-padding);
|
||||
}
|
||||
}
|
||||
|
||||
&-small &-loading-icon {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-small&-checked {
|
||||
.@{switch-prefix-cls}-inner {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
margin-right: 3px;
|
||||
margin-left: 18px;
|
||||
&.@{switch-prefix-cls}-small {
|
||||
&.@{switch-prefix-cls}-checked {
|
||||
.@{switch-prefix-cls}-handle {
|
||||
right: calc(100% - @switch-sm-pin-size - @switch-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-checked {
|
||||
.@{switch-prefix-cls}-inner {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
margin-right: @switch-inner-margin-min;
|
||||
margin-left: @switch-inner-margin-max;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
left: 1px;
|
||||
margin-left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-checked &-loading-icon {
|
||||
.@{switch-prefix-cls}-rtl& {
|
||||
margin-left: -41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -360,6 +360,8 @@
|
|||
|
||||
table tr th&-selection-column,
|
||||
table tr td&-selection-column {
|
||||
padding-right: @padding-xs;
|
||||
padding-left: @padding-xs;
|
||||
text-align: center;
|
||||
|
||||
.@{ant-prefix}-radio-wrapper {
|
||||
|
|
@ -494,6 +496,9 @@
|
|||
// ========================= Placeholder ==========================
|
||||
&-tbody > tr&-placeholder {
|
||||
text-align: center;
|
||||
.@{table-prefix-cls}-empty & {
|
||||
color: @disabled-color;
|
||||
}
|
||||
&:hover {
|
||||
> td {
|
||||
background: @component-background;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../tree/style/index';
|
||||
@import '../../tree/style/mixin';
|
||||
@import '../../checkbox/style/mixin';
|
||||
|
||||
@tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
|
||||
|
|
|
|||
|
|
@ -6,212 +6,9 @@
|
|||
|
||||
@tree-prefix-cls: ~'@{ant-prefix}-tree';
|
||||
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
|
||||
@tree-motion: ~'@{ant-prefix}-motion-collapse';
|
||||
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
|
||||
|
||||
.antTreeFn(@custom-tree-prefix-cls) {
|
||||
@custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
|
||||
.@{custom-tree-prefix-cls} {
|
||||
.reset-component;
|
||||
background: @tree-bg;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&-focused:not(:hover):not(&-active-focused) {
|
||||
background: @primary-1;
|
||||
}
|
||||
|
||||
// =================== Virtual List ===================
|
||||
&-list-holder-inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&.@{custom-tree-prefix-cls}-block-node {
|
||||
.@{custom-tree-prefix-cls}-list-holder-inner {
|
||||
align-items: stretch;
|
||||
|
||||
// >>> Title
|
||||
.@{custom-tree-prefix-cls}-node-content-wrapper {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== TreeNode =====================
|
||||
.@{custom-tree-node-prefix-cls} {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0 0 (@padding-xs / 2) 0;
|
||||
outline: none;
|
||||
// Disabled
|
||||
&-disabled {
|
||||
// >>> Title
|
||||
.@{custom-tree-prefix-cls}-node-content-wrapper {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-active .@{custom-tree-prefix-cls}-node-content-wrapper {
|
||||
background: @tree-node-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Indent
|
||||
&-indent {
|
||||
align-self: stretch;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
&-unit {
|
||||
display: inline-block;
|
||||
width: @tree-title-height;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Switcher
|
||||
& &-switcher {
|
||||
.antTreeSwitcherIcon();
|
||||
flex: none;
|
||||
|
||||
width: @tree-title-height;
|
||||
height: @tree-title-height;
|
||||
margin: 0;
|
||||
line-height: @tree-title-height;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&-noop {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&_close {
|
||||
.@{custom-tree-prefix-cls}-switcher-icon {
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-loading-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Checkbox
|
||||
& &-checkbox {
|
||||
top: initial;
|
||||
margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
|
||||
}
|
||||
|
||||
// >>> Title
|
||||
& &-node-content-wrapper {
|
||||
min-height: @tree-title-height;
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
color: inherit;
|
||||
line-height: @tree-title-height;
|
||||
background: transparent;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: @tree-node-hover-bg;
|
||||
}
|
||||
|
||||
&.@{custom-tree-prefix-cls}-node-selected {
|
||||
background-color: @tree-node-selected-bg;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.@{custom-tree-prefix-cls}-iconEle {
|
||||
display: inline-block;
|
||||
width: @tree-title-height;
|
||||
height: @tree-title-height;
|
||||
line-height: @tree-title-height;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Draggable =====================
|
||||
&-node-content-wrapper[draggable='true'] {
|
||||
line-height: @tree-title-height - 4px;
|
||||
border-top: 2px transparent solid;
|
||||
border-bottom: 2px transparent solid;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.@{custom-tree-node-prefix-cls}.drag-over {
|
||||
> [draggable] {
|
||||
color: white;
|
||||
background-color: @primary-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.@{custom-tree-node-prefix-cls}.drag-over-gap-top {
|
||||
> [draggable] {
|
||||
border-top-color: @primary-color;
|
||||
}
|
||||
}
|
||||
.@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
|
||||
> [draggable] {
|
||||
border-bottom-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Show Line =====================
|
||||
&-show-line {
|
||||
// ================ Indent lines ================
|
||||
.@{custom-tree-prefix-cls}-indent {
|
||||
&-unit {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: calc(100% - 4px);
|
||||
right: -@tree-title-height / 2;
|
||||
bottom: -@tree-title-height - 4px;
|
||||
border-right: 1px solid @border-color-base;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-end {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Motion should hide line of measure */
|
||||
.@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
|
||||
.@{custom-tree-prefix-cls}-indent-unit {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Cover Background ==============
|
||||
.@{custom-tree-prefix-cls}-switcher {
|
||||
z-index: 1;
|
||||
background: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.antTreeFn(@tree-prefix-cls);
|
||||
|
||||
@import './rtl';
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
|
||||
@tree-prefix-cls: ~'@{ant-prefix}-tree';
|
||||
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
|
||||
@tree-motion: ~'@{ant-prefix}-motion-collapse';
|
||||
|
||||
.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
|
||||
.@{tree-prefix-cls}-switcher-icon,
|
||||
.@{select-tree-prefix-cls}-switcher-icon {
|
||||
.iconfont-size-under-12px(10px);
|
||||
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
vertical-align: baseline;
|
||||
svg {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
|
@ -27,3 +27,205 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.antTreeFn(@custom-tree-prefix-cls) {
|
||||
@custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
|
||||
.@{custom-tree-prefix-cls} {
|
||||
.reset-component;
|
||||
background: @tree-bg;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&-focused:not(:hover):not(&-active-focused) {
|
||||
background: @primary-1;
|
||||
}
|
||||
|
||||
// =================== Virtual List ===================
|
||||
&-list-holder-inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&.@{custom-tree-prefix-cls}-block-node {
|
||||
.@{custom-tree-prefix-cls}-list-holder-inner {
|
||||
align-items: stretch;
|
||||
|
||||
// >>> Title
|
||||
.@{custom-tree-prefix-cls}-node-content-wrapper {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== TreeNode =====================
|
||||
.@{custom-tree-node-prefix-cls} {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0 0 (@padding-xs / 2) 0;
|
||||
outline: none;
|
||||
// Disabled
|
||||
&-disabled {
|
||||
// >>> Title
|
||||
.@{custom-tree-prefix-cls}-node-content-wrapper {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-active .@{custom-tree-prefix-cls}-node-content-wrapper {
|
||||
background: @tree-node-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Indent
|
||||
&-indent {
|
||||
align-self: stretch;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
&-unit {
|
||||
display: inline-block;
|
||||
width: @tree-title-height;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Switcher
|
||||
& &-switcher {
|
||||
.antTreeSwitcherIcon();
|
||||
flex: none;
|
||||
|
||||
width: @tree-title-height;
|
||||
height: @tree-title-height;
|
||||
margin: 0;
|
||||
line-height: @tree-title-height;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&-noop {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&_close {
|
||||
.@{custom-tree-prefix-cls}-switcher-icon {
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-loading-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Checkbox
|
||||
& &-checkbox {
|
||||
top: initial;
|
||||
margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
|
||||
}
|
||||
|
||||
// >>> Title
|
||||
& &-node-content-wrapper {
|
||||
min-height: @tree-title-height;
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
color: inherit;
|
||||
line-height: @tree-title-height;
|
||||
background: transparent;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: @tree-node-hover-bg;
|
||||
}
|
||||
|
||||
&.@{custom-tree-prefix-cls}-node-selected {
|
||||
background-color: @tree-node-selected-bg;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.@{custom-tree-prefix-cls}-iconEle {
|
||||
display: inline-block;
|
||||
width: @tree-title-height;
|
||||
height: @tree-title-height;
|
||||
line-height: @tree-title-height;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Draggable =====================
|
||||
&-node-content-wrapper[draggable='true'] {
|
||||
line-height: @tree-title-height - 4px;
|
||||
border-top: 2px transparent solid;
|
||||
border-bottom: 2px transparent solid;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.@{custom-tree-node-prefix-cls}.drag-over {
|
||||
> [draggable] {
|
||||
color: white;
|
||||
background-color: @primary-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.@{custom-tree-node-prefix-cls}.drag-over-gap-top {
|
||||
> [draggable] {
|
||||
border-top-color: @primary-color;
|
||||
}
|
||||
}
|
||||
.@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
|
||||
> [draggable] {
|
||||
border-bottom-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Show Line =====================
|
||||
&-show-line {
|
||||
// ================ Indent lines ================
|
||||
.@{custom-tree-prefix-cls}-indent {
|
||||
&-unit {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: calc(100% - 4px);
|
||||
right: -@tree-title-height / 2;
|
||||
bottom: -@tree-title-height - 4px;
|
||||
border-right: 1px solid @border-color-base;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-end {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Motion should hide line of measure */
|
||||
.@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
|
||||
.@{custom-tree-prefix-cls}-indent-unit {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Cover Background ==============
|
||||
.@{custom-tree-prefix-cls}-switcher {
|
||||
z-index: 1;
|
||||
background: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче