171 lines
5.8 KiB
JavaScript
171 lines
5.8 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
navItemTokens: function() {
|
|
return navItemTokens;
|
|
},
|
|
useContentStyles: function() {
|
|
return useContentStyles;
|
|
},
|
|
useIconStyles: function() {
|
|
return useIconStyles;
|
|
},
|
|
useIndicatorStyles: function() {
|
|
return useIndicatorStyles;
|
|
},
|
|
useRootDefaultClassName: function() {
|
|
return useRootDefaultClassName;
|
|
},
|
|
useSmallStyles: function() {
|
|
return useSmallStyles;
|
|
}
|
|
});
|
|
const _reacticons = require("@fluentui/react-icons");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const _react = require("@griffel/react");
|
|
const navItemTokens = {
|
|
defaultDrawerWidth: 260,
|
|
indicatorOffset: 16,
|
|
indicatorWidth: 4,
|
|
indicatorHeight: 20,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
|
|
backgroundColorHover: _reacttheme.tokens.colorNeutralBackground4Hover,
|
|
backgroundColorPressed: _reacttheme.tokens.colorNeutralBackground4Pressed,
|
|
animationTokens: {
|
|
animationDuration: _reacttheme.tokens.durationFaster,
|
|
animationFillMode: 'both',
|
|
animationTimingFunction: _reacttheme.tokens.curveLinear
|
|
},
|
|
transitionTokens: {
|
|
transitionDuration: _reacttheme.tokens.durationFaster,
|
|
transitionTimingFunction: _reacttheme.tokens.curveLinear,
|
|
transitionProperty: 'background'
|
|
}
|
|
};
|
|
const useRootDefaultClassName = (0, _react.makeResetStyles)({
|
|
display: 'flex',
|
|
textTransform: 'none',
|
|
position: 'relative',
|
|
justifyContent: 'start',
|
|
alignItems: 'flex-start',
|
|
textAlign: 'left',
|
|
gap: _reacttheme.tokens.spacingVerticalL,
|
|
padding: `${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalMNudge}`,
|
|
backgroundColor: navItemTokens.backgroundColor,
|
|
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
textDecorationLine: 'none',
|
|
border: 'none',
|
|
// this element can change between a button and an anchor
|
|
// so we need to reset box sizing to prevent horizontal overflow
|
|
boxSizing: 'border-box',
|
|
cursor: 'pointer',
|
|
transitionDuration: navItemTokens.animationTokens.animationDuration,
|
|
transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,
|
|
transitionProperty: 'background',
|
|
width: '100%',
|
|
..._reacttheme.typographyStyles.body1,
|
|
':hover': {
|
|
backgroundColor: navItemTokens.backgroundColorHover
|
|
},
|
|
// Use custom insert focus indicator
|
|
'&:focus-visible': {
|
|
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
|
|
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThick} * -1)`
|
|
}
|
|
});
|
|
const useSmallStyles = (0, _react.makeStyles)({
|
|
root: {
|
|
padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalMNudge}`
|
|
}
|
|
});
|
|
const useContentStyles = (0, _react.makeStyles)({
|
|
selected: _reacttheme.typographyStyles.body1Strong
|
|
});
|
|
const useIndicatorStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
'::after': {
|
|
position: 'absolute',
|
|
...navItemTokens.animationTokens,
|
|
animationName: {
|
|
'0%': {
|
|
background: 'transparent'
|
|
},
|
|
'100%': {
|
|
background: _reacttheme.tokens.colorCompoundBrandForeground1
|
|
}
|
|
},
|
|
marginInlineStart: `-${navItemTokens.indicatorOffset}px`,
|
|
backgroundColor: _reacttheme.tokens.colorCompoundBrandForeground1,
|
|
height: `${navItemTokens.indicatorHeight}px`,
|
|
width: `${navItemTokens.indicatorWidth}px`,
|
|
borderRadius: _reacttheme.tokens.borderRadiusCircular,
|
|
content: '""'
|
|
},
|
|
'@media (forced-colors: active)': {
|
|
'::after': {
|
|
outline: `solid 2px ${_reacttheme.tokens.colorTransparentStroke}`,
|
|
outlineOffset: '-2px'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const useIconStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
display: 'grid',
|
|
gridTemplateAreas: 'overlay-area',
|
|
minHeight: '20px',
|
|
minWidth: '20px',
|
|
alignItems: 'top',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
gridArea: 'overlay-area',
|
|
color: 'transparent',
|
|
display: 'none'
|
|
},
|
|
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
gridArea: 'overlay-area',
|
|
display: 'inline'
|
|
}
|
|
},
|
|
selected: {
|
|
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
...navItemTokens.animationTokens,
|
|
display: 'inline',
|
|
animationName: {
|
|
'0%': {
|
|
opacity: 0,
|
|
color: 'transparent'
|
|
},
|
|
'100%': {
|
|
opacity: 1,
|
|
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
|
|
}
|
|
}
|
|
},
|
|
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
...navItemTokens.animationTokens,
|
|
animationName: {
|
|
'0%': {
|
|
opacity: 1,
|
|
color: _reacttheme.tokens.colorNeutralForeground2
|
|
},
|
|
'100%': {
|
|
opacity: 0,
|
|
color: 'transparent'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|