Skip to content

Commit 4485326

Browse files
dev-javascriptdev-javascript
committed
Merge branch 'style'
2 parents ad264eb + 7f2ef64 commit 4485326

26 files changed

+974
-78
lines changed

‎package.json‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,17 @@
1616
},
1717
"scripts": {
1818
"watch": "npm-run-all --parallel watch:*",
19-
"watch:scss": "sass --watch themes/scss:themes style/scss:style",
20-
"watch:dev": "cross-env BABEL_OUTPUT=umd INCLUDE_POLYFILLS=true webpack --config webpack.config.js --env=development --watch",
19+
"watch:scss": "sass --watch themes/scss:themes style/scss:style --no-source-map",
20+
"watch:js": "cross-env BABEL_OUTPUT=umd INCLUDE_POLYFILLS=true webpack --config webpack.config.js --env=development --watch",
2121
"build": "npm-run-all clean:* --parallel build:lib:* build:scss:* & npm-run-all --parallel build:umd:*",
2222
"build:umd:dev": "cross-env BABEL_OUTPUT=umd INCLUDE_POLYFILLS=true webpack --config webpack.config.js --env=development",
2323
"build:umd:prod": "rollup -c",
2424
"build:umd:prod-pf": "cross-env INCLUDE_POLYFILLS=true rollup -c",
2525
"build:lib:cjs": "cross-env BABEL_OUTPUT=cjs babel src/ --out-dir lib/cjs/ --ignore **/__tests__,**/__mocks__,**/*.test.js,**/*.js.snap",
2626
"build:lib:esm": "babel src/ --out-dir lib/esm/ --ignore **/__tests__,**/__mocks__,**/*.test.js,**/*.js.snap",
2727
"build:lib:esm-pf": "cross-env INCLUDE_POLYFILLS=true babel src/ --out-dir lib/esm-including-polyfills/ --ignore **/__tests__,**/__mocks__,**/*.test.js,**/*.js.snap",
28-
"build:scss:theme": "sass themes/scss:themes",
29-
"build:scss:style": "sass style/scss:style",
30-
"build:minify:style": "sass style/react-dyn-tabs.css:style/react-dyn-tabs.min.css --style compressed",
31-
"build:minify:basic": "sass themes/basic.css:themes/basic.min.css --style compressed",
32-
"build:minify:bootstrap": "sass themes/bootstrap.css:themes/bootstrap.min.css --style compressed",
33-
"build:minify:classic": "sass themes/classic.css:themes/classic.min.css --style compressed",
34-
"build:minify:card": "sass themes/card.css:themes/card.min.css --style compressed",
28+
"build:scss:dev": "sass themes/scss:themes style/scss:style --no-source-map",
29+
"build:scss:pro": "sass themes/minified-scss:themes style/minified-scss:style --style compressed --no-source-map",
3530
"clean:lib": "rimraf lib",
3631
"clean:dist": "rimraf dist",
3732
"prepublish": "npm run build",

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

‎style/react-dyn-tabs.css‎

Lines changed: 96 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,122 @@
1-
.rc-dyn-tabs-panel {
2-
display: none;
1+
.rc-dyn-tabs-panellist {
2+
padding: 6px 12px;
3+
position: relative;
4+
}
5+
.rc-dyn-tabs-panellist .rc-dyn-tabs-panel {
6+
display: none;
7+
}
8+
.rc-dyn-tabs-panellist .rc-dyn-tabs-panel.rc-dyn-tabs-selected {
9+
display: block;
310
}
411

5-
.rc-dyn-tabs-rtl .rc-dyn-tabs-panel {
6-
direction : rtl;
7-
text-align: right;
12+
.rc-dyn-tabs-panellist.rc-dyn-tabs-ltr.rc-dyn-tabs-vertical {
13+
float: left;
814
}
915

10-
.rc-dyn-tabs-ltr .rc-dyn-tabs-panel {
11-
direction : ltr;
12-
text-align: left;
16+
.rc-dyn-tabs-panellist.rc-dyn-tabs-rtl.rc-dyn-tabs-vertical {
17+
float: right;
1318
}
1419

15-
.rc-dyn-tabs-panel.rc-dyn-tabs-selected {
16-
display: block;
20+
.rc-dyn-tabs-panellist.rc-dyn-tabs-rtl .rc-dyn-tabs-panel {
21+
direction: rtl;
22+
text-align: right;
1723
}
1824

25+
.rc-dyn-tabs-panellist.rc-dyn-tabs-ltr .rc-dyn-tabs-panel {
26+
direction: ltr;
27+
text-align: left;
28+
}
1929

2030
.rc-dyn-tabs-tablist {
21-
list-style-type: none;
22-
margin : 0;
23-
padding : 0;
24-
overflow : hidden;
31+
list-style-type: none;
32+
margin: 0;
33+
padding: 0;
34+
overflow: hidden;
35+
float: none;
36+
position: relative;
2537
}
26-
27-
28-
29-
.rc-dyn-tabs-ltr .rc-dyn-tabs-tab {
30-
float: left;
38+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab {
39+
display: list-item;
40+
list-style: none;
41+
text-align: center;
42+
padding: 0px;
43+
text-decoration: none;
44+
position: relative;
45+
pointer-events: visible;
46+
opacity: 1;
3147
}
32-
33-
.rc-dyn-tabs-rtl .rc-dyn-tabs-tab {
34-
float: right;
48+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
49+
position: relative;
50+
display: flex;
51+
align-items: center;
52+
overflow: hidden;
53+
text-decoration: none;
54+
cursor: pointer;
55+
white-space: nowrap;
56+
padding: 0.5em 1em;
57+
font-weight: 500;
58+
outline: none;
59+
justify-content: center;
3560
}
36-
37-
.rc-dyn-tabs-tab {
38-
display : list-item;
39-
list-style : none;
40-
text-align : center;
41-
padding : 0px;
42-
text-decoration: none;
43-
position : relative;
44-
pointer-events : visible;
45-
opacity : 1;
61+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title > .rc-dyn-tabs-icon {
62+
display: inline-block;
4663
}
47-
48-
.rc-dyn-tabs-tab.rc-dyn-tabs-disable {
49-
pointer-events: none;
50-
opacity : 0.7;
64+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
65+
position: absolute;
66+
top: 1px;
67+
cursor: pointer;
5168
}
52-
53-
.rc-dyn-tabs-close {
54-
position : absolute;
55-
top : 0px;
56-
cursor : pointer;
57-
line-height: 10px;
69+
.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
70+
pointer-events: none;
71+
opacity: 0.7;
5872
}
5973

60-
.rc-dyn-tabs-ltr .rc-dyn-tabs-close {
61-
right: 0px;
62-
left : auto;
74+
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr > .rc-dyn-tabs-tab {
75+
float: left;
6376
}
64-
65-
.rc-dyn-tabs-rtl .rc-dyn-tabs-close {
66-
left : 0px;
67-
right: auto;
77+
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
78+
direction: rtl;
6879
}
69-
70-
.rc-dyn-tabs-ltr .rc-dyn-tabs-tab>*:first-child {
71-
direction: rtl;
80+
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr > .rc-dyn-tabs-tab > .rc-dyn-tabs-title > .rc-dyn-tabs-icon {
81+
padding-right: 0.4em;
7282
}
73-
74-
.rc-dyn-tabs-rtl .rc-dyn-tabs-tab>*:first-child {
75-
direction: ltr;
83+
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
84+
right: 4px;
85+
left: auto;
7686
}
7787

78-
.rc-dyn-tabs-tab>*:first-child {
79-
position : relative;
80-
display : flex;
81-
align-items: center;
88+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab {
89+
float: right;
90+
}
91+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
92+
direction: ltr;
93+
}
94+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-title > .rc-dyn-tabs-icon {
95+
padding-left: 0.4em;
96+
}
97+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
98+
left: 4px;
99+
right: auto;
82100
}
83101

84-
.rc-dyn-tabs-title {
85-
text-decoration: none;
86-
cursor : pointer;
87-
white-space : nowrap;
88-
display : inline-block;
89-
position : relative;
90-
padding : .5em 1em;
102+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
103+
width: 12em;
104+
height: 100%;
105+
float: left;
106+
}
107+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab {
108+
float: none;
109+
}
110+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
111+
display: block;
112+
width: 100%;
113+
}
114+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
115+
top: 50%;
116+
transform: translateY(-50%);
117+
line-height: 0px;
91118
}
92119

93-
.rc-dyn-tabs-icon {
94-
display: inline-block;
95-
}
120+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
121+
float: right;
122+
}

‎style/react-dyn-tabs.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.

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
@mixin main {
2+
.rc-dyn-tabs-panellist {
3+
padding: 6px 12px;
4+
position: relative;
5+
.rc-dyn-tabs-panel {
6+
display: none;
7+
}
8+
9+
.rc-dyn-tabs-panel.rc-dyn-tabs-selected {
10+
display: block;
11+
}
12+
}
13+
14+
.rc-dyn-tabs-panellist.rc-dyn-tabs-ltr.rc-dyn-tabs-vertical {
15+
float: left;
16+
}
17+
18+
.rc-dyn-tabs-panellist.rc-dyn-tabs-rtl.rc-dyn-tabs-vertical {
19+
float: right;
20+
}
21+
22+
.rc-dyn-tabs-panellist.rc-dyn-tabs-rtl {
23+
.rc-dyn-tabs-panel {
24+
direction: rtl;
25+
text-align: right;
26+
}
27+
}
28+
29+
.rc-dyn-tabs-panellist.rc-dyn-tabs-ltr {
30+
.rc-dyn-tabs-panel {
31+
direction: ltr;
32+
text-align: left;
33+
}
34+
}
35+
36+
.rc-dyn-tabs-tablist {
37+
list-style-type: none;
38+
margin: 0;
39+
padding: 0;
40+
overflow: hidden;
41+
float: none;
42+
position: relative;
43+
44+
& > .rc-dyn-tabs-tab {
45+
display: list-item;
46+
list-style: none;
47+
text-align: center;
48+
padding: 0px;
49+
text-decoration: none;
50+
position: relative;
51+
pointer-events: visible;
52+
opacity: 1;
53+
54+
& > .rc-dyn-tabs-title {
55+
position: relative;
56+
display: flex;
57+
align-items: center;
58+
overflow: hidden;
59+
text-decoration: none;
60+
cursor: pointer;
61+
white-space: nowrap;
62+
padding: 0.5em 1em;
63+
font-weight: 500;
64+
outline: none;
65+
justify-content: center;
66+
67+
& > .rc-dyn-tabs-icon {
68+
display: inline-block;
69+
}
70+
}
71+
72+
& > .rc-dyn-tabs-close {
73+
position: absolute;
74+
top: 1px;
75+
cursor: pointer;
76+
}
77+
}
78+
79+
& > .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
80+
pointer-events: none;
81+
opacity: 0.7;
82+
}
83+
}
84+
85+
.rc-dyn-tabs-tablist.rc-dyn-tabs-ltr {
86+
& > .rc-dyn-tabs-tab {
87+
float: left;
88+
89+
& > .rc-dyn-tabs-title {
90+
direction: rtl;
91+
92+
& > .rc-dyn-tabs-icon {
93+
padding-right: 0.4em;
94+
}
95+
}
96+
97+
& > .rc-dyn-tabs-close {
98+
right: 4px;
99+
left: auto;
100+
}
101+
}
102+
}
103+
104+
.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl {
105+
& > .rc-dyn-tabs-tab {
106+
float: right;
107+
108+
& > .rc-dyn-tabs-title {
109+
direction: ltr;
110+
111+
& > .rc-dyn-tabs-icon {
112+
padding-left: 0.4em;
113+
}
114+
}
115+
116+
& > .rc-dyn-tabs-close {
117+
left: 4px;
118+
right: auto;
119+
}
120+
}
121+
}
122+
123+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
124+
width: 12em;
125+
height: 100%;
126+
float: left;
127+
& > .rc-dyn-tabs-tab {
128+
float: none;
129+
130+
& > .rc-dyn-tabs-title {
131+
display: block;
132+
width: 100%;
133+
}
134+
135+
& > .rc-dyn-tabs-close {
136+
top: 50%;
137+
transform: translateY(-50%);
138+
line-height: 0px;
139+
}
140+
}
141+
}
142+
.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
143+
float: right;
144+
}
145+
}

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

‎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/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;

0 commit comments

Comments
 (0)