@rescui/tab-list 0.12.6 → 0.12.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/_virtual/index.css.js +10 -0
- package/lib/_virtual/left.js +37 -0
- package/lib/_virtual/right.js +37 -0
- package/lib/index.css +135 -61
- package/lib/parts/separator.p.module.css.js +3 -3
- package/lib/parts/tab-list.p.module.css.js +15 -15
- package/lib/parts/with-scroll-arrows.js +2 -1
- package/lib/parts/with-scroll-arrows.p.module.css.js +11 -11
- package/package.json +6 -7
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
var styles = {
|
|
2
|
+
"icon": "_icon_1jmu341_4",
|
|
3
|
+
"sizeXS": "_sizeXS_1jmu341_14",
|
|
4
|
+
"sizeS": "_sizeS_1jmu341_18",
|
|
5
|
+
"sizeM": "_sizeM_1jmu341_22",
|
|
6
|
+
"sizeL": "_sizeL_1jmu341_26",
|
|
7
|
+
"light": "_light_1jmu341_30",
|
|
8
|
+
"dark": "_dark_1jmu341_34"
|
|
9
|
+
};
|
|
10
|
+
export { styles as default };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import cn from 'classnames';
|
|
6
|
+
import styles from './index.css.js';
|
|
7
|
+
var _excluded = ["theme", "size", "className"];
|
|
8
|
+
var sizeStyles = {
|
|
9
|
+
"xs": styles.sizeXS,
|
|
10
|
+
"s": styles.sizeS,
|
|
11
|
+
"m": styles.sizeM,
|
|
12
|
+
"l": styles.sizeL
|
|
13
|
+
};
|
|
14
|
+
var LeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
15
|
+
var theme = _ref.theme,
|
|
16
|
+
size = _ref.size,
|
|
17
|
+
className = _ref.className,
|
|
18
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
|
|
20
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
21
|
+
viewBox: "0 0 24 24"
|
|
22
|
+
}, props, {
|
|
23
|
+
className: cn(styles.icon, styles[theme], sizeStyles[size], className),
|
|
24
|
+
ref: ref
|
|
25
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
26
|
+
d: "M15.004 19V5l-8 7 8 7z"
|
|
27
|
+
}));
|
|
28
|
+
});
|
|
29
|
+
LeftIcon.propTypes = {
|
|
30
|
+
className: PropTypes.string,
|
|
31
|
+
theme: PropTypes.oneOf(["light", "dark"]),
|
|
32
|
+
size: PropTypes.oneOf(["xs", "s", "m", "l"])
|
|
33
|
+
};
|
|
34
|
+
LeftIcon.defaultProps = {
|
|
35
|
+
size: "m"
|
|
36
|
+
};
|
|
37
|
+
export { LeftIcon as default };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import cn from 'classnames';
|
|
6
|
+
import styles from './index.css.js';
|
|
7
|
+
var _excluded = ["theme", "size", "className"];
|
|
8
|
+
var sizeStyles = {
|
|
9
|
+
"xs": styles.sizeXS,
|
|
10
|
+
"s": styles.sizeS,
|
|
11
|
+
"m": styles.sizeM,
|
|
12
|
+
"l": styles.sizeL
|
|
13
|
+
};
|
|
14
|
+
var RightIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
15
|
+
var theme = _ref.theme,
|
|
16
|
+
size = _ref.size,
|
|
17
|
+
className = _ref.className,
|
|
18
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
|
|
20
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
21
|
+
viewBox: "0 0 24 24"
|
|
22
|
+
}, props, {
|
|
23
|
+
className: cn(styles.icon, styles[theme], sizeStyles[size], className),
|
|
24
|
+
ref: ref
|
|
25
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
26
|
+
d: "M9.004 19l8-7-8-7v14z"
|
|
27
|
+
}));
|
|
28
|
+
});
|
|
29
|
+
RightIcon.propTypes = {
|
|
30
|
+
className: PropTypes.string,
|
|
31
|
+
theme: PropTypes.oneOf(["light", "dark"]),
|
|
32
|
+
size: PropTypes.oneOf(["xs", "s", "m", "l"])
|
|
33
|
+
};
|
|
34
|
+
RightIcon.defaultProps = {
|
|
35
|
+
size: "m"
|
|
36
|
+
};
|
|
37
|
+
export { RightIcon as default };
|
package/lib/index.css
CHANGED
|
@@ -1,15 +1,89 @@
|
|
|
1
|
-
.
|
|
1
|
+
._icon_1jmu341_4{
|
|
2
|
+
--_rs-theme-dark:var(
|
|
3
|
+
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
4
|
+
var(--rs-theme-dark, 0)
|
|
5
|
+
);
|
|
6
|
+
--_rs-theme-flip:var(--rs-theme-flip, 0);
|
|
7
|
+
--_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
|
|
8
|
+
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
9
|
+
}
|
|
10
|
+
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
11
|
+
._icon_1jmu341_4{
|
|
12
|
+
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
13
|
+
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
14
|
+
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
15
|
+
--_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
16
|
+
--_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
20
|
+
._icon_1jmu341_4{
|
|
21
|
+
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
22
|
+
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
23
|
+
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
24
|
+
--_rs-color-primary-t-dim:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, 0.8);
|
|
25
|
+
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
._icon_1jmu341_4{
|
|
29
|
+
|
|
30
|
+
fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
|
|
31
|
+
|
|
32
|
+
width:auto;
|
|
33
|
+
height:var(--_rs-icons-height);
|
|
34
|
+
}
|
|
35
|
+
._sizeXS_1jmu341_14{
|
|
36
|
+
--_rs-icons-height:16px;
|
|
37
|
+
}
|
|
38
|
+
._sizeS_1jmu341_18{
|
|
39
|
+
--_rs-icons-height:20px;
|
|
40
|
+
}
|
|
41
|
+
._sizeM_1jmu341_22{
|
|
42
|
+
--_rs-icons-height:24px;
|
|
43
|
+
}
|
|
44
|
+
._sizeL_1jmu341_26{
|
|
45
|
+
--_rs-icons-height:28px;
|
|
46
|
+
}
|
|
47
|
+
._light_1jmu341_30{
|
|
48
|
+
--rs-theme-dark:0;
|
|
49
|
+
--_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
50
|
+
}
|
|
51
|
+
._dark_1jmu341_34{
|
|
52
|
+
--rs-theme-dark:1;
|
|
53
|
+
--_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
54
|
+
}
|
|
55
|
+
@-webkit-keyframes rs-icon-rotate{
|
|
56
|
+
from{
|
|
57
|
+
-webkit-transform:rotate(0deg);
|
|
58
|
+
transform:rotate(0deg);
|
|
59
|
+
}
|
|
60
|
+
to{
|
|
61
|
+
-webkit-transform:rotate(360deg);
|
|
62
|
+
transform:rotate(360deg);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
@keyframes rs-icon-rotate{
|
|
66
|
+
from{
|
|
67
|
+
-webkit-transform:rotate(0deg);
|
|
68
|
+
transform:rotate(0deg);
|
|
69
|
+
}
|
|
70
|
+
to{
|
|
71
|
+
-webkit-transform:rotate(360deg);
|
|
72
|
+
transform:rotate(360deg);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
._light_adazr6_7{
|
|
2
76
|
--rs-theme-dark:0;
|
|
3
77
|
}
|
|
4
|
-
.
|
|
78
|
+
._dark_adazr6_10{
|
|
5
79
|
--rs-theme-dark:1;
|
|
6
80
|
}
|
|
7
|
-
.
|
|
81
|
+
._sizeM_adazr6_14{
|
|
8
82
|
--_rs-tab-list-tab-vertical-padding:8px;
|
|
9
83
|
--_rs-tab-list-icon-size:24px;
|
|
10
84
|
--_rs-tab-list-icon-offset:4px;
|
|
11
85
|
}
|
|
12
|
-
.
|
|
86
|
+
._sizeM_adazr6_14 [data-rs-internal='tab-list__tab']{
|
|
13
87
|
--_rs-typography-letter-spacing:0.0015em;
|
|
14
88
|
--_rs-typography-text-transform:initial;
|
|
15
89
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -44,16 +118,16 @@
|
|
|
44
118
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
45
119
|
}
|
|
46
120
|
@media screen and (max-width: 640px){
|
|
47
|
-
.
|
|
121
|
+
._sizeM_adazr6_14 [data-rs-internal='tab-list__tab']{
|
|
48
122
|
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
49
123
|
}
|
|
50
124
|
}
|
|
51
|
-
.
|
|
125
|
+
._sizeL_adazr6_17{
|
|
52
126
|
--_rs-tab-list-tab-vertical-padding:12px;
|
|
53
127
|
--_rs-tab-list-icon-size:28px;
|
|
54
128
|
--_rs-tab-list-icon-offset:8px;
|
|
55
129
|
}
|
|
56
|
-
.
|
|
130
|
+
._sizeL_adazr6_17 [data-rs-internal='tab-list__tab']{
|
|
57
131
|
--_rs-typography-letter-spacing:normal;
|
|
58
132
|
--_rs-typography-text-transform:initial;
|
|
59
133
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -88,30 +162,30 @@
|
|
|
88
162
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
89
163
|
}
|
|
90
164
|
@media screen and (max-width: 640px){
|
|
91
|
-
.
|
|
165
|
+
._sizeL_adazr6_17 [data-rs-internal='tab-list__tab']{
|
|
92
166
|
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
93
167
|
}
|
|
94
168
|
}
|
|
95
|
-
.
|
|
169
|
+
._classic_adazr6_21{
|
|
96
170
|
--_rs-tab-list-indicator-background:var(--_rs-color-primary);
|
|
97
171
|
--_rs-tab-list-tab-selected-color:var(--_rs-color-primary);
|
|
98
172
|
}
|
|
99
|
-
.
|
|
173
|
+
._rock_adazr6_24{
|
|
100
174
|
--_rs-tab-list-indicator-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
101
175
|
--_rs-tab-list-tab-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
102
176
|
}
|
|
103
|
-
.
|
|
177
|
+
._sparse_adazr6_28{
|
|
104
178
|
--_rs-tab-list-tab-margin-left-or-initial:32px;
|
|
105
179
|
}
|
|
106
180
|
@media screen and (max-width: 640px){
|
|
107
|
-
.
|
|
181
|
+
._sparse_adazr6_28{
|
|
108
182
|
--_rs-tab-list-tab-margin-left-or-initial:24px;
|
|
109
183
|
}
|
|
110
184
|
}
|
|
111
|
-
.
|
|
185
|
+
._short_adazr6_32{
|
|
112
186
|
--_rs-tab-list-tab-box-shadow:inset 0 -1px 0 rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1));
|
|
113
187
|
}
|
|
114
|
-
.
|
|
188
|
+
._tabsContainer_adazr6_36{
|
|
115
189
|
--_rs-theme-dark:var(
|
|
116
190
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
117
191
|
var(--rs-theme-dark, 0)
|
|
@@ -121,7 +195,7 @@
|
|
|
121
195
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
122
196
|
}
|
|
123
197
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
124
|
-
.
|
|
198
|
+
._tabsContainer_adazr6_36{
|
|
125
199
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
126
200
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
127
201
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -130,7 +204,7 @@
|
|
|
130
204
|
}
|
|
131
205
|
}
|
|
132
206
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
133
|
-
.
|
|
207
|
+
._tabsContainer_adazr6_36{
|
|
134
208
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
135
209
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
136
210
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -138,15 +212,15 @@
|
|
|
138
212
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
139
213
|
}
|
|
140
214
|
}
|
|
141
|
-
.
|
|
215
|
+
._tabsContainer_adazr6_36 {
|
|
142
216
|
--_rs-tab-list-tab-base-margin-left:24px;
|
|
143
217
|
}
|
|
144
218
|
@media screen and (max-width: 640px){
|
|
145
|
-
.
|
|
219
|
+
._tabsContainer_adazr6_36{
|
|
146
220
|
--_rs-tab-list-tab-base-margin-left:16px;
|
|
147
221
|
}
|
|
148
222
|
}
|
|
149
|
-
.
|
|
223
|
+
._tabsContainer_adazr6_36 {
|
|
150
224
|
--_rs-tab-list-tab-margin-left:var(
|
|
151
225
|
--_rs-tab-list-tab-margin-left-or-initial,
|
|
152
226
|
var(--_rs-tab-list-tab-base-margin-left)
|
|
@@ -160,7 +234,7 @@
|
|
|
160
234
|
|
|
161
235
|
display:flex;
|
|
162
236
|
}
|
|
163
|
-
.
|
|
237
|
+
._indicator_adazr6_46{
|
|
164
238
|
position:absolute;
|
|
165
239
|
z-index:3;
|
|
166
240
|
bottom:0;
|
|
@@ -175,13 +249,13 @@
|
|
|
175
249
|
transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
176
250
|
will-change:left, width;
|
|
177
251
|
}
|
|
178
|
-
.
|
|
252
|
+
._iconLeft_adazr6_61{
|
|
179
253
|
--_rs-tab-list-tab-flex-direction:row;
|
|
180
254
|
}
|
|
181
|
-
.
|
|
255
|
+
._iconRight_adazr6_64{
|
|
182
256
|
--_rs-tab-list-tab-flex-direction:row-reverse;
|
|
183
257
|
}
|
|
184
|
-
.
|
|
258
|
+
._tab_adazr6_36{
|
|
185
259
|
--_rs-theme-dark:var(
|
|
186
260
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
187
261
|
var(--rs-theme-dark, 0)
|
|
@@ -191,7 +265,7 @@
|
|
|
191
265
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
192
266
|
}
|
|
193
267
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
194
|
-
.
|
|
268
|
+
._tab_adazr6_36{
|
|
195
269
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
196
270
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
197
271
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -200,7 +274,7 @@
|
|
|
200
274
|
}
|
|
201
275
|
}
|
|
202
276
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
203
|
-
.
|
|
277
|
+
._tab_adazr6_36{
|
|
204
278
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
205
279
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
206
280
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -208,7 +282,7 @@
|
|
|
208
282
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
209
283
|
}
|
|
210
284
|
}
|
|
211
|
-
.
|
|
285
|
+
._tab_adazr6_36 {
|
|
212
286
|
letter-spacing:var(
|
|
213
287
|
--rs-text-base-letter-spacing,
|
|
214
288
|
var(--_rs-typography-letter-spacing)
|
|
@@ -222,11 +296,11 @@
|
|
|
222
296
|
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
223
297
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
224
298
|
}
|
|
225
|
-
.
|
|
226
|
-
.
|
|
299
|
+
._tab_adazr6_36 > p:not(:nth-child(1)),
|
|
300
|
+
._tab_adazr6_36 > pre:not(:nth-child(1)){
|
|
227
301
|
padding-top:var(--_rs-typography-auto-offset-or-initial);
|
|
228
302
|
}
|
|
229
|
-
.
|
|
303
|
+
._tab_adazr6_36 {
|
|
230
304
|
|
|
231
305
|
position:relative;
|
|
232
306
|
|
|
@@ -273,19 +347,19 @@
|
|
|
273
347
|
-moz-osx-font-smoothing:inherit;
|
|
274
348
|
-webkit-appearance:none;
|
|
275
349
|
}
|
|
276
|
-
.
|
|
350
|
+
._tab_adazr6_36::-moz-focus-inner{
|
|
277
351
|
padding:0;
|
|
278
352
|
|
|
279
353
|
border:none;
|
|
280
354
|
}
|
|
281
|
-
.
|
|
282
|
-
.
|
|
283
|
-
.
|
|
355
|
+
._tab_adazr6_36:hover,
|
|
356
|
+
._tab_adazr6_36:active,
|
|
357
|
+
._tab_adazr6_36:focus{
|
|
284
358
|
outline:none;
|
|
285
359
|
|
|
286
360
|
text-decoration:none;
|
|
287
361
|
}
|
|
288
|
-
.
|
|
362
|
+
._tab_adazr6_36:after{
|
|
289
363
|
position:absolute;
|
|
290
364
|
bottom:0;
|
|
291
365
|
left:0;
|
|
@@ -297,18 +371,18 @@
|
|
|
297
371
|
|
|
298
372
|
background-color:transparent;
|
|
299
373
|
}
|
|
300
|
-
.
|
|
374
|
+
._tab_adazr6_36:focus[data-focus-method='key']:after{
|
|
301
375
|
opacity:0;
|
|
302
376
|
}
|
|
303
|
-
.
|
|
377
|
+
._tab_adazr6_36:hover{
|
|
304
378
|
color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
305
379
|
}
|
|
306
|
-
.
|
|
380
|
+
._tab_adazr6_36:hover:after{
|
|
307
381
|
height:1px;
|
|
308
382
|
|
|
309
383
|
background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
310
384
|
}
|
|
311
|
-
.
|
|
385
|
+
._tab_adazr6_36._selected_adazr6_154{
|
|
312
386
|
z-index:1;
|
|
313
387
|
|
|
314
388
|
cursor:default;
|
|
@@ -319,7 +393,7 @@
|
|
|
319
393
|
|
|
320
394
|
transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
321
395
|
}
|
|
322
|
-
.
|
|
396
|
+
._tab_adazr6_36._selected_adazr6_154:after{
|
|
323
397
|
height:2px;
|
|
324
398
|
|
|
325
399
|
background-color:var(--_rs-tab-list-indicator-background);
|
|
@@ -328,14 +402,14 @@
|
|
|
328
402
|
|
|
329
403
|
transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
|
|
330
404
|
}
|
|
331
|
-
.
|
|
405
|
+
._tab_adazr6_36:focus[data-focus-method='key']{
|
|
332
406
|
-webkit-box-shadow:inset var(--_rs-color-primary-dim) 0 -4px 0 0, inset var(--_rs-color-primary-dim) 0 4px 0 0, var(--_rs-color-primary-dim) -4px 0 0 0, var(--_rs-color-primary-dim) 4px 0 0 0;
|
|
333
407
|
box-shadow:inset var(--_rs-color-primary-dim) 0 -4px 0 0, inset var(--_rs-color-primary-dim) 0 4px 0 0, var(--_rs-color-primary-dim) -4px 0 0 0, var(--_rs-color-primary-dim) 4px 0 0 0;
|
|
334
408
|
}
|
|
335
|
-
.
|
|
409
|
+
._tab_adazr6_36:first-child{
|
|
336
410
|
margin-left:0;
|
|
337
411
|
}
|
|
338
|
-
.
|
|
412
|
+
._tab_adazr6_36 ._icon_adazr6_61{
|
|
339
413
|
-webkit-box-flex:0;
|
|
340
414
|
-ms-flex:0 0;
|
|
341
415
|
flex:0 0;
|
|
@@ -346,13 +420,13 @@
|
|
|
346
420
|
height:var(--_rs-tab-list-icon-size);
|
|
347
421
|
}
|
|
348
422
|
|
|
349
|
-
.
|
|
423
|
+
._light_1nhkfgh_9{
|
|
350
424
|
--rs-theme-dark:0;
|
|
351
425
|
}
|
|
352
|
-
.
|
|
426
|
+
._dark_1nhkfgh_12{
|
|
353
427
|
--rs-theme-dark:1;
|
|
354
428
|
}
|
|
355
|
-
.
|
|
429
|
+
._wrapper_1nhkfgh_16{
|
|
356
430
|
--_rs-theme-dark:var(
|
|
357
431
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
358
432
|
var(--rs-theme-dark, 0)
|
|
@@ -368,7 +442,7 @@
|
|
|
368
442
|
|
|
369
443
|
display:flex;
|
|
370
444
|
}
|
|
371
|
-
.
|
|
445
|
+
._scrollable_1nhkfgh_23{
|
|
372
446
|
display:-webkit-box;
|
|
373
447
|
display:-ms-flexbox;
|
|
374
448
|
display:flex;
|
|
@@ -377,7 +451,7 @@
|
|
|
377
451
|
margin:-4px;
|
|
378
452
|
padding:4px;
|
|
379
453
|
}
|
|
380
|
-
.
|
|
454
|
+
._scrollable_1nhkfgh_23::after{
|
|
381
455
|
display:block;
|
|
382
456
|
|
|
383
457
|
height:100%;
|
|
@@ -386,15 +460,15 @@
|
|
|
386
460
|
|
|
387
461
|
content:'';
|
|
388
462
|
}
|
|
389
|
-
.
|
|
463
|
+
._scrollable_1nhkfgh_23 {
|
|
390
464
|
|
|
391
465
|
-ms-overflow-style:none;
|
|
392
466
|
scrollbar-width:none;
|
|
393
467
|
}
|
|
394
|
-
.
|
|
468
|
+
._scrollable_1nhkfgh_23::-webkit-scrollbar{
|
|
395
469
|
display:none;
|
|
396
470
|
}
|
|
397
|
-
.
|
|
471
|
+
._arrow_1nhkfgh_52{
|
|
398
472
|
position:absolute;
|
|
399
473
|
z-index:2;
|
|
400
474
|
top:50%;
|
|
@@ -423,7 +497,7 @@
|
|
|
423
497
|
-webkit-transform:translateY(-50%);
|
|
424
498
|
transform:translateY(-50%);
|
|
425
499
|
}
|
|
426
|
-
.
|
|
500
|
+
._arrow_1nhkfgh_52._shown_1nhkfgh_72{
|
|
427
501
|
opacity:1;
|
|
428
502
|
|
|
429
503
|
pointer-events:auto;
|
|
@@ -432,13 +506,13 @@
|
|
|
432
506
|
|
|
433
507
|
transition:opacity 0.15s ease-in;
|
|
434
508
|
}
|
|
435
|
-
.
|
|
509
|
+
._arrow_1nhkfgh_52._arrowLeft_1nhkfgh_80{
|
|
436
510
|
left:-5px;
|
|
437
511
|
}
|
|
438
|
-
.
|
|
512
|
+
._arrow_1nhkfgh_52._arrowRight_1nhkfgh_85{
|
|
439
513
|
right:-5px;
|
|
440
514
|
}
|
|
441
|
-
.
|
|
515
|
+
._withLeftArrow_1nhkfgh_91{
|
|
442
516
|
-webkit-mask-image:-webkit-gradient(
|
|
443
517
|
linear,
|
|
444
518
|
left top, right top,
|
|
@@ -466,7 +540,7 @@
|
|
|
466
540
|
black 56px
|
|
467
541
|
);
|
|
468
542
|
}
|
|
469
|
-
.
|
|
543
|
+
._withRightArrow_1nhkfgh_100{
|
|
470
544
|
-webkit-mask-image:-webkit-gradient(
|
|
471
545
|
linear,
|
|
472
546
|
right top, left top,
|
|
@@ -494,7 +568,7 @@
|
|
|
494
568
|
black 56px
|
|
495
569
|
);
|
|
496
570
|
}
|
|
497
|
-
.
|
|
571
|
+
._withLeftArrow_1nhkfgh_91._withRightArrow_1nhkfgh_100{
|
|
498
572
|
-webkit-mask-image:-webkit-gradient(
|
|
499
573
|
linear,
|
|
500
574
|
left top, right top,
|
|
@@ -534,17 +608,17 @@
|
|
|
534
608
|
rgba(0, 0, 0, 0) 100%
|
|
535
609
|
);
|
|
536
610
|
}
|
|
537
|
-
.
|
|
611
|
+
._arrowButton_1nhkfgh_121{
|
|
538
612
|
cursor:pointer;
|
|
539
613
|
}
|
|
540
614
|
|
|
541
|
-
.
|
|
615
|
+
._light_1rkbbkp_4{
|
|
542
616
|
--rs-theme-dark:0;
|
|
543
617
|
}
|
|
544
|
-
.
|
|
618
|
+
._dark_1rkbbkp_7{
|
|
545
619
|
--rs-theme-dark:1;
|
|
546
620
|
}
|
|
547
|
-
.
|
|
621
|
+
._separator_1rkbbkp_11{
|
|
548
622
|
--_rs-theme-dark:var(
|
|
549
623
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
550
624
|
var(--rs-theme-dark, 0)
|
|
@@ -558,7 +632,7 @@
|
|
|
558
632
|
|
|
559
633
|
width:100%;
|
|
560
634
|
}
|
|
561
|
-
.
|
|
635
|
+
._separator_1rkbbkp_11:after{
|
|
562
636
|
position:absolute;
|
|
563
637
|
right:0;
|
|
564
638
|
bottom:0;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"light": "
|
|
3
|
-
"dark": "
|
|
4
|
-
"sizeM": "
|
|
5
|
-
"sizeL": "
|
|
6
|
-
"classic": "
|
|
7
|
-
"rock": "
|
|
8
|
-
"sparse": "
|
|
9
|
-
"short": "
|
|
10
|
-
"tabsContainer": "
|
|
11
|
-
"indicator": "
|
|
12
|
-
"iconLeft": "
|
|
13
|
-
"iconRight": "
|
|
14
|
-
"tab": "
|
|
15
|
-
"selected": "
|
|
16
|
-
"icon": "
|
|
2
|
+
"light": "_light_adazr6_7",
|
|
3
|
+
"dark": "_dark_adazr6_10",
|
|
4
|
+
"sizeM": "_sizeM_adazr6_14",
|
|
5
|
+
"sizeL": "_sizeL_adazr6_17",
|
|
6
|
+
"classic": "_classic_adazr6_21",
|
|
7
|
+
"rock": "_rock_adazr6_24",
|
|
8
|
+
"sparse": "_sparse_adazr6_28",
|
|
9
|
+
"short": "_short_adazr6_32",
|
|
10
|
+
"tabsContainer": "_tabsContainer_adazr6_36",
|
|
11
|
+
"indicator": "_indicator_adazr6_46",
|
|
12
|
+
"iconLeft": "_iconLeft_adazr6_61",
|
|
13
|
+
"iconRight": "_iconRight_adazr6_64",
|
|
14
|
+
"tab": "_tab_adazr6_36",
|
|
15
|
+
"selected": "_selected_adazr6_154",
|
|
16
|
+
"icon": "_icon_adazr6_61"
|
|
17
17
|
};
|
|
18
18
|
export { styles as default };
|
|
@@ -17,8 +17,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
17
17
|
import React from 'react';
|
|
18
18
|
import cn from 'classnames';
|
|
19
19
|
import { Button } from '@rescui/button';
|
|
20
|
-
import { LeftIcon, RightIcon } from '@rescui/icons';
|
|
21
20
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
21
|
+
import LeftIcon from '../_virtual/left.js';
|
|
22
|
+
import RightIcon from '../_virtual/right.js';
|
|
22
23
|
import { useScrollableList } from './use-scrollable-list.js';
|
|
23
24
|
import styles from './with-scroll-arrows.p.module.css.js';
|
|
24
25
|
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"light": "
|
|
3
|
-
"dark": "
|
|
4
|
-
"wrapper": "
|
|
5
|
-
"scrollable": "
|
|
6
|
-
"arrow": "
|
|
7
|
-
"shown": "
|
|
8
|
-
"arrowLeft": "
|
|
9
|
-
"arrowRight": "
|
|
10
|
-
"withLeftArrow": "
|
|
11
|
-
"withRightArrow": "
|
|
12
|
-
"arrowButton": "
|
|
2
|
+
"light": "_light_1nhkfgh_9",
|
|
3
|
+
"dark": "_dark_1nhkfgh_12",
|
|
4
|
+
"wrapper": "_wrapper_1nhkfgh_16",
|
|
5
|
+
"scrollable": "_scrollable_1nhkfgh_23",
|
|
6
|
+
"arrow": "_arrow_1nhkfgh_52",
|
|
7
|
+
"shown": "_shown_1nhkfgh_72",
|
|
8
|
+
"arrowLeft": "_arrowLeft_1nhkfgh_80",
|
|
9
|
+
"arrowRight": "_arrowRight_1nhkfgh_85",
|
|
10
|
+
"withLeftArrow": "_withLeftArrow_1nhkfgh_91",
|
|
11
|
+
"withRightArrow": "_withRightArrow_1nhkfgh_100",
|
|
12
|
+
"arrowButton": "_arrowButton_1nhkfgh_121"
|
|
13
13
|
};
|
|
14
14
|
export { styles as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/tab-list",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime-corejs3": "^7.14.0",
|
|
18
18
|
"@juggle/resize-observer": "3.3.0",
|
|
19
|
-
"@rescui/button": "^0.16.
|
|
20
|
-
"@rescui/icons": "^0.16.3",
|
|
19
|
+
"@rescui/button": "^0.16.1",
|
|
21
20
|
"classnames": "^2.2.6",
|
|
22
21
|
"core-js": "^3.9.1"
|
|
23
22
|
},
|
|
@@ -27,10 +26,10 @@
|
|
|
27
26
|
"react": ">=16.8.0 <19"
|
|
28
27
|
},
|
|
29
28
|
"devDependencies": {
|
|
30
|
-
"@rescui/colors": "^0.2.
|
|
29
|
+
"@rescui/colors": "^0.2.2",
|
|
31
30
|
"@rescui/postcss-preset-library": "^0.2.1",
|
|
32
|
-
"@rescui/scripts": "^0.3.
|
|
33
|
-
"@rescui/typography": "^0.16.
|
|
31
|
+
"@rescui/scripts": "^0.3.2",
|
|
32
|
+
"@rescui/typography": "^0.16.4",
|
|
34
33
|
"@rescui/visual-regression": "^0.1.2"
|
|
35
34
|
},
|
|
36
35
|
"scripts": {
|
|
@@ -38,5 +37,5 @@
|
|
|
38
37
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
39
38
|
},
|
|
40
39
|
"nx": {},
|
|
41
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "d4bb4a95bc321907bc55b9ad9768f7e822acbd2d"
|
|
42
41
|
}
|