@fluentui/react
Version:
Reusable React components for building web experiences.
81 lines • 2.85 kB
JavaScript
import { normalize, FontSizes, getFocusStyle, getGlobalClassNames } from '@fluentui/style-utilities';
import { IsFocusVisibleClassName } from '@fluentui/utilities';
var GlobalClassNames = {
root: 'ms-WeeklyDayPicker-root',
};
export var styles = function (props) {
var _a;
var className = props.className, theme = props.theme;
var palette = theme.palette;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
normalize,
{
width: 220,
padding: 12,
boxSizing: 'content-box',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
className,
],
dayButton: {
borderRadius: '100%',
},
dayIsToday: {},
dayCell: {
borderRadius: '100%!important',
},
daySelected: {},
navigationIconButton: [
getFocusStyle(theme, { inset: 0 }),
{
width: 12,
minWidth: 12,
height: 0,
overflow: 'hidden',
padding: 0,
margin: 0,
border: 'none',
display: 'flex',
alignItems: 'center',
backgroundColor: palette.neutralLighter,
fontSize: FontSizes.small,
fontFamily: 'inherit',
selectors: (_a = {},
_a["." + classNames.root + ":hover &, ." + IsFocusVisibleClassName + " ." + classNames.root + ":focus &, " +
("." + IsFocusVisibleClassName + " &:focus")] = {
height: 53,
minHeight: 12,
overflow: 'initial',
},
_a["." + IsFocusVisibleClassName + " ." + classNames.root + ":focus-within &"] = {
// edge does not recognize focus-within, so separate it out
height: 53,
minHeight: 12,
overflow: 'initial',
},
_a['&:hover'] = {
cursor: 'pointer',
backgroundColor: palette.neutralLight,
},
_a['&:active'] = {
backgroundColor: palette.neutralTertiary,
},
_a),
},
],
disabledStyle: {
selectors: {
'&, &:disabled, & button': {
color: palette.neutralTertiaryAlt,
pointerEvents: 'none',
},
},
},
};
};
//# sourceMappingURL=WeeklyDayPicker.styles.js.map