@yakad/ui 1.2.76-beta → 1.2.77-beta
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/appBar/appBar.d.ts +3 -3
- package/appBar/appBar.js +8 -8
- package/appBar/appBar.module.css +15 -15
- package/appBar/appBar.tsx +15 -15
- package/button/button.d.ts +13 -13
- package/button/button.js +27 -27
- package/button/button.module.css +170 -170
- package/button/button.tsx +87 -87
- package/card/card.d.ts +3 -3
- package/card/card.js +8 -8
- package/card/card.module.css +11 -11
- package/card/card.tsx +15 -15
- package/clickAwayListener/clickAwayListener.d.ts +6 -6
- package/clickAwayListener/clickAwayListener.js +16 -16
- package/clickAwayListener/clickAwayListener.tsx +27 -27
- package/codeField/codeField.d.ts +8 -8
- package/codeField/codeField.js +9 -9
- package/codeField/codeField.module.css +23 -23
- package/codeField/codeField.tsx +32 -32
- package/container/container.d.ts +8 -8
- package/container/container.js +8 -8
- package/container/container.module.css +24 -24
- package/container/container.tsx +27 -27
- package/declarations.d.ts +1 -1
- package/footer/footer.d.ts +3 -3
- package/footer/footer.js +8 -8
- package/footer/footer.module.css +9 -9
- package/footer/footer.tsx +15 -15
- package/form/form.d.ts +3 -3
- package/form/form.js +11 -11
- package/form/form.module.css +6 -6
- package/form/form.tsx +23 -23
- package/gridContainer/gridContainer.d.ts +7 -7
- package/gridContainer/gridContainer.js +10 -10
- package/gridContainer/gridContainer.module.css +6 -5
- package/gridContainer/gridContainer.tsx +28 -28
- package/gridItem/gridItem.d.ts +10 -10
- package/gridItem/gridItem.js +9 -9
- package/gridItem/gridItem.module.css +192 -192
- package/gridItem/gridItem.tsx +31 -31
- package/hr/hr.d.ts +8 -8
- package/hr/hr.js +11 -11
- package/hr/hr.module.css +19 -19
- package/hr/hr.tsx +32 -32
- package/index.d.ts +24 -24
- package/index.js +24 -24
- package/index.tsx +48 -48
- package/inputField/inputField.d.ts +12 -12
- package/inputField/inputField.js +10 -10
- package/inputField/inputField.module.css +167 -167
- package/inputField/inputField.tsx +38 -38
- package/list/list.d.ts +7 -7
- package/list/list.js +8 -8
- package/list/list.module.css +22 -22
- package/list/list.tsx +25 -25
- package/listItem/listItem.d.ts +3 -3
- package/listItem/listItem.js +6 -6
- package/listItem/listItem.module.css +6 -6
- package/listItem/listItem.tsx +12 -12
- package/loading/loading.d.ts +7 -7
- package/loading/loading.js +9 -9
- package/loading/loading.module.css +91 -91
- package/loading/loading.tsx +25 -25
- package/main/main.d.ts +6 -6
- package/main/main.js +9 -9
- package/main/main.module.css +19 -19
- package/main/main.tsx +25 -25
- package/navigation/navigation.d.ts +7 -7
- package/navigation/navigation.js +8 -8
- package/navigation/navigation.module.css +61 -61
- package/navigation/navigation.tsx +24 -24
- package/package.json +31 -31
- package/page/page.d.ts +3 -3
- package/page/page.js +8 -8
- package/page/page.module.css +10 -10
- package/page/page.tsx +15 -15
- package/row/row.d.ts +3 -3
- package/row/row.js +8 -8
- package/row/row.module.css +7 -7
- package/row/row.tsx +15 -15
- package/spacer/spacer.d.ts +3 -3
- package/spacer/spacer.js +6 -6
- package/spacer/spacer.module.css +5 -5
- package/spacer/spacer.tsx +8 -8
- package/stack/stack.d.ts +3 -3
- package/stack/stack.js +8 -8
- package/stack/stack.module.css +6 -6
- package/stack/stack.tsx +15 -15
- package/svgIcon/svgIcon.d.ts +6 -6
- package/svgIcon/svgIcon.js +11 -11
- package/svgIcon/svgIcon.module.css +5 -5
- package/svgIcon/svgIcon.tsx +26 -26
- package/theme/theme.d.ts +9 -9
- package/theme/theme.js +11 -11
- package/theme/theme.module.css +397 -397
- package/theme/theme.tsx +29 -29
- package/theme/zoom.css +3 -3
- package/tsconfig.json +13 -13
package/list/list.module.css
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
.list {
|
|
2
|
-
display: flex;
|
|
3
|
-
list-style-type: none;
|
|
4
|
-
max-height: 100rem;
|
|
5
|
-
padding: 0;
|
|
6
|
-
transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.row {
|
|
10
|
-
flex-direction: row;
|
|
11
|
-
}
|
|
12
|
-
.column {
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
align-items: stretch;
|
|
15
|
-
width: 100%;
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.collapsed {
|
|
20
|
-
max-height: 0;
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
}
|
|
1
|
+
.list {
|
|
2
|
+
display: flex;
|
|
3
|
+
list-style-type: none;
|
|
4
|
+
max-height: 100rem;
|
|
5
|
+
padding: 0;
|
|
6
|
+
transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.row {
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
}
|
|
12
|
+
.column {
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
align-items: stretch;
|
|
15
|
+
width: 100%;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.collapsed {
|
|
20
|
+
max-height: 0;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
}
|
package/list/list.tsx
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames } from "@yakad/lib";
|
|
3
|
-
import styles from "./list.module.css";
|
|
4
|
-
|
|
5
|
-
interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
|
|
6
|
-
direction?: "row" | "column";
|
|
7
|
-
collapsed?: boolean;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function List(props: ListProps) {
|
|
11
|
-
const joinedClassNames = joinClassNames(
|
|
12
|
-
styles.list,
|
|
13
|
-
props.direction ? styles[props.direction] : styles.row,
|
|
14
|
-
props.collapsed ? styles.collapsed : "",
|
|
15
|
-
props.className!
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<ul {...props} className={joinedClassNames}>
|
|
20
|
-
{props.children}
|
|
21
|
-
</ul>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export default List;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames } from "@yakad/lib";
|
|
3
|
+
import styles from "./list.module.css";
|
|
4
|
+
|
|
5
|
+
interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
|
|
6
|
+
direction?: "row" | "column";
|
|
7
|
+
collapsed?: boolean;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function List(props: ListProps) {
|
|
11
|
+
const joinedClassNames = joinClassNames(
|
|
12
|
+
styles.list,
|
|
13
|
+
props.direction ? styles[props.direction] : styles.row,
|
|
14
|
+
props.collapsed ? styles.collapsed : "",
|
|
15
|
+
props.className!
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<ul {...props} className={joinedClassNames}>
|
|
20
|
+
{props.children}
|
|
21
|
+
</ul>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default List;
|
package/listItem/listItem.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
declare function ListItem(props: React.HTMLAttributes<HTMLLIElement>): JSX.Element;
|
|
3
|
-
export default ListItem;
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare function ListItem(props: React.HTMLAttributes<HTMLLIElement>): JSX.Element;
|
|
3
|
+
export default ListItem;
|
package/listItem/listItem.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from "./listItem.module.css";
|
|
3
|
-
function ListItem(props) {
|
|
4
|
-
return (React.createElement("li", { className: styles.listItem, ...props }, props.children));
|
|
5
|
-
}
|
|
6
|
-
export default ListItem;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styles from "./listItem.module.css";
|
|
3
|
+
function ListItem(props) {
|
|
4
|
+
return (React.createElement("li", { className: styles.listItem, ...props }, props.children));
|
|
5
|
+
}
|
|
6
|
+
export default ListItem;
|
|
7
7
|
//# sourceMappingURL=listItem.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.listItem {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
align-items: stretch;
|
|
5
|
-
box-sizing: border-box;
|
|
6
|
-
}
|
|
1
|
+
.listItem {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: stretch;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
package/listItem/listItem.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from "./listItem.module.css";
|
|
3
|
-
|
|
4
|
-
function ListItem(props: React.HTMLAttributes<HTMLLIElement>) {
|
|
5
|
-
return (
|
|
6
|
-
<li className={styles.listItem} {...props}>
|
|
7
|
-
{props.children}
|
|
8
|
-
</li>
|
|
9
|
-
);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export default ListItem;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styles from "./listItem.module.css";
|
|
3
|
+
|
|
4
|
+
function ListItem(props: React.HTMLAttributes<HTMLLIElement>) {
|
|
5
|
+
return (
|
|
6
|
+
<li className={styles.listItem} {...props}>
|
|
7
|
+
{props.children}
|
|
8
|
+
</li>
|
|
9
|
+
);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default ListItem;
|
package/loading/loading.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
3
|
-
size?: "small" | "medium" | "large";
|
|
4
|
-
variant?: "scaleOut" | "dots" | "spinner";
|
|
5
|
-
}
|
|
6
|
-
declare function Loading(props: LoadingProps): JSX.Element;
|
|
7
|
-
export default Loading;
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
size?: "small" | "medium" | "large";
|
|
4
|
+
variant?: "scaleOut" | "dots" | "spinner";
|
|
5
|
+
}
|
|
6
|
+
declare function Loading(props: LoadingProps): JSX.Element;
|
|
7
|
+
export default Loading;
|
package/loading/loading.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from "./loading.module.css";
|
|
3
|
-
import { joinClassNames } from "@yakad/lib";
|
|
4
|
-
function Loading(props) {
|
|
5
|
-
const joinedClassNames = joinClassNames(styles.loading, props.size ? styles[props.size] : styles.medium, props.variant ? styles[props.variant] : styles.spinner, props.className);
|
|
6
|
-
return (React.createElement("div", { className: joinedClassNames },
|
|
7
|
-
React.createElement("div", null)));
|
|
8
|
-
}
|
|
9
|
-
export default Loading;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styles from "./loading.module.css";
|
|
3
|
+
import { joinClassNames } from "@yakad/lib";
|
|
4
|
+
function Loading(props) {
|
|
5
|
+
const joinedClassNames = joinClassNames(styles.loading, props.size ? styles[props.size] : styles.medium, props.variant ? styles[props.variant] : styles.spinner, props.className);
|
|
6
|
+
return (React.createElement("div", { className: joinedClassNames },
|
|
7
|
+
React.createElement("div", null)));
|
|
8
|
+
}
|
|
9
|
+
export default Loading;
|
|
10
10
|
//# sourceMappingURL=loading.js.map
|
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
.small {
|
|
2
|
-
--size: 2rem;
|
|
3
|
-
}
|
|
4
|
-
.medium {
|
|
5
|
-
--size: 2.4rem;
|
|
6
|
-
}
|
|
7
|
-
.large {
|
|
8
|
-
--size: 3rem;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.loading {
|
|
12
|
-
display: flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
width: var(--size);
|
|
16
|
-
height: var(--size);
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
--color: #7d7d7d;
|
|
19
|
-
}
|
|
20
|
-
.spinner div {
|
|
21
|
-
display: flex;
|
|
22
|
-
width: 75%;
|
|
23
|
-
height: 75%;
|
|
24
|
-
--spinner-border: calc(var(--size) / 8);
|
|
25
|
-
border-top: var(--spinner-border) solid var(--color);
|
|
26
|
-
border-right: var(--spinner-border) solid transparent;
|
|
27
|
-
border-bottom: none;
|
|
28
|
-
border-left: none;
|
|
29
|
-
border-radius: 50%;
|
|
30
|
-
animation: spinner 1000ms linear infinite;
|
|
31
|
-
}
|
|
32
|
-
@keyframes spinner {
|
|
33
|
-
to {
|
|
34
|
-
transform: rotate(360deg);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.dots div {
|
|
39
|
-
width: 20%;
|
|
40
|
-
height: 20%;
|
|
41
|
-
border-radius: 50%;
|
|
42
|
-
background-color: var(--color);
|
|
43
|
-
--dots-space: calc(var(--size) / 3);
|
|
44
|
-
--dots-space-negative: calc(0rem - (var(--size) / 3));
|
|
45
|
-
box-shadow: var(--dots-space) 0 var(--color),
|
|
46
|
-
var(--dots-space-negative) 0 var(--color);
|
|
47
|
-
position: relative;
|
|
48
|
-
animation: flash 0.6s ease-out infinite alternate;
|
|
49
|
-
}
|
|
50
|
-
@keyframes flash {
|
|
51
|
-
0% {
|
|
52
|
-
background-color: var(--color);
|
|
53
|
-
box-shadow: var(--dots-space) 0 var(--color),
|
|
54
|
-
var(--dots-space-negative) 0 transparent;
|
|
55
|
-
}
|
|
56
|
-
50% {
|
|
57
|
-
background-color: transparent;
|
|
58
|
-
box-shadow: var(--dots-space) 0 var(--color),
|
|
59
|
-
var(--dots-space-negative) 0 var(--color);
|
|
60
|
-
}
|
|
61
|
-
100% {
|
|
62
|
-
background-color: var(--color);
|
|
63
|
-
box-shadow: var(--dots-space) 0 transparent,
|
|
64
|
-
var(--dots-space-negative) 0 var(--color);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.scaleOut div {
|
|
69
|
-
width: 90%;
|
|
70
|
-
height: 90%;
|
|
71
|
-
border-radius: 50%;
|
|
72
|
-
background-color: var(--color);
|
|
73
|
-
animation: sk-scaleout 1s infinite ease-in-out;
|
|
74
|
-
}
|
|
75
|
-
@keyframes sk-scaleout {
|
|
76
|
-
0% {
|
|
77
|
-
transform: scale(0);
|
|
78
|
-
opacity: 1;
|
|
79
|
-
}
|
|
80
|
-
5% {
|
|
81
|
-
transform: scale(0);
|
|
82
|
-
opacity: 1;
|
|
83
|
-
}
|
|
84
|
-
50% {
|
|
85
|
-
opacity: 0.9;
|
|
86
|
-
}
|
|
87
|
-
100% {
|
|
88
|
-
transform: scale(1);
|
|
89
|
-
opacity: 0;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
1
|
+
.small {
|
|
2
|
+
--size: 2rem;
|
|
3
|
+
}
|
|
4
|
+
.medium {
|
|
5
|
+
--size: 2.4rem;
|
|
6
|
+
}
|
|
7
|
+
.large {
|
|
8
|
+
--size: 3rem;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.loading {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
width: var(--size);
|
|
16
|
+
height: var(--size);
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
--color: #7d7d7d;
|
|
19
|
+
}
|
|
20
|
+
.spinner div {
|
|
21
|
+
display: flex;
|
|
22
|
+
width: 75%;
|
|
23
|
+
height: 75%;
|
|
24
|
+
--spinner-border: calc(var(--size) / 8);
|
|
25
|
+
border-top: var(--spinner-border) solid var(--color);
|
|
26
|
+
border-right: var(--spinner-border) solid transparent;
|
|
27
|
+
border-bottom: none;
|
|
28
|
+
border-left: none;
|
|
29
|
+
border-radius: 50%;
|
|
30
|
+
animation: spinner 1000ms linear infinite;
|
|
31
|
+
}
|
|
32
|
+
@keyframes spinner {
|
|
33
|
+
to {
|
|
34
|
+
transform: rotate(360deg);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.dots div {
|
|
39
|
+
width: 20%;
|
|
40
|
+
height: 20%;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
background-color: var(--color);
|
|
43
|
+
--dots-space: calc(var(--size) / 3);
|
|
44
|
+
--dots-space-negative: calc(0rem - (var(--size) / 3));
|
|
45
|
+
box-shadow: var(--dots-space) 0 var(--color),
|
|
46
|
+
var(--dots-space-negative) 0 var(--color);
|
|
47
|
+
position: relative;
|
|
48
|
+
animation: flash 0.6s ease-out infinite alternate;
|
|
49
|
+
}
|
|
50
|
+
@keyframes flash {
|
|
51
|
+
0% {
|
|
52
|
+
background-color: var(--color);
|
|
53
|
+
box-shadow: var(--dots-space) 0 var(--color),
|
|
54
|
+
var(--dots-space-negative) 0 transparent;
|
|
55
|
+
}
|
|
56
|
+
50% {
|
|
57
|
+
background-color: transparent;
|
|
58
|
+
box-shadow: var(--dots-space) 0 var(--color),
|
|
59
|
+
var(--dots-space-negative) 0 var(--color);
|
|
60
|
+
}
|
|
61
|
+
100% {
|
|
62
|
+
background-color: var(--color);
|
|
63
|
+
box-shadow: var(--dots-space) 0 transparent,
|
|
64
|
+
var(--dots-space-negative) 0 var(--color);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.scaleOut div {
|
|
69
|
+
width: 90%;
|
|
70
|
+
height: 90%;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
background-color: var(--color);
|
|
73
|
+
animation: sk-scaleout 1s infinite ease-in-out;
|
|
74
|
+
}
|
|
75
|
+
@keyframes sk-scaleout {
|
|
76
|
+
0% {
|
|
77
|
+
transform: scale(0);
|
|
78
|
+
opacity: 1;
|
|
79
|
+
}
|
|
80
|
+
5% {
|
|
81
|
+
transform: scale(0);
|
|
82
|
+
opacity: 1;
|
|
83
|
+
}
|
|
84
|
+
50% {
|
|
85
|
+
opacity: 0.9;
|
|
86
|
+
}
|
|
87
|
+
100% {
|
|
88
|
+
transform: scale(1);
|
|
89
|
+
opacity: 0;
|
|
90
|
+
}
|
|
91
|
+
}
|
package/loading/loading.tsx
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from "./loading.module.css";
|
|
3
|
-
import { joinClassNames } from "@yakad/lib";
|
|
4
|
-
|
|
5
|
-
interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
6
|
-
size?: "small" | "medium" | "large";
|
|
7
|
-
variant?: "scaleOut" | "dots" | "spinner";
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function Loading(props: LoadingProps) {
|
|
11
|
-
const joinedClassNames = joinClassNames(
|
|
12
|
-
styles.loading,
|
|
13
|
-
props.size ? styles[props.size] : styles.medium,
|
|
14
|
-
props.variant ? styles[props.variant] : styles.spinner,
|
|
15
|
-
props.className!
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<div className={joinedClassNames}>
|
|
20
|
-
<div></div>
|
|
21
|
-
</div>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export default Loading;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styles from "./loading.module.css";
|
|
3
|
+
import { joinClassNames } from "@yakad/lib";
|
|
4
|
+
|
|
5
|
+
interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
6
|
+
size?: "small" | "medium" | "large";
|
|
7
|
+
variant?: "scaleOut" | "dots" | "spinner";
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function Loading(props: LoadingProps) {
|
|
11
|
+
const joinedClassNames = joinClassNames(
|
|
12
|
+
styles.loading,
|
|
13
|
+
props.size ? styles[props.size] : styles.medium,
|
|
14
|
+
props.variant ? styles[props.variant] : styles.spinner,
|
|
15
|
+
props.className!
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div className={joinedClassNames}>
|
|
20
|
+
<div></div>
|
|
21
|
+
</div>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default Loading;
|
package/main/main.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
navOpen?: boolean;
|
|
4
|
-
}
|
|
5
|
-
declare function Main(props: MainProps): JSX.Element;
|
|
6
|
-
export default Main;
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
navOpen?: boolean;
|
|
4
|
+
}
|
|
5
|
+
declare function Main(props: MainProps): JSX.Element;
|
|
6
|
+
export default Main;
|
package/main/main.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames } from "@yakad/lib";
|
|
3
|
-
import styles from "./main.module.css";
|
|
4
|
-
function Main(props) {
|
|
5
|
-
const navOpenClass = props.navOpen ? styles.navOpen : "";
|
|
6
|
-
const joinedClassNames = joinClassNames(styles.main, navOpenClass, props.className);
|
|
7
|
-
return (React.createElement("main", { ...props, className: joinedClassNames }, props.children));
|
|
8
|
-
}
|
|
9
|
-
export default Main;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames } from "@yakad/lib";
|
|
3
|
+
import styles from "./main.module.css";
|
|
4
|
+
function Main(props) {
|
|
5
|
+
const navOpenClass = props.navOpen ? styles.navOpen : "";
|
|
6
|
+
const joinedClassNames = joinClassNames(styles.main, navOpenClass, props.className);
|
|
7
|
+
return (React.createElement("main", { ...props, className: joinedClassNames }, props.children));
|
|
8
|
+
}
|
|
9
|
+
export default Main;
|
|
10
10
|
//# sourceMappingURL=main.js.map
|
package/main/main.module.css
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
.main {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
align-self: flex-end;
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
width: 100%;
|
|
8
|
-
transition: width 0.3s;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.navOpen {
|
|
12
|
-
width: calc(100% - 22rem);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@media screen and (max-width: 1000px) {
|
|
16
|
-
.navOpen {
|
|
17
|
-
width: 100%;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
1
|
+
.main {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-self: flex-end;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
width: 100%;
|
|
8
|
+
transition: width 0.3s;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.navOpen {
|
|
12
|
+
width: calc(100% - 22rem);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media screen and (max-width: 1000px) {
|
|
16
|
+
.navOpen {
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
}
|
package/main/main.tsx
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
-
import styles from "./main.module.css";
|
|
4
|
-
|
|
5
|
-
interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
|
-
navOpen?: boolean;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
function Main(props: MainProps) {
|
|
10
|
-
const navOpenClass = props.navOpen ? styles.navOpen : "";
|
|
11
|
-
|
|
12
|
-
const joinedClassNames = joinClassNames(
|
|
13
|
-
styles.main,
|
|
14
|
-
navOpenClass,
|
|
15
|
-
props.className!
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<main {...props} className={joinedClassNames}>
|
|
20
|
-
{props.children}
|
|
21
|
-
</main>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export default Main;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
+
import styles from "./main.module.css";
|
|
4
|
+
|
|
5
|
+
interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
navOpen?: boolean;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
function Main(props: MainProps) {
|
|
10
|
+
const navOpenClass = props.navOpen ? styles.navOpen : "";
|
|
11
|
+
|
|
12
|
+
const joinedClassNames = joinClassNames(
|
|
13
|
+
styles.main,
|
|
14
|
+
navOpenClass,
|
|
15
|
+
props.className!
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<main {...props} className={joinedClassNames}>
|
|
20
|
+
{props.children}
|
|
21
|
+
</main>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default Main;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
-
anchor?: "left" | "right" | "top" | "bottom" | "auto";
|
|
4
|
-
open: boolean;
|
|
5
|
-
}
|
|
6
|
-
declare function Navigation(props: NavigationProps): JSX.Element;
|
|
7
|
-
export default Navigation;
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
anchor?: "left" | "right" | "top" | "bottom" | "auto";
|
|
4
|
+
open: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare function Navigation(props: NavigationProps): JSX.Element;
|
|
7
|
+
export default Navigation;
|
package/navigation/navigation.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames } from "@yakad/lib";
|
|
3
|
-
import styles from "./navigation.module.css";
|
|
4
|
-
function Navigation(props) {
|
|
5
|
-
const joinedClassNames = joinClassNames(styles.navigation, props.anchor ? styles[props.anchor] : styles.auto, props.open ? styles.open : "");
|
|
6
|
-
return (React.createElement("nav", { ...props, className: joinedClassNames }, props.children));
|
|
7
|
-
}
|
|
8
|
-
export default Navigation;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames } from "@yakad/lib";
|
|
3
|
+
import styles from "./navigation.module.css";
|
|
4
|
+
function Navigation(props) {
|
|
5
|
+
const joinedClassNames = joinClassNames(styles.navigation, props.anchor ? styles[props.anchor] : styles.auto, props.open ? styles.open : "");
|
|
6
|
+
return (React.createElement("nav", { ...props, className: joinedClassNames }, props.children));
|
|
7
|
+
}
|
|
8
|
+
export default Navigation;
|
|
9
9
|
//# sourceMappingURL=navigation.js.map
|