80 lines
3.2 KiB
JavaScript
80 lines
3.2 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
export const teachingPopoverFooterClassNames = {
|
|
root: 'fui-TeachingPopoverFooter',
|
|
primary: 'fui-TeachingPopoverFooter__primary',
|
|
secondary: 'fui-TeachingPopoverFooter__secondary'
|
|
};
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
root: {
|
|
mc9l5x: "f22iagw",
|
|
i8kkvl: 0,
|
|
Belr9w4: 0,
|
|
rmohyg: "f19gb1f4",
|
|
z8tnut: "f1kcqot9"
|
|
},
|
|
rootVertical: {
|
|
Beiy3e4: "f1vx9l62"
|
|
},
|
|
rootHorizontal: {
|
|
Beiy3e4: "f1063pyq",
|
|
Brf1p80: "f9c4gz4"
|
|
},
|
|
buttonRootVertical: {
|
|
a9b677: "f14z66ap",
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "ff3glw6"
|
|
},
|
|
buttonRootHorizontal: {
|
|
Bf4jedk: "f14es27b",
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "ff3glw6"
|
|
},
|
|
brandSecondary: {
|
|
g2u3we: "fm1ebug",
|
|
h3c5rm: ["f28omuz", "f1uhflii"],
|
|
B9xav0g: "f1ixw5o4",
|
|
zhjwy3: ["f1uhflii", "f28omuz"]
|
|
},
|
|
brandPrimary: {
|
|
sj55zd: "f16muhyy",
|
|
De3pzq: "f10s6wn9",
|
|
Bi91k9c: "f3ymbdj",
|
|
Jwef8y: "f1rgtb95",
|
|
B2d53fq: "f1pu27ff",
|
|
iro3zm: "f1d5c7in"
|
|
}
|
|
}, {
|
|
d: [".f22iagw{display:flex;}", [".f19gb1f4{gap:8px;}", {
|
|
p: -1
|
|
}], ".f1kcqot9{padding-top:12px;}", ".f1vx9l62{flex-direction:column;}", ".f1063pyq{flex-direction:row;}", ".f9c4gz4{justify-content:flex-end;}", ".f14z66ap{width:auto;}", [".ff3glw6{border-radius:4px;}", {
|
|
p: -1
|
|
}], ".f14es27b{min-width:96px;}", [".ff3glw6{border-radius:4px;}", {
|
|
p: -1
|
|
}], ".fm1ebug{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f28omuz{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1uhflii{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1ixw5o4{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}"],
|
|
h: [".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f1rgtb95:hover{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1pu27ff:hover:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1d5c7in:hover:active{background-color:var(--colorNeutralForegroundOnBrand);}"]
|
|
});
|
|
/** Applies style classnames to slots */
|
|
export const useTeachingPopoverFooterStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const styles = useStyles();
|
|
const {
|
|
appearance,
|
|
footerLayout
|
|
} = state;
|
|
state.root.className = mergeClasses(teachingPopoverFooterClassNames.root, styles.root, footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, state.root.className);
|
|
if (state.secondary) {
|
|
state.secondary.className = mergeClasses(teachingPopoverFooterClassNames.secondary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandSecondary : undefined, state.secondary.className);
|
|
}
|
|
state.primary.className = mergeClasses(teachingPopoverFooterClassNames.primary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandPrimary : undefined, state.primary.className);
|
|
return state;
|
|
}; |