@conduction/components 2.2.19 → 2.2.20
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/.prettierrc +30 -30
- package/README.md +1 -0
- package/lib/components/Pagination/Pagination.d.ts +14 -14
- package/lib/components/Pagination/Pagination.js +12 -12
- package/lib/components/badgeCounter/BadgeCounter.d.ts +8 -8
- package/lib/components/badgeCounter/BadgeCounter.js +4 -4
- package/lib/components/badgeCounter/BadgeCounter.module.css +27 -27
- package/lib/components/card/cardHeader/CardHeader.d.ts +4 -4
- package/lib/components/card/cardHeader/CardHeader.js +14 -14
- package/lib/components/card/cardWrapper/CardWrapper.d.ts +2 -2
- package/lib/components/card/cardWrapper/CardWrapper.js +6 -6
- package/lib/components/card/detailsCard/DetailsCard.d.ts +14 -14
- package/lib/components/card/detailsCard/DetailsCard.js +11 -11
- package/lib/components/card/downloadCard/DownloadCard.d.ts +11 -11
- package/lib/components/card/downloadCard/DownloadCard.js +9 -9
- package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts +13 -13
- package/lib/components/card/horizontalImageCard/HorizontalImageCard.js +10 -10
- package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts +14 -14
- package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +10 -10
- package/lib/components/card/index.d.ts +8 -8
- package/lib/components/card/index.js +8 -8
- package/lib/components/card/infoCard/InfoCard.d.ts +8 -8
- package/lib/components/card/infoCard/InfoCard.js +6 -6
- package/lib/components/card/infoCard/InfoCard.module.css +26 -26
- package/lib/components/card/richContentCard/RichContentCard.d.ts +19 -19
- package/lib/components/card/richContentCard/RichContentCard.js +15 -16
- package/lib/components/card/richContentCard/RichContentCard.module.css +103 -93
- package/lib/components/codeBlock/CodeBlock.d.ts +6 -6
- package/lib/components/codeBlock/CodeBlock.js +3 -3
- package/lib/components/codeBlock/CodeBlock.module.css +6 -6
- package/lib/components/container/Container.d.ts +6 -6
- package/lib/components/container/Container.js +4 -4
- package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
- package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts +17 -17
- package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
- package/lib/components/denhaag-wrappers/pagination/Pagination.css +120 -120
- package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts +9 -9
- package/lib/components/denhaag-wrappers/pagination/Pagination.js +15 -15
- package/lib/components/editableTableRow/EditableTableRow.d.ts +14 -14
- package/lib/components/editableTableRow/EditableTableRow.js +31 -31
- package/lib/components/editableTableRow/EditableTableRow.module.css +25 -25
- package/lib/components/formFields/checkbox/Checkbox.module.css +7 -7
- package/lib/components/formFields/checkbox/checkbox.d.ts +9 -9
- package/lib/components/formFields/checkbox/checkbox.js +3 -3
- package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts +23 -23
- package/lib/components/formFields/createKeyValue/CreateKeyValue.js +40 -40
- package/lib/components/formFields/date/Date.d.ts +12 -12
- package/lib/components/formFields/date/Date.js +10 -10
- package/lib/components/formFields/date/Date.module.css +12 -12
- package/lib/components/formFields/errorMessage/ErrorMessage.d.ts +5 -5
- package/lib/components/formFields/errorMessage/ErrorMessage.js +3 -3
- package/lib/components/formFields/index.d.ts +7 -7
- package/lib/components/formFields/index.js +7 -7
- package/lib/components/formFields/input.d.ts +22 -22
- package/lib/components/formFields/input.js +12 -12
- package/lib/components/formFields/radio.d.ts +9 -9
- package/lib/components/formFields/radio.js +3 -3
- package/lib/components/formFields/select/select.d.ts +24 -24
- package/lib/components/formFields/select/select.js +74 -74
- package/lib/components/formFields/textarea.d.ts +10 -10
- package/lib/components/formFields/textarea.js +4 -4
- package/lib/components/formFields/types.d.ts +6 -6
- package/lib/components/formFields/types.js +1 -1
- package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.d.ts +10 -10
- package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.js +36 -36
- package/lib/components/htmlParser/ParsedHTML.d.ts +10 -0
- package/lib/components/htmlParser/ParsedHTML.js +17 -0
- package/lib/components/htmlParser/ParsedHTML.module.css +7 -0
- package/lib/components/htmlParser/parser/alert/getAlert.d.ts +1 -0
- package/lib/components/htmlParser/parser/alert/getAlert.js +18 -0
- package/lib/components/htmlParser/parser/alert/getAlert.module.css +28 -0
- package/lib/components/htmlParser/parser/anchor/getAnchor.d.ts +2 -0
- package/lib/components/htmlParser/parser/anchor/getAnchor.js +74 -0
- package/lib/components/htmlParser/parser/code/getCode.d.ts +1 -0
- package/lib/components/htmlParser/parser/code/getCode.js +11 -0
- package/lib/components/htmlParser/parser/getBlockquote/getBlockquote.d.ts +1 -0
- package/lib/components/htmlParser/parser/getBlockquote/getBlockquote.js +6 -0
- package/lib/components/htmlParser/parser/header/getHeader.d.ts +1 -0
- package/lib/components/htmlParser/parser/header/getHeader.js +15 -0
- package/lib/components/htmlParser/parser/image/getImage.d.ts +1 -0
- package/lib/components/htmlParser/parser/image/getImage.js +28 -0
- package/lib/components/htmlParser/parser/list/getList.d.ts +1 -0
- package/lib/components/htmlParser/parser/list/getList.js +12 -0
- package/lib/components/htmlParser/parser/list/getList.module.css +3 -0
- package/lib/components/htmlParser/parser/listItem/getListItem.d.ts +1 -0
- package/lib/components/htmlParser/parser/listItem/getListItem.js +12 -0
- package/lib/components/htmlParser/parser/paragraph/getParagraph.d.ts +1 -0
- package/lib/components/htmlParser/parser/paragraph/getParagraph.js +6 -0
- package/lib/components/htmlParser/parser/svg/getSvg.d.ts +1 -0
- package/lib/components/htmlParser/parser/svg/getSvg.js +8 -0
- package/lib/components/htmlParser/parser/table/getTable.d.ts +1 -0
- package/lib/components/htmlParser/parser/table/getTable.js +7 -0
- package/lib/components/htmlParser/parser/table/getTable.module.css +3 -0
- package/lib/components/htmlParser/parser/tableBody/getTableBody.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableBody/getTableBody.js +7 -0
- package/lib/components/htmlParser/parser/tableBody/getTableBody.module.css +3 -0
- package/lib/components/htmlParser/parser/tableCell/getTableCell.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableCell/getTableCell.js +7 -0
- package/lib/components/htmlParser/parser/tableCell/getTableCell.module.css +3 -0
- package/lib/components/htmlParser/parser/tableHeader/getTableHeader.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableHeader/getTableHeader.js +7 -0
- package/lib/components/htmlParser/parser/tableHeader/getTableHeader.module.css +28 -0
- package/lib/components/htmlParser/parser/tableHeaderCell/getTableHeaderCell.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableHeaderCell/getTableHeaderCell.js +6 -0
- package/lib/components/htmlParser/parser/tableRow/getTableRow.d.ts +1 -0
- package/lib/components/htmlParser/parser/tableRow/getTableRow.js +7 -0
- package/lib/components/htmlParser/parser/tableRow/getTableRow.module.css +29 -0
- package/lib/components/htmlParser/parser/useHtmlParser.d.ts +5 -0
- package/lib/components/htmlParser/parser/useHtmlParser.js +78 -0
- package/lib/components/htmlParser/useGitHubDirectories.d.ts +10 -0
- package/lib/components/htmlParser/useGitHubDirectories.js +31 -0
- package/lib/components/imageDivider/ImageDivider.d.ts +7 -7
- package/lib/components/imageDivider/ImageDivider.js +6 -6
- package/lib/components/imageDivider/imageDivider.module.css +5 -5
- package/lib/components/logo/Logo.d.ts +8 -8
- package/lib/components/logo/Logo.js +10 -10
- package/lib/components/logo/Logo.module.css +15 -15
- package/lib/components/metaIcon/MetaIcon.d.ts +7 -7
- package/lib/components/metaIcon/MetaIcon.js +3 -3
- package/lib/components/metaIcon/MetaIcon.module.css +29 -29
- package/lib/components/notificationPopUp/NotificationPopUp.d.ts +26 -26
- package/lib/components/notificationPopUp/NotificationPopUp.js +32 -32
- package/lib/components/privateRoute/PrivateRoute.d.ts +6 -6
- package/lib/components/privateRoute/PrivateRoute.js +15 -15
- package/lib/components/quoteWrapper/QuoteWrapper.d.ts +7 -7
- package/lib/components/quoteWrapper/QuoteWrapper.js +5 -5
- package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
- package/lib/components/statusSteps/StatusSteps.d.ts +13 -0
- package/lib/components/statusSteps/StatusSteps.js +5 -0
- package/lib/components/tableWrapper/TableWrapper.d.ts +4 -0
- package/lib/components/tableWrapper/TableWrapper.js +30 -0
- package/lib/components/tableWrapper/TableWrapper.module.css +67 -0
- package/lib/components/tabs/Tabs.d.ts +5 -5
- package/lib/components/tabs/Tabs.js +49 -49
- package/lib/components/tag/Tag.d.ts +10 -10
- package/lib/components/tag/Tag.js +6 -6
- package/lib/components/tag/Tag.module.css +44 -44
- package/lib/components/toolTip/ToolTip.d.ts +14 -14
- package/lib/components/toolTip/ToolTip.js +14 -14
- package/lib/components/topNav/index.d.ts +3 -3
- package/lib/components/topNav/index.js +3 -3
- package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +39 -22
- package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +23 -23
- package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts +12 -12
- package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js +7 -7
- package/lib/custom.d copy.d.ts +5 -0
- package/lib/custom.d copy.js +1 -0
- package/lib/index.d.ts +27 -27
- package/lib/index.js +20 -20
- package/package.json +1 -1
- package/src/components/badgeCounter/BadgeCounter.module.css +27 -27
- package/src/components/card/infoCard/InfoCard.module.css +26 -26
- package/src/components/codeBlock/CodeBlock.module.css +6 -6
- package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
- package/src/components/formFields/checkbox/Checkbox.module.css +7 -7
- package/src/components/formFields/date/Date.module.css +12 -12
- package/src/components/imageDivider/imageDivider.module.css +5 -5
- package/src/components/logo/Logo.module.css +15 -15
- package/src/components/metaIcon/MetaIcon.module.css +29 -29
- package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
- package/src/components/tag/Tag.module.css +44 -44
- package/src/components/topNav/index.ts +4 -4
- package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +34 -2
- package/src/custom.d.ts +4 -4
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--conduction-tag-font-size: var(--skeleton-font-size-sm);
|
|
3
|
-
--conduction-tag-color: var(--skeleton-black);
|
|
4
|
-
--conduction-tag-background-color: var(--skeleton-color-grey-1);
|
|
5
|
-
--conduction-tag-border-radius: var(--skeleton-border-radius-md);
|
|
6
|
-
--conduction-tag-padding: var(--skeleton-size-xs);
|
|
7
|
-
--conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
|
|
8
|
-
--conduction-tag-remove-background-color: #ffbdad;
|
|
9
|
-
--conduction-tag-remove-text-color: #e44f2a;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.tag {
|
|
13
|
-
display: inline-block;
|
|
14
|
-
width: fit-content;
|
|
15
|
-
font-size: var(--conduction-tag-font-size);
|
|
16
|
-
color: var(--conduction-tag-color);
|
|
17
|
-
background-color: var(--conduction-tag-background-color);
|
|
18
|
-
padding-inline-start: var(--conduction-tag-padding);
|
|
19
|
-
padding-inline-end: var(--conduction-tag-padding);
|
|
20
|
-
padding-block-start: var(--conduction-tag-padding);
|
|
21
|
-
padding-block-end: var(--conduction-tag-padding);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.tag > *:not(:last-child) {
|
|
25
|
-
margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.clickable :hover {
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.remove {
|
|
33
|
-
padding-inline-end: 4px;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.tagContainer {
|
|
37
|
-
display: flex;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.removeTag:hover {
|
|
41
|
-
cursor: pointer;
|
|
42
|
-
background-color: var(--conduction-tag-remove-background-color);
|
|
43
|
-
color: var(--conduction-tag-remove-text-color);
|
|
44
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--conduction-tag-font-size: var(--skeleton-font-size-sm);
|
|
3
|
+
--conduction-tag-color: var(--skeleton-black);
|
|
4
|
+
--conduction-tag-background-color: var(--skeleton-color-grey-1);
|
|
5
|
+
--conduction-tag-border-radius: var(--skeleton-border-radius-md);
|
|
6
|
+
--conduction-tag-padding: var(--skeleton-size-xs);
|
|
7
|
+
--conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
|
|
8
|
+
--conduction-tag-remove-background-color: #ffbdad;
|
|
9
|
+
--conduction-tag-remove-text-color: #e44f2a;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.tag {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
width: fit-content;
|
|
15
|
+
font-size: var(--conduction-tag-font-size);
|
|
16
|
+
color: var(--conduction-tag-color);
|
|
17
|
+
background-color: var(--conduction-tag-background-color);
|
|
18
|
+
padding-inline-start: var(--conduction-tag-padding);
|
|
19
|
+
padding-inline-end: var(--conduction-tag-padding);
|
|
20
|
+
padding-block-start: var(--conduction-tag-padding);
|
|
21
|
+
padding-block-end: var(--conduction-tag-padding);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.tag > *:not(:last-child) {
|
|
25
|
+
margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.clickable :hover {
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.remove {
|
|
33
|
+
padding-inline-end: 4px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.tagContainer {
|
|
37
|
+
display: flex;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.removeTag:hover {
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
background-color: var(--conduction-tag-remove-background-color);
|
|
43
|
+
color: var(--conduction-tag-remove-text-color);
|
|
44
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
interface ToolTipProps {
|
|
3
|
-
id: string;
|
|
4
|
-
layoutClassName?: string;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* Implement this ToolTip only once, in a high-level wrapper.
|
|
8
|
-
* Use the ToolTip anywhere, in any element, by setting the following data props:
|
|
9
|
-
*
|
|
10
|
-
* data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
|
|
11
|
-
* data-tooltip-content="Hello world!"
|
|
12
|
-
*/
|
|
13
|
-
export declare const ToolTip: React.FC<ToolTipProps>;
|
|
14
|
-
export {};
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface ToolTipProps {
|
|
3
|
+
id: string;
|
|
4
|
+
layoutClassName?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Implement this ToolTip only once, in a high-level wrapper.
|
|
8
|
+
* Use the ToolTip anywhere, in any element, by setting the following data props:
|
|
9
|
+
*
|
|
10
|
+
* data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
|
|
11
|
+
* data-tooltip-content="Hello world!"
|
|
12
|
+
*/
|
|
13
|
+
export declare const ToolTip: React.FC<ToolTipProps>;
|
|
14
|
+
export {};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import * as styles from "./ToolTip.module.css";
|
|
3
|
-
import { Tooltip } from "react-tooltip";
|
|
4
|
-
import clsx from "clsx";
|
|
5
|
-
/**
|
|
6
|
-
* Implement this ToolTip only once, in a high-level wrapper.
|
|
7
|
-
* Use the ToolTip anywhere, in any element, by setting the following data props:
|
|
8
|
-
*
|
|
9
|
-
* data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
|
|
10
|
-
* data-tooltip-content="Hello world!"
|
|
11
|
-
*/
|
|
12
|
-
export const ToolTip = ({ id, layoutClassName }) => {
|
|
13
|
-
return _jsx(Tooltip, { className: clsx(styles.tooltip, layoutClassName, layoutClassName), ...{ id } });
|
|
14
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./ToolTip.module.css";
|
|
3
|
+
import { Tooltip } from "react-tooltip";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
/**
|
|
6
|
+
* Implement this ToolTip only once, in a high-level wrapper.
|
|
7
|
+
* Use the ToolTip anywhere, in any element, by setting the following data props:
|
|
8
|
+
*
|
|
9
|
+
* data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
|
|
10
|
+
* data-tooltip-content="Hello world!"
|
|
11
|
+
*/
|
|
12
|
+
export const ToolTip = ({ id, layoutClassName }) => {
|
|
13
|
+
return _jsx(Tooltip, { className: clsx(styles.tooltip, layoutClassName, layoutClassName), ...{ id } });
|
|
14
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
|
|
2
|
-
import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
|
|
3
|
-
export { PrimaryTopNav, SecondaryTopNav };
|
|
1
|
+
import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
|
|
2
|
+
import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
|
|
3
|
+
export { PrimaryTopNav, SecondaryTopNav };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
|
|
2
|
-
import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
|
|
3
|
-
export { PrimaryTopNav, SecondaryTopNav };
|
|
1
|
+
import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
|
|
2
|
+
import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
|
|
3
|
+
export { PrimaryTopNav, SecondaryTopNav };
|
|
@@ -1,22 +1,39 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface ITopNavItemBase {
|
|
3
|
-
label: string;
|
|
4
|
-
icon?: JSX.Element;
|
|
5
|
-
current?: boolean;
|
|
6
|
-
}
|
|
7
|
-
interface
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface ITopNavItemBase {
|
|
3
|
+
label: string;
|
|
4
|
+
icon?: JSX.Element;
|
|
5
|
+
current?: boolean | ICurrentItemJSONFormat;
|
|
6
|
+
}
|
|
7
|
+
interface ICurrentItemJSONFormat {
|
|
8
|
+
pathname: string;
|
|
9
|
+
operator: "equals" | "includes";
|
|
10
|
+
filterCondition?: {
|
|
11
|
+
filter: string;
|
|
12
|
+
value: string;
|
|
13
|
+
isObject: boolean;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
interface IHandleClickJSONFormat {
|
|
17
|
+
link: string;
|
|
18
|
+
setFilter?: {
|
|
19
|
+
filter: string;
|
|
20
|
+
value: string;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
interface ITopNavItemWithSubItems extends ITopNavItemBase {
|
|
24
|
+
handleClick?: never;
|
|
25
|
+
subItems: ITopNavItem[];
|
|
26
|
+
}
|
|
27
|
+
interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
|
|
28
|
+
handleClick?: () => any | IHandleClickJSONFormat;
|
|
29
|
+
type: "readme" | "internal" | "external";
|
|
30
|
+
subItems?: never;
|
|
31
|
+
}
|
|
32
|
+
export declare type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
|
|
33
|
+
export interface TopNavProps {
|
|
34
|
+
items: ITopNavItem[];
|
|
35
|
+
mobileLogo?: JSX.Element;
|
|
36
|
+
layoutClassName?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName }: TopNavProps) => JSX.Element;
|
|
39
|
+
export {};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import * as styles from "./PrimaryTopNav.module.css";
|
|
4
|
-
import clsx from "clsx";
|
|
5
|
-
import { Link } from "@utrecht/component-library-react/dist/css-module";
|
|
6
|
-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
7
|
-
import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
8
|
-
export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
|
|
9
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
10
|
-
const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992);
|
|
11
|
-
React.useEffect(() => {
|
|
12
|
-
const handleResize = () => {
|
|
13
|
-
setIsMobile(window.innerWidth < 992);
|
|
14
|
-
};
|
|
15
|
-
window.addEventListener("resize", handleResize);
|
|
16
|
-
return () => window.removeEventListener("resize", handleResize);
|
|
17
|
-
}, []);
|
|
18
|
-
const handleSubItemClick = (handleClick) => {
|
|
19
|
-
setIsOpen(false);
|
|
20
|
-
handleClick();
|
|
21
|
-
};
|
|
22
|
-
return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
|
|
23
|
-
};
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as styles from "./PrimaryTopNav.module.css";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import { Link } from "@utrecht/component-library-react/dist/css-module";
|
|
6
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
7
|
+
import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
8
|
+
export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
|
|
9
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
10
|
+
const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992);
|
|
11
|
+
React.useEffect(() => {
|
|
12
|
+
const handleResize = () => {
|
|
13
|
+
setIsMobile(window.innerWidth < 992);
|
|
14
|
+
};
|
|
15
|
+
window.addEventListener("resize", handleResize);
|
|
16
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
17
|
+
}, []);
|
|
18
|
+
const handleSubItemClick = (handleClick) => {
|
|
19
|
+
setIsOpen(false);
|
|
20
|
+
handleClick();
|
|
21
|
+
};
|
|
22
|
+
return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
|
|
23
|
+
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface TopNavProps {
|
|
3
|
-
items: {
|
|
4
|
-
label: string;
|
|
5
|
-
icon?: JSX.Element;
|
|
6
|
-
current?: boolean;
|
|
7
|
-
handleClick: () => any;
|
|
8
|
-
}[];
|
|
9
|
-
layoutClassName?: string;
|
|
10
|
-
}
|
|
11
|
-
export declare const SecondaryTopNav: ({ items, layoutClassName }: TopNavProps) => JSX.Element;
|
|
12
|
-
export {};
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface TopNavProps {
|
|
3
|
+
items: {
|
|
4
|
+
label: string;
|
|
5
|
+
icon?: JSX.Element;
|
|
6
|
+
current?: boolean;
|
|
7
|
+
handleClick: () => any;
|
|
8
|
+
}[];
|
|
9
|
+
layoutClassName?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const SecondaryTopNav: ({ items, layoutClassName }: TopNavProps) => JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import * as styles from "./SecondaryTopNav.module.css";
|
|
3
|
-
import { Link } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
-
import clsx from "clsx";
|
|
5
|
-
export const SecondaryTopNav = ({ items, layoutClassName }) => {
|
|
6
|
-
return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }) }, idx))) }) }) }));
|
|
7
|
-
};
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as styles from "./SecondaryTopNav.module.css";
|
|
3
|
+
import { Link } from "@utrecht/component-library-react/dist/css-module";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
export const SecondaryTopNav = ({ items, layoutClassName }) => {
|
|
6
|
+
return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }) }, idx))) }) }) }));
|
|
7
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
package/lib/index.d.ts
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate } from "./components/card";
|
|
3
|
-
import { Container } from "./components/container/Container";
|
|
4
|
-
import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
|
|
5
|
-
import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
|
|
6
|
-
import { ImageDivider } from "./components/imageDivider/ImageDivider";
|
|
7
|
-
import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
|
|
8
|
-
import { MetaIcon } from "./components/metaIcon/MetaIcon";
|
|
9
|
-
import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
|
|
10
|
-
import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
|
|
11
|
-
import { Tag } from "./components/tag/Tag";
|
|
12
|
-
declare const NotificationPopUp: {
|
|
13
|
-
controller: () => {
|
|
14
|
-
isVisible: boolean;
|
|
15
|
-
show: () => void;
|
|
16
|
-
hide: () => void;
|
|
17
|
-
};
|
|
18
|
-
NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
|
|
19
|
-
};
|
|
20
|
-
import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
|
|
21
|
-
import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
|
|
22
|
-
import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
23
|
-
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
24
|
-
import { Pagination } from "./components/Pagination/Pagination";
|
|
25
|
-
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
26
|
-
import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
|
|
27
|
-
export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate } from "./components/card";
|
|
3
|
+
import { Container } from "./components/container/Container";
|
|
4
|
+
import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
|
|
5
|
+
import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
|
|
6
|
+
import { ImageDivider } from "./components/imageDivider/ImageDivider";
|
|
7
|
+
import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
|
|
8
|
+
import { MetaIcon } from "./components/metaIcon/MetaIcon";
|
|
9
|
+
import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
|
|
10
|
+
import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
|
|
11
|
+
import { Tag } from "./components/tag/Tag";
|
|
12
|
+
declare const NotificationPopUp: {
|
|
13
|
+
controller: () => {
|
|
14
|
+
isVisible: boolean;
|
|
15
|
+
show: () => void;
|
|
16
|
+
hide: () => void;
|
|
17
|
+
};
|
|
18
|
+
NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
|
|
19
|
+
};
|
|
20
|
+
import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
|
|
21
|
+
import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
|
|
22
|
+
import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
23
|
+
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
24
|
+
import { Pagination } from "./components/Pagination/Pagination";
|
|
25
|
+
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
26
|
+
import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
|
|
27
|
+
export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };
|
package/lib/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, } from "./components/card";
|
|
2
|
-
import { Container } from "./components/container/Container";
|
|
3
|
-
import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
|
|
4
|
-
import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
|
|
5
|
-
import { ImageDivider } from "./components/imageDivider/ImageDivider";
|
|
6
|
-
import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
|
|
7
|
-
import { MetaIcon } from "./components/metaIcon/MetaIcon";
|
|
8
|
-
import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
|
|
9
|
-
import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
|
|
10
|
-
import { Tag } from "./components/tag/Tag";
|
|
11
|
-
import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
|
|
12
|
-
const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
|
|
13
|
-
import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
|
|
14
|
-
import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
|
|
15
|
-
import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
16
|
-
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
17
|
-
import { Pagination } from "./components/Pagination/Pagination";
|
|
18
|
-
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
19
|
-
import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
|
|
20
|
-
export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };
|
|
1
|
+
import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, } from "./components/card";
|
|
2
|
+
import { Container } from "./components/container/Container";
|
|
3
|
+
import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
|
|
4
|
+
import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
|
|
5
|
+
import { ImageDivider } from "./components/imageDivider/ImageDivider";
|
|
6
|
+
import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
|
|
7
|
+
import { MetaIcon } from "./components/metaIcon/MetaIcon";
|
|
8
|
+
import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
|
|
9
|
+
import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
|
|
10
|
+
import { Tag } from "./components/tag/Tag";
|
|
11
|
+
import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
|
|
12
|
+
const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
|
|
13
|
+
import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
|
|
14
|
+
import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
|
|
15
|
+
import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
16
|
+
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
17
|
+
import { Pagination } from "./components/Pagination/Pagination";
|
|
18
|
+
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
19
|
+
import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
|
|
20
|
+
export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };
|
package/package.json
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--conduction-badge-counter-color: hsl(0 0% 0%);
|
|
3
|
-
--conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
|
|
4
|
-
--conduction-badge-counter-height: var(--skeleton-size-md);
|
|
5
|
-
--conduction-badge-counter-width: var(--skeleton-size-md);
|
|
6
|
-
--conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
|
|
7
|
-
--conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.content {
|
|
11
|
-
display: flex;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.badge {
|
|
15
|
-
height: var(--conduction-badge-counter-height);
|
|
16
|
-
width: var(--conduction-badge-counter-width);
|
|
17
|
-
border-radius: 50%;
|
|
18
|
-
font-size: var(--conduction-badge-counter-font-size);
|
|
19
|
-
display: flex;
|
|
20
|
-
align-items: center;
|
|
21
|
-
justify-content: space-around;
|
|
22
|
-
background-color: var(--conduction-badge-counter-background-color);
|
|
23
|
-
color: var(--conduction-badge-counter-color);
|
|
24
|
-
}
|
|
25
|
-
.maxNumber {
|
|
26
|
-
font-size: var(--conduction-badge-counter-max-number-font-size);
|
|
27
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--conduction-badge-counter-color: hsl(0 0% 0%);
|
|
3
|
+
--conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
|
|
4
|
+
--conduction-badge-counter-height: var(--skeleton-size-md);
|
|
5
|
+
--conduction-badge-counter-width: var(--skeleton-size-md);
|
|
6
|
+
--conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
|
|
7
|
+
--conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.content {
|
|
11
|
+
display: flex;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.badge {
|
|
15
|
+
height: var(--conduction-badge-counter-height);
|
|
16
|
+
width: var(--conduction-badge-counter-width);
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
font-size: var(--conduction-badge-counter-font-size);
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: space-around;
|
|
22
|
+
background-color: var(--conduction-badge-counter-background-color);
|
|
23
|
+
color: var(--conduction-badge-counter-color);
|
|
24
|
+
}
|
|
25
|
+
.maxNumber {
|
|
26
|
+
font-size: var(--conduction-badge-counter-max-number-font-size);
|
|
27
|
+
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
background-color: var(--skeleton-color-grey-1);
|
|
3
|
-
border-radius: var(--skeleton-border-radius-md);
|
|
4
|
-
padding-inline-start: var(--skeleton-size-md);
|
|
5
|
-
padding-inline-end: var(--skeleton-size-md);
|
|
6
|
-
padding-block-start: var(--skeleton-size-md);
|
|
7
|
-
padding-block-end: var(--skeleton-size-md);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.container > * {
|
|
11
|
-
display: block;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.container > *:not(:last-child) {
|
|
15
|
-
margin-block-end: var(--skeleton-size-xs);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.container > .title {
|
|
19
|
-
font-weight: var(--skeleton-font-weight-bold);
|
|
20
|
-
font-size: var(--skeleton-font-size-xl);
|
|
21
|
-
color: var(--skeleton-color-black);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.content {
|
|
25
|
-
color: var(--skeleton-color-black);
|
|
26
|
-
}
|
|
1
|
+
.container {
|
|
2
|
+
background-color: var(--skeleton-color-grey-1);
|
|
3
|
+
border-radius: var(--skeleton-border-radius-md);
|
|
4
|
+
padding-inline-start: var(--skeleton-size-md);
|
|
5
|
+
padding-inline-end: var(--skeleton-size-md);
|
|
6
|
+
padding-block-start: var(--skeleton-size-md);
|
|
7
|
+
padding-block-end: var(--skeleton-size-md);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.container > * {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.container > *:not(:last-child) {
|
|
15
|
+
margin-block-end: var(--skeleton-size-xs);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.container > .title {
|
|
19
|
+
font-weight: var(--skeleton-font-weight-bold);
|
|
20
|
+
font-size: var(--skeleton-font-size-xl);
|
|
21
|
+
color: var(--skeleton-color-black);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.content {
|
|
25
|
+
color: var(--skeleton-color-black);
|
|
26
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.code {
|
|
2
|
-
margin-block: var(--skeleton-size-sm);
|
|
3
|
-
background-color: var(--skeleton-color-grey-1);
|
|
4
|
-
border-radius: var(--skeleton-size-2xs);
|
|
5
|
-
padding: var(--skeleton-size-lg);
|
|
6
|
-
}
|
|
1
|
+
.code {
|
|
2
|
+
margin-block: var(--skeleton-size-sm);
|
|
3
|
+
background-color: var(--skeleton-color-grey-1);
|
|
4
|
+
border-radius: var(--skeleton-size-2xs);
|
|
5
|
+
padding: var(--skeleton-size-lg);
|
|
6
|
+
}
|