jbx 1.7.2 → 1.7.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/index.js +21 -6
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -35,7 +35,6 @@ export const JBX = createGlobalStyle`
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
body {
|
|
38
|
-
touch-action: manipulation;
|
|
39
38
|
touch-action: pan-y;
|
|
40
39
|
}
|
|
41
40
|
|
|
@@ -199,7 +198,7 @@ export const HeaderH1 = Styled.h1({
|
|
|
199
198
|
})
|
|
200
199
|
});
|
|
201
200
|
|
|
202
|
-
export const MainHeader = function MainHeader({ children }) {
|
|
201
|
+
export const MainHeader = function MainHeader({ children, style }) {
|
|
203
202
|
const content = String(children).split(' ');
|
|
204
203
|
|
|
205
204
|
return React.createElement(
|
|
@@ -216,7 +215,8 @@ export const MainHeader = function MainHeader({ children }) {
|
|
|
216
215
|
width: 'auto',
|
|
217
216
|
padding: '6px',
|
|
218
217
|
margin: 0,
|
|
219
|
-
backgroundColor: 'var(--accent-color)'
|
|
218
|
+
backgroundColor: 'var(--accent-color)',
|
|
219
|
+
...style
|
|
220
220
|
}
|
|
221
221
|
},
|
|
222
222
|
word
|
|
@@ -262,12 +262,27 @@ export const Box = Styled.div({
|
|
|
262
262
|
});
|
|
263
263
|
|
|
264
264
|
export const Inline = Styled.div({
|
|
265
|
+
flex: 1,
|
|
266
|
+
display: 'flex',
|
|
267
|
+
flexWrap: 'wrap',
|
|
268
|
+
flexDirection: `row`,
|
|
269
|
+
marginLeft: ({ h }) => `${h * SPACE}px`,
|
|
270
|
+
marginRight: ({ h }) => `${h * SPACE}px`,
|
|
271
|
+
marginTop: ({ v }) => `${v * SPACE}px`,
|
|
272
|
+
marginBottom: ({ v }) => `${v * SPACE}px`,
|
|
273
|
+
gap: ({ gap }) => `${gap * SPACE}px`
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
export const Stack = Styled.div({
|
|
277
|
+
flex: 1,
|
|
265
278
|
display: 'flex',
|
|
266
279
|
flexWrap: 'wrap',
|
|
280
|
+
flexDirection: `column`,
|
|
267
281
|
marginLeft: ({ h }) => `${h * SPACE}px`,
|
|
268
282
|
marginRight: ({ h }) => `${h * SPACE}px`,
|
|
269
283
|
marginTop: ({ v }) => `${v * SPACE}px`,
|
|
270
|
-
marginBottom: ({ v }) => `${v * SPACE}px
|
|
284
|
+
marginBottom: ({ v }) => `${v * SPACE}px`,
|
|
285
|
+
gap: ({ gap }) => `${gap * SPACE}px`
|
|
271
286
|
});
|
|
272
287
|
|
|
273
288
|
export const LinkButton = Styled.a({
|
|
@@ -397,8 +412,8 @@ export const Checkbox = function Checkbox({ label, checked, onChange }) {
|
|
|
397
412
|
'svg',
|
|
398
413
|
{
|
|
399
414
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
400
|
-
width:
|
|
401
|
-
height:
|
|
415
|
+
width: BASE_SIZE * 2 - 8,
|
|
416
|
+
height: BASE_SIZE * 2 - 8,
|
|
402
417
|
fill: 'none',
|
|
403
418
|
stroke: 'currentColor',
|
|
404
419
|
strokeLinecap: 'round',
|