210 lines
6.3 KiB
JavaScript
210 lines
6.3 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
export const carouselNavButtonClassNames = {
|
|
root: 'fui-CarouselNavButton'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
root: {
|
|
Bceei9c: "f1k6fduh",
|
|
Bkecrkj: "fc5wo7j",
|
|
a9b677: "f1van5z7",
|
|
Bqenvij: "f1fkmctz",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1f5q0n8",
|
|
B7ck84d: "f1e4lqlz",
|
|
De3pzq: "f1c21dwh",
|
|
B4j52fo: "fre7gi1",
|
|
Bekrc4i: ["f1358rze", "f1rvrf73"],
|
|
Bn0qgzm: "fqdk4by",
|
|
ibv6hh: ["f1rvrf73", "f1358rze"],
|
|
Bsft5z2: "f13zj6fq",
|
|
ap17g6: "f2gz7yw",
|
|
li1rpt: "f1gw3sf2",
|
|
d9w3h3: 0,
|
|
B3778ie: 0,
|
|
B4j8arr: 0,
|
|
Bl18szs: 0,
|
|
Blrzh8d: "f1x820d0",
|
|
Bjuhk93: 0,
|
|
B1q35kw: 0,
|
|
Bw17bha: 0,
|
|
Bcgy8vk: 0,
|
|
Du69r6: 0,
|
|
Gp14am: 0,
|
|
vfts7: 0,
|
|
Bhxzhr1: 0,
|
|
G63luc: 0,
|
|
s924m2: 0,
|
|
Barhvk9: 0,
|
|
Ihftqj: 0,
|
|
wywymt: 0,
|
|
B0n5ga8: 0,
|
|
Bm2nyyq: 0,
|
|
xrcqlc: 0,
|
|
e1d83w: "fnwf5yv",
|
|
Dlnsje: "foue38v",
|
|
a2br6o: "fi4ui2s",
|
|
Bjyk6c5: "f1w4p7kh",
|
|
go7t6h: "fo5b2b9",
|
|
xdqbwx: "f16vizm6",
|
|
Hwb57: "fqolsir",
|
|
umgawz: "fim7wbh"
|
|
},
|
|
rootUnselected: {
|
|
Bw0xxkn: 0,
|
|
oeaueh: 0,
|
|
Bpd4iqm: 0,
|
|
Befb4lg: "f71xx7",
|
|
Byu6kyc: 0,
|
|
n8qw10: 0,
|
|
Bbjhlyh: 0,
|
|
i2cumq: 0,
|
|
Bunx835: 0,
|
|
Bdrgwmp: 0,
|
|
mqozju: 0,
|
|
lbo84a: 0,
|
|
Bksnhdo: 0,
|
|
Bci5o5g: 0,
|
|
u5e7qz: 0,
|
|
Bn40d3w: 0,
|
|
B7b6zxw: 0,
|
|
B8q5s1w: 0,
|
|
B5gfjzb: 0,
|
|
Bbcte9g: 0,
|
|
Bqz3imu: "f1j9b7x8",
|
|
Bj9ihqo: 0,
|
|
Bl51kww: 0,
|
|
B3bvztg: 0,
|
|
Btyt4dx: 0,
|
|
Brhw1f9: "f1tdm9ui",
|
|
Bw81rd7: 0,
|
|
kdpuga: 0,
|
|
dm238s: 0,
|
|
B6xbmo0: 0,
|
|
B3whbx2: "f2krc9w",
|
|
Bp15pi3: "f7x02et",
|
|
Bay5ve9: "f1ry2q4s",
|
|
Bni0232: "f1e9f9ku"
|
|
},
|
|
rootSelected: {
|
|
a9b677: "f1eh74fx",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "fwku66v",
|
|
Bw0xxkn: 0,
|
|
oeaueh: 0,
|
|
Bpd4iqm: 0,
|
|
Befb4lg: "f71xx7",
|
|
Byu6kyc: 0,
|
|
n8qw10: 0,
|
|
Bbjhlyh: 0,
|
|
i2cumq: 0,
|
|
Bunx835: 0,
|
|
Bdrgwmp: 0,
|
|
mqozju: 0,
|
|
lbo84a: 0,
|
|
Bksnhdo: 0,
|
|
Bci5o5g: 0,
|
|
u5e7qz: 0,
|
|
Bn40d3w: 0,
|
|
B7b6zxw: 0,
|
|
B8q5s1w: 0,
|
|
B5gfjzb: 0,
|
|
Bbcte9g: 0,
|
|
Bqz3imu: "f1j9b7x8",
|
|
Bj9ihqo: 0,
|
|
Bl51kww: 0,
|
|
B3bvztg: 0,
|
|
Btyt4dx: 0,
|
|
Brhw1f9: "f1tdm9ui",
|
|
Bw81rd7: 0,
|
|
kdpuga: 0,
|
|
dm238s: 0,
|
|
B6xbmo0: 0,
|
|
B3whbx2: "f2krc9w",
|
|
a2br6o: "f1v6lwa2",
|
|
d9w3h3: 0,
|
|
B3778ie: 0,
|
|
B4j8arr: 0,
|
|
Bl18szs: 0,
|
|
Blrzh8d: "fgm6wgx",
|
|
Bay5ve9: "f1ry2q4s",
|
|
Bni0232: "f1gxfet"
|
|
},
|
|
brand: {
|
|
Bjyk6c5: "fnrv5e1",
|
|
Bp15pi3: "fjsqi2x",
|
|
Glksuk: "frrwqtn",
|
|
Bay5ve9: "f9atwx8",
|
|
Blzl0y7: "fmmpig5",
|
|
Bni0232: "f1e9f9ku"
|
|
},
|
|
unselectedBrand: {
|
|
Bp15pi3: "f7x02et",
|
|
Bjyk6c5: "f1w4p7kh",
|
|
Bay5ve9: "f1ry2q4s",
|
|
Bni0232: "f1e9f9ku"
|
|
}
|
|
}, {
|
|
d: [".f1k6fduh{cursor:pointer;}", ".fc5wo7j{pointer-events:all;}", ".f1van5z7{width:var(--spacingHorizontalS);}", ".f1fkmctz{height:var(--spacingVerticalS);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
p: -1
|
|
}], ".f1e4lqlz{box-sizing:content-box;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f13zj6fq::after{content:\"\";}", ".f2gz7yw::after{display:block;}", ".f1gw3sf2::after{box-sizing:border-box;}", [".f1x820d0::after{border-radius:50%;}", {
|
|
p: -1
|
|
}], [".fnwf5yv::after{border:none;}", {
|
|
p: -2
|
|
}], ".foue38v::after{height:var(--spacingVerticalS);}", ".fi4ui2s::after{width:var(--spacingHorizontalS);}", ".f1w4p7kh::after{background-color:var(--colorNeutralForeground1);}", ".fo5b2b9::after{color:var(--colorNeutralForeground1);}", [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
|
|
p: -1
|
|
}], [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
|
|
p: -2
|
|
}], [".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}", {
|
|
p: -1
|
|
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
|
|
p: -1
|
|
}], ".f7x02et::after{opacity:0.6;}", ".f1eh74fx{width:var(--spacingHorizontalL);}", [".fwku66v{padding:var(--spacingVerticalS) var(--spacingHorizontalXS);}", {
|
|
p: -1
|
|
}], [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
|
|
p: -1
|
|
}], [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
|
|
p: -2
|
|
}], [".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}", {
|
|
p: -1
|
|
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
|
|
p: -1
|
|
}], ".f1v6lwa2::after{width:var(--spacingHorizontalL);}", [".fgm6wgx::after{border-radius:4px;}", {
|
|
p: -1
|
|
}], ".fnrv5e1::after{background-color:var(--colorCompoundBrandBackground);}", ".fjsqi2x::after{opacity:1;}"],
|
|
m: [["@media (forced-colors: active){.f16vizm6::after{forced-color-adjust:none;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.fqolsir::after{background-color:white;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.fim7wbh::after{mix-blend-mode:difference;}}", {
|
|
m: "(forced-colors: active)"
|
|
}]],
|
|
h: [".f1ry2q4s:hover::after{opacity:0.75;}", ".frrwqtn:hover::after{background-color:var(--colorCompoundBrandBackgroundHover);}", ".f9atwx8:hover::after{opacity:1;}"],
|
|
a: [".f1e9f9ku:active::after{opacity:1;}", ".f1gxfet:active::after{opacity:0.65;}", ".fmmpig5:active::after{background-color:var(--colorCompoundBrandBackgroundPressed);}"]
|
|
});
|
|
/**
|
|
* Apply styling to the CarouselNavButton slots based on the state
|
|
*/
|
|
export const useCarouselNavButtonStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const styles = useStyles();
|
|
const {
|
|
selected,
|
|
appearance
|
|
} = state;
|
|
state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
|
|
return state;
|
|
}; |