Skip to content

Commit 1fc06af

Browse files
dev-javascriptdev-javascript
committed
adding some themes (basic, card and bootstrap)
1 parent 1f89ad8 commit 1fc06af

15 files changed

+508
-0
lines changed

‎themes/minified-scss/react-dyn-tabs-basic.min.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@use '../scss/modules/react-dyn-tabs-basic' as m;
2+
@include m.main;

‎themes/minified-scss/react-dyn-tabs-bootstrap.min.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@use '../scss/modules/react-dyn-tabs-bootstrap' as m;
2+
@include m.main;

‎themes/minified-scss/react-dyn-tabs-card.min.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@use '../scss/modules/react-dyn-tabs-card' as m;
2+
@include m.main;

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.rc-dyn-tabs-tablist {
2+
border: 1px solid #ccc;
3+
background-color: #f1f1f1;
4+
}
5+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
6+
background-color: inherit;
7+
border: none;
8+
transition: 0.3s;
9+
padding: 0.8em 1.5em;
10+
min-width: 160px;
11+
min-height: 40px;
12+
}
13+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:hover {
14+
background-color: #ddd;
15+
}
16+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:active:hover {
17+
background-color: #ddd;
18+
}
19+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
20+
top: 50%;
21+
transform: translateY(-50%);
22+
line-height: 0px;
23+
}
24+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
25+
background-color: #ccc;
26+
}
27+
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 {
33+
left: 10px;
34+
}

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

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

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.rc-dyn-tabs-tablist {
2+
color: #495057;
3+
border-style: solid;
4+
border-width: 0px 0px 1px;
5+
border-color: #dee2e6;
6+
background-color: #fff;
7+
display: flex;
8+
flex-wrap: wrap;
9+
overflow: unset;
10+
}
11+
.rc-dyn-tabs-tablist .rc-dyn-tabs-tab {
12+
background-color: transparent;
13+
}
14+
.rc-dyn-tabs-tablist .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
15+
color: #495057;
16+
border-style: solid;
17+
border-width: 0px 0px 1px 0px;
18+
margin: 0px 0px -1px 0px;
19+
border-top-left-radius: 0.25rem;
20+
border-top-right-radius: 0.25rem;
21+
border-color: transparent;
22+
background-color: transparent;
23+
padding: 0.5rem 1rem;
24+
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
25+
}
26+
.rc-dyn-tabs-tablist .rc-dyn-tabs-tab > .rc-dyn-tabs-title:hover {
27+
background-color: #eee;
28+
border-color: #eee #eee transparent;
29+
}
30+
.rc-dyn-tabs-tablist .rc-dyn-tabs-tab.rc-dyn-tabs-selected {
31+
background-color: #fff;
32+
}
33+
.rc-dyn-tabs-tablist .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
34+
border-width: 1px;
35+
border-color: #dee2e6 #dee2e6 #fff #dee2e6;
36+
background-color: #fff;
37+
}
38+
39+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
40+
flex-direction: column;
41+
border-width: 0px 1px 0px 0px;
42+
border-color: #dee2e6;
43+
}
44+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical .rc-dyn-tabs-tab {
45+
direction: rtl;
46+
}
47+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
48+
border-width: 0px 1px 0px 0px;
49+
margin: 0px -1px 0px 0px;
50+
border-top-left-radius: 0.25rem;
51+
border-bottom-left-radius: 0.25rem;
52+
border-color: transparent;
53+
}
54+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
55+
border-width: 1px;
56+
border-color: #dee2e6 #fff #dee2e6 #dee2e6;
57+
}
58+
59+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
60+
border-width: 0px 0px 0px 1px;
61+
border-color: #dee2e6;
62+
}
63+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-tab {
64+
direction: ltr;
65+
}
66+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
67+
border-width: 0px 0px 0px 1px;
68+
margin: 0px 0px 0px -1px;
69+
border-top-right-radius: 0.25rem;
70+
border-bottom-right-radius: 0.25rem;
71+
border-color: transparent;
72+
}
73+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
74+
border-width: 1px;
75+
border-color: #dee2e6 #dee2e6 #dee2e6 #fff;
76+
}

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

Lines changed: 1 addition & 0 deletions
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: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.rc-dyn-tabs-tablist {
2+
background-color: transparent;
3+
border-style: solid;
4+
border-color: rgba(0, 0, 0, 0.12);
5+
border-width: 0px 0px 1px 0px;
6+
}
7+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab {
8+
color: rgba(0, 0, 0, 0.63);
9+
}
10+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
11+
min-width: 160px;
12+
min-height: 48px;
13+
transform: translate3d(0, 0, 0);
14+
border-color: transparent;
15+
border-style: solid;
16+
border-width: 1px 1px 3px 1px;
17+
border-radius: 1px;
18+
background-color: #fff;
19+
opacity: 1;
20+
}
21+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:active:after {
22+
transform: scale(0, 0);
23+
opacity: 0.2;
24+
transition: 0s;
25+
}
26+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
27+
color: black;
28+
background-color: transparent;
29+
border-color: #3f51b5;
30+
border-style: solid;
31+
border-width: 0px 0px 3px 0px;
32+
opacity: 1;
33+
}
34+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:hover {
35+
color: rgba(0, 0, 0, 0.63);
36+
background: #e6e6e6;
37+
transition: background 0.8s;
38+
}
39+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:active:hover {
40+
color: rgba(0, 0, 0, 0.63);
41+
background-color: #d4d4d4;
42+
}
43+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:after {
44+
content: "";
45+
display: block;
46+
position: absolute;
47+
width: 100%;
48+
height: 100%;
49+
top: 0;
50+
left: 0;
51+
pointer-events: none;
52+
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
53+
background-repeat: no-repeat;
54+
background-position: 50%;
55+
transform: scale(10, 10);
56+
opacity: 0;
57+
transition: transform 0.5s, opacity 1s;
58+
}
59+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
60+
top: 50%;
61+
transform: translateY(-50%);
62+
line-height: 0px;
63+
right: 10px;
64+
}
65+
66+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
67+
right: auto;
68+
left: 10px;
69+
}
70+
71+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
72+
border-width: 0px 1px 0px 0px;
73+
}
74+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
75+
border-width: 0px 1px 0px 0px;
76+
}
77+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
78+
border-width: 0px 3px 0px 0px;
79+
}
80+
81+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
82+
border-width: 0px 0px 0px 1px;
83+
}
84+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
85+
border-width: 0px 0px 0px 1px;
86+
}
87+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
88+
border-width: 0px 0px 0px 3px;
89+
}

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

Lines changed: 1 addition & 0 deletions
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: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
$tablist-background-color: #f1f1f1;
2+
$tablist-border-color: #ccc;
3+
$tab-hover-background-color: #ddd;
4+
$actived-tab-background-color: #ddd;
5+
$selected-tab-background-color: #ccc;
6+
@mixin main {
7+
.rc-dyn-tabs-tablist {
8+
border: 1px solid $tablist-border-color;
9+
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+
}
30+
}
31+
& > .rc-dyn-tabs-tab.rc-dyn-tabs-selected {
32+
& > .rc-dyn-tabs-title {
33+
background-color: $selected-tab-background-color;
34+
}
35+
}
36+
}
37+
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr {
38+
& > .rc-dyn-tabs-tab {
39+
& > .rc-dyn-tabs-close {
40+
right: 10px;
41+
}
42+
}
43+
}
44+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl {
45+
& > .rc-dyn-tabs-tab {
46+
& > .rc-dyn-tabs-close {
47+
left: 10px;
48+
}
49+
}
50+
}
51+
}

0 commit comments

Comments
 (0)