@pnx-mixtape/mxds 0.0.24 → 0.0.27
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/.storybook/decorators.ts +1 -1
- package/.storybook/main.ts +12 -1
- package/.storybook/preview.ts +1 -0
- package/.storybook/theme-demo.css +17 -13
- package/.storybook/vitest.setup.ts +53 -0
- package/dist/build/accordion.css +1 -113
- package/dist/build/accordion.entry.js +46 -72
- package/dist/build/base.css +1 -993
- package/dist/build/breadcrumb.css +1 -55
- package/dist/build/button.css +1 -126
- package/dist/build/callout.css +1 -11
- package/dist/build/card.css +1 -161
- package/dist/build/carousel.css +1 -125
- package/dist/build/chunks/Accordion-BzKLBuWL.js +42 -0
- package/dist/build/chunks/DropMenu-LnJEp-sg.js +43 -0
- package/dist/build/chunks/Popover-C4gisyxr.js +27 -0
- package/dist/build/chunks/polyfills-Du4RTZDf.js +511 -0
- package/dist/build/chunks/popover-Bd5oQ1Ic.js +407 -0
- package/dist/build/chunks/utilities-DepaJdUg.js +242 -0
- package/dist/build/constants.css +1 -132
- package/dist/build/container-grid.css +1 -186
- package/dist/build/content-block.css +1 -36
- package/dist/build/dialog.css +1 -108
- package/dist/build/dialog.entry.js +45 -85
- package/dist/build/drop-menu.css +1 -89
- package/dist/build/drop-menu.entry.js +2 -2
- package/dist/build/drupal.css +1 -66
- package/dist/build/filters.css +1 -117
- package/dist/build/filters.entry.js +113 -142
- package/dist/build/footer.css +1 -141
- package/dist/build/form.css +1 -491
- package/dist/build/global-alert.css +1 -60
- package/dist/build/global-alert.entry.js +51 -75
- package/dist/build/grid.css +1 -195
- package/dist/build/header.css +1 -149
- package/dist/build/header.entry.js +718 -1180
- package/dist/build/hero-banner.css +1 -73
- package/dist/build/icon.css +1 -399
- package/dist/build/in-page-alert.css +1 -93
- package/dist/build/in-page-navigation.css +1 -17
- package/dist/build/in-page-navigation.entry.js +67 -103
- package/dist/build/link-list.css +1 -45
- package/dist/build/list-item.css +1 -29
- package/dist/build/masthead.css +1 -53
- package/dist/build/navigation.css +1 -356
- package/dist/build/navigation.entry.js +79 -222
- package/dist/build/page.css +1 -65
- package/dist/build/pagination.css +1 -111
- package/dist/build/popover.css +1 -119
- package/dist/build/popover.entry.js +1 -2
- package/dist/build/results-bar.css +1 -21
- package/dist/build/section.css +1 -147
- package/dist/build/side-navigation.css +1 -85
- package/dist/build/sidebar.css +1 -53
- package/dist/build/social-links.css +1 -20
- package/dist/build/steps.css +1 -118
- package/dist/build/sticky.css +1 -47
- package/dist/build/sticky.entry.js +48 -59
- package/dist/build/tabs.css +1 -108
- package/dist/build/tabs.entry.js +130 -209
- package/dist/build/tag.css +1 -70
- package/dist/build/utilities.css +1 -186
- package/dist/build/utility-list.css +1 -43
- package/dist/build/utility-list.entry.js +52 -80
- package/package.json +40 -54
- package/src/Atom/Background/__snapshots__/Background.stories.ts.snap +61 -216
- package/src/Atom/Background/_background.css +2 -1
- package/src/Atom/Button/Button.stories.tsx +2 -0
- package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +77 -97
- package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +3 -15
- package/src/Atom/DefinitionList/DefinitionList.stories.tsx +2 -1
- package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +13 -26
- package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +2 -29
- package/src/Atom/Heading/Heading.stories.tsx +2 -1
- package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +9 -13
- package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +2 -8
- package/src/Atom/Icon/Icon.stories.tsx +2 -1
- package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +21 -28
- package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +4 -15
- package/src/Atom/Icon/_icon.css +7 -6
- package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +6 -9
- package/src/Atom/Link/Link.stories.tsx +2 -1
- package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +47 -56
- package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +4 -22
- package/src/Atom/Media/Media.stories.ts +1 -1
- package/src/Atom/Media/Media.stories.tsx +2 -1
- package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +27 -12
- package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +3 -16
- package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -8
- package/src/Atom/Table/TableResponsive.stories.ts +0 -1
- package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +129 -261
- package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +34 -67
- package/src/Atom/Text/Text.stories.tsx +2 -1
- package/src/Atom/Text/__snapshots__/Text.stories.ts.snap +32 -46
- package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +2 -6
- package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +6 -11
- package/src/Atom/_flow.css +16 -1
- package/src/Component/Accordion/Accordion.stories.tsx +2 -0
- package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +106 -140
- package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +3 -49
- package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +52 -81
- package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +2 -0
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +29 -33
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +3 -62
- package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +9 -11
- package/src/Component/Card/Card.stories.tsx +2 -0
- package/src/Component/Card/__snapshots__/Card.stories.ts.snap +237 -272
- package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +4 -85
- package/src/Component/Carousel/Elements/Carousel.ts +10 -7
- package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +992 -1187
- package/src/Component/ContentBlock/ContentBlock.stories.tsx +2 -0
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +161 -155
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +2 -25
- package/src/Component/Dialog/Dialog.stories.tsx +2 -0
- package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +92 -110
- package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -31
- package/src/Component/DropMenu/DropMenu.stories.tsx +2 -0
- package/src/Component/DropMenu/DropMenu.tsx +1 -3
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +25 -72
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +2 -46
- package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +80 -121
- package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +323 -424
- package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +2 -0
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +25 -37
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +3 -46
- package/src/Component/HeroBanner/HeroBanner.stories.tsx +2 -0
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +105 -106
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +3 -34
- package/src/Component/HeroSearch/HeroSearch.stories.tsx +2 -0
- package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +121 -158
- package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +3 -34
- package/src/Component/InPageAlert/InPageAlert.stories.tsx +2 -0
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +87 -70
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +5 -65
- package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +22 -3
- package/src/Component/InPageNavigation/InPageNavigation.stories.ts +11 -0
- package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +2 -0
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +93 -208
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -148
- package/src/Component/InPageNavigation/in-page-navigation.css +7 -0
- package/src/Component/InPageNavigation/in-page-navigation.twig +3 -2
- package/src/Component/LinkList/LinkList.stories.tsx +2 -1
- package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +67 -66
- package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +2 -32
- package/src/Component/ListItem/ListItem.stories.tsx +2 -1
- package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +153 -167
- package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +2 -25
- package/src/Component/Navigation/Dropdown.stories.tsx +2 -0
- package/src/Component/Navigation/Elements/Navigation.ts +5 -5
- package/src/Component/Navigation/Navigation.stories.tsx +2 -0
- package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -38
- package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +204 -279
- package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +3 -59
- package/src/Component/Navigation/_navigation.css +2 -2
- package/src/Component/Pagination/Pagination.stories.tsx +2 -0
- package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +70 -60
- package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +2 -62
- package/src/Component/Popover/Elements/Popover.ts +5 -1
- package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +366 -496
- package/src/Component/Popover/popover.css +3 -4
- package/src/Component/ResultsBar/ResultsBar.stories.tsx +2 -0
- package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +25 -46
- package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +4 -50
- package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +76 -81
- package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +35 -32
- package/src/Component/SocialShare/SocialShare.stories.tsx +2 -1
- package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +11 -27
- package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +4 -22
- package/src/Component/SocialShare/social-share.twig +1 -0
- package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +11 -23
- package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +142 -173
- package/src/Component/Sticky/Sticky.stories.tsx +2 -0
- package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +6 -12
- package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +2 -10
- package/src/Component/Tabs/Tabs.stories.tsx +2 -0
- package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +5 -9
- package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +37 -210
- package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -116
- package/src/Component/Tag/Tag.stories.tsx +2 -0
- package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +37 -61
- package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -6
- package/src/Component/Tag/tags.twig +6 -6
- package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +122 -245
- package/src/Component/UtilityList/utility-list.css +4 -0
- package/src/Component/UtilityList/utility-list.twig +2 -1
- package/src/Form/Checkbox/FormCheckbox.stories.tsx +2 -2
- package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +13 -26
- package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap +5 -0
- package/src/Form/Description/FormDescription.stories.tsx +2 -1
- package/src/Form/Description/__snapshots__/Description.stories.ts.snap +5 -9
- package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +2 -9
- package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +9 -17
- package/src/Form/Form/Form.stories.tsx +2 -1
- package/src/Form/Form/FormTitle.stories.tsx +2 -1
- package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +2 -5
- package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +2 -8
- package/src/Form/FormItem/FormItem.stories.tsx +8 -5
- package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +88 -129
- package/src/Form/Label/FormLabel.stories.tsx +2 -1
- package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +3 -18
- package/src/Form/Label/__snapshots__/Label.stories.ts.snap +13 -25
- package/src/Form/Radio/FormRadio.stories.tsx +2 -14
- package/src/Form/Radio/__snapshots__/FormRadio.stories.tsx.snap +3 -0
- package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +42 -57
- package/src/Form/Search/__snapshots__/Search.stories.ts.snap +11 -26
- package/src/Form/Search/search-form.twig +2 -1
- package/src/Form/Select/FormSelect.stories.tsx +2 -1
- package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +2 -22
- package/src/Form/Select/__snapshots__/Select.stories.ts.snap +8 -19
- package/src/Form/TextInput/FormText.stories.tsx +2 -1
- package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -12
- package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +11 -26
- package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +11 -25
- package/src/Form/Textarea/FormTextarea.stories.tsx +2 -1
- package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +2 -11
- package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +5 -11
- package/src/Layout/Footer/Footer.stories.ts +18 -1
- package/src/Layout/Footer/Footer.stories.tsx +2 -0
- package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +360 -301
- package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +3 -62
- package/src/Layout/Footer/footer.css +16 -35
- package/src/Layout/Footer/footer.twig +6 -6
- package/src/Layout/Grid/Grid.stories.tsx +2 -0
- package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +72 -66
- package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +6 -62
- package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +9 -13
- package/src/Layout/Header/Header.stories.tsx +2 -1
- package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +315 -466
- package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -58
- package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +86 -87
- package/src/Layout/Page/Page.stories.tsx +2 -0
- package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -81
- package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +51 -61
- package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +34 -78
- package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +54 -89
- package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +89 -99
- package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +4 -34
- package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +3 -35
- package/src/Layout/Section/section.twig +2 -2
- package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
- package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +49 -40
- package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +4 -44
- package/src/Layout/Sidebar/sidebar.css +2 -2
- package/src/Layout/Sidebar/sidebar.twig +8 -5
- package/src/Utility/_layout-utils.css +9 -1
- package/src/constants.css +2 -2
- package/src/tokens.js +2 -2
- package/.storybook/test-runner.ts +0 -77
- package/dist/build/accordion.entry.js.map +0 -1
- package/dist/build/chunks/Accordion-D1HQ0FDq.js +0 -63
- package/dist/build/chunks/Accordion-D1HQ0FDq.js.map +0 -1
- package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +0 -129
- package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +0 -1
- package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +0 -70
- package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +0 -1
- package/dist/build/chunks/polyfills-DnrsypYs.js +0 -812
- package/dist/build/chunks/polyfills-DnrsypYs.js.map +0 -1
- package/dist/build/chunks/popover-DzUcnIlX.js +0 -797
- package/dist/build/chunks/popover-DzUcnIlX.js.map +0 -1
- package/dist/build/chunks/popover.entry-BQvyR0d5.js +0 -38
- package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +0 -1
- package/dist/build/chunks/utilities-Ci7wwNeg.js +0 -148
- package/dist/build/chunks/utilities-Ci7wwNeg.js.map +0 -1
- package/dist/build/dialog.entry.js.map +0 -1
- package/dist/build/drop-menu.entry.js.map +0 -1
- package/dist/build/filters.entry.js.map +0 -1
- package/dist/build/global-alert.entry.js.map +0 -1
- package/dist/build/header.entry.js.map +0 -1
- package/dist/build/in-page-navigation.entry.js.map +0 -1
- package/dist/build/navigation.entry.js.map +0 -1
- package/dist/build/popover.entry.js.map +0 -1
- package/dist/build/sticky.entry.js.map +0 -1
- package/dist/build/tabs.entry.js.map +0 -1
- package/dist/build/utility-list.entry.js.map +0 -1
- package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +0 -110
package/dist/build/section.css
CHANGED
|
@@ -1,147 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Section
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.layouts {
|
|
6
|
-
.mx-container {
|
|
7
|
-
--container-name: container;
|
|
8
|
-
|
|
9
|
-
container-name: container;
|
|
10
|
-
|
|
11
|
-
container-name: var(--container-name);
|
|
12
|
-
container-type: inline-size;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.mx-section--divider {
|
|
16
|
-
border-block-start: 1px solid var(--colour-border);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.mx-section--s {
|
|
20
|
-
padding-block: var(--section-s, var(--spacing-s));
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.mx-section--m {
|
|
24
|
-
padding-block: var(--section-m, var(--spacing-m));
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.mx-section--l {
|
|
28
|
-
padding-block: var(--section-l, var(--spacing-xl));
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.mx-section--xl {
|
|
32
|
-
padding-block: var(--section-xl, var(--spacing-uul));
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.mx-section--top-s {
|
|
36
|
-
padding-block-start: var(--section-s, var(--spacing-s));
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.mx-section--top-m {
|
|
40
|
-
padding-block-start: var(--section-m, var(--spacing-m));
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.mx-section--top-l {
|
|
44
|
-
padding-block-start: var(--section-l, var(--spacing-xl));
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.mx-section--top-xl {
|
|
48
|
-
padding-block-start: var(--section-xl, var(--spacing-uul));
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.mx-section--bottom-s {
|
|
52
|
-
padding-block-end: var(--section-s, var(--spacing-s));
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.mx-section--bottom-m {
|
|
56
|
-
padding-block-end: var(--section-m, var(--spacing-m));
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.mx-section--bottom-l {
|
|
60
|
-
padding-block-end: var(--section-l, var(--spacing-xl));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.mx-section--bottom-xl {
|
|
64
|
-
padding-block-end: var(--section-xl, var(--spacing-uul));
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* Sections breakouts
|
|
70
|
-
*
|
|
71
|
-
* Uses `subgrid` so no supported in older browsers.
|
|
72
|
-
*/
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Sections flows & groups
|
|
76
|
-
*
|
|
77
|
-
* Uses `:has` so is not supported in older browsers.
|
|
78
|
-
* see https://www.bram.us/2022/12/13/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has/
|
|
79
|
-
*/
|
|
80
|
-
|
|
81
|
-
@layer design-system.layouts {
|
|
82
|
-
.mx-section--flow {
|
|
83
|
-
--flow-spacing: var(--section-l, var(--spacing-xl));
|
|
84
|
-
|
|
85
|
-
padding-block-end: var(--flow-spacing);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.mx-section--flow:is([class*="mx-background"],[class*="mx-background"] + .mx-section--flow,:not(.mx-section--flow:not(.mx-section--group) + .mx-section--flow)) {
|
|
89
|
-
padding-block-start: var(--flow-spacing);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.mx-section--group {
|
|
93
|
-
--group-spacing: var(--section-l, var(--spacing-xl));
|
|
94
|
-
|
|
95
|
-
padding-block: 0;
|
|
96
|
-
|
|
97
|
-
/* :first-in-island-of-class */
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.mx-section--group:is(:not([class*="mx-background"]) + .mx-section--group[class*="mx-background"],:not(.mx-section--group + .mx-section--group)) {
|
|
101
|
-
padding-block-start: var(--group-spacing);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/* :last-in-island-of-class */
|
|
105
|
-
|
|
106
|
-
.mx-section--group:is(:not([class*="mx-background"]):has( + .mx-section--group[class*="mx-background"]),:not(:has( + .mx-section--group))) {
|
|
107
|
-
padding-block-end: var(--group-spacing);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* :single-in-island-of-class */
|
|
111
|
-
|
|
112
|
-
.mx-section--group:not(.mx-section--group + .mx-section--group):not(:has( + .mx-section--group)) {
|
|
113
|
-
padding-block: var(--group-spacing);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/**
|
|
118
|
-
* Section header
|
|
119
|
-
*/
|
|
120
|
-
|
|
121
|
-
@layer design-system.layouts {
|
|
122
|
-
.mx-section__header {
|
|
123
|
-
margin-block-end: var(--spacing-m);
|
|
124
|
-
display: flex;
|
|
125
|
-
flex-flow: row wrap;
|
|
126
|
-
gap: var(--spacing-s);
|
|
127
|
-
align-items: center;
|
|
128
|
-
justify-content: space-between;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Section Background image
|
|
134
|
-
*/
|
|
135
|
-
|
|
136
|
-
@layer design-system.layouts {
|
|
137
|
-
:is(.mx-section--has-background, .mx-section:has(.mx-background--image)) {
|
|
138
|
-
overflow: hidden;
|
|
139
|
-
position: relative;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
:is(.mx-section--has-background,.mx-section:has(.mx-background--image)) > div {
|
|
143
|
-
position: relative;
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY3Rpb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSwyQkFBMkI7O0lBRTNCLHlCQUFxQzs7SUFBckMscUNBQXFDO0lBQ3JDLDJCQUEyQjtFQUM3Qjs7RUFFQTtJQUNFLGtEQUFrRDtFQUNwRDs7RUFFQTtJQUNFLGlEQUFpRDtFQUNuRDs7RUFFQTtJQUNFLGlEQUFpRDtFQUNuRDs7RUFFQTtJQUNFLGtEQUFrRDtFQUNwRDs7RUFFQTtJQUNFLG9EQUFvRDtFQUN0RDs7RUFFQTtJQUNFLHVEQUF1RDtFQUN6RDs7RUFFQTtJQUNFLHVEQUF1RDtFQUN6RDs7RUFFQTtJQUNFLHdEQUF3RDtFQUMxRDs7RUFFQTtJQUNFLDBEQUEwRDtFQUM1RDs7RUFFQTtJQUNFLHFEQUFxRDtFQUN2RDs7RUFFQTtJQUNFLHFEQUFxRDtFQUN2RDs7RUFFQTtJQUNFLHNEQUFzRDtFQUN4RDs7RUFFQTtJQUNFLHdEQUF3RDtFQUMxRDtBQUNGOztBQUVBOzs7O0VBSUU7O0FBRUY7Ozs7O0VBS0U7O0FBRUY7RUFDRTtJQUNFLG1EQUFtRDs7SUFFbkQsc0NBQXNDO0VBU3hDOztJQVBFO01BS0Usd0NBQXdDO0lBQzFDOztFQUdGO0lBQ0Usb0RBQW9EOztJQUVwRCxnQkFBZ0I7O0lBRWhCLDhCQUE4QjtFQXVCaEM7O0lBckJFO01BSUUseUNBQXlDO0lBQzNDOztJQUVBLDZCQUE2Qjs7SUFFN0I7TUFJRSx1Q0FBdUM7SUFDekM7O0lBRUEsK0JBQStCOztJQUUvQjtNQUNFLG1DQUFtQztJQUNyQztBQUVKOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxrQ0FBa0M7SUFDbEMsYUFBYTtJQUNiLG1CQUFtQjtJQUNuQixxQkFBcUI7SUFDckIsbUJBQW1CO0lBQ25CLDhCQUE4QjtFQUNoQztBQUNGOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsa0JBQWtCO0VBS3BCOztJQUhFO01BQ0Usa0JBQWtCO0lBQ3BCO0FBRUoiLCJmaWxlIjoic2VjdGlvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFNlY3Rpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWNvbnRhaW5lciB7XG4gICAgLS1jb250YWluZXItbmFtZTogY29udGFpbmVyO1xuXG4gICAgY29udGFpbmVyLW5hbWU6IHZhcigtLWNvbnRhaW5lci1uYW1lKTtcbiAgICBjb250YWluZXItdHlwZTogaW5saW5lLXNpemU7XG4gIH1cblxuICAubXgtc2VjdGlvbi0tZGl2aWRlciB7XG4gICAgYm9yZGVyLWJsb2NrLXN0YXJ0OiAxcHggc29saWQgdmFyKC0tY29sb3VyLWJvcmRlcik7XG4gIH1cblxuICAubXgtc2VjdGlvbi0tcyB7XG4gICAgcGFkZGluZy1ibG9jazogdmFyKC0tc2VjdGlvbi1zLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgfVxuXG4gIC5teC1zZWN0aW9uLS1tIHtcbiAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zZWN0aW9uLW0sIHZhcigtLXNwYWNpbmctbSkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLWwge1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXNlY3Rpb24tbCwgdmFyKC0tc3BhY2luZy14bCkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXhsIHtcbiAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zZWN0aW9uLXhsLCB2YXIoLS1zcGFjaW5nLXV1bCkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXRvcC1zIHtcbiAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zZWN0aW9uLXMsIHZhcigtLXNwYWNpbmctcykpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXRvcC1tIHtcbiAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zZWN0aW9uLW0sIHZhcigtLXNwYWNpbmctbSkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLXRvcC1sIHtcbiAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zZWN0aW9uLWwsIHZhcigtLXNwYWNpbmcteGwpKTtcbiAgfVxuXG4gIC5teC1zZWN0aW9uLS10b3AteGwge1xuICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLXNlY3Rpb24teGwsIHZhcigtLXNwYWNpbmctdXVsKSk7XG4gIH1cblxuICAubXgtc2VjdGlvbi0tYm90dG9tLXMge1xuICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1zZWN0aW9uLXMsIHZhcigtLXNwYWNpbmctcykpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLWJvdHRvbS1tIHtcbiAgICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tc2VjdGlvbi1tLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgfVxuXG4gIC5teC1zZWN0aW9uLS1ib3R0b20tbCB7XG4gICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLXNlY3Rpb24tbCwgdmFyKC0tc3BhY2luZy14bCkpO1xuICB9XG5cbiAgLm14LXNlY3Rpb24tLWJvdHRvbS14bCB7XG4gICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLXNlY3Rpb24teGwsIHZhcigtLXNwYWNpbmctdXVsKSk7XG4gIH1cbn1cblxuLyoqXG4gKiBTZWN0aW9ucyBicmVha291dHNcbiAqXG4gKiBVc2VzIGBzdWJncmlkYCBzbyBubyBzdXBwb3J0ZWQgaW4gb2xkZXIgYnJvd3NlcnMuXG4gKi9cblxuLyoqXG4gKiBTZWN0aW9ucyBmbG93cyAmIGdyb3Vwc1xuICpcbiAqIFVzZXMgYDpoYXNgIHNvIGlzIG5vdCBzdXBwb3J0ZWQgaW4gb2xkZXIgYnJvd3NlcnMuXG4gKiBzZWUgaHR0cHM6Ly93d3cuYnJhbS51cy8yMDIyLzEyLzEzL3F1YW50aXR5LXF1ZXJpZXMtZm9yLWlzbGFuZHMtb2YtZWxlbWVudHMtd2l0aC10aGUtc2FtZS1jbGFzcy10aGFua3MtdG8tY3NzLWhhcy9cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LXNlY3Rpb24tLWZsb3cge1xuICAgIC0tZmxvdy1zcGFjaW5nOiB2YXIoLS1zZWN0aW9uLWwsIHZhcigtLXNwYWNpbmcteGwpKTtcblxuICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1mbG93LXNwYWNpbmcpO1xuXG4gICAgJjppcyhcbiAgICAgIFtjbGFzcyo9XCJteC1iYWNrZ3JvdW5kXCJdLFxuICAgICAgW2NsYXNzKj1cIm14LWJhY2tncm91bmRcIl0gKyAubXgtc2VjdGlvbi0tZmxvdyxcbiAgICAgIDpub3QoLm14LXNlY3Rpb24tLWZsb3c6bm90KC5teC1zZWN0aW9uLS1ncm91cCkgKyAubXgtc2VjdGlvbi0tZmxvdylcbiAgICApIHtcbiAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLWZsb3ctc3BhY2luZyk7XG4gICAgfVxuICB9XG5cbiAgLm14LXNlY3Rpb24tLWdyb3VwIHtcbiAgICAtLWdyb3VwLXNwYWNpbmc6IHZhcigtLXNlY3Rpb24tbCwgdmFyKC0tc3BhY2luZy14bCkpO1xuXG4gICAgcGFkZGluZy1ibG9jazogMDtcblxuICAgIC8qIDpmaXJzdC1pbi1pc2xhbmQtb2YtY2xhc3MgKi9cblxuICAgICY6aXMoXG4gICAgICA6bm90KFtjbGFzcyo9XCJteC1iYWNrZ3JvdW5kXCJdKSArIC5teC1zZWN0aW9uLS1ncm91cFtjbGFzcyo9XCJteC1iYWNrZ3JvdW5kXCJdLFxuICAgICAgOm5vdCgubXgtc2VjdGlvbi0tZ3JvdXAgKyAubXgtc2VjdGlvbi0tZ3JvdXApXG4gICAgKSB7XG4gICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1ncm91cC1zcGFjaW5nKTtcbiAgICB9XG5cbiAgICAvKiA6bGFzdC1pbi1pc2xhbmQtb2YtY2xhc3MgKi9cblxuICAgICY6aXMoXG4gICAgICA6bm90KFtjbGFzcyo9XCJteC1iYWNrZ3JvdW5kXCJdKTpoYXMoKyAubXgtc2VjdGlvbi0tZ3JvdXBbY2xhc3MqPVwibXgtYmFja2dyb3VuZFwiXSksXG4gICAgICA6bm90KDpoYXMoKyAubXgtc2VjdGlvbi0tZ3JvdXApKVxuICAgICkge1xuICAgICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLWdyb3VwLXNwYWNpbmcpO1xuICAgIH1cblxuICAgIC8qIDpzaW5nbGUtaW4taXNsYW5kLW9mLWNsYXNzICovXG5cbiAgICAmOm5vdCgubXgtc2VjdGlvbi0tZ3JvdXAgKyAubXgtc2VjdGlvbi0tZ3JvdXAsIDpoYXMoKyAubXgtc2VjdGlvbi0tZ3JvdXApKSB7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1ncm91cC1zcGFjaW5nKTtcbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBTZWN0aW9uIGhlYWRlclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtc2VjdGlvbl9faGVhZGVyIHtcbiAgICBtYXJnaW4tYmxvY2stZW5kOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1mbG93OiByb3cgd3JhcDtcbiAgICBnYXA6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIH1cbn1cblxuLyoqXG4gKiBTZWN0aW9uIEJhY2tncm91bmQgaW1hZ2VcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgOmlzKC5teC1zZWN0aW9uLS1oYXMtYmFja2dyb3VuZCwgLm14LXNlY3Rpb246aGFzKC5teC1iYWNrZ3JvdW5kLS1pbWFnZSkpIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICYgPiBkaXYge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgfVxufVxuIl19 */
|
|
1
|
+
@layer design-system.layouts{.mx-container{--container-name: container;container-name:container;container-name:var(--container-name);container-type:inline-size}.mx-section--divider{border-block-start:1px solid var(--colour-border)}.mx-section--s{padding-block:var(--section-s, var(--spacing-s))}.mx-section--m{padding-block:var(--section-m, var(--spacing-m))}.mx-section--l{padding-block:var(--section-l, var(--spacing-xl))}.mx-section--xl{padding-block:var(--section-xl, var(--spacing-uul))}.mx-section--top-s{padding-block-start:var(--section-s, var(--spacing-s))}.mx-section--top-m{padding-block-start:var(--section-m, var(--spacing-m))}.mx-section--top-l{padding-block-start:var(--section-l, var(--spacing-xl))}.mx-section--top-xl{padding-block-start:var(--section-xl, var(--spacing-uul))}.mx-section--bottom-s{padding-block-end:var(--section-s, var(--spacing-s))}.mx-section--bottom-m{padding-block-end:var(--section-m, var(--spacing-m))}.mx-section--bottom-l{padding-block-end:var(--section-l, var(--spacing-xl))}.mx-section--bottom-xl{padding-block-end:var(--section-xl, var(--spacing-uul))}}@layer design-system.layouts{.mx-section--flow{--flow-spacing: var(--section-l, var(--spacing-xl));padding-block-end:var(--flow-spacing)}.mx-section--flow:is([class*=mx-background],[class*=mx-background]+.mx-section--flow,:not(.mx-section--flow:not(.mx-section--group)+.mx-section--flow)){padding-block-start:var(--flow-spacing)}.mx-section--group{--group-spacing: var(--section-l, var(--spacing-xl));padding-block:0}.mx-section--group:is(:not([class*=mx-background])+.mx-section--group[class*=mx-background],:not(.mx-section--group+.mx-section--group)){padding-block-start:var(--group-spacing)}.mx-section--group:is(:not([class*=mx-background]):has(+.mx-section--group[class*=mx-background]),:not(:has(+.mx-section--group))){padding-block-end:var(--group-spacing)}.mx-section--group:not(.mx-section--group+.mx-section--group):not(:has(+.mx-section--group)){padding-block:var(--group-spacing)}}@layer design-system.layouts{.mx-section__header{margin-block-end:var(--spacing-m);display:flex;flex-flow:row wrap;gap:var(--spacing-s);align-items:center;justify-content:space-between}}@layer design-system.layouts{:is(.mx-section--has-background,.mx-section:has(.mx-background--image)){overflow:hidden;position:relative}:is(.mx-section--has-background,.mx-section:has(.mx-background--image))>div{position:relative}}
|
|
@@ -1,85 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Side navigation
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.components {
|
|
6
|
-
.mx-side-nav__parent {
|
|
7
|
-
border-block-end: 2px solid
|
|
8
|
-
currentcolor;
|
|
9
|
-
border-block-end: var(--line-width, 2px) solid
|
|
10
|
-
var(--line-colour, currentcolor);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.mx-side-nav__parent a {
|
|
14
|
-
display: block;
|
|
15
|
-
color: inherit;
|
|
16
|
-
padding: var(--item-spacing, var(--spacing-xxs));
|
|
17
|
-
font-weight: var(--font-weight-bold);
|
|
18
|
-
text-decoration-line: none;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:is(.mx-side-nav__parent a):hover {
|
|
22
|
-
text-decoration-line: underline;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.mx-side-nav {
|
|
26
|
-
--outline-offset: -0.0625rem;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.mx-side-nav ul li {
|
|
30
|
-
position: relative;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:is(.mx-side-nav ul li):has([aria-current="page"],.is-active) > a {
|
|
34
|
-
font-weight: var(--font-weight-bold);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:is(.mx-side-nav ul li) a {
|
|
38
|
-
display: block;
|
|
39
|
-
color: inherit;
|
|
40
|
-
border-block-end: 1px solid
|
|
41
|
-
var(--line-colour, var(--colour-border));
|
|
42
|
-
border-block-end: var(--line-width, 1px) solid
|
|
43
|
-
var(--line-colour, var(--colour-border));
|
|
44
|
-
padding-block: var(--item-spacing, var(--spacing-xxs));
|
|
45
|
-
padding-inline: var(--indent, var(--spacing-xxs))
|
|
46
|
-
var(--item-spacing, var(--spacing-xxs));
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.mx-side-nav .mx-nav__level-2 > li > a {
|
|
50
|
-
--indent: var(--spacing-s);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
@media (min-width: 720px) {
|
|
54
|
-
|
|
55
|
-
.mx-side-nav .mx-nav__level-2 > li > a {
|
|
56
|
-
--indent: var(--spacing-m);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.mx-side-nav .mx-nav__level-3 > li > a {
|
|
61
|
-
--indent: var(--spacing-m);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@media (min-width: 720px) {
|
|
65
|
-
|
|
66
|
-
.mx-side-nav .mx-nav__level-3 > li > a {
|
|
67
|
-
--indent: var(--spacing-l);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.mx-side-nav :is([aria-current="page"],.is-active > a) {
|
|
72
|
-
background-color: var(
|
|
73
|
-
--nav-active-background,
|
|
74
|
-
var(--background, var(--colour-background-alt))
|
|
75
|
-
);
|
|
76
|
-
color: inherit;
|
|
77
|
-
color: var(--nav-active-foreground, inherit);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.mx-side-nav .mx-nav__toggle {
|
|
81
|
-
display: none;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpZGUtbmF2aWdhdGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFO2tCQUNrQztJQURsQztzQ0FDa0M7RUFhcEM7O0lBWEU7TUFDRSxjQUFjO01BQ2QsY0FBYztNQUNkLGdEQUFnRDtNQUNoRCxvQ0FBb0M7TUFDcEMsMEJBQTBCO0lBSzVCOztNQUhFO1FBQ0UsK0JBQStCO01BQ2pDOztFQUlKO0lBQ0UsNEJBQXNCO0VBK0N4Qjs7SUE3Q0U7TUFDRSxrQkFBa0I7SUFlcEI7O01BYkU7UUFDRSxvQ0FBb0M7TUFDdEM7O01BRUE7UUFDRSxjQUFjO1FBQ2QsY0FBYztRQUNkO2tEQUMwQztRQUQxQztrREFDMEM7UUFDMUMsc0RBQXNEO1FBQ3REO2lEQUN5QztNQUMzQzs7SUFHRjtNQUNFLDBCQUEwQjtJQUs1Qjs7TUFIRTs7SUFIRjtRQUlJLDBCQUEwQjtJQUU5QjtNQURFOztJQUdGO01BQ0UsMEJBQTBCO0lBSzVCOztNQUhFOztJQUhGO1FBSUksMEJBQTBCO0lBRTlCO01BREU7O0lBR0Y7TUFDRTs7O09BR0M7TUFDRCxjQUE0QztNQUE1Qyw0Q0FBNEM7SUFDOUM7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7QUFFSiIsImZpbGUiOiJzaWRlLW5hdmlnYXRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBTaWRlIG5hdmlnYXRpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXNpZGUtbmF2X19wYXJlbnQge1xuICAgIGJvcmRlci1ibG9jay1lbmQ6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCBjdXJyZW50Y29sb3IpO1xuXG4gICAgJiBhIHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBwYWRkaW5nOiB2YXIoLS1pdGVtLXNwYWNpbmcsIHZhcigtLXNwYWNpbmcteHhzKSk7XG4gICAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtYm9sZCk7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcblxuICAgICAgJjpob3ZlciB7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm14LXNpZGUtbmF2IHtcbiAgICAtLW91dGxpbmUtb2Zmc2V0OiAtMXB4O1xuXG4gICAgJiB1bCBsaSB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAgICY6aGFzKFthcmlhLWN1cnJlbnQ9XCJwYWdlXCJdLCAuaXMtYWN0aXZlKSA+IGEge1xuICAgICAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtYm9sZCk7XG4gICAgICB9XG5cbiAgICAgICYgYSB7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgICAgYm9yZGVyLWJsb2NrLWVuZDogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLWl0ZW0tc3BhY2luZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWluZGVudCwgdmFyKC0tc3BhY2luZy14eHMpKVxuICAgICAgICAgIHZhcigtLWl0ZW0tc3BhY2luZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1uYXZfX2xldmVsLTIgPiBsaSA+IGEge1xuICAgICAgLS1pbmRlbnQ6IHZhcigtLXNwYWNpbmctcyk7XG5cbiAgICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICAgIC0taW5kZW50OiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgLm14LW5hdl9fbGV2ZWwtMyA+IGxpID4gYSB7XG4gICAgICAtLWluZGVudDogdmFyKC0tc3BhY2luZy1tKTtcblxuICAgICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgICAgLS1pbmRlbnQ6IHZhcigtLXNwYWNpbmctbCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiA6aXMoW2FyaWEtY3VycmVudD1cInBhZ2VcIl0sIC5pcy1hY3RpdmUgPiBhKSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoXG4gICAgICAgIC0tbmF2LWFjdGl2ZS1iYWNrZ3JvdW5kLFxuICAgICAgICB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZC1hbHQpKVxuICAgICAgKTtcbiAgICAgIGNvbG9yOiB2YXIoLS1uYXYtYWN0aXZlLWZvcmVncm91bmQsIGluaGVyaXQpO1xuICAgIH1cblxuICAgICYgLm14LW5hdl9fdG9nZ2xlIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG4iXX0= */
|
|
1
|
+
@layer design-system.components{.mx-side-nav__parent{border-block-end:2px solid currentcolor;border-block-end:var(--line-width, 2px) solid var(--line-colour, currentcolor)}.mx-side-nav__parent a{display:block;color:inherit;padding:var(--item-spacing, var(--spacing-xxs));font-weight:var(--font-weight-bold);text-decoration-line:none}:is(.mx-side-nav__parent a):hover{text-decoration-line:underline}.mx-side-nav{--outline-offset: -.0625rem}.mx-side-nav ul li{position:relative}:is(.mx-side-nav ul li):has([aria-current=page],.is-active)>a{font-weight:var(--font-weight-bold)}:is(.mx-side-nav ul li) a{display:block;color:inherit;border-block-end:1px solid var(--line-colour, var(--colour-border));border-block-end:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));padding-block:var(--item-spacing, var(--spacing-xxs));padding-inline:var(--indent, var(--spacing-xxs)) var(--item-spacing, var(--spacing-xxs))}.mx-side-nav .mx-nav__level-2>li>a{--indent: var(--spacing-s)}@media(min-width:720px){.mx-side-nav .mx-nav__level-2>li>a{--indent: var(--spacing-m)}}.mx-side-nav .mx-nav__level-3>li>a{--indent: var(--spacing-m)}@media(min-width:720px){.mx-side-nav .mx-nav__level-3>li>a{--indent: var(--spacing-l)}}.mx-side-nav :is([aria-current=page],.is-active>a){background-color:var( --nav-active-background, var(--background, var(--colour-background-alt)) );color:inherit;color:var(--nav-active-foreground, inherit)}.mx-side-nav .mx-nav__toggle{display:none}}
|
package/dist/build/sidebar.css
CHANGED
|
@@ -1,53 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Page with Sidebar
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.layouts {
|
|
6
|
-
.mx-grid--sidebar:where(:not(:has( > aside))) {
|
|
7
|
-
grid-column: narrow;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.mx-grid--sidebar:where(:has( > aside)) {
|
|
11
|
-
display: flex;
|
|
12
|
-
flex-wrap: wrap;
|
|
13
|
-
gap: var(--sidebar-gap, var(--gap));
|
|
14
|
-
justify-content: space-between;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.mx-grid--sidebar:where(:has( > aside)) > aside {
|
|
18
|
-
flex-grow: 1;
|
|
19
|
-
max-inline-size: 24ch;
|
|
20
|
-
max-inline-size: var(--sidebar-width, 24ch);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.mx-grid--sidebar:where(:has( > aside)) > section {
|
|
24
|
-
flex-basis: 0;
|
|
25
|
-
flex-grow: 999;
|
|
26
|
-
min-inline-size: 50%;
|
|
27
|
-
min-inline-size: var(--content-min, 50%);
|
|
28
|
-
max-inline-size: 76ch;
|
|
29
|
-
max-inline-size: var(--container-max-width, 76ch);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.mx-grid--sidebar.mx-grid--sidebar-rev:where(:has( > aside)) {
|
|
33
|
-
flex-direction: row-reverse;
|
|
34
|
-
}
|
|
35
|
-
@media (min-width: 720px) {
|
|
36
|
-
|
|
37
|
-
.mx-grid--sidebar.mx-grid--sidebar-rev-lg:where(:has( > aside)) {
|
|
38
|
-
flex-direction: row-reverse;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Print stylesheet
|
|
45
|
-
*/
|
|
46
|
-
|
|
47
|
-
@media print {
|
|
48
|
-
.mx-page__sidebar {
|
|
49
|
-
display: none;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpZGViYXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxtQkFBbUI7SUFDckI7O0lBRUE7TUFDRSxhQUFhO01BQ2IsZUFBZTtNQUNmLG1DQUFtQztNQUNuQyw4QkFBOEI7SUF1QmhDOztNQXJCRTtRQUNFLFlBQVk7UUFDWixxQkFBMkM7UUFBM0MsMkNBQTJDO01BQzdDOztNQUVBO1FBQ0UsYUFBYTtRQUNiLGNBQWM7UUFDZCxvQkFBd0M7UUFBeEMsd0NBQXdDO1FBQ3hDLHFCQUFpRDtRQUFqRCxpREFBaUQ7TUFDbkQ7O01BRUE7UUFDRSwyQkFBMkI7TUFDN0I7UUFHRTs7TUFERjtVQUVJLDJCQUEyQjtNQUUvQjtRQURFO0FBSVI7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6InNpZGViYXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBQYWdlIHdpdGggU2lkZWJhclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtZ3JpZC0tc2lkZWJhciB7XG4gICAgJjp3aGVyZSg6bm90KDpoYXMoPiBhc2lkZSkpKSB7XG4gICAgICBncmlkLWNvbHVtbjogbmFycm93O1xuICAgIH1cblxuICAgICY6d2hlcmUoOmhhcyg+IGFzaWRlKSkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICAgIGdhcDogdmFyKC0tc2lkZWJhci1nYXAsIHZhcigtLWdhcCkpO1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXG4gICAgICAmID4gYXNpZGUge1xuICAgICAgICBmbGV4LWdyb3c6IDE7XG4gICAgICAgIG1heC1pbmxpbmUtc2l6ZTogdmFyKC0tc2lkZWJhci13aWR0aCwgMjRjaCk7XG4gICAgICB9XG5cbiAgICAgICYgPiBzZWN0aW9uIHtcbiAgICAgICAgZmxleC1iYXNpczogMDtcbiAgICAgICAgZmxleC1ncm93OiA5OTk7XG4gICAgICAgIG1pbi1pbmxpbmUtc2l6ZTogdmFyKC0tY29udGVudC1taW4sIDUwJSk7XG4gICAgICAgIG1heC1pbmxpbmUtc2l6ZTogdmFyKC0tY29udGFpbmVyLW1heC13aWR0aCwgNzZjaCk7XG4gICAgICB9XG5cbiAgICAgICYubXgtZ3JpZC0tc2lkZWJhci1yZXYge1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7XG4gICAgICB9XG5cbiAgICAgICYubXgtZ3JpZC0tc2lkZWJhci1yZXYtbGcge1xuICAgICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgICAgZmxleC1kaXJlY3Rpb246IHJvdy1yZXZlcnNlO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1wYWdlX19zaWRlYmFyIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */
|
|
1
|
+
@layer design-system.layouts{.mx-grid--sidebar:where(:not(:has(>aside))){grid-column:narrow}.mx-grid--sidebar:where(:has(>aside)){display:flex;flex-wrap:wrap;gap:var(--sidebar-gap, var(--gap));justify-content:space-between}.mx-grid--sidebar:where(:has(>aside))>aside{flex-grow:1;max-inline-size:24ch;max-inline-size:var(--sidebar-width, 24ch)}.mx-grid--sidebar:where(:has(>aside))>section{flex-basis:0;flex-grow:999;min-inline-size:50%;min-inline-size:var(--content-min, 50%);max-inline-size:76ch;max-inline-size:var(--container-max-width, 76ch)}.mx-grid--sidebar.mx-grid--sidebar-rev:where(:has(>aside)){flex-direction:row-reverse}@media(min-width:720px){.mx-grid--sidebar.mx-grid--sidebar-rev-lg:where(:has(>aside)){flex-direction:row-reverse}}}@media print{.mx-grid--sidebar{flex-direction:column}}
|
|
@@ -1,20 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Social links
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.components {
|
|
6
|
-
.mx-social-links {
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-flow: row wrap;
|
|
9
|
-
align-items: center;
|
|
10
|
-
gap: var(--nav-gap, var(--spacing-s));
|
|
11
|
-
color: inherit;
|
|
12
|
-
color: var(--foreground, inherit);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.mx-social-links a {
|
|
16
|
-
color: inherit;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvY2lhbC1saW5rcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGFBQWE7SUFDYixtQkFBbUI7SUFDbkIsbUJBQW1CO0lBQ25CLHFDQUFxQztJQUNyQyxjQUFpQztJQUFqQyxpQ0FBaUM7RUFLbkM7O0lBSEU7TUFDRSxjQUFjO0lBQ2hCO0FBRUoiLCJmaWxlIjoic29jaWFsLWxpbmtzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU29jaWFsIGxpbmtzXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1zb2NpYWwtbGlua3Mge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1mbG93OiByb3cgd3JhcDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogdmFyKC0tbmF2LWdhcCwgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgY29sb3I6IHZhcigtLWZvcmVncm91bmQsIGluaGVyaXQpO1xuXG4gICAgJiBhIHtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuICAgIH1cbiAgfVxufVxuIl19 */
|
|
1
|
+
@layer design-system.components{.mx-social-links{display:flex;flex-flow:row wrap;align-items:center;gap:var(--nav-gap, var(--spacing-s));color:inherit;color:var(--foreground, inherit)}.mx-social-links a{color:inherit}}
|
package/dist/build/steps.css
CHANGED
|
@@ -1,118 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Steps
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.components {
|
|
6
|
-
.mx-steps {
|
|
7
|
-
counter-reset: step;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.mx-steps__panel {
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.mx-steps__panel::before {
|
|
15
|
-
content: "";
|
|
16
|
-
border: 2px solid
|
|
17
|
-
var(--line-colour, var(--colour-border));
|
|
18
|
-
border: var(--line-width, 2px) solid
|
|
19
|
-
var(--line-colour, var(--colour-border));
|
|
20
|
-
background-color: var(--background, var(--colour-background));
|
|
21
|
-
border-radius: 100%;
|
|
22
|
-
inline-size: 2rem;
|
|
23
|
-
inline-size: var(--counter-size, 2rem);
|
|
24
|
-
block-size: 2rem;
|
|
25
|
-
block-size: var(--counter-size, 2rem);
|
|
26
|
-
inset-block-start: 0;
|
|
27
|
-
inset-block-start: var(--counter-top, 0);
|
|
28
|
-
inset-inline-start: 0;
|
|
29
|
-
position: absolute;
|
|
30
|
-
z-index: 2;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.mx-steps__panel::after {
|
|
34
|
-
align-items: center;
|
|
35
|
-
color: inherit;
|
|
36
|
-
color: var(--foreground, inherit);
|
|
37
|
-
counter-increment: step;
|
|
38
|
-
content: counter(step) "";
|
|
39
|
-
display: flex;
|
|
40
|
-
font-size: var(--font-size-s);
|
|
41
|
-
font-weight: var(--font-weight-bold);
|
|
42
|
-
line-height: var(--line-height-ui);
|
|
43
|
-
inline-size: calc(
|
|
44
|
-
2rem + (2px * 2)
|
|
45
|
-
);
|
|
46
|
-
inline-size: calc(
|
|
47
|
-
var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
|
|
48
|
-
);
|
|
49
|
-
block-size: calc(
|
|
50
|
-
2rem + (2px * 2)
|
|
51
|
-
);
|
|
52
|
-
block-size: calc(
|
|
53
|
-
var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
|
|
54
|
-
);
|
|
55
|
-
justify-content: center;
|
|
56
|
-
inset-block-start: 0;
|
|
57
|
-
inset-block-start: var(--counter-top, 0);
|
|
58
|
-
inset-inline-start: 0;
|
|
59
|
-
position: absolute;
|
|
60
|
-
z-index: 3;
|
|
61
|
-
visibility: hidden;
|
|
62
|
-
visibility: var(--counter-visibility, hidden);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.mx-steps__panel:last-child {
|
|
66
|
-
--spacing: 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.mx-steps__panel:has(.mx-steps__panel-content h3:first-child) {
|
|
70
|
-
--counter-top: -0.125rem;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.mx-steps__panel:has(.mx-steps__panel-content h4:first-child) {
|
|
74
|
-
--counter-top: -0.25rem;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.mx-steps__panel-content {
|
|
78
|
-
padding-block: 0 var(--spacing, var(--spacing-l));
|
|
79
|
-
padding-inline-start: var(--indent, var(--spacing-xxl));
|
|
80
|
-
inline-size: min(100%, var(--container-max-width));
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.mx-steps__panel-content::before {
|
|
84
|
-
content: "";
|
|
85
|
-
inline-size: 2px;
|
|
86
|
-
inline-size: var(--line-width, 2px);
|
|
87
|
-
background-color: var(--line-colour, var(--colour-border));
|
|
88
|
-
inset-inline-start: calc(
|
|
89
|
-
(2rem / 2) + (2px)
|
|
90
|
-
);
|
|
91
|
-
inset-inline-start: calc(
|
|
92
|
-
(var(--counter-size, 2rem) / 2) + (var(--line-width, 2px))
|
|
93
|
-
);
|
|
94
|
-
inset-block: 0;
|
|
95
|
-
position: absolute;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.mx-steps--dark {
|
|
99
|
-
--line-colour: var(--colour-primary);
|
|
100
|
-
--counter-foreground: var(--colour-foreground-reverse);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.mx-steps--supplementary {
|
|
104
|
-
--line-colour: var(--colour-accent);
|
|
105
|
-
--counter-foreground: var(--colour-foreground-reverse);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.mx-steps--fill:where(:not(:has(.mx-steps--fill))) {
|
|
109
|
-
--background: var(--line-colour, var(--colour-border));
|
|
110
|
-
--foreground: var(--counter-foreground, inherit);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.mx-steps--counters {
|
|
114
|
-
--counter-visibility: visible;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZXBzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0Usa0JBQWtCO0VBa0RwQjs7SUFoREU7TUFDRSxXQUFXO01BQ1g7Z0RBQzBDO01BRDFDO2dEQUMwQztNQUMxQyw2REFBNkQ7TUFDN0QsbUJBQW1CO01BQ25CLGlCQUFzQztNQUF0QyxzQ0FBc0M7TUFDdEMsZ0JBQXFDO01BQXJDLHFDQUFxQztNQUNyQyxvQkFBd0M7TUFBeEMsd0NBQXdDO01BQ3hDLHFCQUFxQjtNQUNyQixrQkFBa0I7TUFDbEIsVUFBVTtJQUNaOztJQUVBO01BQ0UsbUJBQW1CO01BQ25CLGNBQWlDO01BQWpDLGlDQUFpQztNQUNqQyx1QkFBdUI7TUFDdkIseUJBQXlCO01BQ3pCLGFBQWE7TUFDYiw2QkFBNkI7TUFDN0Isb0NBQW9DO01BQ3BDLGtDQUFrQztNQUNsQzs7T0FFQztNQUZEOztPQUVDO01BQ0Q7O09BRUM7TUFGRDs7T0FFQztNQUNELHVCQUF1QjtNQUN2QixvQkFBd0M7TUFBeEMsd0NBQXdDO01BQ3hDLHFCQUFxQjtNQUNyQixrQkFBa0I7TUFDbEIsVUFBVTtNQUNWLGtCQUE2QztNQUE3Qyw2Q0FBNkM7SUFDL0M7O0lBRUE7TUFDRSxZQUFZO0lBQ2Q7O0lBRUE7TUFDRSx3QkFBbUI7SUFDckI7O0lBRUE7TUFDRSx1QkFBbUI7SUFDckI7O0VBR0Y7SUFDRSxpREFBaUQ7SUFDakQsdURBQXVEO0lBQ3ZELGtEQUFrRDtFQVlwRDs7SUFWRTtNQUNFLFdBQVc7TUFDWCxnQkFBbUM7TUFBbkMsbUNBQW1DO01BQ25DLDBEQUEwRDtNQUMxRDs7T0FFQztNQUZEOztPQUVDO01BQ0QsY0FBYztNQUNkLGtCQUFrQjtJQUNwQjs7RUFHRjtJQUNFLG9DQUFvQztJQUNwQyxzREFBc0Q7RUFDeEQ7O0VBRUE7SUFDRSxtQ0FBbUM7SUFDbkMsc0RBQXNEO0VBQ3hEOztFQUVBO0lBQ0Usc0RBQXNEO0lBQ3RELGdEQUFnRDtFQUNsRDs7RUFFQTtJQUNFLDZCQUE2QjtFQUMvQjtBQUNGIiwiZmlsZSI6InN0ZXBzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU3RlcHNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXN0ZXBzIHtcbiAgICBjb3VudGVyLXJlc2V0OiBzdGVwO1xuICB9XG5cbiAgLm14LXN0ZXBzX19wYW5lbCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmQsIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSk7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgICAgaW5saW5lLXNpemU6IHZhcigtLWNvdW50ZXItc2l6ZSwgMnJlbSk7XG4gICAgICBibG9jay1zaXplOiB2YXIoLS1jb3VudGVyLXNpemUsIDJyZW0pO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IHZhcigtLWNvdW50ZXItdG9wLCAwKTtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHotaW5kZXg6IDI7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCBpbmhlcml0KTtcbiAgICAgIGNvdW50ZXItaW5jcmVtZW50OiBzdGVwO1xuICAgICAgY29udGVudDogY291bnRlcihzdGVwKSBcIlwiO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXMpO1xuICAgICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICAgIGlubGluZS1zaXplOiBjYWxjKFxuICAgICAgICB2YXIoLS1jb3VudGVyLXNpemUsIDJyZW0pICsgKHZhcigtLWxpbmUtd2lkdGgsIDJweCkgKiAyKVxuICAgICAgKTtcbiAgICAgIGJsb2NrLXNpemU6IGNhbGMoXG4gICAgICAgIHZhcigtLWNvdW50ZXItc2l6ZSwgMnJlbSkgKyAodmFyKC0tbGluZS13aWR0aCwgMnB4KSAqIDIpXG4gICAgICApO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBpbnNldC1ibG9jay1zdGFydDogdmFyKC0tY291bnRlci10b3AsIDApO1xuICAgICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgei1pbmRleDogMztcbiAgICAgIHZpc2liaWxpdHk6IHZhcigtLWNvdW50ZXItdmlzaWJpbGl0eSwgaGlkZGVuKTtcbiAgICB9XG5cbiAgICAmOmxhc3QtY2hpbGQge1xuICAgICAgLS1zcGFjaW5nOiAwO1xuICAgIH1cblxuICAgICY6aGFzKC5teC1zdGVwc19fcGFuZWwtY29udGVudCBoMzpmaXJzdC1jaGlsZCkge1xuICAgICAgLS1jb3VudGVyLXRvcDogLTJweDtcbiAgICB9XG5cbiAgICAmOmhhcygubXgtc3RlcHNfX3BhbmVsLWNvbnRlbnQgaDQ6Zmlyc3QtY2hpbGQpIHtcbiAgICAgIC0tY291bnRlci10b3A6IC00cHg7XG4gICAgfVxuICB9XG5cbiAgLm14LXN0ZXBzX19wYW5lbC1jb250ZW50IHtcbiAgICBwYWRkaW5nLWJsb2NrOiAwIHZhcigtLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctbCkpO1xuICAgIHBhZGRpbmctaW5saW5lLXN0YXJ0OiB2YXIoLS1pbmRlbnQsIHZhcigtLXNwYWNpbmcteHhsKSk7XG4gICAgaW5saW5lLXNpemU6IG1pbigxMDAlLCB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoKSk7XG5cbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogXCJcIjtcbiAgICAgIGlubGluZS1zaXplOiB2YXIoLS1saW5lLXdpZHRoLCAycHgpO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogY2FsYyhcbiAgICAgICAgKHZhcigtLWNvdW50ZXItc2l6ZSwgMnJlbSkgLyAyKSArICh2YXIoLS1saW5lLXdpZHRoLCAycHgpKVxuICAgICAgKTtcbiAgICAgIGluc2V0LWJsb2NrOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbiAgfVxuXG4gIC5teC1zdGVwcy0tZGFyayB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLXByaW1hcnkpO1xuICAgIC0tY291bnRlci1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgfVxuXG4gIC5teC1zdGVwcy0tc3VwcGxlbWVudGFyeSB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWFjY2VudCk7XG4gICAgLS1jb3VudGVyLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICB9XG5cbiAgLm14LXN0ZXBzLS1maWxsOndoZXJlKDpub3QoOmhhcygubXgtc3RlcHMtLWZpbGwpKSkge1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvdW50ZXItZm9yZWdyb3VuZCwgaW5oZXJpdCk7XG4gIH1cblxuICAubXgtc3RlcHMtLWNvdW50ZXJzIHtcbiAgICAtLWNvdW50ZXItdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuIl19 */
|
|
1
|
+
@layer design-system.components{.mx-steps{counter-reset:step}.mx-steps__panel{position:relative}.mx-steps__panel:before{content:"";border:2px solid var(--line-colour, var(--colour-border));border:var(--line-width, 2px) solid var(--line-colour, var(--colour-border));background-color:var(--background, var(--colour-background));border-radius:100%;inline-size:2rem;inline-size:var(--counter-size, 2rem);block-size:2rem;block-size:var(--counter-size, 2rem);inset-block-start:0;inset-block-start:var(--counter-top, 0);inset-inline-start:0;position:absolute;z-index:2}.mx-steps__panel:after{align-items:center;color:inherit;color:var(--foreground, inherit);color-scheme:var(--counter-scheme, var(--colour-scheme));counter-increment:step;content:counter(step) "";display:flex;font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--line-height-ui);inline-size:calc(2rem + 4px);inline-size:calc(var(--counter-size, 2rem) + (var(--line-width, 2px) * 2));block-size:calc(2rem + 4px);block-size:calc(var(--counter-size, 2rem) + (var(--line-width, 2px) * 2));justify-content:center;inset-block-start:0;inset-block-start:var(--counter-top, 0);inset-inline-start:0;position:absolute;z-index:3;visibility:hidden;visibility:var(--counter-visibility, hidden)}.mx-steps__panel:last-child{--spacing: 0}.mx-steps__panel:has(.mx-steps__panel-content h3:first-child){--counter-top: -.125rem}.mx-steps__panel:has(.mx-steps__panel-content h4:first-child){--counter-top: -.25rem}.mx-steps__panel-content{padding-block:0 var(--spacing, var(--spacing-l));padding-inline-start:var(--indent, var(--spacing-xxl));inline-size:min(100%,var(--container-max-width))}.mx-steps__panel-content:before{content:"";inline-size:2px;inline-size:var(--line-width, 2px);background-color:var(--line-colour, var(--colour-border));inset-inline-start:calc(1rem + 2px);inset-inline-start:calc((var(--counter-size, 2rem) / 2) + (var(--line-width, 2px)));inset-block:0;position:absolute}.mx-steps--dark{--line-colour: var(--colour-primary);--counter-scheme: var(--colour-primary-scheme)}.mx-steps--supplementary{--line-colour: var(--colour-accent);--counter-scheme: var(--colour-accent-scheme)}.mx-steps--fill:where(:not(:has(.mx-steps--fill))){--background: var(--line-colour, var(--colour-border));--foreground: var(--counter-foreground, var(--colour-foreground))}.mx-steps--counters{--counter-visibility: visible}}
|
package/dist/build/sticky.css
CHANGED
|
@@ -1,47 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Sticky
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.defaults {
|
|
6
|
-
mx-sticky {
|
|
7
|
-
display: block;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
@layer design-system.components {
|
|
12
|
-
.sticky {
|
|
13
|
-
position: sticky;
|
|
14
|
-
inset-block-start: 0;
|
|
15
|
-
inset-block-start: var(--sticky-offset, 0);
|
|
16
|
-
z-index: 1;
|
|
17
|
-
z-index: var(--z-index, 1);
|
|
18
|
-
}
|
|
19
|
-
@media (min-width: 720px) {
|
|
20
|
-
|
|
21
|
-
.sticky--m {
|
|
22
|
-
position: sticky;
|
|
23
|
-
inset-block-start: 0;
|
|
24
|
-
inset-block-start: var(--sticky-offset, 0);
|
|
25
|
-
z-index: 1;
|
|
26
|
-
z-index: var(--z-index, 1);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
@media (min-width: 946px) {
|
|
30
|
-
|
|
31
|
-
.sticky--l {
|
|
32
|
-
position: sticky;
|
|
33
|
-
inset-block-start: 0;
|
|
34
|
-
inset-block-start: var(--sticky-offset, 0);
|
|
35
|
-
z-index: 1;
|
|
36
|
-
z-index: var(--z-index, 1);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.sticky__trigger {
|
|
41
|
-
position: absolute;
|
|
42
|
-
inline-size: 1px;
|
|
43
|
-
block-size: 1px;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0aWNreS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBUUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtFQUNFO0lBWkEsZ0JBQWdCO0lBQ2hCLG9CQUEwQztJQUExQywwQ0FBMEM7SUFDMUMsVUFBMEI7SUFBMUIsMEJBQTBCO0VBWTFCO0lBR0U7O0VBREY7TUFoQkEsZ0JBQWdCO01BQ2hCLG9CQUEwQztNQUExQywwQ0FBMEM7TUFDMUMsVUFBMEI7TUFBMUIsMEJBQTBCO0VBa0IxQjtJQURFO0lBSUE7O0VBREY7TUF0QkEsZ0JBQWdCO01BQ2hCLG9CQUEwQztNQUExQywwQ0FBMEM7TUFDMUMsVUFBMEI7TUFBMUIsMEJBQTBCO0VBd0IxQjtJQURFOztFQUdGO0lBQ0Usa0JBQWtCO0lBQ2xCLGdCQUFnQjtJQUNoQixlQUFlO0VBQ2pCO0FBQ0YiLCJmaWxlIjoic3RpY2t5LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU3RpY2t5XG4gKi9cblxuQGRlZmluZS1taXhpbiBzdGlja3kge1xuICBwb3NpdGlvbjogc3RpY2t5O1xuICBpbnNldC1ibG9jay1zdGFydDogdmFyKC0tc3RpY2t5LW9mZnNldCwgMCk7XG4gIHotaW5kZXg6IHZhcigtLXotaW5kZXgsIDEpO1xufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIG14LXN0aWNreSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5zdGlja3kge1xuICAgIEBtaXhpbiBzdGlja3k7XG4gIH1cblxuICAuc3RpY2t5LS1tIHtcbiAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICBAbWl4aW4gc3RpY2t5O1xuICAgIH1cbiAgfVxuXG4gIC5zdGlja3ktLWwge1xuICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgQG1peGluIHN0aWNreTtcbiAgICB9XG4gIH1cblxuICAuc3RpY2t5X190cmlnZ2VyIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgaW5saW5lLXNpemU6IDFweDtcbiAgICBibG9jay1zaXplOiAxcHg7XG4gIH1cbn1cbiJdfQ== */
|
|
1
|
+
@layer design-system.defaults{mx-sticky{display:block}}@layer design-system.components{.sticky{position:sticky;inset-block-start:0;inset-block-start:var(--sticky-offset, 0);z-index:1;z-index:var(--z-index, 1)}@media(min-width:720px){.sticky--m{position:sticky;inset-block-start:0;inset-block-start:var(--sticky-offset, 0);z-index:1;z-index:var(--z-index, 1)}}@media(min-width:946px){.sticky--l{position:sticky;inset-block-start:0;inset-block-start:var(--sticky-offset, 0);z-index:1;z-index:var(--z-index, 1)}}.sticky__trigger{position:absolute;inline-size:1px;block-size:1px}}
|
|
@@ -1,59 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
get trigger() {
|
|
50
|
-
let trigger = this.querySelector(".sticky__trigger");
|
|
51
|
-
if (!trigger) {
|
|
52
|
-
trigger = createElement('<div class="sticky__trigger"></div>');
|
|
53
|
-
this.insertAdjacentElement("beforebegin", trigger);
|
|
54
|
-
}
|
|
55
|
-
return trigger;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
if (!customElements.get("mx-sticky")) customElements.define("mx-sticky", Sticky);
|
|
59
|
-
//# sourceMappingURL=sticky.entry.js.map
|
|
1
|
+
import { t as createElement } from "./chunks/utilities-DepaJdUg.js";
|
|
2
|
+
var Sticky = class extends HTMLElement {
|
|
3
|
+
internals_;
|
|
4
|
+
iO;
|
|
5
|
+
rO;
|
|
6
|
+
offsetPropName;
|
|
7
|
+
root = null;
|
|
8
|
+
rootMargin = "0px 0px 0px 0px";
|
|
9
|
+
thresholds = [0];
|
|
10
|
+
constructor() {
|
|
11
|
+
super(), this.internals_ = this.attachInternals();
|
|
12
|
+
}
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
this.offsetPropName = this.getAttribute("offsetpropname");
|
|
15
|
+
let e = {
|
|
16
|
+
root: this.root,
|
|
17
|
+
rootMargin: this.rootMargin,
|
|
18
|
+
thresholds: this.thresholds
|
|
19
|
+
};
|
|
20
|
+
this.iO = new IntersectionObserver(([{ boundingClientRect: t }]) => {
|
|
21
|
+
let n = t.y < 0;
|
|
22
|
+
this.classList.toggle("is-stuck", n);
|
|
23
|
+
let r = new CustomEvent("sticky-toggle", {
|
|
24
|
+
bubbles: !0,
|
|
25
|
+
cancelable: !0,
|
|
26
|
+
detail: {
|
|
27
|
+
isSticky: n,
|
|
28
|
+
options: e,
|
|
29
|
+
target: this
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
this.dispatchEvent(r);
|
|
33
|
+
}, e), this.iO.observe(this.trigger), this.offsetPropName && (this.rO = new ResizeObserver((e) => {
|
|
34
|
+
e.forEach(({ borderBoxSize: e }) => {
|
|
35
|
+
let [{ blockSize: t }] = e;
|
|
36
|
+
document.body.style.setProperty(this.offsetPropName, `${t.toFixed(1)}px`);
|
|
37
|
+
});
|
|
38
|
+
}), this.rO.observe(this));
|
|
39
|
+
}
|
|
40
|
+
disconnectedCallback() {
|
|
41
|
+
this.iO.unobserve(this.trigger), this.rO.disconnect();
|
|
42
|
+
}
|
|
43
|
+
get trigger() {
|
|
44
|
+
let t = this.querySelector(".sticky__trigger");
|
|
45
|
+
return t || (t = createElement("<div class=\"sticky__trigger\"></div>"), this.insertAdjacentElement("beforebegin", t)), t;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
customElements.get("mx-sticky") || customElements.define("mx-sticky", Sticky);
|