Skip to content

Commit 367a89a

Browse files
dev-javascriptdev-javascript
committed
update style and themes and fix position
of default close button
1 parent 290e426 commit 367a89a

10 files changed

+120
-58
lines changed

‎style/react-dyn-tabs-rtl.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
flex-direction: row;
1111
}
1212
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
13-
left: 4px;
13+
left: 0.4em;
1414
right: auto;
1515
}
1616
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-showmorebutton > svg {

‎style/react-dyn-tabs.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
flex: 1;
55
display: flex;
66
direction: ltr;
7+
font-family: inherit;
78
}
89
.rc-dyn-tabs-panellist .rc-dyn-tabs-panel {
910
display: none;
@@ -52,6 +53,8 @@
5253
position: relative;
5354
pointer-events: visible;
5455
opacity: 1;
56+
font-size: 1rem;
57+
font-family: inherit;
5558
}
5659
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
5760
pointer-events: none;
@@ -64,14 +67,16 @@
6467
position: absolute;
6568
cursor: pointer;
6669
top: 50%;
67-
height: 10px;
68-
width: 10px;
70+
height: auto;
71+
width: 0.4em;
6972
transform: translateY(-50%);
70-
right: 6px;
73+
right: 0.4em;
7174
left: auto;
7275
display: inline-flex;
7376
justify-content: center;
7477
align-items: center;
78+
font-size: inherit;
79+
line-height: 1;
7580
}
7681
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
7782
position: relative;
@@ -81,12 +86,15 @@
8186
text-decoration: none;
8287
cursor: pointer;
8388
white-space: nowrap;
84-
padding: 0.5em 1em;
89+
padding: 0.6em 1.2em;
8590
font-weight: 500;
8691
outline: none;
8792
justify-content: center;
8893
flex-direction: row-reverse;
8994
flex: 1;
95+
font-size: inherit;
96+
text-transform: uppercase;
97+
font-family: inherit;
9098
}
9199
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton {
92100
display: inline-flex;

‎style/scss/modules/_react-dyn-tabs-rtl.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
flex-direction: row;
1111
}
1212
.rc-dyn-tabs-close {
13-
left: 4px;
13+
left: 0.4em;
1414
right: auto;
1515
}
1616
.rc-dyn-tabs-showmorebutton > svg {

‎style/scss/modules/_react-dyn-tabs.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
flex: 1;
66
display: flex;
77
direction: ltr;
8+
font-family: inherit;
89
.rc-dyn-tabs-panel {
910
display: none;
1011
flex-basis: 100%;
@@ -51,6 +52,8 @@
5152
position: relative;
5253
pointer-events: visible;
5354
opacity: 1;
55+
font-size: 1rem;
56+
font-family: inherit;
5457
&.rc-dyn-tabs-disable {
5558
pointer-events: none;
5659
opacity: 0.7;
@@ -63,14 +66,16 @@
6366
position: absolute;
6467
cursor: pointer;
6568
top: 50%;
66-
height: 10px;
67-
width: 10px;
69+
height: auto;
70+
width: 0.4em;
6871
transform: translateY(-50%);
69-
right: 6px;
72+
right: 0.4em;
7073
left: auto;
7174
display: inline-flex;
7275
justify-content: center;
7376
align-items: center;
77+
font-size: inherit;
78+
line-height: 1;
7479
}
7580
.rc-dyn-tabs-title {
7681
position: relative;
@@ -80,12 +85,15 @@
8085
text-decoration: none;
8186
cursor: pointer;
8287
white-space: nowrap;
83-
padding: 0.5em 1em;
88+
padding: 0.6em 1.2em;
8489
font-weight: 500;
8590
outline: none;
8691
justify-content: center;
8792
flex-direction: row-reverse;
8893
flex: 1;
94+
font-size: inherit;
95+
text-transform: uppercase;
96+
font-family: inherit;
8997
}
9098
.rc-dyn-tabs-showmorebutton {
9199
display: inline-flex;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,23 @@
88
padding: 0.8em 1.5em;
99
min-width: 160px;
1010
min-height: 40px;
11+
color: gray;
12+
}
13+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
14+
color: gray;
1115
}
1216
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
1317
background-color: #ddd;
1418
}
1519
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
1620
background-color: #ddd;
1721
}
22+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
23+
color: black;
24+
}
1825
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
1926
background-color: #ccc;
27+
color: black;
2028
}
2129

2230
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
background-color: #dee2e6;
1414
}
1515
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
16-
color: #495057;
16+
color: gray;
1717
border-style: solid;
1818
border-width: 0px 0px 1px 0px;
1919
margin: 0px 0px -1px 0px;
@@ -26,6 +26,7 @@
2626
min-height: 31px;
2727
}
2828
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
29+
color: gray;
2930
background-color: transparent;
3031
}
3132
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
@@ -41,7 +42,7 @@
4142
background-color: #fff;
4243
}
4344
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton svg path {
44-
fill: #495057;
45+
fill: gray;
4546
}
4647

4748
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical::before {
@@ -66,6 +67,12 @@
6667
border-width: 1px;
6768
border-color: #dee2e6 #fff #dee2e6 #dee2e6;
6869
}
70+
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper {
71+
padding: 5px;
72+
}
73+
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-popper .rc-dyn-tabs-selected .rc-dyn-tabs-title {
74+
border-color: #dee2e6;
75+
}
6976

7077
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl::before {
7178
content: "";
@@ -89,3 +96,6 @@
8996
border-width: 1px;
9097
border-color: #dee2e6 #dee2e6 #dee2e6 #fff;
9198
}
99+
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl.rc-dyn-tabs-popper .rc-dyn-tabs-selected .rc-dyn-tabs-title {
100+
border-color: #dee2e6;
101+
}

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.rc-dyn-tabs-tablist-view {
2-
background-color: transparent;
2+
background-color: #fff;
33
border-style: solid;
44
border-color: rgba(0, 0, 0, 0.12);
55
border-width: 0px 0px 1px 0px;
@@ -9,10 +9,11 @@
99
min-height: 48px;
1010
border-color: transparent;
1111
border-style: solid;
12-
border-width: 1px 1px 3px 1px;
12+
border-width: 0px 0px 3px 0px;
1313
border-radius: 1px;
1414
background-color: #fff;
1515
opacity: 1;
16+
color: gray;
1617
}
1718
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
1819
min-width: 46.38px;
@@ -23,25 +24,34 @@
2324
opacity: 0.2;
2425
transition: 0s;
2526
}
27+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
28+
color: #1976d2;
29+
}
2630
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
27-
color: black;
31+
color: #1976d2;
2832
background-color: transparent;
29-
border-color: #3f51b5;
33+
border-color: #1976d2;
3034
border-style: solid;
3135
border-width: 0px 0px 3px 0px;
3236
opacity: 1;
3337
}
3438
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab {
35-
color: rgba(0, 0, 0, 0.63);
39+
color: gray;
3640
}
3741
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title {
38-
color: rgba(0, 0, 0, 0.63);
42+
color: gray;
3943
background: #e6e6e6;
4044
}
4145
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab:hover > .rc-dyn-tabs-title:active {
42-
color: rgba(0, 0, 0, 0.63);
46+
color: gray;
4347
background-color: #d4d4d4;
4448
}
49+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected {
50+
color: #1976d2;
51+
}
52+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected:hover .rc-dyn-tabs-title {
53+
color: #1976d2;
54+
}
4555
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:after {
4656
content: "";
4757
display: block;
@@ -59,25 +69,19 @@
5969
transition: transform 0.5s, opacity 1s;
6070
}
6171
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton svg path {
62-
fill: rgba(0, 0, 0, 0.63);
72+
fill: gray;
6373
}
6474

6575
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical {
6676
border-width: 0px 1px 0px 0px;
6777
}
6878
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-title {
69-
border-width: 0px 1px 0px 0px;
70-
}
71-
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical .rc-dyn-tabs-selected .rc-dyn-tabs-title {
7279
border-width: 0px 3px 0px 0px;
7380
}
7481

7582
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
7683
border-width: 0px 0px 0px 1px;
7784
}
7885
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-title {
79-
border-width: 0px 0px 0px 1px;
80-
}
81-
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-selected .rc-dyn-tabs-title {
8286
border-width: 0px 0px 0px 3px;
8387
}

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

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,38 @@ $tablist-border-color: #ccc;
33
$tab-hover-background-color: #ddd;
44
$actived-tab-background-color: #ddd;
55
$selected-tab-background-color: #ccc;
6+
$title-color: gray;
7+
$selected-tab-color: black;
68
@mixin main {
79
.rc-dyn-tabs-tablist-view {
810
border: 1px solid $tablist-border-color;
911
background-color: $tablist-background-color;
12+
1013
.rc-dyn-tabs-title {
1114
background-color: inherit;
1215
border: none;
1316
padding: 0.8em 1.5em;
1417
min-width: 160px;
1518
min-height: 40px;
19+
color: $title-color;
1620
}
17-
.rc-dyn-tabs-tab:hover {
18-
& > .rc-dyn-tabs-title {
19-
background-color: $tab-hover-background-color;
20-
}
21-
& > .rc-dyn-tabs-title:active {
22-
background-color: $actived-tab-background-color;
21+
.rc-dyn-tabs-tab {
22+
color: $title-color;
23+
&:hover {
24+
& > .rc-dyn-tabs-title {
25+
background-color: $tab-hover-background-color;
26+
}
27+
& > .rc-dyn-tabs-title:active {
28+
background-color: $actived-tab-background-color;
29+
}
2330
}
2431
}
25-
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
26-
background-color: $selected-tab-background-color;
32+
.rc-dyn-tabs-selected {
33+
color: $selected-tab-color;
34+
.rc-dyn-tabs-title {
35+
background-color: $selected-tab-background-color;
36+
color: $selected-tab-color;
37+
}
2738
}
2839
}
2940
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl {

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
$title-color: #495057;
1+
$title-color: gray;
22
$border-color: #dee2e6;
33
$background-color: #fff;
44

@@ -89,6 +89,7 @@ $background-color: #fff;
8989
min-height: 31px;
9090
}
9191
.rc-dyn-tabs-tab {
92+
color: $title-color;
9293
background-color: transparent;
9394
&:hover {
9495
& > .rc-dyn-tabs-title {
@@ -116,6 +117,12 @@ $background-color: #fff;
116117
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
117118
@include selectedTabBorder($isVertical: true);
118119
}
120+
&.rc-dyn-tabs-popper {
121+
padding: 5px;
122+
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
123+
border-color: $border-color;
124+
}
125+
}
119126
}
120127
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
121128
@include tablistBorder($isVertical: true, $isRtl: true);
@@ -127,5 +134,10 @@ $background-color: #fff;
127134
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
128135
@include selectedTabBorder($isVertical: true, $isRtl: true);
129136
}
137+
&.rc-dyn-tabs-popper {
138+
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
139+
border-color: $border-color;
140+
}
141+
}
130142
}
131143
}

0 commit comments

Comments
 (0)