mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

Merge pull request #5964 from megawac/active-item-bg

Browse Source 
Add @active-item-bg to control hover and active states
This commit is contained in:
偏右 2017-05-04 12:02:55 +08:00 committed by GitHub
commit 1a775b1d3b
19 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,7 +100,7 @@
transition: all .3s; transition: all .3s;
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
cursor: pointer; cursor: pointer;
} }
@ -195,7 +195,7 @@
transition: background .3s; transition: background .3s;
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
cursor: pointer; cursor: pointer;
} }

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

@ -162,7 +162,7 @@
white-space: nowrap; white-space: nowrap;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
} }
&-disabled { &-disabled {
cursor: not-allowed; cursor: not-allowed;

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

@ -2,8 +2,9 @@
@import "../../style/mixins/index"; @import "../../style/mixins/index";
@collapse-prefix-cls: ~"@{ant-prefix}-collapse"; @collapse-prefix-cls: ~"@{ant-prefix}-collapse";
@collapse-active-bg: #eee;
@collapse-header-bg: @background-color-base; @collapse-header-bg: @background-color-base;
@collapse-active-bg: @background-color-active;
.collapse-close() { .collapse-close() {
.iconfont-size-under-12px(9px, 0); .iconfont-size-under-12px(9px, 0);

2
components/date-picker/style/Calendar.less
View File

@ -186,7 +186,7 @@
} }
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
cursor: pointer; cursor: pointer;
} }

2
components/date-picker/style/DecadePanel.less
View File

@ -47,7 +47,7 @@
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
cursor: pointer; cursor: pointer;
} }
} }

2
components/date-picker/style/MonthPanel.less
View File

@ -69,7 +69,7 @@
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
cursor: pointer; cursor: pointer;
} }
} }

2
components/date-picker/style/RangePicker.less
View File

@ -130,7 +130,7 @@
&:before { &:before {
content: ''; content: '';
display: block; display: block;
background: @primary-1; background: @item-active-bg;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
position: absolute; position: absolute;

2
components/date-picker/style/TimePicker.less
View File

@ -96,7 +96,7 @@
} }
li:hover { li:hover {
background: @primary-1; background: @item-hover-bg;
} }
li&-option-selected { li&-option-selected {

2
components/date-picker/style/YearPanel.less
View File

@ -50,7 +50,7 @@
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {
background: @primary-1; background: @item-hover-bg;
cursor: pointer; cursor: pointer;
} }
} }

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

@ -74,11 +74,11 @@
&-selected, &-selected,
&-selected > a { &-selected > a {
color: @primary-color; color: @primary-color;
background-color: @primary-1; background-color: @item-active-bg;
} }
&:hover { &:hover {
background-color: @primary-1; background-color: @item-hover-bg;
} }
&-disabled { &-disabled {

7
components/mention/style/index.less
View File

@ -76,10 +76,13 @@
overflow: hidden; overflow: hidden;
transition: background 0.3s; transition: background 0.3s;
&:hover, &:hover {
background-color: @item-hover-bg;
}
&.focus, &.focus,
&-active { &-active {
background-color: @primary-1; background-color: @item-active-bg;
} }
&-disabled { &-disabled {

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

@ -40,7 +40,7 @@
&-item:active, &-item:active,
&-submenu-title:active { &-submenu-title:active {
background: @primary-1; background: @item-active-bg;
} }
&-submenu &-sub { &-submenu &-sub {
@ -108,7 +108,7 @@
} }
&:not(&-horizontal) &-item-selected { &:not(&-horizontal) &-item-selected {
background-color: @primary-1; background-color: @item-active-bg;
} }
&-horizontal, &-horizontal,

11
components/select/style/index.less
View File

@ -128,7 +128,7 @@
} }
&-disabled &-selection--multiple &-selection__choice { &-disabled &-selection--multiple &-selection__choice {
background: #e9e9e9; background: @background-color-active;
color: #aaa; color: #aaa;
padding-right: 10px; padding-right: 10px;
&__remove { &__remove {
@ -460,9 +460,12 @@
overflow: hidden; overflow: hidden;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover, &:hover {
background-color: @item-hover-bg;
}
&-active { &-active {
background-color: @primary-1; background-color: @item-active-bg;
} }
&-disabled { &-disabled {
@ -479,7 +482,7 @@
&-selected { &-selected {
&, &,
&:hover { &:hover {
background-color: @background-color-base; background-color: @background-color-active;
font-weight: bold; font-weight: bold;
color: @text-color; color: @text-color;
} }

10
components/style/themes/default.less
View File

@ -59,6 +59,11 @@
@border-radius-base : 4px; @border-radius-base : 4px;
@border-radius-sm : 2px; @border-radius-sm : 2px;
// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg : @primary-1;
@item-hover-bg : @primary-1;
// ICONFONT // ICONFONT
@iconfont-css-prefix : anticon; @iconfont-css-prefix : anticon;
@icon-url : "https://at.alicdn.com/t/font_0qcp222wvwijm7vi"; @icon-url : "https://at.alicdn.com/t/font_0qcp222wvwijm7vi";
@ -97,6 +102,7 @@
// Default background color for disabled states, Collapse wrappers, // Default background color for disabled states, Collapse wrappers,
// and several active and hover states. // and several active and hover states.
@background-color-base : #f7f7f7; @background-color-base : #f7f7f7;
@background-color-active: #eee;
// Disabled states // Disabled states
@disabled-color : fade(#000, 25%); @disabled-color : fade(#000, 25%);
@ -320,10 +326,6 @@
@card-head-color: @heading-color; @card-head-color: @heading-color;
@card-head-background: @component-background; @card-head-background: @component-background;
// Cascader
// ---
@cascader-active-color: @background-color-base;
// Tabs // Tabs
// --- // ---
@tabs-card-head-background: #f9f9f9; @tabs-card-head-background: #f9f9f9;

2
components/time-picker/style/index.less
View File

@ -126,7 +126,7 @@
} }
li:hover { li:hover {
background: @primary-1; background: @item-hover-bg;
} }
li&-option-selected { li&-option-selected {

2
components/transfer/style/index.less
View File

@ -102,7 +102,7 @@
&-item:not(&-item-disabled):hover { &-item:not(&-item-disabled):hover {
cursor: pointer; cursor: pointer;
background-color: @primary-1; background-color: @item-hover-bg;
} }
&-item-disabled { &-item-disabled {

4
components/tree-select/style/index.less
View File

@ -38,10 +38,10 @@
color: @text-color; color: @text-color;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
background-color: @primary-1; background-color: @item-hover-bg;
} }
&.@{select-tree-prefix-cls}-node-selected { &.@{select-tree-prefix-cls}-node-selected {
background-color: @primary-2; background-color: @item-active-bg;
} }
} }
span { span {

2
components/tree/style/index.less
View File

@ -64,7 +64,7 @@
color: @text-color; color: @text-color;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
background-color: @primary-1; background-color: @item-hover-bg;
} }
&.@{tree-prefix-cls}-node-selected { &.@{tree-prefix-cls}-node-selected {
background-color: @primary-2; background-color: @primary-2;

2
components/upload/style/index.less
View File

@ -159,7 +159,7 @@
} }
&:hover &-info { &:hover &-info {
background-color: @primary-1; background-color: @item-hover-bg;
} }
&:hover .@{iconfont-css-prefix}-cross { &:hover .@{iconfont-css-prefix}-cross {