How to use the @uifabric/fluent-theme.MotionTimings.standard function in @uifabric/fluent-theme

To help you get started, we’ve selected a few @uifabric/fluent-theme 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 / example-app-base / src / components / ColorPalette / ColorPalette.styles.ts View on Github external
alignItems: 'center'
    },
    swatchName: {
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    },
    detail: [
      square,
      {
        display: 'flex',
        alignItems: 'flex-end',
        minWidth: '40%',
        maxWidth: '40%',
        position: 'sticky',
        top: -20,
        transition: `background-color ${MotionDurations.duration2} ${MotionTimings.standard}`
      }
    ],
    detailContentWrapper: {
      padding: '10%',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      width: '100%'
    },
    detailName: {
      fontSize: '28px',
      fontWeight: FontWeights.semibold,
      lineHeight: 32,
      marginBottom: 12
    },
    detailValues: {
      fontSize: '14px'
github microsoft / BotFramework-Composer / Composer / packages / client / src / pages / home / styles.ts View on Github external
background-color: #f2f2f2;
    color: #a19f9d;
  `,
  content: css`
    border: 2px solid #f2f2f2;
    width: auto;
    font-size: smaller;
    word-wrap: break-word;
    color: #a19f9d;
  `,
};

const baseBotItem = {
  container: css`
    box-shadow: ${Depths.depth4};
    transition: box-shadow ${MotionDurations.duration2} ${MotionTimings.standard};

    &:hover,
    &:focus {
      box-shadow: ${Depths.depth16};
    }

    &:active {
      box-shadow: ${Depths.depth0};
    }
  `,
  content: css`
    background-color: #f2f2f2;
  `,
};

export const newBotItem = {