Skip to content

Commit 54c2f43

Browse files
dev-javascriptdev-javascript
committed
add classic theme
1 parent 1fc06af commit 54c2f43

File tree

5 files changed

+208
-0
lines changed

5 files changed

+208
-0
lines changed

‎themes/minified-scss/react-dyn-tabs-classic.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-classic' as m;
2+
@include m.main;

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.rc-dyn-tabs-tablist {
2+
background-color: red;
3+
border-color: #bbcbde;
4+
border-style: solid;
5+
border-width: 1px;
6+
padding: 0.2em 0.2em 0;
7+
border-radius: 5px;
8+
}
9+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab {
10+
color: red;
11+
margin: 0px 0.2em 0 0;
12+
}
13+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
14+
border-color: #8db3e3;
15+
background-image: none;
16+
background-image: #deecfd;
17+
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #ccdef6), color-stop(25%, #d6e6fa), color-stop(45%, #deecfd));
18+
background-image: -webkit-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
19+
background-image: -moz-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
20+
background-image: -o-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
21+
background-image: -ms-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
22+
background-image: linear-gradient(to bottom, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
23+
-webkit-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
24+
-moz-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
25+
box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
26+
border-radius: 5px 5px 1px 1px;
27+
border-style: solid;
28+
border-width: 1px 1px 0px 1px;
29+
color: red;
30+
}
31+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
32+
background-image: none;
33+
background-image: #deecfd;
34+
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #fff), color-stop(25%, #f5f9fe), color-stop(45%, #deecfd));
35+
background-image: -moz-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
36+
background-image: -o-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
37+
background-image: -ms-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
38+
background-image: linear-gradient(to bottom, #fff, #f5f9fe 25%, #deecfd 45%);
39+
background-image: -webkit-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
40+
color: #15498b;
41+
}
42+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title:hover {
43+
background-image: #e8f2ff;
44+
background-image: -webkit-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
45+
background-image: -moz-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
46+
background-image: -o-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
47+
background-image: -ms-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
48+
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #d7e5fd), color-stop(25%, #e0edff), color-stop(45%, #e8f2ff));
49+
background-image: linear-gradient(to top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
50+
}
51+
52+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab {
53+
margin: 0px 0 0 0.2em;
54+
}
55+
56+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
57+
padding: 0.2em 0 0.2em 0.2em;
58+
}
59+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab {
60+
margin: 0.2em 0 0 0;
61+
}
62+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
63+
border-width: 1px 0px 1px 1px;
64+
border-radius: 5px 1px 1px 5px;
65+
}
66+
67+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
68+
padding: 0.2em 0.2em 0.2em 0;
69+
}
70+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
71+
border-width: 1px 1px 1px 0px;
72+
border-radius: 1px 5px 5px 1px;
73+
}

‎themes/react-dyn-tabs-classic.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-classic.scss

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
// $tablist-background-color: #e7eff9;
2+
$tablist-background-color: red;
3+
$tablist-border-color: #bbcbde;
4+
// $tab-color: #416da3;
5+
$tab-color: red;
6+
$tab-border-color: #8db3e3;
7+
$selected-tab-color: #15498b;
8+
$border-radius-value: 5px;
9+
@mixin tab-background-image {
10+
background-image: none;
11+
background-image: #deecfd;
12+
background-image: -webkit-gradient(
13+
linear,
14+
top,
15+
bottom,
16+
color-stop(0%, #ccdef6),
17+
color-stop(25%, #d6e6fa),
18+
color-stop(45%, #deecfd)
19+
);
20+
background-image: -webkit-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
21+
background-image: -moz-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
22+
background-image: -o-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
23+
background-image: -ms-linear-gradient(top, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
24+
background-image: linear-gradient(to bottom, #ccdef6 0%, #d6e6fa 25%, #deecfd 45%);
25+
}
26+
@mixin tab-box-shadow {
27+
-webkit-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
28+
-moz-box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
29+
box-shadow: #fff 0 1px 0px 0 inset, #fff -1px 0 0px 0 inset, #fff 1px 0 0px 0 inset;
30+
}
31+
@mixin tab-hover-backgroud-image {
32+
background-image: #e8f2ff;
33+
background-image: -webkit-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
34+
background-image: -moz-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
35+
background-image: -o-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
36+
background-image: -ms-linear-gradient(top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
37+
background-image: -webkit-gradient(
38+
linear,
39+
top,
40+
bottom,
41+
color-stop(0%, #d7e5fd),
42+
color-stop(25%, #e0edff),
43+
color-stop(45%, #e8f2ff)
44+
);
45+
background-image: linear-gradient(to top, #d7e5fd, #e0edff 25%, #e8f2ff 45%);
46+
}
47+
@mixin selected-tab-background-image {
48+
background-image: none;
49+
background-image: #deecfd;
50+
background-image: -webkit-gradient(
51+
linear,
52+
top,
53+
bottom,
54+
color-stop(0%, #fff),
55+
color-stop(25%, #f5f9fe),
56+
color-stop(45%, #deecfd)
57+
);
58+
background-image: -moz-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
59+
background-image: -o-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
60+
background-image: -ms-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
61+
background-image: linear-gradient(to bottom, #fff, #f5f9fe 25%, #deecfd 45%);
62+
background-image: -webkit-linear-gradient(top, #fff, #f5f9fe 25%, #deecfd 45%);
63+
}
64+
@mixin tab-border-radius($isVertical: false, $isRtl: false) {
65+
@if $isVertical {
66+
@if $isRtl {
67+
border-radius: 1px 5px 5px 1px;
68+
} @else {
69+
border-radius: 5px 1px 1px 5px;
70+
}
71+
} @else {
72+
border-radius: 5px 5px 1px 1px;
73+
}
74+
}
75+
@mixin main {
76+
.rc-dyn-tabs-tablist {
77+
background-color: $tablist-background-color;
78+
border-color: $tablist-border-color;
79+
border-style: solid;
80+
border-width: 1px;
81+
padding: 0.2em 0.2em 0;
82+
border-radius: $border-radius-value;
83+
& > .rc-dyn-tabs-tab {
84+
color: $tab-color;
85+
margin: 0px 0.2em 0 0;
86+
& > .rc-dyn-tabs-title {
87+
border-color: $tab-border-color;
88+
@include tab-background-image;
89+
@include tab-box-shadow;
90+
@include tab-border-radius;
91+
border-style: solid;
92+
border-width: 1px 1px 0px 1px;
93+
color: $tab-color;
94+
}
95+
&.rc-dyn-tabs-selected {
96+
& > .rc-dyn-tabs-title {
97+
@include selected-tab-background-image;
98+
color: $selected-tab-color;
99+
}
100+
}
101+
& > .rc-dyn-tabs-title:hover {
102+
@include tab-hover-backgroud-image;
103+
}
104+
}
105+
}
106+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl {
107+
& > .rc-dyn-tabs-tab {
108+
margin: 0px 0 0 0.2em;
109+
}
110+
}
111+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
112+
padding: 0.2em 0 0.2em 0.2em;
113+
& > .rc-dyn-tabs-tab {
114+
margin: 0.2em 0 0 0;
115+
& > .rc-dyn-tabs-title {
116+
border-width: 1px 0px 1px 1px;
117+
@include tab-border-radius($isVertical: true);
118+
}
119+
}
120+
}
121+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
122+
padding: 0.2em 0.2em 0.2em 0;
123+
& > .rc-dyn-tabs-tab {
124+
& > .rc-dyn-tabs-title {
125+
border-width: 1px 1px 1px 0px;
126+
@include tab-border-radius($isVertical: true, $isRtl: true);
127+
}
128+
}
129+
}
130+
}

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

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

0 commit comments

Comments
 (0)