tweak: active and hover background color

This commit is contained in:
ycjcl868 2019-11-19 11:45:32 +08:00
parent 6d7950a1d9
commit 764c046fbc
4 changed files with 10 additions and 5 deletions

View File

@ -156,7 +156,7 @@
} }
&-active { &-active {
background-color: @item-active-bg; background-color: @item-hover-bg;
} }
} }
} }

View File

@ -79,7 +79,7 @@
// The background colors for active and hover states for things like // The background colors for active and hover states for things like
// list items or table cells. // list items or table cells.
@item-active-bg: #f5f5f5; @item-active-bg: @primary-1;
@item-hover-bg: #f5f5f5; @item-hover-bg: #f5f5f5;
// ICONFONT // ICONFONT
@ -342,7 +342,7 @@
@select-item-selected-font-weight: 600; @select-item-selected-font-weight: 600;
@select-dropdown-bg: @component-background; @select-dropdown-bg: @component-background;
@select-item-selected-bg: @blue-1; @select-item-selected-bg: @blue-1;
@select-item-active-bg: @item-active-bg; @select-item-active-bg: @item-hover-bg;
@select-background: @component-background; @select-background: @component-background;
// Cascader // Cascader
@ -411,7 +411,7 @@
@menu-popup-bg: @component-background; @menu-popup-bg: @component-background;
@menu-item-color: @text-color; @menu-item-color: @text-color;
@menu-highlight-color: @primary-color; @menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg; @menu-item-active-bg: @primary-1;
@menu-item-active-border-width: 3px; @menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary; @menu-item-group-title-color: @text-color-secondary;
@menu-icon-size: @font-size-base; @menu-icon-size: @font-size-base;
@ -465,7 +465,7 @@
// --- // ---
@time-picker-panel-column-width: 56px; @time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3; @time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base; @time-picker-selected-bg: @item-active-bg;
// Carousel // Carousel
// --- // ---

View File

@ -24,6 +24,7 @@ export default class ListItem extends React.Component<any, any> {
const className = classNames({ const className = classNames({
[`${prefixCls}-content-item`]: true, [`${prefixCls}-content-item`]: true,
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled, [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
[`${prefixCls}-content-item-checked`]: checked,
}); });
let title: string | undefined; let title: string | undefined;

View File

@ -130,6 +130,10 @@
cursor: pointer; cursor: pointer;
} }
&-item-checked {
background-color: @item-active-bg;
}
&-item-disabled { &-item-disabled {
color: @btn-disable-color; color: @btn-disable-color;
cursor: not-allowed; cursor: not-allowed;