@fluentui/react
Version:
Reusable React components for building web experiences.
83 lines • 3.24 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 = {},
// eslint-disable-next-line @fluentui/max-len
_a[".".concat(classNames.root, ":hover &, .").concat(IsFocusVisibleClassName, " .").concat(classNames.root, ":focus &, :host(.").concat(IsFocusVisibleClassName, ") .").concat(classNames.root, ":focus &, ") +
".".concat(IsFocusVisibleClassName, " &:focus, :host(.").concat(IsFocusVisibleClassName, ") &:focus")] = {
height: 53,
minHeight: 12,
overflow: 'initial',
},
// eslint-disable-next-line @fluentui/max-len
_a[".".concat(IsFocusVisibleClassName, " .").concat(classNames.root, ":focus-within &, :host(.").concat(IsFocusVisibleClassName, ") .").concat(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