Skip to content

Commit 790ec3a

Browse files
dev-javascriptdev-javascript
committed
complete basic theme and adjust padding and
minWidth of showmorebutton
1 parent e17afa8 commit 790ec3a

9 files changed

Lines changed: 47 additions & 52 deletions

‎style/react-dyn-tabs.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
height: 100%;
9595
align-items: center;
9696
}
97+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-tab .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
98+
padding: 0px;
99+
min-width: 46.38px;
100+
}
97101
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-popper {
98102
position: fixed;
99103
background: white;

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,12 @@
9393
height: 100%;
9494
align-items: center;
9595
}
96+
.rc-dyn-tabs-tab {
97+
.rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
98+
padding: 0px;
99+
min-width: 46.38px;
100+
}
101+
}
96102
.rc-dyn-tabs-popper {
97103
position: fixed;
98104
background: white;

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
1-
.rc-dyn-tabs-tablist {
1+
.rc-dyn-tabs-tablist-view {
22
border: 1px solid #ccc;
33
background-color: #f1f1f1;
44
}
5-
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
5+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
66
background-color: inherit;
77
border: none;
88
transition: 0.3s;
99
padding: 0.8em 1.5em;
1010
min-width: 160px;
1111
min-height: 40px;
1212
}
13-
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:hover {
13+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:hover {
1414
background-color: #ddd;
1515
}
16-
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:active:hover {
16+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:hover {
1717
background-color: #ddd;
1818
}
19-
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
19+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-close {
2020
top: 50%;
2121
transform: translateY(-50%);
2222
line-height: 0px;
23+
right: 10px;
2324
}
24-
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
25+
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
2526
background-color: #ccc;
2627
}
2728

28-
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
29-
right: 10px;
30-
}
31-
32-
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
29+
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
3330
left: 10px;
3431
}

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title.rc-dyn-tabs-showmorebutton {
2121
min-width: 46.38px;
22-
min-height: 48px;
22+
border: 0px;
2323
}
2424
.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:after {
2525
transform: scale(0, 0);

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,36 @@ $tab-hover-background-color: #ddd;
44
$actived-tab-background-color: #ddd;
55
$selected-tab-background-color: #ccc;
66
@mixin main {
7-
.rc-dyn-tabs-tablist {
7+
.rc-dyn-tabs-tablist-view {
88
border: 1px solid $tablist-border-color;
99
background-color: $tablist-background-color;
10-
& > .rc-dyn-tabs-tab {
11-
& > .rc-dyn-tabs-title {
12-
background-color: inherit;
13-
border: none;
14-
transition: 0.3s;
15-
padding: 0.8em 1.5em;
16-
min-width: 160px;
17-
min-height: 40px;
18-
}
19-
& > .rc-dyn-tabs-title:hover {
20-
background-color: $tab-hover-background-color;
21-
}
22-
& > .rc-dyn-tabs-title:active:hover {
23-
background-color: $actived-tab-background-color;
24-
}
25-
& > .rc-dyn-tabs-close {
26-
top: 50%;
27-
transform: translateY(-50%);
28-
line-height: 0px;
29-
}
10+
.rc-dyn-tabs-title {
11+
background-color: inherit;
12+
border: none;
13+
transition: 0.3s;
14+
padding: 0.8em 1.5em;
15+
min-width: 160px;
16+
min-height: 40px;
3017
}
31-
& > .rc-dyn-tabs-tab.rc-dyn-tabs-selected {
32-
& > .rc-dyn-tabs-title {
33-
background-color: $selected-tab-background-color;
34-
}
18+
.rc-dyn-tabs-title:hover {
19+
background-color: $tab-hover-background-color;
3520
}
36-
}
37-
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr {
38-
& > .rc-dyn-tabs-tab {
39-
& > .rc-dyn-tabs-close {
40-
right: 10px;
41-
}
21+
.rc-dyn-tabs-title:active:hover {
22+
background-color: $actived-tab-background-color;
23+
}
24+
.rc-dyn-tabs-close {
25+
top: 50%;
26+
transform: translateY(-50%);
27+
line-height: 0px;
28+
right: 10px;
29+
}
30+
.rc-dyn-tabs-selected .rc-dyn-tabs-title {
31+
background-color: $selected-tab-background-color;
4232
}
4333
}
44-
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl {
45-
& > .rc-dyn-tabs-tab {
46-
& > .rc-dyn-tabs-close {
47-
left: 10px;
48-
}
34+
.rc-dyn-tabs-tablist-view.rc-dyn-tabs-rtl {
35+
.rc-dyn-tabs-close {
36+
left: 10px;
4937
}
5038
}
5139
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $ripple: radial-gradient(circle, #000 10%, transparent 10.01%);
2626
opacity: 1;
2727
&.rc-dyn-tabs-showmorebutton {
2828
min-width: 46.38px;
29-
min-height: 48px;
29+
border: 0px;
3030
}
3131
}
3232
.rc-dyn-tabs-title:active:after {

0 commit comments

Comments
 (0)