@stackflow/plugin-basic-ui 1.2.3 → 1.3.1-alpha.6
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/dist/basicUIPlugin.css.d.ts +4 -0
- package/dist/components/AppBar.css.d.ts +1 -1
- package/dist/components/AppBar.d.ts +5 -1
- package/dist/components/AppScreen.css.d.ts +1 -1
- package/dist/index.css +41 -16
- package/dist/index.css.map +3 -3
- package/dist/index.js +9 -1
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +9 -1
- package/dist/index.mjs.map +2 -2
- package/package.json +2 -2
- package/src/basicUIPlugin.css.ts +12 -3
- package/src/components/AppBar.css.ts +45 -8
- package/src/components/AppBar.tsx +16 -0
- package/src/components/AppScreen.css.ts +1 -0
|
@@ -15,13 +15,17 @@ type AppBarProps = Partial<
|
|
|
15
15
|
Pick<
|
|
16
16
|
GlobalVars["appBar"],
|
|
17
17
|
| "borderColor"
|
|
18
|
+
| "borderColorTransitionDuration"
|
|
18
19
|
| "borderSize"
|
|
19
20
|
| "height"
|
|
20
21
|
| "heightTransitionDuration"
|
|
21
22
|
| "overflow"
|
|
22
23
|
| "iconColor"
|
|
24
|
+
| "iconColorTransitionDuration"
|
|
23
25
|
| "textColor"
|
|
26
|
+
| "textColorTransitionDuration"
|
|
24
27
|
| "backgroundColor"
|
|
28
|
+
| "backgroundColorTransitionDuration"
|
|
25
29
|
>
|
|
26
30
|
> & {
|
|
27
31
|
title?: React.ReactNode;
|
|
@@ -62,13 +66,17 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
|
|
|
62
66
|
border = true,
|
|
63
67
|
modalPresentationStyle,
|
|
64
68
|
iconColor,
|
|
69
|
+
iconColorTransitionDuration,
|
|
65
70
|
textColor,
|
|
71
|
+
textColorTransitionDuration,
|
|
66
72
|
borderColor,
|
|
73
|
+
borderColorTransitionDuration,
|
|
67
74
|
borderSize,
|
|
68
75
|
height,
|
|
69
76
|
heightTransitionDuration,
|
|
70
77
|
overflow,
|
|
71
78
|
backgroundColor,
|
|
79
|
+
backgroundColorTransitionDuration,
|
|
72
80
|
onTopClick,
|
|
73
81
|
},
|
|
74
82
|
ref,
|
|
@@ -265,8 +273,14 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
|
|
|
265
273
|
style={assignInlineVars(
|
|
266
274
|
compactMap({
|
|
267
275
|
[globalVars.appBar.iconColor]: iconColor,
|
|
276
|
+
[globalVars.appBar.iconColorTransitionDuration]:
|
|
277
|
+
iconColorTransitionDuration,
|
|
268
278
|
[globalVars.appBar.textColor]: textColor,
|
|
279
|
+
[globalVars.appBar.textColorTransitionDuration]:
|
|
280
|
+
textColorTransitionDuration,
|
|
269
281
|
[globalVars.appBar.borderColor]: borderColor,
|
|
282
|
+
[globalVars.appBar.borderColorTransitionDuration]:
|
|
283
|
+
borderColorTransitionDuration,
|
|
270
284
|
[globalVars.appBar.borderSize]: borderSize,
|
|
271
285
|
[globalVars.appBar.height]: height,
|
|
272
286
|
[globalVars.appBar.heightTransitionDuration]:
|
|
@@ -274,6 +288,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
|
|
|
274
288
|
[globalVars.appBar.overflow]: overflow,
|
|
275
289
|
[globalVars.appBar.backgroundColor]:
|
|
276
290
|
backgroundColor || globalVars.backgroundColor,
|
|
291
|
+
[globalVars.appBar.backgroundColorTransitionDuration]:
|
|
292
|
+
backgroundColorTransitionDuration,
|
|
277
293
|
[appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,
|
|
278
294
|
}),
|
|
279
295
|
)}
|
|
@@ -123,6 +123,7 @@ export const paper = recipe({
|
|
|
123
123
|
{
|
|
124
124
|
transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, padding-top ${globalVars.appBar.heightTransitionDuration}`,
|
|
125
125
|
paddingTop: [
|
|
126
|
+
globalVars.appBar.height,
|
|
126
127
|
`calc(${globalVars.appBar.height} + constant(safe-area-inset-top))`,
|
|
127
128
|
`calc(${globalVars.appBar.height} + env(safe-area-inset-top))`,
|
|
128
129
|
],
|