@rescui/tab-list 0.12.6 → 0.12.8
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 +132 -64
- 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_ekw7ne_4",
|
|
3
|
+
"sizeXS": "_sizeXS_ekw7ne_14",
|
|
4
|
+
"sizeS": "_sizeS_ekw7ne_18",
|
|
5
|
+
"sizeM": "_sizeM_ekw7ne_22",
|
|
6
|
+
"sizeL": "_sizeL_ekw7ne_26",
|
|
7
|
+
"light": "_light_ekw7ne_30",
|
|
8
|
+
"dark": "_dark_ekw7ne_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_ekw7ne_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_ekw7ne_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_ekw7ne_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_ekw7ne_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_ekw7ne_14{
|
|
36
|
+
--_rs-icons-height:16px;
|
|
37
|
+
}
|
|
38
|
+
._sizeS_ekw7ne_18{
|
|
39
|
+
--_rs-icons-height:20px;
|
|
40
|
+
}
|
|
41
|
+
._sizeM_ekw7ne_22{
|
|
42
|
+
--_rs-icons-height:24px;
|
|
43
|
+
}
|
|
44
|
+
._sizeL_ekw7ne_26{
|
|
45
|
+
--_rs-icons-height:28px;
|
|
46
|
+
}
|
|
47
|
+
._light_ekw7ne_30{
|
|
2
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));
|
|
3
50
|
}
|
|
4
|
-
.
|
|
51
|
+
._dark_ekw7ne_34{
|
|
5
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));
|
|
6
54
|
}
|
|
7
|
-
|
|
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_23ed21_7{
|
|
76
|
+
--rs-theme-dark:0;
|
|
77
|
+
}
|
|
78
|
+
._dark_23ed21_10{
|
|
79
|
+
--rs-theme-dark:1;
|
|
80
|
+
}
|
|
81
|
+
._sizeM_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_28{
|
|
108
182
|
--_rs-tab-list-tab-margin-left-or-initial:24px;
|
|
109
183
|
}
|
|
110
184
|
}
|
|
111
|
-
.
|
|
185
|
+
._short_23ed21_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_23ed21_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_23ed21_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_23ed21_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_23ed21_36 {
|
|
142
216
|
--_rs-tab-list-tab-base-margin-left:24px;
|
|
143
217
|
}
|
|
144
218
|
@media screen and (max-width: 640px){
|
|
145
|
-
.
|
|
219
|
+
._tabsContainer_23ed21_36{
|
|
146
220
|
--_rs-tab-list-tab-base-margin-left:16px;
|
|
147
221
|
}
|
|
148
222
|
}
|
|
149
|
-
.
|
|
223
|
+
._tabsContainer_23ed21_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_23ed21_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_23ed21_61{
|
|
179
253
|
--_rs-tab-list-tab-flex-direction:row;
|
|
180
254
|
}
|
|
181
|
-
.
|
|
255
|
+
._iconRight_23ed21_64{
|
|
182
256
|
--_rs-tab-list-tab-flex-direction:row-reverse;
|
|
183
257
|
}
|
|
184
|
-
.
|
|
258
|
+
._tab_23ed21_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_23ed21_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_23ed21_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_23ed21_36 {
|
|
212
286
|
letter-spacing:var(
|
|
213
287
|
--rs-text-base-letter-spacing,
|
|
214
288
|
var(--_rs-typography-letter-spacing)
|
|
@@ -221,12 +295,6 @@
|
|
|
221
295
|
font-variant-numeric:var(--_rs-typography-font-variant-numeric);
|
|
222
296
|
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
223
297
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
224
|
-
}
|
|
225
|
-
._tab_1ptfp47_36 > p:not(:nth-child(1)),
|
|
226
|
-
._tab_1ptfp47_36 > pre:not(:nth-child(1)){
|
|
227
|
-
padding-top:var(--_rs-typography-auto-offset-or-initial);
|
|
228
|
-
}
|
|
229
|
-
._tab_1ptfp47_36 {
|
|
230
298
|
|
|
231
299
|
position:relative;
|
|
232
300
|
|
|
@@ -273,19 +341,19 @@
|
|
|
273
341
|
-moz-osx-font-smoothing:inherit;
|
|
274
342
|
-webkit-appearance:none;
|
|
275
343
|
}
|
|
276
|
-
.
|
|
344
|
+
._tab_23ed21_36::-moz-focus-inner{
|
|
277
345
|
padding:0;
|
|
278
346
|
|
|
279
347
|
border:none;
|
|
280
348
|
}
|
|
281
|
-
.
|
|
282
|
-
.
|
|
283
|
-
.
|
|
349
|
+
._tab_23ed21_36:hover,
|
|
350
|
+
._tab_23ed21_36:active,
|
|
351
|
+
._tab_23ed21_36:focus{
|
|
284
352
|
outline:none;
|
|
285
353
|
|
|
286
354
|
text-decoration:none;
|
|
287
355
|
}
|
|
288
|
-
.
|
|
356
|
+
._tab_23ed21_36:after{
|
|
289
357
|
position:absolute;
|
|
290
358
|
bottom:0;
|
|
291
359
|
left:0;
|
|
@@ -297,18 +365,18 @@
|
|
|
297
365
|
|
|
298
366
|
background-color:transparent;
|
|
299
367
|
}
|
|
300
|
-
.
|
|
368
|
+
._tab_23ed21_36:focus[data-focus-method='key']:after{
|
|
301
369
|
opacity:0;
|
|
302
370
|
}
|
|
303
|
-
.
|
|
371
|
+
._tab_23ed21_36:hover{
|
|
304
372
|
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
373
|
}
|
|
306
|
-
.
|
|
374
|
+
._tab_23ed21_36:hover:after{
|
|
307
375
|
height:1px;
|
|
308
376
|
|
|
309
377
|
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
378
|
}
|
|
311
|
-
.
|
|
379
|
+
._tab_23ed21_36._selected_23ed21_154{
|
|
312
380
|
z-index:1;
|
|
313
381
|
|
|
314
382
|
cursor:default;
|
|
@@ -319,7 +387,7 @@
|
|
|
319
387
|
|
|
320
388
|
transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
321
389
|
}
|
|
322
|
-
.
|
|
390
|
+
._tab_23ed21_36._selected_23ed21_154:after{
|
|
323
391
|
height:2px;
|
|
324
392
|
|
|
325
393
|
background-color:var(--_rs-tab-list-indicator-background);
|
|
@@ -328,14 +396,14 @@
|
|
|
328
396
|
|
|
329
397
|
transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
|
|
330
398
|
}
|
|
331
|
-
.
|
|
399
|
+
._tab_23ed21_36:focus[data-focus-method='key']{
|
|
332
400
|
-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
401
|
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
402
|
}
|
|
335
|
-
.
|
|
403
|
+
._tab_23ed21_36:first-child{
|
|
336
404
|
margin-left:0;
|
|
337
405
|
}
|
|
338
|
-
.
|
|
406
|
+
._tab_23ed21_36 ._icon_23ed21_61{
|
|
339
407
|
-webkit-box-flex:0;
|
|
340
408
|
-ms-flex:0 0;
|
|
341
409
|
flex:0 0;
|
|
@@ -346,13 +414,13 @@
|
|
|
346
414
|
height:var(--_rs-tab-list-icon-size);
|
|
347
415
|
}
|
|
348
416
|
|
|
349
|
-
.
|
|
417
|
+
._light_1qbgplm_9{
|
|
350
418
|
--rs-theme-dark:0;
|
|
351
419
|
}
|
|
352
|
-
.
|
|
420
|
+
._dark_1qbgplm_12{
|
|
353
421
|
--rs-theme-dark:1;
|
|
354
422
|
}
|
|
355
|
-
.
|
|
423
|
+
._wrapper_1qbgplm_16{
|
|
356
424
|
--_rs-theme-dark:var(
|
|
357
425
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
358
426
|
var(--rs-theme-dark, 0)
|
|
@@ -368,7 +436,7 @@
|
|
|
368
436
|
|
|
369
437
|
display:flex;
|
|
370
438
|
}
|
|
371
|
-
.
|
|
439
|
+
._scrollable_1qbgplm_23{
|
|
372
440
|
display:-webkit-box;
|
|
373
441
|
display:-ms-flexbox;
|
|
374
442
|
display:flex;
|
|
@@ -377,7 +445,7 @@
|
|
|
377
445
|
margin:-4px;
|
|
378
446
|
padding:4px;
|
|
379
447
|
}
|
|
380
|
-
.
|
|
448
|
+
._scrollable_1qbgplm_23::after{
|
|
381
449
|
display:block;
|
|
382
450
|
|
|
383
451
|
height:100%;
|
|
@@ -386,15 +454,15 @@
|
|
|
386
454
|
|
|
387
455
|
content:'';
|
|
388
456
|
}
|
|
389
|
-
.
|
|
457
|
+
._scrollable_1qbgplm_23 {
|
|
390
458
|
|
|
391
459
|
-ms-overflow-style:none;
|
|
392
460
|
scrollbar-width:none;
|
|
393
461
|
}
|
|
394
|
-
.
|
|
462
|
+
._scrollable_1qbgplm_23::-webkit-scrollbar{
|
|
395
463
|
display:none;
|
|
396
464
|
}
|
|
397
|
-
.
|
|
465
|
+
._arrow_1qbgplm_52{
|
|
398
466
|
position:absolute;
|
|
399
467
|
z-index:2;
|
|
400
468
|
top:50%;
|
|
@@ -423,7 +491,7 @@
|
|
|
423
491
|
-webkit-transform:translateY(-50%);
|
|
424
492
|
transform:translateY(-50%);
|
|
425
493
|
}
|
|
426
|
-
.
|
|
494
|
+
._arrow_1qbgplm_52._shown_1qbgplm_72{
|
|
427
495
|
opacity:1;
|
|
428
496
|
|
|
429
497
|
pointer-events:auto;
|
|
@@ -432,13 +500,13 @@
|
|
|
432
500
|
|
|
433
501
|
transition:opacity 0.15s ease-in;
|
|
434
502
|
}
|
|
435
|
-
.
|
|
503
|
+
._arrow_1qbgplm_52._arrowLeft_1qbgplm_80{
|
|
436
504
|
left:-5px;
|
|
437
505
|
}
|
|
438
|
-
.
|
|
506
|
+
._arrow_1qbgplm_52._arrowRight_1qbgplm_85{
|
|
439
507
|
right:-5px;
|
|
440
508
|
}
|
|
441
|
-
.
|
|
509
|
+
._withLeftArrow_1qbgplm_91{
|
|
442
510
|
-webkit-mask-image:-webkit-gradient(
|
|
443
511
|
linear,
|
|
444
512
|
left top, right top,
|
|
@@ -466,7 +534,7 @@
|
|
|
466
534
|
black 56px
|
|
467
535
|
);
|
|
468
536
|
}
|
|
469
|
-
.
|
|
537
|
+
._withRightArrow_1qbgplm_100{
|
|
470
538
|
-webkit-mask-image:-webkit-gradient(
|
|
471
539
|
linear,
|
|
472
540
|
right top, left top,
|
|
@@ -494,7 +562,7 @@
|
|
|
494
562
|
black 56px
|
|
495
563
|
);
|
|
496
564
|
}
|
|
497
|
-
.
|
|
565
|
+
._withLeftArrow_1qbgplm_91._withRightArrow_1qbgplm_100{
|
|
498
566
|
-webkit-mask-image:-webkit-gradient(
|
|
499
567
|
linear,
|
|
500
568
|
left top, right top,
|
|
@@ -534,17 +602,17 @@
|
|
|
534
602
|
rgba(0, 0, 0, 0) 100%
|
|
535
603
|
);
|
|
536
604
|
}
|
|
537
|
-
.
|
|
605
|
+
._arrowButton_1qbgplm_121{
|
|
538
606
|
cursor:pointer;
|
|
539
607
|
}
|
|
540
608
|
|
|
541
|
-
.
|
|
609
|
+
._light_mqrjky_4{
|
|
542
610
|
--rs-theme-dark:0;
|
|
543
611
|
}
|
|
544
|
-
.
|
|
612
|
+
._dark_mqrjky_7{
|
|
545
613
|
--rs-theme-dark:1;
|
|
546
614
|
}
|
|
547
|
-
.
|
|
615
|
+
._separator_mqrjky_11{
|
|
548
616
|
--_rs-theme-dark:var(
|
|
549
617
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
550
618
|
var(--rs-theme-dark, 0)
|
|
@@ -558,7 +626,7 @@
|
|
|
558
626
|
|
|
559
627
|
width:100%;
|
|
560
628
|
}
|
|
561
|
-
.
|
|
629
|
+
._separator_mqrjky_11:after{
|
|
562
630
|
position:absolute;
|
|
563
631
|
right:0;
|
|
564
632
|
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_23ed21_7",
|
|
3
|
+
"dark": "_dark_23ed21_10",
|
|
4
|
+
"sizeM": "_sizeM_23ed21_14",
|
|
5
|
+
"sizeL": "_sizeL_23ed21_17",
|
|
6
|
+
"classic": "_classic_23ed21_21",
|
|
7
|
+
"rock": "_rock_23ed21_24",
|
|
8
|
+
"sparse": "_sparse_23ed21_28",
|
|
9
|
+
"short": "_short_23ed21_32",
|
|
10
|
+
"tabsContainer": "_tabsContainer_23ed21_36",
|
|
11
|
+
"indicator": "_indicator_23ed21_46",
|
|
12
|
+
"iconLeft": "_iconLeft_23ed21_61",
|
|
13
|
+
"iconRight": "_iconRight_23ed21_64",
|
|
14
|
+
"tab": "_tab_23ed21_36",
|
|
15
|
+
"selected": "_selected_23ed21_154",
|
|
16
|
+
"icon": "_icon_23ed21_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_1qbgplm_9",
|
|
3
|
+
"dark": "_dark_1qbgplm_12",
|
|
4
|
+
"wrapper": "_wrapper_1qbgplm_16",
|
|
5
|
+
"scrollable": "_scrollable_1qbgplm_23",
|
|
6
|
+
"arrow": "_arrow_1qbgplm_52",
|
|
7
|
+
"shown": "_shown_1qbgplm_72",
|
|
8
|
+
"arrowLeft": "_arrowLeft_1qbgplm_80",
|
|
9
|
+
"arrowRight": "_arrowRight_1qbgplm_85",
|
|
10
|
+
"withLeftArrow": "_withLeftArrow_1qbgplm_91",
|
|
11
|
+
"withRightArrow": "_withRightArrow_1qbgplm_100",
|
|
12
|
+
"arrowButton": "_arrowButton_1qbgplm_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.8",
|
|
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.2",
|
|
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.3",
|
|
31
30
|
"@rescui/postcss-preset-library": "^0.2.1",
|
|
32
|
-
"@rescui/scripts": "^0.3.
|
|
33
|
-
"@rescui/typography": "^0.
|
|
31
|
+
"@rescui/scripts": "^0.3.3",
|
|
32
|
+
"@rescui/typography": "^0.17.0",
|
|
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": "b422496bacb5df4a601008c646abfb08cebe461c"
|
|
42
41
|
}
|