67 lines
3.9 KiB
JavaScript
67 lines
3.9 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { useButtonStyles_unstable } from '@fluentui/react-button';
|
|
export const teachingPopoverCarouselFooterButtonClassNames = {
|
|
root: 'fui-TeachingPopoverCarouselFooterButton'
|
|
};
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
root: {
|
|
Bf4jedk: "f14es27b"
|
|
},
|
|
brandNext: {
|
|
sj55zd: "f16muhyy",
|
|
De3pzq: "f10s6wn9",
|
|
g2u3we: "f1iimpp0",
|
|
h3c5rm: ["f19uhqvu", "f1nx14hx"],
|
|
B9xav0g: "fnqa90p",
|
|
zhjwy3: ["f1nx14hx", "f19uhqvu"],
|
|
Bi91k9c: "f3ymbdj",
|
|
Jwef8y: "f1rgtb95",
|
|
B2d53fq: "f1pu27ff",
|
|
iro3zm: "f1d5c7in"
|
|
},
|
|
brandPrevious: {
|
|
sj55zd: "f1phragk",
|
|
De3pzq: "ffp7eso",
|
|
g2u3we: "fm1ebug",
|
|
h3c5rm: ["f28omuz", "f1uhflii"],
|
|
B9xav0g: "f1ixw5o4",
|
|
zhjwy3: ["f1uhflii", "f28omuz"],
|
|
Bi91k9c: "f1rq72xc",
|
|
Bgoe8wy: "f1bg5g8r",
|
|
Bwzppfd: ["f1h9bnsk", "f12x9t0k"],
|
|
oetu4i: "f19ervry",
|
|
gg5e9n: ["f12x9t0k", "f1h9bnsk"],
|
|
Jwef8y: "f15wkkf3",
|
|
B2d53fq: "f1d6v5y2",
|
|
b661bw: "f1565b9n",
|
|
Bk6r4ia: ["fm07gvo", "fwlsg72"],
|
|
B9zn80p: "fzw6fmy",
|
|
Bpld233: ["fwlsg72", "fm07gvo"],
|
|
iro3zm: "fnp9lpt"
|
|
}
|
|
}, {
|
|
d: [".f14es27b{min-width:96px;}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1iimpp0{border-top-color:var(--colorTransparentBackground);}", ".f19uhqvu{border-right-color:var(--colorTransparentBackground);}", ".f1nx14hx{border-left-color:var(--colorTransparentBackground);}", ".fnqa90p{border-bottom-color:var(--colorTransparentBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".fm1ebug{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f28omuz{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1uhflii{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1ixw5o4{border-bottom-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);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1bg5g8r:hover{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f1h9bnsk:hover{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f12x9t0k:hover{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f19ervry:hover{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1565b9n:hover:active{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".fm07gvo:hover:active{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".fwlsg72:hover:active{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fzw6fmy:hover:active{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}"]
|
|
});
|
|
/**
|
|
* Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
|
|
*/
|
|
export const useTeachingPopoverCarouselFooterButtonStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const styles = useStyles();
|
|
const {
|
|
navType,
|
|
popoverAppearance
|
|
} = state;
|
|
// Apply underlying fluent Button styles
|
|
state = {
|
|
...state,
|
|
...useButtonStyles_unstable(state)
|
|
};
|
|
state.root.className = mergeClasses(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);
|
|
return state;
|
|
}; |