How to use the @uifabric/styling.AnimationStyles.fadeIn200 function in @uifabric/styling

To help you get started, we’ve selected a few @uifabric/styling examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / date-time / src / components / CalendarDayGrid / CalendarDayGrid.styles.ts View on Github external
backgroundColor: palette.neutralLight
        }
      }
    },
    daySelected: [
      dateRangeType !== DateRangeType.Month && {
        backgroundColor: palette.neutralLight + '!important',
        selectors: {
          ['&:hover, &.' + classNames.hoverStyle + ', &.' + classNames.pressedStyle]: {
            backgroundColor: palette.neutralLight + '!important'
          }
        }
      }
    ],
    weekRow: rowAnimationStyle,
    weekDayLabelCell: AnimationStyles.fadeIn200,
    weekNumberCell: {
      margin: 0,
      padding: 0,
      borderRight: '1px solid',
      borderColor: palette.neutralLight,
      backgroundColor: palette.neutralLighterAlt,
      color: palette.neutralSecondary,
      boxSizing: 'border-box',
      width: 28,
      height: 28,
      fontWeight: FontWeights.regular,
      fontSize: FontSizes.small
    },
    dayOutsideBounds: disabledStyle,
    dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {
      color: palette.neutralSecondary,
github OfficeDev / office-ui-fabric-react / packages / date-time / src / components / Calendar / CalendarPicker / CalendarPicker.styles.ts View on Github external
export const getStyles = (props: ICalendarPickerStyleProps): ICalendarPickerStyles => {
  const { className, theme, hasHeaderClickCallback, highlightCurrent, highlightSelected, animateBackwards, animationDirection } = props;
  const { palette } = theme;

  let animationStyle: IRawStyle = {};
  if (animateBackwards !== undefined) {
    if (animationDirection === AnimationDirection.Horizontal) {
      animationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;
    } else {
      animationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;
    }
  }

  const headerAnimationStyle: IRawStyle = animateBackwards !== undefined ? AnimationStyles.fadeIn200 : {};

  return {
    root: [
      normalize,
      {
        width: 196,
        padding: 12,
        boxSizing: 'content-box',
        overflow: 'hidden'
      },
      className
    ],
    headerContainer: {
      display: 'flex'
    },
    currentItemButton: [
github OfficeDev / office-ui-fabric-react / packages / date-time / src / components / Calendar / CalendarDay / CalendarDay.styles.ts View on Github external
export const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => {
  const { className, theme, headerIsClickable, showWeekNumbers, animateBackwards } = props;
  const { palette } = theme;

  const headerAnimationStyle: IRawStyle = animateBackwards !== undefined ? AnimationStyles.fadeIn200 : {};

  const disabledStyle = {
    selectors: {
      '&, &:disabled, & button': {
        color: palette.neutralTertiaryAlt,
        pointerEvents: 'none'
      }
    }
  };

  return {
    root: [
      normalize,
      {
        width: 196,
        padding: 12,