@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/constants.css
CHANGED
|
@@ -1,132 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Variables
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
@property --scheme {
|
|
8
|
-
syntax: "light | dark";
|
|
9
|
-
inherits: true;
|
|
10
|
-
initial-value: light;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:root {
|
|
14
|
-
--_hue-primary: 260;
|
|
15
|
-
--_hue-accent: 320;
|
|
16
|
-
--_hue-info: 260;
|
|
17
|
-
--_hue-error: 20;
|
|
18
|
-
--_hue-warning: 90;
|
|
19
|
-
--_hue-success: 140;
|
|
20
|
-
--_hue-outline: 260;
|
|
21
|
-
|
|
22
|
-
/* Brand colors */
|
|
23
|
-
--colour-primary: oklch(50% 0.3 var(--_hue-primary));
|
|
24
|
-
--colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
|
|
25
|
-
--colour-accent: oklch(50% 0.3 var(--_hue-accent));
|
|
26
|
-
--colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
|
|
27
|
-
|
|
28
|
-
/* System colours */
|
|
29
|
-
--color-scheme: light;
|
|
30
|
-
|
|
31
|
-
color-scheme: light;
|
|
32
|
-
|
|
33
|
-
color-scheme: var(--color-scheme);
|
|
34
|
-
|
|
35
|
-
--colour-background: light-dark(rgb(255, 255, 255), rgb(0, 0, 0));
|
|
36
|
-
--colour-background-alt: light-dark(rgb(238, 238, 238), rgb(34, 34, 34));
|
|
37
|
-
--colour-foreground: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
|
|
38
|
-
--colour-foreground-alt: light-dark(rgb(34, 34, 34), rgb(238, 238, 238));
|
|
39
|
-
--colour-border: light-dark(rgb(222, 222, 222), rgb(34, 34, 34));
|
|
40
|
-
--colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
|
|
41
|
-
|
|
42
|
-
/* Reverse colors */
|
|
43
|
-
--colour-foreground-reverse: light-dark(rgb(255, 255, 255), rgb(0, 0, 0));
|
|
44
|
-
--colour-background-reverse: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
|
|
45
|
-
|
|
46
|
-
/* State colours */
|
|
47
|
-
--colour-error: oklch(45% 0.3 var(--_hue-error));
|
|
48
|
-
--colour-success: oklch(50% 0.3 var(--_hue-success));
|
|
49
|
-
--colour-warning: oklch(55% 0.3 var(--_hue-warning));
|
|
50
|
-
--colour-info: oklch(50% 0.3 var(--_hue-info));
|
|
51
|
-
|
|
52
|
-
/* Typography */
|
|
53
|
-
--font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
|
|
54
|
-
--type-ratio: 1.25;
|
|
55
|
-
--type-ratio-small: 1.125;
|
|
56
|
-
--base-font-size: max(1rem, 1rem);
|
|
57
|
-
--font-size: var(--base-font-size);
|
|
58
|
-
--font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));
|
|
59
|
-
--font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));
|
|
60
|
-
--font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));
|
|
61
|
-
--font-size-m: calc(var(--base-font-size) * var(--type-ratio));
|
|
62
|
-
--font-size-l: calc(var(--font-size-m) * var(--type-ratio));
|
|
63
|
-
--font-size-xl: calc(var(--font-size-l) * var(--type-ratio));
|
|
64
|
-
--font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));
|
|
65
|
-
--font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));
|
|
66
|
-
--font-size-diff: 0.3;
|
|
67
|
-
|
|
68
|
-
--line-height: 1.6;
|
|
69
|
-
--line-height-h: 1.2;
|
|
70
|
-
--line-height-ui: 0.9rem;
|
|
71
|
-
|
|
72
|
-
--font-weight-normal: 400;
|
|
73
|
-
--font-weight-bold: 700;
|
|
74
|
-
|
|
75
|
-
/* Spacing */
|
|
76
|
-
--spacing-xxxxs: 0.25em;
|
|
77
|
-
--spacing-xxxs: 0.5em;
|
|
78
|
-
--spacing-xxs: 0.75em;
|
|
79
|
-
--spacing-xs: 0.875em;
|
|
80
|
-
--spacing-s: 1em;
|
|
81
|
-
--spacing-m: 1.5em;
|
|
82
|
-
--spacing-l: 2em;
|
|
83
|
-
--spacing-xl: 2.5em;
|
|
84
|
-
--spacing-xxl: 3em;
|
|
85
|
-
--spacing-xxxl: 3.5em;
|
|
86
|
-
--spacing-xxxxl: 3.5em;
|
|
87
|
-
--spacing-ul: 4.5em;
|
|
88
|
-
--spacing-uul: 5em;
|
|
89
|
-
--spacing-uuul: 5.5em;
|
|
90
|
-
|
|
91
|
-
--outline-width: 0.125rem;
|
|
92
|
-
--outline-style: solid;
|
|
93
|
-
--_colour-outline: oklch(50% 0.3 var(--_hue-outline));
|
|
94
|
-
--outline-color: light-dark(
|
|
95
|
-
var(--_colour-outline),
|
|
96
|
-
color-mix(in oklch, var(--_colour-outline), white 90%)
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
/* Layout */
|
|
100
|
-
--container-max-width-narrow: 58ch;
|
|
101
|
-
--container-max-width: 76ch;
|
|
102
|
-
--gutter-min: 1em;
|
|
103
|
-
--gutter-max: 2em;
|
|
104
|
-
--gap-s: 1em;
|
|
105
|
-
--gap: 1.5em;
|
|
106
|
-
--gap-l: 2em;
|
|
107
|
-
--gap-xl: 2.5em;
|
|
108
|
-
--breakpoint-xs: 26.25rem;
|
|
109
|
-
--breakpoint-s: 33.75rem;
|
|
110
|
-
--breakpoint-m: 45rem;
|
|
111
|
-
--breakpoint-l: 59.125rem;
|
|
112
|
-
--breakpoint-xl: 68.75rem;
|
|
113
|
-
|
|
114
|
-
/* Utility */
|
|
115
|
-
--shadow-color: rgba(34, 34, 34, 0.15);
|
|
116
|
-
--shadow-size: 0.875em;
|
|
117
|
-
--shadow-shape: 0 0 var(--shadow-size);
|
|
118
|
-
--box-shadow: var(--shadow-shape) var(--shadow-color);
|
|
119
|
-
--border-radius: 0.25rem;
|
|
120
|
-
--border-radius-l: 2em;
|
|
121
|
-
--border-radius-round: 50%;
|
|
122
|
-
--ratio: 16 / 9;
|
|
123
|
-
--ease: cubic-bezier(0.25, 0, 0.3, 1);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@media (max-width: 719.98px) {
|
|
127
|
-
:root {
|
|
128
|
-
--section-xl: var(--spacing-xxl);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbnN0YW50cy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsOENBQThDOztBQUU5Qzs7RUFFRTs7QUFFRjtFQUNFLHNCQUFzQjtFQUN0QixjQUFjO0VBQ2Qsb0JBQXFDO0FBQ3ZDOztBQUVBO0VBQ0UsbUJBQXVDO0VBQ3ZDLGtCQUFxQztFQUNyQyxnQkFBaUM7RUFDakMsZ0JBQW1DO0VBQ25DLGtCQUF1QztFQUN2QyxtQkFBdUM7RUFDdkMsbUJBQTRDOztFQUU1QyxpQkFBaUI7RUFDakIsb0RBQW9EO0VBQ3BELDZFQUE2RTtFQUM3RSxrREFBa0Q7RUFDbEQsMkVBQTJFOztFQUUzRSxtQkFBbUI7RUFDbkIscUJBQXNDOztFQUV0QyxtQkFBaUM7O0VBQWpDLGlDQUFpQzs7RUFFakMsaUVBQW9GO0VBQ3BGLHdFQUE4RjtFQUM5RixpRUFBb0Y7RUFDcEYsd0VBQThGO0VBQzlGLGdFQUF3RjtFQUN4Riw2RUFBNkU7O0VBRTdFLG1CQUFtQjtFQUNuQix5RUFBNEY7RUFDNUYseUVBQTRGOztFQUU1RixrQkFBa0I7RUFDbEIsZ0RBQWdEO0VBQ2hELG9EQUFvRDtFQUNwRCxvREFBb0Q7RUFDcEQsOENBQThDOztFQUU5QyxlQUFlO0VBQ2YsbUdBQW1DO0VBQ25DLGtCQUFzQztFQUN0Qyx5QkFBaUQ7RUFDakQsaUNBQXNEO0VBQ3RELGtDQUFrQztFQUNsQyxvRUFBb0U7RUFDcEUsa0VBQWtFO0VBQ2xFLHFFQUFxRTtFQUNyRSw4REFBOEQ7RUFDOUQsMkRBQTJEO0VBQzNELDREQUE0RDtFQUM1RCw4REFBOEQ7RUFDOUQsZ0VBQWdFO0VBQ2hFLHFCQUF5Qzs7RUFFekMsa0JBQTRDO0VBQzVDLG9CQUFpRDtFQUNqRCx3QkFBNkM7O0VBRTdDLHlCQUErQztFQUMvQyx1QkFBNkM7O0VBRTdDLFlBQVk7RUFDWix1QkFBNEM7RUFDNUMscUJBQTBDO0VBQzFDLHFCQUF3QztFQUN4QyxxQkFBc0M7RUFDdEMsZ0JBQW9DO0VBQ3BDLGtCQUFvQztFQUNwQyxnQkFBb0M7RUFDcEMsbUJBQXNDO0VBQ3RDLGtCQUF3QztFQUN4QyxxQkFBMEM7RUFDMUMsc0JBQTJDO0VBQzNDLG1CQUFzQztFQUN0QyxrQkFBd0M7RUFDeEMscUJBQTBDOztFQUUxQyx5QkFBK0M7RUFDL0Msc0JBQStDO0VBQy9DLHFEQUFxRDtFQUNyRDs7O0dBR0M7O0VBRUQsV0FBVztFQUNYLGtDQUE0RDtFQUM1RCwyQkFBc0Q7RUFDdEQsaUJBQStDO0VBQy9DLGlCQUErQztFQUMvQyxZQUE0QjtFQUM1QixZQUEwQjtFQUMxQixZQUE0QjtFQUM1QixlQUE4QjtFQUM5Qix5QkFBdUM7RUFDdkMsd0JBQXFDO0VBQ3JDLHFCQUFxQztFQUNyQyx5QkFBcUM7RUFDckMseUJBQXVDOztFQUV2QyxZQUFZO0VBQ1osc0NBQThDO0VBQzlDLHNCQUEyQztFQUMzQyxzQ0FBc0M7RUFDdEMscURBQXFEO0VBQ3JELHdCQUEwQztFQUMxQyxzQkFBNEM7RUFDNUMsMEJBQW9EO0VBQ3BELGVBQStCO0VBQy9CLHFDQUFxQztBQUN2Qzs7QUFFQTtFQUNFO0lBQ0UsZ0NBQWdDO0VBQ2xDO0FBQ0YiLCJmaWxlIjoiY29uc3RhbnRzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIHN0eWxlbGludC1kaXNhYmxlIGN1c3RvbS1wcm9wZXJ0eS1wYXR0ZXJuICovXG5cbi8qKlxuICogVmFyaWFibGVzXG4gKi9cblxuQHByb3BlcnR5IC0tc2NoZW1lIHtcbiAgc3ludGF4OiBcImxpZ2h0IHwgZGFya1wiO1xuICBpbmhlcml0czogdHJ1ZTtcbiAgaW5pdGlhbC12YWx1ZTogdG9rZW4oXCJjb2xvdXIuc2NoZW1lXCIpO1xufVxuXG46cm9vdCB7XG4gIC0tX2h1ZS1wcmltYXJ5OiB0b2tlbihcImNvbG91ci5wcmltYXJ5XCIpO1xuICAtLV9odWUtYWNjZW50OiB0b2tlbihcImNvbG91ci5hY2NlbnRcIik7XG4gIC0tX2h1ZS1pbmZvOiB0b2tlbihcImNvbG91ci5pbmZvXCIpO1xuICAtLV9odWUtZXJyb3I6IHRva2VuKFwiY29sb3VyLmVycm9yXCIpO1xuICAtLV9odWUtd2FybmluZzogdG9rZW4oXCJjb2xvdXIud2FybmluZ1wiKTtcbiAgLS1faHVlLXN1Y2Nlc3M6IHRva2VuKFwiY29sb3VyLnN1Y2Nlc3NcIik7XG4gIC0tX2h1ZS1vdXRsaW5lOiB0b2tlbihcInV0aWxpdHkub3V0bGluZS5odWVcIik7XG5cbiAgLyogQnJhbmQgY29sb3JzICovXG4gIC0tY29sb3VyLXByaW1hcnk6IG9rbGNoKDUwJSAwLjMgdmFyKC0tX2h1ZS1wcmltYXJ5KSk7XG4gIC0tY29sb3VyLXByaW1hcnktbGlnaHQ6IGNvbG9yLW1peChpbiBva2xjaCwgdmFyKC0tY29sb3VyLXByaW1hcnkpLCB3aGl0ZSA5MCUpO1xuICAtLWNvbG91ci1hY2NlbnQ6IG9rbGNoKDUwJSAwLjMgdmFyKC0tX2h1ZS1hY2NlbnQpKTtcbiAgLS1jb2xvdXItYWNjZW50LWxpZ2h0OiBjb2xvci1taXgoaW4gb2tsY2gsIHZhcigtLWNvbG91ci1hY2NlbnQpLCB3aGl0ZSA5MCUpO1xuXG4gIC8qIFN5c3RlbSBjb2xvdXJzICovXG4gIC0tY29sb3Itc2NoZW1lOiB0b2tlbihcImNvbG91ci5zY2hlbWVcIik7XG5cbiAgY29sb3Itc2NoZW1lOiB2YXIoLS1jb2xvci1zY2hlbWUpO1xuXG4gIC0tY29sb3VyLWJhY2tncm91bmQ6IGxpZ2h0LWRhcmsodG9rZW4oXCJjb2xvdXIubWFpbi5iZ1wiKSwgdG9rZW4oXCJjb2xvdXIucmV2ZXJzZS5iZ1wiKSk7XG4gIC0tY29sb3VyLWJhY2tncm91bmQtYWx0OiBsaWdodC1kYXJrKHRva2VuKFwiY29sb3VyLm1haW4uYmdBbHRcIiksIHRva2VuKFwiY29sb3VyLnJldmVyc2UuYmdBbHRcIikpO1xuICAtLWNvbG91ci1mb3JlZ3JvdW5kOiBsaWdodC1kYXJrKHRva2VuKFwiY29sb3VyLm1haW4uZmdcIiksIHRva2VuKFwiY29sb3VyLnJldmVyc2UuZmdcIikpO1xuICAtLWNvbG91ci1mb3JlZ3JvdW5kLWFsdDogbGlnaHQtZGFyayh0b2tlbihcImNvbG91ci5tYWluLmZnQWx0XCIpLCB0b2tlbihcImNvbG91ci5yZXZlcnNlLmZnQWx0XCIpKTtcbiAgLS1jb2xvdXItYm9yZGVyOiBsaWdodC1kYXJrKHRva2VuKFwiY29sb3VyLm1haW4uYm9yZGVyXCIpLCB0b2tlbihcImNvbG91ci5yZXZlcnNlLmJvcmRlclwiKSk7XG4gIC0tY29sb3VyLWxpbms6IGxpZ2h0LWRhcmsodmFyKC0tY29sb3VyLXByaW1hcnkpLCB2YXIoLS1jb2xvdXItcHJpbWFyeS1saWdodCkpO1xuXG4gIC8qIFJldmVyc2UgY29sb3JzICovXG4gIC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZTogbGlnaHQtZGFyayh0b2tlbihcImNvbG91ci5yZXZlcnNlLmZnXCIpLCB0b2tlbihcImNvbG91ci5tYWluLmZnXCIpKTtcbiAgLS1jb2xvdXItYmFja2dyb3VuZC1yZXZlcnNlOiBsaWdodC1kYXJrKHRva2VuKFwiY29sb3VyLnJldmVyc2UuYmdcIiksIHRva2VuKFwiY29sb3VyLm1haW4uYmdcIikpO1xuXG4gIC8qIFN0YXRlIGNvbG91cnMgKi9cbiAgLS1jb2xvdXItZXJyb3I6IG9rbGNoKDQ1JSAwLjMgdmFyKC0tX2h1ZS1lcnJvcikpO1xuICAtLWNvbG91ci1zdWNjZXNzOiBva2xjaCg1MCUgMC4zIHZhcigtLV9odWUtc3VjY2VzcykpO1xuICAtLWNvbG91ci13YXJuaW5nOiBva2xjaCg1NSUgMC4zIHZhcigtLV9odWUtd2FybmluZykpO1xuICAtLWNvbG91ci1pbmZvOiBva2xjaCg1MCUgMC4zIHZhcigtLV9odWUtaW5mbykpO1xuXG4gIC8qIFR5cG9ncmFwaHkgKi9cbiAgLS1mb250LWZhbWlseTogdG9rZW4oXCJmb250LmZhbWlseVwiKTtcbiAgLS10eXBlLXJhdGlvOiB0b2tlbihcImZvbnQuc2l6ZS5yYXRpb1wiKTtcbiAgLS10eXBlLXJhdGlvLXNtYWxsOiB0b2tlbihcImZvbnQuc2l6ZS5yYXRpb1NtYWxsXCIpO1xuICAtLWJhc2UtZm9udC1zaXplOiBtYXgoMXJlbSwgdG9rZW4oXCJmb250LnNpemUuYmFzZVB4XCIpKTtcbiAgLS1mb250LXNpemU6IHZhcigtLWJhc2UtZm9udC1zaXplKTtcbiAgLS1mb250LXNpemUtczogY2FsYyh2YXIoLS1iYXNlLWZvbnQtc2l6ZSkgLyB2YXIoLS10eXBlLXJhdGlvLXNtYWxsKSk7XG4gIC0tZm9udC1zaXplLXhzOiBjYWxjKHZhcigtLWZvbnQtc2l6ZS1zKSAvIHZhcigtLXR5cGUtcmF0aW8tc21hbGwpKTtcbiAgLS1mb250LXNpemUtc206IGNhbGModmFyKC0tYmFzZS1mb250LXNpemUpICogdmFyKC0tdHlwZS1yYXRpby1zbWFsbCkpO1xuICAtLWZvbnQtc2l6ZS1tOiBjYWxjKHZhcigtLWJhc2UtZm9udC1zaXplKSAqIHZhcigtLXR5cGUtcmF0aW8pKTtcbiAgLS1mb250LXNpemUtbDogY2FsYyh2YXIoLS1mb250LXNpemUtbSkgKiB2YXIoLS10eXBlLXJhdGlvKSk7XG4gIC0tZm9udC1zaXplLXhsOiBjYWxjKHZhcigtLWZvbnQtc2l6ZS1sKSAqIHZhcigtLXR5cGUtcmF0aW8pKTtcbiAgLS1mb250LXNpemUteHhsOiBjYWxjKHZhcigtLWZvbnQtc2l6ZS14bCkgKiB2YXIoLS10eXBlLXJhdGlvKSk7XG4gIC0tZm9udC1zaXplLXh4eGw6IGNhbGModmFyKC0tZm9udC1zaXplLXh4bCkgKiB2YXIoLS10eXBlLXJhdGlvKSk7XG4gIC0tZm9udC1zaXplLWRpZmY6IHRva2VuKFwiZm9udC5zaXplLmRpZmZcIik7XG5cbiAgLS1saW5lLWhlaWdodDogdG9rZW4oXCJmb250LmxpbmVIZWlnaHQubWFpblwiKTtcbiAgLS1saW5lLWhlaWdodC1oOiB0b2tlbihcImZvbnQubGluZUhlaWdodC5oZWFkaW5nXCIpO1xuICAtLWxpbmUtaGVpZ2h0LXVpOiB0b2tlbihcImZvbnQubGluZUhlaWdodC51aVwiKTtcblxuICAtLWZvbnQtd2VpZ2h0LW5vcm1hbDogdG9rZW4oXCJmb250LndlaWdodC5tYWluXCIpO1xuICAtLWZvbnQtd2VpZ2h0LWJvbGQ6IHRva2VuKFwiZm9udC53ZWlnaHQuYm9sZFwiKTtcblxuICAvKiBTcGFjaW5nICovXG4gIC0tc3BhY2luZy14eHh4czogdG9rZW4oXCJzaXplLnNwYWNpbmcueHh4eHNcIik7XG4gIC0tc3BhY2luZy14eHhzOiB0b2tlbihcInNpemUuc3BhY2luZy54eHhzXCIpO1xuICAtLXNwYWNpbmcteHhzOiB0b2tlbihcInNpemUuc3BhY2luZy54eHNcIik7XG4gIC0tc3BhY2luZy14czogdG9rZW4oXCJzaXplLnNwYWNpbmcueHNcIik7XG4gIC0tc3BhY2luZy1zOiB0b2tlbihcInNpemUuc3BhY2luZy5zXCIpO1xuICAtLXNwYWNpbmctbTogdG9rZW4oXCJzaXplLnNwYWNpbmcubVwiKTtcbiAgLS1zcGFjaW5nLWw6IHRva2VuKFwic2l6ZS5zcGFjaW5nLmxcIik7XG4gIC0tc3BhY2luZy14bDogdG9rZW4oXCJzaXplLnNwYWNpbmcueGxcIik7XG4gIC0tc3BhY2luZy14eGw6IHRva2VuKFwic2l6ZS5zcGFjaW5nLnh4bFwiKTtcbiAgLS1zcGFjaW5nLXh4eGw6IHRva2VuKFwic2l6ZS5zcGFjaW5nLnh4eGxcIik7XG4gIC0tc3BhY2luZy14eHh4bDogdG9rZW4oXCJzaXplLnNwYWNpbmcueHh4bFwiKTtcbiAgLS1zcGFjaW5nLXVsOiB0b2tlbihcInNpemUuc3BhY2luZy51bFwiKTtcbiAgLS1zcGFjaW5nLXV1bDogdG9rZW4oXCJzaXplLnNwYWNpbmcudXVsXCIpO1xuICAtLXNwYWNpbmctdXV1bDogdG9rZW4oXCJzaXplLnNwYWNpbmcudXV1bFwiKTtcblxuICAtLW91dGxpbmUtd2lkdGg6IHRva2VuKFwidXRpbGl0eS5vdXRsaW5lLndpZHRoXCIpO1xuICAtLW91dGxpbmUtc3R5bGU6IHRva2VuKFwidXRpbGl0eS5vdXRsaW5lLnN0eWxlXCIpO1xuICAtLV9jb2xvdXItb3V0bGluZTogb2tsY2goNTAlIDAuMyB2YXIoLS1faHVlLW91dGxpbmUpKTtcbiAgLS1vdXRsaW5lLWNvbG9yOiBsaWdodC1kYXJrKFxuICAgIHZhcigtLV9jb2xvdXItb3V0bGluZSksXG4gICAgY29sb3ItbWl4KGluIG9rbGNoLCB2YXIoLS1fY29sb3VyLW91dGxpbmUpLCB3aGl0ZSA5MCUpXG4gICk7XG5cbiAgLyogTGF5b3V0ICovXG4gIC0tY29udGFpbmVyLW1heC13aWR0aC1uYXJyb3c6IHRva2VuKFwic2l6ZS5jb250YWluZXIubmFycm93XCIpO1xuICAtLWNvbnRhaW5lci1tYXgtd2lkdGg6IHRva2VuKFwic2l6ZS5jb250YWluZXIuYWxpZ25lZFwiKTtcbiAgLS1ndXR0ZXItbWluOiB0b2tlbihcInNpemUuY29udGFpbmVyLmd1dHRlck1pblwiKTtcbiAgLS1ndXR0ZXItbWF4OiB0b2tlbihcInNpemUuY29udGFpbmVyLmd1dHRlck1heFwiKTtcbiAgLS1nYXAtczogdG9rZW4oXCJzaXplLmdhcC5zXCIpO1xuICAtLWdhcDogdG9rZW4oXCJzaXplLmdhcC5tXCIpO1xuICAtLWdhcC1sOiB0b2tlbihcInNpemUuZ2FwLmxcIik7XG4gIC0tZ2FwLXhsOiB0b2tlbihcInNpemUuZ2FwLnhsXCIpO1xuICAtLWJyZWFrcG9pbnQteHM6IHRva2VuKFwiYnJlYWtwb2ludC54c1wiKTtcbiAgLS1icmVha3BvaW50LXM6IHRva2VuKFwiYnJlYWtwb2ludC5zXCIpO1xuICAtLWJyZWFrcG9pbnQtbTogdG9rZW4oXCJicmVha3BvaW50Lm1cIik7XG4gIC0tYnJlYWtwb2ludC1sOiB0b2tlbihcImJyZWFrcG9pbnQubFwiKTtcbiAgLS1icmVha3BvaW50LXhsOiB0b2tlbihcImJyZWFrcG9pbnQueGxcIik7XG5cbiAgLyogVXRpbGl0eSAqL1xuICAtLXNoYWRvdy1jb2xvcjogdG9rZW4oXCJ1dGlsaXR5LnNoYWRvdy5jb2xvdXJcIik7XG4gIC0tc2hhZG93LXNpemU6IHRva2VuKFwidXRpbGl0eS5zaGFkb3cuc2l6ZVwiKTtcbiAgLS1zaGFkb3ctc2hhcGU6IDAgMCB2YXIoLS1zaGFkb3ctc2l6ZSk7XG4gIC0tYm94LXNoYWRvdzogdmFyKC0tc2hhZG93LXNoYXBlKSB2YXIoLS1zaGFkb3ctY29sb3IpO1xuICAtLWJvcmRlci1yYWRpdXM6IHRva2VuKFwidXRpbGl0eS5yYWRpdXMubVwiKTtcbiAgLS1ib3JkZXItcmFkaXVzLWw6IHRva2VuKFwidXRpbGl0eS5yYWRpdXMubFwiKTtcbiAgLS1ib3JkZXItcmFkaXVzLXJvdW5kOiB0b2tlbihcInV0aWxpdHkucmFkaXVzLnJvdW5kXCIpO1xuICAtLXJhdGlvOiB0b2tlbihcInV0aWxpdHkucmF0aW9cIik7XG4gIC0tZWFzZTogY3ViaWMtYmV6aWVyKDAuMjUsIDAsIDAuMywgMSk7XG59XG5cbkBtZWRpYSAoLS1tZWRpdW0tZG93bikge1xuICA6cm9vdCB7XG4gICAgLS1zZWN0aW9uLXhsOiB2YXIoLS1zcGFjaW5nLXh4bCk7XG4gIH1cbn1cbiJdfQ== */
|
|
1
|
+
@property --scheme{syntax: "light | dark"; inherits: true; initial-value: light;}@layer design-system.defaults{:root{--colour-primary: hsl(223, 100%, 50%);--colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);--colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);--colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 10%);--colour-primary-scheme: dark;--colour-accent: hsl(60, 94%, 68%);--colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);--colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);--colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);--colour-accent-scheme: light;--colour-scheme: light;color-scheme:var(--scheme);--colour-background: light-dark(hsl(0, 0%, 100%), hsl(60, 30%, 6%));--colour-background-alt: light-dark(hsl(60, 30%, 95%), hsl(0, 0%, 5%));--colour-foreground: light-dark(hsl(60, 30%, 6%), hsl(0, 0%, 100%));--colour-foreground-alt: light-dark(hsl(60, 30%, 20%), hsl(60, 5%, 60%));--colour-border: light-dark(hsl(60, 5%, 85%), hsl(0, 0%, 20%));--colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));--colour-foreground-reverse: light-dark(hsl(0, 0%, 100%), hsl(60, 30%, 6%));--colour-background-reverse: light-dark(hsl(60, 30%, 6%), hsl(0, 0%, 100%));--colour-reverse-scheme: dark;--colour-error: hsl(348, 100%, 33%);--colour-success: hsl(120, 100%, 26%);--colour-warning: hsl(35, 100%, 32%);--colour-info: hsl(223, 100%, 50%);--font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;--type-ratio: 1.25;--type-ratio-small: 1.125;--base-font-size: max(1rem, 16px);--font-size: var(--base-font-size);--font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));--font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));--font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));--font-size-m: calc(var(--base-font-size) * var(--type-ratio));--font-size-l: calc(var(--font-size-m) * var(--type-ratio));--font-size-xl: calc(var(--font-size-l) * var(--type-ratio));--font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));--font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));--font-size-diff: .3;--line-height: 1.6;--line-height-h: 1.2;--line-height-ui: .9rem;--font-weight-normal: 400;--font-weight-bold: 700;--spacing-xxxxs: .25em;--spacing-xxxs: .5em;--spacing-xxs: .75em;--spacing-xs: .875em;--spacing-s: 1em;--spacing-m: 1.5em;--spacing-l: 2em;--spacing-xl: 2.5em;--spacing-xxl: 3em;--spacing-xxxl: 3.5em;--spacing-xxxxl: 3.5em;--spacing-ul: 4.5em;--spacing-uul: 5em;--spacing-uuul: 5.5em;--outline-size: .125rem;--outline-style: solid;--_colour-outline: hsl(223, 100%, 50%);--outline-color: light-dark( var(--_colour-outline), color-mix(in oklch, var(--_colour-outline), white 90%) );--container-max-width-narrow: 58ch;--container-max-width: 76ch;--gutter-min: 1em;--gutter-max: 2em;--gap-s: 1em;--gap: 1.5em;--gap-l: 2em;--gap-xl: 2.5em;--breakpoint-xs: 26.25rem;--breakpoint-s: 33.75rem;--breakpoint-m: 45rem;--breakpoint-l: 59.125rem;--breakpoint-xl: 68.75rem;--shadow-color: hsla(0, 0%, 13%, .15);--shadow-size: .875em;--shadow-shape: 0 0 var(--shadow-size);--box-shadow: var(--shadow-shape) var(--shadow-color);--border-radius: .25rem;--border-radius-l: 2em;--border-radius-round: 50%;--ratio: 16 / 9;--ease: cubic-bezier(.25, 0, .3, 1)}@media(max-width:719.98px){:root{--section-xl: var(--spacing-xxl)}}}
|
|
@@ -1,186 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Container Grid
|
|
3
|
-
* @todo update classes
|
|
4
|
-
*/
|
|
5
|
-
@layer design-system.layouts {
|
|
6
|
-
.grid.container {
|
|
7
|
-
--container-name: grid-item;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@container grid-item (min-width: 946px) {
|
|
11
|
-
.grid.container {
|
|
12
|
-
--grid-gap: var(--large-grid-gap, var(--gap-l));
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.grid.container :is(.grid--11-col,.grid--10-col,.grid--9-col,.grid--8-col,.grid--7-col,.grid--6-col,.grid--5-col,.grid--4-col,.grid--3-col,.grid--2-col,.grid--1-col) {
|
|
17
|
-
--grid-repeat: 12;
|
|
18
|
-
--grid-span: 12;
|
|
19
|
-
}
|
|
20
|
-
@container grid-item (min-width: 720px) {
|
|
21
|
-
|
|
22
|
-
.grid.container .grid--11-col {
|
|
23
|
-
--grid-span: 11;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
@container grid-item (min-width: 720px) {
|
|
27
|
-
|
|
28
|
-
.grid.container .grid--10-col {
|
|
29
|
-
--grid-span: 10;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
@container grid-item (min-width: 720px) {
|
|
33
|
-
|
|
34
|
-
.grid.container .grid--9-col {
|
|
35
|
-
--grid-span: 9;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
@container grid-item (min-width: 720px) {
|
|
39
|
-
|
|
40
|
-
.grid.container .grid--8-col {
|
|
41
|
-
--grid-span: 8;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
@container grid-item (min-width: 720px) {
|
|
45
|
-
|
|
46
|
-
.grid.container .grid--7-col {
|
|
47
|
-
--grid-span: 7;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
@container grid-item (min-width: 720px) {
|
|
51
|
-
|
|
52
|
-
.grid.container .grid--6-col {
|
|
53
|
-
--grid-span: 6;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
@container grid-item (min-width: 540px) {
|
|
57
|
-
|
|
58
|
-
.grid.container .grid--5-col {
|
|
59
|
-
--grid-span: 6;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@container grid-item (min-width: 720px) {
|
|
64
|
-
|
|
65
|
-
.grid.container .grid--5-col {
|
|
66
|
-
--grid-span: 5;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
@container grid-item (min-width: 540px) {
|
|
70
|
-
|
|
71
|
-
.grid.container .grid--4-col {
|
|
72
|
-
--grid-span: 6;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@container grid-item (min-width: 720px) {
|
|
77
|
-
|
|
78
|
-
.grid.container .grid--4-col {
|
|
79
|
-
--grid-span: 4;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
@container grid-item (min-width: 540px) {
|
|
83
|
-
|
|
84
|
-
.grid.container .grid--3-col {
|
|
85
|
-
--grid-span: 6;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
@container grid-item (min-width: 720px) {
|
|
90
|
-
|
|
91
|
-
.grid.container .grid--3-col {
|
|
92
|
-
--grid-span: 3;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
@container grid-item (min-width: 540px) {
|
|
96
|
-
|
|
97
|
-
.grid.container .grid--2-col {
|
|
98
|
-
--grid-span: 3;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
@container grid-item (min-width: 720px) {
|
|
103
|
-
|
|
104
|
-
.grid.container .grid--2-col {
|
|
105
|
-
--grid-span: 2;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
@container grid-item (min-width: 540px) {
|
|
109
|
-
|
|
110
|
-
.grid.container .grid--1-col {
|
|
111
|
-
--grid-span: 3;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@container grid-item (min-width: 720px) {
|
|
116
|
-
|
|
117
|
-
.grid.container .grid--1-col {
|
|
118
|
-
--grid-span: 1;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* Dynamic Container Grid
|
|
125
|
-
*/
|
|
126
|
-
|
|
127
|
-
@layer design-system.layouts {
|
|
128
|
-
.grid.container:is(.grid--dynamic) {
|
|
129
|
-
/* This doesn't play nice in Safari and isn't required, so we unset the container. */
|
|
130
|
-
container-type: initial;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.grid.container:is(.grid--xs-2-cols,.grid--sm-2-cols,.grid--md-2-cols,.grid--md-3-cols,.grid--lg-3-cols,.grid--md-4-cols,.grid--lg-4-cols,.grid--xl-4-cols) {
|
|
134
|
-
--grid-repeat: 1;
|
|
135
|
-
}
|
|
136
|
-
@container grid-item (min-width: 420px) {
|
|
137
|
-
|
|
138
|
-
.grid.container.grid--xs-2-cols {
|
|
139
|
-
--grid-repeat: 2;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
@container grid-item (min-width: 540px) {
|
|
143
|
-
|
|
144
|
-
.grid.container.grid--sm-2-cols {
|
|
145
|
-
--grid-repeat: 2;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
@container grid-item (min-width: 720px) {
|
|
149
|
-
|
|
150
|
-
.grid.container.grid--md-2-cols {
|
|
151
|
-
--grid-repeat: 2;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
@container grid-item (min-width: 720px) {
|
|
155
|
-
|
|
156
|
-
.grid.container.grid--md-3-cols {
|
|
157
|
-
--grid-repeat: 3;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
@container grid-item (min-width: 946px) {
|
|
161
|
-
|
|
162
|
-
.grid.container.grid--lg-3-cols {
|
|
163
|
-
--grid-repeat: 3;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
@container grid-item (min-width: 720px) {
|
|
167
|
-
|
|
168
|
-
.grid.container.grid--md-4-cols {
|
|
169
|
-
--grid-repeat: 4;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
@container grid-item (min-width: 946px) {
|
|
173
|
-
|
|
174
|
-
.grid.container.grid--lg-4-cols {
|
|
175
|
-
--grid-repeat: 4;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
@container grid-item (min-width: 1100px) {
|
|
179
|
-
|
|
180
|
-
.grid.container.grid--xl-4-cols {
|
|
181
|
-
--grid-repeat: 4;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbnRhaW5lci1ncmlkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0VBR0U7QUFDRjtFQUNFO0lBQ0UsMkJBQTJCO0VBNkc3Qjs7SUEzR0U7RUFIRjtNQUlJLCtDQUErQztFQTBHbkQ7SUF6R0U7O0lBRUE7TUFjRSxpQkFBaUI7TUFDakIsZUFBZTtJQUNqQjtNQUdFOztJQURGO1FBRUksZUFBZTtJQUVuQjtNQURFO01BSUE7O0lBREY7UUFFSSxlQUFlO0lBRW5CO01BREU7TUFJQTs7SUFERjtRQUVJLGNBQWM7SUFFbEI7TUFERTtNQUlBOztJQURGO1FBRUksY0FBYztJQUVsQjtNQURFO01BSUE7O0lBREY7UUFFSSxjQUFjO0lBRWxCO01BREU7TUFJQTs7SUFERjtRQUVJLGNBQWM7SUFFbEI7TUFERTtNQUlBOztJQURGO1FBRUksY0FBYztJQU1sQjtNQUxFOztNQUVBOztJQUxGO1FBTUksY0FBYztJQUVsQjtNQURFO01BSUE7O0lBREY7UUFFSSxjQUFjO0lBTWxCO01BTEU7O01BRUE7O0lBTEY7UUFNSSxjQUFjO0lBRWxCO01BREU7TUFJQTs7SUFERjtRQUVJLGNBQWM7SUFNbEI7TUFMRTs7TUFFQTs7SUFMRjtRQU1JLGNBQWM7SUFFbEI7TUFERTtNQUlBOztJQURGO1FBRUksY0FBYztJQU1sQjtNQUxFOztNQUVBOztJQUxGO1FBTUksY0FBYztJQUVsQjtNQURFO01BSUE7O0lBREY7UUFFSSxjQUFjO0lBTWxCO01BTEU7O01BRUE7O0lBTEY7UUFNSSxjQUFjO0lBRWxCO01BREU7QUFHTjs7QUFFQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0Usb0ZBQW9GO01BQ3BGLHVCQUFxQjtJQUN2Qjs7SUFFQTtNQVVFLGdCQUFnQjtJQUNsQjtNQUdFOztJQURGO1FBRUksZ0JBQWdCO0lBRXBCO01BREU7TUFJQTs7SUFERjtRQUVJLGdCQUFnQjtJQUVwQjtNQURFO01BSUE7O0lBREY7UUFFSSxnQkFBZ0I7SUFFcEI7TUFERTtNQUlBOztJQURGO1FBRUksZ0JBQWdCO0lBRXBCO01BREU7TUFJQTs7SUFERjtRQUVJLGdCQUFnQjtJQUVwQjtNQURFO01BSUE7O0lBREY7UUFFSSxnQkFBZ0I7SUFFcEI7TUFERTtNQUlBOztJQURGO1FBRUksZ0JBQWdCO0lBRXBCO01BREU7TUFJQTs7SUFERjtRQUVJLGdCQUFnQjtJQUVwQjtNQURFO0FBR04iLCJmaWxlIjoiY29udGFpbmVyLWdyaWQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb250YWluZXIgR3JpZFxuICogQHRvZG8gdXBkYXRlIGNsYXNzZXNcbiAqL1xuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5ncmlkLmNvbnRhaW5lciB7XG4gICAgLS1jb250YWluZXItbmFtZTogZ3JpZC1pdGVtO1xuXG4gICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgIC0tZ3JpZC1nYXA6IHZhcigtLWxhcmdlLWdyaWQtZ2FwLCB2YXIoLS1nYXAtbCkpO1xuICAgIH1cblxuICAgICZcbiAgICAgIDppcyhcbiAgICAgICAgLmdyaWQtLTExLWNvbCxcbiAgICAgICAgLmdyaWQtLTEwLWNvbCxcbiAgICAgICAgLmdyaWQtLTktY29sLFxuICAgICAgICAuZ3JpZC0tOC1jb2wsXG4gICAgICAgIC5ncmlkLS03LWNvbCxcbiAgICAgICAgLmdyaWQtLTYtY29sLFxuICAgICAgICAuZ3JpZC0tNS1jb2wsXG4gICAgICAgIC5ncmlkLS00LWNvbCxcbiAgICAgICAgLmdyaWQtLTMtY29sLFxuICAgICAgICAuZ3JpZC0tMi1jb2wsXG4gICAgICAgIC5ncmlkLS0xLWNvbFxuICAgICAgKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAxMjtcbiAgICAgIC0tZ3JpZC1zcGFuOiAxMjtcbiAgICB9XG5cbiAgICAmIC5ncmlkLS0xMS1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDExO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgLmdyaWQtLTEwLWNvbCB7XG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQubVwiKSkge1xuICAgICAgICAtLWdyaWQtc3BhbjogMTA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAuZ3JpZC0tOS1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAuZ3JpZC0tOC1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDg7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAuZ3JpZC0tNy1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDc7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAuZ3JpZC0tNi1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDY7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAuZ3JpZC0tNS1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LnNcIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDY7XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgZ3JpZC1pdGVtIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5tXCIpKSB7XG4gICAgICAgIC0tZ3JpZC1zcGFuOiA1O1xuICAgICAgfVxuICAgIH1cblxuICAgICYgLmdyaWQtLTQtY29sIHtcbiAgICAgIEBjb250YWluZXIgZ3JpZC1pdGVtIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5zXCIpKSB7XG4gICAgICAgIC0tZ3JpZC1zcGFuOiA2O1xuICAgICAgfVxuXG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQubVwiKSkge1xuICAgICAgICAtLWdyaWQtc3BhbjogNDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5ncmlkLS0zLWNvbCB7XG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuc1wiKSkge1xuICAgICAgICAtLWdyaWQtc3BhbjogNjtcbiAgICAgIH1cblxuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDM7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAuZ3JpZC0tMi1jb2wge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LnNcIikpIHtcbiAgICAgICAgLS1ncmlkLXNwYW46IDM7XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgZ3JpZC1pdGVtIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5tXCIpKSB7XG4gICAgICAgIC0tZ3JpZC1zcGFuOiAyO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgLmdyaWQtLTEtY29sIHtcbiAgICAgIEBjb250YWluZXIgZ3JpZC1pdGVtIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5zXCIpKSB7XG4gICAgICAgIC0tZ3JpZC1zcGFuOiAzO1xuICAgICAgfVxuXG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQubVwiKSkge1xuICAgICAgICAtLWdyaWQtc3BhbjogMTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBEeW5hbWljIENvbnRhaW5lciBHcmlkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5ncmlkLmNvbnRhaW5lciB7XG4gICAgJjppcyguZ3JpZC0tZHluYW1pYykge1xuICAgICAgLyogVGhpcyBkb2Vzbid0IHBsYXkgbmljZSBpbiBTYWZhcmkgYW5kIGlzbid0IHJlcXVpcmVkLCBzbyB3ZSB1bnNldCB0aGUgY29udGFpbmVyLiAqL1xuICAgICAgY29udGFpbmVyLXR5cGU6IHVuc2V0O1xuICAgIH1cblxuICAgICY6aXMoXG4gICAgICAuZ3JpZC0teHMtMi1jb2xzLFxuICAgICAgLmdyaWQtLXNtLTItY29scyxcbiAgICAgIC5ncmlkLS1tZC0yLWNvbHMsXG4gICAgICAuZ3JpZC0tbWQtMy1jb2xzLFxuICAgICAgLmdyaWQtLWxnLTMtY29scyxcbiAgICAgIC5ncmlkLS1tZC00LWNvbHMsXG4gICAgICAuZ3JpZC0tbGctNC1jb2xzLFxuICAgICAgLmdyaWQtLXhsLTQtY29sc1xuICAgICkge1xuICAgICAgLS1ncmlkLXJlcGVhdDogMTtcbiAgICB9XG5cbiAgICAmLmdyaWQtLXhzLTItY29scyB7XG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQueHNcIikpIHtcbiAgICAgICAgLS1ncmlkLXJlcGVhdDogMjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLmdyaWQtLXNtLTItY29scyB7XG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuc1wiKSkge1xuICAgICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgICAgfVxuICAgIH1cblxuICAgICYuZ3JpZC0tbWQtMi1jb2xzIHtcbiAgICAgIEBjb250YWluZXIgZ3JpZC1pdGVtIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5tXCIpKSB7XG4gICAgICAgIC0tZ3JpZC1yZXBlYXQ6IDI7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5ncmlkLS1tZC0zLWNvbHMge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50Lm1cIikpIHtcbiAgICAgICAgLS1ncmlkLXJlcGVhdDogMztcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLmdyaWQtLWxnLTMtY29scyB7XG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQubFwiKSkge1xuICAgICAgICAtLWdyaWQtcmVwZWF0OiAzO1xuICAgICAgfVxuICAgIH1cblxuICAgICYuZ3JpZC0tbWQtNC1jb2xzIHtcbiAgICAgIEBjb250YWluZXIgZ3JpZC1pdGVtIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5tXCIpKSB7XG4gICAgICAgIC0tZ3JpZC1yZXBlYXQ6IDQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5ncmlkLS1sZy00LWNvbHMge1xuICAgICAgQGNvbnRhaW5lciBncmlkLWl0ZW0gKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgICAgLS1ncmlkLXJlcGVhdDogNDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLmdyaWQtLXhsLTQtY29scyB7XG4gICAgICBAY29udGFpbmVyIGdyaWQtaXRlbSAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQueGxcIikpIHtcbiAgICAgICAgLS1ncmlkLXJlcGVhdDogNDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiJdfQ== */
|
|
1
|
+
@layer design-system.layouts{.grid.container{--container-name: grid-item}@container grid-item (min-width: 946px){.grid.container{--grid-gap: var(--large-grid-gap, var(--gap-l))}}.grid.container :is(.grid--11-col,.grid--10-col,.grid--9-col,.grid--8-col,.grid--7-col,.grid--6-col,.grid--5-col,.grid--4-col,.grid--3-col,.grid--2-col,.grid--1-col){--grid-repeat: 12;--grid-span: 12}@container grid-item (min-width: 720px){.grid.container .grid--11-col{--grid-span: 11}}@container grid-item (min-width: 720px){.grid.container .grid--10-col{--grid-span: 10}}@container grid-item (min-width: 720px){.grid.container .grid--9-col{--grid-span: 9}}@container grid-item (min-width: 720px){.grid.container .grid--8-col{--grid-span: 8}}@container grid-item (min-width: 720px){.grid.container .grid--7-col{--grid-span: 7}}@container grid-item (min-width: 720px){.grid.container .grid--6-col{--grid-span: 6}}@container grid-item (min-width: 540px){.grid.container .grid--5-col{--grid-span: 6}}@container grid-item (min-width: 720px){.grid.container .grid--5-col{--grid-span: 5}}@container grid-item (min-width: 540px){.grid.container .grid--4-col{--grid-span: 6}}@container grid-item (min-width: 720px){.grid.container .grid--4-col{--grid-span: 4}}@container grid-item (min-width: 540px){.grid.container .grid--3-col{--grid-span: 6}}@container grid-item (min-width: 720px){.grid.container .grid--3-col{--grid-span: 3}}@container grid-item (min-width: 540px){.grid.container .grid--2-col{--grid-span: 3}}@container grid-item (min-width: 720px){.grid.container .grid--2-col{--grid-span: 2}}@container grid-item (min-width: 540px){.grid.container .grid--1-col{--grid-span: 3}}@container grid-item (min-width: 720px){.grid.container .grid--1-col{--grid-span: 1}}}@layer design-system.layouts{.grid.container:is(.grid--dynamic){container-type:initial}.grid.container:is(.grid--xs-2-cols,.grid--sm-2-cols,.grid--md-2-cols,.grid--md-3-cols,.grid--lg-3-cols,.grid--md-4-cols,.grid--lg-4-cols,.grid--xl-4-cols){--grid-repeat: 1}@container grid-item (min-width: 420px){.grid.container.grid--xs-2-cols{--grid-repeat: 2}}@container grid-item (min-width: 540px){.grid.container.grid--sm-2-cols{--grid-repeat: 2}}@container grid-item (min-width: 720px){.grid.container.grid--md-2-cols{--grid-repeat: 2}}@container grid-item (min-width: 720px){.grid.container.grid--md-3-cols{--grid-repeat: 3}}@container grid-item (min-width: 946px){.grid.container.grid--lg-3-cols{--grid-repeat: 3}}@container grid-item (min-width: 720px){.grid.container.grid--md-4-cols{--grid-repeat: 4}}@container grid-item (min-width: 946px){.grid.container.grid--lg-4-cols{--grid-repeat: 4}}@container grid-item (min-width: 1100px){.grid.container.grid--xl-4-cols{--grid-repeat: 4}}}
|
|
@@ -1,36 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Content block
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.components {
|
|
6
|
-
.mx-content-block {
|
|
7
|
-
display: grid;
|
|
8
|
-
grid-gap: var(--content-block-gap, var(--gap));
|
|
9
|
-
gap: var(--content-block-gap, var(--gap));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.mx-content-block .mx-link-list {
|
|
13
|
-
inline-size: 100%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.mx-content-block__media {
|
|
17
|
-
display: grid;
|
|
18
|
-
margin: auto;
|
|
19
|
-
position: relative;
|
|
20
|
-
inline-size: 100%;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.mx-content-block__media img {
|
|
24
|
-
aspect-ratio: var(--ratio);
|
|
25
|
-
border-radius: var(--border-radius);
|
|
26
|
-
-o-object-fit: cover;
|
|
27
|
-
object-fit: cover;
|
|
28
|
-
display: block;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.mx-content-block__media .mx-skeleton--bg {
|
|
32
|
-
aspect-ratio: var(--ratio);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbnRlbnQtYmxvY2suY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IsOENBQXlDO0lBQXpDLHlDQUF5QztFQUszQzs7SUFIRTtNQUNFLGlCQUFpQjtJQUNuQjs7RUFHRjtJQUNFLGFBQWE7SUFDYixZQUFZO0lBQ1osa0JBQWtCO0lBQ2xCLGlCQUFpQjtFQVluQjs7SUFWRTtNQUNFLDBCQUEwQjtNQUMxQixtQ0FBbUM7TUFDbkMsb0JBQWlCO1NBQWpCLGlCQUFpQjtNQUNqQixjQUFjO0lBQ2hCOztJQUVBO01BQ0UsMEJBQTBCO0lBQzVCO0FBRUoiLCJmaWxlIjoiY29udGVudC1ibG9jay5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvbnRlbnQgYmxvY2tcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWNvbnRlbnQtYmxvY2sge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ2FwOiB2YXIoLS1jb250ZW50LWJsb2NrLWdhcCwgdmFyKC0tZ2FwKSk7XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNvbnRlbnQtYmxvY2tfX21lZGlhIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIG1hcmdpbjogYXV0bztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG5cbiAgICAmIGltZyB7XG4gICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICB9XG5cbiAgICAmIC5teC1za2VsZXRvbi0tYmcge1xuICAgICAgYXNwZWN0LXJhdGlvOiB2YXIoLS1yYXRpbyk7XG4gICAgfVxuICB9XG59XG4iXX0= */
|
|
1
|
+
@layer design-system.components{.mx-content-block{display:grid;grid-gap:var(--content-block-gap, var(--gap));gap:var(--content-block-gap, var(--gap))}.mx-content-block .mx-link-list{inline-size:100%}.mx-content-block__media{display:grid;margin:auto;position:relative;inline-size:100%}.mx-content-block__media img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);-o-object-fit:cover;object-fit:cover;display:block}.mx-content-block__media .mx-skeleton--bg{aspect-ratio:var(--ratio)}}
|
package/dist/build/dialog.css
CHANGED
|
@@ -1,108 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Dialog
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@layer design-system.defaults {
|
|
6
|
-
mx-dialog {
|
|
7
|
-
display: block;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
@layer design-system.components {
|
|
12
|
-
.mx-dialog {
|
|
13
|
-
inline-size: min(100%, var(--container-max-width));
|
|
14
|
-
max-block-size: 90vh;
|
|
15
|
-
overflow-x: auto;
|
|
16
|
-
overflow-y: hidden;
|
|
17
|
-
overflow: auto hidden;
|
|
18
|
-
overscroll-behavior: contain;
|
|
19
|
-
background-color: var(--dialog-background, var(--colour-background));
|
|
20
|
-
border: 1px solid
|
|
21
|
-
var(--line-colour, var(--colour-border));
|
|
22
|
-
border: var(--line-width, 1px) solid
|
|
23
|
-
var(--line-colour, var(--colour-border));
|
|
24
|
-
padding: 0;
|
|
25
|
-
align-self: center;
|
|
26
|
-
justify-self: center;
|
|
27
|
-
place-self: center;
|
|
28
|
-
opacity: 0;
|
|
29
|
-
transform: translateY(100%);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.mx-dialog::backdrop {
|
|
33
|
-
background-color: hsla(0, 0%, 100%, 0.75);
|
|
34
|
-
opacity: 0;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.mx-dialog[open] {
|
|
38
|
-
opacity: 1;
|
|
39
|
-
transform: translateY(0);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@starting-style {
|
|
43
|
-
|
|
44
|
-
.mx-dialog[open] {
|
|
45
|
-
opacity: 0;
|
|
46
|
-
transform: translateY(100%);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.mx-dialog[open]::backdrop {
|
|
51
|
-
opacity: 0.8;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@starting-style {
|
|
55
|
-
|
|
56
|
-
.mx-dialog[open]::backdrop {
|
|
57
|
-
opacity: 0;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.mx-dialog .mx-dialog__content {
|
|
62
|
-
padding: var(--spacing-s);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@media (min-width: 720px) {
|
|
66
|
-
|
|
67
|
-
.mx-dialog .mx-dialog__content {
|
|
68
|
-
padding-block: var(--spacing-l);
|
|
69
|
-
padding-inline: var(--spacing-xl);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.mx-dialog > .mx-icon--close {
|
|
74
|
-
position: absolute;
|
|
75
|
-
inset-block-start: var(--spacing-xxs);
|
|
76
|
-
inset-inline-end: var(--spacing-xxs);
|
|
77
|
-
border: 0;
|
|
78
|
-
z-index: 11;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* Dialog fullscreen.
|
|
84
|
-
*/
|
|
85
|
-
|
|
86
|
-
@layer design-system.components {
|
|
87
|
-
.mx-dialog--fullscreen {
|
|
88
|
-
box-shadow: none;
|
|
89
|
-
border: 0;
|
|
90
|
-
inset-block-start: 0;
|
|
91
|
-
inline-size: 100%;
|
|
92
|
-
block-size: 100%;
|
|
93
|
-
max-block-size: none;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.mx-dialog--fullscreen[open] {
|
|
97
|
-
display: grid;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.mx-dialog--fullscreen .mx-dialog__content {
|
|
101
|
-
inline-size: min(100%, var(--container-max-width));
|
|
102
|
-
align-self: center;
|
|
103
|
-
justify-self: center;
|
|
104
|
-
place-self: center;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpYWxvZy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtFQUNFO0lBQ0Usa0RBQWtEO0lBQ2xELG9CQUFvQjtJQUNwQixnQkFBcUI7SUFBckIsa0JBQXFCO0lBQXJCLHFCQUFxQjtJQUNyQiw0QkFBNEI7SUFDNUIsb0VBQW9FO0lBQ3BFOzhDQUMwQztJQUQxQzs4Q0FDMEM7SUFDMUMsVUFBVTtJQUNWLGtCQUFrQjtJQUFsQixvQkFBa0I7SUFBbEIsa0JBQWtCO0lBQ2xCLFVBQVU7SUFDViwyQkFBMkI7RUF5QzdCOztJQXZDRTtNQUNFLHlDQUF5QztNQUN6QyxVQUFVO0lBQ1o7O0lBRUE7TUFDRSxVQUFVO01BQ1Ysd0JBQXdCO0lBYzFCOztNQVpFOztJQUpGO1FBS0ksVUFBVTtRQUNWLDJCQUEyQjtJQVUvQjtNQVRFOztNQUVBO1FBQ0UsWUFBWTtNQUtkOztRQUhFOztNQUhGO1VBSUksVUFBVTtNQUVkO1FBREU7O0lBSUo7TUFDRSx5QkFBeUI7SUFNM0I7O01BSkU7O0lBSEY7UUFJSSwrQkFBK0I7UUFDL0IsaUNBQWlDO0lBRXJDO01BREU7O0lBR0Y7TUFDRSxrQkFBa0I7TUFDbEIscUNBQXFDO01BQ3JDLG9DQUFvQztNQUNwQyxTQUFTO01BQ1QsV0FBVztJQUNiO0FBRUo7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGdCQUFnQjtJQUNoQixTQUFTO0lBQ1Qsb0JBQW9CO0lBQ3BCLGlCQUFpQjtJQUNqQixnQkFBZ0I7SUFDaEIsb0JBQW9CO0VBVXRCOztJQVJFO01BQ0UsYUFBYTtJQUNmOztJQUVBO01BQ0Usa0RBQWtEO01BQ2xELGtCQUFrQjtNQUFsQixvQkFBa0I7TUFBbEIsa0JBQWtCO0lBQ3BCO0FBRUoiLCJmaWxlIjoiZGlhbG9nLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRGlhbG9nXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uZGVmYXVsdHMge1xuICBteC1kaWFsb2cge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtZGlhbG9nIHtcbiAgICBpbmxpbmUtc2l6ZTogbWluKDEwMCUsIHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgpKTtcbiAgICBtYXgtYmxvY2stc2l6ZTogOTB2aDtcbiAgICBvdmVyZmxvdzogYXV0byBoaWRkZW47XG4gICAgb3ZlcnNjcm9sbC1iZWhhdmlvcjogY29udGFpbjtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1kaWFsb2ctYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgcGFkZGluZzogMDtcbiAgICBwbGFjZS1zZWxmOiBjZW50ZXI7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7XG5cbiAgICAmOjpiYWNrZHJvcCB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBoc2woMGRlZyAwJSAxMDAlIC8gNzUlKTtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgfVxuXG4gICAgJltvcGVuXSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApO1xuXG4gICAgICBAc3RhcnRpbmctc3R5bGUge1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7XG4gICAgICB9XG5cbiAgICAgICY6OmJhY2tkcm9wIHtcbiAgICAgICAgb3BhY2l0eTogMC44O1xuXG4gICAgICAgIEBzdGFydGluZy1zdHlsZSB7XG4gICAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICYgLm14LWRpYWxvZ19fY29udGVudCB7XG4gICAgICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXMpO1xuXG4gICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXNwYWNpbmctbCk7XG4gICAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmID4gLm14LWljb24tLWNsb3NlIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGluc2V0LWJsb2NrLXN0YXJ0OiB2YXIoLS1zcGFjaW5nLXh4cyk7XG4gICAgICBpbnNldC1pbmxpbmUtZW5kOiB2YXIoLS1zcGFjaW5nLXh4cyk7XG4gICAgICBib3JkZXI6IDA7XG4gICAgICB6LWluZGV4OiAxMTtcbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBEaWFsb2cgZnVsbHNjcmVlbi5cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWRpYWxvZy0tZnVsbHNjcmVlbiB7XG4gICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgYmxvY2stc2l6ZTogMTAwJTtcbiAgICBtYXgtYmxvY2stc2l6ZTogbm9uZTtcblxuICAgICZbb3Blbl0ge1xuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICB9XG5cbiAgICAmIC5teC1kaWFsb2dfX2NvbnRlbnQge1xuICAgICAgaW5saW5lLXNpemU6IG1pbigxMDAlLCB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoKSk7XG4gICAgICBwbGFjZS1zZWxmOiBjZW50ZXI7XG4gICAgfVxuICB9XG59XG4iXX0= */
|
|
1
|
+
@layer design-system.defaults{mx-dialog{display:block}}@layer design-system.components{.mx-dialog{inline-size:min(100%,var(--container-max-width));max-block-size:90vh;overflow-x:auto;overflow-y:hidden;overflow:auto hidden;overscroll-behavior:contain;background-color:var(--dialog-background, var(--colour-background));border:1px solid var(--line-colour, var(--colour-border));border:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));padding:0;align-self:center;justify-self:center;place-self:center;opacity:0;transform:translateY(100%)}.mx-dialog::backdrop{background-color:#ffffffbf;opacity:0}.mx-dialog[open]{opacity:1;transform:translateY(0)}@starting-style{.mx-dialog[open]{opacity:0;transform:translateY(100%)}}.mx-dialog[open]::backdrop{opacity:.8}@starting-style{.mx-dialog[open]::backdrop{opacity:0}}.mx-dialog .mx-dialog__content{padding:var(--spacing-s)}@media(min-width:720px){.mx-dialog .mx-dialog__content{padding-block:var(--spacing-l);padding-inline:var(--spacing-xl)}}.mx-dialog>.mx-icon--close{position:absolute;inset-block-start:var(--spacing-xxs);inset-inline-end:var(--spacing-xxs);border:0;z-index:11}}@layer design-system.components{.mx-dialog--fullscreen{box-shadow:none;border:0;inset-block-start:0;inline-size:100%;block-size:100%;max-block-size:none}.mx-dialog--fullscreen[open]{display:grid}.mx-dialog--fullscreen .mx-dialog__content{inline-size:min(100%,var(--container-max-width));align-self:center;justify-self:center;place-self:center}}
|
|
@@ -1,85 +1,45 @@
|
|
|
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
|
-
handleOpen = (event) => {
|
|
47
|
-
if (!this.dialog) return;
|
|
48
|
-
event.preventDefault();
|
|
49
|
-
if (typeof this.dialog.show === "function") {
|
|
50
|
-
this.isModal ? this.dialog.showModal() : this.dialog.show();
|
|
51
|
-
}
|
|
52
|
-
this.openBtns?.forEach((btn) => btn.setAttribute("aria-expanded", "true"));
|
|
53
|
-
if (this.isModal) document.body.classList.add(this.scrollLockClass);
|
|
54
|
-
};
|
|
55
|
-
handleClose = () => {
|
|
56
|
-
if (!this.dialog) return;
|
|
57
|
-
if (typeof this.dialog.close === "function") this.dialog.close();
|
|
58
|
-
this.openBtns?.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
|
|
59
|
-
if (this.isModal) document.body.classList.remove(this.scrollLockClass);
|
|
60
|
-
};
|
|
61
|
-
get dialog() {
|
|
62
|
-
const dialog = this.querySelector("dialog");
|
|
63
|
-
if (!dialog) {
|
|
64
|
-
throw new Error(`${this.localName} must contain a <dialog> element.`);
|
|
65
|
-
}
|
|
66
|
-
return dialog;
|
|
67
|
-
}
|
|
68
|
-
get openBtns() {
|
|
69
|
-
const btns = document.querySelectorAll(
|
|
70
|
-
`[href="#${this.id}"], [aria-controls="${this.id}"]`
|
|
71
|
-
);
|
|
72
|
-
btns?.forEach((btn) => {
|
|
73
|
-
btn.setAttribute("aria-controls", this.id);
|
|
74
|
-
});
|
|
75
|
-
return btns;
|
|
76
|
-
}
|
|
77
|
-
get closeBtns() {
|
|
78
|
-
return this.querySelectorAll("button[data-close]");
|
|
79
|
-
}
|
|
80
|
-
get isModal() {
|
|
81
|
-
return this.hasAttribute("data-modal");
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
if (!customElements.get("mx-dialog")) customElements.define("mx-dialog", Dialog);
|
|
85
|
-
//# sourceMappingURL=dialog.entry.js.map
|
|
1
|
+
import { n as handleEscape, r as handleOutsideClick } from "./chunks/utilities-DepaJdUg.js";
|
|
2
|
+
var Dialog = class extends HTMLElement {
|
|
3
|
+
internals_;
|
|
4
|
+
controller;
|
|
5
|
+
scrollLockClass = "body--scroll-lock";
|
|
6
|
+
constructor() {
|
|
7
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
|
|
8
|
+
}
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
if (!this.dialog) return;
|
|
11
|
+
let { signal: n } = this.controller;
|
|
12
|
+
this.openBtns?.forEach((e) => e.addEventListener("click", this.handleOpen, { signal: n })), this.closeBtns?.forEach((e) => e.addEventListener("click", this.handleClose, { signal: n })), document.addEventListener("click", (e) => {
|
|
13
|
+
this.dialog?.open && handleOutsideClick(e, this.dialog, this.handleClose, [...this.openBtns, ...this.closeBtns]);
|
|
14
|
+
}, { signal: n }), document.addEventListener("keydown", (t) => {
|
|
15
|
+
this.dialog?.open && handleEscape(t, this.handleClose);
|
|
16
|
+
}, { signal: n });
|
|
17
|
+
}
|
|
18
|
+
disconnectedCallback() {
|
|
19
|
+
this.dialog && (typeof this.dialog.close == "function" && this.dialog.close(), this.openBtns?.forEach((e) => e.setAttribute("aria-expanded", "false")), this.isModal && document.body.classList.remove(this.scrollLockClass), this.controller.abort());
|
|
20
|
+
}
|
|
21
|
+
handleOpen = (e) => {
|
|
22
|
+
this.dialog && (e.preventDefault(), typeof this.dialog.show == "function" && (this.isModal ? this.dialog.showModal() : this.dialog.show()), this.openBtns?.forEach((e) => e.setAttribute("aria-expanded", "true")), this.isModal && document.body.classList.add(this.scrollLockClass));
|
|
23
|
+
};
|
|
24
|
+
handleClose = () => {
|
|
25
|
+
this.dialog && (typeof this.dialog.close == "function" && this.dialog.close(), this.openBtns?.forEach((e) => e.setAttribute("aria-expanded", "false")), this.isModal && document.body.classList.remove(this.scrollLockClass));
|
|
26
|
+
};
|
|
27
|
+
get dialog() {
|
|
28
|
+
let e = this.querySelector("dialog");
|
|
29
|
+
if (!e) throw Error(`${this.localName} must contain a <dialog> element.`);
|
|
30
|
+
return e;
|
|
31
|
+
}
|
|
32
|
+
get openBtns() {
|
|
33
|
+
let e = document.querySelectorAll(`[href="#${this.id}"], [aria-controls="${this.id}"]`);
|
|
34
|
+
return e?.forEach((e) => {
|
|
35
|
+
e.setAttribute("aria-controls", this.id);
|
|
36
|
+
}), e;
|
|
37
|
+
}
|
|
38
|
+
get closeBtns() {
|
|
39
|
+
return this.querySelectorAll("button[data-close]");
|
|
40
|
+
}
|
|
41
|
+
get isModal() {
|
|
42
|
+
return this.hasAttribute("data-modal");
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
customElements.get("mx-dialog") || customElements.define("mx-dialog", Dialog);
|