@cloudscape-design/components 3.0.686 → 3.0.688
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/app-layout/visual-refresh-toolbar/drawer/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/index.js +2 -1
- package/app-layout/visual-refresh-toolbar/drawer/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.js +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +0 -3
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +30 -31
- package/container/styles.scoped.css +54 -57
- package/container/styles.selectors.js +30 -31
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +37 -45
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/split-panel/bottom.d.ts.map +1 -1
- package/split-panel/bottom.js +3 -0
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/styles.css.js +27 -26
- package/split-panel/styles.scoped.css +44 -41
- package/split-panel/styles.selectors.js +27 -26
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,eAgGvG;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}
|
|
@@ -41,7 +41,8 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
|
|
|
41
41
|
blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
|
|
42
42
|
insetBlockStart: placement.insetBlockStart,
|
|
43
43
|
} },
|
|
44
|
-
!isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement(
|
|
44
|
+
!isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
|
|
45
|
+
React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
|
|
45
46
|
React.createElement("div", { className: styles['drawer-content-container'] },
|
|
46
47
|
React.createElement("div", { className: clsx(styles['drawer-close-button']) },
|
|
47
48
|
React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../../button/internal';\nimport styles from './styles.css.js';\nimport sharedStyles from '../../styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\ninterface AppLayoutDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n const {\n activeDrawer,\n minDrawerSize,\n activeDrawerSize,\n maxDrawerSize,\n ariaLabels,\n drawers,\n drawersFocusControl,\n isMobile,\n placement,\n onActiveDrawerChange,\n onActiveDrawerResize,\n } = appLayoutInternals;\n const drawerRef = useRef<HTMLDivElement>(null);\n const activeDrawerId = activeDrawer?.id;\n\n const computedAriaLabels = {\n closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: drawersFocusControl.refs.slider,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n\n return (\n <aside\n id={activeDrawerId}\n aria-hidden={!activeDrawer}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, sharedStyles['with-motion'], {\n [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n })}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n drawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n insetBlockStart: placement.insetBlockStart,\n }}\n >\n {!isMobile && activeDrawer?.resizable && (\n <div className={styles['drawer-slider']}>\n <PanelResizeHandle\n ref={drawersFocusControl.refs.slider}\n position=\"side\"\n className={testutilStyles['drawers-slider']}\n ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n ariaValuenow={resizeProps.relativeSize}\n onKeyDown={resizeProps.onKeyDown}\n onPointerDown={resizeProps.onPointerDown}\n />\n </div>\n )}\n <div className={styles['drawer-content-container']}>\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => onActiveDrawerChange(null)}\n ref={drawersFocusControl.refs.close}\n variant=\"icon\"\n />\n </div>\n {toolsContent && (\n <div\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n >\n {toolsContent}\n </div>\n )}\n {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n </div>\n </aside>\n );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}
|
|
@@ -14,7 +14,7 @@ export function AppLayoutToolbarImplementation({ appLayoutInternals }) {
|
|
|
14
14
|
var _a, _b;
|
|
15
15
|
const { ariaLabels, breadcrumbs, discoveredBreadcrumbs, activeDrawer, drawers, drawersFocusControl, setToolbarHeight, verticalOffsets, onNavigationToggle, isMobile, toolbarState, setToolbarState, navigationOpen, navigation, navigationFocusControl, splitPanelControlId, splitPanelPosition, splitPanelToggleConfig, splitPanelFocusControl, onSplitPanelToggle, splitPanelOpen, onActiveDrawerChange, } = appLayoutInternals;
|
|
16
16
|
// TODO: expose configuration property
|
|
17
|
-
const pinnedToolbar =
|
|
17
|
+
const pinnedToolbar = true;
|
|
18
18
|
const ref = useRef(null);
|
|
19
19
|
useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
|
|
20
20
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAM7E,MAAM,UAAU,8BAA8B,CAAC,EAAE,kBAAkB,EAAuC;;IACxG,MAAM,EACJ,UAAU,EACV,WAAW,EACX,qBAAqB,EACrB,YAAY,EACZ,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,GAAG,kBAAkB,CAAC;IACvB,sCAAsC;IACtC,MAAM,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { DrawerTriggers } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\n\ninterface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayoutToolbarImplementationProps) {\n const {\n ariaLabels,\n breadcrumbs,\n discoveredBreadcrumbs,\n activeDrawer,\n drawers,\n drawersFocusControl,\n setToolbarHeight,\n verticalOffsets,\n onNavigationToggle,\n isMobile,\n toolbarState,\n setToolbarState,\n navigationOpen,\n navigation,\n navigationFocusControl,\n splitPanelControlId,\n splitPanelPosition,\n splitPanelToggleConfig,\n splitPanelFocusControl,\n onSplitPanelToggle,\n splitPanelOpen,\n onActiveDrawerChange,\n } = appLayoutInternals;\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {navigation && !navigationOpen && (\n <nav\n aria-hidden={navigationOpen}\n className={clsx(styles['universal-toolbar-nav'], { [testutilStyles['drawer-closed']]: !navigationOpen })}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={navigationOpen ? undefined : false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle(!navigationOpen)}\n ref={navigationFocusControl.refs.toggle}\n selected={navigationOpen}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n {breadcrumbs}\n {discoveredBreadcrumbs && <InternalBreadcrumbGroup {...discoveredBreadcrumbs} />}\n </div>\n )}\n {(drawers.length > 0 || splitPanelToggleConfig.displayed) && (\n <span className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawer?.id ?? null}\n drawers={drawers}\n drawersFocusRef={drawersFocusControl.refs.toggle}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={\n splitPanelToggleConfig.displayed\n ? {\n ...splitPanelToggleConfig,\n controlId: splitPanelControlId,\n active: splitPanelOpen,\n position: splitPanelPosition,\n }\n : undefined\n }\n splitPanelFocusRef={splitPanelFocusControl.refs.toggle}\n onSplitPanelToggle={onSplitPanelToggle}\n />\n </span>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAK1E,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAmGxB"}
|
package/container/internal.js
CHANGED
|
@@ -13,7 +13,6 @@ import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
|
13
13
|
import { useModalContext } from '../internal/context/modal-context';
|
|
14
14
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
15
15
|
import { ContainerHeaderContextProvider } from '../internal/context/container-header';
|
|
16
|
-
import { getGlobalFlag } from '../internal/utils/global-flags';
|
|
17
16
|
export function InternalContainerAsSubstep(props) {
|
|
18
17
|
const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
|
|
19
18
|
const modalContext = useModalContext();
|
|
@@ -36,7 +35,6 @@ export default function InternalContainer(_a) {
|
|
|
36
35
|
// In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.
|
|
37
36
|
const shouldHaveStickyStyles = isSticky && !isMobile;
|
|
38
37
|
const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
|
|
39
|
-
const hasToolbar = getGlobalFlag('appLayoutWidget');
|
|
40
38
|
const mediaPosition = (_b = media === null || media === void 0 ? void 0 : media.position) !== null && _b !== void 0 ? _b : 'top';
|
|
41
39
|
return (React.createElement("div", Object.assign({}, baseProps, __funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], isRefresh && styles.refresh), ref: mergedRef }),
|
|
42
40
|
hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top' ? { height: (media === null || media === void 0 ? void 0 : media.height) || '' } : { width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
|
|
@@ -49,7 +47,6 @@ export default function InternalContainer(_a) {
|
|
|
49
47
|
[styles['header-dynamic-height']]: hasDynamicHeight,
|
|
50
48
|
[styles['header-stuck']]: isStuck,
|
|
51
49
|
[styles['with-paddings']]: !disableHeaderPaddings,
|
|
52
|
-
[styles['with-toolbar']]: hasToolbar,
|
|
53
50
|
[styles['with-hidden-content']]: !children || __hiddenContent,
|
|
54
51
|
[styles['header-with-media']]: hasMedia,
|
|
55
52
|
[styles['header-full-page']]: __fullPage && isRefresh,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { getGlobalFlag } from '../internal/utils/global-flags';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n media,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const hasToolbar = getGlobalFlag('appLayoutWidget');\n const mediaPosition = media?.position ?? 'top';\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-toolbar']]: hasToolbar,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n })}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div\n className={clsx(styles.content, fitHeight && styles['content-fit-height'], {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n media,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const mediaPosition = media?.position ?? 'top';\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n })}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div\n className={clsx(styles.content, fitHeight && styles['content-fit-height'], {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
|
package/container/styles.css.js
CHANGED
|
@@ -1,36 +1,35 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"fit-height": "awsui_fit-
|
|
6
|
-
"with-side-media": "awsui_with-side-
|
|
7
|
-
"variant-default": "awsui_variant-
|
|
8
|
-
"variant-stacked": "awsui_variant-
|
|
9
|
-
"refresh": "
|
|
10
|
-
"sticky-enabled": "awsui_sticky-
|
|
11
|
-
"with-top-media": "awsui_with-top-
|
|
12
|
-
"content-wrapper": "awsui_content-
|
|
13
|
-
"content-wrapper-fit-height": "awsui_content-wrapper-fit-
|
|
14
|
-
"media": "
|
|
15
|
-
"media-top": "awsui_media-
|
|
16
|
-
"media-side": "awsui_media-
|
|
17
|
-
"header": "
|
|
18
|
-
"header-full-page": "awsui_header-full-
|
|
19
|
-
"header-with-media": "awsui_header-with-
|
|
20
|
-
"header-sticky-disabled": "awsui_header-sticky-
|
|
21
|
-
"header-sticky-enabled": "awsui_header-sticky-
|
|
22
|
-
"header-stuck": "awsui_header-
|
|
23
|
-
"header-variant-cards": "awsui_header-variant-
|
|
24
|
-
"header-dynamic-height": "awsui_header-dynamic-
|
|
25
|
-
"with-paddings": "awsui_with-
|
|
26
|
-
"with-hidden-content": "awsui_with-hidden-
|
|
27
|
-
"header-variant-full-page": "awsui_header-variant-full-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"content": "
|
|
31
|
-
"content-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"with-divider": "awsui_with-divider_14iqq_1ml84_423"
|
|
4
|
+
"root": "awsui_root_14iqq_1vekq_101",
|
|
5
|
+
"fit-height": "awsui_fit-height_14iqq_1vekq_137",
|
|
6
|
+
"with-side-media": "awsui_with-side-media_14iqq_1vekq_142",
|
|
7
|
+
"variant-default": "awsui_variant-default_14iqq_1vekq_145",
|
|
8
|
+
"variant-stacked": "awsui_variant-stacked_14iqq_1vekq_145",
|
|
9
|
+
"refresh": "awsui_refresh_14iqq_1vekq_153",
|
|
10
|
+
"sticky-enabled": "awsui_sticky-enabled_14iqq_1vekq_203",
|
|
11
|
+
"with-top-media": "awsui_with-top-media_14iqq_1vekq_215",
|
|
12
|
+
"content-wrapper": "awsui_content-wrapper_14iqq_1vekq_220",
|
|
13
|
+
"content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1vekq_225",
|
|
14
|
+
"media": "awsui_media_14iqq_1vekq_232",
|
|
15
|
+
"media-top": "awsui_media-top_14iqq_1vekq_250",
|
|
16
|
+
"media-side": "awsui_media-side_14iqq_1vekq_255",
|
|
17
|
+
"header": "awsui_header_14iqq_1vekq_261",
|
|
18
|
+
"header-full-page": "awsui_header-full-page_14iqq_1vekq_266",
|
|
19
|
+
"header-with-media": "awsui_header-with-media_14iqq_1vekq_269",
|
|
20
|
+
"header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1vekq_275",
|
|
21
|
+
"header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1vekq_279",
|
|
22
|
+
"header-stuck": "awsui_header-stuck_14iqq_1vekq_285",
|
|
23
|
+
"header-variant-cards": "awsui_header-variant-cards_14iqq_1vekq_295",
|
|
24
|
+
"header-dynamic-height": "awsui_header-dynamic-height_14iqq_1vekq_298",
|
|
25
|
+
"with-paddings": "awsui_with-paddings_14iqq_1vekq_304",
|
|
26
|
+
"with-hidden-content": "awsui_with-hidden-content_14iqq_1vekq_313",
|
|
27
|
+
"header-variant-full-page": "awsui_header-variant-full-page_14iqq_1vekq_371",
|
|
28
|
+
"header-cover": "awsui_header-cover_14iqq_1vekq_374",
|
|
29
|
+
"content": "awsui_content_14iqq_1vekq_220",
|
|
30
|
+
"content-fit-height": "awsui_content-fit-height_14iqq_1vekq_402",
|
|
31
|
+
"content-with-media": "awsui_content-with-media_14iqq_1vekq_412",
|
|
32
|
+
"footer": "awsui_footer_14iqq_1vekq_416",
|
|
33
|
+
"with-divider": "awsui_with-divider_14iqq_1vekq_420"
|
|
35
34
|
};
|
|
36
35
|
|
|
@@ -98,7 +98,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
98
98
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
99
|
SPDX-License-Identifier: Apache-2.0
|
|
100
100
|
*/
|
|
101
|
-
.
|
|
101
|
+
.awsui_root_14iqq_1vekq_101:not(#\9) {
|
|
102
102
|
border-collapse: separate;
|
|
103
103
|
border-spacing: 0;
|
|
104
104
|
box-sizing: border-box;
|
|
@@ -135,15 +135,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
135
135
|
word-wrap: break-word;
|
|
136
136
|
position: relative;
|
|
137
137
|
}
|
|
138
|
-
.
|
|
138
|
+
.awsui_root_14iqq_1vekq_101.awsui_fit-height_14iqq_1vekq_137:not(#\9) {
|
|
139
139
|
display: flex;
|
|
140
140
|
flex-direction: column;
|
|
141
141
|
block-size: 100%;
|
|
142
142
|
}
|
|
143
|
-
.
|
|
143
|
+
.awsui_root_14iqq_1vekq_101.awsui_fit-height_14iqq_1vekq_137.awsui_with-side-media_14iqq_1vekq_142:not(#\9) {
|
|
144
144
|
flex-direction: row;
|
|
145
145
|
}
|
|
146
|
-
.
|
|
146
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-default_14iqq_1vekq_145:not(#\9), .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9) {
|
|
147
147
|
background-color: var(--color-background-container-content-4un1ap, #ffffff);
|
|
148
148
|
border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
149
149
|
border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
@@ -151,11 +151,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
151
151
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
152
152
|
box-sizing: border-box;
|
|
153
153
|
}
|
|
154
|
-
.
|
|
154
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-default_14iqq_1vekq_145.awsui_refresh_14iqq_1vekq_153:not(#\9), .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145.awsui_refresh_14iqq_1vekq_153:not(#\9) {
|
|
155
155
|
border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
156
156
|
border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
157
157
|
}
|
|
158
|
-
.
|
|
158
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-default_14iqq_1vekq_145:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::before, .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::before {
|
|
159
159
|
content: "";
|
|
160
160
|
position: absolute;
|
|
161
161
|
inset-inline-start: 0px;
|
|
@@ -173,7 +173,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
173
173
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
174
174
|
z-index: 1;
|
|
175
175
|
}
|
|
176
|
-
.
|
|
176
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-default_14iqq_1vekq_145:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::after, .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::after {
|
|
177
177
|
content: "";
|
|
178
178
|
position: absolute;
|
|
179
179
|
inset-inline-start: 0px;
|
|
@@ -189,144 +189,144 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
189
189
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
190
190
|
box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
|
|
191
191
|
}
|
|
192
|
-
.
|
|
192
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9):not(:last-child), .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9):not(:last-child)::after {
|
|
193
193
|
border-end-end-radius: 0;
|
|
194
194
|
border-end-start-radius: 0;
|
|
195
195
|
border-block-end-width: 0;
|
|
196
196
|
}
|
|
197
|
-
.
|
|
197
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145 + .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9), .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145 + .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9)::before, .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145 + .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9)::after {
|
|
198
198
|
border-start-start-radius: 0;
|
|
199
199
|
border-start-end-radius: 0;
|
|
200
200
|
}
|
|
201
|
-
.
|
|
201
|
+
.awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145 + .awsui_root_14iqq_1vekq_101.awsui_variant-stacked_14iqq_1vekq_145:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::before {
|
|
202
202
|
border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
203
203
|
}
|
|
204
|
-
.
|
|
204
|
+
.awsui_root_14iqq_1vekq_101.awsui_sticky-enabled_14iqq_1vekq_203:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::before {
|
|
205
205
|
inset-block-start: calc(-1 * var(--border-container-top-width-uugwwl, 0px));
|
|
206
206
|
}
|
|
207
|
-
.
|
|
207
|
+
.awsui_root_14iqq_1vekq_101.awsui_sticky-enabled_14iqq_1vekq_203:not(#\9):not(.awsui_refresh_14iqq_1vekq_153).awsui_variant-stacked_14iqq_1vekq_145::before {
|
|
208
208
|
inset-block-start: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
.awsui_with-side-
|
|
211
|
+
.awsui_with-side-media_14iqq_1vekq_142:not(#\9) {
|
|
212
212
|
display: flex;
|
|
213
213
|
flex-direction: row;
|
|
214
214
|
}
|
|
215
215
|
|
|
216
|
-
.awsui_with-top-
|
|
216
|
+
.awsui_with-top-media_14iqq_1vekq_215:not(#\9) {
|
|
217
217
|
display: flex;
|
|
218
218
|
flex-direction: column;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
.awsui_content-
|
|
221
|
+
.awsui_content-wrapper_14iqq_1vekq_220:not(#\9) {
|
|
222
222
|
display: flex;
|
|
223
223
|
flex-direction: column;
|
|
224
224
|
inline-size: 100%;
|
|
225
225
|
}
|
|
226
|
-
.awsui_content-wrapper-fit-
|
|
226
|
+
.awsui_content-wrapper-fit-height_14iqq_1vekq_225:not(#\9) {
|
|
227
227
|
block-size: 100%;
|
|
228
228
|
overflow: hidden;
|
|
229
229
|
border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
230
230
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
231
231
|
}
|
|
232
232
|
|
|
233
|
-
.
|
|
233
|
+
.awsui_media_14iqq_1vekq_232:not(#\9) {
|
|
234
234
|
overflow: hidden;
|
|
235
235
|
flex-shrink: 0;
|
|
236
236
|
}
|
|
237
|
-
.
|
|
238
|
-
.
|
|
239
|
-
.
|
|
237
|
+
.awsui_media_14iqq_1vekq_232 img:not(#\9),
|
|
238
|
+
.awsui_media_14iqq_1vekq_232 video:not(#\9),
|
|
239
|
+
.awsui_media_14iqq_1vekq_232 picture:not(#\9) {
|
|
240
240
|
inline-size: 100%;
|
|
241
241
|
block-size: 100%;
|
|
242
242
|
object-fit: cover;
|
|
243
243
|
object-position: center;
|
|
244
244
|
}
|
|
245
|
-
.
|
|
245
|
+
.awsui_media_14iqq_1vekq_232 iframe:not(#\9) {
|
|
246
246
|
inline-size: 100%;
|
|
247
247
|
block-size: 100%;
|
|
248
248
|
border-block: 0;
|
|
249
249
|
border-inline: 0;
|
|
250
250
|
}
|
|
251
|
-
.awsui_media-
|
|
251
|
+
.awsui_media-top_14iqq_1vekq_250:not(#\9) {
|
|
252
252
|
max-block-size: 66%;
|
|
253
253
|
border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
|
|
254
254
|
border-start-end-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
|
|
255
255
|
}
|
|
256
|
-
.awsui_media-
|
|
256
|
+
.awsui_media-side_14iqq_1vekq_255:not(#\9) {
|
|
257
257
|
max-inline-size: 66%;
|
|
258
258
|
border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
|
|
259
259
|
border-end-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
|
|
260
260
|
}
|
|
261
261
|
|
|
262
|
-
.
|
|
262
|
+
.awsui_header_14iqq_1vekq_261:not(#\9) {
|
|
263
263
|
background-color: var(--color-background-container-header-8b9fgi, #ffffff);
|
|
264
264
|
border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
265
265
|
border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
266
266
|
}
|
|
267
|
-
.
|
|
267
|
+
.awsui_header_14iqq_1vekq_261.awsui_header-full-page_14iqq_1vekq_266:not(#\9) {
|
|
268
268
|
background-color: var(--color-background-layout-main-nx09lr, #ffffff);
|
|
269
269
|
}
|
|
270
|
-
.
|
|
270
|
+
.awsui_header_14iqq_1vekq_261.awsui_header-with-media_14iqq_1vekq_269:not(#\9) {
|
|
271
271
|
background: none;
|
|
272
272
|
}
|
|
273
|
-
.
|
|
273
|
+
.awsui_header_14iqq_1vekq_261.awsui_header-with-media_14iqq_1vekq_269:not(#\9):not(:empty) {
|
|
274
274
|
border-block-end: none;
|
|
275
275
|
}
|
|
276
|
-
.awsui_header-sticky-
|
|
276
|
+
.awsui_header-sticky-disabled_14iqq_1vekq_275:not(#\9) {
|
|
277
277
|
position: relative;
|
|
278
278
|
z-index: 1;
|
|
279
279
|
}
|
|
280
|
-
.awsui_header-sticky-
|
|
280
|
+
.awsui_header-sticky-enabled_14iqq_1vekq_279:not(#\9) {
|
|
281
281
|
inset-block-start: 0;
|
|
282
282
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
283
283
|
position: sticky;
|
|
284
284
|
z-index: 800;
|
|
285
285
|
}
|
|
286
|
-
.awsui_header-
|
|
286
|
+
.awsui_header-stuck_14iqq_1vekq_285:not(#\9) {
|
|
287
287
|
border-start-start-radius: 0;
|
|
288
288
|
border-start-end-radius: 0;
|
|
289
289
|
border-end-start-radius: 0;
|
|
290
290
|
border-end-end-radius: 0;
|
|
291
291
|
}
|
|
292
|
-
.awsui_header-
|
|
292
|
+
.awsui_header-stuck_14iqq_1vekq_285:not(#\9)::before {
|
|
293
293
|
border-block: 0;
|
|
294
294
|
border-inline: 0;
|
|
295
295
|
}
|
|
296
|
-
.awsui_header-
|
|
296
|
+
.awsui_header-stuck_14iqq_1vekq_285:not(#\9):not(.awsui_header-variant-cards_14iqq_1vekq_295) {
|
|
297
297
|
box-shadow: var(--shadow-sticky-embedded-uvh5ry, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
|
|
298
298
|
}
|
|
299
|
-
.awsui_header-dynamic-
|
|
299
|
+
.awsui_header-dynamic-height_14iqq_1vekq_298.awsui_header-stuck_14iqq_1vekq_285:not(#\9) {
|
|
300
300
|
margin-block-end: calc(var(--line-height-heading-xl-avbttk, 30px) - var(--line-height-heading-l-mmm3my, 24px));
|
|
301
301
|
}
|
|
302
|
-
.
|
|
302
|
+
.awsui_header_14iqq_1vekq_261:not(#\9):not(:empty) {
|
|
303
303
|
border-block-end: var(--border-container-sticky-width-6asz33, 0px) solid var(--color-border-container-divider-p2uygo, transparent);
|
|
304
304
|
}
|
|
305
|
-
.
|
|
305
|
+
.awsui_header_14iqq_1vekq_261.awsui_with-paddings_14iqq_1vekq_304:not(#\9) {
|
|
306
306
|
padding-block-start: var(--space-container-header-top-5qav00, 12px);
|
|
307
307
|
padding-block-end: var(--space-container-header-bottom-vj01hn, 8px);
|
|
308
308
|
padding-inline: var(--space-container-horizontal-wfukh3, 20px);
|
|
309
309
|
}
|
|
310
|
-
.
|
|
310
|
+
.awsui_header_14iqq_1vekq_261.awsui_with-paddings_14iqq_1vekq_304.awsui_header-variant-cards_14iqq_1vekq_295:not(#\9) {
|
|
311
311
|
padding-block: var(--space-container-header-top-5qav00, 12px);
|
|
312
312
|
padding-inline: var(--space-container-horizontal-wfukh3, 20px);
|
|
313
313
|
}
|
|
314
|
-
.
|
|
314
|
+
.awsui_header_14iqq_1vekq_261.awsui_with-hidden-content_14iqq_1vekq_313:not(#\9) {
|
|
315
315
|
border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
316
316
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
317
317
|
}
|
|
318
|
-
.awsui_header-variant-
|
|
318
|
+
.awsui_header-variant-cards_14iqq_1vekq_295:not(#\9) {
|
|
319
319
|
border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
320
320
|
border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
321
321
|
border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
322
322
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
323
323
|
box-sizing: border-box;
|
|
324
324
|
}
|
|
325
|
-
.awsui_header-variant-
|
|
325
|
+
.awsui_header-variant-cards_14iqq_1vekq_295.awsui_refresh_14iqq_1vekq_153:not(#\9) {
|
|
326
326
|
border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
327
327
|
border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
328
328
|
}
|
|
329
|
-
.awsui_header-variant-
|
|
329
|
+
.awsui_header-variant-cards_14iqq_1vekq_295:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::before {
|
|
330
330
|
content: "";
|
|
331
331
|
position: absolute;
|
|
332
332
|
inset-inline-start: 0px;
|
|
@@ -344,7 +344,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
344
344
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
345
345
|
z-index: 1;
|
|
346
346
|
}
|
|
347
|
-
.awsui_header-variant-
|
|
347
|
+
.awsui_header-variant-cards_14iqq_1vekq_295:not(#\9):not(.awsui_refresh_14iqq_1vekq_153)::after {
|
|
348
348
|
content: "";
|
|
349
349
|
position: absolute;
|
|
350
350
|
inset-inline-start: 0px;
|
|
@@ -360,29 +360,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
360
360
|
border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
361
361
|
box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
|
|
362
362
|
}
|
|
363
|
-
.awsui_header-variant-
|
|
363
|
+
.awsui_header-variant-cards_14iqq_1vekq_295:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1vekq_279) {
|
|
364
364
|
position: relative;
|
|
365
365
|
}
|
|
366
|
-
.awsui_header-variant-
|
|
366
|
+
.awsui_header-variant-cards_14iqq_1vekq_295.awsui_header-stuck_14iqq_1vekq_285:not(#\9)::after, .awsui_header-variant-cards_14iqq_1vekq_295.awsui_header-stuck_14iqq_1vekq_285:not(#\9)::before {
|
|
367
367
|
border-block: 0;
|
|
368
368
|
border-inline: 0;
|
|
369
369
|
border-start-start-radius: 0;
|
|
370
370
|
border-start-end-radius: 0;
|
|
371
371
|
}
|
|
372
|
-
.awsui_header-variant-full-
|
|
373
|
-
padding-block-start: var(--space-scaled-s-aqzyko, 12px);
|
|
374
|
-
}
|
|
375
|
-
.awsui_header-variant-full-page_14iqq_1ml84_371.awsui_header-stuck_14iqq_1ml84_285:not(#\9) {
|
|
372
|
+
.awsui_header-variant-full-page_14iqq_1vekq_371.awsui_header-stuck_14iqq_1vekq_285:not(#\9) {
|
|
376
373
|
box-shadow: none;
|
|
377
374
|
}
|
|
378
|
-
.awsui_header-variant-full-
|
|
375
|
+
.awsui_header-variant-full-page_14iqq_1vekq_371.awsui_header-stuck_14iqq_1vekq_285 > .awsui_header-cover_14iqq_1vekq_374:not(#\9) {
|
|
379
376
|
background-color: var(--color-background-layout-main-nx09lr, #ffffff);
|
|
380
377
|
inline-size: 100%;
|
|
381
378
|
position: absolute;
|
|
382
379
|
block-size: var(--space-scaled-s-aqzyko, 12px);
|
|
383
380
|
inset-block-start: calc(-1 * var(--space-scaled-s-aqzyko, 12px));
|
|
384
381
|
}
|
|
385
|
-
.awsui_header-variant-full-
|
|
382
|
+
.awsui_header-variant-full-page_14iqq_1vekq_371.awsui_header-stuck_14iqq_1vekq_285:not(#\9)::before {
|
|
386
383
|
content: "";
|
|
387
384
|
position: absolute;
|
|
388
385
|
pointer-events: none;
|
|
@@ -392,7 +389,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
392
389
|
inset-block-start: 0;
|
|
393
390
|
border-block-end: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
394
391
|
}
|
|
395
|
-
.awsui_header-variant-full-
|
|
392
|
+
.awsui_header-variant-full-page_14iqq_1vekq_371.awsui_header-stuck_14iqq_1vekq_285:not(#\9)::after {
|
|
396
393
|
content: "";
|
|
397
394
|
position: absolute;
|
|
398
395
|
inset: 0;
|
|
@@ -400,27 +397,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
400
397
|
clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
|
|
401
398
|
}
|
|
402
399
|
|
|
403
|
-
.
|
|
400
|
+
.awsui_content_14iqq_1vekq_220:not(#\9) {
|
|
404
401
|
flex: 1;
|
|
405
402
|
}
|
|
406
|
-
.awsui_content-fit-
|
|
403
|
+
.awsui_content-fit-height_14iqq_1vekq_402:not(#\9) {
|
|
407
404
|
overflow: auto;
|
|
408
405
|
}
|
|
409
|
-
.
|
|
406
|
+
.awsui_content_14iqq_1vekq_220.awsui_with-paddings_14iqq_1vekq_304:not(#\9) {
|
|
410
407
|
padding-block: var(--space-scaled-l-0hpmd7, 20px);
|
|
411
408
|
padding-inline: var(--space-container-horizontal-wfukh3, 20px);
|
|
412
409
|
}
|
|
413
|
-
.
|
|
410
|
+
.awsui_header_14iqq_1vekq_261 + .awsui_content_14iqq_1vekq_220.awsui_with-paddings_14iqq_1vekq_304:not(#\9) {
|
|
414
411
|
padding-block-start: var(--space-container-content-top-1ae0r3, 4px);
|
|
415
412
|
}
|
|
416
|
-
.
|
|
413
|
+
.awsui_header_14iqq_1vekq_261 + .awsui_content_14iqq_1vekq_220.awsui_with-paddings_14iqq_1vekq_304.awsui_content-with-media_14iqq_1vekq_412:not(#\9) {
|
|
417
414
|
padding-block-start: 0;
|
|
418
415
|
}
|
|
419
416
|
|
|
420
|
-
.
|
|
417
|
+
.awsui_footer_14iqq_1vekq_416.awsui_with-paddings_14iqq_1vekq_304:not(#\9) {
|
|
421
418
|
padding-block: var(--space-scaled-s-aqzyko, 12px);
|
|
422
419
|
padding-inline: var(--space-container-horizontal-wfukh3, 20px);
|
|
423
420
|
}
|
|
424
|
-
.
|
|
421
|
+
.awsui_footer_14iqq_1vekq_416.awsui_with-divider_14iqq_1vekq_420:not(#\9) {
|
|
425
422
|
border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
426
423
|
}
|