Skip to content

Commit 2b3ed06

Browse files
dev-javascriptdev-javascript
committed
fix tabs hover style
1 parent 017d1a2 commit 2b3ed06

8 files changed

+51
-43
lines changed

‎themes/react-dyn-tabs-basic.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
min-width: 160px;
1111
min-height: 40px;
1212
}
13-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:hover {
13+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
1414
background-color: #ddd;
1515
}
16-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:hover {
16+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
1717
background-color: #ddd;
1818
}
1919
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {

‎themes/react-dyn-tabs-bootstrap.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@
1212
width: auto;
1313
background-color: #dee2e6;
1414
}
15-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
16-
background-color: transparent;
17-
}
1815
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
1916
color: #495057;
2017
border-style: solid;
@@ -28,7 +25,10 @@
2825
min-width: 100px;
2926
min-height: 31px;
3027
}
31-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:hover {
28+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
29+
background-color: transparent;
30+
}
31+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
3232
background-color: #eee;
3333
border-color: #eee #eee transparent;
3434
}

‎themes/react-dyn-tabs-card.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
border-color: rgba(0, 0, 0, 0.12);
55
border-width: 0px 0px 1px 0px;
66
}
7-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
8-
color: rgba(0, 0, 0, 0.63);
9-
}
107
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
118
min-width: 160px;
129
min-height: 48px;
@@ -34,12 +31,15 @@
3431
border-width: 0px 0px 3px 0px;
3532
opacity: 1;
3633
}
37-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:hover {
34+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
35+
color: rgba(0, 0, 0, 0.63);
36+
}
37+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
3838
color: rgba(0, 0, 0, 0.63);
3939
background: #e6e6e6;
4040
transition: background 0.1s;
4141
}
42-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:hover {
42+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
4343
color: rgba(0, 0, 0, 0.63);
4444
background-color: #d4d4d4;
4545
}

‎themes/react-dyn-tabs-classic.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66
padding: 0.2em 0.2em 0;
77
border-radius: 5px;
88
}
9-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
10-
color: #416da3;
11-
margin: 0px 0.2em 0 0;
12-
}
139
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
1410
border-color: #8db3e3;
1511
background-image: none;
@@ -43,7 +39,11 @@
4339
background-image: -webkit-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
4440
color: #15498b;
4541
}
46-
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:hover {
42+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
43+
color: #416da3;
44+
margin: 0px 0.2em 0 0;
45+
}
46+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
4747
background-image: #e8f2ff;
4848
background-image: -webkit-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
4949
background-image: -moz-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);

‎themes/scss/modules/_react-dyn-tabs-basic.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ $selected-tab-background-color: #ccc;
1515
min-width: 160px;
1616
min-height: 40px;
1717
}
18-
.rc-dyn-tabs-title:hover {
19-
background-color: $tab-hover-background-color;
20-
}
21-
.rc-dyn-tabs-title:active:hover {
22-
background-color: $actived-tab-background-color;
18+
.rc-dyn-tabs-tab:hover {
19+
& > .rc-dyn-tabs-title {
20+
background-color: $tab-hover-background-color;
21+
}
22+
& > .rc-dyn-tabs-title:active {
23+
background-color: $actived-tab-background-color;
24+
}
2325
}
2426
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
2527
background-color: $selected-tab-background-color;

‎themes/scss/modules/_react-dyn-tabs-bootstrap.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,6 @@ $background-color: #fff;
8080
@include tablistBorder;
8181
background-color: $background-color;
8282
border: none;
83-
.rc-dyn-tabs-tab {
84-
background-color: transparent;
85-
}
8683
.rc-dyn-tabs-title {
8784
@include tab;
8885
@include tabBorder;
@@ -91,9 +88,14 @@ $background-color: #fff;
9188
min-width: 100px;
9289
min-height: 31px;
9390
}
94-
.rc-dyn-tabs-title:hover {
95-
background-color: #eee;
96-
border-color: #eee #eee transparent;
91+
.rc-dyn-tabs-tab {
92+
background-color: transparent;
93+
&:hover {
94+
& > .rc-dyn-tabs-title {
95+
background-color: #eee;
96+
border-color: #eee #eee transparent;
97+
}
98+
}
9799
}
98100
.rc-dyn-tabs-selected {
99101
background-color: $background-color;

‎themes/scss/modules/_react-dyn-tabs-card.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ $ripple: radial-gradient(circle, #000 10%, transparent 10.01%);
1212
border-style: solid;
1313
border-color: $tablist-border-color;
1414
border-width: 0px 0px 1px 0px;
15-
.rc-dyn-tabs-tab {
16-
color: $tab-color;
17-
}
1815
.rc-dyn-tabs-title {
1916
min-width: 160px;
2017
min-height: 48px;
@@ -42,14 +39,19 @@ $ripple: radial-gradient(circle, #000 10%, transparent 10.01%);
4239
border-width: 0px 0px 3px 0px;
4340
opacity: 1;
4441
}
45-
.rc-dyn-tabs-title:hover {
46-
color: $tab-color;
47-
background: $tab-hover-background;
48-
transition: background 0.1s;
49-
}
50-
.rc-dyn-tabs-title:active:hover {
42+
.rc-dyn-tabs-tab {
5143
color: $tab-color;
52-
background-color: $actived-tab-background-color;
44+
&:hover {
45+
& > .rc-dyn-tabs-title {
46+
color: $tab-color;
47+
background: $tab-hover-background;
48+
transition: background 0.1s;
49+
}
50+
& > .rc-dyn-tabs-title:active {
51+
color: $tab-color;
52+
background-color: $actived-tab-background-color;
53+
}
54+
}
5355
}
5456
.rc-dyn-tabs-title:after {
5557
content: '';

‎themes/scss/modules/_react-dyn-tabs-classic.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,6 @@ $border-radius-value: 5px;
7878
border-width: 1px;
7979
padding: 0.2em 0.2em 0;
8080
border-radius: $border-radius-value;
81-
.rc-dyn-tabs-tab {
82-
color: $tab-color;
83-
margin: 0px 0.2em 0 0;
84-
}
8581
.rc-dyn-tabs-title {
8682
border-color: $tab-border-color;
8783
@include tab-background-image;
@@ -99,8 +95,14 @@ $border-radius-value: 5px;
9995
@include selected-tab-background-image;
10096
color: $selected-tab-color;
10197
}
102-
.rc-dyn-tabs-title:hover {
103-
@include tab-hover-backgroud-image;
98+
.rc-dyn-tabs-tab {
99+
color: $tab-color;
100+
margin: 0px 0.2em 0 0;
101+
&:hover {
102+
& > .rc-dyn-tabs-title {
103+
@include tab-hover-backgroud-image;
104+
}
105+
}
104106
}
105107
}
106108
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl {

0 commit comments

Comments
 (0)