@pantheon-systems/pds-toolkit-react 2.0.0-alpha.28 → 2.0.0-alpha.29
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/dist/components/{footer/SiteFooter → SiteFooter}/SiteFooter.d.ts +8 -4
- package/dist/css/component-css/pds-index.css +4 -4
- package/dist/css/component-css/pds-site-footer.css +1 -1
- package/dist/css/component-css/pds-tabs.css +1 -1
- package/dist/css/design-tokens/variables.dark.css +1 -41
- package/dist/css/design-tokens/variables.light.css +1 -41
- package/dist/css/layout-css/pds-app-layout.css +2 -1
- package/dist/css/layout-css/pds-index.css +2 -1
- package/dist/css/pds-components.css +4 -4
- package/dist/css/pds-core.css +1 -1
- package/dist/css/pds-layouts.css +2 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1222 -1194
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +1 -9
- package/package.json +2 -2
- package/dist/components/CTASlice/CTASlice.d.ts +0 -43
- package/dist/components/PullQuote/PullQuote.d.ts +0 -34
- package/dist/components/SocialLinks/SocialLinks.d.ts +0 -23
- package/dist/components/footer/FooterHeading/FooterHeading.d.ts +0 -22
- package/dist/components/footer/FooterLinks/FooterLinks.d.ts +0 -26
- package/dist/components/footer/SiteFooter/footer-content.d.ts +0 -1
- package/dist/components/tiles/AvatarTileList/AvatarTileList.d.ts +0 -28
- package/dist/components/tiles/Tile/Tile.d.ts +0 -42
- package/dist/components/tiles/TileGrid/TileGrid.d.ts +0 -29
- package/dist/css/component-css/pds-avatar-tile-list.css +0 -1
- package/dist/css/component-css/pds-cta-slice.css +0 -1
- package/dist/css/component-css/pds-footer-heading.css +0 -1
- package/dist/css/component-css/pds-footer-links.css +0 -1
- package/dist/css/component-css/pds-pull-quote.css +0 -1
- package/dist/css/component-css/pds-social-links.css +0 -1
- package/dist/css/component-css/pds-tile.css +0 -1
- package/dist/css/component-css/pds-tiles-common.css +0 -1
package/dist/index.source.d.ts
CHANGED
|
@@ -28,7 +28,6 @@ export * from './components/charts/LineChart/LineChart';
|
|
|
28
28
|
export * from './components/charts/shared/types';
|
|
29
29
|
export * from './components/CodeBlock/CodeBlock';
|
|
30
30
|
export * from './components/ComparisonList/ComparisonList';
|
|
31
|
-
export * from './components/CTASlice/CTASlice';
|
|
32
31
|
export * from './components/DashboardStat/DashboardStat';
|
|
33
32
|
export * from './components/Dropdown/Dropdown';
|
|
34
33
|
export * from './components/empty-states/CompactEmptyState/CompactEmptyState';
|
|
@@ -36,9 +35,6 @@ export * from './components/empty-states/HorizontalEmptyState/HorizontalEmptySta
|
|
|
36
35
|
export * from './components/empty-states/VerticalEmptyState/VerticalEmptyState';
|
|
37
36
|
export * from './components/FileDiff/FileDiff';
|
|
38
37
|
export * from './components/FlowSteps/FlowSteps';
|
|
39
|
-
export * from './components/footer/FooterHeading/FooterHeading';
|
|
40
|
-
export * from './components/footer/FooterLinks/FooterLinks';
|
|
41
|
-
export * from './components/footer/SiteFooter/SiteFooter';
|
|
42
38
|
export * from './components/icons/Icon/Icon';
|
|
43
39
|
export * from './components/icons/PaymentIcon/PaymentIcon';
|
|
44
40
|
export * from './components/icons/PlatformIcon/PlatformIcon';
|
|
@@ -100,9 +96,8 @@ export * from './components/PantheonLogo/PantheonLogo';
|
|
|
100
96
|
export * from './components/Popover/Popover';
|
|
101
97
|
export * from './components/progress-indicators/ProgressBar/ProgressBar';
|
|
102
98
|
export * from './components/progress-indicators/ProgressRing/ProgressRing';
|
|
103
|
-
export * from './components/PullQuote/PullQuote';
|
|
104
99
|
export * from './components/SiteDashboardHeading/SiteDashboardHeading';
|
|
105
|
-
export * from './components/
|
|
100
|
+
export * from './components/SiteFooter/SiteFooter';
|
|
106
101
|
export * from './components/SortableList/SortableList';
|
|
107
102
|
export * from './components/SortableList/SortableListHeader';
|
|
108
103
|
export * from './components/SortableList/SortableRow';
|
|
@@ -116,9 +111,6 @@ export * from './components/TableOfContents/TableOfContents';
|
|
|
116
111
|
export * from './components/Tabs/Tabs';
|
|
117
112
|
export * from './components/Tag/Tag';
|
|
118
113
|
export * from './components/ThemeSwitcher/ThemeSwitcher';
|
|
119
|
-
export * from './components/tiles/AvatarTileList/AvatarTileList';
|
|
120
|
-
export * from './components/tiles/Tile/Tile';
|
|
121
|
-
export * from './components/tiles/TileGrid/TileGrid';
|
|
122
114
|
export * from './components/Tooltip/Tooltip';
|
|
123
115
|
export * from './components/UtilityBar/UtilityBar';
|
|
124
116
|
export * from './libs/components/SiteOptionDisplay/SiteOptionDisplay';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pantheon-systems/pds-toolkit-react",
|
|
3
3
|
"technology": "React",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.29",
|
|
5
5
|
"description": "PDS toolkit built using the React framework",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public",
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
"@dnd-kit/utilities": "^3.2.2",
|
|
164
164
|
"@floating-ui/react": "^0.24.3",
|
|
165
165
|
"@floating-ui/react-dom": "~1.3.0",
|
|
166
|
-
"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.
|
|
166
|
+
"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.43",
|
|
167
167
|
"@reactuses/core": "^5.0.15",
|
|
168
168
|
"date-fns": "^4.1.0",
|
|
169
169
|
"downshift": "^9.3.2",
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import { ContainerWidth, HeadingLevel } from '../../libs/types/custom-types';
|
|
3
|
-
import './../buttons/Button/button.css';
|
|
4
|
-
import './cta-slice.css';
|
|
5
|
-
interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
|
|
6
|
-
/**
|
|
7
|
-
* Background color of slice
|
|
8
|
-
*/
|
|
9
|
-
backgroundColor?: 'default' | 'secondary';
|
|
10
|
-
/**
|
|
11
|
-
* Additional class names
|
|
12
|
-
*/
|
|
13
|
-
className?: string;
|
|
14
|
-
/**
|
|
15
|
-
* PDS container width.
|
|
16
|
-
*/
|
|
17
|
-
containerWidth?: ContainerWidth;
|
|
18
|
-
/**
|
|
19
|
-
* Heading level
|
|
20
|
-
*/
|
|
21
|
-
headingLevel?: HeadingLevel;
|
|
22
|
-
/**
|
|
23
|
-
* Heading text
|
|
24
|
-
*/
|
|
25
|
-
headingText: string;
|
|
26
|
-
/**
|
|
27
|
-
* Further explain block
|
|
28
|
-
*/
|
|
29
|
-
leadText?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Primary link content
|
|
32
|
-
*/
|
|
33
|
-
primaryLinkContent: ReactNode;
|
|
34
|
-
/**
|
|
35
|
-
* Optional secondary link content
|
|
36
|
-
*/
|
|
37
|
-
secondaryLinkContent?: ReactNode;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* CTA Slice UI component
|
|
41
|
-
*/
|
|
42
|
-
export declare const CTASlice: ({ backgroundColor, className, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, ...props }: CTASliceProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
-
export {};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import './pull-quote.css';
|
|
3
|
-
interface Attribution {
|
|
4
|
-
name: string;
|
|
5
|
-
org: string;
|
|
6
|
-
title: string;
|
|
7
|
-
}
|
|
8
|
-
interface PullQuoteProps extends ComponentPropsWithoutRef<'div'> {
|
|
9
|
-
/**
|
|
10
|
-
* Attribution for the quote
|
|
11
|
-
*/
|
|
12
|
-
attribution?: Attribution;
|
|
13
|
-
/**
|
|
14
|
-
* Additional class names
|
|
15
|
-
*/
|
|
16
|
-
className?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Image src. For stand-alone layout only, will not render for inline layout.
|
|
19
|
-
*/
|
|
20
|
-
image?: string;
|
|
21
|
-
/**
|
|
22
|
-
* The layout type for the pull quote
|
|
23
|
-
*/
|
|
24
|
-
layoutType?: 'stand-alone' | 'inline';
|
|
25
|
-
/**
|
|
26
|
-
* The quote text
|
|
27
|
-
*/
|
|
28
|
-
quote: string;
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* PullQuote UI component
|
|
32
|
-
*/
|
|
33
|
-
export declare const PullQuote: ({ attribution, className, image, layoutType, quote, ...props }: PullQuoteProps) => import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import { PDSIcon } from '../icons/Icon/Icon';
|
|
3
|
-
import './social-links.css';
|
|
4
|
-
interface SocialLinksProps extends ComponentPropsWithoutRef<'ul'> {
|
|
5
|
-
/**
|
|
6
|
-
* Additional class names
|
|
7
|
-
*/
|
|
8
|
-
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Array of social media links
|
|
11
|
-
*/
|
|
12
|
-
linkItems?: (keyof typeof socialData)[];
|
|
13
|
-
}
|
|
14
|
-
declare const socialData: Record<string, {
|
|
15
|
-
icon: PDSIcon;
|
|
16
|
-
label: string;
|
|
17
|
-
url: string;
|
|
18
|
-
}>;
|
|
19
|
-
/**
|
|
20
|
-
* SocialLinks UI component
|
|
21
|
-
*/
|
|
22
|
-
export declare const SocialLinks: ({ className, linkItems, ...props }: SocialLinksProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import type { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
|
-
import './footer-heading.css';
|
|
4
|
-
interface FooterHeadingProps {
|
|
5
|
-
/**
|
|
6
|
-
* Additional class names
|
|
7
|
-
*/
|
|
8
|
-
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Heading level
|
|
11
|
-
*/
|
|
12
|
-
headingLevel?: HeadingLevelCommon;
|
|
13
|
-
/**
|
|
14
|
-
* Heading text
|
|
15
|
-
*/
|
|
16
|
-
headingText: string;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Footer Heading UI component
|
|
20
|
-
*/
|
|
21
|
-
export declare const FooterHeading: ({ className, headingLevel, headingText, ...props }: FooterHeadingProps & ComponentPropsWithoutRef<HeadingLevelCommon>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
-
export {};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import type { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
|
-
import './footer-links.css';
|
|
4
|
-
interface FooterLinksProps extends ComponentPropsWithoutRef<'div'> {
|
|
5
|
-
/**
|
|
6
|
-
* Additional class names
|
|
7
|
-
*/
|
|
8
|
-
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Heading level
|
|
11
|
-
*/
|
|
12
|
-
headingLevel?: HeadingLevelCommon;
|
|
13
|
-
/**
|
|
14
|
-
* Heading text
|
|
15
|
-
*/
|
|
16
|
-
headingText: string;
|
|
17
|
-
/**
|
|
18
|
-
* Array of links
|
|
19
|
-
*/
|
|
20
|
-
linkItems?: ReactNode[];
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Footer Links UI component
|
|
24
|
-
*/
|
|
25
|
-
export declare const FooterLinks: ({ className, headingLevel, headingText, linkItems, ...props }: FooterLinksProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const docsFooterContent: import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import '../tiles-common.css';
|
|
3
|
-
import './avatar-tile-list.css';
|
|
4
|
-
export type AvatarTileListItem = {
|
|
5
|
-
alt?: string;
|
|
6
|
-
image?: string;
|
|
7
|
-
linkContent?: ReactNode;
|
|
8
|
-
name?: string;
|
|
9
|
-
org?: string;
|
|
10
|
-
title?: string;
|
|
11
|
-
};
|
|
12
|
-
/**
|
|
13
|
-
* Prop types for AvatarTileList
|
|
14
|
-
*/
|
|
15
|
-
export interface AvatarTileListProps extends ComponentPropsWithoutRef<'div'> {
|
|
16
|
-
/**
|
|
17
|
-
* Additional class names
|
|
18
|
-
*/
|
|
19
|
-
className?: string;
|
|
20
|
-
/**
|
|
21
|
-
* List of items for each tile.
|
|
22
|
-
*/
|
|
23
|
-
listItems: AvatarTileListItem[];
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* AvatarTileList UI component
|
|
27
|
-
*/
|
|
28
|
-
export declare const AvatarTileList: ({ className, listItems, ...props }: AvatarTileListProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
|
-
import './../tiles-common.css';
|
|
4
|
-
import './tile.css';
|
|
5
|
-
export type TileDisplayType = 'border' | 'clean' | 'clean-static';
|
|
6
|
-
/**
|
|
7
|
-
* Prop types for Tile
|
|
8
|
-
*/
|
|
9
|
-
export interface TileProps extends ComponentPropsWithoutRef<'div'> {
|
|
10
|
-
/**
|
|
11
|
-
* Additional class names
|
|
12
|
-
*/
|
|
13
|
-
className?: string;
|
|
14
|
-
/**
|
|
15
|
-
* Display type.
|
|
16
|
-
*/
|
|
17
|
-
displayType?: TileDisplayType;
|
|
18
|
-
/**
|
|
19
|
-
* Heading level or `span`.
|
|
20
|
-
*/
|
|
21
|
-
headingLevel?: HeadingLevelCommon;
|
|
22
|
-
/**
|
|
23
|
-
* Heading text.
|
|
24
|
-
*/
|
|
25
|
-
headingText?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Image source.
|
|
28
|
-
*/
|
|
29
|
-
imageSrc?: string;
|
|
30
|
-
/**
|
|
31
|
-
* A link element using the router of your choice.
|
|
32
|
-
*/
|
|
33
|
-
linkContent?: ReactNode;
|
|
34
|
-
/**
|
|
35
|
-
* Summary paragraph.
|
|
36
|
-
*/
|
|
37
|
-
summary?: string;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Tile UI component
|
|
41
|
-
*/
|
|
42
|
-
export declare const Tile: ({ className, displayType, headingLevel, headingText, imageSrc, linkContent, summary, ...props }: TileProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
|
-
import { TileDisplayType, TileProps } from '../../tiles/Tile/Tile';
|
|
4
|
-
import './../tiles-common.css';
|
|
5
|
-
/**
|
|
6
|
-
* Prop types for TileGrid
|
|
7
|
-
*/
|
|
8
|
-
export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
|
|
9
|
-
/**
|
|
10
|
-
* Additional class names
|
|
11
|
-
*/
|
|
12
|
-
className?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Display type.
|
|
15
|
-
*/
|
|
16
|
-
displayType?: TileDisplayType;
|
|
17
|
-
/**
|
|
18
|
-
* Heading level or `span`. All tiles in the grid will use this heading level.
|
|
19
|
-
*/
|
|
20
|
-
headingLevel?: HeadingLevelCommon;
|
|
21
|
-
/**
|
|
22
|
-
* Array of Tiles.
|
|
23
|
-
*/
|
|
24
|
-
tiles: TileProps[];
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* TileGrid UI component
|
|
28
|
-
*/
|
|
29
|
-
export declare const TileGrid: ({ className, displayType, headingLevel, tiles, ...props }: TileGridProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-avatar-tile-list a{cursor:pointer;text-decoration:none}.pds-tile-list__image{margin-block-end:var(--pds-spacing-m)}.pds-tile-list__image--avatar img{border-radius:50%;height:auto;width:11rem}.pds-tile-list__name{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-xl);font-weight:var(--pds-typography-fw-bold)}.pds-tile-list__title{color:var(--pds-color-fg-default-secondary);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);margin-block-start:var(--pds-spacing-2xs)}.pds-tile-list__org{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);margin-block-start:var(--pds-spacing-4xs)}.pds-tile-list__item:focus-visible{outline-width:var(--pds-border-width-outline)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-cta-slice{background-color:var(--pds-color-bg-default)}.pds-cta-slice--secondary{background-color:var(--pds-color-bg-default-secondary)}.pds-cta-slice .pds-container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-block:var(--pds-spacing-3xl);text-align:center}@media (min-width:768px){.pds-cta-slice .pds-container{padding-block:var(--pds-spacing-4xl);padding-inline:var(--pds-spacing-4xl)}}@media (min-width:1280px){.pds-cta-slice .pds-container{padding-block:var(--pds-spacing-6xl);padding-inline:var(--pds-spacing-5xl)}}.pds-cta-slice__heading{color:var(--pds-color-fg-default);display:block;font-weight:var(--pds-typography-fw-bold);margin-block-end:0}.pds-cta-slice__lead-text{color:var(--pds-color-fg-default-secondary);margin-block-end:0;margin-block-start:var(--pds-spacing-xl)}.pds-cta-slice__links{margin-block-start:var(--pds-spacing-2xl)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-footer-heading{color:var(--pds-color-fg-default);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s);margin-block-end:var(--pds-spacing-l);margin-block-start:0}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-footer-links{color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-footer-links__list{display:flex;flex-direction:column;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);list-style-type:none;margin:0;padding:0;row-gap:var(--pds-spacing-m)}.pds-footer-links__item a{color:var(--pds-color-fg-default);text-decoration:none}.pds-footer-links__item a:hover{color:var(--pds-color-interactive-ui-hover);text-decoration:underline}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-pull-quote{display:flex;flex-direction:column;gap:var(--pds-spacing-xl);padding-block:var(--pds-spacing-3xl) calc(var(--pds-spacing-3xl) + 1rem)}.pds-pull-quote__image img{height:auto;max-height:6rem;max-width:18rem;width:auto}.pds-pull-quote__quote-wrapper{column-gap:var(--pds-spacing-xl);display:flex;margin-inline:auto;width:92%}.pds-pull-quote--stand-alone{text-align:center}.pds-pull-quote__icon{color:var(--pds-color-brand-secondary-default)}.pds-pull-quote__text-wrapper{color:var(--pds-color-fg-default);display:flex;flex-direction:column;row-gap:var(--pds-spacing-xl)}.pds-pull-quote__attribution{font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-regular);text-transform:uppercase}.pds-pull-quote__name{font-weight:var(--pds-typography-fw-semibold)}.pds-pull-quote--inline .pds-pull-quote__icon--after{display:none}@media (max-width:767px){.pds-pull-quote{padding-block:var(--pds-spacing-xl) calc(var(--pds-spacing-xl) + 1rem)}.pds-pull-quote__image img{display:none}.pds-pull-quote__quote-wrapper{flex-direction:column;width:100%}.pds-pull-quote__icon--after{display:none}.pds-pull-quote__icon{margin-block-end:var(--pds-spacing-s)}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-social-links{column-gap:var(--pds-spacing-m);display:flex;list-style-type:none;margin:0;padding:0}.pds-social-links__item a{color:var(--pds-color-fg-default-secondary);display:flex}.pds-social-links__item a:hover{color:var(--pds-color-interactive-ui-hover)}.pds-social-links__item a:focus{outline-width:2px}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-tile__image{margin-block-end:var(--pds-spacing-s)}.pds-tile__image img{height:auto;max-width:5rem}.pds-tile__summary p{color:var(--pds-color-fg-default-secondary);line-height:var(--pds-typography-lh-m);margin-block-end:0}.pds-tile__cta{margin-block-start:var(--pds-spacing-m)}.pds-tile__cta a:focus{outline:none}.pds-tile__cta a:before{border-radius:var(--pds-border-radius-container);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:var(--pds-animation-transition-button);z-index:1}.pds-tile__cta a:focus-visible:before{border:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-button)}.dark-mode .pds-tile__image img{filter:grayscale(1) invert()}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pds-tile-grid,.pds-tile-list{display:grid;grid-row-gap:var(--pds-spacing-m)}@media (min-width:768px){.pds-tile-grid,.pds-tile-list{grid-column-gap:var(--pds-spacing-s);grid-row-gap:var(--pds-spacing-l);grid-template-columns:1fr 1px 1fr 1px 1fr}}@media (min-width:1280px){.pds-tile-grid,.pds-tile-list{grid-column-gap:var(--pds-spacing-l);grid-row-gap:var(--pds-spacing-2xl)}}@media (min-width:768px){.pds-tile-grid--two-column{grid-template-columns:1fr 1px 1fr}}.pds-tile,.pds-tile-list__item{align-items:center;background-color:var(--pds-color-bg-default);border-radius:var(--pds-border-radius-container);display:flex;flex-direction:column;padding:var(--pds-spacing-xl);position:relative;row-gap:var(--pds-spacing-3xs);text-align:center;transition:var(--pds-animation-transition-button);width:100%}@media (min-width:768px){.pds-tile,.pds-tile-list__item{padding:var(--pds-spacing-xl) var(--pds-spacing-m)}}@media (min-width:1280px){.pds-tile,.pds-tile-list__item{padding:var(--pds-spacing-xl)}}.pds-tile.pds-tile--clean:hover,a.pds-tile-list__item:hover{background-color:var(--pds-color-interactive-background-hover);text-decoration:none;transition:var(--pds-animation-transition-button)}.pds-tile.pds-tile--clean:hover .pds-cta-link__icon,a.pds-tile-list__item:hover .pds-cta-link__icon{color:var(--pds-color-interactive-ui-hover);left:var(--pds-spacing-s)}.pds-tile.pds-tile--border:active,.pds-tile.pds-tile--clean:active,a.pds-tile-list__item:active{background-color:var(--pds-color-interactive-background-active);transition:var(--pds-animation-transition-button)}.pds-tile--border{background-color:var(--pds-color-tile-background);box-shadow:var(--pds-elevation-raised)}.pds-tile.pds-tile--border:hover{box-shadow:var(--pds-elevation-overlay)}.pds-tile.pds-tile--border:hover .pds-cta-link__icon{color:var(--pds-color-interactive-ui-hover);left:var(--pds-spacing-s)}.pds-tile__separator{background-color:var(--pds-color-border-default);height:1px;margin:0 auto;width:65%}@media (min-width:768px){.pds-tile__separator{display:inline;height:80%;margin:auto 0;width:1px}}@media (min-width:1280px){.pds-tile__separator{height:70%}}.pds-tile__separator:last-child{display:none}@media (min-width:768px){.pds-tile__separator:nth-child(3n+3){display:none}}.pds-tile--border+.pds-tile__separator{background-color:var(--pds-color-bg-default)}.pds-tile__heading{color:var(--pds-color-fg-default);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-xs)}.pds-tile__bodytext,.pds-tile__bodytext p{color:var(--pds-color-fg-default-secondary);line-height:var(--pds-typography-lh-m);margin-block-end:0}a.pds-tile__cta{color:var(--pds-color-brand-secondary-default);display:inline-flex;font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-bold);gap:var(--pds-spacing-3xs);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-m);outline:none;text-decoration:none}.pds-tile__cta:focus-visible:before{border:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-button)}.pds-tile__cta-icon{fill:var(--pds-color-brand-secondary-default);margin-inline-start:var(--pds-spacing-2xs);position:relative;top:.125rem}
|