@tiny-design/react 1.2.0 → 1.4.0
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/es/button/style/_index.scss +16 -11
- package/es/button/style/index.css +26 -5
- package/es/drawer/drawer.js +3 -2
- package/es/drawer/drawer.js.map +1 -1
- package/es/message/message.js +3 -2
- package/es/message/message.js.map +1 -1
- package/es/modal/modal.js +3 -2
- package/es/modal/modal.js.map +1 -1
- package/es/overlay/overlay.js +2 -2
- package/es/overlay/overlay.js.map +1 -1
- package/es/pop-confirm/style/_index.scss +4 -0
- package/es/pop-confirm/style/index.css +4 -0
- package/es/slider/style/_index.scss +1 -9
- package/es/slider/style/index.css +1 -6
- package/es/speed-dial/style/_index.scss +6 -7
- package/es/speed-dial/style/index.css +5 -5
- package/es/style/base.css +24 -3
- package/es/tag/style/_index.scss +24 -0
- package/es/tag/style/index.css +20 -0
- package/es/tag/types.d.ts +2 -1
- package/es/tag/types.js +7 -2
- package/es/tag/types.js.map +1 -1
- package/es/time-picker/style/_index.scss +13 -0
- package/es/time-picker/style/index.css +10 -0
- package/es/time-picker/time-panel.js +28 -28
- package/es/time-picker/time-panel.js.map +1 -1
- package/es/time-picker/time-picker.js +50 -29
- package/es/time-picker/time-picker.js.map +1 -1
- package/es/transition/index.js +1 -0
- package/es/transition/index.js.map +1 -1
- package/es/transition/transition.d.ts +20 -5
- package/es/transition/transition.js +33 -8
- package/es/transition/transition.js.map +1 -1
- package/es/transition/use-transition.js +137 -0
- package/es/transition/use-transition.js.map +1 -0
- package/es/waterfall/waterfall.js +62 -39
- package/es/waterfall/waterfall.js.map +1 -1
- package/lib/button/style/_index.scss +16 -11
- package/lib/button/style/index.css +26 -5
- package/lib/drawer/drawer.js +5 -4
- package/lib/drawer/drawer.js.map +1 -1
- package/lib/message/message.js +3 -2
- package/lib/message/message.js.map +1 -1
- package/lib/modal/modal.js +5 -4
- package/lib/modal/modal.js.map +1 -1
- package/lib/overlay/overlay.js +3 -3
- package/lib/overlay/overlay.js.map +1 -1
- package/lib/pop-confirm/style/_index.scss +4 -0
- package/lib/pop-confirm/style/index.css +4 -0
- package/lib/slider/style/_index.scss +1 -9
- package/lib/slider/style/index.css +1 -6
- package/lib/speed-dial/style/_index.scss +6 -7
- package/lib/speed-dial/style/index.css +5 -5
- package/lib/style/base.css +24 -3
- package/lib/tag/style/_index.scss +24 -0
- package/lib/tag/style/index.css +20 -0
- package/lib/tag/types.d.ts +2 -1
- package/lib/tag/types.js +7 -2
- package/lib/tag/types.js.map +1 -1
- package/lib/time-picker/style/_index.scss +13 -0
- package/lib/time-picker/style/index.css +10 -0
- package/lib/time-picker/time-panel.js +28 -28
- package/lib/time-picker/time-panel.js.map +1 -1
- package/lib/time-picker/time-picker.js +50 -29
- package/lib/time-picker/time-picker.js.map +1 -1
- package/lib/transition/index.js +1 -0
- package/lib/transition/index.js.map +1 -1
- package/lib/transition/transition.d.ts +20 -5
- package/lib/transition/transition.js +32 -7
- package/lib/transition/transition.js.map +1 -1
- package/lib/transition/use-transition.js +138 -0
- package/lib/transition/use-transition.js.map +1 -0
- package/lib/waterfall/waterfall.js +61 -38
- package/lib/waterfall/waterfall.js.map +1 -1
- package/package.json +3 -5
|
@@ -24,7 +24,7 @@ $btn-prefix: #{$prefix}-btn;
|
|
|
24
24
|
line-height: $btn-line-height;
|
|
25
25
|
|
|
26
26
|
&__loader {
|
|
27
|
-
@include loader
|
|
27
|
+
@include loader;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&__icon-container, &__loader {
|
|
@@ -91,19 +91,27 @@ $btn-prefix: #{$prefix}-btn;
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
&_info {
|
|
94
|
-
@include button-style(#fff, var(--ty-color-info), var(--ty-color-info)
|
|
94
|
+
@include button-style(#fff, var(--ty-color-info), var(--ty-color-info),
|
|
95
|
+
var(--ty-color-info-hover), var(--ty-color-info-hover), #fff,
|
|
96
|
+
var(--ty-color-info-active), var(--ty-color-info-active), #fff);
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
&_success {
|
|
98
|
-
@include button-style(#fff, var(--ty-color-success), var(--ty-color-success)
|
|
100
|
+
@include button-style(#fff, var(--ty-color-success), var(--ty-color-success),
|
|
101
|
+
var(--ty-color-success-hover), var(--ty-color-success-hover), #fff,
|
|
102
|
+
var(--ty-color-success-active), var(--ty-color-success-active), #fff);
|
|
99
103
|
}
|
|
100
104
|
|
|
101
105
|
&_warning {
|
|
102
|
-
@include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning)
|
|
106
|
+
@include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning),
|
|
107
|
+
var(--ty-color-warning-hover), var(--ty-color-warning-hover), #fff,
|
|
108
|
+
var(--ty-color-warning-active), var(--ty-color-warning-active), #fff);
|
|
103
109
|
}
|
|
104
110
|
|
|
105
111
|
&_danger {
|
|
106
|
-
@include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger)
|
|
112
|
+
@include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger),
|
|
113
|
+
var(--ty-color-danger-hover), var(--ty-color-danger-hover), #fff,
|
|
114
|
+
var(--ty-color-danger-active), var(--ty-color-danger-active), #fff);
|
|
107
115
|
}
|
|
108
116
|
|
|
109
117
|
// Sizes
|
|
@@ -135,13 +143,10 @@ $btn-prefix: #{$prefix}-btn;
|
|
|
135
143
|
position: relative;
|
|
136
144
|
pointer-events: none;
|
|
137
145
|
|
|
138
|
-
|
|
146
|
+
&::before {
|
|
139
147
|
content: '';
|
|
140
148
|
position: absolute;
|
|
141
|
-
|
|
142
|
-
right: -1px;
|
|
143
|
-
bottom: -1px;
|
|
144
|
-
left: -1px;
|
|
149
|
+
inset: -1px;
|
|
145
150
|
z-index: 1;
|
|
146
151
|
display: block;
|
|
147
152
|
background: var(--ty-btn-loading-bg);
|
|
@@ -208,7 +213,7 @@ $btn-prefix: #{$prefix}-btn;
|
|
|
208
213
|
&_danger {
|
|
209
214
|
.#{$btn-prefix} {
|
|
210
215
|
&:not(:first-child) {
|
|
211
|
-
border-left-color:
|
|
216
|
+
border-left-color: rgb(255 255 255 / 20%);
|
|
212
217
|
}
|
|
213
218
|
}
|
|
214
219
|
}
|
|
@@ -212,13 +212,19 @@
|
|
|
212
212
|
}
|
|
213
213
|
.ty-btn_info:hover {
|
|
214
214
|
color: #fff;
|
|
215
|
+
background: var(--ty-color-info-hover);
|
|
216
|
+
border-color: var(--ty-color-info-hover);
|
|
215
217
|
}
|
|
216
218
|
.ty-btn_info:focus {
|
|
217
219
|
color: #fff;
|
|
220
|
+
background: var(--ty-color-info-hover);
|
|
221
|
+
border-color: var(--ty-color-info-hover);
|
|
218
222
|
z-index: 1;
|
|
219
223
|
}
|
|
220
224
|
.ty-btn_info:active {
|
|
221
225
|
color: #fff;
|
|
226
|
+
background: var(--ty-color-info-active);
|
|
227
|
+
border-color: var(--ty-color-info-active);
|
|
222
228
|
}
|
|
223
229
|
.ty-btn_info:disabled {
|
|
224
230
|
color: var(--ty-btn-disabled-color);
|
|
@@ -232,13 +238,19 @@
|
|
|
232
238
|
}
|
|
233
239
|
.ty-btn_success:hover {
|
|
234
240
|
color: #fff;
|
|
241
|
+
background: var(--ty-color-success-hover);
|
|
242
|
+
border-color: var(--ty-color-success-hover);
|
|
235
243
|
}
|
|
236
244
|
.ty-btn_success:focus {
|
|
237
245
|
color: #fff;
|
|
246
|
+
background: var(--ty-color-success-hover);
|
|
247
|
+
border-color: var(--ty-color-success-hover);
|
|
238
248
|
z-index: 1;
|
|
239
249
|
}
|
|
240
250
|
.ty-btn_success:active {
|
|
241
251
|
color: #fff;
|
|
252
|
+
background: var(--ty-color-success-active);
|
|
253
|
+
border-color: var(--ty-color-success-active);
|
|
242
254
|
}
|
|
243
255
|
.ty-btn_success:disabled {
|
|
244
256
|
color: var(--ty-btn-disabled-color);
|
|
@@ -252,13 +264,19 @@
|
|
|
252
264
|
}
|
|
253
265
|
.ty-btn_warning:hover {
|
|
254
266
|
color: #fff;
|
|
267
|
+
background: var(--ty-color-warning-hover);
|
|
268
|
+
border-color: var(--ty-color-warning-hover);
|
|
255
269
|
}
|
|
256
270
|
.ty-btn_warning:focus {
|
|
257
271
|
color: #fff;
|
|
272
|
+
background: var(--ty-color-warning-hover);
|
|
273
|
+
border-color: var(--ty-color-warning-hover);
|
|
258
274
|
z-index: 1;
|
|
259
275
|
}
|
|
260
276
|
.ty-btn_warning:active {
|
|
261
277
|
color: #fff;
|
|
278
|
+
background: var(--ty-color-warning-active);
|
|
279
|
+
border-color: var(--ty-color-warning-active);
|
|
262
280
|
}
|
|
263
281
|
.ty-btn_warning:disabled {
|
|
264
282
|
color: var(--ty-btn-disabled-color);
|
|
@@ -272,13 +290,19 @@
|
|
|
272
290
|
}
|
|
273
291
|
.ty-btn_danger:hover {
|
|
274
292
|
color: #fff;
|
|
293
|
+
background: var(--ty-color-danger-hover);
|
|
294
|
+
border-color: var(--ty-color-danger-hover);
|
|
275
295
|
}
|
|
276
296
|
.ty-btn_danger:focus {
|
|
277
297
|
color: #fff;
|
|
298
|
+
background: var(--ty-color-danger-hover);
|
|
299
|
+
border-color: var(--ty-color-danger-hover);
|
|
278
300
|
z-index: 1;
|
|
279
301
|
}
|
|
280
302
|
.ty-btn_danger:active {
|
|
281
303
|
color: #fff;
|
|
304
|
+
background: var(--ty-color-danger-active);
|
|
305
|
+
border-color: var(--ty-color-danger-active);
|
|
282
306
|
}
|
|
283
307
|
.ty-btn_danger:disabled {
|
|
284
308
|
color: var(--ty-btn-disabled-color);
|
|
@@ -313,13 +337,10 @@
|
|
|
313
337
|
position: relative;
|
|
314
338
|
pointer-events: none;
|
|
315
339
|
}
|
|
316
|
-
.ty-btn_loading
|
|
340
|
+
.ty-btn_loading::before {
|
|
317
341
|
content: "";
|
|
318
342
|
position: absolute;
|
|
319
|
-
|
|
320
|
-
right: -1px;
|
|
321
|
-
bottom: -1px;
|
|
322
|
-
left: -1px;
|
|
343
|
+
inset: -1px;
|
|
323
344
|
z-index: 1;
|
|
324
345
|
display: block;
|
|
325
346
|
background: var(--ty-btn-loading-bg);
|
package/es/drawer/drawer.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ConfigContext } from "../config-provider/config-context.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/general.js";
|
|
3
|
+
import transition_default from "../transition/index.js";
|
|
3
4
|
import overlay_default from "../overlay/index.js";
|
|
4
5
|
import React, { useContext, useEffect, useId, useRef, useState } from "react";
|
|
5
6
|
import classNames from "classnames";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { CSSTransition } from "react-transition-group";
|
|
8
8
|
//#region src/drawer/drawer.tsx
|
|
9
9
|
const Drawer = React.forwardRef((props, ref) => {
|
|
10
10
|
const { visible, placement = "right", size = 256, closable = true, unmountOnClose = true, maskType = "default", maskClosable = true, onClose, prefixCls: customisedCls, afterClose, zIndex = 1e3, header, footer, className, maskStyle, style, children } = props;
|
|
@@ -70,11 +70,12 @@ const Drawer = React.forwardRef((props, ref) => {
|
|
|
70
70
|
...style,
|
|
71
71
|
...sty
|
|
72
72
|
},
|
|
73
|
-
children: /* @__PURE__ */ jsx(
|
|
73
|
+
children: /* @__PURE__ */ jsx(transition_default, {
|
|
74
74
|
appear: true,
|
|
75
75
|
nodeRef,
|
|
76
76
|
in: drawerVisible,
|
|
77
77
|
timeout: 0,
|
|
78
|
+
unmountOnExit: false,
|
|
78
79
|
classNames: `${prefixCls}__content_move`,
|
|
79
80
|
children: /* @__PURE__ */ jsxs("div", {
|
|
80
81
|
ref: nodeRef,
|
package/es/drawer/drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","names":["Overlay"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport
|
|
1
|
+
{"version":3,"file":"drawer.js","names":["Overlay","Transition"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport Overlay from '../overlay';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { DrawerProps } from './types';\n\nconst Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {\n const {\n visible,\n placement = 'right',\n size = 256,\n closable = true,\n unmountOnClose = true,\n maskType = 'default',\n maskClosable = true,\n onClose,\n prefixCls: customisedCls,\n afterClose,\n zIndex = 1000,\n header,\n footer,\n className,\n maskStyle,\n style,\n children,\n } = props;\n const [drawerVisible, setDrawerVisible] = useState(visible);\n const configContext = useContext(ConfigContext);\n const prefixCls = getPrefixCls('drawer', configContext.prefixCls, customisedCls);\n const cls = classNames(prefixCls, className, `${prefixCls}_${placement}`);\n const sty: React.CSSProperties =\n placement === 'top' || placement === 'bottom' ? { height: size } : { width: size };\n const nodeRef = useRef<HTMLDivElement>(null);\n const previousFocusRef = useRef<HTMLElement | null>(null);\n const titleId = useId();\n\n // Focus trap + Escape key\n useEffect(() => {\n if (!visible) return;\n previousFocusRef.current = document.activeElement as HTMLElement;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose?.(e as unknown as React.MouseEvent);\n return;\n }\n if (e.key === 'Tab' && nodeRef.current) {\n const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable.length === 0) return;\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (e.shiftKey) {\n if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n } else {\n if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n }\n }\n };\n document.addEventListener('keydown', handleKeyDown);\n\n requestAnimationFrame(() => {\n if (nodeRef.current) {\n const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable.length > 0) focusable[0].focus();\n }\n });\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n previousFocusRef.current?.focus();\n };\n }, [visible, onClose]);\n\n return (\n <Overlay\n onEnter={(): void => setDrawerVisible(true)}\n onExit={(): void => setDrawerVisible(false)}\n zIndex={zIndex}\n type={maskType}\n unmountOnExit={unmountOnClose}\n isShow={visible}\n onExited={afterClose}\n clickCallback={(e: React.MouseEvent): void => {\n maskClosable && onClose ? onClose(e) : undefined;\n }}\n style={maskStyle}>\n <div ref={ref} className={cls} style={{ ...style, ...sty }}>\n <Transition\n appear={true}\n nodeRef={nodeRef}\n in={drawerVisible}\n timeout={0}\n unmountOnExit={false}\n classNames={`${prefixCls}__content_move`}>\n <div\n ref={nodeRef}\n className={`${prefixCls}__content`}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={header ? titleId : undefined}\n onClick={(e) => e.stopPropagation()}>\n {closable && (\n <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={onClose} aria-label=\"Close\">\n ✕\n </button>\n )}\n {header && <div className={`${prefixCls}__header`} id={titleId}>{header}</div>}\n <div className={`${prefixCls}__body`}>{children}</div>\n {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n </div>\n </Transition>\n </div>\n </Overlay>\n );\n});\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;AAQA,MAAM,SAAS,MAAM,YAAyC,OAAO,QAAQ;CAC3E,MAAM,EACJ,SACA,YAAY,SACZ,OAAO,KACP,WAAW,MACX,iBAAiB,MACjB,WAAW,WACX,eAAe,MACf,SACA,WAAW,eACX,YACA,SAAS,KACT,QACA,QACA,WACA,WACA,OACA,aACE;CACJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,QAAQ;CAE3D,MAAM,YAAY,aAAa,UADT,WAAW,cAAc,CACQ,WAAW,cAAc;CAChF,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,UAAU,GAAG,YAAY;CACzE,MAAM,MACJ,cAAc,SAAS,cAAc,WAAW,EAAE,QAAQ,MAAM,GAAG,EAAE,OAAO,MAAM;CACpF,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,mBAAmB,OAA2B,KAAK;CACzD,MAAM,UAAU,OAAO;AAGvB,iBAAgB;AACd,MAAI,CAAC,QAAS;AACd,mBAAiB,UAAU,SAAS;EAEpC,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,EAAE,QAAQ,UAAU;AACtB,cAAU,EAAiC;AAC3C;;AAEF,OAAI,EAAE,QAAQ,SAAS,QAAQ,SAAS;IACtC,MAAM,YAAY,QAAQ,QAAQ,iBAChC,6EACD;AACD,QAAI,UAAU,WAAW,EAAG;IAC5B,MAAM,QAAQ,UAAU;IACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,QAAI,EAAE;SACA,SAAS,kBAAkB,OAAO;AAAE,QAAE,gBAAgB;AAAE,WAAK,OAAO;;eAEpE,SAAS,kBAAkB,MAAM;AAAE,OAAE,gBAAgB;AAAE,WAAM,OAAO;;;;AAI9E,WAAS,iBAAiB,WAAW,cAAc;AAEnD,8BAA4B;AAC1B,OAAI,QAAQ,SAAS;IACnB,MAAM,YAAY,QAAQ,QAAQ,iBAChC,6EACD;AACD,QAAI,UAAU,SAAS,EAAG,WAAU,GAAG,OAAO;;IAEhD;AAEF,eAAa;AACX,YAAS,oBAAoB,WAAW,cAAc;AACtD,oBAAiB,SAAS,OAAO;;IAElC,CAAC,SAAS,QAAQ,CAAC;AAEtB,QACE,oBAACA,iBAAD;EACE,eAAqB,iBAAiB,KAAK;EAC3C,cAAoB,iBAAiB,MAAM;EACnC;EACR,MAAM;EACN,eAAe;EACf,QAAQ;EACR,UAAU;EACV,gBAAgB,MAA8B;AAC5C,mBAAgB,WAAU,QAAQ,EAAE;;EAEtC,OAAO;YACP,oBAAC,OAAD;GAAU;GAAK,WAAW;GAAK,OAAO;IAAE,GAAG;IAAO,GAAG;IAAK;aACxD,oBAACC,oBAAD;IACE,QAAQ;IACC;IACT,IAAI;IACJ,SAAS;IACT,eAAe;IACf,YAAY,GAAG,UAAU;cACzB,qBAAC,OAAD;KACE,KAAK;KACL,WAAW,GAAG,UAAU;KACxB,MAAK;KACL,cAAW;KACX,mBAAiB,SAAS,UAAU,KAAA;KACpC,UAAU,MAAM,EAAE,iBAAiB;eANrC;MAOG,YACC,oBAAC,UAAD;OAAQ,MAAK;OAAS,WAAW,GAAG,UAAU;OAAc,SAAS;OAAS,cAAW;iBAAQ;OAExF,CAAA;MAEV,UAAU,oBAAC,OAAD;OAAK,WAAW,GAAG,UAAU;OAAW,IAAI;iBAAU;OAAa,CAAA;MAC9E,oBAAC,OAAD;OAAK,WAAW,GAAG,UAAU;OAAU;OAAe,CAAA;MACrD,UAAU,oBAAC,OAAD;OAAK,WAAW,GAAG,UAAU;iBAAY;OAAa,CAAA;MAC7D;;IACK,CAAA;GACT,CAAA;EACE,CAAA;EAEZ;AAEF,OAAO,cAAc"}
|
package/es/message/message.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ConfigContext } from "../config-provider/config-context.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/general.js";
|
|
3
3
|
import { CheckCircle, CloseCircle, InfoCircle, LoadingCircle, WarningCircle } from "../_utils/components.js";
|
|
4
|
+
import transition_default from "../transition/index.js";
|
|
4
5
|
import React, { useContext, useEffect, useRef, useState } from "react";
|
|
5
6
|
import classNames from "classnames";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { CSSTransition } from "react-transition-group";
|
|
8
8
|
//#region src/message/message.tsx
|
|
9
9
|
const Message = (props) => {
|
|
10
10
|
const { type, icon, content, duration, willUnmount, extra, className, style, prefixCls: customisedCls } = props;
|
|
@@ -49,11 +49,12 @@ const Message = (props) => {
|
|
|
49
49
|
window.clearTimeout(timer);
|
|
50
50
|
};
|
|
51
51
|
}, [duration, willUnmount]);
|
|
52
|
-
return /* @__PURE__ */ jsx(
|
|
52
|
+
return /* @__PURE__ */ jsx(transition_default, {
|
|
53
53
|
nodeRef: ref,
|
|
54
54
|
in: visible,
|
|
55
55
|
appear: true,
|
|
56
56
|
timeout: 0,
|
|
57
|
+
unmountOnExit: false,
|
|
57
58
|
classNames: `${prefixCls}_fade-slide`,
|
|
58
59
|
children: /* @__PURE__ */ jsxs("div", {
|
|
59
60
|
role: "alert",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message.js","names":[],"sources":["../../src/message/message.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport
|
|
1
|
+
{"version":3,"file":"message.js","names":["Transition"],"sources":["../../src/message/message.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport {\n CheckCircle,\n CloseCircle,\n InfoCircle,\n LoadingCircle,\n WarningCircle,\n} from '../_utils/components';\nimport { MessageProps } from './types';\n\nconst Message = (props: MessageProps): JSX.Element => {\n const {\n type,\n icon,\n content,\n duration,\n willUnmount,\n extra,\n className,\n style,\n prefixCls: customisedCls,\n } = props;\n const configContext = useContext(ConfigContext);\n const prefixCls = getPrefixCls('message', configContext.prefixCls, customisedCls);\n const cls = classNames(prefixCls, className);\n const ref = useRef<HTMLDivElement | null>(null);\n const [visible, setVisible] = useState(true);\n\n const renderIcon = (): React.ReactNode => {\n if (React.isValidElement(icon)) {\n return icon;\n } else if (typeof type === 'string') {\n switch (type) {\n case 'success':\n return <CheckCircle size={16} className={`${prefixCls}__icon`} />;\n case 'info':\n return <InfoCircle size={16} className={`${prefixCls}__icon`} />;\n case 'warning':\n return <WarningCircle size={16} className={`${prefixCls}__icon`} />;\n case 'error':\n return <CloseCircle size={16} className={`${prefixCls}__icon`} />;\n case 'loading':\n return (\n <LoadingCircle\n size={16}\n className={classNames(`${prefixCls}__icon`, {\n [`${prefixCls}__icon_loading`]: type === 'loading',\n })}\n />\n );\n }\n }\n\n return null;\n };\n\n useEffect(() => {\n const node = ref.current;\n const height = (node && node.offsetHeight) || 0;\n const timer = window.setTimeout(() => {\n setVisible(false);\n willUnmount(height);\n }, duration);\n\n return (): void => {\n window.clearTimeout(timer);\n };\n }, [duration, willUnmount]);\n\n return (\n <Transition nodeRef={ref} in={visible} appear={true} timeout={0} unmountOnExit={false} classNames={`${prefixCls}_fade-slide`}>\n <div role=\"alert\" className={cls} style={style} ref={ref}>\n {renderIcon()}\n <span className={`${prefixCls}__content`}>{content}</span>\n {extra && <div className={`${prefixCls}__extra`}>{extra}</div>}\n </div>\n </Transition>\n );\n};\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":";;;;;;;;AAcA,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,MACA,MACA,SACA,UACA,aACA,OACA,WACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAY,aAAa,WADT,WAAW,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,MAAM,WAAW,WAAW,UAAU;CAC5C,MAAM,MAAM,OAA8B,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,mBAAoC;AACxC,MAAI,MAAM,eAAe,KAAK,CAC5B,QAAO;WACE,OAAO,SAAS,SACzB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACnE,KAAK,OACH,QAAO,oBAAC,YAAD;IAAY,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GAClE,KAAK,UACH,QAAO,oBAAC,eAAD;IAAe,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACrE,KAAK,QACH,QAAO,oBAAC,aAAD;IAAa,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACnE,KAAK,UACH,QACE,oBAAC,eAAD;IACE,MAAM;IACN,WAAW,WAAW,GAAG,UAAU,SAAS,GACzC,GAAG,UAAU,kBAAkB,SAAS,WAC1C,CAAC;IACF,CAAA;;AAKV,SAAO;;AAGT,iBAAgB;EACd,MAAM,OAAO,IAAI;EACjB,MAAM,SAAU,QAAQ,KAAK,gBAAiB;EAC9C,MAAM,QAAQ,OAAO,iBAAiB;AACpC,cAAW,MAAM;AACjB,eAAY,OAAO;KAClB,SAAS;AAEZ,eAAmB;AACjB,UAAO,aAAa,MAAM;;IAE3B,CAAC,UAAU,YAAY,CAAC;AAE3B,QACE,oBAACA,oBAAD;EAAY,SAAS;EAAK,IAAI;EAAS,QAAQ;EAAM,SAAS;EAAG,eAAe;EAAO,YAAY,GAAG,UAAU;YAC9G,qBAAC,OAAD;GAAK,MAAK;GAAQ,WAAW;GAAY;GAAY;aAArD;IACG,YAAY;IACb,oBAAC,QAAD;KAAM,WAAW,GAAG,UAAU;eAAa;KAAe,CAAA;IACzD,SAAS,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW;KAAY,CAAA;IAC1D;;EACK,CAAA;;AAIjB,QAAQ,cAAc"}
|
package/es/modal/modal.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ConfigContext } from "../config-provider/config-context.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/general.js";
|
|
3
|
+
import transition_default from "../transition/index.js";
|
|
3
4
|
import Button from "../button/button.js";
|
|
4
5
|
import { useLocale } from "../_utils/use-locale.js";
|
|
5
6
|
import overlay_default from "../overlay/index.js";
|
|
@@ -7,7 +8,6 @@ import Flex from "../flex/flex.js";
|
|
|
7
8
|
import React, { useContext, useEffect, useId, useRef, useState } from "react";
|
|
8
9
|
import classNames from "classnames";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
import { CSSTransition } from "react-transition-group";
|
|
11
11
|
//#region src/modal/modal.tsx
|
|
12
12
|
const Modal = React.forwardRef((props, ref) => {
|
|
13
13
|
const locale = useLocale();
|
|
@@ -99,11 +99,12 @@ const Modal = React.forwardRef((props, ref) => {
|
|
|
99
99
|
width,
|
|
100
100
|
...style
|
|
101
101
|
},
|
|
102
|
-
children: /* @__PURE__ */ jsx(
|
|
102
|
+
children: /* @__PURE__ */ jsx(transition_default, {
|
|
103
103
|
appear: true,
|
|
104
104
|
nodeRef,
|
|
105
105
|
in: modalVisible,
|
|
106
106
|
classNames: `${prefixCls}__content_${animation}`,
|
|
107
|
+
unmountOnExit: false,
|
|
107
108
|
timeout: 0,
|
|
108
109
|
children: /* @__PURE__ */ jsxs("div", {
|
|
109
110
|
ref: nodeRef,
|
package/es/modal/modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","names":["Overlay"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport
|
|
1
|
+
{"version":3,"file":"modal.js","names":["Overlay","Transition"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport Overlay from '../overlay';\nimport Button from '../button/button';\nimport Flex from '../flex/flex';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useLocale } from '../_utils/use-locale';\nimport { ModalProps } from './types';\n\nconst Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {\n const locale = useLocale();\n const {\n visible = false,\n width = 520,\n centered = false,\n closable = true,\n unmountOnClose = true,\n maskType = 'default',\n maskClosable = true,\n confirmText = locale.Modal.okText,\n cancelText = locale.Modal.cancelText,\n confirmLoading = false,\n animation = 'slide',\n zIndex = 1000,\n onConfirm,\n onCancel: onCancelProp,\n onClose: onCloseProp,\n top,\n header,\n footer,\n afterClose,\n confirmButtonProps,\n cancelButtonProps,\n className,\n children,\n style,\n maskStyle,\n headerStyle,\n bodyStyle,\n footerStyle,\n prefixCls: customisedCls,\n } = props;\n const onCancel = onCloseProp ?? onCancelProp;\n const [modalVisible, setModalVisible] = useState(visible);\n const configContext = useContext(ConfigContext);\n const prefixCls = getPrefixCls('modal', configContext.prefixCls, customisedCls);\n const cls = classNames(prefixCls, className, { [`${prefixCls}_centered`]: centered });\n const nodeRef = useRef<HTMLDivElement>(null);\n const previousFocusRef = useRef<HTMLElement | null>(null);\n const titleId = useId();\n\n // Focus trap + Escape key\n useEffect(() => {\n if (!visible) return;\n previousFocusRef.current = document.activeElement as HTMLElement;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onCancel?.(e as unknown as React.MouseEvent);\n return;\n }\n if (e.key === 'Tab' && nodeRef.current) {\n const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable.length === 0) return;\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (e.shiftKey) {\n if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n } else {\n if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n }\n }\n };\n document.addEventListener('keydown', handleKeyDown);\n\n // Focus first focusable element\n requestAnimationFrame(() => {\n if (nodeRef.current) {\n const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable.length > 0) focusable[0].focus();\n }\n });\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n previousFocusRef.current?.focus();\n };\n }, [visible, onCancel]);\n\n const renderFooter = (): React.ReactNode => {\n if (React.isValidElement(footer)) {\n return footer;\n } else if (footer === null) {\n return null;\n } else {\n return (\n <Flex gap=\"sm\" justify='end' className={`${prefixCls}__footer`} style={footerStyle}>\n <Button onClick={onCancel} className={`${prefixCls}__footer-btn`} {...cancelButtonProps}>\n {cancelText}\n </Button>\n <Button\n loading={confirmLoading}\n onClick={onConfirm}\n btnType=\"primary\"\n className={`${prefixCls}__footer-btn`}\n {...confirmButtonProps}>\n {confirmText}\n </Button>\n </Flex>\n );\n }\n };\n\n return (\n <Overlay\n onEnter={(): void => setModalVisible(true)}\n onExit={(): void => setModalVisible(false)}\n zIndex={zIndex}\n type={maskType}\n unmountOnExit={unmountOnClose}\n isShow={visible}\n onExited={afterClose}\n clickCallback={(e: React.MouseEvent): void => {\n maskClosable && onCancel ? onCancel(e) : undefined;\n }}\n style={maskStyle}>\n <div ref={ref} className={cls} style={{ top }}>\n <div style={{ width, ...style }}>\n <Transition\n appear={true}\n nodeRef={nodeRef}\n in={modalVisible}\n classNames={`${prefixCls}__content_${animation}`}\n unmountOnExit={false}\n timeout={0}>\n <div\n ref={nodeRef}\n className={`${prefixCls}__content`}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={header ? titleId : undefined}\n onClick={(e): void => e.stopPropagation()}>\n {closable && (\n <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={onCancel} aria-label=\"Close\">\n ✕\n </button>\n )}\n {header && (\n <div className={`${prefixCls}__header`} style={headerStyle}>\n <div className={`${prefixCls}__title`} id={titleId}>{header}</div>\n </div>\n )}\n <div className={`${prefixCls}__body`} style={bodyStyle}>\n {children}\n </div>\n {renderFooter()}\n </div>\n </Transition>\n </div>\n </div>\n </Overlay>\n );\n});\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
|
package/es/overlay/overlay.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ConfigContext } from "../config-provider/config-context.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/general.js";
|
|
3
|
+
import transition_default from "../transition/index.js";
|
|
3
4
|
import portal_default from "../portal/index.js";
|
|
4
5
|
import { useContext, useEffect, useRef } from "react";
|
|
5
6
|
import classNames from "classnames";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import { CSSTransition } from "react-transition-group";
|
|
8
8
|
//#region src/overlay/overlay.tsx
|
|
9
9
|
let scrollLockCount = 0;
|
|
10
10
|
const Overlay = (props) => {
|
|
@@ -27,7 +27,7 @@ const Overlay = (props) => {
|
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
}, [isShow]);
|
|
30
|
-
return /* @__PURE__ */ jsx(portal_default, { children: /* @__PURE__ */ jsx(
|
|
30
|
+
return /* @__PURE__ */ jsx(portal_default, { children: /* @__PURE__ */ jsx(transition_default, {
|
|
31
31
|
appear: true,
|
|
32
32
|
nodeRef,
|
|
33
33
|
onEnter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","names":["Portal"],"sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport Portal from '../portal';\nimport
|
|
1
|
+
{"version":3,"file":"overlay.js","names":["Portal","Transition"],"sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport Portal from '../portal';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { OverlayProps } from './types';\n\nlet scrollLockCount = 0;\n\nconst Overlay = (props: OverlayProps): JSX.Element => {\n const {\n isShow = false,\n blurred = false,\n unmountOnExit = true,\n zIndex = 1000,\n type = 'default',\n clickCallback,\n onEnter,\n onEntered,\n onExit,\n onExited,\n children,\n style,\n prefixCls: customisedCls,\n } = props;\n const configContext = useContext(ConfigContext);\n const prefixCls = getPrefixCls('overlay', configContext.prefixCls, customisedCls);\n const cls = classNames(prefixCls, `${prefixCls}_${type}`, { [`${prefixCls}_blurred`]: blurred });\n const nodeRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (isShow) {\n scrollLockCount++;\n document.body.style.overflow = 'hidden';\n }\n return () => {\n if (isShow) {\n scrollLockCount--;\n if (scrollLockCount <= 0) {\n scrollLockCount = 0;\n document.body.style.overflow = '';\n }\n }\n };\n }, [isShow]);\n\n return (\n <Portal>\n <Transition\n appear={true}\n nodeRef={nodeRef}\n onEnter={onEnter}\n onEntered={onEntered}\n onExit={onExit}\n onExited={onExited}\n in={isShow}\n mountOnEnter={true}\n unmountOnExit={unmountOnExit}\n classNames={`${prefixCls}_fade`}\n timeout={{ exit: 300, enter: 0 }}>\n <div ref={nodeRef} tabIndex={-1} className={cls} onClick={clickCallback} style={{ zIndex, ...style }}>\n {children}\n </div>\n </Transition>\n </Portal>\n );\n};\n\nOverlay.displayName = 'Overlay';\n\nexport default Overlay;\n"],"mappings":";;;;;;;;AAQA,IAAI,kBAAkB;AAEtB,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,SAAS,OACT,UAAU,OACV,gBAAgB,MAChB,SAAS,KACT,OAAO,WACP,eACA,SACA,WACA,QACA,UACA,UACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAY,aAAa,WADT,WAAW,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,MAAM,WAAW,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,GAAG,UAAU,YAAY,SAAS,CAAC;CAChG,MAAM,UAAU,OAAuB,KAAK;AAE5C,iBAAgB;AACd,MAAI,QAAQ;AACV;AACA,YAAS,KAAK,MAAM,WAAW;;AAEjC,eAAa;AACX,OAAI,QAAQ;AACV;AACA,QAAI,mBAAmB,GAAG;AACxB,uBAAkB;AAClB,cAAS,KAAK,MAAM,WAAW;;;;IAIpC,CAAC,OAAO,CAAC;AAEZ,QACE,oBAACA,gBAAD,EAAA,UACE,oBAACC,oBAAD;EACE,QAAQ;EACC;EACA;EACE;EACH;EACE;EACV,IAAI;EACJ,cAAc;EACC;EACf,YAAY,GAAG,UAAU;EACzB,SAAS;GAAE,MAAM;GAAK,OAAO;GAAG;YAChC,oBAAC,OAAD;GAAK,KAAK;GAAS,UAAU;GAAI,WAAW;GAAK,SAAS;GAAe,OAAO;IAAE;IAAQ,GAAG;IAAO;GACjG;GACG,CAAA;EACK,CAAA,EACN,CAAA;;AAIb,QAAQ,cAAc"}
|
|
@@ -5,21 +5,13 @@
|
|
|
5
5
|
box-sizing: border-box;
|
|
6
6
|
cursor: pointer;
|
|
7
7
|
|
|
8
|
-
&_horizontal.#{$prefix}-slider {
|
|
9
|
-
margin-bottom: $slider-margin-bottom-with-marks;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&_vertical.#{$prefix}-slider {
|
|
13
|
-
margin-right: $slider-margin-bottom-with-marks;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
8
|
&_horizontal {
|
|
9
|
+
width: 100%;
|
|
17
10
|
min-height: $slider-size;
|
|
18
11
|
margin: 13px 7px;
|
|
19
12
|
padding: 4px 0;
|
|
20
13
|
|
|
21
14
|
.#{$prefix}-slider {
|
|
22
|
-
|
|
23
15
|
&__rail {
|
|
24
16
|
width: 100%;
|
|
25
17
|
height: $slider-track-size;
|
|
@@ -3,13 +3,8 @@
|
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
cursor: pointer;
|
|
5
5
|
}
|
|
6
|
-
.ty-slider_horizontal.ty-slider {
|
|
7
|
-
margin-bottom: 30px;
|
|
8
|
-
}
|
|
9
|
-
.ty-slider_vertical.ty-slider {
|
|
10
|
-
margin-right: 30px;
|
|
11
|
-
}
|
|
12
6
|
.ty-slider_horizontal {
|
|
7
|
+
width: 100%;
|
|
13
8
|
min-height: 12px;
|
|
14
9
|
margin: 13px 7px;
|
|
15
10
|
padding: 4px 0;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use "../../style/variables" as *;
|
|
2
|
-
@use "sass:color";
|
|
3
2
|
|
|
4
3
|
$speed-dial-fab-size: 56px;
|
|
5
4
|
$speed-dial-action-size: 40px;
|
|
@@ -18,8 +17,8 @@ $speed-dial-actions-gap: 16px;
|
|
|
18
17
|
height: $speed-dial-fab-size;
|
|
19
18
|
border-radius: 50%;
|
|
20
19
|
border: none;
|
|
21
|
-
background-color: var(--ty-speed-dial-bg,
|
|
22
|
-
color: var(--ty-speed-dial-color, #
|
|
20
|
+
background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
|
|
21
|
+
color: var(--ty-speed-dial-color, #fff);
|
|
23
22
|
font-size: 24px;
|
|
24
23
|
cursor: pointer;
|
|
25
24
|
box-shadow: $box-shadow;
|
|
@@ -27,11 +26,11 @@ $speed-dial-actions-gap: 16px;
|
|
|
27
26
|
outline: none;
|
|
28
27
|
|
|
29
28
|
&:hover:not(.#{$prefix}-speed-dial__button_disabled) {
|
|
30
|
-
background-color: var(--ty-speed-dial-bg-hover,
|
|
29
|
+
background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
&:focus-visible {
|
|
34
|
-
box-shadow: 0 0 0 3px
|
|
33
|
+
box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow;
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
&_open {
|
|
@@ -59,7 +58,7 @@ $speed-dial-actions-gap: 16px;
|
|
|
59
58
|
position: absolute;
|
|
60
59
|
top: 50%;
|
|
61
60
|
left: 50%;
|
|
62
|
-
background-color:
|
|
61
|
+
background-color: currentcolor;
|
|
63
62
|
border-radius: 1px;
|
|
64
63
|
translate: -50% -50%;
|
|
65
64
|
}
|
|
@@ -183,7 +182,7 @@ $speed-dial-actions-gap: 16px;
|
|
|
183
182
|
}
|
|
184
183
|
|
|
185
184
|
&:focus-visible {
|
|
186
|
-
box-shadow: 0 0 0 3px
|
|
185
|
+
box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow-sm;
|
|
187
186
|
}
|
|
188
187
|
|
|
189
188
|
&_disabled {
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
height: 56px;
|
|
11
11
|
border-radius: 50%;
|
|
12
12
|
border: none;
|
|
13
|
-
background-color: var(--ty-speed-dial-bg,
|
|
13
|
+
background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
|
|
14
14
|
color: var(--ty-speed-dial-color, #fff);
|
|
15
15
|
font-size: 24px;
|
|
16
16
|
cursor: pointer;
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
outline: none;
|
|
20
20
|
}
|
|
21
21
|
.ty-speed-dial__button:hover:not(.ty-speed-dial__button_disabled) {
|
|
22
|
-
background-color: var(--ty-speed-dial-bg-hover,
|
|
22
|
+
background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
|
|
23
23
|
}
|
|
24
24
|
.ty-speed-dial__button:focus-visible {
|
|
25
|
-
box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.
|
|
25
|
+
box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
26
26
|
}
|
|
27
27
|
.ty-speed-dial__button_open .ty-speed-dial__icon-default {
|
|
28
28
|
transform: rotate(45deg);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
position: absolute;
|
|
44
44
|
top: 50%;
|
|
45
45
|
left: 50%;
|
|
46
|
-
background-color:
|
|
46
|
+
background-color: currentcolor;
|
|
47
47
|
border-radius: 1px;
|
|
48
48
|
translate: -50% -50%;
|
|
49
49
|
}
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
146
146
|
}
|
|
147
147
|
.ty-speed-dial__action:focus-visible {
|
|
148
|
-
box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.
|
|
148
|
+
box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
149
149
|
}
|
|
150
150
|
.ty-speed-dial__action_disabled {
|
|
151
151
|
opacity: 0.5;
|
package/es/style/base.css
CHANGED
|
@@ -27,19 +27,26 @@
|
|
|
27
27
|
--ty-color-fill-secondary: #f5f5f5;
|
|
28
28
|
--ty-color-fill-tertiary: #f0f0f0;
|
|
29
29
|
--ty-color-success: #52c41a;
|
|
30
|
+
--ty-color-success-hover: #73d13d;
|
|
31
|
+
--ty-color-success-active: #389e0d;
|
|
30
32
|
--ty-color-success-bg: #f6ffed;
|
|
31
33
|
--ty-color-success-border: #b7eb8f;
|
|
32
34
|
--ty-color-success-text: #49b10e;
|
|
33
35
|
--ty-color-warning: #ff9800;
|
|
36
|
+
--ty-color-warning-hover: #ffad33;
|
|
37
|
+
--ty-color-warning-active: #e68a00;
|
|
34
38
|
--ty-color-warning-bg: #fffbe6;
|
|
35
39
|
--ty-color-warning-border: #ffe58f;
|
|
36
40
|
--ty-color-warning-text: #d48806;
|
|
37
41
|
--ty-color-danger: #f44336;
|
|
42
|
+
--ty-color-danger-hover: #ff7875;
|
|
43
|
+
--ty-color-danger-active: #cf1322;
|
|
38
44
|
--ty-color-danger-bg: #fff1f0;
|
|
39
45
|
--ty-color-danger-border: #ffa39e;
|
|
40
46
|
--ty-color-danger-text: #cf1322;
|
|
41
|
-
--ty-color-danger-hover: #ff7875;
|
|
42
47
|
--ty-color-info: #1890ff;
|
|
48
|
+
--ty-color-info-hover: #40a9ff;
|
|
49
|
+
--ty-color-info-active: #096dd9;
|
|
43
50
|
--ty-color-info-bg: #e6f7ff;
|
|
44
51
|
--ty-color-info-border: #91d5ff;
|
|
45
52
|
--ty-color-info-text: #096dd9;
|
|
@@ -294,19 +301,26 @@ html[data-tiny-theme=dark] {
|
|
|
294
301
|
--ty-color-fill-secondary: #2a2a2a;
|
|
295
302
|
--ty-color-fill-tertiary: #303030;
|
|
296
303
|
--ty-color-success: #49aa19;
|
|
304
|
+
--ty-color-success-hover: #6abe39;
|
|
305
|
+
--ty-color-success-active: #3c8c14;
|
|
297
306
|
--ty-color-success-bg: #162312;
|
|
298
307
|
--ty-color-success-border: #274916;
|
|
299
308
|
--ty-color-success-text: #6abe39;
|
|
300
309
|
--ty-color-warning: #d89614;
|
|
310
|
+
--ty-color-warning-hover: #e8b339;
|
|
311
|
+
--ty-color-warning-active: #b37a10;
|
|
301
312
|
--ty-color-warning-bg: #2b2111;
|
|
302
313
|
--ty-color-warning-border: #594214;
|
|
303
314
|
--ty-color-warning-text: #e8b339;
|
|
304
315
|
--ty-color-danger: #d32029;
|
|
316
|
+
--ty-color-danger-hover: #e84749;
|
|
317
|
+
--ty-color-danger-active: #ab1a20;
|
|
305
318
|
--ty-color-danger-bg: #2a1215;
|
|
306
319
|
--ty-color-danger-border: #58181c;
|
|
307
320
|
--ty-color-danger-text: #e84749;
|
|
308
|
-
--ty-color-danger-hover: #e84749;
|
|
309
321
|
--ty-color-info: #177ddc;
|
|
322
|
+
--ty-color-info-hover: #3c9ae8;
|
|
323
|
+
--ty-color-info-active: #1268b3;
|
|
310
324
|
--ty-color-info-bg: #111d2c;
|
|
311
325
|
--ty-color-info-border: #15395b;
|
|
312
326
|
--ty-color-info-text: #3c9ae8;
|
|
@@ -562,19 +576,26 @@ html[data-tiny-theme=dark] {
|
|
|
562
576
|
--ty-color-fill-secondary: #2a2a2a;
|
|
563
577
|
--ty-color-fill-tertiary: #303030;
|
|
564
578
|
--ty-color-success: #49aa19;
|
|
579
|
+
--ty-color-success-hover: #6abe39;
|
|
580
|
+
--ty-color-success-active: #3c8c14;
|
|
565
581
|
--ty-color-success-bg: #162312;
|
|
566
582
|
--ty-color-success-border: #274916;
|
|
567
583
|
--ty-color-success-text: #6abe39;
|
|
568
584
|
--ty-color-warning: #d89614;
|
|
585
|
+
--ty-color-warning-hover: #e8b339;
|
|
586
|
+
--ty-color-warning-active: #b37a10;
|
|
569
587
|
--ty-color-warning-bg: #2b2111;
|
|
570
588
|
--ty-color-warning-border: #594214;
|
|
571
589
|
--ty-color-warning-text: #e8b339;
|
|
572
590
|
--ty-color-danger: #d32029;
|
|
591
|
+
--ty-color-danger-hover: #e84749;
|
|
592
|
+
--ty-color-danger-active: #ab1a20;
|
|
573
593
|
--ty-color-danger-bg: #2a1215;
|
|
574
594
|
--ty-color-danger-border: #58181c;
|
|
575
595
|
--ty-color-danger-text: #e84749;
|
|
576
|
-
--ty-color-danger-hover: #e84749;
|
|
577
596
|
--ty-color-info: #177ddc;
|
|
597
|
+
--ty-color-info-hover: #3c9ae8;
|
|
598
|
+
--ty-color-info-active: #1268b3;
|
|
578
599
|
--ty-color-info-bg: #111d2c;
|
|
579
600
|
--ty-color-info-border: #15395b;
|
|
580
601
|
--ty-color-info-text: #3c9ae8;
|
package/es/tag/style/_index.scss
CHANGED
|
@@ -102,6 +102,30 @@
|
|
|
102
102
|
background: var(--ty-tag-purple-bg);
|
|
103
103
|
border-color: var(--ty-tag-purple-border);
|
|
104
104
|
}
|
|
105
|
+
|
|
106
|
+
&_success {
|
|
107
|
+
color: var(--ty-color-success);
|
|
108
|
+
background: var(--ty-color-success-bg);
|
|
109
|
+
border-color: var(--ty-color-success-border);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&_info {
|
|
113
|
+
color: var(--ty-color-info);
|
|
114
|
+
background: var(--ty-color-info-bg);
|
|
115
|
+
border-color: var(--ty-color-info-border);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&_warning {
|
|
119
|
+
color: var(--ty-color-warning);
|
|
120
|
+
background: var(--ty-color-warning-bg);
|
|
121
|
+
border-color: var(--ty-color-warning-border);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&_danger {
|
|
125
|
+
color: var(--ty-color-danger);
|
|
126
|
+
background: var(--ty-color-danger-bg);
|
|
127
|
+
border-color: var(--ty-color-danger-border);
|
|
128
|
+
}
|
|
105
129
|
}
|
|
106
130
|
|
|
107
131
|
.#{$prefix}-checkable-tag {
|