1. Advisor
  2. @fluentui/react
  3. functions
  4. @fluentui/react.pxToRem
View all @fluentui/react analysis

How to use the @fluentui/react.pxToRem function in @fluentui/react

To help you get started, we’ve selected a few @fluentui/react 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 microsoft / fluent-ui-react / docs / src / examples / components / Toolbar / Performance / CustomToolbar.perf.tsx View on Github external
ctItemBorderColorFocus: siteVars.colorScheme.default.borderFocus,
      ctItemColor: siteVars.colorScheme.default.foreground,
      ctItemColorFocus: siteVars.colorScheme.default.foregroundFocus,
      ctItemColorHover: siteVars.colorScheme.default.foregroundHover,

      ctItemActiveBackground: siteVars.colorScheme.default.backgroundActive1,
      // FIXME: use variables for colors!
      ctItemActiveBackgroundOverlay:
        'linear-gradient(90deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(135deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 70%),linear-gradient(180deg,rgba(60,62,93,.6) 70%,rgba(60,62,93,0) 94%),linear-gradient(225deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 73%),linear-gradient(270deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(0deg,rgba(98,100,167,.75) 6%,rgba(98,100,167,0) 70%)',
      ctItemActiveColor: siteVars.colorScheme.default.foregroundActive1,

      ctItemDangerBackground: siteVars.colorScheme.red.background2,
      ctItemDangerBackgroundHover: siteVars.colorScheme.red.backgroundHover,
      ctItemDangerColorHover: siteVars.colorScheme.red.foregroundHover,

      ctItemIndicatorPadding: pxToRem(8),

      ctItemNotificationBackgroundColor: siteVars.colors.red[400],
      ctItemNotificationSize: pxToRem(8),

      ctItemPrimaryBackground: siteVars.colorScheme.default.background3,
      ctItemPrimaryBackgroundHover: siteVars.colorScheme.brand.backgroundHover1,
      ctItemPrimaryColorHover: siteVars.colorScheme.brand.foregroundHover1,
    }),
  },
github microsoft / fluent-ui-react / docs / src / examples / components / Toolbar / Performance / CustomToolbar.perf.tsx View on Github external
ctItemColorHover: siteVars.colorScheme.default.foregroundHover,

      ctItemActiveBackground: siteVars.colorScheme.default.backgroundActive1,
      // FIXME: use variables for colors!
      ctItemActiveBackgroundOverlay:
        'linear-gradient(90deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(135deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 70%),linear-gradient(180deg,rgba(60,62,93,.6) 70%,rgba(60,62,93,0) 94%),linear-gradient(225deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 73%),linear-gradient(270deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(0deg,rgba(98,100,167,.75) 6%,rgba(98,100,167,0) 70%)',
      ctItemActiveColor: siteVars.colorScheme.default.foregroundActive1,

      ctItemDangerBackground: siteVars.colorScheme.red.background2,
      ctItemDangerBackgroundHover: siteVars.colorScheme.red.backgroundHover,
      ctItemDangerColorHover: siteVars.colorScheme.red.foregroundHover,

      ctItemIndicatorPadding: pxToRem(8),

      ctItemNotificationBackgroundColor: siteVars.colors.red[400],
      ctItemNotificationSize: pxToRem(8),

      ctItemPrimaryBackground: siteVars.colorScheme.default.background3,
      ctItemPrimaryBackgroundHover: siteVars.colorScheme.brand.backgroundHover1,
      ctItemPrimaryColorHover: siteVars.colorScheme.brand.foregroundHover1,
    }),
  },
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
root: ({ props: p, theme: { siteVariables } }) => ({
        [`&.${classNames.threadReplies.trigger}`]: {
          border: 'none',
          justifyContent: 'start',
          marginBottom: pxToRem(1),
          boxShadow: 'none',
          textDecoration: 'none',

          '&:focus': {
            backgroundColor: siteVariables.colorScheme.default.background,
          },

          '&:hover': {
            backgroundColor: siteVariables.colorScheme.default.background,
          },

          '&:active': {
            backgroundColor: siteVariables.colorScheme.default.background,
          },
        },
      }),
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
[`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
          minWidth: '100%',
          margin: `${pxToRem(1)} 0`,
          paddingLeft: pxToRem(60),
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`&.${classNames.replyEditor}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          backgroundColor: siteVariables.colorScheme.default.background2,
        },
      }),
    },
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
root: ({ props: p, theme: { siteVariables } }) => ({
        [`&.${classNames.threadedMessage.thread}`]: {
          padding: 0,
          width: '100%',
        },
        [`&.${classNames.threadedMessage.threadBody}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,

          [`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,

          [`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
          minWidth: '100%',
          margin: `${pxToRem(1)} 0`,
          paddingLeft: pxToRem(60),
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`&.${classNames.replyEditor}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          backgroundColor: siteVariables.colorScheme.default.background2,
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
root: ({ props: p, theme: { siteVariables } }) => ({
        [`& .${ChatItem.slotClassNames.message}`]: {
          width: '100%',
        },
        [`&.${classNames.threadReplies.chatItem}`]: {
          padding: 0,
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`& .${classNames.threadReplies.chatItemMessage}`]: {
          margin: 0,
        },
        [`& .${classNames.threadReplies.gutter}`]: {
          left: pxToRem(15),
          zIndex: '1',
        },
      }),
    },
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
root: ({ props: p, theme: { siteVariables } }) => ({
        [`&.${classNames.threadedMessage.thread}`]: {
          padding: 0,
          width: '100%',
        },
        [`&.${classNames.threadedMessage.threadBody}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,

          [`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
          minWidth: '100%',
          margin: `${pxToRem(1)} 0`,
          paddingLeft: pxToRem(60),
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
github microsoft / fluent-ui-react / docs / src / prototypes / chatMessages / ThreadedMessages / theme.tsx View on Github external
width: '100%',
        },
        [`&.${classNames.threadedMessage.threadBody}`]: {
          width: '100%',
          minWidth: '100%',
          padding: 0,
          margin: 0,
          borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,

          [`& .${classNames.threadedMessage.innerContent}`]: {
            padding: `${pxToRem(8)} ${pxToRem(16)}`,
          },
          [`& .${classNames.threadedMessage.author}`]: {
            padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
          },
          [`& .${classNames.threadedMessage.timestamp}`]: {
            padding: pxToRem(5),
            color: siteVariables.colorScheme.default.foreground2,
          },
        },
        [`&.${classNames.threadReplies.message}`]: {
          width: '100%',
          minWidth: '100%',
          margin: `${pxToRem(1)} 0`,
          paddingLeft: pxToRem(60),
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`&.${classNames.replyEditor}`]: {
          width: '100%',
          minWidth: '100%',

@fluentui/react

Reusable React components for building web experiences.

GitHub
MIT
Latest version published 7 days ago

Package Health Score

95 / 100
Full package analysis

Popular @fluentui/react functions

Similar packages