From 4eb2855871a2473671a9759a5f9395d6567cd0f9 Mon Sep 17 00:00:00 2001 From: Graeme Yeates Date: Fri, 28 Apr 2017 14:05:56 -0400 Subject: [PATCH] Add @active-item-bg to control hover and active states --- components/calendar/style/index.less | 4 ++-- components/cascader/style/index.less | 2 +- components/collapse/style/index.less | 3 ++- components/date-picker/style/Calendar.less | 2 +- components/date-picker/style/DecadePanel.less | 2 +- components/date-picker/style/MonthPanel.less | 2 +- components/date-picker/style/RangePicker.less | 2 +- components/date-picker/style/TimePicker.less | 2 +- components/date-picker/style/YearPanel.less | 2 +- components/dropdown/style/index.less | 4 ++-- components/mention/style/index.less | 2 +- components/menu/style/index.less | 4 ++-- components/select/style/index.less | 2 +- components/style/themes/default.less | 4 ++++ components/time-picker/style/index.less | 2 +- components/transfer/style/index.less | 2 +- components/tree-select/style/index.less | 2 +- components/tree/style/index.less | 2 +- components/upload/style/index.less | 2 +- 19 files changed, 26 insertions(+), 21 deletions(-) diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index c75d9e98e6..7d0ff6086e 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -100,7 +100,7 @@ transition: all .3s; &:hover { - background: @primary-1; + background: @active-item-bg; cursor: pointer; } @@ -195,7 +195,7 @@ transition: background .3s; &:hover { - background: @primary-1; + background: @active-item-bg; cursor: pointer; } diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 83f7d18c87..b39a7a4c29 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -162,7 +162,7 @@ white-space: nowrap; transition: all 0.3s; &:hover { - background: @primary-1; + background: @active-item-bg; } &-disabled { cursor: not-allowed; diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 5b65964d49..7059f23380 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -2,8 +2,9 @@ @import "../../style/mixins/index"; @collapse-prefix-cls: ~"@{ant-prefix}-collapse"; -@collapse-active-bg: #eee; + @collapse-header-bg: @background-color-base; +@collapse-active-bg: @active-item-bg; .collapse-close() { .iconfont-size-under-12px(9px, 0); diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index ed095373c6..1f17445e8e 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -186,7 +186,7 @@ } &:hover { - background: @primary-1; + background: @active-item-bg; cursor: pointer; } diff --git a/components/date-picker/style/DecadePanel.less b/components/date-picker/style/DecadePanel.less index 2bfadceb0d..5c8b3c6fc1 100644 --- a/components/date-picker/style/DecadePanel.less +++ b/components/date-picker/style/DecadePanel.less @@ -47,7 +47,7 @@ transition: background 0.3s ease; &:hover { - background: @primary-1; + background: @active-item-bg; cursor: pointer; } } diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less index 97e913164a..9d6efedbef 100644 --- a/components/date-picker/style/MonthPanel.less +++ b/components/date-picker/style/MonthPanel.less @@ -69,7 +69,7 @@ transition: background 0.3s ease; &:hover { - background: @primary-1; + background: @active-item-bg; cursor: pointer; } } diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index c6595dfb9e..9ead1739e9 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -130,7 +130,7 @@ &:before { content: ''; display: block; - background: @primary-1; + background: @active-item-bg; border-radius: 0; border: 0; position: absolute; diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index ea49276dad..cad1f8b20c 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -96,7 +96,7 @@ } li:hover { - background: @primary-1; + background: @active-item-bg; } li&-option-selected { diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less index 9ba4563e6c..aef825edc2 100644 --- a/components/date-picker/style/YearPanel.less +++ b/components/date-picker/style/YearPanel.less @@ -50,7 +50,7 @@ transition: background 0.3s ease; &:hover { - background: @primary-1; + background: @active-item-bg; cursor: pointer; } } diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index d00531fdb3..f7090420ff 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -74,11 +74,11 @@ &-selected, &-selected > a { color: @primary-color; - background-color: @primary-1; + background-color: @active-item-bg; } &:hover { - background-color: @primary-1; + background-color: @active-item-bg; } &-disabled { diff --git a/components/mention/style/index.less b/components/mention/style/index.less index ae1701b4d9..518a4cda87 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -79,7 +79,7 @@ &:hover, &.focus, &-active { - background-color: @primary-1; + background-color: @active-item-bg; } &-disabled { diff --git a/components/menu/style/index.less b/components/menu/style/index.less index f8780e1d00..30f4c30255 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -40,7 +40,7 @@ &-item:active, &-submenu-title:active { - background: @primary-1; + background: @active-item-bg; } &-submenu &-sub { @@ -108,7 +108,7 @@ } &:not(&-horizontal) &-item-selected { - background-color: @primary-1; + background-color: @active-item-bg; } &-horizontal, diff --git a/components/select/style/index.less b/components/select/style/index.less index 00b9fd8a59..eb0f83e1e0 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -462,7 +462,7 @@ &:hover, &-active { - background-color: @primary-1; + background-color: @active-item-bg; } &-disabled { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 0b2be262ae..c0ca59caa4 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -59,6 +59,10 @@ @border-radius-base : 4px; @border-radius-sm : 2px; +// The background color used when an item (such as a list item or table cell) +// is active or hovered. +@active-item-bg : @primary-1; + // ICONFONT @iconfont-css-prefix : anticon; @icon-url : "https://at.alicdn.com/t/font_0qcp222wvwijm7vi"; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 7f11afb411..2cfb350934 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -126,7 +126,7 @@ } li:hover { - background: @primary-1; + background: @active-item-bg; } li&-option-selected { diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index dcc67090ed..89c9ee2153 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -102,7 +102,7 @@ &-item:not(&-item-disabled):hover { cursor: pointer; - background-color: @primary-1; + background-color: @active-item-bg; } &-item-disabled { diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 4fefc4a57d..63947a6b83 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -38,7 +38,7 @@ color: @text-color; transition: all 0.3s ease; &:hover { - background-color: @primary-1; + background-color: @active-item-bg; } &.@{select-tree-prefix-cls}-node-selected { background-color: @primary-2; diff --git a/components/tree/style/index.less b/components/tree/style/index.less index 983b921311..556996a3de 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -64,7 +64,7 @@ color: @text-color; transition: all 0.3s ease; &:hover { - background-color: @primary-1; + background-color: @active-item-bg; } &.@{tree-prefix-cls}-node-selected { background-color: @primary-2; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index c59b7d078a..071c56723f 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -159,7 +159,7 @@ } &:hover &-info { - background-color: @primary-1; + background-color: @active-item-bg; } &:hover .@{iconfont-css-prefix}-cross {