43 lines
4.3 KiB
JavaScript
43 lines
4.3 KiB
JavaScript
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
import { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
|
|
export const dialogSurfaceClassNames = {
|
|
root: 'fui-DialogSurface',
|
|
backdrop: 'fui-DialogSurface__backdrop'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useRootBaseStyle = /*#__PURE__*/__resetStyles("rsmdyd3", "rup8wml", {
|
|
r: [".rsmdyd3{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}", ".rsmdyd3:focus{outline-style:none;}", ".rsmdyd3:focus-visible{outline-style:none;}", ".rsmdyd3[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rsmdyd3[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rup8wml{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}", ".rup8wml:focus{outline-style:none;}", ".rup8wml:focus-visible{outline-style:none;}", ".rup8wml[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rup8wml[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
s: ["@media (forced-colors: active){.rsmdyd3[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.rsmdyd3{max-width:100vw;}}", "@media screen and (max-height: 359px){.rsmdyd3{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.rup8wml[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.rup8wml{max-width:100vw;}}", "@media screen and (max-height: 359px){.rup8wml{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
|
|
});
|
|
const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("rsptlh5", null, [".rsptlh5{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"]);
|
|
const useBackdropStyles = /*#__PURE__*/__styles({
|
|
nestedDialogBackdrop: {
|
|
De3pzq: "f1c21dwh"
|
|
}
|
|
}, {
|
|
d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
|
|
});
|
|
/**
|
|
* Apply styling to the DialogSurface slots based on the state
|
|
*/
|
|
export const useDialogSurfaceStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
isNestedDialog,
|
|
root,
|
|
backdrop
|
|
} = state;
|
|
const rootBaseStyle = useRootBaseStyle();
|
|
const backdropBaseStyle = useBackdropBaseStyle();
|
|
const backdropStyles = useBackdropStyles();
|
|
root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);
|
|
if (backdrop) {
|
|
backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className);
|
|
}
|
|
return state;
|
|
}; |